I have a strange issue with Internet Explorer, i wrote a navigation code and it's working perfectly on Chrome and FF, and it's half working in IE (Don't know how). So here is my issue
When i hover on the link is opens a mega menu down and remove the border-right of the current anchor and the previous one. (See picture below)
And this is how is looks when i hover on the link (I managed to make it work on all browsers: Chrome, FF, Safari and IE 6-9
The issue comes here when i hover out of the link, if i hover up, the borders will come back without any issues but when i hover out downward, the border-right of the previous link doesn't come back (See below pic)
I will include the third picture on a comment as i can't post more than 2 links.
This is the code i wrote in jQuery
$(".menu li").hover(
function () {
var result = $(this).index();
var item = $('a.mainnav')[result - 1];
$(this).addClass("hover");
$(this).find('a.mainnav').css('border-right','none');
$(this).parent().find(item).css('border-right','none');
},
function () {
var result = $(this).index();
var item = $('a.mainnav')[result - 1];
$(this).removeClass("hover");
$(this).find('a.mainnav').css('border-right','1px solid #000');
$(this).parent().find(item).css('border-right','1px solid #000');
}
);
anyone know why this issue is happening?
p.s. Sorry that i can't post the pictures directly because i'm new.
I refactored your code somewhat. When leaving hover state; Is it okay for you to remove border-right style from all a.mainnav elements? They will go back to your CSS definition.
$(".menu li").hover(
function () {
var item = $('a.mainnav')[$(this).index() - 1];
$(this).addClass("hover");
$(this).find('a.mainnav').css('border-right','none');
item.css('border-right','none');
},
function () {
$(this).removeClass("hover");
$(item).find('a.mainnav').css('border-right','');
}
);
Related
Ive wrote some Jquery to work on tables & Desktop which drops down with a hover or a click - it almost works great except it doesn't return (go back up) once dropped down.
Would it be correct to use a mouse leave on the following code to change display to hidden?
Here is the code I have wrote:
jQuery(function($) {
$("#menu-main-menu").find('li').hover(
function(){$(this).click();
}).click(
function(){
var visibleMenu = $("ul.sub-menu:visible");
if (visibleMenu) {
$(visibleMenu).hide();
}
$('ul.sub-menu', this).show();
}
);
})
I also have this in Codepen to show better:
http://codepen.io/anon/pen/jPbJMJ
Thank you
I managed to do this by changing the following:
jQuery(function($) {
$("#menu-main-menu").find('li').hover(function(){$(this).click();}).click(
function(){
var visibleMenu = $("ul.sub-menu:visible");
if (visibleMenu) {
$(visibleMenu).hide(); }
$('ul.sub-menu', this).show();
$("#menu-main-menu").mouseleave(function(){
$("ul.sub-menu").hide();
});
}
);
})
As you can see I used the mouseleave function in Jquery to remove the ul.sub-menu if the #menu-main-menu div was not selected with the mouse.
I hope this helps anyone trying to write a WordPress dropdown Sub navigation menu
I have a flyover dropdown menu and when I scroll down the page this menu need to appear all the time. I have this below code which is working fine for FFox and chrome but IE8 and I hope IE9 its not working. Not sure whats causing the issue. Please suggest if any change need to be done to work with IE as well
var name = ".cssMenu";
//var menuYloc = null;
$(document).ready(function(){
//menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
$(window).scroll(function () {
if($(this).scrollTop()>70){
offset =$(document).scrollTop()-70+"px";
}
else
{
offset = $(document).scrollTop()+"px";
}
$(name).css("top",offset);
});
});
i blind shoot suspect it being the order its executed. try wrapping it in () like:
`offset =($(document).scrollTop()-70)+"px";`
I am having problem with appending a div with an image to a page after clicking a link.
Here is my script, which on document.ready() adds the event.
var handler = function () {
$('#content').append("<div class=\"loading-graphic\" style=\"position:absolute;height:200px;width:200px;top:30%;left:40%;z-index:999;\"></div>");
//$("<div class=\"loading-graphic\" style=\"position:absolute;height:200px;width:200px;top:30%;left:40%;z-index:999;\"></div>").appendTo("div#content");
}
$(document).ready(function () {
for (var ls = document.links, numLinks = ls.length, i = 0; i < numLinks; i++) {
if (ls[i].parentElement.className != "t-window-actions t-header" && ls[i].parentElement.className != "t-widget t-numerictextbox") {
ls[i].onclick = handler;
}
}
})
The problem here that it doesn't work in Chrome while in Firefox and IE its working perfectly. After some digging i found out that it actually adds the div but doesn't show the image. (Tested it with adding the div on the beginning of the page, everything moves down and the div is empty)
I have tested it also adding it directly to page and then it works good but it's not what I'm looking for unfortunately.
Here is my css class:
.loading-graphic
{
background: url('~/Content/ico/loading_big.gif') no-repeat;
}
Got no idea what is causing the problem. Anyone got an idea? ;/
Honestly sometimes Chrome screws up. I have had issues with Chrome and background images, but it was only my computer. Try it on a different computer Chrome browser, it might not be the same.
The other thing I would suggest is, have your div coded already instead of appending it. So basically have it on the html code and position it out of sight, then when you need it, just move it to the right position.
It was the background position; also increased z-index, attached to body, and prevented other invisibility reasons.
var handler = function () {
$('body').append("<div class=\"loading-graphic\" style=\"position:absolute;height:200px;width:200px;top:50%;left:50%;margin:-100px 0 0 -100px;z-index:99999;background-position:center center;display:block !important;\"></div>");
}
I'm seeing an issue regarding some jquery animation in chrome.
I'm wondering if anyone else has seen this.
I'm just trying to do some simple slide up to hide a div, or hide and then fade a div in.
The slide up animation on the div is not happening in chrome and the hide is lagging before the fade in kicks in; whereas in firefox the animation is immediate and smooth.
The thing is that I have a browser confirm wrapped around this stuff to only do this animation if the user confirms.
If I remove the confirms, the animation works fine in chrome.
Is that weird?
Here's an example. With the confirm I get no slide up. Without the confirm I get one.
That is, simply removing the if(confirm){} code block.
if (confirm('Are you sure you want to remove the item?')) {
dragbox.slideUp('fast', function () {
dragbox.remove();
WebService.RemoveItem(itemId,
//on success
function () {
if ($('.dragbox').length == 0) {
//remove columns
$('.column').remove();
}
},
//on fail
function () {
alert('Failed to remove the "' + itemName + '" item.');
}
);
});
}
In this example, with the confirm there's a lag after the div is hidden and before the fade in start so that the div is hidden longer than I would like. Without the confirm, ti behaves as I would expect.
if (confirm('Are you sure?')) {
$('#' + itemId).spin();
WebService.AddItem(itemId,
//onsuccess
function (r) {
var item = $('#' + itemId); //this is a div
item.unspin();
item
.hide()
.toggleClass('item-added')
.fadeIn('fast', function () {
// Create the DOM elements
$('<p><img class="item-added" src="images/item-added.png" />')
// Sets the style of the elements to "display:none"
.hide()
// Appends the hidden elements to the "posts" element
.appendTo($('.contentInfo', item))
// Fades the new content into view
.fadeIn('fast');
});
},
//onfail
function () {
$('#' + itemId).unspin();
alert('Failed');
}
);
}
Can anyone confirm or disprove this notion based on my speculation and example?
What are some alternatives to the browser confirm?
EDIT: Yeah I'm not sure what's going on.
Are you using the newest version of jQuery UI? Have you got the jQuery UI stylesheet also?
It all looks fine. If you can't find an answer here, open up a bug report.
Updating Chrome fixes this. I'm now running version 15.0.874.120 and all is well. My word.
I was just experiencing the same thing with some code that worked when it was written a couple of years ago. Now it has an issues in webkit-based browsers.
I had several animations that were paused by using confirm() calls and the subsequent animations failed to display properly. I finally figured out that if I put a short delay before the animation, it started working properly.
if (confirm('Are you sure?')) {
dragbox.delay(10).slideUp('fast', function () { ...
I'm not quite sure why this works but my animations are now working again in Safari 6.0.3 and Chrome 26.0.1410.43
I use the following code on a website:
// show tracks
$('.content-playlist .track p').live('click', function() {
var player_handle = $(this);
$('.content-playlist .track .player').slideUp('slow', function() {
player_handle.next().slideDown('slow');
});
});
Which should first closes any music players on the site (if any) and after that open the selected one.
Clicking the first track works as expected.
However I'm having a strange issue:
When clicking on the third track it opens, closes and opens again. (not what I want)
An example is online #: http://www.psykotaktyle.com/index.php?page=playlist
I just cannot find out what´s wrong with my code. Any help is much appreciated!
EDIT
Tested with Chrome (v13), IE9 and FF4
DEMO
$('.player').hide();
$('.content-playlist .track p').live('click', function() {
$('.player:visible').slideToggle(600);
$(this).next('.player').slideToggle(600);
});
This sounds like animation queuing as described at http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup
Try:
$('.content-playlist .track .player').stop().slideUp('slow', function() {
player_handle.next().stop().slideDown('slow');
});