Link with a non-clickable background image - javascript

I have a menu that is formatted as an unordered list where the links (instead of the list items) have a background images that look like bullets. Due to the complexity of the CSS, I am not able to change this - the background images have to "belong" to the links, not to the list items.
My issue is that I would like to be able to have the links direct me to their respective pages, while also having the background images work to expand subcategories. This means that I need to somehow "separate" the background image from the link in order to reference it separately in my jQuery animation.
I would like to be able to do something like this:
$( document ).ready(function() {
$("#mainnav ul li").on("click", function(e) {
var $t = $(e.target);
if (!$t.is("a")) {
$(this).children("ul").slideToggle("slow", "linear");
return false;
}
});
});
because right now I am just using this and it doesn't work when I actually want to click on the links:
$("#mainnav ul li").click(function () {
$(this).children("ul").slideToggle();
return false;
});
I've attached a demo (though keep in mind that this not my actual code, it is just an example of how I would like this to work): http://jsfiddle.net/stamblerre/GzD3M/11/
I would like to be able to click on JUST the pencils to expand the subcategories so that I can use the text to click on the link and be directed to another page. Does anyone have any ideas on how to do this without associating the background-image with the list items rather than the links?
Thank you!!
With the help of many of the people on this thread, I've figured out my issue, here's the solution: http://jsfiddle.net/stamblerre/GzD3M/19/

You can check the clicked point to see if it's in the icon's region, actually we can just check the horizontal coordinates. We know that you set padding-left:15px for the a element, which means the icon's width is about 15px. If the clicked point is in the icon's region, we will let the click event propagate, otherwise stop it from propagating.
$('#mainnav ul li > a').click(function(e){
if(e.pageX - $(e.target).offset().left >= 15) {
e.preventDefault();
e.stopPropagation();
}
});
Demo.

You can send your background-image into a pseudo element and use pointer-events so it doesn't catch the click.
DEMO
#mainnav a {
margin-left: 20px;
background-repeat: no-repeat;
}
#mainnav a:before {
content: url(http://shapeshed.com/images/articles/pencil_icon.gif);
margin-left: -20px;
margin-right:5px;
pointer-events:none;/* this is where it happens if browser understands it */
vertical-align:middle;
}
#mainnav ul {
list-style-type: none;
}
#mainnav ul ul {
display: none;
}

just add next to the link another link with the pencil image inside with a unique class that will open the nested ul, something like this:
<ul>
<li>
<img src="pencil.jpg"> Click me
<ul style="display:none" class="nested_ul">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
</ul>
jquery:
$(document).ready(function() {
$('.pencil').click(function(e) {
e.preventDefault();
$(this).parent().children(".nested_ul").slideToggle("slow", "linear");
});
});
it's 100% working!...good luck.

Related

Javascript tabs not working

When I click a tab on my navbar it will go to the tab, but once I move the mouse away from it will no longer show that it's selected but it will keep it's text color.
Here is the full code:
Html: https://codetidy.com/8744/
CSS: https://codetidy.com/8745/
So that I can better explain my problem here is an example:
Loads the website
Hovers over the about tab to click it
Then after tab has been clicked mouse has moved away but the tab didn't stay red
Try adding a more specific CSS selector to your custom CSS:
.nav > li > a:focus, .nav > li > a:hover {
background-color: red;
}
Working example of your code (after adding the class above)
As what I can see on your html code, why do you have a onClick function for tabs. There is already a documentation for bootstrap tabs. You just need to clear up your css also to get the desired output. You can do something like this as css but it is much better if you put an id for you navbar.
default:
.nav > li {
//enter code here
}
hover:
.nav > li:hover {
//enter code here
}
selected:
.nav > li.active {
//enter code here
}

Flickering drop down menu

I'm trying to animate a menu with javascript but I get a weird behavior I don't quite understand. The testing code is on jsfiddle. If you place your mouse on the Test label the submenu (in navy) should appear. With the mouse in the submenu try to go out of it and then quickly get back in. The submenu should flickering forever. I guess the problem lies in the end of the animation not being handled properly but I don't quite understand where I'm wrong.
<ul id="menu">
<li>
Test
<section class="sub">Test</section>
</li>
</ul>
.sub {
display: none;
width: 100px;
height: 100px;
background-color: navy;
color: white;
}
$('#menu li').hover(function() {
$('#menu .sub').finish();
$(this).find('.sub').slideDown(400);
},
function() {
$('#menu .sub').finish();
$(this).find('.sub').slideUp(400);
});
Edit:
try this ...
$('#menu li').hover(function() {
$(this).find(".sub").stop();
$(this).find('.sub').slideDown(400);
},
function() {
$(this).find(".sub").stop();
$(this).find('.sub').slideUp(400);
});
.finish() method means that if there is animation it have to finish inmediately (and remove queues). .stop() method is better for you are looking for.
As point, you can use something like if( $('.sub', this).is(':animated') ) return; to prevent new animations while there is still one
edit: you fiddle modified

Responsive menu script ignores the submenu?

I have a script for a responsive menu to toggle the height:
jQuery(function() {
var pull = jQuery('#pull');
menu = jQuery('nav ul');
menuHeight = menu.height();
jQuery(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
});
jQuery(window).resize(function(){
var w = jQuery(window).width();
if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
The problem is that the nested unordered list's height is not taken into account and it just "pops" in and ruins the effect. The HTML markup would be:
<ul>
<li></li>
<li>
<ul>
</ul>
</li>
</ul>
You can see it live at http://www.windycitydigital.net/iconvert. Anyone have any idea how I could prevent that nested UL from ruining the toggle animation and making it all one fluid transition?
A couple things could be useful here:
With the selector you've got there for menu it's going to select both the top level ul as well as any subnav ul...
Try changing that selector to this:
menu = jQuery('nav > ul')
This selector will select only direct child ul's of the nav element, and prevent the slideToggle function from firing on your subnav ul, which looks to include a display block on it in your CSS, styled by the following selector:
#navigation ul ul
Slidetoggle is going to toggle that to display: none with the selector you're currently using.
I'd also strongly consider changing your selectors to be a little cleaner, and more precise:
#navigation > ul
This will select only direct children of the navigation element. Using this selector instead of #navigation ul allows you to use less CSS since you don't have to override styles you've applied for your subnav elements by using the more general #navigation ul selector (which, as you've seen, affects every ul within #navigation).
Since you've applied a class to your sub-nav ul, you can style it directly using:
#navigation .sub-menu
Hopefully this helps steer you in the right direction!
!! Edit (after comment below) !!
Try this JavaScript:
jQuery(function() {
var pull = jQuery('#pull'),
menu = jQuery('.menu', '#navigation');
pull.on('click', function(e) {
e.preventDefault();
menu.slideToggle('medium');
});
});
Oh, and make sure you change the #navigation ul { display: none } to #navigation > ul { display: none }, otherwise the problem mentioned above where the subnav hides will persist...

Keep submenu open on mouse out

A navigation menu I'm working on has a default CSS behavior (for those rare people who have JavaScript disabled). By default, the submenu is not displayed:
.main-navigation ul ul {
display:none;
}
On hover, the submenu is revealed:
.main-navigation ul li:hover > ul {
display:block;
}
For the JavaScript-minded majority, the menu is juiced up with the following jQuery snippet:
jQuery(document).ready(function($) {
/* cancel the default CSS hover behavior */
$('.main-navigation ul li').on('mouseover',function(){
$('.main-navigation ul li:hover > ul').css('display', 'none');
$(this).css('cursor', 'pointer');
});
/* toggle submenu display (if the submenu actually exists) */
$('.main-navigation ul li a').click(function() {
var li = $(this).closest('li');
if(li.has('ul')) li.find('ul').slideToggle(100);
});
});
This toggling works great, except it only works as long as the mouse cursor stays over the parent link. If the submenu is open, and the user happens to move the mouse away from the parent link, the submenu snaps shut.
Question: How do I keep the submenu open on mouse out, if it's been already open?
I tried adding something like this to my jQuery snippet:
$('.main-navigation ul li').on('mouseout',function(){
if ($('.main-navigation ul li ul').css('display') = 'none') {
$('.main-navigation ul li ul').css('display', 'none');
} else if ($('.main-navigation ul li ul').css('display') = 'block') {
$('.main-navigation ul li ul').css('display', 'block');
}
});
Not only it's mediocre coding, but it also actually doesn't work. ;-(
How should I fix this issue?
Thank you in advance for your suggestions!
i'm not sure the click issue yet (looking at it), but you don't need JavaScript to "disable" the CSS. Simply use <noscript> tags, like so:
<noscript>
<style type="text/css">
.exampleclass:hover { display: block; }
</style>
</noscript>
Or you could simply add a no-js class to you main menu element, then remove that class if JS is enabled at the very start of your JavaScript. Then write your "no-js css" to use .no-js + whatever children instead of the main class.
UPDATE
The problem is simple, when you use mouseover to cancel your "non-js" css, the menu is still being hidden everytime the user hovers over that submenu. In other words, you're not just removing the "no js" css, you're hiding it on every mouseover of .main-navigation ul li!
Simply follow something in my first suggestion, then remove the mouseover function completely and viola! problem solved!
I wrote a jsFiddle using your code to show how I might approach it.
jsFiddle
Code
$(function() {
// See in css where i changed `.main-navigation ul li:hover > ul` to `.main-navigation.no-js ul li:hover > ul`
// See Also in HTML where i added class `no-js` to `#site-navigation`
$(".no-js").removeClass("no-js");
$('.main-navigation ul li a').on("click", function(e) {
// first hide sibling sub-menus!
$(this).closest('li').siblings().each(function(i) { $(this).find("ul").slideUp("fast"); });
// no need for the if statement you had.
// jQuery is "smart", if it doesn't exist,
// then this function simply won't do anything!
$(this).closest('li').find('ul').slideToggle(100);
})
// and just to add a little for ya,
// the following will slideUp our submenu if user hovers away from MAIN MENU
.closest("ul").on("mouseleave", function(e) {
$(this).find("ul:visible").slideUp("slow");
});
})
Step-by-Step
Where you have manual script at between <script type="text/javascript"> tags, just before that noscript tage you threw in(which you can remove), replace all your JS with the following:
<script type="text/javascript">
jQuery(document).ready(function(jQuery) {
jQuery(".no-js").removeClass("no-js");
jQuery('.main-navigation ul li a').on("click", function(e) {
$(this).closest('li').siblings().each(function(i) { $(this).find("ul").slideUp("fast"); });
jQuery(this).closest('li').find('ul').slideToggle(100);
})
// If you find the menu hiding to fast, simply remove or comment out the next 3 lines
jQuery('.main-navigation ul').on("mouseleave", function(e) {
jQuery(this).find("ul:visible").slideUp("slow");
});
});
</script>
Remove the NOSCRIPT TAGS
In your CSS Code:
/* Find the area that was written as */
.main-navigation ul li:hover > ul {
display:block;
}
/* And replace it with the following */
.main-navigation.no-js ul li:hover > ul {
display:block;
}
Finally, look in your HTML, find the line written as <nav id="site-navigation" class="main-navigation" role="navigation"> and replace it with:
<nav id="site-navigation" class="main-navigation no-js" role="navigation">
so here is where IE did something neat, and jquery makes it browser agnostic so it's usable. mouseleave is 'mouseout' for the selected element and any of its subelements in IE, and jquery makes it work for the other browsers.
The mouseleave JavaScript event is proprietary to Internet Explorer.
Because of the event's general utility, jQuery simulates this event so
that it can be used regardless of browser. This event is sent to an
element when the mouse pointer leaves the element. Any HTML element
can receive this event.
mouseover - when someone mouses over the 'parent' ul li you want to show any sub uls
click - when someone clicks the parent ul li you want to hide or show any sub uls
mouseleave - IE specific that jquery makes browser agnostic for you.
leave the menus in a working state using <noscript> tags, and intend the javascript to go from there if it is available.
fiddle -- this fiddle is just to give you a start, as i didn't put in any of your css.
$(function () {
$("ul").on({"mouseover":function(event){
$(this).find("ul").show("slow");
}},"li.menu-item",null).on({"click":function(event){
$(this).find("ul").toggle("slow");
}},null,null).on({"mouseleave":function(event){
$(this).find("ul").hide("slow");
}},null,null);
});

Active menu background color

I have a vertical menu. It is .glossymenu . The menu item is accessed using css as .glossymenu a.menuitem . I want to change the background color when the menu item is selected or when the menu item is active. I am trying to use the following JQuery:
$(".glossymenu a.menuitem").click(function(){
$(this).siblings(".active").removeClass("active");
$(this).addClass("active");
});
But, I am unable to resolve my issue using this. Any ideas, how to change the background color of the menu item, when it is selected. It should not change when we click outside the menu item in blank area, when the menu is active.
Thanks,
Prasad
Assuming this is what your html looks like:
<ul class="glossymenu">
<li><a class="menuitem active" href="#">Item</a></li>
<li><a class="menuitem" href="#">Item</a></li>
<li><a class="menuitem" href="#">Item</a></li>
</ul>​
And CSS like this:
.glossymenu li {
margin-bottom: 20px;
}
.glossymenu a {
background-color: pink;
padding: 5px 10px;
}
.glossymenu .active {
background-color: #bada55;
}​
Then your js would be this:
$('.glossymenu .menuitem').on('click', function(e) {
e.preventDefault();
$('.glossymenu .active').removeClass('active');
$(this).addClass('active');
});
The problem you might have been having is that siblings() wouldn't select any of the other anchors tags because they are not siblings of the anchor that has been clicked on.
jsFiddle: http://jsfiddle.net/Vestride/qhSQ4/
EDIT:
I made a new jsfiddle (link) for you, but I'm a still very confused as to what you're attempting to do and what you mean by making the script more general.
Maybe this will help solve your problem. http://sixrevisions.com/javascript/20-excellent-javascript-navigation-techniques-and-examples/
I think you want to use jQuery's hover function.
$(".glossymenu a.menuitem").hover(function(){
$(this).siblings(".active").removeClass("active");
$(this).addClass("active");
}, function() {
$(this).removeClass("active");
});
Active state is available in CSS and it much better to use that one instead.
a.menuitem:active { background-color: #c00; }

Categories

Resources