Nav bar showing/hiding items

[kurt.santo]

For a nav bar I wondered how I would make the relevant <li> visible/invisible depending on what the user clicked on (and also to change bg colour when selected). I have two sidebars (two separate lists), which have three levels as such. The first one is the heading, the second one consisting of ranges/rooms and the last one listing the relevant items. When the user comes to my site he/she shoud just see the two headings with ranges/rooms underneath. Once clicked onto a range or room I want the relevant products to show while the other sidebar retracts to show only the heading (to make some space). Headings, choosen range/room and choosen product should have a darker colour, which I specified in my stylesheet. How would I best achieve what I am after? The following code should give an idea of what I am after. The first list arranges the products under ranges and is currently showing the "Shanghai" range with no item selected. The list, which shows the items sorted by room is retracted to make some space:<ul><li class="dark"><a href="#">Product Ranges</a></li><li class="dark"><a href="#">Shanghai</a></li><li><a href="#">Table</a></li><li><a href="#">Chairs</a></li><li><a href="#">Chest of drawers</a></li><li><a href="#">Cabinet</a></li><li><a href="#">Nightstand</a></li><li><a href="#">Dresser</a></li><li><a href="#">Mirror</a></li><li><a href="#">Small cabinet</a></li><li><a href="#">Tall cabinet</a></li><li><a href="#">Tall cabinet</a></li></ul><ul><li class="dark"><a href="#">View by Room</a></li></ul>Is this sth that can be done with PHP?Kurt

[rswildy]

Yes, It can be done and it isn't to hard.Lets say you had a text box and they wrote "nav" you could have it as something like this...

<ul><li class="dark"><a href="#">Product Ranges</a></li><li class="dark"><a href="#">Shanghai</a></li><li><a href="#">Table</a></li><li><a href="#">Chairs</a></li><li><a href="#">Chest of drawers</a></li><li><a href="#">Cabinet</a></li><li><a href="#">Nightstand</a></li><li><a href="#">Dresser</a></li>if ( $_POST['name'] == 'nav' ) { // Hide/show option<li><a href="#">Nav</a></li>}<li><a href="#">Mirror</a></li><li><a href="#">Small cabinet</a></li><li><a href="#">Tall cabinet</a></li><li><a href="#">Tall cabinet</a></li></ul><ul><li class="dark"><a href="#">View by Room</a></li></ul>

You can just use that example for show for a tick box option or whatever.Hope this helped..

[jhecht]

How many times must this sentence be muttered before people get the idea : PHP = Server Side.PHP!= Client SideJavascript=Client SideJavascript!=PHPFor something like a nav bar, you would want to use Javascript, because the pages wouldn't have to reload every time you clicked on the nav link. Again, lets say thisUse Javascript

[rswildy]

How many times must this sentence be muttered before people get the idea : PHP = Server Side.PHP!= Client SideJavascript=Client SideJavascript!=PHPFor something like a nav bar, you would want to use Javascript, because the pages wouldn't have to reload every time you clicked on the nav link. Again, lets say thisUse Javascript

But the Question was can i do this with PHP....Javascript may be the better option though...

[jhecht]

you could, but it's a lot more of a B**** to do than it would be with Javascript. In PHP you'd have a link be clicked, that link(if its the one that hides/shows an item) goes to a PHP page, which does some code and says which item in the HTML should have 1) the "darker" or "lighter" bg; and 2) which sub-tree to display. PHP would then have to set cookies or something to remember which one is highlighted and opened.In Javascript, this can all be done without having to go to another page.

[kurt.santo]

you could, but it's a lot more of a B**** to do than it would be with Javascript. In PHP you'd have a link be clicked, that link(if its the one that hides/shows an item) goes to a PHP page, which does some code and says which item in the HTML should have 1) the "darker" or "lighter" bg; and 2) which sub-tree to display. PHP would then have to set cookies or something to remember which one is highlighted and opened.In Javascript, this can all be done without having to go to another page.

