StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PONeed to append each post element to each ul li of slider
primarykey
Id
17397425
data
AcceptedAnswerId
17397529
AnswerCount
1
ClosedDate
CommentCount
0
CommunityOwnedDate
CreationDate
2013-07-01T04:24:42.067
FavoriteCount
0
LastActivityDate
2013-07-01T06:14:11.520
LastEditDate
2013-07-01T05:45:49.017
LastEditorUserId
2467126
OwnerUserId
2467126
ParentId
0
PostTypeId
1
Score
1
ViewCount
285
LastEditorDisplayName
text
Body
<p>This should be an easy solution. </p> <p>I have a blog. In each blog post, there is a unique price for every item. On the homepage I have a slider with featured blog posts. I would like to put the price in each li of the slider. </p> <p>I am not sure the best way to do that. </p> <p>Price HTML (within every separate post is a different price)</p> <pre><code><td><span class="item_price">$99.99</span></td> </code></pre> <p>Price CSS: </p> <pre><code> .item_price{ display: block width: 100px; position: relative; font: $(description.font); line-height: 0.84em; -webkit-text-stroke: 0 none; color: $(description.text.color); text-shadow: 1px 1px 0 #e7d799, -1px -1px 0 #e7d799, 1px -1px 0 #e7d799, -1px 1px 0 #e7d799, 1px 1px 0 #e7d799; filter: progid:DXImageTransform.Microsoft.Glow(color=e7d799,strength=5); } </code></pre> <p>Slider javascript:</p> <pre><code><script type='text/javascript'> //<![CDATA[ (function($){$.fn.jCarouselLite=function(o){o=$.extend({btnPrev:null,btnNext:null,btnGo:null,mouseWheel:false,auto:null,speed:200,easing:null,vertical:false,circular:true,visible:3,start:0,scroll:1,beforeStart:null,afterEnd:null},o||{});return this.each(function(){var running=false,animCss=o.vertical?"top":"left",sizeCss=o.vertical?"height":"width";var div=$(this),ul=$("ul:first",div),tLi=$(".car",ul),tl=tLi.size(),v=o.visible;if(o.circular){ul.prepend(tLi.slice(tl-v-1+1).clone()).append(tLi.slice(0,v).clone());o.start+=v}var li=$(".car",ul),itemLength=li.size(),curr=o.start;div.css("visibility","visible");li.css({overflow:"hidden",float:o.vertical?"none":"left"});ul.css({padding:"0",position:"relative","list-style-type":"none","z-index":"1"});div.css({overflow:"hidden","z-index":"2"});var liSize=o.vertical?height(li):width(li);var ulSize=liSize*itemLength;var divSize=liSize*v;li.css({width:li.width()});ul.css(sizeCss,ulSize+"px").css(animCss,-(curr*liSize));div.css(sizeCss,divSize+"px");if(o.btnPrev)$(o.btnPrev).click(function(){return go(curr-o.scroll)});if(o.btnNext)$(o.btnNext).click(function(){return go(curr+o.scroll)});if(o.btnGo)$.each(o.btnGo,function(i,val){$(val).click(function(){return go(o.circular?o.visible+i:i)})});if(o.mouseWheel&&div.mousewheel)div.mousewheel(function(e,d){return d>0?go(curr-o.scroll):go(curr+o.scroll)});if(o.auto)setInterval(function(){go(curr+o.scroll)},o.auto+o.speed);function vis(){return li.slice(curr).slice(0,v)};function go(to){if(!running){if(o.beforeStart)o.beforeStart.call(this,vis());if(o.circular){if(to<=o.start-v-1){ul.css(animCss,-((itemLength-(v*2))*liSize)+"px");curr=to==o.start-v-1?itemLength-(v*2)-1:itemLength-(v*2)-o.scroll}else if(to>=itemLength-v+1){ul.css(animCss,-((v)*liSize)+"px");curr=to==itemLength-v+1?v+1:v+o.scroll}else curr=to}else{if(to<0||to>itemLength-v)return;else curr=to}running=true;ul.animate(animCss=="left"?{left:-(curr*liSize)}:{top:-(curr*liSize)},o.speed,o.easing,function(){if(o.afterEnd)o.afterEnd.call(this,vis());running=false});if(!o.circular){$(o.btnPrev+","+o.btnNext).removeClass("disabled");$((curr-o.scroll<0&&o.btnPrev)||(curr+o.scroll>itemLength-v&&o.btnNext)||[]).addClass("disabled")}}return false}})};function css(el,prop){return parseInt($.css(el[0],prop))||0};function width(el){return el[0].offsetWidth+css(el,'marginLeft')+css(el,'marginRight')};function height(el){return el[0].offsetHeight+css(el,'marginTop')+css(el,'marginBottom')}})(jQuery); //]]> </script> <script type='text/javascript'> //<![CDATA[ imgr = new Array(); imgr[0] = "http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg"; showRandomImg = false; aBold = false; summaryPost = 0; summaryTitle = 25; numposts1 = 12; label1 = "Featured Deals"; function removeHtmlTag(strx,chop){ var s = strx.split("<"); for(var i=0;i<s.length;i++){ if(s[i].indexOf(">")!=-1){ s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); } } s = s.join(""); s = s.substring(0,chop-1); return s; } function showrecentposts(json) { j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0; img = new Array(); document.write('<ul>'); for (var i = 0; i < numposts1; i++) { var entry = json.feed.entry[i]; var posttitle = entry.title.$t; var pcm; var posturl; if (i == json.feed.entry.length) break; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { posturl = entry.link[k].href; break; } } for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') { pcm = entry.link[k].title.split(" ")[0]; break; } } if ("content" in entry) { var postcontent = entry.content.$t;} else if ("summary" in entry) { var postcontent = entry.summary.$t;} else va var textinside = postcontent.substring(postcontent.indexOf("[starttext]")+11,postcontent.indexOf("[endtext]")); postdate = entry.published.$t; if(j>imgr.length-1) j=0; img[i] = imgr[j]; s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5); if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d; //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : ''; var month = [1,2,3,4,5,6,7,8,9,10,11,12]; var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]; var day = postdate.split("-")[2].substring(0,2); var m = postdate.split("-")[1]; var y = postdate.split("-")[0]; for(var u2=0;u2<month.length;u2++){ if(parseInt(m)==month[u2]) { m = month2[u2] ; break; } } var daystr = day+ ' ' + m + ' ' + y; var trtd = '<li class="car"><div class="thumb"><a href="'+posturl+'"><img width="200" height="170" class="alignnone" src="'+img[i]+'"/></a></div><p><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></p></li>'; document.write(trtd); j++; } document.write('</ul>'); } //]]> </script> <script type='text/javascript'> (function($) { $(document).ready(function(){ $(&quot;#carousel .container&quot;).jCarouselLite({ auto:9999, scroll: 12, speed: 50000, visible: 4, start: 0, circular: true, btnPrev: &quot;#previous_button&quot;, btnNext: &quot;#next_button&quot; }); })})(jQuery) </script> </code></pre> <p>Slider HTML: </p> <pre><code> <div id='carousel'> <div id='previous_button'/> <div class='container'> <script> document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/&quot;+label1+&quot;?max- results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in- script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;); </script> <div class='clear'/> </div> <div id='next_button'/> </div> </code></pre> <p>Slider CSS:</p> <pre><code> #carousel{ width:1000px; height:253px; position:relative; display:block; margin: 0 auto; } #carousel .container{ position:absolute; margin: 0 auto; width:900px; height:253px; overflow:hidden; } #carousel #previous_button{ position:absolute; left:10px; width:24px; height:253px; background:url(http://4.bp.blogspot.com/--_XlWHrKaTY/UbVUIi1kJII/AAAAAAAAFIQ/Y4Mh8BJ7eqQ/s1600/slide-sides.png) center; z-index:100; } #carousel #next_button{ position:absolute; right:9px; width:24px; height:253px; background:url(http://4.bp.blogspot.com/--_XlWHrKaTY/UbVUIi1kJII/AAAAAAAAFIQ/Y4Mh8BJ7eqQ/s1600/slide-sides.png) center; z-index:100; } #carousel ul{ width:100000px; position:relative; margin-top:0px; left: -35px; } #carousel ul li{ background:#fff; display:inline; float:left; text-align:center; width:200px; height:220px; margin:0 4px 20px 7px; padding:13px; } #carousel ul li a.slider_title{ display:block; margin-top:-5px; color: #395f1e; font-size: 13px; font-weight: bold; line-height: 20px; } #carousel a img{ display:block; background:#fff; } </code></pre> <p>I hope all the code gives you a better idea of what I am trying to do. I am trying to get every price from each post and append each price to each li of the slider. </p> <p>I tried: </p> <pre><code> $(function(){ $(".item_price") .clone() .appendTo("#carousel ul li"); }); </code></pre> <p>And it appends all the different prices to the last post in the slider. All stacked on top of each other. </p> <p>I want the prices to be on top of each image in the slider. </p> <p>I also tried: </p> <pre><code> $('.item_price').each(function(index,e){ $('.item_price').eq(index).appendTo($('#carousel ul li').children().eq(index)); }); </code></pre> <p>JSON code: </p> <pre><code> <b:if cond='data:blog.url == data:blog.homepageUrl'> <center><div id='featured-deals'><a href='http://www.example.com/search/label/Featured%20Deals' title='Show all Featured Deals'><h6>Featured Deals</h6></a></div></center> <div id='carousel'> <div id='previous_button'/> <div class='container'> <script> document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/&quot;+label1+&quot;?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;); </script> <div class='clear'/> </div> <div id='next_button'/> </div> <script type='text/javascript'> (function($) { $(document).ready(function(){ $(&quot;#carousel .container&quot;).jCarouselLite({ auto:9999, scroll: 12, speed: 50000, visible: 4, start: 0, circular: true, btnPrev: &quot;#previous_button&quot;, btnNext: &quot;#next_button&quot; }); })})(jQuery) </script> </b:if> </code></pre>
Tags
<javascript><foreach><slider><append><blogger>
Title
Need to append each post element to each ul li of slider
singulars
PostAcceptedAnswerId
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. USNik
UserOwnerUserId
1. USNik
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
VotesPostIdCreationDate
1. VO
  singulars
  PostPostId
  PONeed to append each post element to each ul li of slider
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTUpMod
CommentsPostId
1. This table or related slice is empty.

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.