CODEWITHSUNDEEP
javascriptjquery
Dean Elliott
Dean Elliott

Reputation: 729

Strange issue with jQuery .hide()

I'm building a site for a client but I've encountered a strange bug with jQuery's .hide() function

If you check out this sample url and click any one of the thumbnails you'll see the image is aligned to the left. Now if you open or switch to any other browser tab and then go back to the sample url the image is centered...

The image should be centered, and worked just fine until I added this;

$(".single-content-overlay").hide();

to my scripts file...

Anyone have any ideas why this might be happening and how I might be able to fix it?

Upvotes: 2

Views: 92

Answers (1)

davidbuzatto
davidbuzatto

Reputation: 9424

You have a problem with CSS (probably generated by your slideshow javascript lib). When the browser gets the focus again, the <li>s width are recaldulated. This:

<li class="slide flex-active-slide" style="width: 0px; float: left; display: block;">
    <img alt="#" src="http://www.robotwp.com/clintenglish/wp-content/themes/clintenglish/images/samples/marley.jpg">
</li>
<li class="slide" style="width: 0px; float: left; display: block;">
    <img alt="#" src="http://www.robotwp.com/clintenglish/wp-content/themes/clintenglish/images/samples/marley.jpg">
</li>

Becomes this:

<li class="slide flex-active-slide" style="width: 1088px; float: left; display: block;">
    <img alt="#" src="http://www.robotwp.com/clintenglish/wp-content/themes/clintenglish/images/samples/marley.jpg">
</li>
<li class="slide" style="width: 1088px; float: left; display: block;">
    <img alt="#" src="http://www.robotwp.com/clintenglish/wp-content/themes/clintenglish/images/samples/marley.jpg">
</li>

The same behavior happens in Chrome, Firefox and IExplorer (all the latest versions). I'm almost certain that this is a issue (or a feature?) with your slideshow lib. Try to define the <li>s width manually to see if the problem continues.

Upvotes: 3

Related Questions