The amount of information I have in the footer for most of my pages has, over time, grown enough that the footer now takes up too much space vertically. Rather than completely removing the information, I would like to strip down each section of it into a single, descriptive word, and have more info about each section shown when you click on the specific word.
Essentially, it would be a mini-menu with extended information available for each menu item. I have seen show/hide javascripts that do similar things, but nothing precisely along the lines of what I am looking for, and I haven't been able to tweak any of the existing ones as I am pretty clueless about javascript beyond very basic modifications.
The main problem for me has been how to accomplish the layout I'd like for the footer:
Section1 ~ Section 2 ~ Section 3 ~ Section 4
Extended Text for Section #
The show/hide scripts in menu form that I have seen all show the extended text under each menu item, rather than having a designated area for the it regardless of which menu item was selected. But perhaps there's something out there that is more along the lines of what I need?
My problem is on this page using IE 7 & 8:[URL].. If you click the tabs, you'll see that the footer doesn't adjust accordingly. Only in IE. Works fine in Firefox (Mac & PC) and Safari Mac.
I just found out I can't post a link. But it's a tinyurl dot com with /m8ajyp If you click the tabs, you'll see that the footer doesn't adjust accordingly. Only in IE. Works fine in Firefox (Mac & PC) and Safari Mac.Here's the javascript:
the menus page /menus (which should be identical code and structure as the other page) it looks like the footer adjusts on the FIRST click of a different tab. But then it doesn't adjust again. On /special-events the footer doesn't adjust even the first time.
I make a menu and in one of it's item I want to show a sub menu under it when the user mouse is over it, I use onmouseover and onmouseout for this and I make the visibility of the sub menu hidden and when the mouse become over the item it's visibility become visible. the problem I faced is that when the mouse become out of the item of the main menu the sub menu disappear and I couldn't click on or over it.
I am currently in a Javascript class and it is completely confusing me. I have a website that I am trying to make the tabs at the top all work. I already did the setTab function but I am not even sure if that is right. I have found lots of other websites that have good advice but they want me to do things way different than the book. Basically they are leaning me away from Javascript. The whole point of the class. I am including the original files as well as what I have so far. The page-1 is most of assignment and the Homework Description is the part that was cut off.
The below is a menu, which is hidden until clicked, and can be hidden by clicking it again.
<!-- This goes in the HEAD of the html file --> <script language="javascript"> <!-- function showIt() { if (document.layers) {document.layers["layer1"].visibility='hide'} else {document.all["layer1"].style.visibility='hidden'} } function hideIt() { if (document.layers) {document.layers["layer1"].visibility='show'} else {document.all["layer1"].style.visibility='visible'} } // --> </script>
<span id="layer" style="position:absolute; top:17; left:20; width:250; height:90; visibility:show"> <script> <!-- author: bfsog@hotmail.com use it as you wish //--> <!-- function buttonText(type) { if (type=="Hide Menu ") {document.menu.button.value="Menu";} else {document.menu.button.value="Hide Menu ";} showIt(); if (document.menu.button.value=="Hide Menu ") {hideIt();} } // -->
<!-- change the value of 'top' and 'left' in the layers properties below to place the menu in the desired position matching the placement of the button --> </script>
I have a nav menu with lists within lists (3 deep), with pattern as follows:
[Code]...
When a parent link is clicked it reveals the sub-list. What I would like to do is hide currently visible lists when another is revealed. I've tried to use .siblings but it dunt werk (or, at least, I can't make it happen!)
I am working on my portfolio site and I've come to a bit of a wall. I have a main navigation which, when clicked animates a div containing my content to be visible. I have this working fine but now I want to have external content loaded into this containing div when different navigation items are clicked, which I also have working, but I cannot get these to work together. First off, if the div is not shown I want the appropriate content to be loaded then the div to animate, and if the div is showing, I want it to hide, swap the content then animate. I am sure its just a case of structuring my code properly but I just cant seem to get it right.
Show the div $(document).ready //content animate show ( function() { $('.navigation a').click ( function() { $('.content').stop().animate ({ marginTop : "0px" },{ easing : "easeOutQuint", duration : 2000 })});})
And finally swap the content: $(document).ready(function() { // Check for hash value in URL var hash = window.location.hash.substr(1); var href = $('.navigation a').each(function(){ var href = $(this).attr('href'); if(hash==href.substr(0,href.length-4)){ var toLoad = hash+'.php .content'; $('.content').load(toLoad) }});
$('.navigation a').click(function() { var toLoad = $(this).attr('href')+' .content'; $('.content').fadeOut('fast',loadContent); window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-4); function loadContent() { $('.content').load(toLoad,'',showNewContent()) } function showNewContent() { $('.content').fadeIn('fast'); } return false; }); });
This is my first post here. I'm not well versed in JavaScript, so I'm not sure how to do all the following things: (1) set up a horizontal menu with (2) + and - images as bullet points, such that clicking on the bullet points (3) changes + to - and vice versa while (4) a single-level drop down menu makes text disappear and appear.
It should look like this: --------------------------------------------- [+] Option A [+] Option B
how to write a script where when a link is clicked in the left nav column, it will display text in the right main column. So, when you first arrive to the page, nothing will appear in the main portion of the site. Content only appears after clicking on a link. When you click on another link, the previous content is hidden, and the new text is displayed. Here's what I have so far:
HTML <div class="container"> <div class="nav"> <ul id="menu">
I'm struggling around to show submenu on mouseover of menu-div. I found a solution to show each children of one menuitem, but I wont to show the whole submenu-strukture of all menuitems. Here is what I've done till now:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL]"> <html xmlns ="[URL]"> <head> <meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" .....
So when I hover over li.first I will get all submenu-items of the first heading! Is it possible to mouseover the div#navi or the ul#nav to get shown all submenu-items from every menuheading?
I tried something like this, but of course it doesn't workjQuery(document).ready(function(){ jQuery(".first ul").hide(); jQuery(".#nav").hover(function () { jQuery(this).children(".first ul").toggle("slow"); }); });
Basically, I have written an application that runs a report based on a certain amount of parameters, one of which being date. So, the date selection is a <select></select> dropdown menu and it has the usual in it, today, yesterday, this week, last week etc. The problem is I need it to have a 'Custom' selection to run reports for custom dates. When 'Custom' is selected in the dropdown menu, two text boxes appear underneath with YYYY-MM-DD watermarked in them. I have assembled enough code from around the web to get this to work and it works fine, the problem I have is that when the user clicks off the 'Custom' option and on to a different one, I need the textboxes to disappear again.
Here is the code I am using: <script type="text/javascript"> function showhide(divid){ thediv = document.getElementById(divid); if(thediv.style.display== 'none' ){ thediv.style.display='block' }else{ thediv.style.display='none' }} .....
I'm pretty bad with Javascript, but I need to hide or show a snippet of text (could be inside a div without problems) based on the selection of a dropdown menu (<select>). If they choose anything with the word "Series" on it, I need to show the snippet. If they choose anything without "Series" on it, then the snippet needs to disappear. I should mention the snippet is part of a form, just a checkbox but that shouldn't be a problem I don't think.
Basically i need the menu to be collapsed to the first level initially. So only the User, Admin and Company User links are visible.
When these 1st level menu items are clicked the 2nd level sub menus need to be displayed when navigated to the 1st level index page and so on for the third level menus.
I need to be able to remember the location as well so the menu stays open on the correct page.
The annoying thing is that if i was allowed to do this in Coldfusion this would only take me a little while but i don't know much JavaScript therefore am a bit stuck. I am not allowed to use libraries either such as JQuery, MooTools
Another challenge is to style the 'active' link locations.
When you are at the first level the class of the anchor needs to be selected_bg.
When in a sub of said first level the class of that selected anchor needs to be selected_bg and the first level needs to change to selected.
For the third level both the above stays the same but then the third level takes the class of selectorThird when active.
I have some wordpress code which generates a menu with links to the pages created in the admin area.
[Code]...
The id of active is on the currently selected menu item. In the above code the home page. How can I get the subnav to show only if the main menu item which contains a subnav is active? The rest of the time I want the subnav hidden. I have found the effect I want on another site [URK]. If you select advanced treatments a sub menu appears. If you select say jobs then the subnav for advanced treatments disappears.
I am trying to hide/show table when hide/show button is pressed
Problem: The code works fine when I remove 'slow' from line 10. But with 'slow' in line 10 content of toggleButton doesnt change from Hide to Show when pressed.
I have a DIV near the bottom of my web page, but above the footer, that is hidden by default.
If I then reveal this DIV using jQuery function Show (or slideDown ), the DIV is revealed but it overlaps my footer DIV which is below it. What I want to happen is that the DIV gets pushed down (as happens in Firefox).
I'm trying to get a drop down menu that can be activated by clicking on the main menu button, but have problem with the 'id'. When i declare the id's as a number, it gives errors through the sgml parser of my html validator (you can't use numbers to declare id's). But when i change the id in a letter, eg 'a', the menu doesn't work...
To build a menu block which should be switchable with hide/unhide of the menu items, I'm using .append html. The code idea is this:
[Code]...
As can be seen from above posted code there is a line "<div id="' + menuSlider + '" style="display:none">". Appending that -- AFAIS -- the .append is automatically (????) adding "</div>" which closes the statement. That breaks my idea of the whole concept! The menu part isn't included in the 'menuSlider '. QQ: How to change it -- NOT to have that "</div" added to it??
I always want "smenu3" to show with "smenu4" and "smenu5" collapsed... When the user clicks the link, it calls a javascript function to show "smenu4" like so...
I am trying to hide some form elements in a form by default and show/hide depending on which radio button is clicked. This is what I have but it is not working: Code:
