Folding Menu - How To Remember Current Selection

Aug 24, 2010

I am new to JavaScript. I am currently developing a simple CMS in PHP & MySQL. Most of work is already finished, bu now I have to tweak some functionalities in increase user experience. One of it is folding menu (tree menu). I am generating it in PHP and currently I'm using simple JavaScript to expand/collapse submenus (folders). Idea is simple - when an expandable list item (<li>) is clicked (onmouseclick) a simple JS funtion is executed that display a child list (<ul>) and in this way I am building a simple tree menu.

The function is following:
Code:
function showHide(msg_id)
{
var element = document.getElementById(msg_id);
element.style.display = element.style.display=='block' ? 'none' : 'block';
}

The problem is that when I click an list item (that leads to certain article) in a submenu, whole page is reloaded and all previously opened submenus collapse. I would like to have expanded elements that are leading to the last one that I clicked. How can I achieve it? Can you provide me some links to tutorials? Or maybe giva a hint how to tweak my function?

View 1 Replies


ADVERTISEMENT

Add Text To Current Selection

May 14, 2009

I have a function that will add text to the end of my text box. I want to be able to have the text added where it is currently selected.

My current code is :

View 1 Replies View Related

Put Selection On Top Of The Current Select Box?

Mar 31, 2010

Is there anyway I could control the selected item, and put it on the top of the current selection box. I know for the first and last 4 item, it may not be able to show on the top of the select box. But if I have hundreds of record, I want the selected item to show on the top if they not the first or last 4. And I am not interested in the items before the selected item either.

I have the testing code below.

