Javascript Class onClick Links

[Wild_Fire126]

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?

[Old Pedant]

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?

[bullant]

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)

[oVTech]

Originally Posted by Wild_Fire126

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!

[bullant]

Originally Posted by oVTech

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.

[Wild_Fire126]

Originally Posted by bullant

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?

[bullant]

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

[Wild_Fire126]

Originally Posted by bullant

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

[oVTech]

Originally Posted by bullant

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.

[bullant]

Originally Posted by oVTech

... however, I don't make assumptions...

no problem - neither did I

That's why I said

only if......

[oVTech]

Originally Posted by Wild_Fire126

---

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.

<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!

[bullant]

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.

<!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>