SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 42
  1. #1
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Undefined error?

    Getting close to figuring this out, but very stuck on this error:

    slide_num is not defined
    Isn't this defined in the function that is pulling from the array?

    Also I was told that the line:
    document.getElementById('projectLinks').location.href=imgArray[slide_num][3];
    Would fail because it will run before the div "projectLinks" has been rendered? I have no idea what all this means.

    please note: i can design a house, a website, code in css with my eyes closed, but i am a clutz when it comes to javascript.


    Here is the page.

    Here is my code

    var num=0;


    // format: projectImage, projectTitle, projectDesc, projectLinks
    imgArray = [
    ['images/pc_bookCover.jpg', 'A Life Inspired', 'book cover design 45th anniversary', 'projects/pc.html#bookCover'],
    ['images/pc_acco.jpg', 'Accomplishments', 'Peace Corps annual report', 'projects/acco.html'],
    ['images/pc_bookMarks.jpg', 'Bookmarks', 'Peace Corps bookmarks', 'projects/pcWeek.html#bookmarks'],
    ['images/pc_bookCover.jpg', 'A Life Inspired', 'book cover design, 45th anniversary', 'projects/pc.html#bookCover']
    ]

    function slideshow(slide_num) {
    document.getElementById('projectImage').src=imgArray[slide_num][0];
    document.getElementById('projectTitle').innerHTML=imgArray[slide_num][1];
    document.getElementById('projectDesc').innerHTML=imgArray[slide_num][2];
    document.getElementById('projectLinks').location.href=imgArray[slide_num][3];

    }

    var tmp = '<a href="#" onClick="location.href=imgArray[slide_num][3];return false">';
    tmp += imgArray[slide_num][3]+'</a>';
    document.getElementById('projectLinks').innerHTML = tmp;

    HTML
    <div class="projectInfo">
    <div id="projectTitle" class="projectTitle">1. A Life Inspired</div>
    <div id="projectDesc" class="projectDesc"> book cover design for Peace Corps's volunteer stories</div>
    <div id="projectLinks" class="projectLinks"> <a href="#"> VIEW PROJECT</a></div>
    </div>

    <div id="subLoader"></div>
    <div class="projectImage" id="projectImage"></div>
    Last edited by PoonahLove; Jan 18, 2008 at 15:15. Reason: clarity

  2. #2
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,290
    Mentioned
    198 Post(s)
    Tagged
    3 Thread(s)

    not defined

    Hi PoonahLove, welcome to the forums.
    HTML Code:
    function slideshow(slide_num) {
    document.getElementById('projectImage').src=imgArray[slide_num][0];
    ....
    Where does the slide_num argument that's passed to the slideshow function come from?

  3. #3
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Mittineague,
    Thank you so much for the welcome!
    The variable 'slide_num' is defined within the function only.

    The issue now is this line:

    document.getElementById("projectLinks").location has no properties
    [Break on this error] document.getElementById('projectLinks').location.href=imgArray[slide_num][3];
    I was told that it would fail because it will run before the div "projectLinks" has been rendered. Any clues on how to resolve this?

  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)
    The slide_num argument in the slideshow function doesn't define the value for the rest of the code outside of the function.

    Because the code is loaded in the head section of the document, all of the code is run before the body of the document is available. If you want code to access elements on the page you will have to wait until those elements are available.

    There are three common options for doing this.
    • Start a function when the page has loaded
    • Activate a function when someone interacts with the page
    • Place the code at the end of the body

    I typically subscribe to the last two options myself, whereas other see different benefits with the first option.

    Later on I'll go through more effective ways to achieve what you're after here.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    PMW57 said:
    Activate a function when someone interacts with the page
    So the onClick function would not qualify?

    <li><a href="#section_work" onClick="num=0;slideshow(0);return false">1</a></li>
    or should it be
    <body onLoad="slideshow(num)">

  6. #6
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I added an onLoad function to the body, but I still get the same error with the
    projectLinks

    <body onLoad="num=0;slideshow(num)">
    still the same error
    document.getElementById("projectLinks").location has no properties
    [Break on this error] document.getElementById('projectLinks').location.href=imgArray[slide_num][3];

  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)
    Quote Originally Posted by PoonahLove View Post
    So the onClick function would not qualify?
    Yes, onclick qualifies.

    The header code that's outside of the function though will activate before the page is available, so you should place the init code separately in a function, whereupon you have two options.

    • run the init function as an onload event, where it won't be run until every single page element (like images) has finished loading
    • Run the init function from an init.js file at the end of the body, where it gets run as soon as the DOM is ready and long before the page finishes loading.

    You can guess which option is my preferred one, can't you.

    Code HTML4Strict:
    ...
    <script type="text/javascript" src="js/init.js"></script>
    </body>
    </html>

    js/init.js
    Code Javscript:
    initProjectLinks();
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey pmw57,
    I am confused. The script is already linked in a file called work.js. You can see how it is working so far here.

    Below is the code:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>Krishna Brown</title>

    <meta name="generator" content="BBEdit 8.7">
    <meta name="description" content="image and words">
    <meta name="keywords" content="creative concepts, screen designs, branding, nomenclature, brand design, copywriting ">
    <meta name="author" content="Krishna Brown and open sources">
    <meta name="copyright" content="&#169; 2008 Krishna Brown">
    <link rel="stylesheet" type="text/css" media="screen" href="css/template.css">
    <link rel="stylesheet" type="text/css" media="screen" href="css/intro.css">
    <link rel="stylesheet" type="text/css" media="screen" href="css/work.css">
    <link rel="stylesheet" type="text/css" media="screen" href="css/experience.css">
    <link rel="stylesheet" type="text/css" media="screen" href="css/colophon.css">
    <script type="text/javascript" src="js/scroll.js"></script>
    <script type="text/javascript" src="js/swfobject.js" ></script>


    </head>

    <body onLoad="num=0;slideshow(num)">

    <div id="rap">




    <div id="intro">
    <a name="section_intro"></a>
    <div class="content">
    <div id="topNav">
    <ul>
    <li><a href="#section_intro" class="KB">KRISHNA BROWN</a></li>
    <li><a href="#section_work">WORK</a></li>
    <li><a href="#section_experience">EXPERIENCE</a></li>
    <li><a href="#section_colophon">COLOPHON</a></li>
    </ul>
    </div>
    </div>
    </div>


    <div id="seperator" style="height:595px;"></div>





    <div id="work">
    <a name="section_work"></a>
    <div class="content">
    <h1>WORK</h1>

    <div id="topNav">
    <ul>
    <li><a href="#section_intro" class="KB">KRISHNA BROWN's</a></li>
    <li><a href="#section_work" class="active">WORK</a></li>
    <li><a href="#section_experience">EXPERIENCE</a></li>
    <li><a href="#section_colophon">COLOPHON</a></li>
    </ul>
    </div>

    <div class="projectInfo">
    <div id="projectTitle" class="projectTitle"></div>
    <div id="projectDesc" class="projectDesc"></div>
    <div id="projectLinks" class="projectLinks"> <a href="#"> VIEW PROJECT</a></div>
    </div>

    <div id="subLoader"></div>
    <div class="projectImage" id="projectImage"></div>

    <div id="bottomNav">
    <ul>
    <li><a href="#section_work" onClick="num=0;slideshow(0);return false">1</a></li>
    <li><a href="#section_work" onClick="num=1;slideshow(1);return false">2</a></li>
    <li><a href="#section_work">3</a></li>
    <li><a href="#section_work">4</a></li>
    <li><a href="#section_work">5</a></li>
    <li><a href="#section_work">6</a></li>
    <li><a href="#section_work">7</a></li>
    <li><a href="#">8</a></li>
    <li><a href="#">9</a></li>
    <li><a href="#">10</a></li>
    <li><a href="#">11</a></li>
    <li><a href="#">12</a></li>
    <li><a href="#">13</a></li>

    </ul>
    </div>






    </div>

    </div>




    <div id="seperator"></div>




    <div id="experience">
    <a name="section_experience"></a>
    <div class="content">
    </div>
    </div>




    <div id="seperator"></div>





    <div id="colophon">
    <a name="section_colophon"></a>
    <div class="content">
    </div>
    </div>


    <div id="seperator"></div>
    </div>
    <script type="text/javascript" src="js/work.js"></script>
    </body>
    </html>
    work.js looks like this:

    // format: projectImage, projectTitle, projectDesc, projectLinks


    imgArray = [
    ['images/pc_bookCover.jpg', 'A Life Inspired', 'book cover design 45th anniversary', 'projects/pc.html#bookCover'],
    ['images/pc_acco.jpg', 'Accomplishments', 'Peace Corps annual report', 'projects/acco.html'],
    ['images/pc_bookMarks.jpg', 'Bookmarks', 'Peace Corps bookmarks', 'projects/pcWeek.html#bookmarks'],
    ['images/pc_bookCover.jpg', 'A Life Inspired', 'book cover design, 45th anniversary', 'projects/pc.html#bookCover']
    ]

    function slideshow(slide_num) {
    document.getElementById('projectImage').src=imgArray[slide_num][0];
    document.getElementById('projectTitle').innerHTML=imgArray[slide_num][1];
    document.getElementById('projectDesc').innerHTML=imgArray[slide_num][2];
    document.getElementById('projectLinks').location.href=imgArray[slide_num][3];
    var tmp = '<a href="#" onClick="location.href=imgArray[slide_num][3];return false">';
    tmp += imgArray[slide_num][3]+'</a>';
    document.getElementById('projectLinks').innerHTML = tmp;


    }

  9. #9
    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's good. If you remove the following line it should work for you.

    Code Javascript:
    document.getElementById('projectLinks').location.href=imgArray[slide_num][3];
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok. Thank you so much! Thank you.

    Deleting that line does solve the problem. But causes another one. I need that line of text there to reference the HREF. I need the link to change not the text itself.

    Under the image caption there is the link "View Project" the HREF should change for each link. Right now "View Project" is being replaced and the link is not being changed. That is why I had this line of code:

    document.getElementById('projectLinks').location.href=imgArray[slide_num][3];

    So if you click link #2 the .ProjectTitle and .ProjectDesc are changing but .info_ProjectLink is not being changed and the .ProjectImage is not being changed.

    document.getElementById('projectImage').src=imgArray[slide_num][0];
    document.getElementById('info_projectLinks').location.href=imgArray[slide_num][3];

    <div id="info_projectLinks" class="projectLinks"> <a href="/projects/pc.html#bookCover"> VIEW PROJECT</a></div>
    <div class="projectImage" id="projectImage"></div>
    Am I referencing the array incorrectly. Is the syntax for the image and link incorrect?

    // format: projectImage, projectTitle, projectDesc, projectLinks


    imgArray = [
    ['images/pc_bookCover.jpg', 'A Life Inspired', 'book cover design 45th anniversary', 'projects/pc.html#bookCover'],
    ['images/pc_acco.jpg', 'Accomplishments', 'Peace Corps annual report', 'projects/acco.html'],
    ['images/pc_bookMarks.jpg', 'Bookmarks', 'Peace Corps bookmarks', 'projects/pcWeek.html#bookmarks'],
    ['images/pc_bookCover.jpg', 'A Life Inspired', 'book cover design, 45th anniversary', 'projects/pc.html#bookCover']
    ]

    function slideshow(slide_num) {
    document.getElementById('projectImage').src=imgArray[slide_num][0];
    document.getElementById('projectTitle').innerHTML=imgArray[slide_num][1];
    document.getElementById('projectDesc').innerHTML=imgArray[slide_num][2];
    document.getElementById('info_projectLinks').location.href=imgArray[slide_num][3]; //this is to change the HREF

    var tmp = '<a href="#" onClick="location.href=imgArray[slide_num][3];return false">';
    tmp += imgArray[slide_num][3]+'</a>';
    document.getElementById('info_projectLinks').location.href = tmp;


    }

    Please view the page here
    Last edited by PoonahLove; Jan 18, 2008 at 18:09. Reason: clarity

  11. #11
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,290
    Mentioned
    198 Post(s)
    Tagged
    3 Thread(s)

    href

    AFAIK location is a property of document, not elements. Try it without "location".

  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)
    Quote Originally Posted by PoonahLove View Post
    Under the image caption there is the link "View Project" the HREF should change for each link. Right now "View Project" is being replaced and the link is not being changed. That is why I had this line of code:
    Now that the error is resolved we can fix up the anchor link.

    Let's look at the place that we want to reference.

    Code HTML4Strict:
    <div id="projectLinks" class="projectLinks"> <a href="#"> VIEW PROJECT</a></div>

    The div contains the anchor, inside of which is the href that we want to change.

    Hang on, after looking at the javascript I'm going to scratch my original idea. There's an easier solution by making a small adjustment to your existing code.

    Code Javascript:
    var tmp = '<a href="' + imgArray[slide_num][3] +" ';
    tmp += 'onClick="location.href=imgArray[slide_num][3];return false">';
    tmp += imgArray[slide_num][3]+'</a>';
    document.getElementById('info_projectLinks').location.href = tmp;

    I would have done this a completely different way, but this way works in with what you currently have.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  13. #13
    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)
    I should note that the above code doesn't need the onclick event, as the event appears to be duplicating what occurs when people normally click on a link anyway.

    So it can be updated to the following:

    Code Javascript":
    var tmp = '<a href="' + imgArray[slide_num][3] +" '>';
    tmp += imgArray[slide_num][3]+'</a>';
    document.getElementById('info_projectLinks').location.href = tmp;

    The way that I was going to do it would have been quite different.

    Code Javascript:
    var imageLink = document.getElementById('info_projectLinks');
    var anchor = imageLink.getElementsByTagName('a')[0];
    anchor.setAttribute('href', slide_num][3]);
    while (anchor.firstChild()) {
        anchor.removeChild(anchor.firstChild()));
    }
    anchor.appendChild(document.createTextNode(slide_num][3]));

    That would have been the more proper way to update the anchor link and text.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  14. #14
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To keep the "View Project" link, changing only the HREF
    shouldn't it be?
    var tmp = '<a href="#" onClick="location.href=imgArray[slide_num][3];return false">';
    tmp += 'View Project</a>'
    document.getElementById('info_projectLinks').location.href = tmp;

    Also, I made the changes suggested (view them here). But when I click the "View Project" link I get the following error:
    slide_num is not defined
    It does not take me to the link. The link is not passed to it. Also, the image is not changing. When I click on link "2" the text changes but not the image. Am I referencing the src incorrectly in the array?


    The proper way you suggest would look like this in its entirety?
    function slideshow(slide_num) {
    document.getElementById('projectImage').src=imgArray[slide_num][0];
    document.getElementById('projectTitle').innerHTML=imgArray[slide_num][1];
    document.getElementById('projectDesc').innerHTML=imgArray[slide_num][2];

    var imageLink = document.getElementById('info_projectLinks');
    var anchor = imageLink.getElementsByTagName('a')[0];
    anchor.setAttribute('href', slide_num][3]);
    while (anchor.firstChild()) {
    anchor.removeChild(anchor.firstChild()));
    }
    anchor.appendChild(document.createTextNode(slide_num][3]));
    }
    Last edited by PoonahLove; Jan 18, 2008 at 20:24. Reason: clarity

  15. #15
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The problem with the image:

    The image is being referenced in css like this

    #work div.content .projectImage {
    width: 480px;
    height: 334px;
    position: absolute;
    background: url(../images/pc_bookCover.jpg);
    background-repeat:no-repeat;
    background-position: center;
    z-index:2;
    left: 95px;
    top: 80px;

    }

    that being the case should the js look like this
    document.getElementById('projectImage').style.backgroundImage='url(imgArray[slide_num][0])';
    Not sure if my syntax is correct

  16. #16
    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)
    Okay, I'm going to save this and work on it locally.

    First, the link numbers along the bottom. The first thing to consider is, how will it work when there's no javascript. You can be taken to the image or project page, and I think that the project page is the more useful link to be used.

    Code HTML4Strict:
    <div id="bottomNav">
        <ul>
            <li><a href="projects/pc.html#bookCover">1</a></li>
            <li><a href="projects/acco.html">2</a></li>
            <li><a href="projects/pcWeek.html#bookmarks">3</a></li>

    Where is the onclick? The script can add that by itself but first we need the code to properly add and event that works across a wide range of browsers.

    The following addEvent function is a good one to add to your common.js file. Just be sure to include it before you need to use it.

    Code Javascript:
    function addEvent( obj, type, fn ) {
    	if (obj.addEventListener) {
    		obj.addEventListener( type, fn, false );
    		EventCache.add(obj, type, fn);
    	}
    	else if (obj.attachEvent) {
    		obj["e"+type+fn] = fn;
    		obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
    		obj.attachEvent( "on"+type, obj[type+fn] );
    		EventCache.add(obj, type, fn);
    	}
    	else {
    		obj["on"+type] = obj["e"+type+fn];
    	}
    }
     
    var EventCache = function(){
    	var listEvents = [];
    	return {
    		listEvents : listEvents,
    		add : function(node, sEventName, fHandler){
    			listEvents.push(arguments);
    		},
    		flush : function(){
    			var i, item;
    			for(i = listEvents.length - 1; i >= 0; i = i - 1){
    				item = listEvents[i];
    				if(item[0].removeEventListener){
    					item[0].removeEventListener(item[1], item[2], item[3]);
    				};
    				if(item[1].substring(0, 2) != "on"){
    					item[1] = "on" + item[1];
    				};
    				if(item[0].detachEvent){
    					item[0].detachEvent(item[1], item[2]);
    				};
    				item[0][item[1]] = null;
    			};
    		}
    	};
    }();
    addEvent(window,'unload',EventCache.flush);

    Now we can start writing the script, by going through the bottom nav links and adding the event. This is done from javascript to keep the HTML nice and clean.

    When we click on the link we want to cancel the default link action. Because we're separating content and behaviour, we shouldn't have inline javascript in onclick attributes. Instead we use the addEvent function instead.

    Code Javascript:
    var bottomNav = document.getElementById('bottomNav');
    var links = bottomNav.getElementsByTagName('a');
    for (var i=0; i < links.length; i++) {
        addEvent(links[i], 'click', updateInfo);
    }

    Now we just need the updateInfo() function to complete things. The first task is to get the link that fired the event. Once we have that, we can get the link, and use the appropriate info from the array to fill in the project info section. Then finally we can prevent the default behaviour of the link.

    Code Javascript:
    function updateInfo(e) {
    	// get event
    	e = e || window.event;
        var targ = e.target || e.srcElement;
        if (targ.nodeType == 3) { // Safari passes text node instead
            targ = targ.parentNode;
        }
        imgArray = [  
            ['images/pc_bookCover.jpg', 'A Life Inspired',  'book cover design 45th anniversary', 'projects/pc.html#bookCover'],
            ['images/pc_acco.jpg', 'Accomplishments',  'Peace Corps annual report', 'projects/acco.html'],
            ['images/pc_bookMarks.jpg', 'Bookmarks',  'Peace Corps bookmarks', 'projects/pcWeek.html#bookmarks']
        ];
    	// get link
    	var link = targ.getAttribute('href');
    	// search for link in array
    	for (var i=0; i < imgArray.length; i++) {
    		if (link === imgArray[i][3]) {
    			document.getElementById('projectImage').src=imgArray[i][0];
    			document.getElementById('projectTitle').innerHTML=imgArray[i][1];
    			document.getElementById('projectDesc').innerHTML=imgArray[i][2];
    			var imageLink = document.getElementById('info_projectLinks');
    			var anchor = imageLink.getElementsByTagName('a')[0];
    			anchor.setAttribute('href', imgArray[i][3]);
    			replaceContent(anchor, imgArray[i][3]);
    		}
     
    	}
    	if (e.preventDefault) {
                e.preventDefault();
            }
            e.defaultValue = false;
            return false;
    }
    function replaceContent(el, content) {
        while (el.firstChild) {
    	    el.removeChild(el.firstChild);
    	}
    	el.appendChild(document.createTextNode(content));
    }

    That is how I would do it more properly.
    Last edited by paul_wilkins; Jan 20, 2008 at 16:49.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  17. #17
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok will this line take care of the image being swapped?
    document.getElementById('projectImage').src=imgArray[i][0];
    currently the image is being referenced from css like this
    #work div.content .projectImage {
    width: 480px;
    height: 334px;
    position: absolute;
    background: url(../images/pc_bookCover.jpg);
    background-repeat:no-repeat;
    background-position: center;
    z-index:2;
    left: 95px;
    top: 80px;

    }
    that being the case should the image be changed like this?

    document.getElementById('projectImage').style.backgroundImage='url(imgArray[i][0])';

  18. #18
    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)
    Even better is to place the information about the links on the links themself. Then it can be obtained from them when desired.

    But first as there is a picture that is shown at the start, we'll place the appropriate info about that in the HTML already.

    Code HTML4Strict:
    <div class="projectInfo">
        <div id="projectTitle" class="projectTitle"></div>
        <div id="projectDesc" class="projectDesc"></div>
        <div id="projectLinks" class="projectLinks"> <a href="#"> VIEW PROJECT</a></div>
    </div>

    That combined with having the actual project links means that the design works without javascript, and if people do have it they will have a nice enhancement. This is not a matter of assuming people don't have javascript, but of ensuring that the page still "works" to a degree should they be without it.

    All of the elements on the page are objects, and you can add custom properties to any of them. It can be a big help to keep all of the related information with the element itself.

    Code Javascript:
    imgArray = [  
        ['images/pc_bookCover.jpg', 'A Life Inspired',  'book cover design 45th anniversary'],
        ['images/pc_acco.jpg', 'Accomplishments',  'Peace Corps annual report'],
        ['images/pc_bookMarks.jpg', 'Bookmarks',  'Peace Corps bookmarks']
    ];
    var bottomNav = document.getElementById('bottomNav');
    var links = bottomNav.getElementsByTagName('a');
    for (var i=0; i < imgArray.length; i++) {
        links[i].img = imgArray[i][0];
        links[i].title = imgArray[i][1];
        links[i].desc = imgArray[i][2];
        addEvent(links[i], 'click', updateInfo);
    }

    Now that things are prepared, it's a simple manner to pull the info from the clicked link and apply it to the project area.

    Code Javascript:
    function updateInfo(e) {
        // get event
        e = e || window.event;
        var targ = e.target || e.srcElement;
        if (targ.nodeType == 3) { // Safari passes text node instead
            targ = targ.parentNode;
        }
        // set project attributes
        document.getElementById('projectImage').style.backgroundImage = targ.img;
        //replaceContent(document.getElementById('projectTitle'), targ.title);
        //replaceContent(document.getElementById('projectDesc'), targ.desc);
        var projectLink = document.getElementById('projectLinks');
        var anchor = projectLink.getElementsByTagName('a')[0];
        var link = targ.getAttribute('href');
        anchor.setAttribute('href', link);
        //replaceContent(anchor, link);
        function replaceContent(el, content) {
            while (el.firstChild) {
                el.removeChild(el.firstChild);
            }
            el.appendChild(document.createTextNode(content));
        }
        // stop the default link action from occuring
        if (e.preventDefault) {
            e.preventDefault();
        }
        e.defaultValue = false;
        return false;
    }

    That's improving, but the large amount of identifiers and div tags needs to be reduced.
    For example, using a background image on a fundamental image of the page is a bad idea. HTML has an image tag that's been doing a better job of it for a long time. It's a matter of considering how it will look should CSS not be available. If it's not then you are well served by the wealth of existing HTML elements, instead of trying to recreate them with div tags.

    This idea is called progressive enhancement. Start with just the HTML. It's possible to create a workable version of virtually any Web page with just HTML and in a few cases, some server code. From there you use CSS to make it look pretty, and Javascript to add behaviour to the page. All together they allow great things to happen, but without CSS or Javascript it still can be used, even if in a more limited fashion.
    That way you won't be annoying people who don't have those certain capabilitiies.
    Last edited by paul_wilkins; Jan 20, 2008 at 16:52.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  19. #19
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Continuity

    Thank you for continuing to work with me on this.

    I do think I have confused what I want done for this slideshow.

    See here for example. Click on a link and the project is described. Click on "View Project" or the project image and it takes you to another page.

    The bottomLinks should only change the image, imagetitle, imagedesc and "View Project" href. The way you coded it, when a user clicks on a bottom link it will take him to another page.

    you wrote
    <li><a href="projects/pc.html#bookCover">1</a></li>
    <li><a href="projects/acco.html">2</a></li>
    <li><a href="projects/pcWeek.html#bookmarks">3</a></li>
    "View Project" should take them to another page, but not the bottom links

  20. #20
    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 bottom links will only take them to another page when there is no Javascript. This is a safety precaution so that the page will still work to a degree should that be the case.

    I didn't know about the site you mentioned before, but you will see that they apply the same technique.

    When there is Javascript, the situation changes. The default action of the link is cancelled (you are not taken to another page) the image changes and the project details appear.

    I presume though that you are wanting to keep the View Project text on the project link. If that's the case then replace the following

    Code Javascript:
    var projectLink = document.getElementById('projectLinks');
    var anchor = projectLink.getElementsByTagName('a')[0];
    var link = targ.getAttribute('href');
    anchor.setAttribute('href', link);
    replaceContent(anchor, link);

    with

    Code Javascript:
    var projectLink = document.getElementById('projectLinks');
    var anchor = projectLink.getElementsByTagName('a')[0];
    anchor.setAttribute('href', targ.getAttribute('href'));
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  21. #21
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've added the script as you suggested, but I must be applying it incorrectly?

    Can you please take a look at it here?

    When I click on the numbered links it goes to another page instead of showing the Title, Description and populating the HREF in "View Project"

    These are the errors that are coming up in FireBug

    bottomNav has no properties
    [Break on this error] var links = bottomNav.getElementsByTagName('a');

  22. #22
    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 proof of concept code. The inline javascript in the head should be in the file common.js, and the code at the end should be in a separate js file too.

    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     
        <title>Krishna Brown</title>
     
        <meta name="generator" content="BBEdit 8.7">
        <meta name="description" content="image and words">
        <meta name="keywords" content="creative concepts, screen designs, branding, nomenclature, brand design, copywriting ">
        <meta name="author" content="Krishna Brown and open sources">
        <meta name="copyright" content=" 2008 Krishna Brown">
        <link rel="stylesheet" type="text/css" media="screen" href="css/template.css">
        <link rel="stylesheet" type="text/css" media="screen" href="css/intro.css">
        <link rel="stylesheet" type="text/css" media="screen" href="css/work.css">
        <link rel="stylesheet" type="text/css" media="screen" href="css/experience.css">
        <link rel="stylesheet" type="text/css" media="screen" href="css/colophon.css">
        <script type="text/javascript">
    function addEvent( obj, type, fn ) {
        if (obj.addEventListener) {
            obj.addEventListener( type, fn, false );
            EventCache.add(obj, type, fn);
        }
        else if (obj.attachEvent) {
            obj["e"+type+fn] = fn;
            obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
            obj.attachEvent( "on"+type, obj[type+fn] );
            EventCache.add(obj, type, fn);
        }
        else {
            obj["on"+type] = obj["e"+type+fn];
        }
    }
     
    var EventCache = function(){
        var listEvents = [];
        return {
            listEvents : listEvents,
            add : function(node, sEventName, fHandler){
                listEvents.push(arguments);
            },
            flush : function(){
                var i, item;
                for(i = listEvents.length - 1; i >= 0; i = i - 1){
                    item = listEvents[i];
                    if(item[0].removeEventListener){
                        item[0].removeEventListener(item[1], item[2], item[3]);
                    };
                    if(item[1].substring(0, 2) != "on"){
                        item[1] = "on" + item[1];
                    };
                    if(item[0].detachEvent){
                        item[0].detachEvent(item[1], item[2]);
                    };
                    item[0][item[1]] = null;
                };
            }
        };
    }();
    addEvent(window,'unload',EventCache.flush);
        </script>
        <script type="text/javascript" src="js/scroll.js"></script>
        <script type="text/javascript" src="js/swfobject.js" ></script>
     
    </head>
     
    <body>
     
            <div id="rap">
     
     
     
     
                <div id="intro">
                    <a name="section_intro"></a>
                    <div class="content">
                        <div id="topNav">
                        <ul>
                            <li><a href="#section_intro" class="KB">KRISHNA BROWN</a></li>
                            <li><a href="#section_work">WORK</a></li>
                            <li><a href="#section_experience">EXPERIENCE</a></li>
                            <li><a href="#section_colophon">COLOPHON</a></li>
                        </ul>
                        </div>
                    </div>
                </div>
     
     
                <div id="seperator" style="height:595px;"></div>
     
     
     
     
     
                <div id="work">
                    <a name="section_work"></a>
                    <div class="content">
                        <h1>WORK</h1>
     
                    <div id="topNav">
                        <ul>
                            <li><a href="#section_intro" class="KB">KRISHNA BROWN's</a></li>
                            <li><a href="#section_work" class="active">WORK</a></li>
                            <li><a href="#section_experience">EXPERIENCE</a></li>
                            <li><a href="#section_colophon">COLOPHON</a></li>
                        </ul>
                    </div>
     
                        <div class="projectInfo">
                                <div id="projectTitle" class="projectTitle"></div>
                                <div id="projectDesc" class="projectDesc"></div>
                                <div id="projectLinks" class="projectLinks"> <a href="#"> VIEW PROJECT</a></div>
                        </div>
     
                        <div id="subLoader"></div>
                        <div class="projectImage" id="projectImage"></div>
     
                    <div id="bottomNav">
                        <ul>
                            <li><a href="projects/pc.html#bookCover">1</a></li>
                            <li><a href="projects/acco.html">2</a></li>
                            <li><a href="projects/pcWeek.html#bookmarks">3</a></li>
                            <li><a href="images/pc_bookCover.jpg">4</a></li>
                            <li><a href="#section_work">5</a></li>
                            <li><a href="#section_work">6</a></li>
                            <li><a href="#section_work">7</a></li>
                            <li><a href="#">8</a></li>
                            <li><a href="#">9</a></li>
                            <li><a href="#">10</a></li>
                            <li><a href="#">11</a></li>
                            <li><a href="#">12</a></li>
                            <li><a href="#">13</a></li>
     
                        </ul>
                    </div>
     
     
     
     
     
     
                    </div>
     
                </div>
     
     
     
     
                <div id="seperator"></div>
     
     
     
     
                <div id="experience">
                    <a name="section_experience"></a>
                    <div class="content">
                    </div>
                </div>
     
     
     
     
                <div id="seperator"></div>
     
     
     
     
     
                <div id="colophon">
                    <a name="section_colophon"></a> 
                    <div class="content">
                    </div>   
                </div>
     
     
                <div id="seperator"></div>
        </div>
    <script type="text/javascript">
    imgArray = [ 
        ['images/pc_bookCover.jpg', 'A Life Inspired',  'book cover design 45th anniversary'],
        ['images/pc_acco.jpg', 'Accomplishments',  'Peace Corps annual report'],
        ['images/pc_bookMarks.jpg', 'Bookmarks',  'Peace Corps bookmarks']
    ];
    var bottomNav = document.getElementById('bottomNav');
    var links = bottomNav.getElementsByTagName('a');
    for (var i=0; i < imgArray.length; i++) {
        links[i].img = imgArray[i][0];
        links[i].title = imgArray[i][1];
        links[i].desc = imgArray[i][2];
        addEvent(links[i], 'click', updateInfo);
    }
    function updateInfo(e) {
        // get event
        e = e || window.event;
        var targ = e.target || e.srcElement;
        if (targ.nodeType == 3) { // Safari passes text node instead
            targ = targ.parentNode;
        }
        // set project attributes
        document.getElementById('projectImage').style.background = 'url('+targ.img + ')';
        replaceContent(document.getElementById('projectTitle'), targ.title);
        replaceContent(document.getElementById('projectDesc'), targ.desc);
        var projectLink = document.getElementById('projectLinks');
        var anchor = projectLink.getElementsByTagName('a')[0];
        anchor.setAttribute('href', targ.getAttribute('href'));
        function replaceContent(el, content) {
            while (el.firstChild) {
                el.removeChild(el.firstChild);
            }
            el.appendChild(document.createTextNode(content));
        }
        // stop the default link action from occuring
        if (e.preventDefault) {
            e.preventDefault();
        }
        e.defaultValue = false;
        return false;
    }
    </script>
    </body>
    </html>
    Last edited by paul_wilkins; Jan 20, 2008 at 16:53.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  23. #23
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Close but no cigar *Link and Image still not working*

    We are close. Please dont give up on this!

    See here for results.

    When you click on the Work link it takes you down to the work section.


    The photo for link 1 shows up, Title and Description. But the "View Project" is still not linking correctly.

    Click on link 2 and the image is not showing up for link 2 and the "View Project" link also is not linking correctly.

  24. #24
    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)
    Code Javascript:
    document.getElementById('getProjectImage').style.backgroundImage='url('+imgArray[slide_num][0]+')';

    Although, you really should stop using the css background to display the image and use a proper img tag instead.

    Code HTML4Strict:
    <img id="getProjectImage" class="projectImage" src="images/pc_bookCover.jpg" />

    Then you can get rid of the CSS background image property, and use this javascript to update the image.

    Code Javascript:
    document.getElementById('getProjectImage').src=imgArray[slide_num][0];

    So there's two ways for you.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  25. #25
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok. but what about the link "View Project" not working?


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
  •