Programming Forums > Web Development and Design > JavaScript and Client-Side Browser Scripting

Intimidat0r · Feb 24th, 2006, 2:57 AM

I'm not sure what to call it. You know how this forum has that Forum Tools and Search the Forum links, that have that cool dropdown form? How is that done? My guess was javascript, but I've scanned the source for the page and couldn't find any javascript or css that has anything to do with it. And just in case I missed something, I made a link on my page to all the JS files referened by that PFO forum page, using <script src...

So anybody know how this is done? Any help would be very greatly appreciated and I'll love you forever

Thanks.

Infinite Recursion · Feb 24th, 2006, 8:04 AM

Try DHTML

DaWei · Feb 24th, 2006, 8:38 AM

Check the "Grumpy" link in my sig. There is a nested drop-down menu involved. It remains dropped if the page being viewed is a nested entry, retracts otherwise. The implementation varies depending upon whether or not the browser has Javascript enabled. It is generated by a PHP menu object, but the source view will show you the ultimate outcome for the particular values it is instantiated with.

Intimidat0r · Feb 24th, 2006, 5:42 PM

DaWei: Is it possible to move the box that appears over to the right more? I suspect it's in the file http://www.daweidesigns.com/contrib.js and has something to do with

(Toggle Plain Text)

var specs = width=800,height=600,top=30,left=30,screenx=30,screeny=30,resizable=yes,scrollbars=yes";

But i've played with those values a little and theres no change. Is it possible to do this? Thanks.

DaWei · Feb 24th, 2006, 5:52 PM

Those specs are for a separate pop-up window, nothing to do with the menu. That is controlled, in part, by things like:

(Toggle Plain Text)

.sub
{
	list-style-position: inside;
	list-style-type: none;
	margin: 0px 0px 0px 40px;
	padding: 0px 10px 0px 10px;
	border: 1px outset #000000;
	position: absolute;
	background-color: #ffffee;
	display: none;
	visibility: hidden;
	width: 10em;
}

I suggest you do some research on CSS as well as on Javascript.

Intimidat0r · Feb 24th, 2006, 6:11 PM

Wow I didn't even think of looking at the CSS

Thanks, and yeah, I know CSS, and a little Javascript.

Which brings me to my final Javascript question, I put a form on that little popup box thing, and I was wondering, is there a way to make it so it disappears when Im not hovering over the text OR the box that pops up? Because as of now it disappears when the cursor leaves the text.

Any help would be extremely appreciated. Thank you all so much for helping me with my javascript noobness

DaWei · Feb 24th, 2006, 6:52 PM

If you use CSS you have to accept its limitations. It's predominately an application of attributes, non-interactive. There aren't a lot of pseudo-classes (like hover) that cause a reapplication of styles. If you use script, you have to accept that you might be losing viewers because script is disabled. The increasing use of things like XML http requests, which don't have to reload the entire page, and their use by giants like Google (Google Maps is an example) may reduce the 'security-scared' flight from having script enabled.

If you're dealing with an element in CSS, you need to keep in mind what it encompasses.

(Toggle Plain Text)

<elementOne> Text </elementOne>
<elementTwo>blah </elementTwo>
<elementThree>blah blah</elementThree>

is not the same thing as

(Toggle Plain Text)

<elementOne> Text
   <elementTwo>blah</elementTwo>
   <elementThree> blah </elementThree>
</elementOne>

when it comes to the 'area' owned by elementOne. Unfortunately, different browsers will not treat these constructs in the same way. Whether or not elementTwo 'hides' elementOne will vary. Messing with this stuff is a distinct pain in the rear.

Intimidat0r · Feb 24th, 2006, 7:01 PM

Heh, alright. I think I understand. Thanks for your assistance and time.

DaWei · Feb 24th, 2006, 8:19 PM

Another thing to bear in mind is that attributes assigned by CSS are not queryable by Javascript. You'll normally just get a null value if you try. If you want to query them from the gitgo, you'll need to run an onload function that sets your defaults. It sort of defeats the purpose of CSS for the things you intend to adjust or mess around with. Again, if you intend to mess seriously with this stuff and have versions that work with and without script enabled, and that work cross-browser, you may as well get a hammer and beat yourself in the head, so as to get used to the pain.

Feb 24th, 2006, 2:57 AM	#1
Intimidat0r Hobbyist Programmer Join Date: May 2005 Location: Don't know, but the padded walls are a nice touch. Posts: 126 Rep Power: 0	Slide down menu I'm not sure what to call it. You know how this forum has that Forum Tools and Search the Forum links, that have that cool dropdown form? How is that done? My guess was javascript, but I've scanned the source for the page and couldn't find any javascript or css that has anything to do with it. And just in case I missed something, I made a link on my page to all the JS files referened by that PFO forum page, using <script src... So anybody know how this is done? Any help would be very greatly appreciated and I'll love you forever Thanks. __________________ Children in the dark cause accidents, and accidents in the dark cause children. http://www.ronincoders.org

Feb 24th, 2006, 8:04 AM	#2
Infinite Recursion Programming Guru Join Date: Jul 2004 Location: United States Posts: 3,467 Rep Power: 8	Try DHTML __________________ http://jasonpowers.net "There are a thousand hacking at the branches of evil to one who is striking at the root."

Feb 24th, 2006, 8:38 AM	#3
DaWei Resident Grouch Join Date: Jun 2005 Posts: 6,453 Rep Power: 10	Check the "Grumpy" link in my sig. There is a nested drop-down menu involved. It remains dropped if the page being viewed is a nested entry, retracts otherwise. The implementation varies depending upon whether or not the browser has Javascript enabled. It is generated by a PHP menu object, but the source view will show you the ultimate outcome for the particular values it is instantiated with. __________________ Abstraction doesn't make it impossible to write bad code; it makes it possible to write superior code. Contributor's Corner: Grumpy on C++ Exceptions DaWei on Pointers

