We Keep Coding

Switching photo position via click on thumbnail with jquery

I am trying to put a photo view/slideshow on my webpage and I am not getting the results I am looking for. I have created a Fiddle HERE to show you what I am trying to do. What I want it to do is when you click a thumbnail it switches the thumbnail into the main photo spot and the main photo into the thumbnail spot. It works at first but after you start clicking the other thumbnails it starts not switching the correct photo into the main slot. Also if you reclick the thumbnail you just clicked it does nothing. Here is my jquery code but take a look at my fiddle and you will be able to see what I am trying to do.
$('.thumb1').click(function() {
$('.thumb1, .main').fadeIn().toggleClass('thumb1 main');
});
$('.thumb2').click(function() {
$('.thumb2, .main').fadeIn().toggleClass('thumb2 main');
});
$('.thumb3').click(function() {
$('.thumb3, .main').fadeIn().toggleClass('thumb3 main');
});
$('.thumb4').click(function() {
$('.thumb4, .main').fadeIn().toggleClass('thumb4 main');
});

I changed your classes similarly to how Joao did, but my JavaScript is a little different
$('.thumb').click(function () {
var newHTML = this.innerHTML;
this.innerHTML = $('.main')[0].innerHTML
$('.main').html(newHTML);
});
Instead of just changing the src, you will also keep all other attributes of the images, such as the alt attribute, which you should add to your images for accessibility purposes.
I didn't implement the idea of not having clicking the same one do nothing, because then if they want to look at the image they just looked at they can't.
JSFiddle: http://jsfiddle.net/howderek/RfKh4/6/

I was looking at your code, and I wouldn't recommend switching around classes between elements like that since it might throw out a couple of bugs like yours. I played around with your code and simplified a little bit:
$('.thumb').click(function () {
var previousSrc = $('.main').children().attr('src');
$('.main').children().attr('src', $(this).children().attr('src'));
$(this).children().attr('src', previousSrc);
});
Here's the updated fiddle: http://jsfiddle.net/RfKh4/5/
Basically what I did was save the previous src attribute of the .main div image inside previousSrc and then I change the div's image to the one in the thumbnail. And finally change the thumbnail's image to the one that was on the .main div. Hope it helps you!

using onmouseover to change text hyperlink into an image hyperlink?

Please bear with me I am brand new to learning javascript (self taught)! I am usually one to find answers on my own from just web browsing but so far I haven't found any resources explaining how to accomplish the following:
So, basically all I want to do is change this (HTML):
SPEAKERS
to an image by using javascript.
The image is kept in the same folder as the html and the js.
Here is as far as I know to go with the javascript:
function showImage()
{
picture = new Image(100,100);
picture.src = "icon2.png";
document.getElementById("speakers").innerHTML = picture.src;
}
function goBack()
{
document.getElementById("speakers").innerHTML="SPEAKERS";
}
For clarity, all I would like to do is change the text ("SPEAKERS") to an image using 'onmouseover' while using the same hyperlink in the process.
It seems like a very simple problem but I don't know enough to determine if what I want to do is even possible. If it's not possible that's fine, I would just like to know either way ;P. Thanks ahead of time!

If you're ok with using jquery, you could use .html() and .hover()
http://jsfiddle.net/u8fsU/

Try something like this to get you started (not a complete nor tested solution):
var showImage = function(){
var picture = document.createElement("img");
picture.src = "icon2.png";
picture.href = "link.html";
var speakers = document.getElementById("speakers");
speakers.parentNode.replaceChild(speakers, picture);
}
Please see https://developer.mozilla.org/en-US/docs/Gecko_DOM_Reference for a good reference to some of the available DOM properties and methods.

How can I know when a video inside a <video></video> element has been entirely loaded?

I want to detect through jQuery or Javascript when a specific video inside an html5 tag has been entirely loaded (I mean, downloaded into the cache of the browser). The video has the preload = "auto" attribute.
I tried everything in my power to do this (I'm a beginner) with no luck. Can't seem to find any event I could listen to, is there any way to do this?
PS: the only thing I came across is the network_state property of the video object, but the references around the web doesn't seem to agree with the state it returns, and when I tried it I didn't find a state for "LOADED".
EDIT: I found an event I think I can use, the canPlayThrough. I tested it and it seemed to work, but I'm not sure if it really tells me that the video has been totally loaded, or just that it loaded enough data to start playing (which is no good).

You can bind to the ended event :
$("video").bind(eventname, function() {
alert("I'm done!");
});
Where eventname is the event you want to list to
A complete list of events is here -> http://dev.w3.org/html5/spec/Overview.html#mediaevents
UPDATED :
To get a percentage loaded you can use a combination of 2 events :
$("video").bind('durationchange', checkProgress);
$("video").bind('progress', checkProgress);
function updateSeekable() {
var percentageComplete = (100 / (this.duration || 1) *
($(this).seekable && $(this).seekable.length ? $(this).seekable.end : 0)) + '%';
}

Automatically rotate through content

I have 7 graphs that are accessible to me through a web site. I want to develop my own web application that automatically cycles through each of these graphs, so I can display them on a huge monitor.
I want the functionality to be similar to an image carousel but it would be for web pages instead of images. What are my options? A jQuery plugin? AJAX and an iframe? Keep in mind that I want the data to be live while I display it.

You could use javascript, and a Frame with a simple timer to load it.
Nothing complex needed,
In the title frame set add this:
<script language="JavaScript">
var toShow;
var URL = new Array ('http://www.google.com','www.yahoo.com','www.bit.ly');
function setupTimer() {
toShow = 0;
loadNext();
var t=setTimeout("loadNext()", 3000);
}
function loadNext(){
parent.reportframe.location=URL[toShow];
toShow++;
if (toShow>3) toShow = 0;
}
</script>
<body onLoad="setupTimer()">
Then it will keep reloading the frames.
I just wrote this, did not test it, let me know if you need more help.

http://jsfiddle.net/5dazE/5/show
That's a basic slideshow. You can add or remove sites and then press play. It will rotate every 30 seconds. the code can be fond here: http://jsfiddle.net/5dazE/5
it could use more work, but I am in agreement with #nycynik. It is a great idea.

Is there a faster way to add icons next to urls/links in a web page - alternative to using "onload" event?

I am writing a Firefox add-on that adds little icons next to all the urls in a web page.
The way I am doing it right now is :
window.addEventListener("load", AddIconsToURLs, false);
In AddIconsToURLs function:
Get all elements by tag name "a"
For each "a" element, append an "img" element.
However, for some web pages, the icons take a lot of time to appear since the "onload" event takes time.
Is there any faster way to make this happen ?
Rather than waiting for all the links to load and then adding icons next to each of them, is there any way to add an icon next to a link as soon as that particular link is loaded ?
Any help is appreciated. Thanks.

What do you want to do with the images? Anything special? If it is just for the look, much easier would be to load a CSS style sheet in your addon and use the :after pseudo element:
a:after {
content: url('chrome://youraddon/skin/imagefile.png');
}
No JavaScript processing involved :)
You can load a custom CSS file with:
var sss = Components.classes["#mozilla.org/content/style-sheet-service;1"]
.getService(Components.interfaces.nsIStyleSheetService);
var ios = Components.classes["#mozilla.org/network/io-service;1"]
.getService(Components.interfaces.nsIIOService);
var uri = ios.newURI("chrome://youraddon/skin/cssfile.css", null, null);
if(!sss.sheetRegistered(uri, sss.AGENT_SHEET)) {
sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
}
See also Using the Stylesheet Service.

There is another event you can listen to:
document.addEventListener("DOMContentLoaded", AddIconsToURLs, false);