Databases
StackOverflow2013
Postsdbo
POJquery slider first item title issue
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJquery slider first item title issue
    text
    copied!<p>I'm working on a Jquery slider (caroufredsel), where I want some elements to be shown above the slider itself, so outside of the wrapper. I managed to get this working, unfortunatly not for the first slide ! I'm trying to figure this thing out now for a few days and come to the conclusion I've run out of ideas. </p> <p>My javascript is as follows:</p> <pre><code>function showTitle( item ) { $('.pstitle').html(item.attr('data-title')); } function showSlogan( item ) { $('.psslogan').html(item.attr('data-slogan')); } $(function() { $('#pscontainer').carouFredSel({ circular:false, items: { visible: 1, start: false }, width: '100%', auto: false, prev: '#psprev', next: '#psnext', scroll : { onAfter: function( data ) { showTitle( data.items.visible.eq(0) ); showSlogan( data.items.visible.eq(0) ); } }, pagination: { container: '#pager', anchorBuilder: function( nr ) { var title = $(this).find( "div.websitenaam" ).text(); return'&lt;li&gt;&lt;a href="#"&gt;' + title + '&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;'; } } }); }); </code></pre> <p>And my HTML (one slide, for working example with multiple slides see my jsFiddle <a href="http://jsfiddle.net/X3k6b/1/" rel="nofollow">http://jsfiddle.net/X3k6b/1/</a>):</p> <pre><code> &lt;!-- portfolio slider handles --&gt; &lt;div class="pshandles"&gt; &lt;span id="psprev"&gt;&lt;/span&gt; &lt;div class="pstitlecontainer"&gt; &lt;span class="pstitle"&gt;&lt;/span&gt; &lt;span class="psslogan"&gt;&lt;/span&gt; &lt;/div&gt; &lt;!-- einde next/prev en title --&gt; &lt;span id="psnext"&gt;&lt;/span&gt; &lt;!-- einde portfolio slider handles --&gt; &lt;/div&gt; &lt;!-- portfolio slider container --&gt; &lt;div id="pscontainer"&gt; &lt;!-- portfolio item --&gt; &lt;div class="pslide" data-title="Sitename 1" data-slogan="Site slogan 1" id="site1"&gt; &lt;div class="psimg"&gt; &lt;/div&gt; &lt;div class="psinfo"&gt; &lt;/div&gt; &lt;div class="psstats"&gt; &lt;div class="extra"&gt; &lt;div class="websitenaam"&gt;Sitename 1&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- einde portfolio item --&gt; &lt;/div&gt; &lt;!-- end portfolio slider container --&gt; &lt;/div&gt; &lt;!-- sites menu --&gt; &lt;div class="sitesmenu"&gt; &lt;nav&gt; &lt;ul id="pager"&gt; &lt;/ul&gt; &lt;/nav&gt; &lt;!-- end sites menu --&gt; &lt;/div&gt; </code></pre> <p>What I try to do, is showing the values of the .psslide DIV data-title and data-slogan attributes inside the .pstitle and .psslogan DIVs. </p> <p>I've got this working, only the FIRST slide won't display the values. When clicking back and forth, it will show up properly. I guess this has something to do with the onAfter function, but I really can't figure out how I can get this right!</p> <p>See my jsFiddle <a href="http://jsfiddle.net/X3k6b/1/" rel="nofollow">http://jsfiddle.net/X3k6b/1/</a> for a "working" example.</p> <p>Any help would be greatly appreciated.</p> <p>Thanks in advance, </p> <p>regards,</p> <p>Jeroen</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload