SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 42 of 42
  1. #26
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I took out the background link. But the image still is not changing, the title and description are not showing up when page is loaded and the "View Project" link is still not working. Are you seeing something different? Is that why you haven't answered the questions? I dont want to keep bothering you with this.
    You can also see what I'm describing online here.
    Last edited by PoonahLove; Jan 19, 2008 at 18:01. Reason: clarity

  2. #27
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you answer the question about the links not working correctly?

    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.

  3. #28
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    As we've moved away from my rock-solid solution and are back to your old code, I'll have a look and see what can be done.

    In the javascript, the "#" needs to be replaced by with "'+imgArray[slide_num][3]+'"
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #29
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    I posted the fully working code in message #22

    Go back to that and use what's there.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #30
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Mr. Williams,
    Thank you. It is working. I copied your text verbatim. It is working. Except onLoad when the user goes clicks on "Work the description and title are missing from the first image. Also when the user does click "1" the image seems to be repeating.


    I will definitely pass this on to other designers like myself looking for a portfolio slideshow.

    I really really appreciate it. I hope you will contact me here so I can at least send you some ShoeBox Oven chocolates and sweets as a token for my gratitude.

    Thank you!
    Last edited by PoonahLove; Jan 19, 2008 at 19:36. Reason: thanks with one question

  6. #31
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    You're very welcome.

    An old school of thought was to use graceful degredation when building pages, but that didn't work too well. You started with the full shebang with css and javascript, then tried to ensure it would work if there was no javascript, or no css. That was a lot of hard work.

    The new school of thought is to use progressive enhancement. This starts very simply just with the HTML, using the full a range of elements (headings, paragraphs, images, links) to achieve a basic design. Only after you've done this should you use CSS to further the presentation and Javascript to add in and/or modify behaviours.

    This progressive enhancement is why HTML links should link to a useful location, like the numbered ones you had along the bottom. If there's no javascript, which is the case for some mobile devices, people who don't want it on, and quite importantly, for search engines, they will be able to at least get somewhere useful.

    The inline event handlers like the onclick attributes should not be used. This is as bad as having inline CSS. If javascript isn't available they're useless, and if it is then you have a range of more useful techniques that can be applied.

    Another very useful technique that was used is to store information about the element directly in the element itself as additional properties that you add on. The script walks through the anchors adding on properties about where they link to,a title, description, the image and so on. Then it becomes very easy to get that information when someone clicks on them, instead of having global variables floating about the place and making a mess of things.

    That's enough tutoring for the day though. I'm glad that we were able to bring that part of your project to a successful conclusion. My contact details are to be found at my OpenID Identity Page.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

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

    Are you an instructor/professor of Javascript?

    Thank you for your explanation about HTML, CSS and JS. I do want to make a smart site, that works for the largest audience.

    However, this site is really for design professionals to view my site. They would not look at it from their phone or without javascript. Most will be viewing from MAC OS X and from FireFox. So this is for a limited group of people.

    Though you have gotten me to the point I can move on to other things can you explain why the following is still not working:

    When the page first loads the description and title are still missing from the first image. Also when the user does click "1" the image seems to be repeating.


    Get back to me when you can. I'm off to watch the Magnificent Seven and get some zzzz's. I have to finish the portfolio by Monday. So, I'll be back at it again tomorrow.

  8. #33
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    I see in the slide.js file that the image has been changed to equal targ.img

    Code Javascript:
    // The below line is incorrect
    // document.getElementById('getProjectImage').style.backgroundImage = targ.img;
    // and should be the following
    document.getElementById('getProjectImage').style.backgroundImage = 'url('+targ.img + ')';

    So far as what happens on the first load, there are three options.
    • Remove the section from the plain HTML and have Javascript build it each time
    • Simulate a click on the first link when the page loads
    • Write the information directly into the HTML page for the first load.

    In this case I prefer the last option, but if you want to use the second option, we can pass a simulated event just after the for loop that attaches the other events.

    We will give the function an object that contains the first link.
    The function also uses the preventDefault property, so we have two options. Rewrite the function to check for its existence or provide it with the passed object.

    Rewriting the function would be a good idea if this were to be a common occurance, but as this occurs only once, we can instead pass an empty function.

    Code Javascript:
    updateInfo({target: links[0], preventDefault: function(){]});
    Last edited by paul_wilkins; Jan 19, 2008 at 22:03.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #34
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Morning Paul,
    I'll go the "easy" route
    write the information directly into the HTML page for the first load
    Thank you!
    Last edited by PoonahLove; Jan 20, 2008 at 07:20. Reason: finally understanding my mistakes

  10. #35
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    I've just remembered that Internet Explorer doesn't support some of the W3C DOM methods, so we'll have to do something extra for the preventDefault stuff to work on there too.

    Code Javascript:
    // stop the default link action from occuring
    if (e.preventDefault) {
        e.preventDefault();
    }
    e.returnValue = false;
    return false;

    My previous code has been updated too, in case anyone else comes along afterwards to try things out.
    Last edited by paul_wilkins; Jan 22, 2008 at 20:10.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #36
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I added the code, but still having the same errors in IE 6. You can view the results here

  12. #37
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Ahh yes, that's an issue with working from memory. It's returnValue = false instead of defaultValue. The code sample has been updated to reflect this.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  13. #38
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Look at js/work.js where the tmp variable is being assigned the string.
    You have href="#" when instead of the # you want instead the path you want the link to go to.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  14. #39
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Look at js/work.js where the tmp variable is being assigned the string.
    You have href="#" when instead of the # you want instead the path you want the link to go to.
    The code used does not refer to work.js. You can see the results here. Below is the code.

    <!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="&#172;&#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">
    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">1. A Life Inspired</div>
    <div id="projectDesc" class="projectDesc">book cover design</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="projects/pcWeek.html#bookmarks">4</a></li>
    <li><a href="projects/pcWeek.html#bookmarks">5</a></li>
    <li><a href="projects/pcWeek.html#bookmarks">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/slide.js" ></script>
    </body>
    </html>

    slide.js code:
    imgArray = [
    ['images/pc_bookCover.jpg', '1. A Life Inspired', 'book cover design 45th anniversary'],
    ['images/pc_acco_intro.jpg', '2. Accomplishments', 'Peace Corps look book'],
    ['images/pcWk_bookmarks_intro.jpg', '3. BookMarks', 'Peace Corps Week 2005 classroom materials'],
    ['images/sbo_logo_intro.jpg', '4. ShoeBox Oven', 'Logo/Brand for online specialty bakery'],
    ['images/sbo_site_intro.jpg', '5. ShoeBox Oven website', 'ECommerce website design'],
    ['images/sbo_email_intro.jpg', '6. ShoeBox Oven email', 'Weekly email campaign'],
    ['images/aaf_poster_intro.jpg', '7. AAF Posters', 'Heineken and Coca-Cola sponsored student competition materials']
    ];
    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.returnValue = false;
    return false;
    }

  15. #40
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by PoonahLove View Post
    The code used does not refer to work.js.
    I was looking at another page we had been working with that still had the wrong code.
    Can you please clarify what seems to be the problem with what we've worked on at http://www.shoeboxoven.com/kb/pmw57.html#section_work
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  16. #41
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it was not working in IE6. now it is. added the "returnValue = false." My testers say the links that have been coded are working. I dont have IE6, just FireFox. So I could not test its cross-browser compatability.
    Last edited by PoonahLove; Jan 23, 2008 at 15:05.

  17. #42
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    If it's the difference in the image that you see when you click on link #1, that's because the css starts the page with a different image.

    It seems to be working as expected in my IE6, so what is the issue you see in your IE6?
    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
  •