Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New to the CF scene
    Join Date
    May 2011
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Javascript Class onClick Links

    Okay. So here's what I'm trying to do. I have my landing page to my site and near the bottom I have 4 little 48x48 class divs (for social network link images if you were wondering ). Each Class div has a background style all to it's own. (so in this case 4 different divs with 4 different class names) .

    What I want to do with the javascript is to have a function(s) that when called on (depending on which div.class was/is clicked on) will open up a lightbox/new page containing the new page (pertaining to the appropriate social network, depending on which class has been clicked on).

    I don't want to put an <a></a> tag around the div.classes themselves seperately because the landing page itself has 8 different styles, plus the div.classes I would have to hunt down within the site itself. haha

    Basically in short I want the classes to have seperate links that when clicked upon it calls the function, opens the lightbox (or opens the new tab/page) and loads the appropriate page.

    Think yall can help me out here?

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Do you mean you want to put all this in some .js file that can be used on various pages? So the code has to search for the <div class="foo"> and <div class="bar"> and so on divs and attach the onclick handler to each one, appropriately?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    One option is

    1) put the div class name and associated url into an "associative" array where the class name is the array key and the class' url is the value

    2) put an onclick event handler on each div which calls a single function.

    3) pass the div's object reference (this) to the function in 2) when the div is clicked.

    4) the function in 2) then opens a new page according to the className associated with the this object.
    The new page's url is got from the array in 1)

  • #4
    Regular Coder oVTech's Avatar
    Join Date
    Nov 2010
    Location
    USA
    Posts
    296
    Thanks
    4
    Thanked 54 Times in 52 Posts
    Quote Originally Posted by Wild_Fire126 View Post
    I don't want to put an <a></a> tag around the div.classes themselves seperately because the landing page itself has 8 different styles, plus the div.classes I would have to hunt down within the site itself. haha
    What about when JavaScript is off? Nobody will be able to go to Facesucks, Youboob, or MyFace anymore...

    You already said it, but yeah... just wrap the divs with some <a> tags - makes more sense. However, if you still want to do this, Bullant already got you started. If you are stuck, just post your script and questions here and someone will "serve" you a solution.

    Good :Luck!




    I don't know, I don't care, and it doesn't make any difference!
    -Albert Einstein-




  • #5
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Quote Originally Posted by oVTech View Post
    You already said it, but yeah... just wrap the divs with some <a> tags - makes more sense.
    only if writing valid (x)html is not an issue because wrapping block level elements like a <div> inside an inline element like an <a> is not valid.

  • Users who have thanked bullant for this post:

    Wild_Fire126 (05-25-2011)

  • #6
    New to the CF scene
    Join Date
    May 2011
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by bullant View Post
    One option is

    1) put the div class name and associated url into an "associative" array where the class name is the array key and the class' url is the value

    2) put an onclick event handler on each div which calls a single function.

    3) pass the div's object reference (this) to the function in 2) when the div is clicked.

    4) the function in 2) then opens a new page according to the className associated with the this object.
    The new page's url is got from the array in 1)
    Do you happen to have a specific reference on hand for me to work with instead of starting from scratch lol?

  • #7
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    The javascript would be less than a dozen lines of code, so it's not a huge task if you had to start from scratch.

    Have a go at it and if you get stuck post your code and we can try to help you get it working. That would save me from starting from scratch
    Last edited by bullant; 05-25-2011 at 03:41 AM.

  • #8
    New to the CF scene
    Join Date
    May 2011
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by bullant View Post
    The javascript would be less than a dozen lines of code, so it's not a huge task if you had to start from scratch.

    Have a go at it and if you get stuck post your code and we can try to help you get it working. That would save me from starting from scratch
    Lol, okay. So much for trying to be lazy. xD

  • #9
    Regular Coder oVTech's Avatar
    Join Date
    Nov 2010
    Location
    USA
    Posts
    296
    Thanks
    4
    Thanked 54 Times in 52 Posts
    Quote Originally Posted by bullant View Post
    only if writing valid (x)html is not an issue because wrapping block level elements like a <div> inside an inline element like an <a> is not valid.
    If you meant that it is an issue... then yeah right... however, I don't make assumptions...

    Thanks for your input.




    I don't know, I don't care, and it doesn't make any difference!
    -Albert Einstein-




  • #10
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Quote Originally Posted by oVTech View Post
    ... however, I don't make assumptions...
    no problem - neither did I

    That's why I said

    only if......

  • #11
    Regular Coder oVTech's Avatar
    Join Date
    Nov 2010
    Location
    USA
    Posts
    296
    Thanks
    4
    Thanked 54 Times in 52 Posts
    Quote Originally Posted by Wild_Fire126 View Post
    ---
    Maybe something like this will work for you, but if you want it to pop up in a new window, you must use window.open(). It validates just fine, however you should make a function so it isn't inline.

    Code:
    
    <div style="cursor: pointer; color: blue; text-decoration: underline;" onclick="location.href='http://www.google.com/'">content</div>
    As a reminder... if JS is off, this will not do anything!
    Good luck!
    Last edited by oVTech; 05-25-2011 at 05:41 AM.




    I don't know, I don't care, and it doesn't make any difference!
    -Albert Einstein-




  • #12
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Many nowadays will argue that both inline styles and inline javascript is "old hat".

    Maybe use this demo option as a guide (which is slightly different to the other option I posted earlier)

    The iconsData 2D array contains the info needed to created your social network clickable <divs>.

    Each row of iconsData contains the image file name for the icon and the url to go to when the icon is clicked.

    You can add/remove as many rows in the array as you like without having to touch the rest of the javascript or html. The divs and their functionality are created automatically in the window.onload event handler.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
            <title></title>
            <style type="text/css">
                .socNetIcons {
                    width: 48px;
                    height: 48px;
                    cursor: pointer;
                    float: left;
                    margin-right: 20px;
                }
            </style>
            <script type="text/javascript">
                var iconsData = [
                    ['num1.jpg','urlFacebook'],
                    ['num2.jpg','urlYouTube'],
                    ['num3.jpg','urlMySpace']
                ];
                window.onload=function(){
                    for(i=0; i < iconsData.length; i++){
                        var newDiv = document.createElement('div');
                        newDiv.setAttribute('class','socNetIcons');
                        newDiv.style.backgroundImage = 'url("'+iconsData[i][0]+'")';
                        newDiv.num = i;
                        newDiv.onclick=function(){window.open(iconsData[this.num][1]);}
                        document.getElementById('socNetIconsContainer').appendChild(newDiv);
                    }
                }
            </script>
        </head>
        <body>
            <div id="socNetIconsContainer"></div>
        </body>
    </html>
    Last edited by bullant; 05-25-2011 at 06:11 AM.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •