Help With A Mildly Dynamic Social Networking Bar

[qcom]

Hello everyone,I have a project which involves creating a bar on my website, with shortcuts to various social networking sites.Now, these shortcuts will be in the form of icons.There would be approximately 6 icons, for twitter, facebook, myspace / linkedin, youtube, stumble upon, rssNow, for the JavaScript portion..I would like to have a bar / line which acts almost like a tray, so the icons are partially veiled behind this object.Then, when an end-user rolls over any of the icons, they raise slightly, and of course, they are active links to each of the icons' respective sites.How much javascript would this project take, as I have not too much experience. Is it feasible? Any suggestions or links to examples would be appreciated.Thanks!

[thescientist]

depends on how much you know. For someone of average experience it probably wouldn't take that long.

[qcom]

depends on how much you know. For someone of average experience it probably wouldn't take that long.

I really know nothing I'm afraid.. Any examples that I could use to mock something similar up?

[ShadowMage]

Most of what you want to do is pretty simple. A 'tooltray' could be just a fixed position div. The active links is simple, you just put your img tags inside an anchor tag. The rollover is simple too. Just use the :hover psuedo class in CSS or the onmouseover/onmouseout events for JavaScript and then modify the position/height/width of your images.Actually, I don't think you'd need JavaScript at all for any of what you want. That is unless you wanted an animated rollover. Then you'd need to use timers in JavaScript.

[qcom]

Most of what you want to do is pretty simple. A 'tooltray' could be just a fixed position div. The active links is simple, you just put your img tags inside an anchor tag. The rollover is simple too. Just use the :hover psuedo class in CSS or the onmouseover/onmouseout events for JavaScript and then modify the position/height/width of your images.Actually, I don't think you'd need JavaScript at all for any of what you want. That is unless you wanted an animated rollover. Then you'd need to use timers in JavaScript.

OK, cool! Thanks for the response,Sorry about my previous post, I must be a little tired :)I totally get what your saying now.I don't get what you mean by the active links. Why would I be putting the images inside the anchor?Also, when using the :hover psuedo class, what would my selector be?Thanks again!

[ShadowMage]

OK, cool! Thanks for the response,Now, if no JavaScript is needed, would I mainly be using HTML itself and CSS. Also would it be HTML5 and CSS3 or could I use 4.01 and 2 respectively?

You can use the current standards (HTML 4.01 and CSS 2).To give you the gist of what needs to be done:1. Container for the tray and images with fixed position2. Tray element (could be another div or an image) with a high z-index so it appears on top of the images3. Img tags nested in anchor tags with absolute positioning on the anchors4. Use the CSS :hover psuedo class on the anchors to change their position so they 'raise' up out of the tray

[qcom]

You can use the current standards (HTML 4.01 and CSS 2).To give you the gist of what needs to be done:1. Container for the tray and images with fixed position2. Tray element (could be another div or an image) with a high z-index so it appears on top of the images3. Img tags nested in anchor tags with absolute positioning on the anchors4. Use the CSS :hover psuedo class on the anchors to change their position so they 'raise' up out of the tray

Brilliant! Thank soo much for the clarification, if I have any problems I'll be sure to post, but otherwise, I'll link you with the final page when completed!Thanks again, that really helped!

[qcom]

For instruction number 1, wouldn't the container for the whole bar have an 'absolute' position as opposed to 'fixed'? Doesn't fixed stay in a constant (or fixed) position while the end-user scrolls through the page? I would rather have it 'absolute' so that the user can scroll right past it if he or she does not want those social options.

[ShadowMage]

For instruction number 1, wouldn't the container for the whole bar have an 'absolute' position as opposed to 'fixed'? Doesn't fixed stay in a constant (or fixed) position while the end-user scrolls through the page? I would rather have it 'absolute' so that the user can scroll right past it if he or she does not want those social options.

Yes you are correct about the fixed positioning.Then you wouldn't use position to place your container. (Unless you have to) You should place it using standard margin/padding or float. Although you will have to give it position: relative in order to absolutely position your images, but don't use it to actually position your container. Try your best to fit it into the flow of the page.EDIT: Oh and if you're not using a Strict DTD I'd recommend switching to one.

[qcom]

Yes you are correct about the fixed positioning.Then you wouldn't use position to place your container. (Unless you have to) You should place it using standard margin/padding or float. Although you will have to give it position: relative in order to absolutely position your images, but don't use it to actually position your container. Try your best to fit it into the flow of the page.EDIT: Oh and if you're not using a Strict DTD I'd recommend switching to one.

I think I get what you mean about the positioning.I have absolutely no idea what you mean with Strict DTD or 'one'.What are those things?!EDIT: I just realized something.. Just design wise in my original explanation I didn't make clear enough the fact that I would like to have a very low in height tray, only about .25 inches or so. So I was hoping that the icons would only be showing a little bit of height ABOVE that tray when the page loads, and the rest of the icons would just kind of not be in existence. I realize that I may be a LOT easier just to have a big tray, but is there anyway we could proceed with the things I just mentioned?Sorry for the trouble.

[thescientist]

if you aren't using a Strict DTD, then he recommends switching to one (one being a Strict DTD).see my sig for info.

[qcom]

if you aren't using a Strict DTD, then he recommends switching to one (one being a Strict DTD).see my sig for info.

OH! Like XHTML perhaps? Or just like HTML 4.01 transitional?

[ShadowMage]

OH! Like XHTML perhaps? Or just like HTML 4.01 transitional?

Like one of the Strict ones listed here: http://w3schools.com/tags/tag_doctype.asp

EDIT: I just realized something.. Just design wise in my original explanation I didn't make clear enough the fact that I would like to have a very low in height tray, only about .25 inches or so. So I was hoping that the icons would only be showing a little bit of height ABOVE that tray when the page loads, and the rest of the icons would just kind of not be in existence. I realize that I may be a LOT easier just to have a big tray, but is there anyway we could proceed with the things I just mentioned?

Absolutely. Size doesn't matter.

[thescientist]

OH! Like XHTML perhaps? Or just like HTML 4.01 transitional?

a Strict DTD. Your choice between HTML or XHTML. Depends on wether or not you plan on incorporating XML into your page, although most of us (or at least myself) like XHTML for the cleaner markup it requires.

[qcom]

Like one of the Strict ones listed here: http://w3schools.com/tags/tag_doctype.aspAbsolutely. Size doesn't matter.

OK on the doctypes.Lols :)OK, I'm actually just using notepad in the meantime (my computer that I'm using doesn't actually have the full version of Dreamweaver or Fireworks sadly) when I wait for my trials to load which probably isn't the best for my n00by ways .Anyway, so, while I wait, what comes after the (code is without the quotes) "a:hover" ? What part of CSS can I use to raise those anchored images? Also, won't it raise anything else on the page that has an anchor?

[ShadowMage]

OK on the doctypes.

They're important!

Anyway, so, while I wait, what comes after the (code is without the quotes) "a:hover" ? What part of CSS can I use to raise those anchored images? Also, won't it raise anything else on the page that has an anchor?

Give your anchors a class (for example, class='trayIcon') and target that class with a.trayIcon:hoverEDIT:Ooops, forgot this question: "What part of CSS can I use to raise those anchored images?"You'd have to have position set to absolute and then modify the top or bottom attributes:top: -35px;orbottom: 35px;Play around with and see what works.

[qcom]

They're important!

OK OK

Give your anchors a class (for example, class='trayIcon') and target that class with a.trayIcon:hover

Thanks, although I really should have been able to think of that

You'd have to have position set to absolute and then modify the top or bottom attributes:

I'm assuming you mean to have the images for the social networking icons nested within the anchors be set to absolute positions? And I'm guessing the top or bottom parts of the code depends on how I specify the absolute CSS positioning?

[thescientist]

OK, I'm actually just using notepad in the meantime (my computer that I'm using doesn't actually have the full version of Dreamweaver or Fireworks sadly) when I wait for my trials to load which probably isn't the best for my n00by ways .

