I have the following code for my menu, the trouble is I want it to hide/close as soon as I click on one of the options, instead of closing at the X button:
THIS IS THE HTML
MENU
<div class="mobilenav">
<li>HOME</li>
<li>SERVICES</li>
<li>WORK</li>
<li>TALK</li>
</div>
ICON
<a href="javascript:void(0)" class="icon">
<div class="MENU">
<div class="menui top-menu"></div>
<div class="menui mid-menu"></div>
<div class="menui bottom-menu"></div>
</div>
</a>
AND JS
$(document).ready(function () {
$(".icon").click(function () {
$(".mobilenav").fadeToggle(500);
$(".top-menu").toggleClass("top-animate");
$(".mid-menu").toggleClass("mid-animate");
$(".bottom-menu").toggleClass("bottom-animate");
});
Try this:
$( ".icon" ).bind( "click", function() {
$(".mobilenav").fadeToggle(500);
$(".top-menu").toggleClass("top-animate");
$(".mid-menu").toggleClass("mid-animate");
$(".bottom-menu").toggleClass("bottom-animate");
});
This will bind the click function to the class. Also a side-note watch where you place your scripts. From personal experience I've had best results putting all js code (inline and external) right before the tag (even when using document.ready()) but this is probably just personal preference.
DOCUMENTATION FOR BIND
Related
I have an issue with triggering the click event of one of the elements, i added to my Jquery tab. As you know, when one of the links in a Jquery tab is clicked, it changes the content of a specified div to the contents of the div with an id specified in the '<a> </a>' of one of the Jquery tab elements (in this case the one that has just been clicked)..
What I want to do is trigger the click event on this element (i.e the Jquery tab group element that has just been clicked) when i click another element in my document (i.e the element with the id #viewClassesNavBtn).
-------This the call back function code snippet ------
$(document).ready(function(){
$("#viewClassesNavBtn").click(function(){
<!-- $("#dasCBtn").click();-->
document.getElementById('dasCBtn').click();
});
});
------This is the jquery tab ui section------
<ul id="tabs_ul" style="background-color:transparent; border:none;">
<li class="dashBBtn" id="dasBtn">Dash Board</li>
<span class="divider">|</span>
<li class="dashBBtn" id="dasCBtn">Classes</li>
<span class="divider">|</span>
<li class="dashBBtn" id="dasPBtn">Profile</li>
<span class="divider">|</span>
<li class="dashBBtn" id="dasBStn"> Settings</li>
</ul>
When I click the element with id #viewClassNavBtn, I expect it to simulate the tab switching event of the JQuery UI but it doesn't. I get the feeling it is not possible, but I am inexperienced with JQuery UI tabs and stuff, so if it is possible, please help.
jQuery UI is not attaching the click event to the li items, it's attaching it to the link. Simply move the id tags onto the link and problem solved. Included a function to simulate a mouse click instead of relying on the technically obsolete .click() method (which doesn't seem to show any signs of going away)
function clickTab(tab) {
let click = new MouseEvent('click', {
bubbles: true,
cancelable: true,
synthetic: true,
view: window
});
tab.dispatchEvent(click);
}
$( function() {
$( "#tabs" ).tabs();
$(".navBtn").click(function() {
let tab = document.getElementById(this.dataset.for);
if (document.getElementById("simulate").checked) {
clickTab(tab);
} else {
tab.click();
}
});
});
<head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div id="tabs">
<ul>
<li class="dashBBtn"><a id="dasCBtn" href="#tabs-1">Nunc tincidunt</a></li>
<li class="dashBBtn"><a id="dasPBtn" href="#tabs-2">Proin dolor</a></li>
<li class="dashBBtn"><a id="dasBStn" href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
<p>Stuff in the C tab</p>
</div>
<div id="tabs-2">
<p>Stuff in the P tab</p>
</div>
<div id="tabs-3">
<p>Stuff in the S tab</p>
</div>
</div>
<div>
<button class="navBtn" type="button" data-for="dasCBtn">C</button>
<button class="navBtn" type="button" data-for="dasPBtn">P</button>
<button class="navBtn" type="button" data-for="dasBStn">S</button>
<input id="simulate" type="checkbox" checked>
</div>
</body>
i have this html and javascript for my menu button
THIS IS THE HTML
MENU
<div class="mobilenav">
<li>HOME</li>
<li>SERVICES</li>
<li>WORK</li>
<li>TALK</li>
</div>
ICON
<a href="javascript:void(0)" class="icon">
<div class="MENU">
<div class="menui top-menu"></div>
<div class="menui mid-menu"></div>
<div class="menui bottom-menu"></div>
</div>
</a>
AND JS
$(document).ready(function () {
$(".icon").click(function () {
$(".mobilenav").fadeToggle(500);
$(".top-menu").toggleClass("top-animate");
$(".mid-menu").toggleClass("mid-animate");
$(".bottom-menu").toggleClass("bottom-animate");
});
});
i changed the ".icon" for an "a" so the menu closes as soon as i picked any option, now anytime i clicked on the scroll down button, contact and any other tag button the menu opens, is there any way to stop this from happening?
$("a") selects all links on the page.
Instead you only want the select .icon + the links in the .mobilenav, so you need to do $(".icon, .mobilenav a").
Note that JQuery selectors work almost the same as CSS selectors.
$(document).ready(function () {
$(".icon, .mobilenav a").click(function () {
$(".mobilenav").fadeToggle(500);
$(".top-menu").toggleClass("top-animate");
$(".mid-menu").toggleClass("mid-animate");
$(".bottom-menu").toggleClass("bottom-animate");
});
});
I'm having trouble understanding the ng-show angular directive, it is not working correctly for me. I can't get the boolean value to change in the controller like some examples I've seen online. Rather than use the tabs javascript I decided to try and implement a simple angular show and hide for the tabs. However I have checked many examples on the web and I can't find out what is going wrong. Nothing is showing up at all from the divs.
<div class="row" ng-controller="ExtractionTabsCtrl">
<ul class="nav nav-tabs nav-justified" role="tablist">
<li id="titles"class="active">Titles</li>
<li id="contacts">Contacts</li>
<li id="writers">Writers</li>
<li id="files">Files</li>
<li id="companies">Companies</li>
</ul>
</div>
<div ng-show="titlesdiv">Titles</div>
<div ng-show="contactsdiv">Contacts</div>
<div ng-show="writersdiv">Writers</div>
<div ng-show="filesdiv">Files</div>
<div ng-show="companiesdiv">Companies</div>
and my JS side
MPWAdminControllers.controller("ExtractionTabsCtrl",["$scope", function($scope){
$scope.writersdiv=false;
$scope.contactsdiv=false;
$scope.filesdiv=false;
$scope.titlesdiv=true;
$scope.companiesdiv=false;
$('#contacts a').click(function (e) {
e.preventDefault()
$(this).tab('show')
$scope.writersdiv=false;
$scope.contactsdiv=true;
$scope.filesdiv=false;
$scope.titlesdiv=false;
$scope.companiesdiv=false;
})
$('#writers a').click(function (e) {
e.preventDefault()
$(this).tab('show')
$scope.writersdiv=true;
$scope.contactsdiv=false;
$scope.filesdiv=false;
$scope.titlesdiv=false;
$scope.companiesdiv=false;
})
$('#files a').click(function (e) {
e.preventDefault()
$(this).tab('show')
$scope.writersdiv=false;
$scope.contactsdiv=false;
$scope.filesdiv=true;
$scope.titlesdiv=false;
$scope.companiesdiv=false;
})
$('#companies a').click(function (e) {
e.preventDefault()
$(this).tab('show')
$scope.writersdiv=false;
$scope.contactsdiv=false;
$scope.filesdiv=false;
$scope.titlesdiv=false;
$scope.companiesdiv=true;
})
$('#titles a').click(function (e) {
e.preventDefault()
$(this).tab('show')
$scope.writersdiv=false;
$scope.contactsdiv=false;
$scope.filesdiv=false;
$scope.titlesdiv=true;
$scope.companiesdiv=false;
})
}]);
Simply Trying to flip the show value on each div whenever a tab is selected. I have a feeling it might have to do with mixing jquery and angular but Im not sure.
Thanks
James
You are trying to mix JQuery and AngularJS where you would probably be fine with just AngularJS, this should definitely work.
HTML
<li id="contacts"><a ng-click="ShowContacts()">Contacts</a></li>
..
Javascript
$scope.ShowContacts = function()
{
$scope.contactsdiv = true;
.....
Just fill in with the rest of your code.
ng-click is an easier way then defining JQuery on click events. It will execute whatever Javascript you put inside of it and is overall cleaner.
You can also move the ng-click to the li tag which would eliminate your need for the a tag to begin with.
Edit:
Like the previous answer said, you need to extend the controller div to include what your changing. I missed that, what you have with JQuery should work then, but ng-click will be much cleaner regardless.
Based on where you defined your controller, the ng-show directive is not in the same scope as the links you've defined. You need to change your where the definition of the controller is like so:
<div class="container" ng-controller="ExtractionTabsCtrl">
<div class="row">
<ul class="nav nav-tabs nav-justified" role="tablist">
<li id="titles"class="active"><a href ng-click="test()">Titles</a></li>
<li id="contacts">Contacts</li>
<li id="writers">Writers</li>
<li id="files">Files</li>
<li id="companies">Companies</li>
</ul>
</div>
<div ng-show="titlesdiv">Titles</div>
<div ng-show="contactsdiv">Contacts</div>
<div ng-show="writersdiv">Writers</div>
<div ng-show="filesdiv">Files</div>
<div ng-show="companiesdiv">Companies</div>
</div>
You'll notice I added a wrapper around your row and subsequent divs. The wrapping div is now the total scope of your controller, instead of just the ul.
I have my template file for home page, Home-template.php, and in it I have a sliding menu html.
This is my script for sliding menu:
$(document).ready(function() {
// Expand Panel
$("#open").click(function(){
$("div#panel").slideDown("fast");
});
// Collapse Panel
$("#close").click(function(){
$("div#panel").slideUp("fast");
});
$(".toggle a").click(function () {
$(".toggle a").toggle();
});
e.preventDefault();
});
and both jquery and this script are loaded on the page but the slide effect doesnt work, its only poping up and down without effect.
Any help?
here is html code:
<div id="panel">
<nav id="main-menu">
<ul>
<li>Home</li>
<li>About me</li>
</ul>
</nav>
</div>
<div class="toggle"><a id="close" style="display: none;position: absolute;right:5px;top:5px;" class="close" href="#"></a></div>
<div class="toggle" style="position: absolute;right:10px;top:10px;"><a id="open" class="open" href="#"></a></div>
here is a link of a page:
http://pavlovic.com/about-me/
Well for one the e is not defined and secondly I'm not sure how you are including your js so
you should read this: http://wp.tutsplus.com/articles/how-to-include-javascript-and-css-in-your-wordpress-themes-and-plugins/
try the following code which works for me
$(this).effect('slide', { direction: 'down'}, 500);
for the slide effect to work in wordpress along with jquery file the jquery-effects-core and jquery-effects-slide has to be also loaded.
wp_enqueue_script('jquery');
wp_enqueue_script('jquery-ui-core');
wp_enqueue_script('jquery-effects-slide');
this code also works:
$('#test').effect( "slide", "right" );
I have set up a jquery hover show and hide function click here for site however it doesn't work the way i want it to. When you hover over the link "store" it reveals the hidden div, which is a submenu, once the mouse cursor has been moved from the link "store" the hidden div slides.
I want the submenu to stay activate unless one the links in the submenu have been click on or the mouse cursor is have been moved outside of the submenu area.
below is a snippet of my code...
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').hover(function(){
$(".slidingDiv").slideToggle();
});
$('.slidingDiv').mouseout(function(){
$(".slidingDiv").slideUp();
});
});
<div id="menu_store" class="slidingDiv transparent">
<div class="menu">
<h3>clothing</h3>
<ul class="navigation">
<li>sweats / knitwear</li>
<li>shirts</li>
<li>denim</li>
<li>outwear</li>
<li>footwear</li>
</ul>
</div>
<div class="menu">
<h3>lifestyle</h3>
<ul class="navigation">
<li>books</li>
<li>art</li>
<li>objects</li>
</ul>
<div id="menu">
<ul class="cl">
<li><a class="show_hide" href="#">store</a></li>
<li>daily</li>
<li>featured</li>
<li>contact</li>
</ul>
Does anyone have a solution for this...?
I figured it out. http://jsfiddle.net/vtFfv/
Relevant documentation: http://api.jquery.com/mouseleave/
$(document).ready(function () {
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').mouseenter(function () {
$(".slidingDiv").slideDown();
$(".slidingDiv").mouseleave(function () {
$(".slidingDiv").slideUp();
});
$('.slidingDiv a').each(function () {
$(this).click(function () {
$(".slidingDiv").slideUp();
});
});
});
});
When you hide slidingDiv, mouse events aren't registered. So the solution is to attach a mouseleave event to it once you decide to show it (that is, on mouseenter). And then registering clicking on the links is easy.