SitePoint Sponsor

User Tag List

Results 1 to 24 of 24

Thread: Javascript Help

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

    Question Javascript Help

    Hey everyone!

    I'm new to JavaScript, I'm currently creating my own portfolio site it all working but what i would like to do something:

    At the moment i have a table with all my content in the bottom cell I have image of my work in thumbnail s and on the top row of the table I have two columns. What I want to happen is I click on one of the images at the bottom and then for it to appear in the cell on the right column of the top row along with some text. So I was wondering if anyone could point me in the right direction and give me some help in doing this.

    Any help much appreciated

    Adam Huxtable

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Like many others I am reeling right now about using tables for layout. Using tables for layout is a bad bad thing. Do you use a spreadsheet to write your documents? That's all I trust myself to say for now on that particular topic.

    About what you're wanting help with, have the images at the bottom link directly to the large version of the image.

    Code HTML4Strict:
    <td id="gallery">
        <a href="image1.jpg"><img src="image1thm.jpg" alt="some text for image 1"></a>
        <a href="image2.jpg"><img src="image2thm.jpg" alt="some text for image 2"></a>
        <a href="image3.jpg"><img src="image3thm.jpg" alt="some text for image 3"></a>
    </td>

    This means that it will work if javascript isn't available, and if that's not an important enough reason, search engines don't use javascript either, so you will get much better results from them.

    It's important to have an alt attribute on all images. Some don't need a description while others do, so how can you tell what to put in there? Imagine that you're describing that part of the page to someone on the telephone. If it's an important image you provide lots of info, whereas if it's decorative fluff you say nothing at all with alt=""

    The display area starts off with just an identifier

    Code HTML4Strict:
    <td id="galleryDisplay">&nbsp;</td>

    Now we want a function to display the image and text

    Code Javascript:
    function showImage(e) {
        var image, display, img, p, text;
        e = e || window.event;
        image = e.target || e.srcElement;
        display = document.getElementById('galleryDisplay');
        // create image
        img = document.createElement('img');
        img.setAttribute('src', image.parentNode.getAttribute('href'));
        img.setAttribute('alt', image.getAttribute('alt'));
        // create text
        p = document.createElement('p');
        text = document.createTextNode(image.getAttribute('alt'));
        p.appendChild(text);
        // clear the display area and add the elements
        while (display.firstChild) {
            display.removeChild(display.firstChild);
        }
        display.appendChild(img);
        display.appendChild(p);
        // stop link from going to the linked image
        e.preventDefault();
    }

    And now all you have to do is attach the showImage() function on to the gallery links.

    Code Javascript:
    var links, i;
    links = document.getElementById('gallery').getElementsByTagName('a');
    for (i = 0; i < links.length; i++) {
        links[i].onclick = showImage;
    }

    As the above script needs to be done after the links are available on the page, the script can't be in the head section of the document. I would suggest you place both of the above scripts together in a gallery.js file, and use it at the end of the document.

    Code HTML4Strict:
    ...
    <script type="text/javascript" src="js/gallery.js"></script>
    </body>
    </html>
    Last edited by paul_wilkins; Jan 20, 2008 at 16:54.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much mate!
    I’m going to give it a go tomorrow, I’ll let ya know how I get along.

    Once again thanks mate.

  4. #4
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hey mate i just gave it ago, i cant seem to get it to work when i click on the image it just opens in another window.

    also when do i put the javascript in seperate file and if so do i put the two parts in in one js file.

    also you say with the image tag to have the ahref as image1thm and the src image1 so i have the pic i want in the gallery as the src and what is the ahref doing?

    cheers mate

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by adam87 View Post
    hey mate i just gave it ago, i cant seem to get it to work when i click on the image it just opens in another window.
    That means that the onclick event hasn't been attached to the link. If you run it directly from the head of the document then the link won't exist yet. It's best to run this type of thing from the end of the document instead, as mentioned at the end of my previous post.

    Quote Originally Posted by adam87 View Post
    also when do i put the javascript in seperate file and if so do i put the two parts in in one js file.
    You can do that right away. Putting the two parts in the one file is a very good idea.

    Quote Originally Posted by adam87 View Post
    also you say with the image tag to have the ahref as image1thm and the src image1 so i have the pic i want in the gallery as the src and what is the ahref doing?
    The src is the thumbnail, and the href is the full-size image.

    What the href is doing is providing access to the full-size image for search engines and other people who don't have javascript turned on. It's also being used by the script to give the location of the full-size image.

    I will quickly put together some proof of concept code.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Proof of concept code

    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
        <title>Test page</title>
    </head>
    <body>
    <table border="1">
    <tr>
    	<td width="33%">&nbsp;</td>
    	<td id="galleryDisplay">&nbsp;</td>
    </tr>
    <tr>
    	<td id="gallery" colspan="2">
    	    <a href="http://farm1.static.flickr.com/109/292888841_c4cac88fba.jpg">
    			<img src="http://farm1.static.flickr.com/109/292888841_c4cac88fba_m.jpg" alt="some text for image 1">
    		</a>
    	    <a href="http://farm1.static.flickr.com/9/75233686_187ba6b13d.jpg">
    			<img src="http://farm1.static.flickr.com/9/75233686_187ba6b13d_m.jpg" alt="some text for image 2">
    		</a>
    	    <a href="http://farm3.static.flickr.com/2177/1906436126_d361782e05.jpg">
    			<img src="http://farm3.static.flickr.com/2177/1906436126_d361782e05_m.jpg" alt="some text for image 3">
    		</a>
    	</td>
    </tr>
    </table>
    <script type="text/javascript" src="js/gallery.js"></script>
    </body>
    </html>

    I'm going to be nice to your environment and put the code that's outside of the function in an anonymous function. This keeps things nice and tidy, and is equivalent to not having your lounge floor covered in fast food wrappings after the meal.

    js/gallery.js

    Code Javascript:
    function showImage(e) {
        var image, display, img, p, text;
        e = e || window.event;
        image = e.target || e.srcElement;
        display = document.getElementById('galleryDisplay');
        // create image
        img = document.createElement('img');
        img.setAttribute('src', image.parentNode.getAttribute('href'));
        img.setAttribute('alt', image.getAttribute('alt'));
        // create text
        p = document.createElement('p');
        text = document.createTextNode(image.getAttribute('alt'));
        p.appendChild(text);
        // clear the display area and add the elements
        while (display.firstChild) {
            display.removeChild(display.firstChild);
        }
        display.appendChild(img);
        display.appendChild(p);
        // stop link from going to the linked image
        if (e.preventDefault) {
            e.preventDefault();
        }
        e.returnValue = false; // edit: was defaultValue
        return false;
    }
    (function() {
        var links, i;
        links = document.getElementById('gallery').getElementsByTagName('a');
        for (i = 0; i < links.length; i++) {
            links[i].onclick = showImage;
        }
    })();
    Last edited by paul_wilkins; Jan 22, 2008 at 22:18.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hey mate that works fine in mozilla firefox however when i try an open it in IE7 when i click on the image it jus opens full size on another page. is there some way we can tweak the code to get it to work in both.

    thanks! sorry for puttin you out!

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    IE doesn't support some of the standard W3C DOM, so we'll keep IE happy too with the following.

    Code Javascript:
    if (e.preventDefault) {
        e.preventDefault();
    }
    e.defaultValue = false;
    return false;

    The code in my previous post now reflects that too.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    umm so sorry mate, still dont seem to be working.

    also one other quick questions is there anyway to get the alt text to appear to the right of the image?

    lol once again such a big help!

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by adam87 View Post
    umm so sorry mate, still dont seem to be working.
    Post your code and we'll see what's not working with it.

    Quote Originally Posted by adam87 View Post
    also one other quick questions is there anyway to get the alt text to appear to the right of the image?
    CSS is great for that.

    Code CSS:
    #galleryDisplay img {
        float: left;
        margin: 0.5em;
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Test page</title>
    <link href="style.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
    <table border="1">
    <tr>
    <td width="33%">&nbsp;</td>
    <td id="galleryDisplay">&nbsp;</td>
    </tr>
    <tr>
    <td id="gallery" colspan="2">
    <a href="http://farm1.static.flickr.com/109/292888841_c4cac88fba.jpg">
    <img src="http://farm1.static.flickr.com/109/292888841_c4cac88fba_m.jpg" alt="some text for image 1">
    </a>
    <a href="http://farm1.static.flickr.com/9/75233686_187ba6b13d.jpg">
    <img src="http://farm1.static.flickr.com/9/75233686_187ba6b13d_m.jpg" alt="some text for image 2">
    </a>
    <a href="http://farm3.static.flickr.com/2177/1906436126_d361782e05.jpg">
    <img src="http://farm3.static.flickr.com/2177/1906436126_d361782e05_m.jpg" alt="some text for image 3">
    </a>
    </td>
    </tr>
    </table>
    <script type="text/javascript" src="js/gallery.js"></script>
    </body>
    </html>
    function showImage(e) {
    var image, display, img, p, text;
    e = e || window.event;
    image = e.target || e.srcElement;
    display = document.getElementById('galleryDisplay');
    // create image
    img = document.createElement('img');
    img.setAttribute('src', image.parentNode.getAttribute('href'));
    img.setAttribute('alt', image.getAttribute('alt'));
    // create text
    p = document.createElement('p');
    text = document.createTextNode(image.getAttribute('alt'));
    p.appendChild(text);
    // clear the display area and add the elements
    while (display.firstChild) {
    display.removeChild(display.firstChild);
    }
    display.appendChild(img);
    display.appendChild(p);
    // stop link from going to the linked image
    if (e.preventDefault) {
    e.preventDefault();
    }
    e.defaultValue = false;
    return false;
    }
    (function() {
    var links, i;
    links = document.getElementById('gallery').getElementsByTagName('a');
    for (i = 0; i < links.length; i++) {
    links[i].onclick = showImage;
    }
    })();
    I copy and pasted what you did everything works fine apart from it not working in IE

  12. #12
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    I just copy/pasted the code you posted and it appears to work fine in IE7 and IE6.

    The only possible issue is how you've placed or called the javascript file. See how it goes with the script inline.

    Code HTML4Strict:
    ...
    <script type="text/javascript">
    // js code here
    </script>
    </body>
    </html>
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  13. #13
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Right it all works, I just tried it on my laptop which uses IE7 and it worked fine must be something with my my IE7 on the PC.

    Thank you so much for everything, hope I aint put you out too much.



    Adam Huxtable

  14. #14
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hey sorry to be a pain in the backside what i have on my site is javascript hover buttons so when i hover over the button it scrolls along. but with that i had each image in a <td> tag but with the new code all the images are in one <td> but the js dont work. Ive tried puttin them all in there own <td> but it dont work. is there any way around this if not its no problem.

    thanks
    adam

  15. #15
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    You could put the gallery identifier on the TR element instead, or failing that show us what you're doing
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  16. #16
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    heres my coding


    html
    <!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 name="generator" content="HTML Tidy for Linux (vers 1 September 2005), see www.w3.org" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <title>ahuxdesigns.com</title>
    <link rel="shortcut icon" href="favicon.ico" >
    <link href="style.css" rel="stylesheet" type="text/css"/>
    <script src="dw_scrollObj.js" type="text/javascript">
    </script>
    <script src="dw_hoverscroll.js" type="text/javascript">
    </script>
    <script type="text/javascript">
    //<![CDATA[
    function initScrollLayer() {
    var wndo = new dw_scrollObj('wn', 'lyr1', 't1');
    dw_scrollObj.GeckoTableBugFix('wn');
    }
    //]]>
    </script>
    <style type="text/css">
    <!--
    .style1 {
    color: #FFFFFF;
    font-size: 8px;
    }
    -->
    </style>
    </head>
    <body onload="initScrollLayer()">
    <table width="1000" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td width="50px" rowspan="3" bgcolor="#3F5497"> </td>
    <td height="50px" bgcolor="#3F5497"> </td>
    <td width="50px" rowspan="3" bgcolor="#3F5497"> </td>
    </tr>
    <tr>
    <td height="471">
    <table width="899px" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td id="tdheight"><img src="ban.jpg" alt="banner" /></td>
    </tr>
    <tr>
    <td id="tdcontent">
    <table width="100%" border="0" cellpadding="5px" cellspacing="0" id="tdcontent1">
    <tr id="tdheight1">
    <td width="447" align="left" valign="top">
    <p class="style3"><span class="my1">Welcome</span><br />Welcome to my portfolio, here you will find pieces of work I have created for myself or for others. Examples will include work such as Web Sites, Flash files and projects done in Photoshop plus any other work I create.<p>
    I will try and update this site as regularly as possible. I welcome any comments about my page as I feel it can only improve the site. Also if you have any issues using the site please also let me know so I can rectify them asap.</p>
    <p class="style3">adam@ahuxdesigns.com</p></td>
    <td id="galleryDisplay">&nbsp;</td>
    </tr>
    <tr id="tdheight2">
    <td colspan="2" valign="top" id="tdheight3">
    <table width="100%" border="0">
    <tr>
    <td>
    <table border="0" align="center" cellpadding="6" cellspacing="0" class="main">
    <tr>
    <td><a href="javascript://" onclick="return false" onmouseover="dw_scrollObj.initScroll('wn','left')" onmouseout="dw_scrollObj.stopScroll('wn')" onmousedown="dw_scrollObj.doubleSpeed('wn')" onmouseup="dw_scrollObj.resetSpeed('wn')"><img src="testimages/aro-lft.gif" width="19" height="9" alt="1" /></a></td>
    <td><!-- scrolling layers -->
    <div id="hold">
    <div id="wn">
    <div id="lyr1" class="content">
    <table id="t1" border="0" cellpadding="0" cellspacing="6">
    <tr>
    <td id="gallery" colspan="2">
    <a href="img1.jpg">
    <img src="img1.jpg" alt="some text for image 1">
    </a>
    <a href="img2.jpg">
    <img src="img2.jpg" alt="some text for image 2">
    </a>
    <a href="img3.jpg">
    <img src="img3.jpg" alt="some text for image 3">
    <a href="img1.jpg">
    <img src="img1.jpg" alt="some text for image 4">
    </a>
    <a href="img2.jpg">
    <img src="img2.jpg" alt="some text for image 5">
    </a>
    <a href="img3.jpg">
    <img src="img3.jpg" alt="some text for image 6">
    <a href="img1.jpg">
    <img src="img1.jpg" alt="some text for image 7">
    </a>
    <a href="img2.jpg">
    <img src="img2.jpg" alt="some text for image 8">
    </a>
    <a href="img3.jpg">
    <img src="img3.jpg" alt="some text for image 3">
    </td>
    </tr>
    </table>
    </div>
    </div>
    <!-- end wn div --></div>
    <!-- end hold div --></td>
    <td><a href="javascript://" onclick="return false" onmouseover="dw_scrollObj.initScroll('wn','right')" onmouseout="dw_scrollObj.stopScroll('wn')" onmousedown="dw_scrollObj.doubleSpeed('wn')" onmouseup="dw_scrollObj.resetSpeed('wn')"><img src="testimages/aro-rt.gif" width="19" height="9" alt="2" /></a></td>
    </tr>
    <tr>
    <td class="spacer"></td>
    <td class="arrows"><!-- Scroll links --></td>
    <td class="spacer"></td>
    </tr>
    <tr>
    <td></td>
    </tr>
    </table>
    </td>
    </tr>
    </table>
    <br /></td>
    </tr>
    </table>
    </td>
    </tr>
    </table>
    </td>
    </tr>
    <tr>
    <td height="50px" align="center" bgcolor="#3F5497">
    <p class="style2 style1">Designed By: Adam Huxtable<br />
    2008</p></td>
    </tr>
    </table>
    <script type="text/javascript" src="js/gallery.js">
    </script>
    </body>
    </html>

    JS
    mouseover scrolling for dw_scrollObj (in dw_scrollObj.js)

    dw_scrollObj.stopScroll = function(wnId) {
    if ( dw_scrollObjs[wnId] ) dw_scrollObjs[wnId].endScroll();
    }


    dw_scrollObj.doubleSpeed = function(wnId) {
    if ( dw_scrollObjs[wnId] ) dw_scrollObjs[wnId].speed *= 2;
    }

    dw_scrollObj.resetSpeed = function(wnId) {
    if ( dw_scrollObjs[wnId] ) dw_scrollObjs[wnId].speed /= 2;
    }

    dw_scrollObj.initScroll = function(wnId, deg, sp) {
    if ( dw_scrollObjs[wnId] ) {
    var cosine, sine;
    if (typeof deg == "string") {
    switch (deg) {
    case "up" : deg = 90; break;
    case "down" : deg = 270; break;
    case "left" : deg = 180; break;
    case "right" : deg = 0; break;
    default:
    alert("Direction of scroll in mouseover scroll links should be 'up', 'down', 'left', 'right' or number: 0 to 360.");
    }
    }
    deg = deg % 360;
    if (deg % 90 == 0) {
    cosine = (deg == 0)? -1: (deg == 180)? 1: 0;
    sine = (deg == 90)? 1: (deg == 270)? -1: 0;
    } else {
    var angle = deg * Math.PI/180;
    cosine = -Math.cos(angle); sine = Math.sin(angle);
    }
    dw_scrollObjs[wnId].fx = cosine / ( Math.abs(cosine) + Math.abs(sine) );
    dw_scrollObjs[wnId].fy = sine / ( Math.abs(cosine) + Math.abs(sine) );
    dw_scrollObjs[wnId].endX = (deg == 90 || deg == 270)? dw_scrollObjs[wnId].x:
    (deg < 90 || deg > 270)? -dw_scrollObjs[wnId].maxX: 0;
    dw_scrollObjs[wnId].endY = (deg == 0 || deg == 180)? dw_scrollObjs[wnId].y:
    (deg < 180)? 0: -dw_scrollObjs[wnId].maxY;
    dw_scrollObjs[wnId].startScroll(sp);
    }
    }

    dw_scrollObj.prototype.startScroll = function(speed) {
    if (!this.ready) return; if (this.timerId) clearInterval(this.timerId);
    this.speed = speed || dw_scrollObj.speed;
    this.lyr = document.getElementById(this.lyrId);
    this.lastTime = ( new Date() ).getTime();
    this.on_scroll_start();
    this.timerId = setInterval(this.animString + ".scroll()", 10);
    }

    dw_scrollObj.prototype.scroll = function() {
    var now = ( new Date() ).getTime();
    var d = (now - this.lastTime)/1000 * this.speed;
    if (d > 0) {
    var x = this.x + this.fx * d; var y = this.y + this.fy * d;
    if (this.fx == 0 || this.fy == 0) { // for horizontal or vertical scrolling
    if ( ( this.fx == -1 && x > -this.maxX ) || ( this.fx == 1 && x < 0 ) ||
    ( this.fy == -1 && y > -this.maxY ) || ( this.fy == 1 && y < 0 ) ) {
    this.lastTime = now;
    this.shiftTo(this.lyr, x, y);
    this.on_scroll(x, y);
    } else {
    clearInterval(this.timerId); this.timerId = 0;
    this.shiftTo(this.lyr, this.endX, this.endY);
    this.on_scroll_end(this.endX, this.endY);
    }
    } else { // for scrolling at an angle (stop when reach end on one axis)
    if ( ( this.fx < 0 && x >= -this.maxX && this.fy < 0 && y >= -this.maxY ) ||
    ( this.fx > 0 && x <= 0 && this.fy > 0 && y <= 0 ) ||
    ( this.fx < 0 && x >= -this.maxX && this.fy > 0 && y <= 0 ) ||
    ( this.fx > 0 && x <= 0 && this.fy < 0 && y >= -this.maxY ) ) {
    this.lastTime = now;
    this.shiftTo(this.lyr, x, y);
    this.on_scroll(x, y);
    } else {
    clearInterval(this.timerId); this.timerId = 0;
    this.on_scroll_end(this.x, this.y);
    }
    }
    }
    }

    dw_scrollObj.prototype.endScroll = function() {
    if (!this.ready) return;
    if (this.timerId) clearInterval(this.timerId);
    this.timerId = 0; this.lyr = null;
    }

    dw_scrollObj.prototype.on_scroll = function() {}
    dw_scrollObj.prototype.on_scroll_start = function() {}
    dw_scrollObj.prototype.on_scroll_end = function() {}

    dw_scrollObjs = {};
    dw_scrollObj.speed = 100;
    function dw_scrollObj(wnId, lyrId, cntId) {
    this.id = wnId; dw_scrollObjs[this.id] = this;
    this.animString = "dw_scrollObjs." + this.id;
    this.load(lyrId, cntId);
    }

    dw_scrollObj.loadLayer = function(wnId, id, cntId) {
    if ( dw_scrollObjs[wnId] ) dw_scrollObjs[wnId].load(id, cntId);
    }

    dw_scrollObj.prototype.load = function(lyrId, cntId) {
    if (!document.getElementById) return;
    var wndo, lyr;
    if (this.lyrId) {
    lyr = document.getElementById(this.lyrId);
    lyr.style.visibility = "hidden";
    }
    lyr = document.getElementById(lyrId);
    wndo = document.getElementById(this.id);
    lyr.style.top = this.y = 0; lyr.style.left = this.x = 0;
    this.maxY = (lyr.offsetHeight - wndo.offsetHeight > 0)? lyr.offsetHeight - wndo.offsetHeight: 0;
    this.wd = cntId? document.getElementById(cntId).offsetWidth: lyr.offsetWidth;
    this.maxX = (this.wd - wndo.offsetWidth > 0)? this.wd - wndo.offsetWidth: 0;
    this.lyrId = lyrId; // hold id of currently visible layer
    lyr.style.visibility = "visible";
    this.on_load(); this.ready = true;
    }

    dw_scrollObj.prototype.on_load = function() {}

    dw_scrollObj.prototype.shiftTo = function(lyr, x, y) {
    lyr.style.left = (this.x = x) + "px";
    lyr.style.top = (this.y = y) + "px";
    }

    dw_scrollObj.GeckoTableBugFix = function() {
    var ua = navigator.userAgent;
    if ( ua.indexOf("Gecko") > -1 && ua.indexOf("Firefox") == -1
    && ua.indexOf("Safari") == -1 && ua.indexOf("Konqueror") == -1 ) {
    dw_scrollObj.hold = []; // holds id's of wndo and its container
    for (var i=0; arguments[i]; i++) {
    if ( dw_scrollObjs[ arguments[i] ] ) {
    var wndo = document.getElementById( arguments[i] );
    var holderId = wndo.parentNode.id;
    var holder = document.getElementById(holderId);
    document.body.appendChild( holder.removeChild(wndo) );
    wndo.style.zIndex = 1000;
    var pos = getPageOffsets(holder);
    wndo.style.left = pos.x + "px"; wndo.style.top = pos.y + "px";
    dw_scrollObj.hold[i] = [ arguments[i], holderId ];
    }
    }
    window.addEventListener("resize", dw_scrollObj.rePositionGecko, true);
    }
    }


    dw_scrollObj.rePositionGecko = function() {
    if (dw_scrollObj.hold) {
    for (var i=0; dw_scrollObj.hold[i]; i++) {
    var wndo = document.getElementById( dw_scrollObj.hold[i][0] );
    var holder = document.getElementById( dw_scrollObj.hold[i][1] );
    var pos = getPageOffsets(holder);
    wndo.style.left = pos.x + "px"; wndo.style.top = pos.y + "px";
    }
    }
    }

    function getPageOffsets(el) {
    var left = el.offsetLeft;
    var top = el.offsetTop;
    if ( el.offsetParent && el.offsetParent.clientLeft || el.offsetParent.clientTop ) {
    left += el.offsetParent.clientLeft;
    top += el.offsetParent.clientTop;
    }
    while ( el = el.offsetParent ) {
    left += el.offsetLeft;
    top += el.offsetTop;
    }
    return { x:left, y:top };
    }


  17. #17
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    The code you posted has many dependencies, like images for example.
    Your code tests fine here although the HTML has many validation errors.

    A link to a sample page so further testing can be done will be required.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  18. #18
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://www.ahuxdesigns.com/scrollworking

    heres an example of how the scroll works just cant implemant the other bit now.

  19. #19
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Well? Put the code in and we'll help you get it working
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  20. #20
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is the HTML document with both the scroll and the clickOn. The click on works but the scrolling doesnt.
    <!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 name="generator" content="HTML Tidy for Linux (vers 1 September 2005), see www.w3.org" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <title>ahuxdesigns.com</title>
    <link rel="shortcut icon" href="favicon.ico" >
    <link href="style.css" rel="stylesheet" type="text/css"/>
    <script src="dw_scrollObj.js" type="text/javascript">
    </script>
    <script src="dw_hoverscroll.js" type="text/javascript">
    </script>
    <script type="text/javascript">
    //<![CDATA[
    function initScrollLayer() {
    var wndo = new dw_scrollObj('wn', 'lyr1', 't1');
    dw_scrollObj.GeckoTableBugFix('wn');
    }
    //]]>
    </script>
    <style type="text/css">
    <!--
    .style1 {
    color: #FFFFFF;
    font-size: 8px;
    }
    -->
    </style>
    </head>
    <body onload="initScrollLayer()">
    <table width="1000" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td width="50px" rowspan="3" bgcolor="#3F5497"> </td>
    <td height="50px" bgcolor="#3F5497"> </td>
    <td width="50px" rowspan="3" bgcolor="#3F5497"> </td>
    </tr>
    <tr>
    <td height="471">
    <table width="899px" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td id="tdheight"><img src="ban.jpg" alt="banner" /></td>
    </tr>
    <tr>
    <td id="tdcontent">
    <table width="100&#37;" border="0" cellpadding="5px" cellspacing="0" id="tdcontent1">
    <tr id="tdheight1">
    <td width="447" align="left" valign="top">
    <p class="style3"><span class="my1">Welcome</span><br />Welcome to my portfolio, here you will find pieces of work I have created for myself or for others. Examples will include work such as Web Sites, Flash files and projects done in Photoshop plus any other work I create.<p>
    I will try and update this site as regularly as possible. I welcome any comments about my page as I feel it can only improve the site. Also if you have any issues using the site please also let me know so I can rectify them asap.</p>
    <p class="style3">adam@ahuxdesigns.com</p></td>
    <td id="galleryDisplay">&nbsp;</td>
    </tr>
    <tr id="tdheight2">
    <td colspan="2" valign="top" id="tdheight3">
    <table width="100%" border="0">
    <tr>
    <td>
    <table border="0" align="center" cellpadding="6" cellspacing="0" class="main">
    <tr>
    <td><a href="javascript://" onclick="return false" onmouseover="dw_scrollObj.initScroll('wn','left')" onmouseout="dw_scrollObj.stopScroll('wn')" onmousedown="dw_scrollObj.doubleSpeed('wn')" onmouseup="dw_scrollObj.resetSpeed('wn')"><img src="testimages/aro-lft.gif" width="19" height="9" alt="1" /></a></td>
    <td><!-- scrolling layers -->
    <div id="hold">
    <div id="wn">
    <div id="lyr1" class="content">
    <table id="t1" border="0" cellpadding="0" cellspacing="6">
    <tr>
    <td id="gallery" colspan="2">
    <a href="img1.jpg">
    <img src="img1.jpg" alt="some text for image 1">
    </a>
    <a href="img2.jpg">
    <img src="img2.jpg" alt="some text for image 2">
    </a>
    <a href="img3.jpg">
    <img src="img3.jpg" alt="some text for image 3">
    <a href="img1.jpg">
    <img src="img1.jpg" alt="some text for image 4">
    </a>
    <a href="img2.jpg">
    <img src="img2.jpg" alt="some text for image 5">
    </a>
    <a href="img3.jpg">
    <img src="img3.jpg" alt="some text for image 6">
    <a href="img1.jpg">
    <img src="img1.jpg" alt="some text for image 7">
    </a>
    <a href="img2.jpg">
    <img src="img2.jpg" alt="some text for image 8">
    </a>
    <a href="img3.jpg">
    <img src="img3.jpg" alt="some text for image 3">
    </td>
    </tr>
    </table>
    </div>
    </div>
    <!-- end wn div --></div>
    <!-- end hold div --></td>
    <td><a href="javascript://" onclick="return false" onmouseover="dw_scrollObj.initScroll('wn','right')" onmouseout="dw_scrollObj.stopScroll('wn')" onmousedown="dw_scrollObj.doubleSpeed('wn')" onmouseup="dw_scrollObj.resetSpeed('wn')"><img src="testimages/aro-rt.gif" width="19" height="9" alt="2" /></a></td>
    </tr>
    <tr>
    <td class="spacer"></td>
    <td class="arrows"><!-- Scroll links --></td>
    <td class="spacer"></td>
    </tr>
    <tr>
    <td></td>
    </tr>
    </table>
    </td>
    </tr>
    </table>
    <br /></td>
    </tr>
    </table>
    </td>
    </tr>
    </table>
    </td>
    </tr>
    <tr>
    <td height="50px" align="center" bgcolor="#3F5497">
    <p class="style2 style1">Designed By: Adam Huxtable<br />
    2008</p></td>
    </tr>
    </table>
    <script type="text/javascript" src="js/gallery.js">
    </script>
    </body>
    </html>
    dw_hoverscroll
    dw_scrollObj.stopScroll = function(wnId) {
    if ( dw_scrollObjs[wnId] ) dw_scrollObjs[wnId].endScroll();
    }

    dw_scrollObj.doubleSpeed = function(wnId) {
    if ( dw_scrollObjs[wnId] ) dw_scrollObjs[wnId].speed *= 2;
    }

    dw_scrollObj.resetSpeed = function(wnId) {
    if ( dw_scrollObjs[wnId] ) dw_scrollObjs[wnId].speed /= 2;
    }

    dw_scrollObj.initScroll = function(wnId, deg, sp) {
    if ( dw_scrollObjs[wnId] ) {
    var cosine, sine;
    if (typeof deg == "string") {
    switch (deg) {
    case "up" : deg = 90; break;
    case "down" : deg = 270; break;
    case "left" : deg = 180; break;
    case "right" : deg = 0; break;
    default:
    alert("Direction of scroll in mouseover scroll links should be 'up', 'down', 'left', 'right' or number: 0 to 360.");
    }
    }
    deg = deg % 360;
    if (deg % 90 == 0) {
    cosine = (deg == 0)? -1: (deg == 180)? 1: 0;
    sine = (deg == 90)? 1: (deg == 270)? -1: 0;
    } else {
    var angle = deg * Math.PI/180;
    cosine = -Math.cos(angle); sine = Math.sin(angle);
    }
    dw_scrollObjs[wnId].fx = cosine / ( Math.abs(cosine) + Math.abs(sine) );
    dw_scrollObjs[wnId].fy = sine / ( Math.abs(cosine) + Math.abs(sine) );
    dw_scrollObjs[wnId].endX = (deg == 90 || deg == 270)? dw_scrollObjs[wnId].x:
    (deg < 90 || deg > 270)? -dw_scrollObjs[wnId].maxX: 0;
    dw_scrollObjs[wnId].endY = (deg == 0 || deg == 180)? dw_scrollObjs[wnId].y:
    (deg < 180)? 0: -dw_scrollObjs[wnId].maxY;
    dw_scrollObjs[wnId].startScroll(sp);
    }
    }


    dw_scrollObj.prototype.startScroll = function(speed) {
    if (!this.ready) return; if (this.timerId) clearInterval(this.timerId);
    this.speed = speed || dw_scrollObj.speed;
    this.lyr = document.getElementById(this.lyrId);
    this.lastTime = ( new Date() ).getTime();
    this.on_scroll_start();
    this.timerId = setInterval(this.animString + ".scroll()", 10);
    }

    dw_scrollObj.prototype.scroll = function() {
    var now = ( new Date() ).getTime();
    var d = (now - this.lastTime)/1000 * this.speed;
    if (d > 0) {
    var x = this.x + this.fx * d; var y = this.y + this.fy * d;
    if (this.fx == 0 || this.fy == 0) {
    if ( ( this.fx == -1 && x > -this.maxX ) || ( this.fx == 1 && x < 0 ) ||
    ( this.fy == -1 && y > -this.maxY ) || ( this.fy == 1 && y < 0 ) ) {
    this.lastTime = now;
    this.shiftTo(this.lyr, x, y);
    this.on_scroll(x, y);
    } else {
    clearInterval(this.timerId); this.timerId = 0;
    this.shiftTo(this.lyr, this.endX, this.endY);
    this.on_scroll_end(this.endX, this.endY);
    }
    } else {
    if ( ( this.fx < 0 && x >= -this.maxX && this.fy < 0 && y >= -this.maxY ) ||
    ( this.fx > 0 && x <= 0 && this.fy > 0 && y <= 0 ) ||
    ( this.fx < 0 && x >= -this.maxX && this.fy > 0 && y <= 0 ) ||
    ( this.fx > 0 && x <= 0 && this.fy < 0 && y >= -this.maxY ) ) {
    this.lastTime = now;
    this.shiftTo(this.lyr, x, y);
    this.on_scroll(x, y);
    } else {
    clearInterval(this.timerId); this.timerId = 0;
    this.on_scroll_end(this.x, this.y);
    }
    }
    }
    }

    dw_scrollObj.prototype.endScroll = function() {
    if (!this.ready) return;
    if (this.timerId) clearInterval(this.timerId);
    this.timerId = 0; this.lyr = null;
    }

    dw_scrollObj.prototype.on_scroll = function() {}
    dw_scrollObj.prototype.on_scroll_start = function() {}
    dw_scrollObj.prototype.on_scroll_end = function() {}
    dw_scrollObj

    dw_scrollObjs = {};
    dw_scrollObj.speed = 100;

    function dw_scrollObj(wnId, lyrId, cntId) {
    this.id = wnId; dw_scrollObjs[this.id] = this;
    this.animString = "dw_scrollObjs." + this.id;
    this.load(lyrId, cntId);
    }

    dw_scrollObj.loadLayer = function(wnId, id, cntId) {
    if ( dw_scrollObjs[wnId] ) dw_scrollObjs[wnId].load(id, cntId);
    }

    dw_scrollObj.prototype.load = function(lyrId, cntId) {
    if (!document.getElementById) return;
    var wndo, lyr;
    if (this.lyrId) {
    lyr = document.getElementById(this.lyrId);
    lyr.style.visibility = "hidden";
    }
    lyr = document.getElementById(lyrId);
    wndo = document.getElementById(this.id);
    lyr.style.top = this.y = 0; lyr.style.left = this.x = 0;
    this.maxY = (lyr.offsetHeight - wndo.offsetHeight > 0)? lyr.offsetHeight - wndo.offsetHeight: 0;
    this.wd = cntId? document.getElementById(cntId).offsetWidth: lyr.offsetWidth;
    this.maxX = (this.wd - wndo.offsetWidth > 0)? this.wd - wndo.offsetWidth: 0;
    this.lyrId = lyrId;
    lyr.style.visibility = "visible";
    this.on_load(); this.ready = true;
    }

    dw_scrollObj.prototype.on_load = function() {}

    dw_scrollObj.prototype.shiftTo = function(lyr, x, y) {
    lyr.style.left = (this.x = x) + "px";
    lyr.style.top = (this.y = y) + "px";
    }

    dw_scrollObj.GeckoTableBugFix = function() {
    var ua = navigator.userAgent;
    if ( ua.indexOf("Gecko") > -1 && ua.indexOf("Firefox") == -1
    && ua.indexOf("Safari") == -1 && ua.indexOf("Konqueror") == -1 ) {
    dw_scrollObj.hold = [];
    for (var i=0; arguments[i]; i++) {
    if ( dw_scrollObjs[ arguments[i] ] ) {
    var wndo = document.getElementById( arguments[i] );
    var holderId = wndo.parentNode.id;
    var holder = document.getElementById(holderId);
    document.body.appendChild( holder.removeChild(wndo) );
    wndo.style.zIndex = 1000;
    var pos = getPageOffsets(holder);
    wndo.style.left = pos.x + "px"; wndo.style.top = pos.y + "px";
    dw_scrollObj.hold[i] = [ arguments[i], holderId ];
    }
    }
    window.addEventListener("resize", dw_scrollObj.rePositionGecko, true);
    }
    }


    dw_scrollObj.rePositionGecko = function() {
    if (dw_scrollObj.hold) {
    for (var i=0; dw_scrollObj.hold[i]; i++) {
    var wndo = document.getElementById( dw_scrollObj.hold[i][0] );
    var holder = document.getElementById( dw_scrollObj.hold[i][1] );
    var pos = getPageOffsets(holder);
    wndo.style.left = pos.x + "px"; wndo.style.top = pos.y + "px";
    }
    }
    }

    function getPageOffsets(el) {
    var left = el.offsetLeft;
    var top = el.offsetTop;
    if ( el.offsetParent && el.offsetParent.clientLeft || el.offsetParent.clientTop ) {
    left += el.offsetParent.clientLeft;
    top += el.offsetParent.clientTop;
    }
    while ( el = el.offsetParent ) {
    left += el.offsetLeft;
    top += el.offsetTop;
    }
    return { x:left, y:top };
    }
    js/gallery
    function showImage(e) {
    var image, display, img, p, text;
    e = e || window.event;
    image = e.target || e.srcElement;
    display = document.getElementById('galleryDisplay');
    // create image
    img = document.createElement('img');
    img.setAttribute('src', image.parentNode.getAttribute('href'));
    img.setAttribute('alt', image.getAttribute('alt'));
    // create text
    p = document.createElement('p');
    text = document.createTextNode(image.getAttribute('alt'));
    p.appendChild(text);
    // clear the display area and add the elements
    while (display.firstChild) {
    display.removeChild(display.firstChild);
    }
    display.appendChild(img);
    display.appendChild(p);
    // stop link from going to the linked image
    if (e.preventDefault) {
    e.preventDefault();
    }
    e.defaultValue = false;
    return false;
    }
    (function() {
    var links, i;
    links = document.getElementById('gallery').getElementsByTagName('a');
    for (i = 0; i < links.length; i++) {
    links[i].onclick = showImage;
    }
    })();

  21. #21
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Something that I've noticed is that the defaultValue should be returnValue, a fault of memory at the time, sorry for the trouble there. I've updated the code in my posts to reflect that, and if you change defaultValue to returnValue it will work in IE.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  22. #22
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ahh yea that works now just to get the scrolling hehe.

  23. #23
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    any luck mate?


  24. #24
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    What's the matter with the scrolling? It seems to work in the sample page that you gave.
    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
  •