I'm working on this pretty easy site but it's been a while since I fiddled with jQuery and I think I'm doing something wrong here.
Here you can preview the idea with jsFiddle http://jsfiddle.net/rGb34/1/
There are a few problems with the jQuery.
If you hover over the yellow button the yellow content starts toggling.
If you hover over a button and then back off it the div disapears (due to the toggle function) but I would like to have the last div active even when there's no hover.
Does anyone have a good tip for me so I can finish this?
First of all: Don't use same id name with another tag. In your example it was id="slider" .
Here is jsFiddle to play with (I have edited your html and css too)
You can do that with this way, much more solid:
jQuery:
jQuery(document).ready(function() {
$('.greenC, .blueC, .orangeC').hide();
$('.nav li').hover(function() {
var takeClass = $(this).attr('class');
// takes class hovered element. example: '.yellow'
$('.slider').hide();
$('.'+ takeClass + 'C').show();// shows the element '.yellowC'
});
});
And your html should be like this:
<div class="yellowC slider">...</div>
<div class="greenC slider">...</div>
<div class="blueC slider">...</div>
<div class="orangeC slider">...</div>
<div class="wrap">
<ul class="nav">
<li class="yellow">Fiducairy services</li>
<li class="green">Licensing</li>
<li class="blue">Payment processing</li>
<li class="orange">E-zone colocation</li>
</ul>
</div>
$('.green, .blue, .orange, .yellow').hide(); if you hide yellow also, it works fine for me..is this what you want?
If you want the first div to show up properly on load, you have to be more specific on your .yellow event handler
$('.y_active, .yellow').hover(
function() {
$('.yellow').show();
$('.green').hide();
$('.blue').hide();
$('.orange').hide();
}, function() {
$('.yellow').hide();
});
DEMO
Related
I'm working on a wordpress site with a mobile dropdown menu. The dropdown works fine but clicking on any link in the dropdown menu just closes the menu and doesn't go to the link.
I can't find the JS code for this functionality so is there any code I can add to make sure clicking on any menu item within the menu div won't close the menu?
Below is the html.
Here's the site: www.nomad8.com
<header class="edgtf-mobile-header">
<div class="edgtf-mobile-header-inner">
<div class="edgtf-mobile-header-holder">
<div class="edgtf-grid">
<div class="edgtf-vertical-align-containers">
<div class="edgtf-mobile-menu-opener">
<a href="javascript:void(0)">
<span class="edgtf-mobile-opener-icon-holder">
<i class="edgtf-icon-font-awesome fa fa-bars " ></i> </span>
</a>
</div>
</div>
</div>
</div>
</div>
<nav class="edgtf-mobile-nav">
<div class="edgtf-grid">
<ul id="menu-production-1" class=""><li id="mobile-menu-item-5597" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home edgtf-active-item"><span>menuiteams</span></li></span></a></li>
</ul>
</div>
</nav>
</div>
</header>
UPDATE:
I've added this code to the header and it kind of works. But the anchor tags don't work all the time. Only on the first click:
(function($) {
$(document).ready(function(){
$(".edgtf-mobile-menu-opener").click(function(){
$('.edgtf-mobile-nav').fadeToggle(300);
$('.edgtf-mobile-nav').css("display", "block");
$('.edgtf-mobile-nav').css("height", "100px !important");
e.stopPropagation();
});
$(".edgtf-mobile-nav .edgtf-grid").click(function(e){
e.stopPropagation();
});
$('.edgtf-mobile-nav > li').click(function(){
$('.edgtf-mobile-nav').fadeIn('fast');
});
});
})(jQuery);
I wish i could inspect your code in chrome broswer. That would have helped to determine the menu list wrapper/container.
But i am guessing that your wrapper is edgtf-mobile-menu-opener
However, you can target the wrapper that contains mobile menu list and the do something like this:
$(document).ready(function(){
$(".edgtf-mobile-menu-opener").click(function(){
$('.edgtf-mobile-nav').fadeToggle(2000)
});
fadeToggle will fade the menu in and it will stay until you click the menu-icon again
Just try that first and lets see
Well, clear the cache.
However, i would like to know where you added the script to in your wp theme because you can be adding it wrongly.
Add this to the CSS. It's an issue with the theme framework itself it looks like. I had this issue myself and this worked as a fix.
.dropdown-backdrop{
position: static;
}
That is most probably because you toggle (open/close) the navigation whenever you click on .edgtf-mobile-header.
Try to change the toggle selector to .edgtf-mobile-opener-icon-holder.
Thanks to #Dayo-Greats answer I managed to work this out..kind of.
Here's the code that makes things work. But for some reason #anchortag menu links still don't work. Otherwise the links are now clickable. Any reason wy the anchor tags wouldn't work?
Here's my code:
(function($) {
$(document).ready(function(){
$(".edgtf-mobile-menu-opener").click(function(){
$('.edgtf-mobile-nav').fadeToggle(300);
$('.edgtf-mobile-nav').css("display", "block");
$('.edgtf-mobile-nav').css("height", "100px !important");
e.stopPropagation();
// return;
});
$(".edgtf-mobile-nav .edgtf-grid").click(function(e){
e.stopPropagation();
// return;
});
});
})(jQuery);
I don't have a privilege to make a comment yet.
However, you did not pass the function argument(function()) before you called e.stopPropagation(); as seen below:
(function($) {
$(document).ready(function(){
....
e.stopPropagation();
Quickly fix a bug in the your new code like this function(e)
(function($) {
$(document).ready(function(e){
....
e.stopPropagation();
Try it again and lets see
At the same time, i am thinking you can use another approach that shows the menu again, even when you clicked on the menu li element like this:
....
$(".edgtf-mobile-menu-opener").click(function(){
$('.edgtf-mobile-nav').fadeToggle('slow', function(){
#-> trying to target ul>li
$('.edgtf-mobile-nav > li').click(function(){
#-> and when clicked ('.edgtf-mobile-nav > li') then show menu again
$('.edgtf-mobile-nav').fadeIn('fast');
})
...just thinking anyway
Need get this fixed as I've been trying for a month. Can you look at my website for the button that doesn't work?
http://www.insightenergy.eu/about-us.php
What is wrong with it?
try the following code to expand or minimize the container.
$('.expander').click(function(){
if(condition){
$('.expander').next().show();
}
else{
$('.expander').next().hide();
}});
You need to attach an event to your buttons, and when I debug I get nothing on click.
Looking at your web I think you maybe need something like that:
Your HTML structure is similar to this one:
HTML
<ul class="blog-post-full-list">
<li >
<div >0</div>
<div class="expandible">Content</div>
</li>
<li >
<div >1</div>
<div class="expandible">Content</div>
</li>
<li >
<div >2</div>
<div class="expandible">Content</div>
</li>
<li >
<div >3</div>
<div class="expandible">Content</div>
</li>
</ul>
So in your code you can use the JQuery function toggle:
JS
$(".blog-post-full-list>li").on('click',function(){
/*
*The object this is the li you've clicked on
*The jQuery function toggle swiches the display ON OFF
*The number 300 means the duration of the animation. If you don't
* want to animate it just remove the parametter
*/
$(this).find(".expandible").toggle(300);
})
http://jsfiddle.net/vzkUL/2/
You can add it into a JS file or inline in your code as follows:
<script>
//JQuery onReady
$(function(){
$(".blog-post-full-list>li").on('click',function(){
//The object this is the li you've clicked on
//The jQuery function toggle swiches the display ON OFF
//The number 300 means the duration of the animation. If you don't want to animate it just remove the parametter
$(this).find(".expandible").toggle(300);
})
});
</script>
I have built a drop down menu in pure css and it works perfectly. Right now it only works when hovered over. Hovering over #headerNav causes the menu to my .dropdownMenu to drop down and as soon as cursor is taken away from dropdownMenu or the #headerNav the menu disappears.
Because I want users with js enabled to have a better experience, I've decided to use some jquery to get the same effect as click here. Which basically keeps the drop down menu open after a click and click only not hovering.
By default I have set .dropdownMenu to "display: none" and then to show the drop down menu I have something like this:
#headerNav:hover .dropdownMenu {
display:block;
//more code
}
Here is my html:
<header>
<div id='headerContent'>
<div id='LogoHolder'>
</div>
<nav id='headerNav'>
<ul>
<li id='photoThumbnail'></li>
<li id='currentUser'>
<ul class="dropdownMenu">
<li>link1</li>
<li>link2</li>
<li>link3</li>
<li>link4</li>
<li>link5</li>
<li>link6</li>
</ul>
</li>
</ul>
</nav>
</div>
</header>
I've been experimenting for 2 days now and can't seem to come up with a way of doing this. I'd appreciate some help with clear examples. Thanks
Kind regards
Instead of targeting your nav by it's ID, add a class to it, say hover-nav and update your CSS accordingly:
.hover-nav:hover .dropdownMenu
Then in your javascript remove the css class from the ul
$(#headerNav').removeClass('hover-nav');
and use your click to show plugin as you normally would.
I think the most elegant way to deal with javascript enabled/disabled is to add :
<html class='no-js'>
then removing the class with Javascript.
So, in your case, you would use
.no-js #headerNav:hover .dropdownMenu {
display:block;
}
to target only users with javascript disabled.
See : http://paulirish.com/2009/avoiding-the-fouc-v3/ for more details.
Nathan hit it on the head. I'll go ahead and paste the code, since I was already nearly finished with it.
CSS
#headerNav .hideable{ display:none; }
#headerNav:hover .hideable{ display:block; }
HTML (just add hideable to your UL)
<ul class="dropDownMenu hideable">
jQuery
$('.hideable').hide().removeClass('hideable');
$('#headerNav').click( function(){
$(this).find('.dropDownMenu').slideToggle();
});
Replace above with this jQuery to add the ability to close the menu if anywhere else is clicked.
$('.hideable').hide().removeClass('hideable');
$('#headerNav').click( function(e){
$(this).find('.dropDownMenu').slideToggle();
e.stopPropagation();
});
$('html').click( function(e){
$('.dropDownMenu').slideUp();
});
Try something like this:
$(document).ready(function(){
$('#headerNav .dropDownMenu').hover(function() {
$(this).show();
});
$('*:not(#headerNav .dropDownMenu)').click(function() {
event.stopPropagation();
$("#headerNav .dropDownMenu").hide();
});
});
Your CSS is .dropdownMenu
Your Html is class="drop DownMenu"
CSS is case sensitive.
I want to have a tab-navigation in my jQuery Mobile project. I know I can use the data-role 'navbar' but I only want to change the content below that navbar without swiping to a new page. So far I could only have several different pages with the same navbar linking to each other but that's not what I want.
Can anyone help me?
Thank you in advance
You can use the jQuery Mobile navbar styling but use your own click-handler so instead of changing pages the click will just hide/show the proper content on the same page.
HTML
<div data-role="navbar">
<ul>
<li>One</li>
<li>Two</li>
</ul>
</div><!-- /navbar -->
<div class="content_div">onLoad Content</div>
<div id="a" class="content_div">Some 'A' Content</div>
<div id="b" class="content_div">Some 'B' Content</div>
JAVASCRIPT
$(document).delegate('[data-role="navbar"] a', 'click', function () {
$(this).addClass('ui-btn-active');
$('.content_div').hide();
$('#' + $(this).attr('data-href')).show();
return false;//stop default behavior of link
});
CSS
.content_div {
display: none;
}
.content_div:first-child {
display: block;
}
Here is a jsfiddle of the above code: http://jsfiddle.net/3RJuX/
NOTE:
Each of the links in the navbar have a "data-href" attribute set to the id of the div (or whatever container you want to use) that will be displayed.
Update
After 1 year I came back to this answer and noticed that the delegated event handler selector can be optimized a bit to utilize a class rather than an attribute (which is a lot faster of a lookup):
$(document).delegate('.ui-navbar a', 'click', function () {
$(this).addClass('ui-btn-active');
$('.content_div').hide();
$('#' + $(this).attr('data-href')).show();
});
Update
This code can be made to be more modular by using relative selectors rather than absolute ones (like $('.content_div'), as this will select all matching elements in the DOM rather than just ones relative to the button clicked).
//same selector here
$(document).delegate('.ui-navbar ul li > a', 'click', function () {
//un-highlight and highlight only the buttons in the same navbar widget
$(this).closest('.ui-navbar').find('a').removeClass('ui-navbar-btn-active');
//this bit is the same, you could chain it off of the last call by using two `.end()`s
$(this).addClass('ui-navbar-btn-active');
//this starts the same but then only selects the sibling `.content_div` elements to hide rather than all in the DOM
$('#' + $(this).attr('data-href')).show().siblings('.content_div').hide();
});
This allows you to nest tabs and/or have multiple sets of tabs on a pages or pseudo-pages.
Some documentation for the "relative selectors" used:
.closest() : http://api.jquery.com/closest
.siblings() : http://api.jquery.com/siblings
Here was an example: http://jsfiddle.net/Cfbjv/25/ (It's offline now)
UPDATE: Check out my jsfiddle at http://jsfiddle.net/ryanhaney/eLENj/
I just spent some time figuring this out, so I thought I would answer this. Note I am using multi-page single file, YMMV.
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</div>
$("div[data-role=page]").bind("pagebeforeshow", function () {
// prevents a jumping "fixed" navbar
$.mobile.silentScroll(0);
});
$("a[data-role=tab]").each(function () {
// bind to click of each anchor
var anchor = $(this);
anchor.bind("click", function () {
// change the page, optionally with transitions
// but DON'T navigate...
$.mobile.changePage(anchor.attr("href"), {
transition: "none",
changeHash: false
});
// cancel the click event
return false;
});
});
#Mike Bartlett
I struggled with this myself but after breaking Jasper's code down it looks like there is a slight nuance from his posted code and that on the jsfiddle page.
Where he has posted
$(document).delegate('[data-role="navbar"] a', 'click', function () {
$(this).addClass('ui-btn-active');
$('.content_div').hide();
$('#' + $(this).attr('data-href')).show(); });
I found it useful to change the last line to simply call whatever content you set the "data-href" value to be in your navbar.
$('div[data-role="navbar"] a').live('click', function () {
$(this).addClass('ui-btn-active');
$('div.content_div').hide();
$($(this).attr('data-href')).show();
});
my navbar html then reads
<div data-role="navbar">
<ul>
<li>One</li>
<li>Two</li>
</ul>
Which is pretty much the same as his but for some reason I got no "error loading page" message. Hope that helps...
Please refers this below link for all kind of nav bar in jquery
http://jquerymobile.com/demos/1.0rc2/docs/toolbars/docs-navbar.html
<div data-role="navbar">
<ul>
<li>One</li>
<li>Two</li>
</ul>
</div>
thanks
I noticed that the question was asked four years ago, so i'm not sure whether the Tab widget were available with JQ Mobile at that time. anyway i'm a guy from 2015
the awesome solution that i use as below with Jquery Mobile 1.4.5
<div data-role="tabs" id="tabs">
<div data-role="navbar">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
<div id="one" class="ui-body-d ui-content">
<h1>First tab contents</h1>
</div>
<div id="two">
<ul data-role="listview" data-inset="true">
<li>Acura</li>
<li>Audi</li>
<li>BMW</li>
<li>Cadillac</li>
<li>Ferrari</li>
</ul>
</div>
</div>
I liked #Ryan-Haney's answer, but thought I'd add my own rough draft in, if anyone can find a more efficient way of doing this, then please add a comment.. thanks
I did it this way because I have a bunch of "include" files that get loaded into the DOM at runtime, so I couldn't hard-code that the n-th tab is highlighted/active for each page like Ryan could. I also do have the luxury of having only a single tabbar in my app.
$(document).delegate('.ui-navbar a', 'tap', function ()
{
$('.ui-navbar').find('li').find('a').removeClass('ui-btn-active');
$('.ui-navbar').find('li:nth-child(' + ($(this).parent().index() + 1) + ')').find('a').addClass('ui-btn-active');
});
I want to add a group of classes ontop of an image that only appear when the user rolls over.
Please see this as a working example:
http://www.warface.co.uk/clients/warface.co.uk/
(CLICK the red arrow at the top)
You will notice a horizontal list of images and text, desired effect will list all images and the yellow block with text will be the rollover effect.
CSS
<li><a class="project-thumb"><img src="images/_scroll1s.jpg" alt="">
The London Police</a></li>
<li><div class="project-thumb">
<div class="content">
<h2>The London Police</h2></a>
<a class="view-project">View Project</a>
</div><!--content END -->
</div><!--project-thumb END -->
</li></ul>
Could you please advise on the correct markup for the javascript replacement effect.
Many thanks
I recommend that you use a javascript library like jQuery. jQuery makes it insanely easy to do a class change on a hover event.
Add jquery in your <head> tag. Use the one from googles CDN:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
Add something like this:
<script>
$(document).ready(function() {
// find the image inside the link with the class project-thumb and add a hover event
$("a.project-thumb img").hover(
function () {
// add a class to the closest li. $(this) is the image
$(this).closest('li').addClass('theClassYouWantToAdd');
},
function () {
$(this).closest('li').removeClass('theClassYouWantToRemove');
}
);
});
</script>
Documentation for the hover event: http://api.jquery.com/hover/
That should work :)