Archive for 14th December 2006

A Tree (Sliding) Menu Written In PHP

Recently posed on Yahoo! Answers:

Regarding PHP, what would be a good way to make dynamic tree like menu?

So when the user first looks at the page, they see
2004
2005
2006
2007

When they click on the year, a sub menu drops down as follows.

2004
2005
–january
–february
–march
–…..
–december
2006
2007
etc.
if they click on the year again, the menu will collapse
im trying to avoid javascript at all possible

thanks

For the most part, tree (aka sliding, aka dynamic) menus these days seldom involve posting back to the server; they’re more commonly made either with CSS alone, JavaScript alone or a combination of the two. However, some folks want to keep things both aesthetic and primitive, for maximum compatibility.

So, without further ado, here’s a tree (slider / dynamic) menu written solely in PHP.

Continue reading ‘A Tree (Sliding) Menu Written In PHP’ »

Dynamically Creating Links With JavaScript

Recently asked on Yahoo! Answers:

Javascript syntax question to get php passed?

submenuItem("Februa# ry-07",loc+"index.php?m=2&y=2007","","x2... 007_plain");

this is a line from my javascript for a drop down menu. I added two “# ” in the line just so yahoo wouldnt truncate it. The problem that i am having is that the menu works, but when i go to test it and hit a hyperlink from the submenu it chops everything to the right of the ? so i just get index.php . When i just remove the question mark, i get

index.phpm=2&y=2007

so i have determined that the question mark in the ahref is causing the problem. Im not too familiar with javascript syntax, is there something that i can do so i can get

index.php?m=2&y=2007

thanks

Additional Details

function submenuItem(text,url,tar,s){
 
if(NS4)return;
if(text.charAt(0)=='<')
d.write(text);
else if(text=="---")
d.write("<div class=\""+s+"\" style=\"width:"+menuw+"px\"><center><img src=\""+loc+"---.gif\" height=\"8\" width=\""+(menuw-6-(2*bd))+"\" border=0/></center></div>");
else{
d.write("<a ");
if(url!="")
d.write("href=\""+url+"\" ");
if(tar!="")
d.write("target=\""+tar+"\" ");
d.write("class=\""+s+"\" style=\"width:"+menuw+"px\"> "+text+" </...
}
}

this is the function

There’s no problem with using a question mark in JavaScript. Your syntax has some issues and the way you’re outputting your script is not paticularly sound, which is causing your problems. Also, you should convert your ampersands to entities.

To demonstrate, make an HTML page with the following DIV in the body:

<div id="test"></div>

Next, add this JavaScript function to the page:

function makeLink() {
	var mydiv = document.getElementById("test");
	var out = '<a href="nosuchpage.php';
	out += '?m=2&amp;';
	out += 'y=2007">Dynamic Link</a>';
	mydiv.innerHTML = out;
}

Change your body tag to this:

<body onload="makeLink()">

Run that test page. You’ll notice that there is now a link in the DIV, which links to test.php?m=2&y=2007.

Changing CSS Styles Via JavaScript, Based On The User’s Web Browser

Recently asked in Yahoo! Answers:

Can I Use JavaScript To Figure Browser Window Height Inside A Conditional Statement?

My CSS tends to break on IE when the browser window get too small to contain all my content (the top of the content disappears).

I already have a conditional statement to add an IE stylesheet if that browser is present. I wanted to add the Javascript statement inside the conditional that will determine whether the window height is less than 750 pixels high. If that is the case, two CSS properties are added.

It hasn’t worked. Am I close, far off…just missing something?

Here is the conditional: