Jump to content

How to toggle <SPAN visibility> using Java?

ChrisUehlein

By ChrisUehlein
in JavaScript

Recommended Posts

ChrisUehlein Newbie

ChrisUehlein

Posted
Posted

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
ShadowMage Devoted Member

ShadowMage

Posted
Posted

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
thescientist w3schools Guru

thescientist

Posted
Posted

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
ChrisUehlein Newbie

ChrisUehlein

Posted
  • Author
Posted
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
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! haha
Link to comment
Share on other sites
ShadowMage Devoted Member

ShadowMage

Posted
Posted
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
On 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
ShadowMage Devoted Member

ShadowMage

Posted
Posted
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! haha
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.

Link to comment
Share on other sites
thescientist w3schools Guru

thescientist

Posted
Posted
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
ShadowMage Devoted Member

ShadowMage

Posted
Posted
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
ChrisUehlein Newbie

ChrisUehlein

Posted
  • Author
Posted
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
thescientist w3schools Guru

thescientist

Posted
Posted 
<a href="link.html" id="link1" onClick="show_box('link1');" onBlur="hide_box('link1');">My Link!</a>

Link to comment
Share on other sites
ShadowMage Devoted Member

ShadowMage

Posted
Posted 
<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 then
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.
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
ChrisUehlein Newbie

ChrisUehlein

Posted
  • Author
Posted

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
ShadowMage Devoted Member

ShadowMage

Posted
Posted
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
ChrisUehlein Newbie

ChrisUehlein

Posted
  • Author
Posted

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
Synook w3schools Guru

Synook

Posted
Posted

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
ShadowMage Devoted Member

ShadowMage

Posted
Posted
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
thescientist w3schools Guru

thescientist

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

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...