|
JavaScript - Jquery Menu Works In Ie9, Nothing In Ff
I am completely lost here. My page is http://myresearchfinder.com/dev/newchecktest.html
The first checkbox should spawn a menu and then the "breast" option could spawn another. It works flawless in IE9. But in FF 3.6 the first checkbox simply does nothing. In Chrome, it spawns the menu, but strangely the checkboxes in the next menu are not clickable. soooo weird. any ideas? this should be standard css/jquery. Similar TutorialsHi, I know this works in principle as I have used it successfully on other pages I am using so I must have a typo or some other small mistake, I have gone over and over it, taken things out, put them back in and I can't for the life of me work out where my mistake is. Another pair of eyes would certainly be appreciated. My code is: Code: <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$('#submitnewfestival').click(function(){
var data = $('#publicnewevent').serialize();
$.post ('insertPublicEvent.php',data, function(){
alert("Thank you for adding an event to our calendar.");
$('#publicnewevent').each (function(){
this.reset();
});
});
return false;
});
});
</script>
<form action="" name="publicnewevent" id="publicnewevent" method="post" autocomplete="off" >
<label class="two">Dress Code:</label>
<input type="text" class="input" name="dresscode" id="dresscode" value="Enter Dress Code" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'Enter Dress Code':this.value;" size="100" />
<br />
<br />
<input type="button" name="submitnewfestival" id="submitnewfestival" value="Submit" />
</form>
The insertPublicEventForm.php works as I have tested it without JQuery as a direct post. This is a heavily reduced version of the form, but even like this I can not get it to work. Overview Well it's been a while since I've been here! Another set of eyes on this would really help me out. I have a simple slider plugin that I wrote in jQuery. One of the parameters that I've written is which element you want to be the container for each slide. In the example I'm going to post, I'm using a list item (li). The Problem Due to lazy coding or whatever, I really made a blunder of things inside my plugin. Throughout the plugin, I'm calling that parameter directly. Because of this, the script context is being applied to EVERY element on the page. So...when I pass in the tag jQuery selector: $('li') as the element selector, it works...but it applies the slider effects to every <li> on the page, not just the container I assign to the plugin. Every time I change $('li') to anything more specific at all (a class, an id, better selector) or I rewrite the plugin to use something more specific (hard-coded), the browser usually crashes due to an unresponsive script. I'm seeing this in Chrome & Firefox. I'm guessing this some kind of weird closure-memory leakage issue that I'm just not ready to handle, or something about the way jQuery and event delegation/binding works. The frustrating thing is that if I do a console.log of the element parameter, and I use something more specific....it returns just fine! The script blows up the page though.... The Code Code: <html>
<head>
<script>
(function($) {
$.fn.extend({
luSlider: function(options) {
var o = $(this);
var defaults = {
element : $(this),
direction: 'left',
next: null,
prev: null,
distance: null,
speed: 'slow',
prevAtEnd : null,
nextAtEnd : null,
prevNextEvent: null,
pagination: false,
elementClick : false,
pager : $(this),
callback: null
};
var options = $.extend(defaults, options);
o.data('curPosition','');
// set cursor for next & previous buttons
if (options.prev != null) options.prev.css('cursor','pointer');
if (options.next != null) options.next.css('cursor','pointer');
// Wrap all of our items in a super large div with hidden overflow
o.find('ul').first().wrap("<div style='width:999999px;' id='luSliderWrapper'></div>");
o.css('overflow','hidden');
// If no distance specified, do it based on the width of a single element
var totalWidth = 0;
var el = options.element;
// Get the total width of all our items
el.parent('ul').css({'padding':'0px','margin':'0px'});
el.each(function() {
totalWidth += $(this).outerWidth(true);
//float our items to the left
el.css({'display':'block','position':'relative','float':'left'});
});
// Get individual item width
var itemWidth = totalWidth / el.size();
//var itemWidth = el.outerWidth(true);
// Get the number of visible items based on our container size
var spaceUsed = $(this).innerWidth() / itemWidth;
var numVisibleItems = Math.floor( spaceUsed );
/*
if (spaceUsed % 1 > 0 ) {
$(this).css({'padding-left':itemWidth/2,'padding-right':itemWidth/2});
}*/
// a variable to store the number of items
var numItems = el.size();
if (options.distance == null) options.distance = itemWidth;
/* Initialize the location */
if ( $(this).data('curPosition') == undefined ) {
$(this).data('curPosition',0);
}
// get the total number of pages
var numPages = Math.ceil(numItems / numVisibleItems);
togglePrevNext();
buildPager();
return this.each(function() {
if (options.elementClick) {
//el.click(function() {
// document.location = $(this).find('a').attr('href');
// });
}
// var cb = options.prevNextEvent;
// Animate Next
options.next.click(function() {
togglePrevNext();
var theEnd = endOfShow();
var howFar = options.distance;
if (!(theEnd)) {
o.data('curPosition', Math.round( (o.data('curPosition')) + 1) );
if (options.pagination) {
howFar *= numVisibleItems;
}
distance = "-=" + howFar;
el.stop(true,true).animate({
"left" : distance
},options.speed);
} else {
// end of show
}
togglePrevNext();
movePager();
handleCallBack();
});
// Animate Previous
options.prev.click(function() {
togglePrevNext();
//var theEnd = endOfShow('prev');
var theEnd = startOfShow();
var howFar = options.distance;
if (!(theEnd)) {
o.data('curPosition', (o.data('curPosition') - 1) );
if (options.pagination) {
howFar *= numVisibleItems;
}
distance = "+=" + howFar;
el.stop(true,true).animate({
"left" : distance
},options.speed);
} else {
// end of show
}
togglePrevNext();
movePager();
handleCallBack();
}); // end prev.click
$('#luSliderPager li').click(function() {
var curPage = $('li.activePage').index();
var newPage = $(this).index();
var direction = (curPage > newPage) ? "+=" : "-=";
var distance = Math.abs(curPage - newPage) * options.distance;
if (options.pagination) {
distance *= numVisibleItems;
}
var newLeft = direction + distance;
// set position
o.data('curPosition', newPage);
movePager();
// animate
el.stop(true,true).animate({
"left" : newLeft
},options.speed);
});
}); // end return
function togglePrevNext() {
(startOfShow() ) ? options.prev.addClass(options.prevAtEnd) : options.prev.removeClass(options.prevAtEnd);
(endOfShow() ) ? options.next.addClass(options.nextAtEnd) : options.next.removeClass(options.nextAtEnd);
}
function handleCallBack() {
if (typeof options.callback == "function") options.callback(o,options);
}
// Determine our boundaries...and if we've reached them
function startOfShow() {
return(o.data('curPosition') <=0 ) ? true : false;
}
function endOfShow() {
if (options.pagination) {
return (o.data('curPosition') >= numPages-1) ? true : false;
} else {
return (o.data('curPosition') >= (numItems - numVisibleItems) ) ? true : false;
}
}
function movePager() {
$('.activePage').removeClass('activePage');
$('.pager').eq(o.data('curPosition')).addClass('activePage');
}
function buildPager() {
/* Custom CSS rule for pager default */
var style = "<style type='text/css'> #luSliderPager li { float: left; display:block; width:13px; height:16px; padding: 0 5px; }";
style += ".pager { background:url('luSlider/images/pager_button-sprite.png') left top no-repeat; cursor:pointer; }.activePage { background-position:left -15px; }</style>";
$(style).appendTo("head");
var numItemsPerPage = o.width() / itemWidth;
var pager = "<ul id='luSliderPager'>";
for (var x = 0; x < numPages; x++ ) {
if (o.data('curPosition') == x) {
pager += "<li class='pager activePage'></li>";
}else {
pager += "<li class='pager'></li>";}
}
pager += "</ul>";
$(pager).appendTo(options.pager);
}
function showPager() {
}
}
});
})(jQuery);
</script>
<script>
$(function() {
/* * * * * * * * Slider Code * * * * * * * */
var myCB = function(o, options) {
// my callback function executed after every transition
//console.log(o.numVisibleItems);
}
$('#sliderContainer').luSlider({
element : $('li'),
next : $('#slide_terms_right'),
prev : $('#slide_terms_left'),
speed : 1000,
prevAtEnd : "slide_terms_prev_disabled",
nextAtEnd : "slide_terms_next_disabled",
elementClick : true,
pagination : true,
pager : "#pager",
callback : myCB
});
)};
</script>
</head>
<body>
<div id="sliderContainer">
<ul id="mySlides">
<li class="slide"></li>
<li class="slide"></li>
<li class="slide"></li>
</ul>
</div>
</body>
</html>
notes the line var el = options.element; is where I start to have issues. The example I mentioned of hard-coding & console.log that works is this: Code: ...
var el = options.element;
console.log(el); //displays what I'd expect, a jQuery object
el = o.find('li'); // only find li's that are children of the div attached to the plugin
console.log(el); //displays exactly what I'd expect, a jQuery object of JUST the right li's
// if I change el to be this new selector tho...the browser page will crash. 'Unresponsive Script' etc.
...
Please ignore anything hard-coded into the plugin, I tossed several things in for brevity. Also if you have any other code cleanup tips, I'm more than receptive. Also for this example I removed all of the crazy ajax and php and other template-y type stuff. I noticed the problem when I embedded the slider on my page and my top navigation menu (which uses a <ul>) started scrolling off the screen when I clicked on my slider arrows :P THANK YOU SO MUCH, -Celt Hi, Following this jQuery slideshow tutorial (Usecase 3 sample, about 2/3 down the page, this is the one without thumbnails): http://www.gcmingati.net/wordpress/w...vwt/index.html I constructed the slideshow: http://backstageweb.net/Salon/slideshowcode.htm ...which works perfectly in browser view locally (FF and IE). When uploaded to the server, however, I've got a static list of photos as you can see. Can someone shed some light on what the problem is? All relevant files are attached (I changed the images to simple colors to get the file size within the attachment limit). Thanks. John Hi everybody I have a problem I want a header that is a slideshow and use lightbox for other images. No I have this all working but not at the same time. If I use this code in this order only the first script that is the lightbox script works. PHP Code: <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/pirobox.js"></script> <script type="text/javascript"> $(document).ready(function(){ $().piroBox({ my_speed: 300, //animation speed bg_alpha: 0.5, //background opacity slideShow : 'true', // true == slideshow on, false == slideshow off slideSpeed : 3, //slideshow close_all : '.piro_close' // add class .piro_overlay(with comma)if you want overlay click close piroBox }); }); </script> <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="js/jquery.cycle.all.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.slideshow').cycle({ fx: 'scrollLeft', speed: 1000, timeout: 7000 }); }); </script> If I use this code so I switched the order only the slideshow works: PHP Code: <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="js/jquery.cycle.all.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.slideshow').cycle({ fx: 'scrollLeft', speed: 1000, timeout: 7000 }); }); </script> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/pirobox.js"></script> <script type="text/javascript"> $(document).ready(function(){ $().piroBox({ my_speed: 300, //animation speed bg_alpha: 0.5, //background opacity slideShow : 'true', // true == slideshow on, false == slideshow off slideSpeed : 3, //slideshow close_all : '.piro_close' // add class .piro_overlay(with comma)if you want overlay click close piroBox }); }); </script> I also tried this: but then they both did not work PHP Code: <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" src="js/jquery.cycle.all.min.js"></script> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/pirobox.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.slideshow').cycle({ fx: 'scrollLeft', speed: 1000, timeout: 7000 }); $().piroBox({ my_speed: 300, //animation speed bg_alpha: 0.5, //background opacity slideShow : 'true', // true == slideshow on, false == slideshow off slideSpeed : 3, //slideshow close_all : '.piro_close' // add class .piro_overlay(with comma)if you want overlay click close piroBox }); }); </script> Can you help me solve this problem so they both work? Hey all, 1) When clicking on a list in an accordion, it should change the quicktime movie playing in a main window area. It works in firefox but not in safari. The variable imgTitle holds the expected output (e.g. '../images/Intro-1.mov'). It changes the src attribute of the embed tag. This change works in Firefox where the new movie plays on click. However, when clicking the list item in safari, nothing happens. 2) There is a problem in firefox as well in that the movie overlays everything else on page, even though it should be behind the text. Positioning would be tedious given that there's many nested elements and I would have to set relative positioning to the entire page. Any reason for this behavior of embed tags? Code: $(".image_thumb ul li ul li").click(function(){
var imgTitle = $(this).find('a').attr("href");
var imgDesc = $(this).find('.block').html();
var imgDescHeight = $(".main_image").find('.block').height();
if ($(this).is(".active")) {
return false;
} else {
console.log(imgTitle);
$(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
$(".main_image .block").html(imgDesc).animate({ opacity: 0.85, marginBottom: "0" }, 250 );
$(".main_image embed").attr({ src: imgTitle});
});
}
$(".image_thumb ul li ul li").removeClass('active');
$(this).addClass('active');
return false;
}) .hover(function(){
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
Thanks for response. Hi, I have a form that I am submitting using JQuery, if I copy and paste the form into my main page, everything works fine. If I try to call the form in a separate page to onload none of the buttons work. Is there away around this? Not sure if providing my script helps or not, but just in case here it: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<title>Messages</title>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$('#submitNewSend, #submitNewSend2, #submitNewSave, #submitNewSave2').click(function(){
var btn = $(this).attr('id');
if(btn == 'submitNewSend'){
file = 'insertMessage.php';
Msg = 'Your message has been sent';
} else if(btn == 'submitNewSend2'){
file = 'insertMessage.php';
Msg = 'Your message has been sent';
} else if (btn == 'submitNewSave'){
file = 'insertSaveMessage.php';
Msg = 'Your message has been saved';
} else if (btn == 'submitNewSave2'){
file = 'insertSaveMessage.php';
Msg = 'Your message has been saved';
}
var data = $('#MessageNew').serialize();
$.post (file,data, function(){
alert(Msg);
$('#MessageNew').each (function(){
this.reset();
});
});
return false;
});
});
</script>
<script type="text/javascript">
function loadXMLDoc(File,ID){
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
}
else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById(ID).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST",File,true);
xmlhttp.send();
}
</script>
<head>
<body onload="loadXMLDoc('getloadCompose.php','txtHintCompose')">
<br />
<br />
<div id="txtHintCompose"></div>
</form>
</body>
</html>
And the getloadCompose.php is: Code:
<form action="" method="post" name="MessageNew" id="MessageNew" autocomplete="OFF">
<table id="new" width="60%">
<tr>
<th>Compose Message</th>
</tr>
<tr>
<td class="first">
<input type="button" class="button3" name="submitNewSend2" id="submitNewSend2" value="Send">
<input type="button" class="button3" name="submitNewSave2" id="submitNewSave2" value="Save">
<input type="button" class="button3" name="submitNewCancel" value="Cancel" onclick="loadXMLDocRefresh('getloadInbox.php','txtHintMessage')" />
</td>
</tr>
<tr>
<td>
<br />
<label class="two"><b>To:</b></label><input type="text" class="input" name="to" id="to" value=""><input type="text" class="input" name="recipient" id="recipient" value="" onkeyup="showHint(this.value, 'getEmailName.php','txtHintEmailTo')" size="70" /><br /><br />
<div id="txtHintEmailTo"></div>
</td>
</tr>
<tr>
<td>
<label class="two"><b>Subject:</b></label><input type="text" class="input" name="subject" id="subject" value="enter subject" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'enter subject':this.value;" size="70" /><br /><br />
</td>
</tr>
<tr>
<td>
<label class="two"><b>Message: </b></label><div class="scroll"><textarea rows="10" cols="75" class="input" name="messsage" id="message">Enter Message</textarea></div><br /><br /><br />
</td>
</tr>
<tr>
<td class="first">
<input type="button" class="button3" name="submitNewSend" id="submitNewSend" value="Send">
<input type="button" class="button3" name="submitNewSave" id="submitNewSave" value="Save">
<input type="button" class="button3" name="submitNewCancel" value="Cancel" onclick="loadXMLDocRefresh('getloadInbox.php','txtHintMessage')" />
</td>
</tr>
</table>
</form>
I know I have buttons doing the same function,there is an ease of use reason for it. I can put everything on my main page if necessary, but it wouldn't really be doing exactly what I want it to do. I'm new to javascript. Can someone help me with this menu? Here is my html code: <head> <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /> <link rel="icon" type="image/x-icon" href="favicon.ico" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Alaska Fur Gallery</title> <link rel="stylesheet" type="text/css" href="style.css" /> <script language="JavaScript" src="js.js"></script> <link rel="stylesheet" type="text/css" href="activemenu.css" /> <script src="jquery-activemenu.js" type="text/javascript"></script> <script type="text/javascript" src="fancybox/jquery.fancybox-1.3.1.js"></script> <link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.1.css" media="screen" /> <script type="text/javascript"> $(document).ready(function() { $("a#fancybox").fancybox({ 'titleShow' : false, type:'image' }); //show the footer $("#footer").css("visibility","visible"); //initialize activeMenu initMenu(); }); </script> </head> <body> <div id="container"> <div id="header"> <a href="index.html"><div id="logolink">Alaska Fur Gallery</div></a> <div id="answer">We're Here to Answer Your Questions. Call Us Today at 334-277-7610</div> <div id="underlinemenu" class="ulmhead"> <ul> <li><a href="index.html" style="border:0;">Home</a></li> <li><a href="content2e96.html?id=431503">About</a></li> <li><a href="content9bf1.html?id=431504">Services</a></li> <li><a href="find_location.html">Locations</a></li> <li><a href="ct.html">Contact Us</a></li> </ul> </div> <div class="clear"></div> <div id="topmenu"> <ul id="activeMenu"> <li style="top: 0; left:0px"><a href="shopa146.html?action=cat&catID=20529" id="furs">Furs</a></li> <li style="top: 0; left:66px"><a href="shop52df.html?action=cat&catID=20541" id="leather">Leather & Fur</a></li> <li style="top: 0; left:210px"><a href="shop9e9f.html?action=cat&catID=20575" id="cashmere">Cashmere & Fur</a></li> <li style="top: 0; left:374px"><a href="shop80c4.html?action=cat&catID=21239" id="outerwear">Outerwear</a></li> <li style="top: 0; left:493px"><a href="shop0376.html?action=cat&catID=20544" id="plus">Plus Sizes</a></li> <li style="top: 0; left:604px"><a href="shop2060.html?action=cat&catID=20580" id="accessories">Accessories</a></li> </ul> </div><!-- topmenu --> </div><!-- header --> <!--submenu divs--> <div id="furs_submenu"> <ul class="dropdown" style="width:130px; float:left; margin:0 30px 0 0;"> <span>Women's Furs</span> <li><a href="shopde5e.html?action=cat&catID=20572">Mink</a></li> <li><a href="shop2705.html?action=cat&catID=20574">Sable</a></li> <li><a href="shop5c0d.html?action=cat&catID=20570">Chinchilla</a></li> <li><a href="shopdfa7.html?action=cat&catID=20568">Beaver</a></li> <li><a href="shop04fa.html?action=cat&catID=20571">Lynx</a></li> <li><a href="shop65dc.html?action=cat&catID=20569">Bobcat</a></li> <li><a href="shopc9fc.html?action=cat&catID=20622">Coyote</a></li> <li><a href="shop65f8.html?action=cat&catID=20539">Fox</a></li> <li><a href="shop3276.html?action=cat&catID=20573">Rabbit</a></li> </ul> <ul class="dropdown" style="width:140px; float:left;"> <span>Men's Furs</span> <li><a href="shop2ef6.html?action=cat&catID=20531">Mink</a></li> <li><a href="errorfe10.html?action=cat&catID=20532">Sable</a></li> <li><a href="errorfe10.html?action=cat&catID=20533">Chinchilla</a></li> <li><a href="errorfe10.html?action=cat&catID=20534">Beaver</a></li> <li><a href="errorfe10.html?action=cat&catID=20535">Lynx</a></li> <li><a href="errorfe10.html?action=cat&catID=20536">Bobcat</a></li> <li><a href="shopfc5b.html?action=cat&catID=20618">Coyote</a></li> <li><a href="shop88e4.html?action=cat&catID=20537">Fox</a></li> <li><a href="errorfe10.html?action=cat&catID=20540">Rabbit</a></li> </ul> </div> <div id="leather_submenu"> <ul class="dropdown"> <li><a href="shop973d.html?action=cat&catID=20542">Women's Leather & Fur</a></li> <li><a href="shop4cc6.html?action=cat&catID=20543" style="border:0;">Men's Leather & Fur</a></li> </ul> </div> <div id="cashmere_submenu"> <ul class="dropdown"> <li><a href="shop3f01.html?action=cat&catID=20576">Coats</a></li> <li><a href="shopd4d8.html?action=cat&catID=20577">Strollers</a></li> <li><a href="shop7899.html?action=cat&catID=20578">Jackets</a></li> <li><a href="shopcba4.html?action=cat&catID=20579" style="border:0;">Capes</a></li> </ul> </div> <div id="plus_submenu"> <ul class="dropdown" style="width:130px; float:left; margin:0 30px 16px 0;"> <span>Women's Furs</span> <li><a href="shop2530.html?action=cat&catID=20564">Mink</a></li> <li><a href="shop807e.html?action=cat&catID=20566">Sable</a></li> <li><a href="shopbc8f.html?action=cat&catID=20557">Chinchilla</a></li> <li><a href="shopcb16.html?action=cat&catID=20553">Beaver</a></li> <li><a href="shop3cb8.html?action=cat&catID=20561">Lynx</a></li> <li><a href="shopb6e3.html?action=cat&catID=20555">Bobcat</a></li> <li><a href="shop1e6c.html?action=cat&catID=20621">Coyote</a></li> <li><a href="shopc08b.html?action=cat&catID=20559">Fox</a></li> <li><a href="shop0495.html?action=cat&catID=20562">Rabbit</a></li> </ul> <ul class="dropdown" style="width:140px; float:left;"> <span>Men's Furs</span> <li><a href="shop9b23.html?action=cat&catID=20565">Mink</a></li> <li><a href="shop10dc.html?action=cat&catID=20567">Sable</a></li> <li><a href="shop8154.html?action=cat&catID=20556">Chinchilla</a></li> <li><a href="shop0b63.html?action=cat&catID=20551">Beaver</a></li> <li><a href="shopa40f.html?action=cat&catID=20560">Lynx</a></li> <li><a href="shopd843.html?action=cat&catID=20554">Bobcat</a></li> <li><a href="shopa2c0.html?action=cat&catID=20620">Coyote</a></li> <li><a href="shopb0b2.html?action=cat&catID=20558">Fox</a></li> <li><a href="shopd3b0.html?action=cat&catID=20563">Rabbit</a></li> </ul> <div class="clear"></div> <ul class="dropdown" style="width:130px; float:left; margin:0 30px 10px 0;"> <span>Leather & Fur</span> <li><a href="shop91d6.html?action=cat&catID=20549">Women's Leather & Fur</a></li> <li><a href="shop8605.html?action=cat&catID=20548">Men's Leather & Fur</a></li> </ul> <ul class="dropdown" style="width:140px; float:left; margin:-6px 0 0 0;"> <li><a href="shope478.html?action=cat&catID=20550" style="border:0;"><strong>Cashmere & Fur</strong></a></li> </ul> </div> <div id="accessories_submenu"> <ul class="dropdown"> <li><a href="shop2f26.html?action=cat&catID=20581">Fur Hats</a></li> <li><a href="shop9989.html?action=cat&catID=20582">Fur Headbands</a></li> <li><a href="shop935f.html?action=cat&catID=20583">Fur Earmuffs</a></li> <li><a href="shopd2bf.html?action=cat&catID=20584">Gloves with Fur</a></li> <li><a href="shop2c08.html?action=cat&catID=20585">Fur Boot Toppers</a></li> <li><a href="shop9f4f.html?action=cat&catID=20586">Fur Scarves & Flings</a></li> <li><a href="shop3d06.html?action=cat&catID=20587">Fur Blankets</a></li> <li><a href="shop4bf4.html?action=cat&catID=20588">Fur Handbags</a></li> <li><a href="shop611a.html?action=cat&catID=20589" style="border:0;">Mink Teddy Bears</a></li> </ul> </div> Here is the javascript: /* jQuery ActiveMenu v1.0 Author: Miguel Sanchez 12/2009 */ var timeouts = []; //for hiding the menu purposes function initMenu(){ var offclass; var menuAnchor; $("#activeMenu").find("li").each(function() { //get a reference to the anchor inside the li menuAnchor = $(this).children(":first"); //get the name of the offclass offclass = $(menuAnchor).attr("id")+"_off"; //assign off class to item $(menuAnchor).addClass(offclass); //assign hover event handler to main menu $(menuAnchor).hover( function (event) { submenu_show(event.target); }, function (event) { submenu_hide(event.target); } }); //assign hover events to submenu $("div [id$=_submenu]").hover( function (event) { submenu_over(event.target); }, function (event) { submenu_out(event.target); } } function submenu_show(caller){ //hide all the submenus $("div [id$=_submenu]").hide(); //get the id of the main menu item var mainMenuItemId = $(caller).attr("id") //get the "on" class name var onclass = mainMenuItemId+"_on"; //get the "off" class name var offclass = mainMenuItemId+"_off"; //remove off class to item $(caller).removeClass(offclass); //assign on class to item $(caller).addClass(onclass); // get the id of the submenu var targetSubMenuId = mainMenuItemId+"_submenu"; //show the submenu $("#"+targetSubMenuId).slideDown("fast"); } function submenu_hide(caller){ //get the id of the main menu item var mainMenuItemId = $(caller).attr("id"); //get the "on" class name var onclass = mainMenuItemId+"_on"; //get the "off" class name var offclass = mainMenuItemId+"_off"; //remove on class to item $(caller).removeClass(onclass); //assign off class to item $(caller).addClass(offclass); timeouts[mainMenuItemId] = setTimeout(function() { $("#"+mainMenuItemId+"_submenu").slideUp("fast"); }, 200); } function submenu_over(caller){ //get a reference to the containing div var subMenuDiv = $(caller).closest("div"); //show the div $(subMenuDiv).show(); //get the id of the main menu var mainMenuItemId = $(subMenuDiv).attr("id"); mainMenuItemId = mainMenuItemId.replace("_submenu",""); clearTimeout(timeouts[mainMenuItemId]); //remove the "off" class $("#"+mainMenuItemId).removeClass(mainMenuItemId+"_off"); //add the "on" class $("#"+mainMenuItemId).addClass(mainMenuItemId+"_on"); } function submenu_out(caller){ //get a reference to the containing div var subMenuDiv = $(caller).closest("div"); $(subMenuDiv).hide(); //get the id of the main menu var menuAnchorId = $(subMenuDiv).attr("id"); menuAnchorId = menuAnchorId.replace("_submenu",""); //remove the "on" class $("#"+menuAnchorId).removeClass(menuAnchorId+"_on"); //add the "off class $("#"+menuAnchorId).addClass(menuAnchorId+"_off"); } Here is the CSS styling: /* graphical menu codes */ #topmenu ul { list-style: none; width: 738px; height:52px; padding:0; margin: 0px; position: absolute; top:94px; right:0; overflow: hidden; } #topmenu li { display: inline; position: absolute; } #topmenu li a{ float: left; font-size:11px; line-height: 14px; white-space: nowrap; text-transform: uppercase; text-align:center; padding: 0 0 0 0; text-indent:777px; overflow:hidden; height:52px; } #topmenu li a:hover { color: #bceffa; } a.on { color: #bceffa; } #topmenu a { color: #ffffff; text-decoration: none; } #topmenu a:hover { color: #bceffa; text-decoration: none; } .furs_off { background: url("graphics/topmenu2.gif") 0 0 no-repeat; width:66px; } .furs_on { background: url("graphics/topmenu2.gif") 0 -52px no-repeat; } .leather_off { background: url("graphics/topmenu2.gif") -66px 0 no-repeat; width:144px; } .leather_on{ background: url("graphics/topmenu2.gif") -66px -52px no-repeat; } .cashmere_off { background: url("graphics/topmenu2.gif") -210px 0 no-repeat; width:165px; } .cashmere_on{ background: url("graphics/topmenu2.gif") -210px -52px no-repeat; } .outerwear_off { background: url("graphics/topmenu2.gif") -374px 0 no-repeat; width:119px; } .outerwear_on{ background: url("graphics/topmenu2.gif") -374px -52px no-repeat; } .plus_off { background: url("graphics/topmenu2.gif") -493px 0 no-repeat; width:111px; } .plus_on{ background: url("graphics/topmenu2.gif") -493px -52px no-repeat; } .accessories_off { background: url("graphics/topmenu2.gif") -604px 0 no-repeat; width:133px; } .accessories_on{ background: url("graphics/topmenu2.gif") -604px -52px no-repeat; } ul.dropdown { list-style: none; margin: 0; padding: 0; border: none; z-index:10000; position:relative; } ul.dropdown li span { display: block; _display:inline-block; text-decoration: none; } ul.dropdown li a { display: block; position: relative; _display:inline-block; /* so IE doesn't add space between elements */ _width: 83%; /* makes block fill width in IE */ padding: 6px 10px 6px 10px; font-size: 13px; color: #ffffff; text-decoration: none; border-bottom:1px solid #b78833; } ul.dropdown li a:hover{ color: #ffffff; background: #e3a73a; text-decoration: none; } .dropdown span{ font-weight:bold; color:#64450f; margin:0 0 0 10px; } #furs_submenu { width:300px; padding: 5px 0; background: #c8912f; position: absolute; top: 146px; left: 260px; display: none; z-index:1000; } #leather_submenu { width:166px; padding: 5px 0; background: #c8912f; position: absolute; top: 146px; left: 325px; display: none; z-index:1000; } #cashmere_submenu { width:192px; padding: 5px 0; background: #c8912f; position: absolute; top: 146px; left: 470px; display: none; z-index:1000; } #plus_submenu { width:300px; padding: 5px 0; background: #c8912f; position: absolute; top: 146px; left: 698px; display: none; z-index:1000; } #accessories_submenu { width:158px; padding: 5px 0; background: #c8912f; position: absolute; top: 146px; left: 840px; display: none; z-index:1000; } Hey guys, I'd like to think this is fairly simple but unfortunately my knowldege of jquery is limited to using prebuilt scripts and changing a few variables to get what i need. I created a drop down menu with a slide down/up animation for submenus, which worked out just as I wanted. I ran into troubles though when trying to add a nested menu to the drop down, but with a slide animation going from left to right. I'm sure my explanation isn't very clear, so please take a look http://www.palousehillscomputing.com...rop/index.html The nested submenu I am speaking of should only open when hovering occurs on the 'Item 01' link, but as you can see it also opens when hovering over the buyers link. Secondly, my attempt to slide from left to right on this ul is not working. It seems to be sliding down even though this was not defined in the code. I've tried playing around with it for a while now and can't seem to figure this out so I'd appreciate if someone pointed me in the right direction. Thanks hi how can i make somethin like the menus A,b, bla bla one this site? http://www.kanzenanimes.net/animes Friends, i have a problem... I hope all pf you can solve my problem... It's all about Mega Menu JQuery. I already download the script in this javascriptkit.com And the problem is... I can't set the alignment of mega menu drop down because in this script to set the left alignment is using var menu left where this script is using calculation of windows width and mega menu size. in the example on javacriptkit.com using only one menu, how if in this case there is more than one menu? for example i already upload the picture to describe the problem. Picture 1 is i have put mega menu script and it's look good and fine. And then in the second menu where is the porblem begin. Picture 2 mega menu sliding on the left If i put the script in the third and more menu, the mega menu drop down sliding more left. It should be center. I' already found the problem script in .js but i'm still find the solutions... Pleas help me... my project is www.restomart.com ( already online ) and i want make a mega menu like www.surlatable.com ( online ) Pleas once again.HELP me .... Thanks so much... need help adding a one second delay to a drop down menu. don't want people triggering it by accident: http://www.corneliodesign.com/menu/ i used hoverIntent to delay it: http://cherne.net/brian/resources/jq...verIntent.html i got the script in the http://www.corneliodesign.com/menu/s...hoverIntent.js but it's not actually working for me. please see if could look at code, tell what's wrong or gimme another options, would be extremely appreciative, thanks, julio hi, I am fairly new to jquery and would like som direction on how to complete this menu. I have a list which has 6 bg images which have on and active state images. these are are currenly changing when you hover using the a:hover css. my question is i have a fairly large page and as you scroll down the menu follows the top of the screen but what i would like to happen is when the menu reaches a certain point on the page the menu item that it corrosponds to becomes active (changes to the on state bg image). i have an idea that as you scroll down the page and you get to a certain position on the page you would remove the classes for all of them. use the selecter to select my id and add a special class with that specific bg image on it. the only part i am struggling with is how would i determin how far down the page i am i know theres a function called .position() and you can use position.top. but not sure how i can use that to help me. if you could point me in the direction or just a hint that would be really helpful. thanks in advance Hi guys Im try to create a menu (http://valkesh.000space.com/) that will have 2 or 3 images loaded when hovering the item. As it currently is, I would like the first 20px to show green, and the rest to show Red. For now I am only using colors because eventually I would like to use images and have the Left and Right pics set at a fixed width and the center image growing appropriately. Below is the script I am using for the entire menu. Code: <html>
<head>
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function () {
//Append a div with hover class to all the LI
$('#navMenu li').append('<div class="left"><div class="right"></div></div>');
$('#navMenu li').hover(
//Mouseover, fadeIn the hidden hover class
function() {
$(this).children('div').fadeIn('1000');
},
//Mouseout, fadeOut the hover class
function() {
$(this).children('div').fadeOut('1000');
}).click (function () {
//Add selected class if user clicked on it
$(this).addClass('selected');
});
});
//]]>
</script>
<style type="text/css">
#navMenu {
margin:0;
padding:0;
list-style:none;
font-family:arial;
text-align:center;
line-height:60px;
}
#navMenu li
{
background-color:Gray;
float:left;
width:120px;
height:40px;
line-height:40px;
border:solid 1px black;
position:relative;
}
#navMenu li a {
z-index:20;
display:block;
height:40px;
position:relative;
color:Black;
}
#navMenu li .left {
background-color:Green;
position:absolute;
width:20px;
height:40px;
top:0px;
z-index:0;
display:none;
}
#navMenu li .right {
background-color:Red;
position:absolute;
width:100px;
height:70px;
top:0px;
z-index:0;
display:none;
}
#navMenu li.selected {
background-color:Blue;
}
</style>
</head>
<body>
<ul id="navMenu">
<li><a href="#">Test 1</a></li>
<li><a href="#">Test 2</a></li>
<li><a href="#">Test 3</a></li>
</ul>
</body>
</html>
I would appreciate any help given! Thanks http://www.javascriptkit.com/script/...megamenu.shtml this drop down menu works great however, if you hit control F5 in firefox, sometimes (alot) will display incorrectly). i have included two images in here just to show what i'm talking about. if you know how to fix this. please let me know. thank you and really appreciate it. Code:
$(document).ready(function(){
$("#logo,#menu").hover(
function () {
$("#menu").stop().slideDown('fast');
},
function () {
$("#menu").stop().slideUp('slow');
}
);
});
This menu slides down on hover and slides up on un hover. If I mouse back on either object while slideUp() is happening, the animation stops. Then if i un hover / re-hover , the menu slides down to where i interrupted the initial slideUp(). I'd like for the menu to drop back down if I interrupt slideUp() or some type of solution. How can I do this? 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;
}
Hi I'm trying to add a jquery dropdown menu to my navigation bar. My navigation bar is coded properly But I can't figure out how to add a dropown menu to one of my navigation bar's menu items. I have the navigation bar set up as <div> <ul id="navbar"> <li id="home"><a href="home.html"><span>HOME</span></a></li> <li id="about"><a href="#"><span>ABOUT</span></a></li> <li id="gallery"><a href="#"><span>GALLERY</span></a></li> <li id="sources"><a href="#"><span>SOURCES</span></a></li> </ul> <!-- end navbar --> </div> and I want to add a two item dropdown menu to the Gallery item. Thanks in advance. I am having an issue using the Cut & Paste jQuery Mega Menu. I am using it on the main page of my future forum (test forum is here - http://illini-nation.deepermethod.co...nity/index.php It's the button labeled 'Forum Categories'). The mega menu works fine on the main page of the forum, but once I drill down into the forums, the mega menu no longer works. The mega menu ONLY works on the index of the forum. Any and all help is greatly appreciated. IlliniCrusader |
|||||||