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


ADVERTISEMENT

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

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

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

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

Show And Hide Function

Nov 9, 2005

I need an 'unobstrusive DOM' function which will show and hide a piece of text within the DIV activated by links. Can anyone help me find a suitable function?

<div id="formatting">
<h3>Formatting options</h3>

<dl>
<dt>Bold</dt>
<dd>[b]text[eb]</dd>
<dt>Italic</dt>
<dd>[i]text[ei]</dd>
<dt>Link</dt>
<dd>link [l=url]text[el]</dd>
<dt>Line break</dt>
<dd>single new line</dd>
<dt>Paragraph</dt>
<dd>double new line</dd>

</dl>

<a href="">Show</a>
<a href="">Hide</a>

</div>

View 24 Replies View Related

Div Hide Show Function?

Jul 4, 2011

give me a dive hide show javascript function.

View 1 Replies View Related

Hide / Show Various DIV Based On Function

Aug 6, 2009

I have a script to show and hide various divs based on a function & var. The problem I am having is that when ANY of the variables ('hate', 'ok' and 'love') are passed all 3 different feedback forms ('FeedbackHate', 'FeedbackOk' and 'FeedbackLove') appear, not just the one I want.

Here is the JS:
function sitesurveyswitch(emotion) {
var e = emotion;
document.getElementById('site_survey_hate').style.backgroundPosition = '0px 0px';
document.getElementById('site_survey_ok').style.backgroundPosition = '0px 0px';
document.getElementById('site_survey_love').style.backgroundPosition = '0px 0px';
document.getElementById('FeedbackHate').style.display = 'none';
document.getElementById('FeedbackOk').style.display = 'none';
document.getElementById('FeedbackLove').style.display = 'none';
if (e == 'hate')
document.getElementById('site_survey_hate').style.backgroundPosition = '-80px 0px';
document.getElementById('FeedbackHate').style.display = 'block';
if (e == 'ok')
document.getElementById('site_survey_ok').style.backgroundPosition = '-80px 0px';
document.getElementById('FeedbackOk').style.display = 'block';
if (e == 'love')
document.getElementById('site_survey_love').style.backgroundPosition = '-80px 0px';
document.getElementById('FeedbackLove').style.display = 'block';
}

And here is the code related to this function:
<div id="siteSurveyBox">
<span id="site_survey_hate" onclick="sitesurveyswitch('hate');return false;"></span>
<span id="site_survey_ok" onclick="sitesurveyswitch('ok');return false;"></span>
<span id="site_survey_love" onclick="sitesurveyswitch('love');return false;"></span>
</div>
<div id="FeedbackHate" style="display:none; margin-top:-28px;">
FEEDBACK FORM IS HERE
</div>

<div id="FeedbackOk" style="display:none; margin-top:-28px;">
FEEDBACK FORM IS HERE
</div>
<div id="FeedbackLove" style="display:none; margin-top:-28px;">
FEEDBACK FORM IS HERE
</div>

View 2 Replies View Related

Boolean Function To Hide / Show DIV

Mar 20, 2010

I am very new to javascript and html. I am trying to create a function which will hide or show a div (div1). Right now, it is always showing the div whether the boolean value is true or false. I know that it is getting inside the else if part, but it doesn't seem to be working.

<script type="text/javascript">
function hideDiv(flag){
if (flag == false){
document.getElementById('div1').style.visibility="visible";
}else if (flag == true){
document.getElementById(div1).style.visibility="hidden";
}}
var bool = new Boolean(true)
hideDiv(bool);
</script><body>
<div id="div1">
Text!
</div></body>

View 4 Replies View Related

JQuery :: FAQ Show / Hide Function - If Statement

Jun 24, 2010

I have a simple FAQ show/hide function set up however I am having trouble setting up an if clause. My code is:
$(document).ready(function(){
$("dd").hide();
$("dt").click(function(){
$("dd").hide('slow');
$(this).next().slideToggle();
});
});

However, when you click on the same item twice it firstly hides and then reshows it, I need an if statement that basically states;
if "this?!" is visible/shown
Then do nothing
else
$("dd").hide('slow');
$(this).next().slideToggle();
I am unsure of the syntax and can't figure out what property I can trace out to see if the item is being shown or not.

View 4 Replies View Related

JQuery :: Show/Hide Without The Click Function?

Aug 1, 2011

I am trying to create a simple splash page.

I have 2 divs on the page, div1 has a gif animation in it and div2 is the page content. I want to hide div2 and only show div1 which plays the gif, then after some time div1 fades away and div2 fades up to show the page content.

This is my thought process:

1) On doc ready, hide div2
2) after 3000 fade div1 out
3) fade div2 in

$(document).ready (function(){
$('#div2')hide();

but I dont know how to fade out the div after a time and fade in the other div.

The examples I see all use the click function.

View 1 Replies View Related

Calling A Function To Hide / Show Comments

Jul 19, 2009

So in the past I've mostly just copy and pasted other JavaScript functions I needed, and made slight modifications based on my exact needs. However, this time I couldn't find anything that would work with what I wanted to do (show and hide comments on news stories in a particular way), so I decided to just make my own.After a few hours of messing around with it, I'm quite exasperated, because what I have looks like it should work, but for some reason I can't identify, doesn't.Essentially what it should do is, find the table with the ID of the news article whose comments are being toggled, then find all the rows in the table that are labeled as comments, and either show them or hide them, based on their current state (as defined by their class with a "display: none;" in it or not).

Obviously it uses PHP, but I know that's not the problem; it just uses the article's ID number to pass on which comments need to be hidden/shown to the function.From everything I've looked up, this should work, but doesn't. Something peculiar, though, is that the function looks like it's not even being called; I put a simple alert('Test'); in the function, and still nothing happened when I clicked the link. So maybe my function is fine in itself, but I'm just calling it in an incorrect manner?

View 4 Replies View Related

Show/hide Function Not Working In Firefox

Feb 2, 2011

Getting my show/hide function to work in all browsers.

The function below works everywhere but Firefox.

Can someone see why it's not working?

My javascript function:

View 6 Replies View Related







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