Develop Reference

Javascript .click event working in all browsers except Firefox

I have this bit of code to hide/show a tray from the bottom of the page. It works great everywhere but Firefox. In devtools it doesn't show an event listener on .toTab -- until you refresh the page. After refreshing everything works fine.
$(function(){
$('.toTab').click(function(event){
var currentHeight = ($('#toOfferContainer').height()*(-1))+90;
$(this).toggleClass('showOffers');
$('.toOverlay').toggleClass('shown');
if ($(this).hasClass('showOffers')) {
$('#toOfferContainer').animate({bottom:'-2px'},500);
} else {
$('#toOfferContainer').animate({bottom:currentHeight},500);
}
});
});
Clicking on .toTab just doesn't register anything -- not even any messages in console.
Any tips on what I might need to adjust?
EDIT: Here's the relevant HTML:
<div id="todaysOffers">
<div class="toOverlay">
<div id="toOfferContainer">
<div class="toTab">
<img src="image.png" />
</div>
<div class="toContent">
<a href="/link" class="someLink">
<img src="image2.jpg" />
</a>
</div>
</div>
</div>
</div>

Remove src from all iframes and add it on click

I'm trying to remove the src values from all my iframes and then on click load the srcs to the ones matched by a selector.
Right now I have a block of code that empties the src of my iframes and creates a variable with the src info.
After that I'm trying to check if an iframe src is empty and if so, have a function that on click of a link will add the corresponding src values to the returned iframes.
The code is as follows, but the click part is not working.
Naturally I'm not sure about the IF part, as well, since the thing as a whole is not working.
$j=jQuery.noConflict();
var iframesa = $j('iframe');
iframesa.each(function() {
var srca = $j(this).attr('src');
$j(this).data('src', srca).attr('src', '');
});
$j(document).ready(function(){
if($j('iframe').attr('src') == '') {
$j('.evento-more').click(function() {
$j(this).next().children('iframe').attr('src', function() {
return $j(this).data('src');
});
});
}
});
The HTLM structure is something like this
<div class="evento-feed">
<div class="wrapper">
More
<div class="evento-desc">
<div class="slide-text">
<p>
<iframe src="https://www.youtube.com/embed/xxxx"></iframe>
</p>
</div>
<div class="slide-text">
<p>
<iframe src="https://www.soundcloud.com/embed/xxxx"></iframe>
</p>
</div>
</div>
</div>
</div>
<div class="evento-feed">
<div class="wrapper">
More
<div class="evento-desc">
<div class="slide-text">
<p>
<iframe src="https://www.mixcloud.com/embed/xxxx"></iframe>
</p>
</div>
</div>
</div>
</div>
And so on. The whole .evento-feed block gets repeated a few more times, although the content may vary
Is there anyone that can help me?

How to call two fadeslideshow plugin in the jquery

I have a home page having fadeslideshow with 5 slides. The plugin used for slideshow is http://plugins.jquery.com/project/fadeslideshow.
In the home page i also have Menu bar with menu items in it. When user clicks the menu item the slideshow content should be removed and one more slideshow should be added with menu items content. One more problem is, I need autoslideshow true for home page, but false for menu items slideshow. So i need to call slideshow.js file twice in the jquery. I tried with this but its not working.
The jquery code where i am calling the plugin. This is used for home page.
slide=jQuery('#slideshow').fadeSlideShow(
{width:936, height:476, autoplay:true});
When user clicks menu item the '#slideshow' content will be removed and menu items div will be loaded.
$('ul.dropdown-menu li a').click( function(event) {
$('#slideshowWrapper1').empty().load('test.html');
slide=jQuery('#slideshow').fadeSlideShow(
{ width:936, height:476, autoplay:false});
var newTopicContent = $(this).attr('id');
alert(newTopicContent);
});
The code for home page with 5 slideshow
<div id="slideshowWrapper1">
<div id="slideshow" class="slides">
<div class="5">
<div class="txtCenter" > <p> This is 5th slide</p></div>
</div>
<div class="4">
<div class="txtCenter" >
<img src="images/new/home4.png" alt="" /></div>
</div>
<div class="3">
<div class="txtCenter" ><p>This is third slide</p></div>
</div>
<div class="2">
<div style="text-align: center;margin-top: 2%;"><img src="images/new/some.png" alt="" /></div>
<br style="clear:both;"/>
</div>
<div class="1">
<div><img src="images/new/recreate.png" alt="" /></div>
<br style="clear:both;"/>
</div>
</div>
</div>
The test.html page has different contents for menu items. Here in my code the first slideshow is working very fine. But after clicking the menu item slideshow is not working. All slide contents coming in the same page.
I need help. Thanks in advance!!

If i understand correctly, you want to remove the first slideshow to replace with a new slideshow returned via test.html ?
I think you must wait for test.html to be load using load(url, callback)
see http://api.jquery.com/load/
$('ul.dropdown-menu li a').click( function(event) {
var id = $(this).attr('id');
$('#slideshowWrapper1').empty().load('test.html', function() {
slide=jQuery('#slideshow').fadeSlideShow(
{ width:936, height:476, autoplay:false});
var newTopicContent = id;
alert(newTopicContent);
});
});

