I am trying to revise the following jQuery Mobile code to display if the navbar with the id "e" is clicked. The code below works for all of the navbar items, but I only want the alert to appear if the navbar with the id "e" is clicked. Any help revising this would be great. Thanks much!
$(document).on('pagebeforeshow', '#p_page', function(event){
$('div[data-role="navbar"] a').live('click', function () {
alert("div E clicked");
});
});
This should work:
$(document).on('pagebeforeshow', '#p_page', function(event){
$('div[data-role="navbar"] ul li a#e').on('click', function () {
alert("div E clicked");
});
});
Working example: http://jsfiddle.net/Gajotres/rnRqm/
Instead of live use click event because live is deprecated from jquery.
$('div[data-role="navbar"] a').on('click', function () {
alert("div E clicked");
});
Related
I am using this Wordpress theme, called ichiban.
I have made some custom menu items that links directly to sections on the same page. For these cases I would like the whole menu to un-toggle when the < li > item is clicked. This is the code I have been working on;
jQuery( document ).ready(function($) {
$('#menu-main li a').on("click", function(){
$('.site-overlay-wrapper').hide();
});
});
For now, this code only hides the open menu, the menu button does not reset, and it is not possible to re-ope the menu. Please help me getting this code correct.
SOLUTION
jQuery( document ).ready(function($) {
$('#menu-main li a').on("click", function(){
$("body").removeClass("overlay-open");
});
});
Thank you all :)
You can try using jQuery .toggle() method.
Change this line:
$('.site-overlay-wrapper').hide();
To:
$('.site-overlay-wrapper').toggle();
This help?
jQuery( document ).ready(function($) {
var t = true;
$('#menu-main li a').on("click", function(){
if(t===true){
$('.site-overlay-wrapper').hide();
t=false;
}
else{
$('.site-overlay-wrapper').show();
t=true;
}
});
});
Here is working example:
jQuery( document ).ready(function($) {
var t = true;
$('#button').on("click", function(){
if(t===true){
$('.show').hide();
$(this).text("SHOW");
t=false;
}
else{
$('.show').show();
$(this).text("HIDE");
t=true;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="button">CLICK</button>
<div class="show">HAPY NEW YEAR!!!</div>
You also can have a problem with $('#menu-main li a'). That a tag is wrong. You need to point click statemant to button class directly because you hide your menu on any a tag inside any li.
Can someone help me adapt the following so that the dropdown menu not only hides on click, but also hides on mouseout and/or when another of the top level menu buttons is hovered on?
jsfiddle
$(document).ready(function () {
$("li").click(function () {
$('li > ul').not($(this).children("ul").toggle()).hide();
});
});
Still getting my feet wet with jQuery/script coding.
NOTE: I'm using divs as part of the structure of the dropdown, as in the instance that "ul" above is replaced by a div.
FYI, I can't take credit for the above, it is the work of Pramod Sankar L (user PSL).
Any help would be appreciated!
Try
.mouseleave()
:has()
$(document).ready(function () {
$("li:has(ul)").click(function () {
$('li > ul').not($(this).children("ul").toggle()).hide();
}).mouseleave(function () {
$('li > ul').hide();
});
});
$("li:has(ul)") select li which contains ul
Fiddle Demo
Updated After Op's Comment
$(document).ready(function () {
$("#dropmenu li:has(div)").click(function () {
$('#dropmenu li.second-level > #dropmenu li.second-level div.drop_6col-bottom').not($(this).children("#dropmenu li.second-level div.drop_6col-bottom").toggle()).hide();
}).mouseleave(function () {
$(this).children('div').hide();
});
});
I have a question concerning collapsing/expanding a footer. I have a simple basic collapse/expand script going, where when the "Open" button is clicked, the hidden footer slides up and when you click "Close" it slides back down and hides again. Now, I want to attach an instance where I can click anywhere on teh DOM when the footer is open and it will close.
This is the script:
$(document).ready(function () {
// Expand Panel
$("#footerOpen").click(function (e) {
e.preventDefault();
$("div#footerPanel").slideDown("slow");
});
// Collapse Panel
$("#footerClose").click(function (e) {
e.preventDefault();
$("div#footerPanel").slideUp("slow");
});
// Switch buttons from "Log In | Register" to "Close Panel" on click
$("#toggle a").click(function () {
$("#toggle a").toggle();
});
});
Thanks
$(document).ready(function () {
// Expand Panel
$("#footerOpen").click(function (e) {
e.preventDefault();
$("div#footerPanel").slideDown("slow");
});
// Collapse Panel
$("#footerClose").click(function (e) {
e.preventDefault();
$("div#footerPanel").slideUp("slow");
});
// Switch buttons from "Log In | Register" to "Close Panel" on click
$("#toggle a").click(function () {
$("#toggle a").toggle();
});
// click anywhere on teh DOM when the footer is open and it will close.
$("body:not(#footerClose)").click(function (e) {
e.preventDefault();
$("div#footerPanel").slideUp("slow");
});
});
try this one, im using jquery not selector.
Attach a click handler to the document, and do the slideUp in there. You can use the event.target to determine whether or not to perform the slideUp:
$(document).on('click', function(e) {
// Don't slideUp if #footerOpen or #footerPanel are clicked
if ($(e.target).is('#footerOpen, #footerPanel')) {
return;
}
// Do the slideUp!
$('#footerPanel').slideUp('slow');
});
Here's a fiddle
If you have other elements within your #footerPanel, the above probably won't work as the target will likely be something other than #footerPanel, the best thing to do would be to add a click handler to #footerPanel, and prevent the event from propagating and triggering the above click handler:
$('#footerPanel').on('click', function(e) {
e.stopPropagation();
});
Here's another fiddle
Try this it worked for me...
$(document).click(function(event) {
var $target = $(event.target);
if(!$target.is("#footerPanel")){
$("#footerPanel").slideUp('slow');
}
});
I like to know how to get the id of li when i right click over this li using javascript or jquery.
<ul>
<li id="liid" class="collapsable">
<div class="hitarea collapsable-hitarea">
</div>
<span class="folder">Group1.2</span>
</li>
</ul>
I have the right click function.
$(document).bind("contextmenu", function (e) {
// code to get the id of current li
});
Can any one help me please.
Use .on('contextmenu', 'li')
$(function() {
$('ul').on('contextmenu', 'li', function(e) { //Get li under ul and invoke on contextmenu
e.preventDefault(); //Prevent defaults
alert(this.id); //alert the id
});
});
Demo
This uses event delegation on document and only fires if an li is clicked.
$(document)
.on('contextmenu', 'li', function(e) {
e.preventDefault();
console.log(this.id);
});
Compared to adding a handler on $('ul') or $('li'), this will only bind a single handler.
You can try this
$(function() {
$('li').on("contextmenu", function (e) {
alert(this.id);
e.preventDefault();
});
}
Demo
You can use this..
If you want open also Context Menu on right click then use below code:
$(function() {
$('ul li').on('contextmenu', function() {
alert(this.id);
});
});
and without Context Menu then use below code:
$(function() {
$('ul li').on('contextmenu', function(e) {
e.preventDefault();
alert(this.id);
});
});
Happy New year...
CODE:
<script type="text/javascript">
$(document).ready(function() {
$('.show_or_hide_link_clicker').click(function() {
$(".the_box_to_show").fadeIn(400);
});
});
</script>
When show_or_hide_link_clicker is clicked the_box_to_show is shown. How do I hide it if show_or_hide_link_clicker is clicked again or when the user clicks away?
Update: This is what I am doing now: http://jsfiddle.net/nFbnr/
Question: How can i remove the double click requirement ot show the div?
jQuery Toggle is what you're looking for.
$('.the_box_to_show').toggle();
When clicking anywhere, check if the element was on the propagation path. If not, the user clicked outside of it so you can hide it.
$(document).click(function(e) {
if ($(e.target).closest(".the_box_to_show").size() === 0) {
$(".the_box_to_show").hide();
}
});
http://jsfiddle.net/vdHAu/
$(document).click(function(e) {
if (!$(e.target).is(".the_box_to_show")) {
$(".the_box_to_show").hide();
}
});
$('.show_or_hide_link_clicker').click(function() {
$(this).hide();
$(".the_box_to_show").fadeIn(400);
});
An another way without delegate event to document level:
you have to set attribute tabindex to the box and CSS outline for style
http://jsfiddle.net/GV56b/
$(document).ready(function () {
$('.show_or_hide_link_clicker').click(function () {
$(this).hide();
$(".the_box_to_show").fadeIn(400, function () {
this.focus()
});
});
$(".the_box_to_show").on('blur',function(){
$(this).hide();
$('.show_or_hide_link_clicker').fadeIn(400);
});
});
check this out
$('.show_or_hide_link_clicker').click(function() {
$(this).hide();
$(this).addClass('active);
$(".the_box_to_show").fadeIn(400);
});
$(document).on('click', 'html', function(){
$(".the_box_to_show").fadeOut(400);
});
$(document).on('click', '.active', function(e){
e.stopPropagation();
});