SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 41 of 41
  1. #26
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Here's what you were trying to do:

    Code javascript:
    position = (position <= imageList.length) ? position + 1 : (imageList.length)-1;

    Notice how you're using imageList.length-1 as the maximum length?
    The comparison should be changed from <= to = as well.

    Code javascript:
    position = (position < imageList.length - 1) ? position + 1 : imageList.length - 1;

    We can also simplify things even further by specifying instead an amount that the position is increased by

    Code javascript:
    position += (position < imageList.length - 1) ? 1 : 0;

    So only if the position is less than the last number of the array, will it be increased.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  2. #27
    SitePoint Addict
    Join Date
    Aug 2007
    Posts
    328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Are you saying that I shouldn't have tried to use imageList-1?

    Because if you are, then I'm confused as to why you're doing it in your example.

    What also is a little puzzling is why I have to put -1 at all, because if there are 5 elements in an array, surely .length would return 5, therefore [4] for example would return the last element of the array, rather than length-1 which in theory should give me array item 3?

    Is your last example simply short hand for the second to last example?

    Here's what I've got for decreasing the value of position:
    position = (position > 0) ? position -1 : 0;

    As far as I can tell, I've implemented it correctly.

    I've come to the next stage where I need to manipulate the dom, and I can't seem to correctly alert out a value.

    Code:
    var captionList = ['1','2','3','4','5','6','7','8','9','10']
    var caption = document.getElementById('caption');
    var para = caption.getElementsByTagName('p')[0].childNodes;
    I would have put this in it's own post, but since it will rely on the position variable, it makes sense to keep it here.

    caption is an id that already exists.
    What I'm trying to do is to either manually create an empty <p></p>, and insert the caption from captionList using position as a selector from the array, or do the same, but use the dom to create the empty <p></p>.

    I managed to partially get it working, by using the appendChild method:
    Code:
    var text =document.createTextNode(imageList[position]);
    para.appendChild(text);
    That correctly inserted the elements, but I couldn't figure out how to remove them again without breaking it.
    i.e. it would just add the new caption to the end, and even if I used removeChild(text) before "text =" in the if statement, but then it just wouldn't display anything.

    Also, when I try to alert out the text from a manually created paragraph, I just get <paragraph object> or something along those lines. I don't want to select the object, I just want to change the text

  3. #28
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by stevex33 View Post
    Are you saying that I shouldn't have tried to use imageList-1?

    Because if you are, then I'm confused as to why you're doing it in your example.

    What also is a little puzzling is why I have to put -1 at all, because if there are 5 elements in an array, surely .length would return 5, therefore [4] for example would return the last element of the array, rather than length-1 which in theory should give me array item 3?
    An array containing 5 items will have index numbers that range from 0 to 4. The length is reported as 5, so to get the last index of the array you need to use length-1, which will be 5-1 or 4.

    It is very easy though to loop through them though, because you can use
    Code javascript:
    position = (position + 1) &#37; imageList.length;

    which will go through them from 0 to 4, and when it gets to 4 it loops around to 0 again.

    However, in our current usage, we can use the known length to our advantage too.

    Code javascript:
    position = (position < imageList.length - 1) ? position + 1 : position;

    There are any number of ways to perform that behaviour.

    Code javascript:
    position = (position + 1 < imageList.length) ? position + 1 : position;

    or

    Code javascript:
    position += (position + 1 < imageList.length) ? 1 : 0;

    but the one I like most is:

    Code javascript:
    if (position + 1 < imageList.length) {
        position += 1;
    }

    which of them all I think is the easiest to understand at first glance.

    Quote Originally Posted by stevex33 View Post
    Is your last example simply short hand for the second to last example?
    Yes it is. It can be easier to understand in terms of how much you're increasing an value by. You'll see it used above too.

    Quote Originally Posted by stevex33 View Post
    What I'm trying to do is to either manually create an empty <p></p>, and insert the caption from captionList using position as a selector from the array, or do the same, but use the dom to create the empty <p></p>.

    I managed to partially get it working, by using the appendChild method:
    Code:
    var text =document.createTextNode(imageList[position]);
    para.appendChild(text);
    That correctly inserted the elements, but I couldn't figure out how to remove them again without breaking it.
    Before you add the text you first want to remove the existing contents, so here is the standard way to achieve that.

    Code javascript:
    while (para.hasChildNodes()) {
        para.removeChild(para.firstChild);
    }
    // now add content here
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #29
    SitePoint Addict
    Join Date
    Aug 2007
    Posts
    328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    here's what I've got for the rightClick function, it's not printing the new text or removing the already existing text:

    Code:
    document.getElementById('rightClick').onclick = function() {
        position = (position < imageList.length - 1) ? position + 1 : imageList.length - 1;	//if position is less than the number of items in the array, increase position by 1, else position = the last array item
    	imageSrc = imagePath + imageList[position];	//Set the path to the image.
    	imageHere.setAttribute("src",imageSrc);	//Get the id of the image you want to manipulate, and set the "src" attribute to the path we created earlier as imageSrc
    	while (para.hasChildNodes()) {
        para.removeChild(para.firstChild);
    	}
    	text=document.createTextNode(captionList[position]);
    	para.appendChild(text);
    	//alert(text);
    	//alert('list item ' + position + " " + imagePath + imageList[position]);	
    	
    };

  5. #30
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    That function has a large reliance on global variables:
    • position
    • imageList
    • imagePath
    • imageHere
    • para
    • captionList


    How do you know that para refers to the location that you're expecting?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #31
    SitePoint Addict
    Join Date
    Aug 2007
    Posts
    328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, here's the full code:

    Code:
    var cssImageGallery = document.getElementById('cssImageGallery');	//Get the id cssImageGallery
    cssImageGallery.parentNode.removeChild(cssImageGallery);	//Remove the gallery if the user has javascript
    var imageList = ['copperfry.jpg','front.jpg','glasslid.jpg','greenfry.jpg','large.jpg','redfry.jpg','side.jpg','silverfry.jpg','small.jpg','withlid.jpg'];	//List of images in the gallery
    var	captionList = ['1','2','3','4','5','6','7','8','9','10']	//List of captions, each caption corresponds to an image in the imageList, i.e. captionList array item 0 is the caption for copperfry.jpg
    var imagePath = 'images\/';	//The actual location of the images
    var position=0;	//Setting position to default 0 on page load
    var imageHere = document.getElementById('imageHere');	//Getting the location of the imageHere id
    var caption = document.getElementById('caption');	//Getting the location of the caption id
    var para = caption.getElementsByTagName('p')[0].childNodes;
    
    //var text =document.createTextNode(imageList[position]);
    //para.appendChild(text);
    //caption.para.replaceChild(text,text);
    
    document.getElementById('leftClick').onclick = function() {
    	position = (position > 0) ? position -1 : 0;	//If position is greater than 0 then decrease position by 1, else set position to 0
    	imageSrc = imagePath + imageList[position];	//Set the path to the image.  imageList[position] will give the resulting element of the array that matches the value of position i.e. if position were 0, the first image in the array will be the result.
    	imageHere.setAttribute("src",imageSrc);		//Get the id of the image you want to manipulate, and set the "src" attribute to the path we created earlier as imageSrc
    
    	
    	//alert('list item ' + position + " " + imagePath + imageList[position]);
    };
     
    document.getElementById('rightClick').onclick = function() {
        position = (position < imageList.length - 1) ? position + 1 : imageList.length - 1;	//if position is less than the number of items in the array, increase position by 1, else position = the last array item
    	imageSrc = imagePath + imageList[position];	//Set the path to the image.
    	imageHere.setAttribute("src",imageSrc);	//Get the id of the image you want to manipulate, and set the "src" attribute to the path we created earlier as imageSrc
    	while (para.hasChildNodes()) {
        para.removeChild(para.firstChild);
    	}
    	text=document.createTextNode(captionList[position]);
    	para.appendChild(text);
    	//alert(text);
    	//alert('list item ' + position + " " + imagePath + imageList[position]);	
    	
    };
    I'm only a beginner so correct me if I'm wrong, but because I declared the variables within the function, that makes them local variables right?
    Obviously you couldn't have known, because I forgot to include them in my examples to you in the first place

    Does anything else jump out at you?

    Is para referencing the correct area from what you can tell?

  7. #32
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Because they are onclick events, when the function runs, it runs under the scope of the window itself. Not in terms of other code that's around it in the script.

    The only viable way that you will be able to access those variables is if they are global variables, attached on to the window object.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #33
    SitePoint Addict
    Join Date
    Aug 2007
    Posts
    328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sorry, which variable are you talking about?
    And by attach them to the window object, do you mean just remove the "var".

    If not, how should I attach them?

  9. #34
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    It's possible to do it just by removing the var, but then later on when reviewing code that leads to questions about why it was done in the first place.

    So, the solution is to do it explicitly, so there is no room for confusion as to the intention.

    For example:

    Code javascript:
    window.para = caption.getElementsByTagName('p')[0].childNodes;
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #35
    SitePoint Addict
    Join Date
    Aug 2007
    Posts
    328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've added the code you suggested and modified the functions slightly:

    Code:
    document.getElementById('leftClick').onclick = function() {
    	position = (position > 0) ? position -1 : 0;	//If position is greater than 0 then decrease position by 1, else set position to 0
    	imageSrc = imagePath + imageList[position];	//Set the path to the image.  imageList[position] will give the resulting element of the array that matches the value of position i.e. if position were 0, the first image in the array will be the result.
    	imageHere.setAttribute("src",imageSrc);		//Get the id of the image you want to manipulate, and set the "src" attribute to the path we created earlier as imageSrc
    text=document.createTextNode(captionList[position]);
    	window.para.appendChild(text);
    	
    	//alert('list item ' + position + " " + imagePath + imageList[position]);
    };
    The image gallery is working, but the captions are still not being added, can you tell why?

  11. #36
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Can you confirm that para is referring to the correct element?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  12. #37
    SitePoint Addict
    Join Date
    Aug 2007
    Posts
    328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    var caption = document.getElementById('caption');
    window.para = caption.getElementsByTagName('p')[0].childNodes;


    Caption is the div that contains para.
    With para, I'm just trying to access the text within <p>, or rather simply replae what's in <p> each time with an array item from captionList

  13. #38
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    The childNodes will refer to the text item(s) inside the paragraph. Remove the childNodes part and you should have a good reference to the paragraph element
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  14. #39
    SitePoint Addict
    Join Date
    Aug 2007
    Posts
    328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great, it looks like it's adding and removing as expected, however by default there is no caption on pageload, as we're removing it before we're adding another 1.

    I've modified it like this:
    Code:
    window.para = caption.getElementsByTagName('p')[0];
    var text =document.createTextNode(captionList[position]);
    window.para.appendChild(text);
    So now, whatever the first item in the captionList is, will be inserted on pageload by default, and THEN removed before the next item is added.

    Is there anything wrong with this code from what you can tell?
    It works fine and I personally (With my untrained eyes) can't see any issues with it.

  15. #40
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Yes, that seems fine.

    Now you can improve on that and remove the need for the global variable.

    Code javascript:
    function updateCaption(text) {
        var caption = document.getElementById('caption');
        var para = caption.getElementsByTagName('p')[0];
        var text = document.createTextNode(text);
        while (para.hasChildNodes()) {
            para.removeChild(para.firstChild);
        }
        para.appendChild(para);
    }

    Or, instead of removing the contents of the para before adding the text, you can create a separate paragraph with the added text, and replace the old one with the new one.

    Code javascript:
    function updateCaption(text) {
        var caption = document.getElementById('caption');
        var para = caption.getElementsByTagName('p')[0];
        var p = document.createElement('p');
        var text = document.createTextNode(text);
        para.parentNode.replaceChild(p, para);
    }

    Creating a new paragraph and replacing it with the old one is another effective way of updating the paragraph, compared with removing all the paragraph content before adding the text.

    Either way though, you can now call the following without needing to deal with the details of how the update occurs.

    Code javascript:
    updateCaption(captionList[position]);
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  16. #41
    SitePoint Addict
    Join Date
    Aug 2007
    Posts
    328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The caption doesn't work at all now, but the rest of the image gallery does.

    I pasted in your function exactly and put:
    Code:
    updateCaption(captionList[position]);
    In both the leftClick and rightClick functions, but the captions aren't working.


    I'm a little confused by your use of the "p" variable. It looks like you're creating it, but not putting it anywhere, so I don't know hwo you can replace it.


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
  •