We Keep Coding

link click works only once

i have hidden div that contain a div inside it and this div is hidden by default , and i have link should bring the content of (#mobiles_thumbs) div , every thing work perfectly just for first click on the link and the second click the div that change its content disappear i used (on) delegate . this is my code :
//and here my jquery code for handle the link click :
$('#products').on('click', 'a', function() {
$("#thumbs").html($("#thumbs_collection #mobiles_thumbs"));
/* here #thumbs_collection is the name of big div that contain six
div inside it.
*/
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- this is the hidden div -->
<div id="thumbs_collection">
<div id="mobiles_thumbs" style="visibility:hidden">
<img alt="mobile1" src="images/mobile1.jpg">
<img alt="mobile2" src="images/mobile2.jpg">
</div>
</div>
<div id="products" class="container-fluid">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1>Our Products </h1>
</div>
<div class="col-sm-12">
<ul>
<li> Mobiles </li>
<li> Swatches </li>
<li> Chairs </li>
<li> Boxs </li>
<li> Doors </li>
<li> Windows </li>
</ul>
</div>
<div id="thumbs">
<!--this div for load the products -->
</div>
</div>
</div>

Try cloning the element fist and don't forget to toggle visibility after the html append
var temp = $("#thumbs_collection #mobiles_thumbs").clone();
$('#products').on('click', 'a', function() {
$("#thumbs").html(temp);
});

isotope filter - prevent "selected" category from loading all images

I've tried the suggested fixes on Stack Overflow but can't seem to fix my issue. I'm trying to get a "selected" category to keep from loading all the images on page load. I've tried to remove the "Show All" line but that does not help. I believe this to be a js problem.
Here's my html and js:
HTML:
<div id="isotope-options">
<ul id="isotope-filters" class="clearfix">
<li>Show All</li>
<li>Recital Photos</li>
<li>Home Photos</li>
<li>Recital Videos</li>
</ul>
</div>
JS:
I couldn't fit all the js here, so here's a link:
isotope filter js
Here's the code you requested:
<li class="span3 isotope-element isotope-filter2">
<div class="thumb-isotope">
<div class="thumbnail clearfix">
<a href="gallery_images/recital_pics/1pm hippie group.jpg">
<div class="banner_inner">
<div class="banner_inner2">
<figure>
<img src="gallery_images/recital_pics/1pm hippie group - sm.jpg" alt=""><em></em>
</figure>
<div class="caption">
Group 1
</div>
</div>
</div>
<img src="images/banner_shadow.png" alt="" class="banner_shadow">
</a>
</div>
</div>
</li>

You can filter using this
$grid.isotope({ filter: '.selected' });

Slider automatically pulls page back towards the top when it switches

We're using a recently CSS-modified Featured Content Rotator with jQuery (http://demo.webdeveloperplus.com/featured-content-slider/) on our Drupal 6 site.
If a user scrolls down to read things towards the bottom of the page, once the slider automatically shifts to the next content fragment the page instantly jumps back up to halfway up the slider container every time it switches.
The only time this doesn't happen is when the viewer is a logged-in admin (assuming because of the extra back-end scripts running).
Any idea what could cause this or how to stop it?
Thanks so much in advance!
<script type="text/javascript">
$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});
</script>
<div id="featured">
<ul class="ui-tabs-nav">
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1">
<img alt="" src="image-tn-1.jpg" /><span>Title 1</span></li>
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-2">
<img alt="" src="image-tn-2.jpg" /><span>Title 2</span></li>
<li class="ui-tabs-nav-item" id="nav-fragment-3">
<img alt="" src="image-tn-3.jpg" /><span>Title 3</span></li>
<li class="ui-tabs-nav-item" id="nav-fragment-4">
<img alt="" src="image-tn-4.jpg" /><span>Title 4</span></li>
</ul>
<!-- First Content -->
<div class="ui-tabs-panel ui-tabs-hide" id="fragment-1" style="">
<img src="image-1.jpg" />
</div>
<!-- Second Content -->
<div class="ui-tabs-panel ui-tabs-hide" id="fragment-2" style="">
<img src="image-2.jpg" />
</div>
<!-- Third Content -->
<div class="ui-tabs-panel ui-tabs-hide" id="fragment-3" style="">
<img src="image-3.jpg" />
</div>
<!-- Fourth Content -->
<div class="ui-tabs-panel ui-tabs-hide" id="fragment-4" style="">
<img src="image-4.jpg" />
</div>
</div>

Fixed! Just needed to set a height for the rotator space.

thank you for your answer Erin H. it worked marvels :)
for the new ones that like me had a difficult time figurring it out this is how it should look. i've added the height at the end of the rotator space and it worked.
#rotator {
background:#FFF;
color:#000;
position:relative;
padding-bottom:2.6em;
margin:0;
font-size:16px;
--> height:275px;
}