<HTML><HEAD><SCRIPT type="text/javascript">
function searchSel() {
var input=document.getElementById('txt').value.toLowerCase();
var list=document.getElementById('items').options;

[Code]....

View 9 Replies View Related

JQuery :: Selection Of All Divs That Contain Contents Of Current Div Subelement

Apr 8, 2011

I have some divs:

<div id="id1"><h3>a
</h3><h4>aa
</h4></div>
<div id="id2"><h3>b
</h3><h4>bb
</h4></div>
[Code]...

I would like to add a function to all divs that :

1 Triggers onclick
2 Search for the divs that contain contents of the <h3> from the clicked div
3 Append the matched divs to another one

[Code]....

View 2 Replies View Related

JQuery :: Cookie Plugin To Remember The State Of A Navigation Menu From Page To Page

May 19, 2011

I'm trying to use the cookie plugin to remember the state of a navigation menu from page to page. Here is the snippet of code from towards the top of my page where I am including the jquery files and cookie plugin. The second part of the sample tries to determine whether the cookie exists.

[Code]....

View 1 Replies View Related

Menu Selection

Jun 22, 2004

how i can create the list of menu that when we want to select certain item instead of we must select manually....mayb u all dont understand...ok like this, i want to select item 'cow' in list of cat, dog, cow, deer n etc...so when i press 'c' then the item cat n cow will appear, but i dont want be like that....but i want when i press 'c' the menu list appear as usual then when i press for the 2cd time, i press 'a' only cat will appear in the option list.

View 1 Replies View Related

Indicate The Current Page On The Main Menu?

Dec 7, 2010

I'm looking for a Javascript workaround that'll allow me to indicate the current page on the main menu(basically, the menu button for that page will be a different colour to the rest of the menu buttons). The main menu is in CSS but isn't bringing up the required image for the "current menu item" indicator automatically and no one knows why.

View 1 Replies View Related

Second Menu Appear Based On Selection In First One

Apr 28, 2010

I have three dropdown menus (side dish, veggie, fruit). Based on the side dish selected (fruit or veggie), I'd like the fruit or veggie menu to appear automatically, while the one not selected stays hidden. Below is the code for the HTML part. I have no idea how to get started with the javascript.

<head>
<title>Untitled Document</title>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<label>sidedish
<select name="sidedish" id="sidedish">
<option value="fruit">fruit</option>
<option value="veggie">veggie</option>
</select>
</label>
<label>veggie
<select name="veggie" id="veggie">
<option value="carrots">carrots</option>
<option value="corn">corn</option>
</select>
</label>
<label>fruit
<select name="fruit" id="fruit">
<option value="banana">banana</option>
<option value="orange">orange</option>
</select>
</label>
</form>
</body>
</html>

View 2 Replies View Related

JQuery :: Highlighting Current Page In A Nav Menu

Jun 23, 2010

In the menu in this page I have four different methods (you can see them in the <script> tag on the pages) of indicating the current page in a menu. I downloaded these from various web pages after Googling "jQuery highlight current page".None of the methods works. Is there something wrong with my selectors? Can anyone see why none of them are working?

View 4 Replies View Related

Expandable Menu Display Current Submenu ?

Apr 27, 2009

I have built an expandable menu that displays some categories and subcategories. The menu is populated from a MySQL DB and I'm using PHP to configure the data for the Javascript menu. All of this works correctly.

There are 2 options when using the menu.

1. Click the arrow icon next to the category option. This opens the subcategories for that category while remaining on the current page.

2. Click the category title (text link). This brings you to the category page.

When a user clicks the category title to go to the category page, I want the subcategories for that category to be open when they get there.

Everything seems to be working correctly, until I get to the line to open the subcategory.

View 4 Replies View Related

Current And Future Years In A Dropdown Menu?

Jun 8, 2011

I'm looking for some Javascript that displays the current year and the next 10 years afterwards as options in a select menu, and that auto updates as the years pass.

View 2 Replies View Related

Change Second Menu Depending On Selection In First

Feb 15, 2009

Basically I have a form, with two simple select menus, both identical except for different name values to post:

HTML Code:
<p>Make current?</p>
<select name="is_current">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
<br />

<p>Put in list?</p>
<select name="in_list">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>

Some PHP code governs whether the "yes" or the "no" option in either menu gets the 'default' "selected="selected" showing, based on database information. For instance, in the first menu, if the page deals with a case where the the first "is_current" value is indeed current, then the PHP code will write the default "selected="selected" for "yes":

HTML Code:
<select name="is_current">
<option value=yes" selected="selected">Yes</option>
<option value=no">No</option>
</select>

If the page deals with a case where the value isn't current, the selected="selected" code will be written for the "no" value instead. The same goes for the second select menu. Now, the logic of my situation requires that, if the user selects "Yes" in the first "is_current" drop-down, then only "Yes" should be available to select in the second "in_list" menu. Anyway, I don't know javascript very well, but I found a function that seemed to be able to do this.

Code:
<script type="text/javascript">
(function () {
function updateLevel() {
var limit = Number(this.value);
// find the next select element
var selects = this.form.getElementsByTagName('select');
var select;
for (var i = 0; i < selects.length; i++) {
if (selects[i] === this && selects[i+1]) {
select = selects[i+1];
break; .....

(Apparently the script has to be put or called just before the </body> tag at the end of the page.) Then the select menus are recast as:

HTML Code:
<p>Make current?</p>
<select name="is_current" id="in_list">
<option value="1">Yes</option>
<option value="2">No</option>
</select>
<br />

<p>Put in list?</p>
<select name="in_list">
<option value="1">Yes</option>
<option value="2">No</option>
</select>

Now this appears to work, up to a point. If the user selects "Yes" for the first "is_current" selection, then only "Yes" becomes available for selection in the second "in_list" menu. A posted value of "1" represents "yes", and a value of "2" represents "no". Except, in Firefox, the javascript somehow overrules the default selected="selected" code. That is, the source code in the browser is correct, but the javascript draws it incorrectly.

For instance, say the database/PHP has drawn selected="selected" for the value "yes" in the second menu. Even though I can see that the source code is OK in the browser, the javascript will make the browser show a "No" selection as the initial default. This happens in Firefox, though not in Safari, and I haven't tested other browsers yet. This may be obvious but I'm not sure of javascript.

View 11 Replies View Related

Display Or Hide A Menu Based On The Current Url In A Php Page?

Jul 15, 2009

How do I display or hide a Javascript menu based on the current url in a php page?I want to specify when a java menu appears on a page based on the current url - does anyone have a script for the vars and conditional statements to make this happen - it would be something like this in natural language:

<javascript>
if currenturl = http://jemmakidd.com/categories.php
then displaymenu

[code]....

View 5 Replies View Related

Rollover Image Menu With Current Page Active?

May 27, 2011

I've created a nav bar for this site - [URL].. I'm using javascript to handle the image rollover which is working just fine. However I want to add to this so that the current page will stay with the second or rollover image. How would you suggest I edit or add to my code so it keeps the second image active if it is the active page? In my script file this is what I'm using for an image:

menu1buttonup = new Image();
menu1buttonup.src = "http://web11.3essentials.com/~cp27358/wp-content/themes/origin/images/menu1.jpg" ;
menu1buttondown = new Image() ;
menu1buttondown.src = "http://web11.3essentials.com/~cp27358/wp-content/themes/origin/images/menu1a.jpg" ;

[Code]...

View 1 Replies View Related

Rollover Image Menu With Current Page Active

May 26, 2011

I've created a nav bar for this site - [URL] - I'm using javascript to handle the image rollover which is working just fine. However I want to add to this so that the current page will stay with the second or rollover image. Do I edit or add to my code so it keeps the second image active if it is the active page?

In my script file this is what I'm using for an image:
menu1buttonup = new Image();
menu1buttonup.src = "[URL]" ;
menu1buttondown = new Image() ;
menu1buttondown.src = "[URL]" ;

Followed by....
function buttondown( buttonname ){
if (document.images) {
document[ buttonname ].src = eval( buttonname + "down.src" );
}} function buttonup ( buttonname ){
if (document.images) {
document[ buttonname ].src = eval( buttonname + "up.src" );
}}

And this is what my list items look like:
<a href="<?php echo home_url(); ?>/?page_id=7" onmouseover="buttondown('menu1button')"
onmouseout="buttonup('menu1button')"><img src="<?php bloginfo('template_url'); ?>/images/menu1.jpg" name="menu1button" /></a>

View 1 Replies View Related

JQuery :: Hide A Select Menu On A Certain Selection?

Jun 15, 2011

say i have a select menu "select1" with several options available. And a color "color" menu with several options for color. Inside my "select1" option list i have a "variety" option.With this option selected i no longer need the "color" menu at all. I need a javascript or jquery that will make it so that when "variety" is selected it then hides the "color" select menu.

View 1 Replies View Related

Menu Selection Populates Text Field

May 1, 2009

I have the following code I picked up which tries to fill in a text field with data depending on a user's menu item selection. I place this code in the header:

Code:
var colors = new Array();
colors["apple"] = "red";
colors["grape"] = "purple";
colors["milk"] = "white";
colors["cheese"] = "yellow";
colors["chicken"] = "white";
colors["beef"] = "red"; .....

var groups = new Array();
groups["apple"] = "fruit";
groups["grape"] = "fruit";
groups["milk"] = "diary";
groups["cheese"] = "diary";
groups["chicken"] = "meat";
groups["beef"] = "meat";

function printColorAndGroup(){
var value = document.getElementByName('food').options[document.getElementByName('food').selectedIndex].value;
document.getElementByName('food_group').value = groups[text];
document.getElementByName('food_color').value = colors[text];
}

I then use the following html in the body:
Code:
Food:
<select name="food" onchange="printColorAndGroup()">
<option>apple</option>
<option>grape</option>
<option>milk</option>
<option>cheese</option>
<option>chicken</option>
<option>beef</option>
</select>

Group:
<input type="text" name="food_group">
Color:
<input type="text" name="food_color">
But when I run this nothing happens...
Here's the page [URL]. None of the code above is colored... looks like I'm using the wrong tags here. Which tags should I use to post this stuff correctly?

View 12 Replies View Related

Reservation System - Selection Per DropDown Menu

Mar 4, 2010

I am creating a website for a friend where the user cant can choose what jobs they want to do while a event. There a are more than 300 people involved so I found a script that worked fine but it used some checkboxes, and I want to use drop down menu (one drop down menu for every day of the event). With the checkboxes it worked fine but when I modify the part to insert the dropdown menu and that on my webpage I choose a job and then I send it and it tells me that I haven't selected anything.

This is the PHP code of the webpage:
<?php include("login.php"); ?>
<html>
<head>
<title>Tickets</title>
<style>
* {
font-size: 11px;
font-family: arial;
}
</style>
<script>
function reserveSeats() {
var selectedList = getSelectedList('Reserve Seats');
if (confirm('Do you want to reserve selected seat/s ' + selectedList + '?')) { .....

View 4 Replies View Related

Copy To Clipboard From Selection In Drop Down Menu?

Apr 13, 2011

I enter information in a system based on the # of a report that comes in. So if I see a report that says "333" i want to enter specific information for "333" same with "444" and "555" and so on and so forth.So I want to have a drop down menu for 111, 222, 333, 444 etc.Basically what I need is, if I select the report # from the drop down menu, I want it to copy information from a HIDDEN textbox to the clipboard.

View 4 Replies View Related

On Selection Next Jump Menu Pops Up With More Options

Nov 7, 2011

I need a jump menu, that when an item is selected the next jump menu pops up with more selections to be made. Is this possible?

View 8 Replies View Related

Change Output With Menu Choice Selection

Apr 29, 2009

I have not been able to get this output change when the drop down menu choice changes. I have looked at numerous examples but I can't find one that has this simple output change. What am I missing?

<HTML>

View 3 Replies View Related

Disable Options In One Menu Based On Selection In Another

Feb 22, 2011

I am new to javascript stuff but am looking to develop a form which includes 2 drop down menus but I would like to grey out some options in the second one based on the selection in the first. Basically this is a simplification of what I have:

<select name="orientation" id="orientation">
<option value="OR1">South</option>
<option value="OR2">East</option>
<option value="OR3">North</option>
<option value="OR4">West</option>
</select>

<select name="location" id="location">
<option value="L1">Front Left</option>
<option value="L2">Front Right</option>
<option value="L3">Rear Left</option>
<option value="L4">Rear Right</option>
</select>

What I would like is that if south or east are selected for orientation then I can only select front left or front right but if north or west are selected then only rear left or rear right are available.

View 3 Replies View Related

JQuery :: Superfish Submenus Open Under Current Menu Item

Aug 16, 2011

I'm trying to get Superfish menus working on a new site I'm building, but have run into a problem. I have used the feature of setting a class on the current menu item so that it will be highlighted (highlit?). The trouble is that if the menu item has a submenu this submenu is displaying already opened when you hit the page.

I've set the menus up with the following options:
$('ul#nav').superfish({ hoverClass: 'sfHover',
pathClass: 'current',
pathLevels: 1,
delay: 800,
animation: {opacity:'show'},
speed: 'normal',
autoArrows: true,
dropShadows: true,
disableHI: false
});

This is a snippet of the menu code just for completeness, although it's pretty generic:
<ul id="nav">
<li><a href="index.html">Home</a></li>
<li class="current"><a href="agenda.html">Agenda</a>
<ul>
<li><a href="stream_busdev.html">Business Development Stream</a></li>
<li><a href="stream_techsupp.html">Technical and Support Stream</a></li>
<li><a href="stream_partners.html">Partners Stream</a></li>
<li><a href="stream_paytrain.html">Payroll and Training Stream</a></li>
</ul></li>
... more menu items in here ...
</ul>

I've also attached a screengrab, in case it helps, since the site isn't live yet. So I guess what I'm asking is: is there a way to have the current parent menu item marked as current without it automatically opening the submenu?

View 5 Replies View Related

Program Menu Items To Stay Active / When On Current Page

Nov 17, 2010

It was originally an imaged based menu, but they wanted it all changed to css/html. I used quickmenu and it used JS to produce the arrows at the top of each menu item.I'm trying to program the menu items to stay active when on the current page. At first, it looks correct, but if you hover back over the menu, it changes back to the inactive state.

View 1 Replies View Related

Script Which Adds A Class To The Current Menu Item Selected

Aug 6, 2011

I have a small script which adds a class to the current menu item selected.

Currently on the page load (this menu is within one page) the first menu item which is loaded does not have this .mywork_active class. Its not until you click it or another item that the class is added.

What would I need to do make the script add this class to the first item on load.

The menu looks like so:

View 1 Replies View Related

Pass Values To Selection Menu In Modal Window

Jul 23, 2005

I'm trying to figure out how to tackle this problem: I have an XML
table with a cool grid in which users can select a table row. When
they right-click on a cell, they get a modal dialog window with a
selection menu. What I want this thing to do is display the different
values in the row, so that users can make a selection: eventually I
want it to be a filter option > in the selection menu, users can
select the value on which they want the whole table to be filtered.
However, I'm seriously lacking js-skills so I don't know how I should
pass the values from the table row to the selection menu. Code:

View 3 Replies View Related







Copyrights 2005-15 www.BigResource.com, All rights reserved