Databases
StackOverflow2013
Postsdbo
PObxSlider - hidden(display:none) slider breaks when browser resized
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PObxSlider - hidden(display:none) slider breaks when browser resized
    primarykey
    data
    text
    <p>I'm having an issue with the bxSlider where where if I resize my browser then navigate to another slider(hide all other sliders and show clicked slider menu(using grey nav bar)), all hidden sliders then crash when you try to view them.</p> <p>FYI: Initially I have all sliders visible so they all initialise/load then once a user selects another slider using the grey menu I hide all others and show the one they want.</p> <p>Please see an example here: <a href="http://faithandsony.co.uk/SON799/" rel="nofollow">http://faithandsony.co.uk/SON799/</a></p> <p>So process is 1. Load page 2. Click 'Applications' 3. Resize browser 4. Click 'Products with similar features' - This slider should now be broken, along with all other hidden sliders.</p> <p>Can anyone please shed some light on this problem? It doesn't seem to make sense to me why even the slightest resize of my browser breaks all hidden ones. I'm sure what browsers do/fire when they are resized, but my BxSlider seems to be affected by it. I have seem this error in Chrome, Safari, Firefox and Opera.</p> <p>Many thanks.</p> <p>p.s I'm sure its something to do with my markup but I just can't figure it out.</p> <p>EDIT:</p> <p>HTML:</p> <pre><code>&lt;div class="wrap"&gt; &lt;div class="hub-bar-con"&gt; &lt;div class="cat-nav"&gt; &lt;span class="pointer"&gt;&lt;/span&gt; &lt;a href="javascript:;" class="active"&gt;Products with similar features&lt;/a&gt; &lt;a href="javascript:;"&gt;Applications&lt;/a&gt; &lt;a href="javascript:;"&gt;Case Studies&lt;/a&gt; &lt;a href="javascript:;"&gt;Technology&lt;/a&gt; &lt;/div&gt; &lt;div class="slider-wrap-1 current"&gt; &lt;div class="fade-l"&gt;&lt;/div&gt; &lt;div class="fade-r"&gt;&lt;/div&gt; &lt;div class="slider1"&gt; &lt;a href="javascript:;"&gt;&lt;div class="slide"&gt;&lt;img border="0" src="img/img-16.jpg"&gt;&lt;p&gt;Cinematography &amp; Super Ted!&lt;/p&gt;&lt;/div&gt;&lt;/a&gt; &lt;a href="javascript:;"&gt;&lt;div class="slide"&gt;&lt;img border="0" src="img/img-17.jpg"&gt;&lt;p&gt;HD/SD Camcorders Lorem Ipsum&lt;/p&gt;&lt;/div&gt;&lt;/a&gt; &lt;a href="javascript:;"&gt;&lt;div class="slide"&gt;&lt;img border="0" src="img/img-18.jpg"&gt;&lt;p&gt;Camera Systems Lorem Ipsum&lt;/p&gt;&lt;/div&gt;&lt;/a&gt; &lt;a href="javascript:;"&gt;&lt;div class="slide"&gt;&lt;img border="0" src="img/img-19.jpg"&gt;&lt;p&gt;Decks, Recorders Lorem Ipsum&lt;/p&gt;&lt;/div&gt;&lt;/a&gt; &lt;a href="javascript:;"&gt;&lt;div class="slide"&gt;&lt;img border="0" src="img/img-20.jpg"&gt;&lt;p&gt;Pro Media Lorem Ipsum&lt;/p&gt;&lt;/div&gt;&lt;/a&gt; &lt;a href="javascript:;"&gt;&lt;div class="slide"&gt;&lt;img border="0" src="img/img-16.jpg"&gt;&lt;p&gt;Sample One Lorem Ipsum&lt;/p&gt;&lt;/div&gt;&lt;/a&gt; &lt;a href="javascript:;"&gt;&lt;div class="slide"&gt;&lt;img border="0" src="img/img-17.jpg"&gt;&lt;p&gt;Sample Two Lorem Ipsum&lt;/p&gt;&lt;/div&gt;&lt;/a&gt; &lt;a href="javascript:;"&gt;&lt;div class="slide"&gt;&lt;img border="0" src="img/img-18.jpg"&gt;&lt;p&gt;Sample Three Lorem Ipsum&lt;/p&gt;&lt;/div&gt;&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="slider-wrap-2"&gt; &lt;div class="fade-l"&gt;&lt;/div&gt; &lt;div class="fade-r"&gt;&lt;/div&gt; &lt;div class="slider2"&gt; &lt;a href="javascript:;"&gt;&lt;div class="slide"&gt;&lt;img border="0" src="img/img-18.jpg"&gt;&lt;p&gt;Pro Media&lt;/p&gt;&lt;/div&gt;&lt;/a&gt; &lt;a href="javascript:;"&gt;&lt;div class="slide"&gt;&lt;img border="0" src="img/img-16.jpg"&gt;&lt;p&gt;HD/SD Camcorders&lt;/p&gt;&lt;/div&gt;&lt;/a&gt; &lt;a href="javascript:;"&gt;&lt;div class="slide"&gt;&lt;img border="0" src="img/img-17.jpg"&gt;&lt;p&gt;Decks, Recorders&lt;/p&gt;&lt;/div&gt;&lt;/a&gt; &lt;a href="javascript:;"&gt;&lt;div class="slide"&gt;&lt;img border="0" src="img/img-20.jpg"&gt;&lt;p&gt;Decks, Recorders&lt;/p&gt;&lt;/div&gt;&lt;/a&gt; &lt;a href="javascript:;"&gt;&lt;div class="slide"&gt;&lt;img border="0" src="img/img-19.jpg"&gt;&lt;p&gt;Pro Media&lt;/p&gt;&lt;/div&gt;&lt;/a&gt; &lt;a href="javascript:;"&gt;&lt;div class="slide"&gt;&lt;img border="0" src="img/img-16.jpg"&gt;&lt;p&gt;Sample One&lt;/p&gt;&lt;/div&gt;&lt;/a&gt; &lt;a href="javascript:;"&gt;&lt;div class="slide"&gt;&lt;img border="0" src="img/img-18.jpg"&gt;&lt;p&gt;Sample Two&lt;/p&gt;&lt;/div&gt;&lt;/a&gt; &lt;a href="javascript:;"&gt;&lt;div class="slide"&gt;&lt;img border="0" src="img/img-19.jpg"&gt;&lt;p&gt;Sample Three&lt;/p&gt;&lt;/div&gt;&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="slider-wrap-3"&gt; &lt;div class="fade-l"&gt;&lt;/div&gt; &lt;div class="fade-r"&gt;&lt;/div&gt; &lt;div class="slider3"&gt; &lt;a href="javascript:;"&gt;&lt;div class="slide"&gt;&lt;img border="0" src="img/img-19.jpg"&gt;&lt;p&gt;Pro Media&lt;/p&gt;&lt;/div&gt;&lt;/a&gt; &lt;a href="javascript:;"&gt;&lt;div class="slide"&gt;&lt;img border="0" src="img/img-17.jpg"&gt;&lt;p&gt;HD/SD Camcorders&lt;/p&gt;&lt;/div&gt;&lt;/a&gt; &lt;a href="javascript:;"&gt;&lt;div class="slide"&gt;&lt;img border="0" src="img/img-16.jpg"&gt;&lt;p&gt;Decks, Recorders&lt;/p&gt;&lt;/div&gt;&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="slider-wrap-4"&gt; &lt;div class="fade-l"&gt;&lt;/div&gt; &lt;div class="fade-r"&gt;&lt;/div&gt; &lt;div class="slider4"&gt; &lt;a href="javascript:;"&gt;&lt;div class="slide"&gt;&lt;img border="0" src="img/img-20.jpg"&gt;&lt;p&gt;Pro Media&lt;/p&gt;&lt;/div&gt;&lt;/a&gt; &lt;a href="javascript:;"&gt;&lt;div class="slide"&gt;&lt;img border="0" src="img/img-17.jpg"&gt;&lt;p&gt;HD/SD Camcorders&lt;/p&gt;&lt;/div&gt;&lt;/a&gt; &lt;a href="javascript:;"&gt;&lt;div class="slide"&gt;&lt;img border="0" src="img/img-16.jpg"&gt;&lt;p&gt;Decks, Recorders&lt;/p&gt;&lt;/div&gt;&lt;/a&gt; &lt;a href="javascript:;"&gt;&lt;div class="slide"&gt;&lt;img border="0" src="img/img-19.jpg"&gt;&lt;p&gt;Decks, Recorders Lorem Ipsum&lt;/p&gt;&lt;/div&gt;&lt;/a&gt; &lt;a href="javascript:;"&gt;&lt;div class="slide"&gt;&lt;img border="0" src="img/img-17.jpg"&gt;&lt;p&gt;Pro Media Lorem Ipsum&lt;/p&gt;&lt;/div&gt;&lt;/a&gt; &lt;a href="javascript:;"&gt;&lt;div class="slide"&gt;&lt;img border="0" src="img/img-20.jpg"&gt;&lt;p&gt;Sample One Lorem Ipsum&lt;/p&gt;&lt;/div&gt;&lt;/a&gt; &lt;a href="javascript:;"&gt;&lt;div class="slide"&gt;&lt;img border="0" src="img/img-18.jpg"&gt;&lt;p&gt;Sample Two Lorem Ipsum&lt;/p&gt;&lt;/div&gt;&lt;/a&gt; &lt;a href="javascript:;"&gt;&lt;div class="slide"&gt;&lt;img border="0" src="img/img-19.jpg"&gt;&lt;p&gt;Sample Three Lorem Ipsum&lt;/p&gt;&lt;/div&gt;&lt;/a&gt; &lt;a href="javascript:;"&gt;&lt;div class="slide"&gt;&lt;img border="0" src="img/img-20.jpg"&gt;&lt;p&gt;Pro Media&lt;/p&gt;&lt;/div&gt;&lt;/a&gt; &lt;a href="javascript:;"&gt;&lt;div class="slide"&gt;&lt;img border="0" src="img/img-17.jpg"&gt;&lt;p&gt;HD/SD Camcorders&lt;/p&gt;&lt;/div&gt;&lt;/a&gt; &lt;a href="javascript:;"&gt;&lt;div class="slide"&gt;&lt;img border="0" src="img/img-16.jpg"&gt;&lt;p&gt;Decks, Recorders&lt;/p&gt;&lt;/div&gt;&lt;/a&gt; &lt;a href="javascript:;"&gt;&lt;div class="slide"&gt;&lt;img border="0" src="img/img-19.jpg"&gt;&lt;p&gt;Decks, Recorders Lorem Ipsum&lt;/p&gt;&lt;/div&gt;&lt;/a&gt; &lt;a href="javascript:;"&gt;&lt;div class="slide"&gt;&lt;img border="0" src="img/img-17.jpg"&gt;&lt;p&gt;Pro Media Lorem Ipsum&lt;/p&gt;&lt;/div&gt;&lt;/a&gt; &lt;a href="javascript:;"&gt;&lt;div class="slide"&gt;&lt;img border="0" src="img/img-20.jpg"&gt;&lt;p&gt;Sample One Lorem Ipsum&lt;/p&gt;&lt;/div&gt;&lt;/a&gt; &lt;a href="javascript:;"&gt;&lt;div class="slide"&gt;&lt;img border="0" src="img/img-18.jpg"&gt;&lt;p&gt;Sample Two Lorem Ipsum&lt;/p&gt;&lt;/div&gt;&lt;/a&gt; &lt;a href="javascript:;"&gt;&lt;div class="slide"&gt;&lt;img border="0" src="img/img-19.jpg"&gt;&lt;p&gt;Sample Three Lorem Ipsum&lt;/p&gt;&lt;/div&gt;&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;!--&lt;a class="hide"&gt;Hide 2&lt;/a&gt; &lt;a class="show"&gt;Show 2&lt;/a&gt;--&gt; </code></pre> <p></p> <p>SCRIPT:</p> <pre><code>$(window).load(function() { //Grab the width of all .cat-nav a elements(including padding) //then half that value and store it in halfWidth[ ] var halfWidth =[]; $('.cat-nav a').each(function(index, element) { halfWidth.push($(this).outerWidth(true) / 2); }); //Use .position to find the left hand edge position of each .cat-nav a element //then add half the width of each .cat-nav a element to find the centre(left:?px) of each //of the .cat-nav a elements. Store them in an array for animating the pointer to // - 7 value reduces location by half of the width of the pointer to make sure the pointer //sits centrally var finalPositions = []; $('.cat-nav a').each(function(index, element) { var positionNew = $(this).position(); finalPositions.push((positionNew.left + halfWidth[index]) - 7); }); $('.pointer').css('left',finalPositions[0]).show(); function checkPHeights(){ $('.slider1 .slide p').each(function(index, element) { if ($(this).height() &gt; 22) { $(this).css('margin','-7px 0 10px 0'); } }); $('.slider2 .slide p').each(function(index, element) { if ($(this).height() &gt; 22) { $(this).css('margin','-7px 0 10px 0'); } }); $('.slider3 .slide p').each(function(index, element) { if ($(this).height() &gt; 22) { $(this).css('margin','-7px 0 10px 0'); } }); $('.slider4 .slide p').each(function(index, element) { if ($(this).height() &gt; 22) { $(this).css('margin','-7px 0 10px 0'); } }); } checkPHeights(); //animate pointer to relevant category element $('.cat-nav a').click(function() { $('.cat-nav a').removeClass('active'); $(this).addClass('active'); var indx = $(this).index(); if (indx == 1) {/*hideSlider(2);*/ $('.slider-wrap-2,.slider-wrap-3,.slider-wrap-4').fadeOut(300).removeClass('current'); $('.slider-wrap-1').fadeIn(300).addClass('current');} if (indx == 2) {/*hideSlider(1);*/ $('.slider-wrap-1,.slider-wrap-3,.slider-wrap-4').fadeOut(300).removeClass('current'); $('.slider-wrap-2').fadeIn(300).addClass('current');} if (indx == 3) {/*hideSlider(1);*/ $('.slider-wrap-1,.slider-wrap-2,.slider-wrap-4').fadeOut(300).removeClass('current'); $('.slider-wrap-3').fadeIn(300).addClass('current');} if (indx == 4) {/*hideSlider(1);*/ $('.slider-wrap-1,.slider-wrap-2,.slider-wrap-3').fadeOut(300).removeClass('current'); $('.slider-wrap-4').fadeIn(300).addClass('current');} var catIndex = ($(this).index() - 1); $('.pointer').animate({left:finalPositions[catIndex]},800); }); }); $(document).ready(function() { var slider1 = $('.slider1').bxSlider({ slideWidth: 175, useCSS: false, speed: 1500, onSlideBefore: function(){ $('.fade-l, .fade-r ').show(); }, onSlideAfter: function(){ $('.fade-l, .fade-r ').fadeOut('fast'); }, minSlides: 1, maxSlides: 5, infiniteLoop: false, slideMargin: 12 }); var slider2 = $('.slider2').bxSlider({ slideWidth: 175, useCSS: false, speed: 1500, onSlideBefore: function(){ $('.fade-l, .fade-r ').show(); }, onSlideAfter: function(){ $('.fade-l, .fade-r ').fadeOut('fast'); }, minSlides: 1, maxSlides: 5, infiniteLoop: false, slideMargin: 12 }); var slider3 = $('.slider3').bxSlider({ slideWidth: 175, useCSS: false, speed: 1500, onSlideBefore: function(){ $('.fade-l, .fade-r ').show(); }, onSlideAfter: function(){ $('.fade-l, .fade-r ').fadeOut('fast'); }, minSlides: 1, maxSlides: 5, infiniteLoop: false, slideMargin: 12 }); var slider4 = $('.slider4').bxSlider({ slideWidth: 175, useCSS: false, speed: 1500, onSlideBefore: function(){ $('.fade-l, .fade-r ').show(); }, onSlideAfter: function(){ $('.fade-l, .fade-r ').fadeOut('fast'); }, minSlides: 1, maxSlides: 5, infiniteLoop: false, slideMargin: 12 }); $('.bx-pager.bx-default-pager').each(function(index, element) { var sliderWrapIndex = index + 1; var pagerLength = $('.slider-wrap-' + sliderWrapIndex + ' .bx-pager.bx-default-pager &gt; div').length; if ( pagerLength &lt; 2 ) { $('.slider-wrap-' + sliderWrapIndex + ' .bx-pager.bx-default-pager').hide(); } }); $('.hide').click(function(e) { $('.slider-wrap-2').fadeOut(1000); }); $('.show').click(function(e) { $('.slider-wrap-2').fadeIn(1000); }); </code></pre> <p>});</p>
    singulars
    1. This table or related slice is empty.
    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. This table or related slice is empty.
    1. This table or related slice is empty.
    1. COWe are not here to debug other members sites, please post your relevant code in your question
      singulars
      1. PObxSlider - hidden(display:none) slider breaks when browser resized
      1. USA. Wolff
    2. CORight, but surely the best way to view the code as it stands is where it is operating(my site). If I paste all the code in here I would of thought it would just be a huge headache for anyone trying to see the problem. I only supplied the link because I thought it would be of better use. Alas I will update with the code.
      singulars
      1. PObxSlider - hidden(display:none) slider breaks when browser resized
      1. USdaniel blythe
 

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