Help me Popup!

December 14, 2007 6:08 AM

JavaScript filter: popups, mouse over, toggle display. HELP - I'm not a developer!

New Job and I want to impress...
We use a custom CMS program that allows the addition of JavaScript and my vendor is swamped with our other projects.

1 - I would like to add a basic pop up with text. Nothing fancy but I do want it to scroll and not have an address/navigation bar. It would open from “learn more” text and the window would just have simple text.

2 – (An extension of question 1) instead of the historical click and popup It would be cool to use a mouse over to do this. Same text as above

3 – I also have some pretty long lists that I would like to use a toggle display to hide the contents. Lets say I have a department – HR – and under HR I have 10 forms listed. Instead of the entire list being shown I would only like the list to display if someone clicked “expand”

I’ve googled but haven’t found specifically what I’m looking for (also I guess it’s hard for me to get my head around b/c I do not understand what is doing what in the head section and how to execute the script).

Any ideas for the JavaScript or good web sites that a entry level beginner could use?

Bonus points for good resources on the web or books with prewritten JavaScript that I could reference in the future.

posted by doorsfan to computers & internet (5 comments total)

not a book but jquery has all of that functionality built in. check out the plugins sections, most of them have examples on how to use them.
posted by phil at 6:32 AM on December 14, 2007

I'm teaching myself javascript at the moment - I don't know 'the one reference', but I've bookmarked everything I found helpful on del.iciou.us; it's probably worth checking out other people's 'javascript' tag as well.
posted by jacalata at 7:46 AM on December 14, 2007

W3Schools is a great refrence site for learning all kinds of web languages, including Javascript and DOM, both of which you will need to accomplish your tasks. They should have enough info there to get you started in the right direction. Be sure to check out the examples. You should find the JS DOM examples under "Window Object" (at the bottom) particularly helpful.
posted by geeky at 8:25 AM on December 14, 2007

I sent this to the user via mefi mail but I figure id include it here as well for posterity.



don't know if you already figured out your question, but the simple way is this -

<>[more info]

this is more information


------------------------------------------


<>[i have hover info]

this is more information
posted by nihlton at 12:36 PM on December 20, 2007

damn... forgot to escape the "<"s



don't know if you already figured out your question, but the simple way is this -

< a href="#" onclick="document.getElementById('additionalInformation').style.display = 'block';">[more info]</a>

<div style="display:none;" id="additionalInformation">this is more information</div>


------------------------------------------


< a href="#" onmouseover="document.getElementById('additionalInformation').style.display = 'block';" onmouseout="document.getElementById('additionalInformation').style.display = 'none';" >[i have hover info]</a>

<div style="display:none;" id="additionalInformation">this is more information</div>
posted by nihlton at 12:37 PM on December 20, 2007