Sorry, I am replying so late (problems with PHP/Apache installation on my own pc). Rswildy, thanks for that. Hopefully I manage soon to have PHP working with Apache, so I can test your code... Will come back to this post to let you know if it worked for me...JavaScript is not an option as SEO plays a major part in this project. But thanks anyway...Kurt

[jhecht]

... SEO has nothing to do with anything in this case. You could have the links inside the menu point to pages, which could/would be indexed. But using PHP for a client-side menu like this is just pointless and overly complicated. You would save yourself much, much time by just using Javascript.

[kurt.santo]

... SEO has nothing to do with anything in this case. You could have the links inside the menu point to pages, which could/would be indexed. But using PHP for a client-side menu like this is just pointless and overly complicated. You would save yourself much, much time by just using Javascript.

Sorry, guess I have not said what site is for: My friend is selling furniture online, so we have lots of product pages. I was hoping be able to create a template where I can pass parameters from the sidebar, so the appropriate fields are filled with the relevant details (otherwise we would end up having only 100 product pages or so/also lots of the product data will come from a database).With regard to JavaScript I have another question: I wanted to have three thumbs under a main picture (information for those send from chosen item on sidebar) and wanted to create an imagage swap to change between those three. Also, when you click on the main picture it should open a pop-up with an even larger version. How can I wrap up one Javascript function in another one? Also, is there any chance that the pics could be in different folders? My friend has quite a bit of products and I am worried we end up in complete caos, having for each product 9 different photos (three thumbs, three main pictures and three enlarged).I still have not tried the given example for the sidebar as I cannot get to grips with my Apache (created another post on this, but still not working properly).Kurt

[Synook]

Err... for your thumbnail picture viewer, you could have something like

<script type="text/javascript">function show_big(src) {document.getElementById('big_image').src = src;}function open_popup(ele) {src = ele.src;var biggest;if (src == "big_1.gif") {biggest = "biggest_1.gif";} else if (src == "big_2.gif") {biggest = "biggest_2.gif";}//Etc...window.open(biggest);}</script><!-- ... --><img id="big_image" src="default_image.gif" onclick="open_popup(this)" /><br /><img src="thumb_1.gif" onclick="show_big('big_1.gif')" /><img src="thumb_2.gif" onclick="show_big('big_2.gif')" /><!-- Etc... -->

With the different folders, just use relative links, remember that ../ references the parent folder, while ./ references the root.

[kurt.santo]

Err... for your thumbnail picture viewer, you could have something like

<script type="text/javascript">function show_big(src) {document.getElementById('big_image').src = src;}function open_popup(ele) {src = ele.src;var biggest;if (src == "big_1.gif") {biggest = "biggest_1.gif";} else if (src == "big_2.gif") {biggest = "biggest_2.gif";}//Etc...window.open(biggest);}</script><!-- ... --><img id="big_image" src="default_image.gif" onclick="open_popup(this)" /><br /><img src="thumb_1.gif" onclick="show_big('big_1.gif')" /><img src="thumb_2.gif" onclick="show_big('big_2.gif')" /><!-- Etc... -->

With the different folders, just use relative links, remember that ../ references the parent folder, while ./ references the root.

Great stuff! Will try the thing tonight (when I have done my work;-)). If I wanted to keep the Javascript in a separate file and reference it from the HTML page, how would I do this? At the top level there will be the html files, stylesheet and Javascript file. Then I will have folders for item pictures (different ones for different ranges)...Kurt

[Synook]

Just have your external script as the src of a <script> in the header of your HTML file:

<script type="text/javascript" src="external_script.js"></source>

[kurt.santo]

Just have your external script as the src of a <script> in the header of your HTML file:

<script type="text/javascript" src="external_script.js"></source>

Cheers, mate. Will let you know how it went...Kurt

[jhecht]

You seem to be confusing what PHP and Javascript do, along with what i say.Can you use PHP to store all of the furniture information through databases and access them through PHP? Yes. In fact, that is the easiest way. Using pages like http://youriste.com/display.php?mode=product&id=14 would be a very good idea. However, using PHP to keep track of a menu system is not.PHP works on the server side. any PHP coding has to be done within a new page(I.E. you can't have some PHP code on a page, display some things, and then run more PHP code when an event happens). You can have javascript to keep track of which links are open/closed, but the links inside the <a> tags would point to the PHP page which would display the information.

[kurt.santo]

PHP coding has to be done within a new page(I.E. you can't have some PHP code on a page, display some things, and then run more PHP code when an event happens). What do you mean by PHP coding has to be done within a new page? Do you mean that when a user clicks on the nav bar that to update the same one the page has to be reloaded to reflect the change (as I was planning just to have one php file which would update accordingly to the user choices)? Then, if I was to retrieve the <li> items also from the SQL database it surely would have to be done with PHP? What is when a user has JavaScript disabled? And, as far as I know search engines cannot read JavaScript, so useful words would get lost...KurtBy the way, my Apache is finally running, so I can actually start working on things...

[Synook]

You can always have a sitemap page for the search engines.PHP script cannot be run asynchronously to page loadings without the help of JavaScript (as via AJAX), so if you want to code JavaScript-independently yes, the page would have to be reloaded each time someone clicked to show/hide a menu item. Don't worry, 98% of clients have JavaScript and the rest can use your flat-file sitemap, or you can provide a noscript menu for them.But you cannot retrieve database information using JavaScript, you would have to use AJAX for that. Perhaps AJAX is the best way to go for you, as it would be smooth and you could include your database without reloading the pages.

[kurt.santo]

You can always have a sitemap page for the search engines.PHP script cannot be run asynchronously to page loadings without the help of JavaScript (as via AJAX), so if you want to code JavaScript-independently yes, the page would have to be reloaded each time someone clicked to show/hide a menu item. Don't worry, 98% of clients have JavaScript and the rest can use your flat-file sitemap, or you can provide a noscript menu for them.But you cannot retrieve database information using JavaScript, you would have to use AJAX for that. Perhaps AJAX is the best way to go for you, as it would be smooth and you could include your database without reloading the pages.

AJAX is some sort of mixture in between JavaScript and other components (which are?)? Or what is it exactly? I heard it a lot, but have not a clue...Kurt

[jhecht]

Think of an AJAX request object like a mini browser. You define how you open a page, what headers to send, and which page will be opened. When the page finishes loading(its readyState is equal to 4) you can view the file contents through Javascript and do what ever you please.And also, you seem to be mis-understanding what i was saying. For POPULATING the <li> tags, yes, you can use PHP(or an AJAX object,whichever floats your boat); for the show/hide effects, however, it would be much easier to use Javascript to have one list hide when another is opened, and vice-versa. Search Engines will still find the links regardless, but it would save load time, and get you fewer aggrevated people who complain "this site takes to long to load!"

[justsomeguy]

Just to clarify a little, Jhecht is talking about using PHP to first write out the entire menu, as if the whole thing was open. Then you use Javascript to hide the parts that haven't been opened yet, and from there all you use is Javascript to show/hide parts of the menu. That way they don't have to load a new PHP page when they click on the menu, Javascript will just show the menu for whatever they clicked on. If Javascript is disabled, then the user will see the whole menu (the first thing Javascript does is hide everything you haven't opened yet, so if it never does that then the entire menu is visible), and since PHP already wrote all the links to the page the search engines will find everything.That is the difference between using Javascript to show and hide the menu vs. clicking on a link, which loads a new page, which gets the info from the database and displays the page. There's no need for that much time just to show a menu item.

[kurt.santo]

Just to clarify a little, Jhecht is talking about using PHP to first write out the entire menu, as if the whole thing was open. Then you use Javascript to hide the parts that haven't been opened yet, and from there all you use is Javascript to show/hide parts of the menu. That way they don't have to load a new PHP page when they click on the menu, Javascript will just show the menu for whatever they clicked on. If Javascript is disabled, then the user will see the whole menu (the first thing Javascript does is hide everything you haven't opened yet, so if it never does that then the entire menu is visible), and since PHP already wrote all the links to the page the search engines will find everything.That is the difference between using Javascript to show and hide the menu vs. clicking on a link, which loads a new page, which gets the info from the database and displays the page. There's no need for that much time just to show a menu item.

I am getting there. So you use PHP to populate the menu, so search engine optimisation will be fine. Then you show/hide and colour the menu items with JavaScript. And you pass the parameters (ids from menu items) to the relevant PHP placeholder (as header, description and pictures) to populate the page accordingly to what link has been clicked on? Am I getting there now?Also, I created the relevant gifs for the JavaScript above and just copied the given code to first see how it works before I go and try to use it in my specific context. The change from thumb to big version works fine, but pop-up does not. But Firefox says it cannot find the file?KurtBy the way: I really appreciate that you bring some light into my darkness...

[justsomeguy]

I am getting there. So you use PHP to populate the menu, so search engine optimisation will be fine. Then you show/hide and colour the menu items with JavaScript. And you pass the parameters (ids from menu items) to the relevant PHP placeholder (as header, description and pictures) to populate the page accordingly to what link has been clicked on? Am I getting there now?

Clicking on the menu link would still go to a new PHP page and cause the page to reload. You wouldn't want to have Javascript load in all the page content also, that would negatively affect search engines. All Javascript does is hide the parts of the menu that you haven't opened yet, everything else like the menu links work as normal.

[kurt.santo]

Clicking on the menu link would still go to a new PHP page and cause the page to reload. You wouldn't want to have Javascript load in all the page content also, that would negatively affect search engines. All Javascript does is hide the parts of the menu that you haven't opened yet, everything else like the menu links work as normal.

I understand now:-) But I really do not have a clue how to do that, still cannot even work the pop-up from above... Taking the mentioned menu (is just part of it) how could I achieve the showing/hiding/colouring with JavaScript?Guys, recently I got a lot of input from you. Hopefully soon I should have some basic knowledge to start helping others in this forum. Feel bad that I am not yet in the position to help out. Sorry for that...

[justsomeguy]

A typical Javascript menu will have events for either mouseover or click that will show the next level of the menu. The function that runs can show the next level, color whatever is appropriate, and set a cookie to remember the state of the menu on the next page. You should be able to do a search for DHTML menus that will show you what you need. Eventually you will use PHP to create the actual menu, but the Javascript code doesn't depend on that, you can add that in later once you get the menu working like you want.

[jhecht]

Just to clarify a little, Jhecht is talking about using PHP to first write out the entire menu, as if the whole thing was open. Then you use Javascript to hide the parts that haven't been opened yet, and from there all you use is Javascript to show/hide parts of the menu. That way they don't have to load a new PHP page when they click on the menu, Javascript will just show the menu for whatever they clicked on. If Javascript is disabled, then the user will see the whole menu (the first thing Javascript does is hide everything you haven't opened yet, so if it never does that then the entire menu is visible), and since PHP already wrote all the links to the page the search engines will find everything.That is the difference between using Javascript to show and hide the menu vs. clicking on a link, which loads a new page, which gets the info from the database and displays the page. There's no need for that much time just to show a menu item.

Thank you, someone has finally got what i was trying to say. I guess thats what being experienced nerds do to ppl. lol

[kurt.santo]

Thank you, someone has finally got what i was trying to say. I guess thats what being experienced nerds do to ppl. lol

Will do a search on DHTL menu and try to implement on into the website...In the meantime do you know why the biggest picture cannot be found when I try Synook's code?

<script type="text/javascript">function show_big(src) {document.getElementById('big_image').src = src;}function open_popup(ele) {src = ele.src;var biggest;if (src == "big_1.gif") {biggest = "biggest_1.gif";} else if (src == "big_2.gif") {biggest = "biggest_2.gif";}//Etc...window.open(biggest);}</script><!-- ... --><img id="big_image" src="default_image.gif" onclick="open_popup(this)" /><br /><img src="thumb_1.gif" onclick="show_big('big_1.gif')" /><img src="thumb_2.gif" onclick="show_big('big_2.gif')" /><!-- Etc... -->

I created all the gifs and have it all in one folder???Kurt

[Synook]

What is the path to your biggest picture, and what did you put in the biggest = bit of the code?