jQuery bxSlider and jQuery-ui tabs

I am using jQuery-ui for it's tab feature and also using bxSlider to slide images/content within only the first tab. However, when I click on the second tab the bxSlider "prev" and "next" options are still in my container. I tried using event.stopPropagation(), event.preventDefault() and stop() to stop the function, after realizing those didn't work I tried to create a function like this:
(function() {
$('#ab').click(function() {
$('#showcase').bxSlider({
controls: false,
});
});
});
where '#ab' is the tab and #showcase is the list element the images are located in. This function wouldn't exactly stop the bxSlider from being active, it would simply just hide the controls. However this did not work either.
Does anyone have any idea how this can be done?
Here is my HTML:
<div class="container">
<div id="tabs">
<ul>
<li><a id="sh" href="#showcase">Resumes</a></li>
<li><a id="ab" href="#about">About</a></li>
</ul>
<div id="showcase_container">
<ul id="showcase">
<li>
<img src="images/resume-temp1.jpg">
<img src="images/resume-temp2.jpg">
<img src="images/resume-temp3.jpg">
</li>
<li>
<img src="images/resume-temp1.jpg">
<img src="images/resume-temp2.jpg">
<img src="images/resume-temp3.jpg">
</li>
</ul>
<div id="about">
<span class="ab_title">Portfolio</span>
<ul id="portfolio_list">
<li class="item">
<a class="caption" name="resume1" href="#">
<img src="images/ty-headshot.jpg">
<span>
<big>Portfolio Title</big>
Quick Description of Portfolio Item
</span>
</a>
</li>
<li class="item">
<a class="caption" name="resume1" href="#">
<img src="images/ty-headshot.jpg">
<span>
<big>Portfolio Title</big>
Quick Description of Portfolio Item
</span>
</a>
</li>
<li class="item">
<a class="caption" name="resume1" href="#">
<img src="images/ty-headshot.jpg">
<span>
<big>Portfolio Title</big>
Quick Description of Portfolio Item
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
And here is my JavaScript:
//initialize tabs
$(document).ready(function() {
$('#tabs').tabs();
});
//initialize slider
$(document).ready(function(){
$('#showcase').bxSlider({
hideControlOnEnd: true,
infiniteLoop: false,
});
});
Any help would be greatly appreciated! If this cannot be done can someone please redirect me to a similar image/content slider so I can make this work?

Wrap the ul tag used for the slider in another div (called showcaseTab) or whatever. The bxslider will then be contained to that tab and the arrows should show and hide the correct way.
<div id="showcaseTab">
<ul id="showcase">
<li>
<img src="images/resume-temp1.jpg">
<img src="images/resume-temp2.jpg">
<img src="images/resume-temp3.jpg">
</li>
<li>
<img src="images/resume-temp1.jpg">
<img src="images/resume-temp2.jpg">
<img src="images/resume-temp3.jpg">
</li>
</ul>
</div>

CKEditor div element getting replaced instead of filled

I recently wrote a CKEditor plugin to add captions to images, it all works pretty good except for one thing.
The code of the caption looks like this:
<div class="caption_container">
<img src="image.jpg" />
<div class="caption_text">
Caption
</div>
</div>
When I select the "Caption" text and click the ordered list button, the caption_text div element changes into an ul instead of the ul being added to the div
Result:
<div class="caption_container">
<img src="image.jpg" />
<ul class="caption_text">
<li>First item</li>
</ul>
</div>
The result I would like to get is:
<div class="caption_container">
<img src="image.jpg" />
<div class="caption_text">
<ul>
<li>First item</li>
</ul>
</div>
</div>
Is there a way to achieve this?

If you don't want to touch CKEditor source code I have a simple solution for you. You could add a extra 'div' to prevent deletion of 'div class="caption_text"' so it will look like:
<div class="caption_container">
<img src="image.jpg" />
<div class="caption_text">
<div>
Caption
</div>
</div>
</div>
In the end you will have the desired:
<div class="caption_container">
<img src="image.jpg" />
<div class="caption_text">
<ul>
<li>First item</li>
</ul>
</div>
</div>