Databases
StackOverflow2013
Postsdbo
POjQuery hover function not working on 'BxSlider' loop
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery hover function not working on 'BxSlider' loop
    primarykey
    data
    text
    <p>Hi guys I have a slightly strange problem, and basically on this page:</p> <p><a href="http://www.carbondelight.co.uk" rel="nofollow">http://www.carbondelight.co.uk</a></p> <p>I have 6 images/products on an infinite loop powered by the BxSlider (<a href="http://bxslider.com/" rel="nofollow">http://bxslider.com/</a>), that bit is simple.</p> <p>I have then coded in jQuery a function that displays the products name when you hover over the respective product image.</p> <p>The problem I'm having is that the hovering only works on each loop and does not cross over to the next loop. For example if you take a look at the page mentioned earlier you'll notice that the last image in the loop is two back seats of a red car, and if you try and hover between that image and the boat image next to it you will get no change in the product name. But if you move completley into the next loop all of the jQuery works again. And for the life of me I cannot solve this issue. Does anyone have any ideas? </p> <p>Thank you everyone in advance.</p> <p>Daniel.</p> <p>The code is here.</p> <pre><code> $('.newp-hover').mouseenter(function() { var imgValue = $(this).attr("name"); //alert(imgValue); $('.newp-pre').hide(); $('.newp-name').hide(); $('.' + imgValue).fadeIn('slow'); }); </code></pre> <p>and the HTML is here</p> <pre><code>&lt;div id="new-p-con"&gt; &lt;div class='newp-title textshadow'&gt;NEW PRODUCTS&lt;/div&gt;&lt;div class='newp-bt-con'&gt;&lt;div class="newp-left-btn" id="go-prev2"&gt;&lt;/div&gt;&lt;div class="newp-right-btn" id="go-next2"&gt;&lt;/div&gt;&lt;/div&gt; &lt;div class="newp-img-con"&gt; &lt;ul id="slider5"&gt; &lt;?php for ( $j = 0 ; $j &lt; $rows ; ++$j ) { $row = mysql_fetch_row($result3); $sql4 = "SELECT smlImg FROM imageTable WHERE partID='$row[0]'"; $product = performQuery($sql4); //displays the product images echo "&lt;li class='newp-li'&gt;&lt;a href='prodview.php?id=$row[0]' class='newp-hover' name='$j'&gt;&lt;img src='$image$product[0]' /&gt;&lt;/a&gt;&lt;/li&gt;"; } ?&gt; &lt;/ul&gt; &lt;div class="newp-name-con"&gt; &lt;?php //finds the first product name $showyou = performQuery($sql5); for ( $j = 0 ; $j &lt; $rows5 ; ++$j ) { $row2 = mysql_fetch_row($result5); //displays the first product name so a name shows when page is loaded echo "&lt;p class='none newp-name $j'&gt;$row2[1]&lt;/p&gt;"; } ?&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p></p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USdaniel blythe
    1. USdaniel blythe
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POjQuery hover function not working on 'BxSlider' loop
      1. This table or related slice is empty.
      1. VTUpMod
    1. COHave you tried using a [`live event`](http://api.jquery.com/live/) instead of binding the `mouseenter` event directly like you are doing (so `$('.newp-hover').mouseenter(` becomes `$('.newp-hover').live('mouseenter', `)
      singulars
      1. POjQuery hover function not working on 'BxSlider' loop
      1. USChad
    2. COI have not, how does this function operate differently? Thanks for the reply.
      singulars
      1. POjQuery hover function not working on 'BxSlider' loop
      1. USdaniel blythe
    3. CObasically when you use `.mouseover()` it binds to the elements that exists when you make the call. Using `.live()` It binds to those that exists and all future ones created. I think your problem is more are added later that don't get bound when you originally bind up there.
      singulars
      1. POjQuery hover function not working on 'BxSlider' loop
      1. USChad
 

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.

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