SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Posts
    78
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    javascript sample code or advice needed

    I am developing an application in PHP. I am trying to add a feature I believe you can only do with javascript right on the browser as opposed to server-side. I have a very basic knowledge of javascript. Anyways, I want to be able to have this toggle button/link with image, where if you click it once, image switches to another image (in process), you press it again it switches to another image (done), you press it again it will start all over. Basically, toggle switch with 3 images and 3 corresponding values. As you can tell, I am going to be using it in the form.

    If anyone can give me some advice/code sample, I'd really appreciate it.

  2. #2
    SitePoint Guru Ize's Avatar
    Join Date
    Nov 2005
    Location
    The Netherlands
    Posts
    808
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try something like this:

    Code HTML:
    <img src="img1.jpg" onclick="toggleImg(this);">

    Code Javascript:
    function toggle (img) {
      var images = [
        'img1.jpg',
        'img2.jpg',
        'img3.jpg'
      ];
      for (var i=0,imglen=images.length,switchNext=false,found=false; i<imglen; i++) {
        if (switchNext) {
          img.src = images[i];
          found = true;
          break;
        }
        if (img.src === images[i]) {
          switchNext = true;
        }
      }
      if (!found) {
        img.src = images[0];
      }
    }

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Posts
    78
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ize,

    Thanks for your help. I will try it. But since I am going to be using this script in the form, I want to be able to enter specific value associated with each image into the database. For example, for image 1, I wanted to be able to enter 1 in the the DB. How can I alter your code to be able to do it?

    Many thanks.

  4. #4
    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)
    In a recent css thread I put together the following which performs the image gallery cycle using nothing but html and css.

    How it works is that the list of images is restricted in height to the size of one image, and each image links to the next so that when you click on them it's really scrolling to the next image, but looks like it's actually changing instead.

    Code html4strict:
    <ul id="gallery">
        <li><a id="image1" href="#image2"><img src="img.jpg"
            height="100" width="100" alt="image 1"></a></li>
        <li><a id="image2" href="#image3"><img src="img.jpg"
            height="100" width="100" alt="image 2"></a></li>
        <li><a id="image3" href="#image4"><img src="img.jpg"
            height="100" width="100" alt="image 3"></a></li>
        <li><a id="image4" href="#image5"><img src="img.jpg"
            height="100" width="100" alt="image 4"></a></li>
        <li><a id="image5" href="#image1"><img src="img.jpg"
            height="100" width="100" alt="image 5"></a></li>
    </ul>

    Code css:
    #gallery {
        height: 100px;
        list-style-type: none;
        margin: 0;
        overflow: hidden;
        padding: 0;
        width: 100px;
    }
    #gallery img {
        border: none;
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Posts
    78
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    Thanks for your help.

    Here is what I am doing and what I need. I am creating a web application for our manufacturing company. When engineer logs into the system, he/she will see the list of about 10 jobs we are currently working on. Following each item on the list there is going to be a status button which will have 4 states (stage 1, stage 2, stage 3, complete). Engineers will login everyday to update the status of the jobs. That button has to toggle through between those 4 values. I am using php. Obviously, let's say when engineer stops at stage 2, database should save that stage for that particular job.

  6. #6
    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)
    That scenario is different from the one above, because the above technique only works with one item that it to be cycled, not with multiple ones such as stages of different jobs.

    So the solution for your particular scenario could be to use a similar technique, using the querystring to provide the php server with the information that it needs to know, and using the same querystring to affect the display of the stages.

    Then if you're up to it, you can use ajax to make live updates to the server without having to reload the page.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Posts
    78
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    pmw57,

    I understand. If I knew Javascript and AJAX little better, I would have solved the problem already. Right now I want to settle with simpler javascript way even if takes reloading the page. Please tell me how can I toggle through several images with values attached to them so I can retrieve the values with something like getElementById.

  8. #8
    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)
    Here's the HTML you'll be wanting to work with. It uses a unique identifier for each job stage, and sets the querystring with the job number and stage number, so that the php can receive the updated stage, and the page can show the correct stage as well.

    Code html4strict:
    <ul>
    	<li>Job 1
    		<ul>
    		    <li id="job1stage1"><a href="?job1=2">Stage 1</a></li>
    		    <li id="job1stage2"><a href="?job1=3">Stage 2</a></li>
    		    <li id="job1stage3"><a href="?job1=4">Stage 3</a></li>
    		    <li id="job1stage4"><a href="?job1=1">Stage 4</a></li>
    		</ul>
    	</li>
    </ul>
    <ul>
    	<li>Job 2
    		<ul>
    		    <li id="job2stage1"><a href="?job2=2">Stage 1</a></li>
    		    <li id="job2stage2"><a href="?job2=3">Stage 2</a></li>
    		    <li id="job2stage3"><a href="?job2=4">Stage 3</a></li>
    		    <li id="job2stage4"><a href="?job2=1">Stage 4</a></li>
    		</ul>
    	</li>
    </ul>
    <ul>
    	<li>Job 3
    		<ul>
    		    <li id="job3stage1"><a href="?job3=2">Stage 1</a></li>
    		    <li id="job3stage2"><a href="?job3=3">Stage 2</a></li>
    		    <li id="job3stage3"><a href="?job3=4">Stage 3</a></li>
    		    <li id="job3stage4"><a href="?job3=1">Stage 4</a></li>
    		</ul>
    	</li>
    </ul>

    The page will want to use cookies to store the existing state.

    Code javascript:
    // [url]http://www.quirksmode.org/js/cookies.html[/url]
    function createCookie(name,value,days) {
    	if (days) {
    		var date = new Date();
    		date.setTime(date.getTime()+(days*24*60*60*1000));
    		var expires = "; expires="+date.toGMTString();
    	}
    	else var expires = "";
    	document.cookie = name+"="+value+expires+"; path=/";
    }
    function readCookie(name) {
    	var nameEQ = name + "=";
    	var ca = document.cookie.split(';');
    	for(var i=0;i < ca.length;i++) {
    		var c = ca[i];
    		while (c.charAt(0)==' ') c = c.substring(1,c.length);
    		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    	}
    	return null;
    }
    function eraseCookie(name) {
    	createCookie(name,"",-1);
    }

    When the page loads, we'll want to process any items in the querystring. This is not only so that the page can update it self when you click on a stage, but so that a php file can preload the page with stages for all of the jobs

    After that querystring has been processed and saved to the existing cookies, it goes through each stage of each job hiding them, at first hiding them, then showing them if they're currently selected.

    Code javascript:
    processQuerystring();
    var job = 1;
    var stage = 1;
    var el = document.getElementById('job' + job + 'stage' + stage);
    while (el) {
    	while (el) {
    		el.style.display = 'none';
    		showIfSelected(job, stage);
    		stage += 1;
    		el = document.getElementById('job' + job + 'stage' + stage);
    	}
    	job += 1;
    	stage = 1;
    	el = document.getElementById('job' + job + 'stage' + stage);
    }

    When we check the querystring we just use a regular expression to check if there is something matching jobx=y
    If there are multiple ones, such as when php first loads the page with values from its database, it goes through each one setting the appropriate cookies.

    Code javascript:
    function processQuerystring() {
    	var qs = location.search;
    	var jobRx = /job(\d)=(\d)/g;
    	var jobMatch = jobRx.exec(qs);
    	while (jobMatch) {
    		createCookie('job' + jobMatch[1], jobMatch[2], 365);
    		jobMatch = jobRx.exec(qs);
    	}
    };

    Working out whether to show a certain stage is just a matter of checking if the stage matches that of the cookie for the job.

    Code javascript:
    function showIfSelected(job, stage) {
    	var savedStage = readCookie('job' + job);
    	if (!savedStage) {
    		createCookie('job' + job, '1', 365);
    	}
    	// cookies aren't available locally on google chrome so savedStage will still be null
    	if (savedStage == stage || !savedStage) {
    		el.style.display = '';
    	}
    }

    Please be aware that php will be required to save the querystring information to a database, and to retrieve it later on as well. This is soemthing that the php forum will be able to easily help you with.

    Here is the whole thing all put together. The script code should be saved out in to separate files. It is only inline here to more easily show how it all goes together.

    Code javascript:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Test</title>
    </head>
     
    <body>
    <ul>
    	<li>Job 1
    		<ul>
    		    <li id="job1stage1"><a href="?job1=2">Stage 1</a></li>
    		    <li id="job1stage2"><a href="?job1=3">Stage 2</a></li>
    		    <li id="job1stage3"><a href="?job1=4">Stage 3</a></li>
    		    <li id="job1stage4"><a href="?job1=1">Stage 4</a></li>
    		</ul>
    	</li>
    </ul>
    <ul>
    	<li>Job 2
    		<ul>
    		    <li id="job2stage1"><a href="?job2=2">Stage 1</a></li>
    		    <li id="job2stage2"><a href="?job2=3">Stage 2</a></li>
    		    <li id="job2stage3"><a href="?job2=4">Stage 3</a></li>
    		    <li id="job2stage4"><a href="?job2=1">Stage 4</a></li>
    		</ul>
    	</li>
    </ul>
    <ul>
    	<li>Job 3
    		<ul>
    		    <li id="job3stage1"><a href="?job3=2">Stage 1</a></li>
    		    <li id="job3stage2"><a href="?job3=3">Stage 2</a></li>
    		    <li id="job3stage3"><a href="?job3=4">Stage 3</a></li>
    		    <li id="job3stage4"><a href="?job3=1">Stage 4</a></li>
    		</ul>
    	</li>
    </ul>
    <script type="text/javascript">
    // [url]http://www.quirksmode.org/js/cookies.html[/url]
    function createCookie(name,value,days) {
    	if (days) {
    		var date = new Date();
    		date.setTime(date.getTime()+(days*24*60*60*1000));
    		var expires = "; expires="+date.toGMTString();
    	}
    	else var expires = "";
    	document.cookie = name+"="+value+expires+"; path=/";
    }
    function readCookie(name) {
    	var nameEQ = name + "=";
    	var ca = document.cookie.split(';');
    	for(var i=0;i < ca.length;i++) {
    		var c = ca[i];
    		while (c.charAt(0)==' ') c = c.substring(1,c.length);
    		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    	}
    	return null;
    }
    function eraseCookie(name) {
    	createCookie(name,"",-1);
    }
    </script>
    <script type="text/javascript">
    function processQuerystring() {
    	var qs = location.search;
    	var jobRx = /job(\d)=(\d)/g;
    	var jobMatch = jobRx.exec(qs);
    	while (jobMatch) {
    		createCookie('job' + jobMatch[1], jobMatch[2], 365);
    		jobMatch = jobRx.exec(qs);
    	}
    };
    function showIfSelected(job, stage) {
    	var savedStage = readCookie('job' + job);
    	if (!savedStage) {
    		createCookie('job' + job, '1', 365);
    	}
    	// cookies aren't available locally on google chrome so savedStage will still be null
    	if (savedStage == stage || !savedStage) {
    		el.style.display = '';
    	}
    }
    processQuerystring();
    var job = 1;
    var stage = 1;
    var el = document.getElementById('job' + job + 'stage' + stage);
    while (el) {
    	while (el) {
    		el.style.display = 'none';
    		showIfSelected(job, stage);
    		stage += 1;
    		el = document.getElementById('job' + job + 'stage' + stage);
    	}
    	job += 1;
    	stage = 1;
    	el = document.getElementById('job' + job + 'stage' + stage);
    }
    </script>
    </body>
    </html>
    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
  •