www.webdeveloper.com
Results 1 to 5 of 5

Thread: Displaying something else if JavaScript is not enabled?

  1. #1
    Join Date
    Jun 2008
    Posts
    5

    Displaying something else if JavaScript is not enabled?

    Hi, I am using the following script on my vBulletin forum to display a different logo image whenever the page is loaded:
    Code:
    <script language="Javascript"><!-- 
    function image() { 
    }; 
    image = new image(); 
    number = 0; 
    // imageArray 
    image[number++] = "<a href='/'><img src='image1.png' border='0'></a>"
    image[number++] = "<a href='/'><img src='image2.png' border='0'></a>"
    image[number++] = "<a href='/'><img src='image3.png' border='0'></a>"
    image[number++] = "<a href='/'><img src='/images/misc/logo/btlogo10.png' border='0'></a>"
     
    increment = Math.floor(Math.random() * number); 
    document.write(image[increment]); 
    //-->
    </script>
    I have a couple of questions about this.

    1) Is there a way I can tell it to display a single image without the JavaScript if the visitor does not have JavaScript enabled?

    2) Is there a way I can tell it to either not display the same image twice in a row or not display the same image twice until it has gone through the full rotation?

    I doubt the latter, but I really hope there is a way to accomplish the first task.

  2. #2
    Join Date
    Dec 2002
    Location
    St. Louis, MO, USA
    Posts
    1,582
    If you want something to display if JavaScript is turned off or not available, there is the <noscript> tag; but I believe that it will display all of the contents in place of the html/javascript. If JavaScript is disabled, there is not a way for JavaScript to do anything to differentiate between dynamic and static content, individually. You could use something else, though, to redirect to a different page if JS is disabled.

    As far as the second question, yes, there is a way to do what you ask. You can use an iterator initially set to 0, dynamically give an upper limit based upon the length of the array that contains the image names, and progressively increase that iterator by one with each load. Use that as the index of the image name to use. Then, when the iterator reaches the upper limit, reset it to 0.

    ^_^
    Last edited by WolfShade; 03-04-2011 at 02:39 PM.

  3. #3
    Join Date
    Nov 2010
    Location
    Los Angeles, CA
    Posts
    234
    For your first question, yes. You can use the <noscript> tag for this purpose: http://www.w3schools.com/TAGS/tag_noscript.asp

  4. #4
    Join Date
    Jun 2008
    Posts
    5
    Wow, thanks for the super fast responses! The <noscript> tag is exactly what I needed. What a life saver. Wolf, I got it working so it'll only display the image I tell it to. I was nervous at first.

    As for the second question I asked, it's not nearly as big of a deal. If it's too complicated, I don't really need it.

  5. #5
    Join Date
    Dec 2002
    Location
    St. Louis, MO, USA
    Posts
    1,582
    It's not really complicated. Just use a JavaScript session cookie (a cookie with no expiration date will not be written to the hard drive and will vanish as soon as the browser closes) to keep track of the index position; that way, every time they go to that page for the first time in that session, the starting logo will always be the first in the array.

    ^_^

    ================================================ UNTESTED ==============================================

    Code:
    <script language="Javascript"><!-- 
    function setCookie(x) {
    	document.cookie = "thisLogo = " + x + "; path=/";
    	}
    
    function showLogo() { 
    	imgArray = new Array();
    	for(i=1;i<=5;i++) { // if there were 5 images - set it to what you want
    		imgArray[i] = "<img src=\"image" + i + ".png\" border=\"0\" />";
    		}
    	// Check for session cookie; if it doesn't exist, create it and set value to 1
    	var thisCookie = document.cookie;
    	((typeof document.cookie === 'undefined') || (thisCookie == "") || (thisCookie.indexOf("thisLogo") == -1)) ? setCookie(1) : null ;
    	// Get value of thisLogo and use as index for image array
    	var posStart = thisCookie.indexOf("thisLogo="); posStart += 9;
    	var posEnd = thisCookie.indexOf(";",posStart);
    	var posIndex = thisCookie.substring(posStart,posEnd);
    	// increment the iterator if less than number of images, otherwise reset to 1
    	posIndex < imgArray.length ? posIndex++ : posIndex = 1;
    	setCookie(posIndex);
    	// set innerHTML of div where logo is displayed
    	var logoDiv = document.getElementById("logoLayer"); // Or whatever you call it
    	logoDiv.innerHTML = imgArray[posIndex];
    	}
    window.onload = showLogo;
    //-->
    </script>
    Last edited by WolfShade; 03-04-2011 at 03:27 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles