I have created a sidebar that hides with the .click() function targeting an image with the id of "cross".
It is my goal to have page load with no sidebar (.sidebar_menu) visible, and with my menu hamburger (.bars) visible . How do i do this?
HTML:
<img class="bars toggle_menu" src="http://res.cloudinary.com/dnooxiorz/image/upload/v1502388038/thinbarsfinal_knx5mw.png">
<div class="sidebar_menu">
<img id="cross" src="http://res.cloudinary.com/dnooxiorz/image/upload/v1502391349/cross_tcn6yk.png">
<center>
<h1 class="boxed_item">HELLO</h1>
</center>
<ul class="navigation_selection">
<li class="navigation_item">Projects</li>
<li class="navigation_item">About</li>
<li class="navigation_item">Resume</li>
</ul>
</div>
Javascript:
$(document).ready(function(){
$("#cross").click(function(){
$(".sidebar_menu").addClass("hide_menu");
$(".toggle_menu").addClass("opacity_one");
});
$(".toggle_menu").click(function(){
$(".sidebar_menu").removeClass("hide_menu");
$(".toggle_menu").removeClass("opacity_one");
});
});
Best,
John
Try this -
$(document).ready(function(){
var hideSideMenu = function(){
$(".sidebar_menu").addClass("hide_menu");
$(".toggle_menu").addClass("opacity_one");
};
hideSideMenu();
$("#cross").click(function(){
hideSideMenu();
});
$(".toggle_menu").click(function(){
$(".sidebar_menu").removeClass("hide_menu");
$(".toggle_menu").removeClass("opacity_one");
});
});
Basically, you need to perform the action performed inside your #cross click function, also on the document load to have that as an initial state.
Wrapping it in a function will help you keep the functionality to be executed upon close all in one place. I recommend you do similar for showing the side menu by wrapping the actions in a function and calling it like above.
You can try adding the classes in the HTML page, so It loads with the sidebar hidden.
<div class="sidebar_menu hide_menu">...</div>
<img class="bars toggle_menu opacity_one" src="...">
Or you can use:
$("#cross").click();
Inside $(document).ready(); so when it loads, the image that toggles the sidebar gets clicked.
Just add tge hide_menu class in your mark-up:
<div class="sidebar_menu hide_menu">
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
I want to hide my homepage content after other link is clicked. My homepage content is into
<div class="active">
Homepage content
</div>
css class active and inactive
.active {
margin-top:230px;
font-size: 30px;
color:black;
}
.inactive
{
opacity:0;
}
I tried this script but it is not working.
<script src="jquery.js"></script>
<script>
$("#link-link1").click(function(){
$(this).removeClass("active").addClass("inactive");
});
</script>
I upload it to an web hosting so you can see full html code here and full css file here
$(this).removeClass("active").addClass("inactive");
Is adding and removing the class from your link (which I assume has id="#link-link1)
Instead you need to give your div an id like
<div id="homepage" class="active">
Then in your JS code reference that by id:
$('#homepage').removeClass("active").addClass("inactive");
Even better would be to use jquery's hide() method or toggle() if you wanted it to come back the next time you clicked:
$('#homepage').toggle();
Add an ID to the "Homepage content" div, so we can find it using javascript.
<div class="active" id="contentArea">
Homepage content
</div>
Try placing you jQuery code inside a document read. Optionally place it right before the closing </body> tag. Add the css classes to the "Home content" div and not to the link element addressed by $(this):
$( document ).ready(function() {
var contentArea = $("#contentArea");
$("#link-link1").click(function(){
contentArea.removeClass("active").addClass("inactive");
});
});
Consider using the jQuery function toggle() for changing contents visibility.
Take a look at the manual: http://learn.jquery.com/
Just take a look at that fiddle I make a simple example for you.
In you'r web page you must use better div elments as tabs not a elements
Code:
$("#random_link").click(function(){
//$(".active").css("display","none"); //WORKS TOOO
$(".active").fadeOut();
})
Working Fiddle
HTML
<a id="link1" href="#">Hide Home Page</a>
<a id="link2" href="#">Show Home Page</a>
<br/>
<div id="home_page">
<hr/>Homepage content
<hr/>
</div>
jQuery
$('#link1').click(function () {
$('#home_page').hide();
});
$('#link2').click(function () {
$('#home_page').show();
});
Hope this helps..!!
Update using toggle() based on #Cfreak answer
Updated Fiddle
Since you are using Jquery you can use hide method that will apply to your css of that element display: none;
$('#homepage').hide();
$('#homepage').show(); //to make it visible again
hope it help
You have to change the class for the div, in your code you are change the class of the link, add an Id or class to the div, for example:
<div class="active" id="test">
Homepage content
</div>
<script src="jquery.js"></script>
<script>
$("#link-link1").click(function(){
$('#test').removeClass("active").addClass("inactive");
});
</script>
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>
My page is at www.danielcw.info.
At the bottom I am calling:
$(document).ready(function() {
$("#single_1").fancybox({});
});
On:
<div id="single_1">
TESTTESTEST
</div>
Nothing happens. Can anyone please explain where I am going wrong, I see all the JS and CSS loaded and on the page.
Thank you,
Daniel
Typically, Fancybox is initialized on an anchor tag which points to a div element or a link housing the content to be shown on the Fancybox:
HTML:
Click here to launch Fancybox
<div style="display:none">
<div id="single_1">
Content goes here
</div>
</div>
Javascript:
$(function(){
$('a#fancybox').fancybox({
// Fancybox options here
})
.trigger('click'); //Optional - if you wish to trigger the Fancybox after initialization
});
Try using,
$(document).ready(function() {
$("a #single_1").fancybox();
});
<a id="single_1" href="#">
TESTTESTEST
</a>
You've merely instantiated the plugin. You have to trigger it now.
So you can add any DOM element and watch for an event then trigger the plugin.
Click me
The JS
$('fancyme').on("click", function() {
$.fancybox('#single_1');
});
OR
You can trigger on page load
$(function(){
$.fancybox('#single_1');
});
Hi I would like to slide an element out when the mouse goes over and then slide it back and hide when the mouse goes out..I have this code, but I have problem when the mouse leave the element before the first mouseenter function is completed..The .entry_extend div stay visible. I tried to the hover function, but is the same problem..Please help..Thanks.
jQuery("document").ready(function(){
jQuery(".fire").mouseenter(function(){
jQuery(this).children('.entry_extend').stop(true, false).show('slide',null,500,null);
});
jQuery(".fire").mouseleave(function(){
jQuery(this).children('.entry_extend').stop(true, false).hide('slide',null,500,null);
});
});
<div id="craft" class="fire">
<div class="entry_main">
<a href="" title="">
<img src="" alt="" />
</a>
</div>
<div id="entry_ex_craft" class="entry_extend">
original shisha pipe collection
</div>
</div>
Please Help:)
You are trying to implement a "hover". This works:
jQuery(".fire").hover(
function(){jQuery('.entry_extend', this).stop(true, true).show(500);}
,
function(){jQuery('.entry_extend', this).stop(true, true).hide(500);}
);
Mind you, it isn't a good idea to have the DIV you are sliding in and out within the DIV you are hovering on, since HIDING the DIV alters the boundaries of the DIV containing it. You can end up with some "trembling" activity sometimes because of this.
try combining mouseover+mouseenter and mouseout+mouseleave using binding.. see here:
jQuery("document").ready(function(){
jQuery(".fire").bind('mouseover mousenter',function(){
jQuery(this).children('.entry_extend').stop(true, false).show('slide',null,500,null);
});
jQuery(".fire").bind('mouseout mouseleave',function(){
jQuery(this).children('.entry_extend').stop(true, false).hide('slide',null,500,null);
});
});