ChrisUehlein Posted April 22, 2010 Share Posted April 22, 2010 Hi, everybody!I am a total newbie to this forum, so bear with me if this has already been answered.Okay, so I have a page that can by going to: http://www.gnartapes.com/ and then clicking on the link that says Roster. (I would just put the real URL, but it has a swear word in it and was thusly censored)Basically, I would like each of the links to make a floating page appear in the middle of the page, kind of like on facebook when you look at your friends or someone else's friends. It seems to me that the best way to do that would be to have each of the links toggle the visibility of a span from hidden to visible, and then to have an [X] on the span that toggles it back to hidden. What do you all think? How can I make this work?Thanks a lot! Link to comment Share on other sites More sharing options...
ShadowMage Posted April 22, 2010 Share Posted April 22, 2010 First of all Java and JavaScript are entirely different. Just want to make sure you're clear on that.As to the topic at hand, yes I think that would probably be a good way to do it. Although I think a <div> might serve your purpose a little better. You would just create the <div> with absolute positioning and visibility is hidden. Then when you click your link toggle the visibility and move the <div> to whatever location you would need it. Link to comment Share on other sites More sharing options...
thescientist Posted April 22, 2010 Share Posted April 22, 2010 what about CSS and tooltip? Link to comment Share on other sites More sharing options...
ChrisUehlein Posted April 22, 2010 Author Share Posted April 22, 2010 Oh, yes. Sorry about that confusion!I am still confused about how one would make the link toggle the visibility? Would I use the onclick event? What might that code look like?Thanks! Link to comment Share on other sites More sharing options...
thescientist Posted April 22, 2010 Share Posted April 22, 2010 you would use the onFocus event to show, onBlur to hide. One function for each, pass the ID of the element, and the function would change that ID's visibility value accordingly Link to comment Share on other sites More sharing options...
ChrisUehlein Posted April 22, 2010 Author Share Posted April 22, 2010 you would use the onFocus event to show, onBlur to hide. One function for each, pass the ID of the element, and the function would change that ID's visibility value accordinglyI'm afraid I might be even more of a newb than I thought, because I am not sure I know what that means. would a link look like this:<a href="#" onFocus="some java that references an element"> ?I am sorry this is my first topic and I feel so foolish! haha Link to comment Share on other sites More sharing options...
ShadowMage Posted April 22, 2010 Share Posted April 22, 2010 you would use the onFocus event to show, onBlur to hide. One function for each, pass the ID of the element, and the function would change that ID's visibility value accordinglyOn click would probably be better. If there is content in the popup that the user will click on, it will disappear as soon as they do since the link will then lose focus. Other than that, yeah two functions: one for the onclick of the link the other for the onclick of the 'x' in the corner of your popup. Link to comment Share on other sites More sharing options...
ShadowMage Posted April 22, 2010 Share Posted April 22, 2010 I'm afraid I might be even more of a newb than I thought, because I am not sure I know what that means. would a link look like this:<a href="#" onFocus="some java that references an element"> ?I am sorry this is my first topic and I feel so foolish! hahaYou would create two functions in <script> tags in the head of your document and then reference those in the onclick events.<head><script type='text/javascript'>function show_box() { //code}function hide_box() { //code}</script></head> Then your HTML could look like this:<a href='...' onclick='show_box();'>Link</a>Of course you'd have to pass some kind of parameter so you know which link was clicked and can show the appropriate box or adjust the content of the box. Link to comment Share on other sites More sharing options...
ChrisUehlein Posted April 22, 2010 Author Share Posted April 22, 2010 Thank you jkloth I will try that and reply with my results! Link to comment Share on other sites More sharing options...
thescientist Posted April 22, 2010 Share Posted April 22, 2010 You would create two functions in <script> tags in the head of your document and then reference those in the onclick events.<head><script type='text/javascript'>function show_box() { //code}function hide_box() { //code}</script></head> Then your HTML could look like this:<a href='...' onclick='show_box();'>Link</a>Of course you'd have to pass some kind of parameter so you know which link was clicked and can show the appropriate box or adjust the content of the box. which also means the function you are calling also would be required to take one in as welledit: or is it passing an argument and taking in a parameter? hmmm.... sorry, regardless, same concept. Just musing, don't mind me. Link to comment Share on other sites More sharing options...
ShadowMage Posted April 22, 2010 Share Posted April 22, 2010 which also means the function you are calling also would be required to take one in as welledit: or is it passing an argument and taking in a parameter? hmmm.... sorry, regardless, same concept. Just musing, don't mind me.Argument, parameter. I suppose there's a difference but I use the two interchangeably. Link to comment Share on other sites More sharing options...
ChrisUehlein Posted April 22, 2010 Author Share Posted April 22, 2010 which also means the function you are calling also would be required to take one in as welledit: or is it passing an argument and taking in a parameter? hmmm.... sorry, regardless, same concept. Just musing, don't mind me.Well, either way, I am still confused. Haha. So let's say I have a span that looks like this:<span id="myspan" visibility="hidden">Here's a span!</span>Considering I have<head><script type='text/javascript'>function show_box() { //code}function hide_box() { //code}</script></head> up there, how would I indicate in the onclick event in the link that I want to toggle the visibility for just the span with the ID "myspan"? Link to comment Share on other sites More sharing options...
thescientist Posted April 22, 2010 Share Posted April 22, 2010 <a href="link.html" id="link1" onClick="show_box('link1');" onBlur="hide_box('link1');">My Link!</a> Link to comment Share on other sites More sharing options...
ShadowMage Posted April 22, 2010 Share Posted April 22, 2010 <a href="link.html" id="link1" onClick="show_box('link1');" onBlur="hide_box('link1');">My Link!</a> There you go with that onblur business again. if you use onblur thenIf there is content in the popup that the user will click on, it will disappear as soon as they do since the link will then lose focus.But yeah, the way scientist has it (see edit below) will work if you also have that argument specified in your function and use getElementById:function show_box(elemID) { var elemToShow = document.getElementById(elemID); ...more code} Edit:You need to pass the id of the span, not the link:<a href="link.html" id="link1" onClick="show_box('mySpan');">My Link!</a> Link to comment Share on other sites More sharing options...
ChrisUehlein Posted April 22, 2010 Author Share Posted April 22, 2010 I still am not getting this to work. Here is a version of my code with only one link and all of the unnecessary code taken out. (my finished code will of course have many links with many different spans) <html><head><script type='text/javascript'>function show_box() { //code}function hide_box() { //code}</script><style> A{text-decoration:none}</style><title>Gnar Tapes - Bands</title></head><body><div id="flint" visibility="hidden">Info and stuff here!</div><table align="center" bgcolor="white" border="0" width="725"><tbody><tr><td align="center" valign="top"><a href="..." id="link1" onclick="show_box('flint');" onBlur="hide_box('flint');"><img src="bands/images/aflintjamison.jpg" border="0" width="175" /><br />A. FLINT JAMISON</a><br /></p></td></tr></tbody></table></body></html> I feel that I am missing something very simple! Link to comment Share on other sites More sharing options...
ShadowMage Posted April 22, 2010 Share Posted April 22, 2010 I feel that I am missing something very simple!Yes, you are. You need code in your functions. :)This won't do anything at all:function show_box() { //code} You need to actually write some code in there. Use the getElementById method I showed you and then access that element's style property to change the visibility.http://w3schools.com/jsref/prop_style_visibility.aspAlso remember what I told you before. You need to have an argument when you declare the function so that the id you pass to it in the onclick event can be used: function show_box(elemID) { var elemToShow = document.getElementById(elemID); ...more code} Link to comment Share on other sites More sharing options...
ChrisUehlein Posted April 22, 2010 Author Share Posted April 22, 2010 I think I got it figured out! I will post again if I run into more problems. Thank you all so much for your help! Link to comment Share on other sites More sharing options...
ChrisUehlein Posted April 23, 2010 Author Share Posted April 23, 2010 Yay! I have successfully created a span element which appears when I click a link associated with that element, and disappears when an [X] in the span is clicked. Thank you guys for your help.Now how would I make that element float over everything else and scroll with the user? :-P Link to comment Share on other sites More sharing options...
Synook Posted April 23, 2010 Share Posted April 23, 2010 Use position:absolute (in CSS) and then modify the top property whenever the users scrolls.P.S. "argument" and "parameter" mean the same thing in the context of function calling. Link to comment Share on other sites More sharing options...
ShadowMage Posted April 23, 2010 Share Posted April 23, 2010 Use position:absolute (in CSS) and then modify the top property whenever the users scrolls.How about position: fixed instead? Then you don't have to modify anything. You just specify it's location in the CSS and it will stay there all the time. Unless you truly wanted a 'floating' effect where the span would sort lag behind the scrolling slightly and gradually move back to where it belongs. Then you would have to use absolute positioning and modify the top property like Synook said. Link to comment Share on other sites More sharing options...
thescientist Posted April 23, 2010 Share Posted April 23, 2010 There you go with that onblur business again. if you use onblur thenBut yeah, the way scientist has it (see edit below) will work if you also have that argument specified in your function and use getElementById:function show_box(elemID) { var elemToShow = document.getElementById(elemID); ...more code} Edit:You need to pass the id of the span, not the link:<a href="link.html" id="link1" onClick="show_box('mySpan');">My Link!</a> Sorry I must have completely missed the part of the [X] in the span. good to see jkloths always got my back. :)Funny story, I was on my way out the door from work when writing that, which is probably why I hacked that poor example up, and then I missed the bus. Karma? Link to comment Share on other sites More sharing options...
ShadowMage Posted April 23, 2010 Share Posted April 23, 2010 Funny story, I was on my way out the door from work when writing that, which is probably why I hacked that poor example up, and then I missed the bus. Karma? Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.