SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Member
    Join Date
    Apr 2008
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Content display on initial display

    I am trying to display various videos on site and although I have the selection and viewing sorted, I cannot get an initial display or promo video to be shown on initial load - i.e. when the javascript variable is undefined. The following is my code.

    Can anyone help with an 'IF' statement to display an image or video when the page loads for the first time?

    Code:
    <table width="100%" border="0" cellspacing="0" cellpadding="0" >
    <tr valign="top">
    <td>
    <SCRIPT LANGUAGE="javascript" type="text/javascript">
    function changeSrc(objName,fileUrl) {
    	var thisObj = objName;
    	var thisUrl = fileUrl;
        objExists = document.getElementById(thisObj);
    	if (objExists != null) {
    		document.getElementById(thisObj).src = thisUrl;
    	}
    }
    </SCRIPT>
    
    <td align="center"> 
    
    <IFRAME id=test style="BORDER-RIGHT: #000000 3px solid; BORDER-TOP: #000000 3px solid; BORDER-LEFT: #000000 3px solid; BORDER-BOTTOM: #000000 3px solid" name=test marginWidth=0 marginHeight=0 src="thisUrl" frameBorder=3 width=384 scrolling=no height=288></IFRAME>
    
    </td>
    
    <td>
    
    Test
    
    <A href="#" onClick="return  changeSrc('test','http://www.test.com/test1.swf);">Test 1</A><br />
    <A href="#" onClick="return  changeSrc('test','http://www.test.com/test2.swf);">Test 2</A><br />
    
    </td>
    </tr>
    </table>
    Thanks in advance.

  2. #2
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    Create a function which sets it's source to what you want, and then call that function from the body (or even better, the element which it resides in)'s onload attribute.

  3. #3
    SitePoint Member
    Join Date
    Apr 2008
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you expand on that with an example?

  4. #4
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just above the closing body tag (</body>) put in:
    Code:
    <script type="text/javascript">
    changeSrc('test', 'http://www.test.com/default.swf'); // or whichever is the default one
    </script>

  5. #5
    SitePoint Member
    Join Date
    Apr 2008
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks bud, i cannot believe it was as simple - what a muppet

  6. #6
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    For the onload option it would be like this:
    Code:
    <body onload="initialSource()">
    ...
    </body>
    and you would just make another function like:
    Code:
    function initialSource() {
        changeSrc('test', 'http://www.test.com/default.swf');
    }
    Roughly the same as jimfraser's. I just like to set it up (when possible) to have the code be all at the top so I can move it to an external file.

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    The code can be in an external file at the end of the body too. It's preferable to have it there for several optimisation reasons.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure it's worth having an additional http request for one line of code.

  9. #9
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    Yes, it can be there at the bottom in an external file, but like jimfraser said, that would result in 2 http requests, instead of just 1 if it was all together.

    That's more what I meant by "at the top" is that it is "all together" so it can all be moved to 1 external file.

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Nothing prevents you from placing all of the code in the one file and calling it from the bottom. It will improve the page loading performance too.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    Okay, yes, I can agree with that. You can place it all at the bottom. The important part isn't really top or bottom, it's just being together.

    And actually, in this case it should be at the end because if it is all at the top, it will get an undefined reference for when it tries to do the document.getElementById().

    However, if you have onclick, etc. it should be at the top because if it is at the bottom it means it won't work until the page is fully loaded.

  12. #12
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    When it's at the bottom the script is loaded long before any onload event.

    When you want to keep all the scripts together at the bottom of the page, one possible option is to have a placeholder as the onclick event, in case someone clicks on it after the dom is loaded but before the javascript arrives.

    Code html4strict:
    <a href="file.html" onclick="alert('Please wait until the page has more completely loaded')">...</a>

    There are of course fancier ways of doing this as well.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •