JavaScript - Jquery Mega Menu Not Working On My Forum

Hello,

I'm attempting to use a jQuery tooltip (Tipsy, located here) in the index of a forum. What I'd like to do is remove the forum's description and place it in a pop-up when you hover over the forum name.

I've managed to get it to work, but only on the very first forum name. After that, they simply display the default browser tooltip.

Here is the script code that goes in the header:

Code:

<script type='text/javascript'>
jQuery.noConflict();
  jQuery(function() {
    jQuery('#tooltip').tipsy({gravity: 's'});
  });
</script>

Here is the part of the template that is affected:

Code:

<h4>
    <a href="{parse url="showforum={$forum_data['id']}" seotitle="{$forum_data['name_seo']}" template="showforum" base="public"}" id='tooltip' title='{$forum_data['description']}'>{$forum_data['name']}</a>
</h4>

And the Tipsy library can be viewed he http://www.xasper.net/jquery.tipsy.js

Does anyone know what could get this to work?

I appreciate any assistance. Thank you.

hi, i have a jquery problem...

this script is not working with jquery-1.4.2.min, but it works with jquery-1.2.6.min.js, can anyone help me???the script is the above:
(it is not working the tab actions, the slideout works...)
http://www.benjaminsterling.com/wp-c...es/sidetab.htm

the javascript code is the above:
PHP Code:
var jqsideTabs;
var tabs, h = 50, r = 0,ra = 0;
$(document)
.ready(function(){
    jqsideTabs = $('#sideTabs').addClass('closed');
    
    tabs = jqsideTabs
    .find('.tab h3')
    .clone()
    .appendTo(jqsideTabs)
    .each(function(i){
        var that = $(this), cls = '',ow,newThis, newEl;
        
        if( i == 0 ) cls = ' active';
        newEl = $('<a href="#" class="tabLinks'+cls+'">' + that.text() + '</a>');
        that.replaceWith(newEl);
        
        ow = newEl.outerWidth();
        
        if( i == 0 ) ra = ow;
        else r = ow;
        
        h = newEl.css({'top':h , 'right': -ow }).height() + h;
        
        newThis = newEl.get(0);
        newThis.jq = newEl;
        newThis.i = i;
        
        newEl.click(function(){
            var el = this.jq;
            
            if( jqsideTabs.hasClass( 'closed' ) ){
                jqsideTabs.removeClass('closed');
            }
            else if( !jqsideTabs.hasClass( 'closed' ) && el.hasClass('active') ){
                jqsideTabs.addClass('closed');
            }
            
            el
            .siblings()
                .removeClass('active')
                .css({'right': -r })
            .end()
            .addClass('active')
            .css({'right': -ra });
            
            tabs.eq( this.i ).show().siblings('.tab').hide();
            
            return false;
        });
    })
    .end()
    .parent()
        .eq(0)
        .addClass('active')
    .end()
        .filter(':not(:eq(0))')
        .hide()
    .end();
    
    jqsideTabs.bind("mouseleave",function(){
        jqsideTabs
        .animate({left:-310}, 'fast', function(){
            jqsideTabs.addClass('closed').removeAttr('style');
        });
    });
}); 


and the html file is:
[HTML]
<div id="sideTabs">

<div class="tab">
<h3>Tab 1</h3>
<div class="gut">
<p>Some text</p>
</div>
</div>
<div class="tab">
<h3>Tab 2</h3>

<div class="gut">
<ul>
<li>link</li>
</ul>
</div>
</div>
<div class="tab">
<h3>Tab 3</h3>

<div class="gut">
<ul>
<li>link</li>
</ul>
</div>
</div>
</div>
[/HTML]
the problem is that the tab button works, but the content doesnt change...in all of tabs showing the same text(showing all tbas content)....

can anyone help...please.....

Hi All,

I have two sites using zeroclipboard (hosted at google code) one works only in firefox and barely, the other is not working at all. It does use Flash, but I think the issue is on the js side of things.

On both links, clicking the filename below the thumbnail will copy and add the link as an IMG code to a div below.

*working* link
http://pics.boasbysatyra.com/access/spiders.php
This one only works in FF, and the clip area is offset badly.

Here is the template for the zc code:

Code:

<div class="photo" style="float: left; padding: 4px;">
<div class="exif"><a href="[~41~]?dir=[+images_dir+]&file=[+filename+]" rel="shadowbox[exif_[+content_id+]]" title="exif data for [+filename+]" alt="exif data for [+filename+]">EXIF Data</a></div>
           <a class="thumb" rel="shadowbox[[+content_id+]]" href="[+images_dir+][+filename+]" title="[+title+] | [+description+]">
                <img src="[+thumbs_dir+][+filename+]" alt="[+title+]" />
            </a>
 <div class="filecode" id="d_clip_button[+filename+]">[+filename+]
       <script language="JavaScript">
           var clip = new ZeroClipboard.Client();
           clip.setText( 'http://pics.boasbysatyra.com[+images_dir+][+filename+]' );
           clip.glue( 'd_clip_button[+filename+]' );
           clip.addEventListener( 'onComplete', my_complete );

        function my_complete( client, text ) {
                $('.picklist').append('<div class="piclinks">[IMG]' + text + '[/IMG]</div>');
        }
       </script>
</div>
</div>

And the JS for the page:

Code:

var needRef;
//flag for page reload
function pEdit(){
needRef = 1;
}

Shadowbox.init({
    handleOversize: "resize",
    modal: true,
    initialHeight: 32,
    initialWidth: 400,
    overlayOpacity: 0.85,
        onClose: function(){//check for reload flag and reload
if (needRef == 1){window.location.href=window.location.href;}
}
});
ZeroClipboard.setMoviePath('/js/zc/ZeroClipboard10.swf');
function initMenu() {
    $('#menu ul').hide();
    $('#menu ul:first').show();
    $('#menu li a').click(function() {
        var checkElement = $(this).next();
        if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
            //return false;
            }
        if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
            $('#menu ul:visible').slideUp('normal');
            checkElement.slideDown('normal');
            return false;
        }
    });
}
$(document).ready(function() {
    initMenu();
});

Now on to the totally broken one - it creates the elements required, but gives them a 0x0 area!

http://jb.boasbysatyra.com/forum-pic...cs/nature.html

Code:

div class="photo" style="float: left; margin: 4px;">
<div class="exif"><a href="[~133~]?dir=[+images_dir+]&file=[+filename+]" rel="shadowbox[exif_[+content_id+]]" title="exif data for [+filename+]" alt="exif data for [+filename+]">EXIF Data</a></div>
           <a class="thumb" rel="shadowbox[[+content_id+]]" href="[+images_dir+][+filename+]" title="[+title+] | [+description+]">
                <img src="[+thumbs_dir+][+filename+]" alt="[+title+]" />
            </a>
<div id="d_clip_container[+filename+]" style="position:relative; width: 120px; height: 0.5em;">
 <div class="filecode" id="d_clip_button[+filename+]">[+filename+]
       <script language="JavaScript">
           var clip = new ZeroClipboard.Client();
           clip.setText( 'http://jb.boasbysatyra.com[+images_dir+][+filename+]' );
           clip.glue( 'd_clip_button[+filename+]','d_clip_container[+filename+]' );
           clip.addEventListener( 'onComplete', my_complete );

        function my_complete( client, text ) {
                $('.picklist').append('<div class="piclinks">[IMG]' + text + '[/IMG]</div>');
        }
       </script>
</div>
</div>
</div>

On this one I wrapped it as suggested on the zc site, I originally started with the code for the other site - it didn't work, so I went tweaking...

Here is the JS:

Code:

var needRef;
//flag for page reload
function pEdit(){
needRef = 1;
}
Shadowbox.init({
    handleOversize: "resize",
    modal: true,
    initialHeight: 32,
    initialWidth: 400,
    overlayOpacity: 0.85,
        onClose: function(){//check for reload flag and reload
if (needRef == 1){needRef = 0; window.location.href=window.location.href;}
}
});
ZeroClipboard.setMoviePath('/js/zc/ZeroClipboard10.swf');

$(document).ready(function() {
$(".dim img").fadeTo("slow", 0.65);
$(".dim img").hover(function(){
$(this).fadeTo("slow", 1.0);
},function(){
$(this).fadeTo("slow", 0.65);
});
$('#mainContent').hide().fadeIn(1200);
        //When page loads...
        $(".tab_content").hide(); //Hide all content
//      $("ul.tabs li:first").addClass("active").show(); //Activate first tab
//      $(".tab_content:first").show(); //Show first tab content

        //On Click Event
        $("ul.tabs li").click(function() {

                $("ul.tabs li").removeClass("active"); //Remove any "active" class
                $(this).addClass("active"); //Add "active" class to selected tab
                $(".tab_content").hide(); //Hide all tab content

                var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
                $(activeTab).fadeIn(); //Fade in the active ID content
                return false;
        });

});
(function($) {
   $(document).ready(function(){
 $('.menu1').ptMenu();
       $('.menu2').ptMenu({vertical:true});
   });
})(jQuery);

I have taken a look at this for a few days and tried many things with no luck, any help is appreciated.

Thanks!

I have a usercontrol which get inputs from the user and show the slideshows. I have added jquery.js and jqfancytransitions.js to the control. when i apply the effects dynamically it is working on local iis but the same coding is not working on iis server. The link for the page is http://www.gloriatech.com/slideshow.aspx . Actually it display the images but no effects are applied. I also checked the js files, it is in right path only.When i checked this page in firebug , it shows the error which is " Sys is undefined". I dont know how to solve it. Can anyone help me?

Thanx in advance.

hi how can i make somethin like the menus A,b, bla bla
one this site?

http://www.kanzenanimes.net/animes

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.

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&amp;catID=20529" id="furs">Furs</a></li>
<li style="top: 0; left:66px"><a href="shop52df.html?action=cat&amp;catID=20541" id="leather">Leather & Fur</a></li>
<li style="top: 0; left:210px"><a href="shop9e9f.html?action=cat&amp;catID=20575" id="cashmere">Cashmere & Fur</a></li>
<li style="top: 0; left:374px"><a href="shop80c4.html?action=cat&amp;catID=21239" id="outerwear">Outerwear</a></li>
<li style="top: 0; left:493px"><a href="shop0376.html?action=cat&amp;catID=20544" id="plus">Plus Sizes</a></li>
<li style="top: 0; left:604px"><a href="shop2060.html?action=cat&amp;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&amp;catID=20572">Mink</a></li>
<li><a href="shop2705.html?action=cat&amp;catID=20574">Sable</a></li>
<li><a href="shop5c0d.html?action=cat&amp;catID=20570">Chinchilla</a></li>
<li><a href="shopdfa7.html?action=cat&amp;catID=20568">Beaver</a></li>
<li><a href="shop04fa.html?action=cat&amp;catID=20571">Lynx</a></li>
<li><a href="shop65dc.html?action=cat&amp;catID=20569">Bobcat</a></li>
<li><a href="shopc9fc.html?action=cat&amp;catID=20622">Coyote</a></li>
<li><a href="shop65f8.html?action=cat&amp;catID=20539">Fox</a></li>
<li><a href="shop3276.html?action=cat&amp;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&amp;catID=20531">Mink</a></li>
<li><a href="errorfe10.html?action=cat&amp;catID=20532">Sable</a></li>
<li><a href="errorfe10.html?action=cat&amp;catID=20533">Chinchilla</a></li>
<li><a href="errorfe10.html?action=cat&amp;catID=20534">Beaver</a></li>
<li><a href="errorfe10.html?action=cat&amp;catID=20535">Lynx</a></li>
<li><a href="errorfe10.html?action=cat&amp;catID=20536">Bobcat</a></li>
<li><a href="shopfc5b.html?action=cat&amp;catID=20618">Coyote</a></li>
<li><a href="shop88e4.html?action=cat&amp;catID=20537">Fox</a></li>
<li><a href="errorfe10.html?action=cat&amp;catID=20540">Rabbit</a></li>
</ul>
</div>

