|
JavaScript - Submenu Stay Open On Menu Click
Ok, first let me explain what I try to do.
I have a menu with some items containing a submenu. The submenu's should open when a parent is clicked and contains submenu's, and when traveling to another page (from the item clicked, for example a parent of submenu item), the submenu should remain active and visible. When I click on a parent (at the moment the hrefs contain no links just #), the submenu opens. But when I click another main item, the submenu of the previous parent remain visible, and the submenu of the parent just clicked is also visible, while I only want the submenu of the parent clicked to be visible or when parent with no submenu the submenu should be invisible. So, here is the code I have so far: Code: <div id="topnav">
<ul>
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="#">Over Meves</a>
<ul class="submenu">
<li><a href="#" class="suba">Historie</a></li>
<li><a href="#" class="suba">Onze mensen</a></li>
<li><a href="#" class="suba">Werkzijze</a></li>
</ul>
</li>
<li>
<a href="vervolg3.html">Disciplines</a>
<ul class="submenu">
<li><a href="vervolg.html" class="suba">Klimaatbeheersing</a></li>
<li><a href="#" class="suba">Elektrotechniek</a></li>
<li><a href="#" class="suba">Sanitaire techniek</a></li>
<li><a href="#" class="suba">Energiebesparingstechniek</a></li>
<li><a href="#" class="suba">Bouwfysica en geluid</a></li>
<li><a href="#" class="suba">Diensten energiebesparing</a></li>
</ul>
</li>
<li>
<a href="#">Expertise</a>
<ul class="submenu">
<li><a href="#" class="suba">Woningbouw & Utiliteit</a></li>
<li><a href="#" class="suba">Zorg & Welzijn</a></li>
<li><a href="#" class="suba">Milieu & Energie</a></li>
<li><a href="#" class="suba">Beheer & Onderhoud</a></li>
<li><a href="#" class="suba">EPA & EPC</a></li>
<li><a href="#" class="suba">Legionella beheersing</a></li>
</ul>
</li>
<li>
<a href="#">Contact</a>
<ul class="submenu">
<li><a href="#" class="suba">Adres & route</a></li>
<li><a href="#" class="suba">Werken bij</a></li>
</ul>
</li>
</ul>
</div>
The javascript: Code: <script type="text/javascript">
var ddmenuitem = 0;
function jsddm_open()
{ jsddm_close();
ddmenuitem = $(this).find('ul.submenu').css('display', 'block');
}
function jsddm_close()
{
if(ddmenuitem) ddmenuitem.css('display', 'none');
}
$(document).ready(function()
{
$('#topnav > ul > li').bind('click', jsddm_open)
$('#topnav ul li a.suba').click(function(e){
if ($(this).attr('class') != 'active'){
$('#topnav ul li a.suba').removeClass('active');
$(this).addClass('active');
}
});
$("ul.submenu > li > a").each(function () {
var currentURL = document.location.href;
var thisURL = $(this).attr("href");
if (currentURL.indexOf(thisURL) != -1) {
$(this).parents("ul.submenu").css('display', 'block');
}
});
$('a').each(function () {
var currentURL = document.location.href;
var thisURL = $(this).attr('href');
if (currentURL = thisURL) {
$(this).parents('ul.submenu').css('display', 'block');
}
// else {
// $(this).parents('ul.submenu').css('display', 'none');
// }
});
});
</script>
And the css: Code: #topnav ul
{
list-style: none;
padding: 0;
margin: 0;
}
#topnav ul li
{
float: left;
margin: 0;
padding: 0;
}
#topnav ul li a
{
padding: 5px 15px;
color: #00537F;
text-decoration: none;
display: block;
font-weight: bold;
}
#topnav ul li a:link
{
color: #FFF;
text-decoration: none;
}
#topnav ul li a:visited
{
color: #FFF;
text-decoration: none;
}
#topnav ul li a:hover
{
color: #FFF;
text-decoration: underline;
}
#topnav ul li a.active
{
text-decoration: underline;
color: #FFF;
}
/*#topnav ul li:hover .submenu
{
display:block;
}*/
#topnav ul li ul.submenu
{
float: left;
padding: 4px 0;
position: absolute;
left: 0;
top: 24px;
display: none;
background: #e0e0e0;
color: #00537F;
}
#topnav ul li ul.submenu a
{
display: inline;
color: #00537F;
padding: 4px 8px;
}
#topnav ul li ul.submenu li
{
border-right-width: 1px;
border-right-style: solid;
border-right-color: #00537F;
}
#topnav ul li ul.submenu li:last-child
{
border-right-style: none;
}
#topnav ul li ul.submenu a:link
{
color: #00537F;
}
#topnav ul li ul.submenu a:visited
{
color: #00537F;
}
#topnav ul li ul.submenu a:hover
{
text-decoration: underline;
color: #00537F;
}
#topnav ul li ul.submenu li.active
{
text-decoration: underline;
color: #00537F;
}
#topnav ul li ul.submenu a.active
{
text-decoration: underline;
color: #00537F;
}
Hope I explained it clear. Thanks for any help. Similar TutorialsI have a map with hotspots, and when you hover over a hot spot, a hidden DIV appears. Thanks to my favorite coding forum, this one, I was able to successfully accomplish this first bit of code. The only problem I'm having now is getting the DIV to remain open while I move my mouse from the hotspot to the DIV. As soon as I move my mouse away from the hotspot, the DIV disappears. I need to put links in the DIVs, and users will need to be able to move their mouse away from the hotspot to click on the link, but currently can't. I experimented with setTimeout, but didn't get too far. If anyone could help me, I'd appreciate it. I really need to get this working. Code: <img src="images/map.png" alt="" usemap="#map"/> <map id="map" name="map"> <area shape="rect" coords="211,84,225,97" href="#" alt=""/> <area shape="rect" coords="226,78,240,92" href="#" alt=""/> <area shape="rect" coords="353,66,376,89" href="#" alt=""/> </map> <div id="hidden"> <div class="location" style="left:25px; top:-290px;"> <img src="images/location01.jpg" alt=""/> </div> <div class="location" style="left:25px; top:-275px;"> <img src="images/location02.jpg" alt=""/> </div> <div class="location" style="left:275px; top:-285px;"> <img src="images/location03.jpg" alt=""/> </div> </div> <!-- #hidden --> Code: function show(which) {
var area = document.getElementById("map").getElementsByTagName("area");
var locations = document.getElementById("hidden").getElementsByTagName("div");
for (var a=0; a < area.length; ++a) {
if(area[a] == which) locations[a].style.display="block";
}
}
function hide() {
var locations = document.getElementById("hidden").getElementsByTagName("div");
for (var d=0; d < locations.length; ++d) {
locations[d].style.display="none";
}
}
function init() {
var area = document.getElementById("map").getElementsByTagName("area");
for (var a=0; a < area.length; ++a) {
area[a].onmouseover = function() { show(this); }
area[a].onmouseout = hide;
}
}
window.onload = init;
Hi, I mainly do PHP/MySQL coding, but I wanted to add this Javascript Accordion Menu to my site: Javascript And CSS Tutorial - Accordion Menus | Switch on the Code It works fine, but I was wondering if there was a simple way to modify the code so that the currently open menu stays open from page to page instead of closing upon each page reload? Thanks for the help, --Anamaniac Hi, I used this on-click changeable background code for my website: http://www.codingforums.com/showthread.php?t=136821 And now I have the same question as the original poster: is there any way to get it so that the chosen background stays put even if the page is refreshed or navigated away from? Or is it not possible because all my pages are separate files? website is: http://mintymix.com/ I hope it's ok to post here, the other thread is from 2008. Thanks for reading =) *edit* Ah, I'm kind of figuring that javascript doesn't work like that. If it won't work, is there any other type of coding I may use to achieve this? Please where do I need to look to find such a script? I’ve been looking for 3 days now and I can’t find something that will have all of those. I need a floating horizontal dropdown menu, and submenu with mouse over description of the site. EX: menu 1 On the road ------- --------Restaurant .... .... ... .... ... .... .... .... ... .Mama house (home made cooking) .... .... ... .... ... .... .... .... ... .All fast food (only fast food get carb) .... .... ... .... ... Motel .... .... ... .... ... .... .... .... ... .No fleas motel (bugs free motel) .... .... ... .... ... .... .... .... ... .Pet free ( no pet allowed) Car rental Well I am sure you get the ideal. Where do I need to look or what would be the kind of scrip for that ? Java, html, css…. Please tell me to find the proper code for what I need. thanks I have a navigation menu with one level of submenu, and the code that I have allowes me when I click on the parent, the submenu opens (and remains open). When I click on a subitem, the page travels to that url, but the code that I have compares the document.location to the href of the menu items and display the submenu. Now the active page is hightlighted, but the parent isn't (if the active page is a submenu). So what I want is that when a subitem is active, also it's parent should be active, for example: main_item_1 main_item_2 --sub_item_1 --sub_item_2 In this case when sub_item_2 is active, also main_item_2 should be. I have tried to use parent(), parents(), but none worked the right way, or at least for me the way I want it. So here is the code I use: Code: $('#topnav ul li ul.submenu li a').click(function(e){
if ($(this).attr('class') != 'active'){
$('#topnav ul li a').removeClass('active');
$(this).addClass('active');
}
});
$('a').filter(function(){
return this.href === document.location.href;
}).addClass('active')
$("ul.submenu > li > a").each(function () {
var currentURL = decodeURIComponent(document.location.href);
var thisURL = $(this).attr("href");
if (currentURL.indexOf(thisURL) != -1) {
$(this).parents("ul.submenu").css('display', 'block');
}
});
$('#topnav > ul > li > a').each(function(){
var currURL = decodeURIComponent(document.location.href);
var myHref= $(this).attr('href');
if (currURL.match(myHref)) {
$(this).addClass('active');
//$('a', $('.active').parents("li:last")).addClass('active');
$(this).parent().find("ul.submenu").css('display', 'block');
}
});
The middle group code is for the subitem, so the code to make the parent also active should be there I think. When I add the following line to the middle group (after the $(this).parents part): Code: $(this).parents("#topnav ul li").addClass('parent');
I am able to make the background of the top parent different, because the parent class changes the background color, but should also change the color of the menu text (parent), but .... not only the most top li has the parent class, also the li which is around the active subitem, which should only be the parent. Please help. Hello How to Make a Html Form Shows Up when Visitor Click a Link .. I have seen Site where you want to add Message u click Link then the Form under the Link Shows Up .. it stays Hidden unless Visitor Click Link 'Send Message' . It seems done by Java but How .. Hi all, I am looking for this javascript, script that when I click a specific link 1. Opens a new window 2. Specifies a specitic window title 3. Load an image on it (there will be no text but only an image shown) Could you please help me understand how I do that? Regards Alex Hi I wrote following code for the purpose to single right click to open new window, while left click would open another window. It works for IE but does not work for Firefox. Please help. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en-US|zh-Hans|zh-Hant"> <head> <title>Javascript Question</title> <META NAME="LANGUAGE" CONTENT="en"> <META NAME="DOCUMENTCOUNTRYCODE" CONTENT="us"> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=GB18030"> <script language='Javascript' type='text/javascript'> var rightClick = false; window.document.oncontextmenu = new Function("return false"); window.document.onmouseup = mouseUp; function mouseUp(e) { if (!e) var e = window.event; if (e.which) rightClick = (e.which == 3) else if (e.button) rightClick = (e.button == 2); if (rightClick) window.open('http://www.yahoo.com/'); } </script> </head> <body> <a href="#" onclick="window.open('http://www.google.com/')" onmouseup>Open New Window</a> </body> </html> Hello there. I'm using Joomla 1.5 and VirtueMart for my e-shop. I've also installed a virtuemart template which loads mootools. Well in my virtuemart product detail pages, if you click the main image to make it enlarged using IE8 it will not open and return a JS error instead (found it using Firebug): http://goo.gl/6lQCV Code: Message: 'closeButton' is null or not an object Line: 21 Char: 63 Code: 0 URI: http://www.xxxxx.xxx/media/system/js/mootools.js I'm not sure but I think that if I fix the JS errors on these pages the problem will be solved and the images will open normally. Note that on all other browsers it works fine (Firefox, Chrome, Safari, IE9). The page returns some other errors too but they're the whole time there. I think there's a conflict caused by all the JS libraries loaded by my Plugins (System - RokBox & YOOeffects), Joomla template, VirtueMart & VirtueMart template (jquery and mootools are both loaded). Thanks in advance Hi Im trying to make a dropdown menu like IGN has on his site with the following javascript code. The only problem however is I can't seem to hide the menu when a user clicks outside the menu. This is a bit frustrated because when a user wants to hide the menu again the need to reclick the menu header. Is there anyway I could solve this problem? Also a explanation about the code would be helpfull im not used to work with javascript. Also this is the code I have so far which works to onclick hide and show the menu. javascript: PHP Code: function toggle(id) { var el = document.getElementById(id); if ( el.style.display != 'none' ) { el.style.display = 'none'; } else { el.style.display = ''; } HTML: PHP Code: <a href="#top" onclick="toggle('view_user-options');";>Panel</a> <div id="view_user-options" style="display:none;"> <div class="nav_option"><a href="">my test</a></div> </div> Also if anyone knows how to do it plz combine it with my code so it works. I always get in trouble with javascript when combining two codes in one. Note: plz don't give me solution with tons of code I just want a verry simple solution. Hello all, I built a javascript accordian menu that works very well. However, after a menu is opened, I have to click on another menu to close the current one. I would like to be able to toggle opening and closing of a menu without having to interact with other menus. I appreciate any help! Here is the Javascript code: Code: var expandFirstItemAutomatically = false; // Expand first menu item automatically ?
var initMenuIdToExpand = false; // Id of menu item that should be initially expanded. the id is defined in the <li> tag.
var expandMenuItemByUrl = true; // Menu will automatically expand by url - i.e. if the href of the menu item is in the current location, it will expand
var initialMenuItemAlwaysExpanded = true;
var dhtmlgoodies_slmenuObj;
var divToScroll = false;
var ulToScroll = false;
var divCounter = 1;
var otherDivsToScroll = new Array();
var divToHide = false;
var parentDivToHide = new Array();
var ulToHide = false;
var offsetOpera = 0;
if(navigator.userAgent.indexOf('Opera')>=0)offsetOpera=1;
var slideMenuHeightOfCurrentBox = 0;
var objectsToExpand = new Array();
var initExpandIndex = 0;
var alwaysExpanedItems = new Array();
var dg_activeItem = null;
function popMenusToShow()
{
var obj = divToScroll;
var endArray = new Array();
while(obj && obj.tagName!='BODY'){
if(obj.tagName=='DIV' && obj.id.indexOf('slideDiv')>=0){
var objFound = -1;
for(var no=0;no<otherDivsToScroll.length;no++){
if(otherDivsToScroll[no]==obj){
objFound = no;
}
}
if(objFound>=0){
otherDivsToScroll.splice(objFound,1);
}
}
obj = obj.parentNode;
}
}
function showSubMenu(e,inputObj)
{
if(this && this.tagName)inputObj = this.parentNode;
if(inputObj && inputObj.tagName=='LI'){
divToScroll = inputObj.getElementsByTagName('DIV')[0];
for(var no=0;no<otherDivsToScroll.length;no++){
if(otherDivsToScroll[no]==divToScroll)return;
}
}
hidingInProcess = false;
if(otherDivsToScroll.length>0){
if(divToScroll){
if(otherDivsToScroll.length>0){
popMenusToShow();
}
if(otherDivsToScroll.length>0){
autoHideMenus();
hidingInProcess = true;
}
}
}
if(divToScroll && !hidingInProcess){
divToScroll.style.display='';
otherDivsToScroll.length = 0;
otherDivToScroll = divToScroll.parentNode;
otherDivsToScroll.push(divToScroll);
while(otherDivToScroll && otherDivToScroll.tagName!='BODY'){
if(otherDivToScroll.tagName=='DIV' && otherDivToScroll.id.indexOf('slideDiv')>=0){
otherDivsToScroll.push(otherDivToScroll);
}
otherDivToScroll = otherDivToScroll.parentNode;
}
ulToScroll = divToScroll.getElementsByTagName('UL')[0];
if(divToScroll.style.height.replace('px','')/1<=1)scrollDownSub();
}
if(e || inputObj) {
if(dg_activeItem) {
dg_activeItem.className = dg_activeItem.className.replace('coursefinder_activeItem','');
}
var aTags = inputObj.getElementsByTagName('A');
if(aTags.length>0) {
aTags[0].className = aTags[0].className + ' coursefinder_activeItem';
dg_activeItem = aTags[0];
if(aTags[0].href.indexOf('#') == -1 || aTags[0].href.indexOf('#') < aTags[0].href.length-1){
return true;
}
}
}
return false;
}
function autoHideMenus()
{
if(otherDivsToScroll.length>0){
divToHide = otherDivsToScroll[otherDivsToScroll.length-1];
parentDivToHide.length=0;
var obj = divToHide.parentNode.parentNode.parentNode;
while(obj && obj.tagName=='DIV'){
if(obj.id.indexOf('slideDiv')>=0)parentDivToHide.push(obj);
obj = obj.parentNode.parentNode.parentNode;
}
var tmpHeight = (divToHide.style.height.replace('px','')/1 - slideMenuHeightOfCurrentBox);
if(tmpHeight<0)tmpHeight=0;
if(slideMenuHeightOfCurrentBox)divToHide.style.height = tmpHeight + 'px';
ulToHide = divToHide.getElementsByTagName('UL')[0];
slideMenuHeightOfCurrentBox = ulToHide.offsetHeight;
scrollUpMenu();
}else{
slideMenuHeightOfCurrentBox = 0;
showSubMenu();
}
}
function scrollUpMenu()
{
var height = divToHide.offsetHeight;
height-=15;
if(height<0)height=0;
divToHide.style.height = height + 'px';
for(var no=0;no<parentDivToHide.length;no++){
parentDivToHide[no].style.height = parentDivToHide[no].getElementsByTagName('UL')[0].offsetHeight + 'px';
}
if(height>0){
setTimeout('scrollUpMenu()',0);
}else{
divToHide.style.display='none';
otherDivsToScroll.length = otherDivsToScroll.length-1;
autoHideMenus();
}
}
function scrollDownSub()
{
if(divToScroll){
var height = divToScroll.offsetHeight/1;
var offsetMove =Math.min(15,(ulToScroll.offsetHeight - height));
height = height +offsetMove ;
divToScroll.style.height = height + 'px';
for(var no=1;no<otherDivsToScroll.length;no++){
var tmpHeight = otherDivsToScroll[no].offsetHeight/1 + offsetMove;
otherDivsToScroll[no].style.height = tmpHeight + 'px';
}
if(height<ulToScroll.offsetHeight)setTimeout('scrollDownSub()',0); else {
divToScroll = false;
ulToScroll = false;
if(objectsToExpand.length>0 && initExpandIndex<(objectsToExpand.length-1)){
initExpandIndex++;
showSubMenu(false,objectsToExpand[initExpandIndex]);
}
}
}
}
function initSubItems(inputObj,currentDepth)
{
divCounter++;
var div = document.createElement('DIV'); // Creating new div
div.style.overflow = 'hidden';
div.style.position = 'relative';
div.style.display='none';
div.style.height = '1px';
div.id = 'slideDiv' + divCounter;
div.className = 'slideMenuDiv' + currentDepth;
inputObj.parentNode.appendChild(div); // Appending DIV as child element of <LI> that is parent of input <UL>
div.appendChild(inputObj); // Appending <UL> to the div
var menuItem = inputObj.getElementsByTagName('LI')[0];
while(menuItem){
if(menuItem.tagName=='LI'){
var aTag = menuItem.getElementsByTagName('A')[0];
aTag.className='slMenuItem_depth'+currentDepth;
var subUl = menuItem.getElementsByTagName('UL');
if(subUl.length>0){
initSubItems(subUl[0],currentDepth+1);
}
aTag.onclick = showSubMenu;
}
menuItem = menuItem.nextSibling;
}
}
function initSlideDownMenu()
{
dhtmlgoodies_slmenuObj = document.getElementById('coursefinder');
dhtmlgoodies_slmenuObj.style.visibility='visible';
var mainUl = dhtmlgoodies_slmenuObj.getElementsByTagName('UL')[0];
var mainMenuItem = mainUl.getElementsByTagName('LI')[0];
mainItemCounter = 1;
while(mainMenuItem){
if(mainMenuItem.tagName=='LI'){
var aTag = mainMenuItem.getElementsByTagName('A')[0];
aTag.className='slMenuItem_depth1';
var subUl = mainMenuItem.getElementsByTagName('UL');
if(subUl.length>0){
mainMenuItem.id = 'mainMenuItem' + mainItemCounter;
initSubItems(subUl[0],2);
aTag.onclick = showSubMenu;
mainItemCounter++;
}
}
mainMenuItem = mainMenuItem.nextSibling;
}
if(location.search.indexOf('mainMenuItemToSlide')>=0){
var items = location.search.split('&');
for(var no=0;no<items.length;no++){
if(items[no].indexOf('mainMenuItemToSlide')>=0){
values = items[no].split('=');
showSubMenu(false,document.getElementById('mainMenuItem' + values[1]));
initMenuIdToExpand = false;
}
}
}
else if(expandFirstItemAutomatically>0 ){
if(document.getElementById('mainMenuItem' + expandFirstItemAutomatically)){
showSubMenu(false,document.getElementById('mainMenuItem' + expandFirstItemAutomatically));
initMenuIdToExpand = false;
}
}
if(aTag.className.indexOf("active") == -1)
{
aTag.onclick = showSubMenu;
}
else
{
aTag.onclick = scrollUpMenu;
}
mainItemCounter++;
}
if(expandMenuItemByUrl)
{
var aTags = dhtmlgoodies_slmenuObj.getElementsByTagName('A');
var currentLocation = location.pathname;
for(var no=0;no<aTags.length;no++){
var hrefToCheckOn = aTags[no].href;
if(hrefToCheckOn.indexOf(currentLocation)>=0 && hrefToCheckOn.indexOf('#')<hrefToCheckOn.length-1){
aTags[no].className = aTags[no].className + ' coursefinder_activeList';
initMenuIdToExpand = false;
var obj = aTags[no].parentNode;
while(obj && obj.id!='coursefinder'){
if(obj.tagName=='LI'){
var subUl = obj.getElementsByTagName('UL');
if(initialMenuItemAlwaysExpanded)alwaysExpanedItems[obj.parentNode] = true;
if(subUl.length>0){
objectsToExpand.unshift(obj);
}
}
obj = obj.parentNode;
}
showSubMenu(false,objectsToExpand[0]);
break;
}
}
}
if(initMenuIdToExpand)
{
objectsToExpand = new Array();
var obj = document.getElementById(initMenuIdToExpand)
while(obj && obj.id!='slidedown_menu'){
if(obj.tagName=='LI'){
var subUl = obj.getElementsByTagName('UL');
if(initialMenuItemAlwaysExpanded)alwaysExpanedItems[obj.parentNode] = true;
if(subUl.length>0){
objectsToExpand.unshift(obj);
}
}
obj = obj.parentNode;
}
showSubMenu(false,objectsToExpand[0]);
}
}
Greetings, In a vertical expanding menu, I'm looking to change where the user clicks in order to expand the menu to the submenu. In short I want the user to be able to click on the parent menu item text and have that action expose the submenu children text items. Please see attached .png for visual. At present, the user must click on an arrow icon next to the parent menu item text to expand, but I'd also like the parent menu item to expand showing its children when clicked. All the parent menu item does right now is call in the linked page; it does not expand the menu. I've attached the .js in the 3 attached .txt files. Please let me know if there's anything else I should add/send. As far as I can tell the name of the arrow being used to expand menu can be seen in this html... <td class="wbtTdMenuItem"> <a id="menuitem1" class="wbtMenuItem wbtMenuItemSelected" href="javascript:void(0)" title="Selected Chapter: Welcome">Welcome</a> </td> <td class="wbtTdArrow" style="padding: 2px; border: 0px none;"> <a class="wbtArrowLink" title="Expand Welcome submenu" href="javascript:void(0)"> <img class="wbtArrowImg" src="images/collapse.png" alt="Expand Welcome submenu" style="width: 5px; height: 9px;"> </a> </td> Here's the html containing the name of the item I'd like to use in addition to the arrow... <td class="wbtTdSelected"> <img src="images/spacer.gif" style="width: 0px; height: 0px;" alt="Selected menu item"> </td> <td class="wbtTdMenuItem"> <a id="menuitem1" class="wbtMenuItem wbtMenuItemSelected" href="javascript:void(0)" title="Selected Chapter: Welcome">Welcome</a> </td> I would like to create a 2-level menu similar to the one use in: http://www.pagina12.com.ar/diario/principal/index.html It is done with CSS? Thanks! basically i have a form with lots of fields.. drop down boxes and textarea's and standard input text.. now what i need is a way to change all of these fields with a fetch button. i can get the value for the fields from the perl script on my server side. the form basicslly sends lots of fields to my perl script and saves each field of data into seperate text docs. now my customer would like to retrieve the data back to the form to change aspects of it to be resubmitted . i am struggling with the simplist of codes to set the value of the fields from a javascript variable any ideas please. I am using a javascript audio player on a webpage that has an option to download the track by right clicking on a link called 'mp3' at the end of each track in the playlist. When the user right clicks on the track name however all that can be downloaded is an html file. I am trying to find a way of changing this so that right clicking on the track and choosing the 'save link as' option will download the mp3. I have been led to believe that I can use a script such as this one: http://abeautifulsite.net/blog/2008/...-click-plugin/ to generate a custom content menu for downloading tracks, or somehow downloading the mp3, but I am at a loss at to how to do this. Here's a screenshot of a track in the playlist: And here is the source: Code: {name:"foster manganyi na tintsumi ta tilo - zion (ndzi teke riendzo no. 1) <span style=\"color:#BDBDA1; font-size:12px;\">[from nick]</span>",mp3:"./songs//nick/zion.mp3"}
I would be grateful for any advice on getting this working, Thanks, Nick Hello everyone, For some reason this jQuery/JavaScript code will not show my sub menus in my navigation bar. Here is the JavaScript: Code: $(function(){
var config = {
sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)
interval: 200, // number = milliseconds for onMouseOver polling interval
over: doOpen, // function = onMouseOver callback (REQUIRED)
timeout: 200, // number = milliseconds delay before onMouseOut
out: doClose // function = onMouseOut callback (REQUIRED)
};
function doOpen() {
$(this).addClass("hover");
$('ul:first',this).css('visibility', 'visible');
}
function doClose() {
$(this).removeClass("hover");
$('ul:first',this).css('visibility', 'hidden');
}
$("ul.pMenu li").hoverIntent(config);
$("ul.pMenu li ul li:has(ul)").find("a:first").append(" » ");
});
My css that corresponds to this is: Code: .pMenu{
margin:0;
padding:0;
}
#health{
width:10%;
padding-left:14%;
padding-right:2%;
}
#insurance{
width:13%;
padding-right:2%;
}
#shopping{
width:12%;
padding-right:2%;
}
#dating{
width:10%;
padding-right:2%;
}
#education{
width:13%;
}
ul.pMenu li{
float:left;
list-style:none;
}
ul.pMenu li a{
display:block;
color:#FFF;
background:#900;
border:3px ridge #C00;
text-decoration:none;
text-shadow:1px 1px 1px #000;
white-space:nowrap;
padding-left:2%;
padding-right:2%;
padding-top:10px;
padding-bottom:10px;
}
ul.pMenu li a:hover{
background:#FF0;
border:3px ridge #FF6;
color:#FF0;
}
ul.pMenu li ul{
margin:0;
padding:0;
position:absolute;
visibility:hidden;
}
ul.pMenu li ul li{
float:none;
display:inline;
}
ul.pMenu li ul li a{
width:auto;
background:#CCC;
border:1% outset #999;
font-size:95%;
padding:2%;
padding-left:4%;
padding-right:10%;
text-shadow:1px 1px 1px #000;
color:#000;
}
ul.pMenu li ul li a:hover{
background:#999;
border:1% inset #666;
text-decoration:blink;
}
ul.pMenu li ul li ul{
margin:0;
padding:0;
position:absolute;
visibility:hidden;
}
/*IE 6 & 7 need inline block feature*/
ul.pMenu ul li a{
border-right:none;
width:100%;
display:inline-block;
}
ul.pMenu li ul li ul li{
float:none;
display:inline;
}
ul.pMenu li ul li ul li a{
width:auto;
background:#999;
border:1% outset #666;
text-shadow:1px 1px 1px #000;
color:#FFF;
}
ul.pMenu li ul li ul li a:hover{
background:#999;
border:1% inset #666;
text-decoration:blink;
}
ul.pMenu li ul li ul li ul{
margin:0;
padding:0;
position:absolute;
visibility:hidden;
}
ul.pMenu li ul li ul li{
float:none;
display:inline;
}
ul.pMenu li ul li ul li a{
width:auto;
background:#999;
border:1% outset #666;
text-shadow:1px 1px 1px #000;
color:#FFF;
}
ul.pMenu li ul li ul li a:hover{
background:#999;
border:1% inset #666;
text-decoration:blink;
}
I have a menu that lists all the categories and sub categories, when someone clicks a main category it opens up the sub cats for it. if someone clicks one of the sub cats the page open up to show all items in that category. But what I would like to find out is how do I get the menu to open up as it was so it shows the category and sub category open? Code: <!-- start show cat list -->
<br><div style="font-weight: bold; font-size: 0.825em; padding: 0em 0em 0.3125em;">Select items by category</div>
<ul class="catMenuItem">
<li><a style="background-image: url("images/triangle_down.gif");" href="#" class="titleTriangle"><span>cat1</span></a></li>
<li style="display: block;" class="catSubMenu">
<a href="?cat=2">sub 1-2</a> (0)<br>
<a href="?cat=7">sub 1-3</a> (2)<br>
<a href="?cat=8">sub 1-4</a> (0)<br>
<a href="?cat=9">sub 1-5</a> (0)<br>
<br>
</li>
</ul>
<ul class="catMenuItem">
<li><a href="#" class="titleTriangle"><span>cat2</span></a></li>
<li style="display: none;" class="catSubMenu">
<a href="?cat=3">sub 2-1</a> (0)<br>
<a href="?cat=4">sub 2-2</a> (0)<br>
<a href="?cat=5">sub 2-3</a> (0)<br>
<a href="?cat=6">sub 2-4</a> (1)<br>
<br>
</li>
</ul>
<ul class="catMenuItem">
<li><a href="#" class="titleTriangle"><span>cat3</span></a></li>
<li style="display: none;" class="catSubMenu">
<br>
</li>
</ul>
<ul class="catMenuItem">
<li><a href="#" class="titleTriangle"><span>cat4</span></a></li>
<li style="display: none;" class="catSubMenu">
<br>
</li>
</ul>
<ul class="catMenuItem">
<li><a href="#" class="titleTriangle"><span>cat5</span></a></li>
<li style="display: none;" class="catSubMenu">
<br>
</li>
</ul>
<script type="text/javascript"><!--
/* Categories Menu START */
var prevCat;
function menu(newCat) {
var mens;
var anchors;
if (prevCat) {
mens = prevCat.parentNode.getElementsByTagName('li')[0];
anchors = mens.getElementsByTagName('a')[0].style.backgroundImage='url(images/triangle_right.gif)';
prevCat.style.display = 'none';
}
if (newCat != prevCat) {
mens = newCat.parentNode.getElementsByTagName('li')[0];
anchors = mens.getElementsByTagName('a')[0].style.backgroundImage='url(images/triangle_down.gif)';
newCat.style.display = 'block';
prevCat = newCat;
} else {
prevCat = null;
}
}
onload = function() {
var menus = document.getElementsByTagName('ul');
for (var a=0,x=menus.length; a<x; a++) {
if (menus[a].className === 'catMenuItem') {
menus[a].getElementsByTagName('li')[0].getElementsByTagName('a')[0].onclick = function() {
menu(this.parentNode.parentNode.getElementsByTagName('li')[1]);
}
menus[a].getElementsByTagName('li')[1].style.display = 'none';
}
}
}
/* Categories Menu END */
--></script>
<!-- end show cat list -->
Hello all, Essentially what I am trying to get without much success on the issue is this: I want an icon in my template that, when you click on that certain icon (image), a drop down menu appears. You know when you click the file option in your browser's toolbar, and a drop down menu appears? It can be just like that, but instead of save as and open, links will be there to places within our intranet opened in a new window. This has to work for IEX 7+ because that's all our company decides to use. I tried to submit a chang erequest for them to move to a better CSS/Javascript supportive browser such as Opera, Firefox, Google Chrome... but they're way too fixed on IEX for some odd reason. I am obliged for any help on this. *edit* colors dont matter. It can be the default colors used in a basic drop down menu. I figure javascript would have more options though. Hello, I've tried various things I've found online but cannot seem to get the right code to open the links in a drop down menu in a new window. Code: <form id="quicklinks" name="quicklinks" action="">
<select name="quicklinkitem" onchange="openWin(quicklinkitem.value)">
<option value="/lib/board.html">Select a Date</option>
<option value="/lib/boardreports/03-08-12.pdf">March 8, 2012</option>
<option value="/lib/boardreports/02-09-12.pdf">February 9, 2012</option> </select>
</form>
I appreciate any help. Elbee Using onclick=window.open function in js to open a pdf file link in a new popup window. Works fine to display the file onscreen, but not if the user wants to save the file client-side to their computer. The right-hand-button context menu for the mouse will allow the user to download, but the file saved will be a html dump file for the webpage and the name of the file will be that for the webpage. Of course I can use the easy <a href> method for download links and the mouse context menu options will be as expected, but I can only use target="-blank" or target="_self" . I need a popup window to open. Could use : oncontextmenu="alert('Left click the link to open, and then SAVE from with the pdf viewer') to advise users how to save the file, and could use "javascript: void(0)" to eliminate most mouse context menu options, so the user won't bother try. So how can I get a link to a file which can be viewed in a popup window and downloaded using mouse right-hand context menu? Any advice massively appreciated! |
|||||||