Hidden/Alternate Menu

Jan 8, 2004

Here is a quick menu hidden in a Mouse Gesture for additional navigation on a site or administraitive duties.

To activate the menu simply right click anywhere on the screen , hold the button down, then move the mouse down 50px's and release. This will display the hidden menu.

There are two parts to it, first the Style and Script....

<style>
.expanded {
position:absolute;
padding:1px;
font:Arial, Helvetica, sans-serif;
font-size:11px;
text-align:left;
background-color:#D4D0C8;
width:150px;
border-left :2px solid #FFFFFF;
border-top :2px solid #FFFFFF;
border-right :2px solid #999999;
border-bottom : 2px solid #999999;
}
a.expanda {
padding-left:15px;
padding-right:15px;
display:block;
text-decoration:none;
color:#000000;
}
a.expanda:hover {
background-color:#003366;
color:#FFFFFF;
}
</style>
<script language="javascript">
document.oncontextmenu = null;
document.onmousedown = doDown;
document.onmouseup = doUp;
var timerID = 1;
var ly;
var ny;
var targ;
function doDown(e)
{
clearTimeout(timerID);
document.oncontextmenu = null;
var rightclick;
if (!e) e = window.event
if (e.which) rightclick = (e.which == 3);
else if (e.button) rightclick = (e.button == 2);
try
{
if (e.target) targ = e.target.getAttribute('id');
else if (e.srcElement) targ = e.srcElement.getAttribute('id');
if (targ != "navlink") {document.getElementById('altnav').style.display = 'none'}
}
catch(e)
{
document.getElementById('altnav').style.display = 'none'
}
if (rightclick != false)
{
ly = e.clientY;
}
return false;
}

function doUp(e)
{
var rightclick;
if (!e) e = window.event
if (e.which) rightclick = (e.which == 3);
else if (e.button) rightclick = (e.button == 2);
if (rightclick != false)
{
if (!e) var e = window.event;
ny=e.clientY;
lytemp = ly+50;
if (ny>lytemp)
{
document.getElementById('altnav').style.display = "block";
document.getElementById('altnav').style.left = e.clientX + 2;
document.getElementById('altnav').style.top = ly+2;
window.status = "down menu";
document.oncontextmenu = fakecontext;
timerID = setTimeout("document.getElementById('altnav').style.display = 'none'", 5000);
}
}
ly = null;
ny = null;
}
function fakecontext(){return false;};
</script>

And the menu div to place inside the body tag. Edit this to act as the menu you would like. Remember that you can access the event.target if you want to have the menu dynamicaly effect things based on whats clicked.

<div style="display:none" class="expanded" id="altnav">
<a href="http://www.news.com" class="expanda" id="navlink"><div style="float:right;width:20px;text-align:left;">Ctrl+?</div>Option 1</a>
<a href="http://www.cnn.com" class="expanda" id="navlink"><div style="float:right;width:20px;text-align:left;">Ctrl+?</div>Option 2</a>
</div>

View 9 Replies


ADVERTISEMENT

JQuery :: SlideToggle Open One Of Two Hidden Sub-nav Bars When Either Of Two Different Menu Items Are Clicked Upon - Instead Of A Drop Down Menu

Oct 26, 2009

The purpose of the code is to slideToggle open one of two hidden sub-nav bars when either of two different menu items are clicked upon - instead of a drop down menu. What doesn't work is the hiding of the div that is not required, if it is already open. Viewing in firebug shows that the appropriate classes are being applied - I suspect the reason is that slideToggle has been somehow set and cannot be unset via another object - but perhaps that is not it at all?

$(document).ready(function() {
//add .toggle function to appropriate li element
$('#hozmenu li:nth-child(4)').toggle(function () {
//set 4th menu links colour to be green whilst div is shown
$('#hozmenu li:nth-child(4) a').css('color', '#95d890');
$('#toggle_nav_services').removeClass('toggle_show');
[Code]....

View 1 Replies View Related

Hidden Menu Appear On Scroll?

Mar 23, 2010

I just came across this site the other day and fell in love with the simple hidden menu that shows up when scrolling past the header. I took a look at the code but can't really figure out how this is implimented.

[URL]

how to create a similar effect? I'd love to adapt this technique.

View 1 Replies View Related

List Menu And Hidden Field

Aug 10, 2004

I have a sql/recordset setup that returns an id number and description.

For example:
4test
7test44
9test123

I then have a drop down list that contains the id numbers. I'd like the recordset to return the matching record for whatever is selected in the drop down list. So if the drop down list equals "4". Then "test" would appear in the value of a hidden form field. If "9" was selected in the combo box then "test123" would be entered into the hidden form field. I'm not sure how to specify the value from the drop down list in my sql statement and also do not know how to update the value when the user changes the drop down list selection.

View 5 Replies View Related

Prevent Menu From Getting Hidden Under Flash Movies?

Mar 11, 2008

1) in the object tag add the following parameter <PARAM NAME=wmode VALUE=transparent>

2) in the embed tag add the following attribute <EMBED src="jet.swf" wmode=transparent ....

3) add the same name-value pair to the following script <script type="text/javascript">
AC_FL_RunContent 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0' ,'wmode','transparent',...rest of your name-value pairs go here ); //end AC code </script>

View 2 Replies View Related

Hiding / Revealing Hidden DIVs For Menu

Jan 11, 2010

I am trying to create a basic menu where if you put your mouse over a button you get a bit of descriptive text or an image appearing somewhere else on the page. I have tried to do this with hiding/revealing hidden divs - works fine with IE but no others.

<html>
<head>
<script language="javascript">
var descriptions = new Array();
descriptions[0] = "<p>See whats been added to the web site recently</p>";
descriptions[1] = "<p>Find out more about me</p>";
descriptions[2] = "<p>Check out me links</p>";
function showDescription(descriptionIndex){ .....

View 2 Replies View Related

Drop-down Menu Hidden Behind .js Slideshow Script?

Jan 9, 2010

I have a slideshow of quotes based on the "Ultimate Fade-in slideshow (v2.1)" at Dynamic Drive:This is right under my navigation bar, and the drop-down menu items are hidden behind the javascript slideshow.Some background: The reason I did it this way because I first started out with a Flash banner with quotes fading in and out, and I ran into the problem with the drop-down menu items hiding behind the Flash... of course I Googled that and found the solution.But in the meantime I played with the javascript slideshow and it worked better for me because it was easier to add new quotes just within the html, without having to go back and edit the Flash item.Anyway, so is there a solution to the drop-downs being hidden behind the .js slideshow? Or should I go back to the Flash? Or is there some other sort of solution or script that would fit my needs better?

View 2 Replies View Related

JQuery :: Drop Down Menu Becomes Hidden Of Fading Images?

Jun 15, 2009

For some reason the dropdown list in my menu becomes hidden underneath the jquery fading images. If i dont fade the image it displays fine. You can check out the issue here[URL].. When you rollover Javascript, the 2 items beneath it become blocked by the images which are fading in the right panel.

View 2 Replies View Related

Prevent Menu From Getting Hidden Under Flash Video (SWFObject )

Jul 4, 2009

How to prevent Javascript Menu from getting hidden under Flash Video (SWFObject ).

I am using Open Flash Chart and the chart is displaying fine in my php shoppping cart, but my javascript menu is getting hidden behind the Flash Chart.

Here is my script code:

<script type="text/javascript">
swfobject.embedSWF(
"open-flash-chart.swf", "Dashboard_Chart",
"800", "400", "9.0.0", "expressInstall.swf",
{"data-file":"ofc-chart.php"} );
</script>

View 1 Replies View Related

Two Drop Down Menu's One Hidden, Appears If Right Option Is Selected

Jun 5, 2007

I have a html form with two drop down menu's. Now what i need is if some one selects a certain option in the first drop down menu then it will show the second one, Otherwise it stays hidden.

View 2 Replies View Related

PHP :: Drop Menu With OnChange To Populate Hidden Input Prior To Submit?

Mar 1, 2010

I have the php code working to produce the drop menu and use the

Code:

onChange="flagmastcountryflag(this.value)"

to pass the value to javascript for process.

Code:

<?php
// Creates a pull-down list of flagmastcountries
function get_flagmastcountry_list($name, $selected = '', $parameters) {

[code].....

View 1 Replies View Related

Jquery :: Accordion Menu - When Click One Of Sublinks In IE7 - Briefly Flashes All Sublinks - Even The Hidden Ones

Feb 2, 2010

I'm trying out a jquery accordion menu. Problem is I'm having problems with it in IE (7 at least). There's three stacked menu links, two of which contain sublinks (where the accordion comes in). When I click one of the sublinks in IE7 it briefly flashes all the sublinks (even the hidden ones). It'll probably make more sense if you give it a try!

[url]

I'm guessing its something to do with the HTML body of the page kicking in before the javascript?

JS file is here:

[url]

View 3 Replies View Related

Alternate Row Colour

Dec 9, 2005

I am generating a html based table with multiple rows of data coming
in real time from a postgres DB. The underlying technology is java
based however the front end is html.

now i am unable to alternate the colour of every row so that the table
is lot more readable. can anyone suggest a javascript or even a css
script which will alternate the row colours irrespective of the number
of rows.

View 4 Replies View Related

Any Alternate For OnBeforeUnload?

Jun 6, 2006

the bug of onbeforeunload is so obvious!

in IE 6 it will popup twice "sometimes"

I am using the following code

window.onbeforeunload = null;
window.onbeforeunload = confirmExit;
var executingPostBack = false;

function confirmExit()
{
if ( typeof executingPostBack != 'undefined' && !executingPostBack)
{
return 'Warning: Modified data has not been saved.' ;
}
}

In some cases, IE pops up it twice, for example, when we click a link
that contains "__doPostBack", onbeforeunload is fired the first time;
when the form is submitted, it is fired second time.

There is no way to work it around, because onbeforeunload is stupid, we
can't know whether the user clicks OK or Cancel.

I would like to use the following code with confirm so that I know
exactly what the user behaves

res = confirm("leaving?");
if (res==1)
{
alert("yes");
}
else
{
alert("no");
}

but I can't use this in onbeforeunload, because I can't stop it!
onbeforeunload always asks for something return, but if I return
anything, it will popup!

View 4 Replies View Related

Alternate Submit?

Dec 12, 2006

I am making a ajax form request and I am clueless on how to make an alternate submit when javascript is disabled. This is so it works without javascript and uses a separate php file.

View 2 Replies View Related

Onclick Alternate Between 2 Values?

Dec 21, 2009

I currently have some simple JS setup but I'd like to alternate between 2 values using "onclick". I have setup a flash clip with a form input buttons for playback control. Here is my form:

PHP Code:

<form action="/" class="button">
<input type="button" name="" id="play" class="play" value="" onclick="callFlashPlayPauseVideo(1)" />
</form> 

[Code]....

However, once this intial stage has passed, and the button is clicked again - the image needs to revert back to the "play" button - so its a cause of having the pause button on show whilst the video plays, if its then clicked, the play button shows as the video is paused.

View 4 Replies View Related

Changes Another Alternate Image At The Same Time?

Mar 26, 2010

For a lot of years now I've used a javascript that does a simple rollover image swap, but also changes another alternate image at the same time. It's always worked like a charm.Lately I realized that the script no longer works in IE, though it used to in older versions of IE (I think it stopped working in anything past IE 7). It still works fine in Firefox, Safari, etc.I haven't been able to find a good alternative for this script, so I'm really trying to get it to work again in IE, but so far no luck.

Here's the link to the actual script itself. http:[ur;l]....

View 1 Replies View Related

Alternate Form Fields

Apr 26, 2005

I was actually looking for a couple of alternate form field elements such as a drag bar or combo boxes. Is there something like that out there, even? (see ascii representation for example of what I mean) Code:

View 7 Replies View Related

Alternate Table Row CLASSES

May 9, 2005

There are lots of JavaScripts and PHP scripts for making tables with alternating row colors. I'd like to know if there's a way to use JavaScript to give a table alternate row CLASSES.

My ultimate goal is to cut down on the html and gain more control over my table. I have a PHP script that gives me alternate cell colors, with different colors in each of two table columns. But it's just too complex to work with. Code:

View 3 Replies View Related

Alternate Cell Content Wi JS

Feb 5, 2010

I am building a display which is made up of a XHTML table, CSS styling and JS animation.

The effect I am looking for is for the (mutliple) cell's content to alternate between one word to another.

My initial idea was to build an array to count through the cell numbers like I have for another section of the board in this snippet..

var flsh = document.getElementsByTagName('td');
for (var i=0;i<flsh.length;i++); //flash alert cells
{
cell = !cell;

[Code]....

This code flashes some of the other cells each second, however for my alternating text I'm not sure what methods to use since .style.backroundColor wont suit this.

View 3 Replies View Related

Alternate Way To Store/get XML Data ?

Mar 21, 2011

I have a project that I need to read some data from an XML file.

Something like:

However, since JS is a client side script so it can't read from client side, is there any alternate way to do this? I am thinking to create a "Data" class, and many "Data" objects, is this an elegant way to do it?

View 5 Replies View Related

Alternate Textareas To Be Visible?

Apr 23, 2011

Basically i have a function that depending on which picture you click (one for "yes" and other for "no") it will make visible a textarea .

However right now if i click in "yes" it will display me the textarea for yes, and afterwards if i click "no" it will display both textareas, for yes and no. I want everytime i click on yes it will hide the "no" textarea and the same for when i click the "no" textarea, it will hide the "yes" textarea.

Code:
<!- * * * * * * * * * * * * O.S. Question * * * * * * * * * * * * * * * -->
Original Operating System ?</strong></span><div id="container">
<div id="left">
<img src="yes.png" onclick="document.getElementById('moreinfo22').style.display =

[Code].....

View 4 Replies View Related

JQuery :: How To Color Alternate Words

Aug 26, 2011

I am a little new to java script and jQuery so, if you can, please ignore my ignorance. I am creating a theme for Joomla and am calling in the website title using php. I would like so that every other word is a different color.

[Code]...

I would like to use jQuery to make every other word a different color in that specific span.

View 1 Replies View Related

JS Redirection Shows Alternate Text

Jan 27, 2011

I have a javascript redirection with an alternate text for those who have javascript disabled.

It all works fine but before redirection the alternate text displays shortly. Can I prevent that?

Code:

I also tried to hide the text with an onload event, but nothing changes

View 3 Replies View Related

Alternate DIV Rows But In Specific Section?

Mar 13, 2011

Is there away to alternate DIV rows in a specific section. When I try to alternate the DIVs it alternates everything that is a DIV on the page. I want to just alternate a DIV table.

View 4 Replies View Related

Styling Alternate Rows Of A Table?

Oct 20, 2009

Code:

function stripeTables() {
if(!document.getElementsByTagName) return false;
var tables = document.getElementsByTagName("table");
for(var i=0;i<tables.length; i++) {

[code]....

how does the script know if odd is true or false? The script works, but I'm missing this one concept. Is "odd" a JS keyword or something?

View 4 Replies View Related







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