javascript does not run when page loads

Hi. I am very new to javascript, so I might not even be wording my question right, but I am going to try and be as concise and specific as possible.

I am using jquery on my website- the galleria plugin- to make a slideshow. you can see the completed show here:
http://www.pauljameswilliams.com/demo2a.html

This slideshow will be one of three on my website. Each slide show will opperate the same exact way.I have built in tabbed navifation, and the slideshows will all be accessable under the "portfolio" tab by clicking on their corresponding links.

check out the site here:
http://www.pauljameswilliams.com/portfolio.html

As it is I have one slideshow up, although not yet connected to the corresponding link, but the images won't load. My guess is that because the div tag is hidden that the contents don't load propperly and I need the contents to load when the corresponding div tag that it is contained in becomes visible but I don't know how to do that.

this is the javascript that I have written to show/hide the <div> tags where the content will live. Three slide shows will live in content_2 and show/hide when the corresponding button is pressed.

function tabSwitch(new_tab, new_content) {  
  
    document.getElementById('content_1').style.display = 'none';  
    document.getElementById('content_2').style.display = 'none';  
    document.getElementById('content_3').style.display = 'none';
	document.getElementById('content_4').style.display = 'none';
    document.getElementById(new_content).style.display = 'block';     
  
    document.getElementById('btn_1').className = '';  
    document.getElementById('btn_2').className = '';  
    document.getElementById('btn_3').className = '';
	document.getElementById('btn_4').className = '';
    document.getElementById(new_tab).className = 'current';        
  
}

Code (markup):

thank you- I am really stuck. i promise, i am actually learning javascript, I'm not just trying to get other people to do my work for me.

 

document.getElementById('content_1') - it's wrong, you should use object jQuery('#content_1')

Try this construction

jQuery(document).ready(function(){

// Put your code here

});

Code (markup):

 

when you say, put your code here, do you mean the contents of the div tag contents_1, contents_2, contents_3contents_4?

jQuery('#content_1').ready(function(){

//  <div>page contents</div>

});
jQuery('#content_2').ready(function(){

//  <div>page contents</div>

})
jQuery('#content_3').ready(function(){

// <div>page contents</div>

})
jQuery('#content_4').ready(function(){

// <div>page contents</div>

})

Code (markup):

is this to get it to load correctly, and will the content be called in the same way when I press my tab?

 

No, I mean JavaScript code

jQuery(document).ready(function(){

    document.getElementById('content_1').style.display = 'none';  
    document.getElementById('content_2').style.display = 'none';  
    document.getElementById('content_3').style.display = 'none';
	document.getElementById('content_4').style.display = 'none';
    document.getElementById(new_content).style.display = 'block';     
  
    document.getElementById('btn_1').className = '';  
    document.getElementById('btn_2').className = '';  
    document.getElementById('btn_3').className = '';
	document.getElementById('btn_4').className = '';
    document.getElementById(new_tab).className = 'current';    

});

Code (markup):

P.S. Maybe this code don't resolve your task. but you can use this as example.

 

as I suspected, i don't think i have enough know how to make this work. therefore, my next question is, in your example, what is the .ready(function(){

})

 

If the problem is only with the pictures not displaying is because you are pointing in a relative way, but incorrect syntax"

If you are pointing one directory before taking as a reference the current Page location, you should type ../ instead of ./

 

Thanks Jeanpaul, but the idea is that i am trying to learn js, so i don't want to pay someone to do this for me and I don't have the money to pay someone to teach me so I have been using w3schools. If anyone can point me toward what the bigger problem might be I would be very appreciative

 

Regarding the visibility behavior it has nothing to do with the content and will not alter it whatsoever. The javascript function mainly is taking the ID as an argument, and based on it will apply a flag of either 1 or 0 which will be either hidden or visible <div style="visibility:hidden"> or <div style="visibility:visible"> being the last one the default for any <div> not carrying the instruction.

The results of this interaction wont change anything in the code or content, since I mentioned previously is a behavior of an element within the page.

 

Additionally, on the PREVIEW and NEXT links within the portfolio, there is no need to point to itself as it might be confusing for the browser (depending on which one you use) on which action to take onclick or href, both mainly mean the same to the browser and you might want to rewrite those two instructions pointing to the same action than on the onclick event as to avoid the confusion.

Some browsers understand # to go to top of the document, and it might not trigger the event.

Could be re-written to:

Happy coding! JP

 

Use jQuery, mate!

$(document).ready(function(){
$(".tabs").tab();
});