Feb 24th, 2006, 5:42 PM	#4
Intimidat0r Hobbyist Programmer Join Date: May 2005 Location: Don't know, but the padded walls are a nice touch. Posts: 126 Rep Power: 0	DaWei: Is it possible to move the box that appears over to the right more? I suspect it's in the file http://www.daweidesigns.com/contrib.js and has something to do with (Toggle Plain Text) var specs = width=800,height=600,top=30,left=30,screenx=30,screeny=30,resizable=yes,scrollbars=yes"; var specs = width=800,height=600,top=30,left=30,screenx=30,screeny=30,resizable=yes,scrollbars=yes"; But i've played with those values a little and theres no change. Is it possible to do this? Thanks. __________________ Children in the dark cause accidents, and accidents in the dark cause children. http://www.ronincoders.org

Feb 24th, 2006, 5:52 PM	#5
DaWei Resident Grouch Join Date: Jun 2005 Posts: 6,453 Rep Power: 10	Those specs are for a separate pop-up window, nothing to do with the menu. That is controlled, in part, by things like: (Toggle Plain Text) .sub { list-style-position: inside; list-style-type: none; margin: 0px 0px 0px 40px; padding: 0px 10px 0px 10px; border: 1px outset #000000; position: absolute; background-color: #ffffee; display: none; visibility: hidden; width: 10em; } .sub { list-style-position: inside; list-style-type: none; margin: 0px 0px 0px 40px; padding: 0px 10px 0px 10px; border: 1px outset #000000; position: absolute; background-color: #ffffee; display: none; visibility: hidden; width: 10em; } I suggest you do some research on CSS as well as on Javascript. __________________ Abstraction doesn't make it impossible to write bad code; it makes it possible to write superior code. Contributor's Corner: Grumpy on C++ Exceptions DaWei on Pointers

Feb 24th, 2006, 6:11 PM	#6
Intimidat0r Hobbyist Programmer Join Date: May 2005 Location: Don't know, but the padded walls are a nice touch. Posts: 126 Rep Power: 0	Wow I didn't even think of looking at the CSS Thanks, and yeah, I know CSS, and a little Javascript. Which brings me to my final Javascript question, I put a form on that little popup box thing, and I was wondering, is there a way to make it so it disappears when Im not hovering over the text OR the box that pops up? Because as of now it disappears when the cursor leaves the text. Any help would be extremely appreciated. Thank you all so much for helping me with my javascript noobness __________________ Children in the dark cause accidents, and accidents in the dark cause children. http://www.ronincoders.org

Feb 24th, 2006, 6:52 PM	#7
DaWei Resident Grouch Join Date: Jun 2005 Posts: 6,453 Rep Power: 10	If you use CSS you have to accept its limitations. It's predominately an application of attributes, non-interactive. There aren't a lot of pseudo-classes (like hover) that cause a reapplication of styles. If you use script, you have to accept that you might be losing viewers because script is disabled. The increasing use of things like XML http requests, which don't have to reload the entire page, and their use by giants like Google (Google Maps is an example) may reduce the 'security-scared' flight from having script enabled. If you're dealing with an element in CSS, you need to keep in mind what it encompasses. (Toggle Plain Text) <elementOne> Text </elementOne> <elementTwo>blah </elementTwo> <elementThree>blah blah</elementThree> <elementOne> Text </elementOne> <elementTwo>blah </elementTwo> <elementThree>blah blah</elementThree> is not the same thing as (Toggle Plain Text) <elementOne> Text <elementTwo>blah</elementTwo> <elementThree> blah </elementThree> </elementOne> <elementOne> Text <elementTwo>blah</elementTwo> <elementThree> blah </elementThree> </elementOne> when it comes to the 'area' owned by elementOne. Unfortunately, different browsers will not treat these constructs in the same way. Whether or not elementTwo 'hides' elementOne will vary. Messing with this stuff is a distinct pain in the rear. __________________ Abstraction doesn't make it impossible to write bad code; it makes it possible to write superior code. Contributor's Corner: Grumpy on C++ Exceptions DaWei on Pointers

Feb 24th, 2006, 7:01 PM	#8
Intimidat0r Hobbyist Programmer Join Date: May 2005 Location: Don't know, but the padded walls are a nice touch. Posts: 126 Rep Power: 0	Heh, alright. I think I understand. Thanks for your assistance and time. __________________ Children in the dark cause accidents, and accidents in the dark cause children. http://www.ronincoders.org

Feb 24th, 2006, 8:19 PM	#9
DaWei Resident Grouch Join Date: Jun 2005 Posts: 6,453 Rep Power: 10	Another thing to bear in mind is that attributes assigned by CSS are not queryable by Javascript. You'll normally just get a null value if you try. If you want to query them from the gitgo, you'll need to run an onload function that sets your defaults. It sort of defeats the purpose of CSS for the things you intend to adjust or mess around with. Again, if you intend to mess seriously with this stuff and have versions that work with and without script enabled, and that work cross-browser, you may as well get a hammer and beat yourself in the head, so as to get used to the pain. __________________ Abstraction doesn't make it impossible to write bad code; it makes it possible to write superior code. Contributor's Corner: Grumpy on C++ Exceptions DaWei on Pointers

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Programming Forums > Web Development and Design > JavaScript and Client-Side Browser Scripting

Slide down menu