<div id="leather_submenu">
<ul class="dropdown">
<li><a href="shop973d.html?action=cat&amp;catID=20542">Women's Leather & Fur</a></li>
<li><a href="shop4cc6.html?action=cat&amp;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&amp;catID=20576">Coats</a></li>
<li><a href="shopd4d8.html?action=cat&amp;catID=20577">Strollers</a></li>
<li><a href="shop7899.html?action=cat&amp;catID=20578">Jackets</a></li>
<li><a href="shopcba4.html?action=cat&amp;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&amp;catID=20564">Mink</a></li>
<li><a href="shop807e.html?action=cat&amp;catID=20566">Sable</a></li>
<li><a href="shopbc8f.html?action=cat&amp;catID=20557">Chinchilla</a></li>
<li><a href="shopcb16.html?action=cat&amp;catID=20553">Beaver</a></li>
<li><a href="shop3cb8.html?action=cat&amp;catID=20561">Lynx</a></li>
<li><a href="shopb6e3.html?action=cat&amp;catID=20555">Bobcat</a></li>
<li><a href="shop1e6c.html?action=cat&amp;catID=20621">Coyote</a></li>
<li><a href="shopc08b.html?action=cat&amp;catID=20559">Fox</a></li>
<li><a href="shop0495.html?action=cat&amp;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&amp;catID=20565">Mink</a></li>
<li><a href="shop10dc.html?action=cat&amp;catID=20567">Sable</a></li>
<li><a href="shop8154.html?action=cat&amp;catID=20556">Chinchilla</a></li>
<li><a href="shop0b63.html?action=cat&amp;catID=20551">Beaver</a></li>
<li><a href="shopa40f.html?action=cat&amp;catID=20560">Lynx</a></li>
<li><a href="shopd843.html?action=cat&amp;catID=20554">Bobcat</a></li>
<li><a href="shopa2c0.html?action=cat&amp;catID=20620">Coyote</a></li>
<li><a href="shopb0b2.html?action=cat&amp;catID=20558">Fox</a></li>
<li><a href="shopd3b0.html?action=cat&amp;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&amp;catID=20549">Women's Leather & Fur</a></li>
<li><a href="shop8605.html?action=cat&amp;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&amp;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&amp;catID=20581">Fur Hats</a></li>
<li><a href="shop9989.html?action=cat&amp;catID=20582">Fur Headbands</a></li>
<li><a href="shop935f.html?action=cat&amp;catID=20583">Fur Earmuffs</a></li>
<li><a href="shopd2bf.html?action=cat&amp;catID=20584">Gloves with Fur</a></li>
<li><a href="shop2c08.html?action=cat&amp;catID=20585">Fur Boot Toppers</a></li>
<li><a href="shop9f4f.html?action=cat&amp;catID=20586">Fur Scarves & Flings</a></li>
<li><a href="shop3d06.html?action=cat&amp;catID=20587">Fur Blankets</a></li>
<li><a href="shop4bf4.html?action=cat&amp;catID=20588">Fur Handbags</a></li>
<li><a href="shop611a.html?action=cat&amp;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);
}
&nbsp;

});

//assign hover events to submenu
$("div [id$=_submenu]").hover(
function (event) {
submenu_over(event.target);
},
function (event) {
submenu_out(event.target);
}
&nbsp;


}


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

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

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?

JAVASCRIPT (move.js);

Code:

<script type="text/javascript">
$().ready(function()
{
  $('#ex3').jqDrag('.jqDrag').jqResize('.jqResize');
});
</script>

HTML:

Code:

<script src="includes/js/move.js"></script>
<div id="ex3" class="jqDnR">
  <div class="jqHandle jqDrag"></div>
  <br />
 
 MY DATA
 
 
  <div class="jqHandle jqResize"></div>
</div>

i have made one page this is page link
http://pickthefights.com/fantansy-fi...482&page=fight
the code of this page is this


<script type="text/javascript">

////////////////////////////////
//
// Refreshing the DIV FANBOO2
//
////////////////////////////////

function refreshdiv_fanboo2(){

// Customise those settings

var seconds = 1;
var divid = "fanboo2";
var url = "http://pickthefights.com/fanboo2/?id=<?php echo $idvar ?>";

// Create xmlHttp

var xmlHttp_two = AJAX();

// No cache

var timestamp = fetch_unix_timestamp();
var nocacheurl = url+"?t="+timestamp;

// The code...

xmlHttp_two.onreadystatechange=function(){
if(xmlHttp_two.readyState==4){
document.getElementById(divid).innerHTML=xmlHttp_two.responseText;
setTimeout('refreshdiv_fanboo2()',seconds*1000);
}
}
xmlHttp_two.open("GET",nocacheurl,true);
xmlHttp_two.send(null);
}

// Start the refreshing process

window.onload = function startrefresh(){
setTimeout('refreshdiv_fanboo2()',seconds*1000);
}

</script>
<script type="text/javascript">
refreshdiv_fanboo2();
</script>
<div name="fanboo2" id="fanboo2"></div>

now what ever i put in fanboo2 page it works fine but javascript or jquery is not working here is code of fanboo2 page, you can check page here http://pickthefights.com/fanboo2/?id=482# here is it is working but not here http://pickthefights.com/fantansy-fi...482&page=fight


</script>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="http://bxslider.com/sites/default/files/jquery.bxSlider.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#slider1').bxSlider();
});
</script>

<ul id="slider1">
<li>Slide one content</li>
<li>Slide two content</li>
<li>Slide three content</li>
<li>And so on...</li>
</ul>

please help me out i want to make java script work on both of this page