Dynamically loading content into a div from either and external or internal div

Im currently creating a site which has a div like below:
<div class="container">
<div class="one-third column">
<a id="tab1" href="inc/tab1.html"><h2>tab1</h2></a>
</div>
<div class="one-third column">
<a id="tab2" href="inc/tab2.html"><h2>tab2</h2></a>
</div>
<div class="one-third column">
<a id="tab3" href="inc/tab3.html"><h2>tab3</h2></a>
</div>
</div>
<div class="container" style="margin:100px 0;">
<div id="information">
</div>
</div>
Then i would like the content from the external page (which is basically just a div with a little bit of content in it) to be loaded into the div with id="information"
I tried using this but it just sends me to an external page?
<script type="text/javascript">
$(#tab1).click(function() {
$('#information').load("inc/tab1.html");
return false;
});
$(#tab2).click(function() {
$('#information').load("inc/tab2.html");
return false;
});
$(#tab3).click(function() {
$('#information').load("inc/tab3.html");
return false;
});
</script>
Also by doing it this way is the content that is currently in the div hidden once the new content is loaded?
Then i was wondering how to add animation to the loaded content?

try changing:
$(#tab2).click(function() {
$('#information').load("inc/tab2.html");
return false;
});
to
$("#tab2").click(function(e) {
$('#information').load("inc/tab2.html");
e.preventDefault();
});
Notice the quotes around tab2 (you need to have those unless it's body, document.
Also notice the e in function(e). With that you can prevent a link from redirecting to another page with the code e.preventDefault() inside of that function.

That's because there are several syntax errors in your code, you are missing quotes for the selectors.
$('#tab...').click(function() {
// ...
});
You can also use the href properties instead of having several handlers:
jQuery(function($) {
$('.one-third a').click(function(e) {
e.peventDefault();
$('#information').load(this.href);
});
})

Mouseover text then Change Image not Working in IE8-below

I have a banner made out of JavaScript wherein when you hover a particular text the image in the banner changes.
I was wondering how to make it compatible in ie8..
I used this tutorial to come up with the js:
http://www.javascriptkit.com/script/script2/rolldifferent.shtml
I'm also trying to mouse out too then the image will change.
Here are the js codes:
<script type="text/javascript">function changeimage(towhat,url){if (document.images){document.images.targetimage.src=towhat.src gotolink=url}}functionwarp({window.location=gotolink}</script>
<script>var myimages=new Array()var gotolink="#"function preloadimages(){for (i=0;i<preloadimages.arguments.length;i++){myimages[i]=newImage()myimages[i].src=preloadimages.arguments[i]}}preloadimages("map_wm_hover.gif", "map_wm_hover2.gif","map_wm.gif")</script>
Here is the css:
<div id="base"><div id="mapcontainer"><img src="map_wm.gif" name="targetimage" border=0></div>
<div id="textcontainer"><div class="textboxinner1">8CCC REQUESTS/TALKBACK</div>
<div class="textboxinner2">Alice Springs 8952 7771</div>
<div class="textboxinner2">Tenant Creek 8952 7182</div>
<div class="textboxinner3"><span class="t3nonelink">...other contact details here</span></div>

I believe this is an issue with IE where animated gifs are not loaded properly in javascript. A workaround is to put the images in a hidden div in the HTML code instead of loading them in the script. A positive side-effect is that this greatly simplifies the javascript. See http://jsfiddle.net/5pZLT/7
HTML:
<DIV id=base>
<DIV id=mapcontainer><IMG border=0 name=targetimage src ="http://www.keencloudmedia.com/skybluekangaroo/map_wm.gif"> </DIV>
<DIV id=textcontainer>
<DIV class=textboxinner1><A onmouseover=changeimage(2,this.href)
href="index.html">8CCC REQUESTS/TALKBACK</A> </DIV>
<DIV class=textboxinner2><A onmouseover=changeimage(1,this.href)
href="index.html">Alice Springs 8952 7771</A> </DIV>
<DIV class=textboxinner2><A onmouseover=changeimage(0,this.href)
href="index.html">Tenant Creek 8952 7182</A> </DIV>
<DIV class=textboxinner3><SPAN class=t3nonelink>...other contact details <A
onmouseover=changeimage(2,this.href) href="index.html">here</A></SPAN>
</DIV></DIV></DIV><div id="hiddenImages" style="display: none">
<img src="http://www.keencloudmedia.com/skybluekangaroo/map_wm_hover.gif" name="hoverImage" />
<img src="http://www.keencloudmedia.com/skybluekangaroo/map_wm_hover2.gif" name="hoverImage2" />
<img src="http://www.keencloudmedia.com/skybluekangaroo/map_wm.gif" name="originalImage" />
</div>​
Javascript:
var gotolink = "#";
function changeimage(imageNumber, url) {
if (document.images) {
document.images.targetimage.src =
document.getElementById('hiddenImages').children[imageNumber].src;
gotolink = url;
}
}
By the way there were lots of ;s missing in your original code which would tend to stop it working.