Show/Hide Menu For Footer?

Mar 14, 2005

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?

View 24 Replies


ADVERTISEMENT

Show/Hide Div Footer Below It Not Adjusting Consistently In IE?

Jul 31, 2009

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.

Here's the javascript:

<script type="text/javascript" charset="utf-8">
$(function () {
var tabContainers = $('div.imgswap > div');
tabContainers.hide().filter(':first').show();
$('div.imgswap ul.tabNavigation a').click(function () {

[Code]...

View 2 Replies View Related

Show/Hide Div. Footer Below It Not Adjusting Consistently In IE?

Jul 31, 2009

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:

Code:

<script type="text/javascript" charset="utf-8">
$(function () {
var tabContainers = $('div.imgswap > div');

[code]....

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.

View 5 Replies View Related

Hide Or Show Menu - Will Pay If Necessary

Apr 13, 2011

i am making video blogging website and i need someone to make Hide or show menu, for example: When someone click on:

Season 1 (it should show)
Episode 1
Episode 2
Episode 3... (and when someone click on episode it should show text (usually <iframe... ))

ty in advance and i can share 5$ on paypal if you make it right and easy to use

View 5 Replies View Related

Show / Hide The Sub Menu - Disappear

Sep 30, 2010

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.

[Code]...

View 10 Replies View Related

Show / Hide Menu's Using Tabs

Oct 20, 2010

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.

View 12 Replies View Related

A Menu With A Show And Hide Function

Jan 8, 2003

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>

<style>
input {border-style: ridge;}
a:hover {text-decoration: underline}
</style>
</head>
<body>

<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>


<form name="menu">
<input type="button" name="button" onClick="buttonText(value);" value="Show Menu" />
</form>
</span>
<div id="layer1" style="position:absolute; top:40; left:20; width:250; height:90; visibility:hidden">
<table bgcolor="yellow" border="1" cellpadding="2" cellspacing="0">

<tr><td><a href="http://www.google.com" style="text-decoration: none"><font face="arial" size="1"><b>google</b></font></a></td></tr>
<tr><td><a href="http://www.hotmail.com" style="text-decoration: none"><font face="arial" size="1"><b>hotmail</b></font></a></td></tr>
</table>
</div>
</body>

View 1 Replies View Related

Show / Hide Vertical Nav-Menu (jQ)

Mar 6, 2011

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!)

View 4 Replies View Related

JQuery :: Animated Menu - Show / Hide DIV

Jun 28, 2009

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
})});})

Hide the div
$(document).ready //content animate hide (
function() {
$('#hide').click (
function() {
$('.content').stop().animate({
marginTop : "200px" },{
easing : "easeInQuint",
duration : 1500
})});})

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;
});
});

View 2 Replies View Related

DHTML Menu: Show/hide Text?

Dec 24, 2010

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

[code]....

View 3 Replies View Related

JQuery :: Menu Links Show/hide Content In Another Div?

Oct 11, 2011

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">

[Code]...

View 4 Replies View Related

JQuery :: Mouseover - Show And Hide Submenu Of Menu DIV

Feb 9, 2011

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");
});
});

View 2 Replies View Related

Show And Hide On Select Option Dropdown Menu

Jan 30, 2009

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'
}} .....

View 3 Replies View Related

Asp.net - Show/Hide A Textbox On Select Dropdown Menu

Apr 12, 2010

How do i get a dropdown menu to hide/show a textbox and a label control ? in a asp.net page

Here is my code:

View 3 Replies View Related

Show Hide Divs Onchange Select Menu?

Mar 17, 2011

Trying to get the divs to switch style properties when selected form select menu

<script type="text/javascript">
function showstuff(element){
if(document.getElementById(element).style.display = 'block')

[code].....

View 7 Replies View Related

Dropdown Menu Hide Or Show Content Based On Selection

Nov 26, 2009

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.

View 24 Replies View Related

Nested Unordered List Show/hide Menu That Remembers Location?

Jan 7, 2009

I am having a few issues with a client who requires me to code their menu in JavaScript.

Here is the HTML:

Code:
<ul id="navigation">
<li class="firstElement"><a href="#">User</a>
<ul>
<li><a href="#">Manage my profile</a></li>

[Code]....

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.

View 1 Replies View Related

JQuery :: Menu FadIn - Show - Hide - FadeOut - Make The Content FadeIn Instead Of Just Showing?

Dec 4, 2011

It is not possible for me to make the content1,2,3,4 fadeIn instead of just showing. When i type 'slow' here content disapear:

[Code]....

View 2 Replies View Related

Show / Hide Subnav - Generates A Menu With Links To The Pages Created In The Admin Area

Nov 30, 2010

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.

View 1 Replies View Related

JQuery :: Toggle Function - Hide/show Table When Hide/show Button Is Pressed

Sep 12, 2011

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.

Code:

View 1 Replies View Related

JQuery :: Footer Gets Overlapped When Using Show() In Internet Explorer?

Nov 9, 2011

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).

View 3 Replies View Related

Stop A Floating Menu - Doesn't Go Over The Footer When You Scroll To The Bottom Of The Page?

Jan 17, 2011

[url]

See the menu on the left, how do you stop it so that it doesn't go over the footer when you scroll to the bottom of the page?

View 24 Replies View Related

Hide / Show Menu Error "sgml Parser Of Html Validator"

Mar 19, 2010

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...

[Code]...

View 2 Replies View Related

JQuery :: Build A Menu Block Which Should Be Switchable With Hide/unhide Of The Menu Items?

Apr 26, 2010

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??

View 2 Replies View Related

Show / Hide Won't Show In Nested List

Jan 22, 2009

I am having problems, basically I have a set of nested lists I need to show and hide

Code:
<ul id="smenu3"><ul id="smenu4">
<li>stuff here..</li>
<li>stuff here..</li>
<li>stuff here..</li>
</ul><ul id="smenu5">
[Code]...

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...

[Code]...

View 7 Replies View Related

Hide/show <div>

Aug 11, 2005

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:

View 2 Replies View Related







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