Just stick with notepad if the alternative is DW. Or get yourself a nice text editorl conText, Notepad++, Textwrangler, etc. You'll learn more from using one of those, combined with good developers tools like Firebug, the developers toolbar, and FireFTP (all lovely add-ons for Firefox).

[ShadowMage]

I'm assuming you mean to have the images for the social networking icons nested within the anchors be set to absolute positions? And I'm guessing the top or bottom parts of the code depends on how I specify the absolute CSS positioning?

Actually, no. The anchors get the absolute positioning. And the top and bottom are how you specify the positioning, they don't depend on how you do it.

[qcom]

Just stick with notepad if the alternative is DW. Or get yourself a nice text editorl conText, Notepad++, Textwrangler, etc. You'll learn more from using one of those, combined with good developers tools like Firebug, the developers toolbar, and FireFTP (all lovely add-ons for Firefox).

OK, good idea.

Actually, no. The anchors get the absolute positioning. And the top and bottom are how you specify the positioning, they don't depend on how you do it.

OK

[qcom]

Hey, I've marked it all up, and here is what I've come up with so far:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html><head><style type="text/css">a.trayIcon:hover bottom: 35px;</style></head><body><div><div><a class='trayIcon' href=""><img src="Icons/48x48/Twitter-icon.png"></img></a><a class='trayIcon' href=""><img src="Icons/48x48/FaceBook-icon.png"></img></a><a class='trayIcon' href=""><img src="Icons/48x48/MySpace-icon.png" /></a><a class='trayIcon' href=""></img></a><a class='trayIcon' href=""></img></a><a class='trayIcon' href=""><img src="Icons/48x48/Stumbleupon-icon.png"></img></a><a class='trayIcon' href=""><img src="Icons/48x48/Feed-icon.png"></img></a><a class='trayIcon' href=""><img src="Icons/48x48/Youtube-icon.png" /></a><img src="TrayV2.jpg" style="z-index:10;"> </img></div></div></body></html>

Could you tell me where my errors are.. I know there are a lot of them, so try to bare with me..

[ShadowMage]

Style declarations should look like this:a.trayIcon:hover { bottom: 35px; }or more neatly (the way I prefer)a.trayIcon:hover {bottom: 35px;}Img tags are self closing. Meaning you don't put a </img> tag after them.If your using XHTML it should look like this: <img src='...' alt='...' />If your using HTML it should look like this: <img src='...' alt='...'>Aside from that there isn't much else I can see as far as errors. You're probably missing a lot of the necessary styling though.

[qcom]

Style declarations should look like this:a.trayIcon:hover { bottom: 35px; }or more neatly (the way I prefer)a.trayIcon:hover {bottom: 35px;}Img tags are self closing. Meaning you don't put a </img> tag after them.If your using XHTML it should look like this: <img src='...' alt='...' />If your using HTML it should look like this: <img src='...' alt='...'>Aside from that there isn't much else I can see as far as errors. You're probably missing a lot of the necessary styling though.

Alright cool, the revised code is below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html><head><style type="text/css">a.trayIcon:hover {bottom: 35px;}</style></head><body><div><div><a class='trayIcon'  href=""><img src="Icons/48x48/Twitter-icon.png" /></a><a class='trayIcon' href=""><img src="Icons/48x48/FaceBook-icon.png" /></a><a class='trayIcon' href=""><img src="Icons/48x48/MySpace-icon.png" /></a><a class='trayIcon' href=""><img src="Icons/48x48/Stumbleupon-icon.png" /></a><a class='trayIcon' href=""><img src="Icons/48x48/Feed-icon.png" /></a><a class='trayIcon' href=""><img src="Icons/48x48/Youtube-icon.png" /></a><img src="TrayV2.jpg" style="z-index:10;"> </div></div></body></html>

Now, I guess I just need to insert this into my document because the rollovers aren't rising when I roll over them.

[ShadowMage]

What does your tray image look like? What I mean is, is it half transparent? For example, the image is 48 px tall, but the bottom 24px contains the image of the tray and the top 24px is transparent.If it is it might be overlapping the images preventing the hover from working.

[qcom]

Could I send you the file somehow?