PicnicTutorials

Good morning, I need a way (with JS - not CSS) to highlight an active menu link, but, also make it un-highlight once another menu link is hovered over. From that point, CSS can handle the rest of the hover effects. Probably, hopefully, an easy thing, but I have no idea how to do it? This is all happening on the same page - hence the need for JS. Thanks for your help! I did something similar to this a while back. Or rather, someone helped me with it. I'm a JS noob! I just don't know how to edit to suit. There has got to be a way to just edit what I already have? onBlur= or onFocus= or something...? Here is a simple little test page. I just need "Link1" to be active (i.e. background:#ccc) on the initial page load. And once the other links are hovered over it becomes un-active (i.e background:999). Thanks! > { visibility: inherit; } Test <br />#tabs li {<br />background:#999;<br />list-style:none;<br />margin:5px;<br />}<br />#tabs li:hover {<br />background:#ccc;<br />}<br /> </pre> <ul id="tabs"> Link1 Link2 Link3

I worked it out if you want it...

Actually, on second thought, you could do something like this to the tab4 example. #tabs { width:521px; margin:80px auto 0; list-style:none; background:#666; position:relative; } #tabs #first { display:block; position:absolute; top:30px;left:0; line-height:50px; text-align:center; } Link1Place Holder But still, it's only a place holder. No link is active. And you'd have some margin issues with the below content to work out. You'd have to make space for this absolute block but not for the others. Hhmmm...?

Cool! I just messed with it some and was unable to figure out a way to make that work. Making it present on page load is easy enough. But then making it disappear when the others are hovered over is a different trick altogether. You probably need some JS for that. The JS would have to make the first link active and it's content, and make it all go back to non-active once any other link is hovered over. If any of you JS experts could do that, that would be a cool add... Otherwise, you could add a place holder to this one. It using position absolute, so hiding it is no problem. But if you want the first link active on page load, then that's probably JS again. But you can just add a place holder. Like "hover here for info!" You can place block level and link in here. Only JS for hover for IE6 http://www.visibilityinherit.com/projects/tabs2.html For instance, you would just add #tabs li:hover div, #tabs #first { visibility:visible; background:#ccc; }

OK, all done for the most part. Tomorrow morning I'm still going to change the show/hide method to something that's better for bots and screen readers (i.e. left:-999em). Forgive me, but I'm going to have to brag for a sec. There are only two things like this (pure CSS) on the web (in practical as it may be) - mine and Stus. That I was able to find... Thanks Tim for the help with the JS! Stus did it in 160 lines of CSS, with completely different code for IE, and a mess of HTML. Granted, it was written a while ago, so not a completely fair comparison. Here is his put together http://www.visibilityinherit.com/projects/stus.html Here it is on his site http://www.cssplay.co.uk/menu/one_page I did mine in 90 lines of CSS and clean html. Simple code for all and JS for IE6 http://www.visibilityinherit.com/projects/tabs4.html Or done with pure CSS (IE6 too) (still 90 lines), but a little too complicated for my taste http://www.visibilityinherit.com/projects/tabs3.html

No problem, thank you! That works perfect now! So window onload says - don't run script until everything is loaded? And you have the function closed already in your example right? Thanks Tim!

Thanks Tim, although it doesn't seem to be working for me? Here is a small little test page. If you put this script at the bottom then it works in IE6. > { visibility: inherit; } Test <br /><!--<br />#tabs li {<br />background:#ccc;<br />float:left;<br />list-style:none;<br />margin:5px;<br />}<br />#tabs b {<br />position:absolute;<br />display:none;<br />width:100px;<br />top:10px;left:10px;<br />}<br />#tabs a:hover b {display:block;}<br />a:hover {visibility:visible;}<br />--><br /> <br />var as = document.getElementById('tabs').getElementsByTagName('a');<br />for (var i = 0, j = as.length; i < j; i++) {<br /> as[i].onmouseover = function() {<br /> this.childNodes[1].style.display = 'block';<br /> this.parentNode.style.height = this.childNodes[1].clientHeight + 'px';<br /> }<br /> as[i].onmouseout = function() {<br /> this.parentNode.style.height = '';<br /> this.childNodes[1].style.display = 'none';<br /> }<br />}<br /> </pre> <ul id="tabs"> Link1testtest test test test test test Link2test test test test test test test test test test test test test test test test test test test test test test test test test test test test </ul> <br><div style="clear:both;">I want this text to move down when the li grows to match the position absolute height of the hidden <b>? Thanks!</div> <br><br

Good morning , Is there a way to keep this JS in the head section? I'd like to keep all the IE6 stuff in the same block for simplicity. I have defer="defer" on it, and I thought it worked, but I was wrong. It doesn't work until the 2nd load of the page, or page refresh. So is there a way to write the JS so that it doesn't have to go below the elements using it? Thanks! > { visibility: inherit; } Tabs <br /><!--<br />* {<br />margin:0;<br />padding:0;<br />}<br />html {<br />overflow-y:scroll;<br />}<br />body {<br />font:100%/1.25 "Times New Roman", Times, serif, Arial;<br />background:#666;<br />}<br />#tabs {<br />width:520px;<br />margin:80px auto 0;<br />list-style:none;<br />background:#666;<br />}<br />#tabs a {<br />color:#000;<br />outline:0;<br />font-weight:bold;<br />text-decoration:underline;<br />}<br />#tabs a:active, #tabs a:focus, #tabs a:hover {<br />text-decoration:none;<br />}<br />#tabs p {<br />margin:0 0 10px;<br />font-weight:normal;<br />}<br />#tabs li {<br />background:#999;<br />border:1px solid #000;<br />float:left;<br />width:94px;<br />padding:4px 0;<br />margin:0 10px 0 0;<br />text-align:center;<br />cursor:pointer;<br />font-weight:bold;<br />}<br />#tabs li:hover {<br />background:#ccc;<br />border-bottom:0;<br />}<br />#tabs .last {<br />margin:0;<br />}<br />/* ------------- Hide/Show Div ------------ */<br />#tabs div {<br />position:relative;<br />top:5px;left:-1px;<br />display:none;<br />width:478px;<br />padding:20px;<br />border:1px solid #000;<br />border-top:0;<br />cursor:auto;<br />text-align:left;<br />background:#ccc;<br />}<br />#tabs li.two div {margin-left:-106px;}<br />#tabs li.three div {margin-left:-212px;}<br />#tabs li.four div {margin-left:-318px;}<br />#tabs li.five div {margin-left:-424px;}<br />#tabs li:hover div {display:block;}<br />--><br /> </pre> <ul id="tabs"> Link1 Choosing a quality childcare provider is one of the most important decisions a parent will ever make. It can also prove to be one of the most difficult decisions to make. We encourage families to be fully informed about their options. To choose child care wisely you need an awareness of what quality child care is, how to recognize it, and how to find it. To help you meet this challenge, we at Building Blocks Home Daycare offer parents with the following resources to help guide you. We urge parents to take advantage of the resources provided, by using the following helpful information when searching for a childcare provider; as each and every word herein was written with your child?s safety and happiness in mind, and with his or her best interests at heart. The following information is a complete and thorough step by step process to finding, eventually selecting, and keeping a quality family home daycare. Link2 Diabetes, as it relates to blood sugar, has always captured my interest because of its direct effect on one?s body composition. Diabetes is the result of problems with the pancreatic hormone, insulin. Insulin controls the amount of glucose, otherwise known as sugar, in the blood and the rate at which glucose is absorbed into the cells. The cells need glucose to produce energy. In people with diabetes, glucose builds up in the bloodstream instead of being taken into and used by the cells, leading to abnormally high levels of glucose in the blood. Eventually, hyperglycemia (high blood sugar), leads to damaged blood vessels, which in turn may cause eye disease, heart disease, nerve damage in the limbs and internal organs, and kidney disease. Link3 Hello! My name is Eric Watson and amoung other things I am a male model. I also built this website, so I am not just a "pretty face". And as you can see by my portfolio, I've been around the block as it were. Therefore, it's safe for you to assume that I know what I'm talking about when it comes to the world of modeling. My hope is that this article helps you on your journey to become a successful model, or at the very least, helps you navigate through it's merky waters! Hmmm... male modeling, where should I begin? First I will assume those reading this are aspiring models themselves. Either that or you?re looking for information on how to further your carrier as a model. In this article I will try and explain what this vague subject of male modeling is, and what it is not. I will explain how I became a successful model, and I will suggest ways that will help you do the same. We will examine the do's-and-don'ts of this often superficial and shady world. We will also go over what you should expect and what you should not expect; be it your own success or your failed attempt. And lastly, I will briefly get in to what I enjoyed about modeling and what I didn't. First let?s get into the attributes one must first have to even have a chance of being a model in the first place. Misconception number one: you have to be good looking - false! Sure it helps to be attractive, but it is not a necessity. A model can either be good looking, or equally as valuable if not more, unique looking! Or of course a combination of the two, like myself fore instance (just kidding, Ha Ha, He He). Misconception number two: you have to be tall - true and false! Modeling agencies, and clients alike, prefer their models to be between 6'0" and 6'2" and boast a 40 regular suit size. However with that said, there are plenty of exceptions to that rule as well... Link4 Welcome, my name is Eric and I am the owner and landlord of this unique triplex located in the heart of beautiful Carlsbad, CA. I take great pride of ownership in my property, and I believe it shows. If there happens to be a unit available at the time you are reading this, and you feel like you may be interested in taking a closer look, then great! Contact me and we can set-up a time to view the unit that works for you. If you like what you see, but there are no units currently available, you may place yourself on a waiting list by submiting your information via my contact form. Thank you very much, and I look forward to meeting with you! Link5 Restless legs syndrome (RLS) otherwise known as the ?wiggly legs?, plagues thousands of people each and every night. Most of us have experienced this at least a couple times in our lifetime.You?re laying there in bed trying to go to sleep, but your legs have a completely different agenda - sound familiar? Your legs may feel wiggly, itchy, or a tickling sensation, and you may feel this overwhelming need to move them. This is Restless legs syndrome. Well, if you?re bothered by this problem and you?ve happened to have stumbled across this article, you?re in luck; I?m going to fix it for you! Or even if you don?t suffer from RLS, but you find that you have trouble sleeping for what ever reason, the following tips will work wonders for you as well! Magnesium is a natural mineral found in lots of the foods we eat. Magnesium is what I rely on to give me my restful night's sleep. Simply put, magnesium relaxes muscles! (Note: therefore, if your muscles are relaxed your brain will follow. Equally, the opposite will usually hold true as well. If your brain is relaxed, your muscles will follow). Adversely, calcium contracts muscles. Therefore, when taking either it?s always a good idea to take them in conjunction with one another, and at a ratio of 2 to 1. That is, 2 parts calcium and 1 part magnesium. That?s why, when purchasing either of these minerals at the store you will usually find this ratio. It?s common to see them somewhere in the neighborhood of 500mg calcium to 250mg magnesium. I?ve been told by a nutritionist that you could actually give yourself a heart attack by taking too much of one and not the other over a long period of time (remember, your heart is a muscle too). I don?t know if this is true or not, but either way - don?t do that... </ul> <br><div style="background:red;"> </div> <br

Thanks John, but I have a independent JS solution that uses my same markup. I believe I have all the bugs worked out now. There where a lot of them! I'll post it when complete. I originally did this with a fixed height container in mind (like in my first post). This was sort of just to see if I could. Not "really" all that practal, that is, if used as originally intended. Personally, I don't want all "my" content that follows launching down the page each time the link is hovered over. But I'm sure it will come in handy someday, when someday I get a paying job...

If it's floated, then you should be able to use position relative to center it. Then you only need two containers - a div and the outer ul. Like this http://www.search-this.com/2007/09/19/when-is-a-float-not-a-float/ If it's not floated then it should be even easier.

Hi, Why is it hard to center the suckerfish? Is it floated or something?

Nice MacRankin! Paul did fix it with a pure CSS method, but I not quite sure if I'm going to highlight that method or not. It's pretty complicated! I'm not a big fan of complicating all browsers for the sake of one shitty browser. I'd rather make it more complicated for one browser. I'll show it as a possibility, but I believe I'm going to use some JS instead. Raffles gave me a script that enlarges the LI (static position) to the height of the position absolute block. That keeps it in-flow. That is, as long as js is on. However, think about it? Anyone still in the dark ages and still using ie6 is probably not surfing with JS off. Those are probably mostly FX people.

Thanks for looking, I'm good now, Paul fixed it...

OK, here's one solution. I don't have it yet, but when and/or if someone could provide me with the JS then I would have a solution I think. IE6 already relies on JS to work for this demo so it's no biggy. Here is a little test code I threw together. I need a script (sort of like a matching columns script) that will match the height of the li to the height of the absolutely positioned . Then, it should provide the same effect. The content below, would move down in relation to the auto height sized div (or "b" in this test case). Thank you! { visibility: inherit; } Test Link1test Link2test test test test test test test test test test test test test test test test test test test test test test test test test test test test I want this text to move down when the li grows to match the position absolute height of the hidden <b>? Thanks!

Anyone see a way to fix this demo in IE6? http://ww'>http://ww w.visibility inherit.com/projects/tabs4.html (remove spaces) The hidden divs are "in-flow" with position relative. IE6 does not like the position relative. The only way I have been able so far to fix IE6 is to position the hidden divs with position absolute. But, I'd rather not do that, as it defeats the whole point. e.g. I already have a nice one I did that has a fixed height, and works everywhere. http://w ww.visibility inherit.com/projects/tabs2.html (remove spaces) But now I'm trying to get this one to play ball, and I'm out of ideas, well, good ones at least... PS: I also have two other demos that use an anchor (mainly for IE6), but then you can't place links or block level elements in the hidden divs. Thanks!

Little Tip: And not many know this (look at everyone's tutorials - you'll see that they don't). When you float something, or position it absolutely, that makes it display:block already. So no need to specify it. { visibility: inherit; } Testing Hello1 Hello2

I believe I found them. All these pages. http://docs.jquery.com/Events

So I'm watching all these tuts. Is there a home base that lists all the thingy madogers (functions or what ever). Like $("#box").slideToggle(1500); and $("#box").hide(1500); and $("a").click(function() and so on - all those!

If you click on one of the API's and then look at the demo, in the demo theres an edit button. That edit button takes you to that JS edit page. I'm loving it! Because I suck at writing any JS - too complicated for me. But jquery actually seems to be making sense to me. Seems like you write it in sort of a CSS coding way. I like it! Kyle sighs, and shakes his head in disappointment...

Like this...

Loving what I'm seeing so far! Have you seen this http://api.jquery.com/ Have you seen this http://jsbin.com/

I wrote an extremely detailed tutorial on just that. Here it is in it's entirety. #box { width:200px; height:200px; background:red; border:1px solid #000; }

Oh no, your gong to expose my ignorance with php! Got that from somewhere, I never quite new what that did either, but never removed it. The one I have now, the one Ben and others helped me with, is pretty bullet proof. I haven't had a single spam since. I can PM you with it if you'd like.

OK I put it back. Yeah, after I posted, I went and looked at my code on my tools page and saw that it was different. But, it's different because I have a heading (less indented/& bolded) in each nested list. Confusing - to early - thanks for catching it...

nested lists are horrible! My tools page is 80k of nested lists and I still have to stare at it when I build a new one. I believe your missing a few tags - take this section - like this... Home Meet Us The Church Services Sermons The Cemetery Find Us Outreach Diary Weekly Events Future Events Past Events News Edit - See I messed up Edit - changed it again Edit - changed it again - I put this one in the browser - looks like what you want. I guess it just matters what look your after.