I would like an image to change once clicked and change back once the dialog it links to is closed.
I actually found a solution to what I was trying to do on this site, right here However, upon modifying it to suit my needs it does not work, Can anybody pinpoint what I am missing?
HTML:
<div data-role="footer" data-position="fixed" data-id="myFooter">
<div class="navBar" id="bah" data-role="navbar">
<a href="#menu" id="burgerMenu" data-rel="popup">
<img id="burger" src="resources/burger.png" alt=""/>
</a>
</div>
</div>
jQuery:
$(document).ready(function()
{
$("#bah").on("dialogclose", function(event)
{
$("#burger").attr("src","resources/burger.png");
});
});
Use jQM pagecreate event instead of the regular jQuery ready
For popup clode, the correct event is popupafterclose
The popup id in your example is menu not bah.
$(document).on("pagecreate","#page1", function(){
$("#menu").on("popupafterclose", function(event) {
$("#burger").prop("src","http://lorempixel.com/24/24/technics/1/");
});
});
DEMO
Related
I am having a problem here, i want to add and remove a class to a element and I am using on() method to handle the click event on body. The code works on the first click but after the first click it wont handle the event anymore!
Below is the code:
$('body').on('click', '#cshero-menu-mobile .cms-icon-menu', function(){
var navigation = $(this).parents().find('#cshero-header-navigation');
if(!navigation.hasClass('collapse')){
navigation.addClass('collapse');
}else if(navigation.hasClass('collapse')){
navigation.removeClass('collapse');
}
});
This is a problem I am having with menu icon that appears on mobile and tablets and I want to open and close the menu when clicked!
I tried putting an alert just below the first line of code and it will alerts only once! Any help is appreciated!
<div id="cshero-header-navigation" class="col-xs-12 col-sm-7 col-md-9 col-lg-9 phones-nav" style="z-index:999999;">
<div class="navigation-main">
<div class="cshero-navigation-right hidden-xs hidden-sm icon-search-hidden">
<div class="nav-button-icon">
</div>
</div>
<nav id="site-navigation" class="main-navigation">
<div class="menu-main-menu-container">
<ul id="menu-main-menu" class="nav-menu menu-main-menu">
<li>links</li>
<li>links</li>
<li>links</li>
<li>links</li>
<li>links</li>
</ul>
</div>
</nav>
</div>
<div id="cshero-menu-mobile" class="collapse navbar-collapse">
<i class="cms-icon-menu pe-7s-menu"></i>
</div>
This is my html code. In mobile view the menu will be opened only once!
So the issue is with your code: you forgot to include a comma , between #cshero-menu-mobile and .cms-icon-menu. Below is the recommended solution:
$('body').on('click', '#cshero-menu-mobile, .cms-icon-menu', function(){
var navigation = $(this).parents().find('#cshero-header-navigation');
if(!navigation.hasClass('collapse')){
navigation.addClass('collapse');
}else if(navigation.hasClass('collapse')){
navigation.removeClass('collapse');
}
});
Rather than using on, you could simply use the click handler as well like so $('body').click('#cshero-menu-mobile, .cms-icon-menu', function(){... which would still work.
From what I can deduce, it would appear that you're trying to imitate Bootstrap's accordion. I would recommend you use that instead.
Try this:
$('body').on('click', '#cshero-menu-mobile .cms-icon-menu', function(){
$(this).parents().find('#cshero-header-navigation').toggleClass("collapse")
});
To every one interested, I fixed the problem, just changed the first line from
$('body').on('click', '#cshero-menu-mobile, .cms-icon-menu', function(){
to
$('body').click(function(){
this seams to bind the click event directly to body so a simple solution!
I'm a beginner with jQuery and I have this HTML:
<a class="a2a_dd" href="https://www.addtoany.com/share_save"><img src="//static.addtoany.com/buttons/favicon.png" width="0" height="0" border="0" alt="Share"/>Share</a>
<div id="share-btns">
<div id="facebook">
<a class="a2a_button_facebook"></a>
</div>
<div id="google_plus">
<a class="a2a_button_google_plus"></a>
</div>
<a class="a2a_button_twitter">
<div id="twitter"></div>
</a>
</div>
I am trying to use jQuery to make it so when you click on the .a2a_dd link, it will toggle the #share-btns div visibility. Here is my code:
(function($){
Drupal.behaviors.toggle = {
attach: function() {
$('.a2a_dd').click(function() {
$('#share-btns').fadeToggle();
});
}
};
})(jQuery);
The problem is, I have a grid of teaser articles all on the same page that all have this HTML on them and when I click on the .a2a_dd link on any of the teasers it toggles the #share-btns div on only the first teaser on the page. Is there a way to get jQuery to recognize the node that was clicked on so it can toggle the div from that same node? Any help would be greatly appreciated.
A quick fix using next(). You need to target the element right after the toggle link (according to your html structure).
$('.a2a_dd').click(function() {
$(this).next().fadeToggle();
});
Plunker example.
I created this snippet in a simple Phonegap 3.1 app, based on the JQuery Mobile popup documentation:
<div data-role="popup" id="popupMenu" data-theme="e">
<ul data-role="listview" data-inset="true" style="min-width:210px;" data-theme="e">
<li>Help</li>
<li>About</li>
</ul>
</div>
<a href="#popupMenu" data-rel="popup" data-role="button">
Click for menu
</a>
Clicking the button brings up the menu.
I also have this snippet in an external .js file:
$(document).ready( function() {
document.addEventListener("menubutton", onMenuKeyDown, false);
})
function onMenuKeyDown() {
alert("Menu key pressed!");
// what goes here?
}
Pressing the menu button brings up the alert, so I know the listener is working. Now, I want to add some code to the onMenuKeyDown() function so it will bring up the menu loaded by the button in the first snippet. The code needs to be equivalent to clicking
Click here
How would I do that?
Thanks.
Well, I found a way to do this. It works, but it seems kind of hacky. Suggestions for other ways to do this are welcome.
First, make the original link invisible and give it an ID:
<a href="#popupMenu" style="display: none;" id="hammerTime" data-rel="popup" data-role="button" >
Can't touch this!
</a>
Then have the menu button click the invisible link:
function onMenuKeyDown() {
// alert("Menu key pressed!");
$("#hammerTime").click()
}
Hopefully someone else will find this useful along the way.
I'm developing a RhoMobile appand I've been having lot of trouble with page transitions.
At the end, I just decided to turn them off for a better user experience. Every button click works perfectly, except for one where I have a button inside a Collapsible element.
For the click event on the button not to get interpreted as a click on the collapsible, I use this js code, which I suspect is causing trouble:
$(document).on('pagebeforeshow', '#index',function(e){
$('.details').bind('click', function (e) {
e.stopPropagation();
e.stopImmediatePropagation();
});
});
And in the HTML:
<div data-role="page" id="index">
Here go headers & navbar and other stuff
</div>
<div data-role="content">
<div data-role="collapsible-set" class="uurbon-block">
<div data-role="collapsible" data-collapsed="false">
<h3 data-position="inline"><p class='alignleft'>Collapsible title</p><div style="clear: both;"></div>
<span style="float:right;" class="button-span">
<a href="some_url.html" data-role="button" data-mini="true" data-inline='true' data-icon="star" data-iconpos="left" class="details" data-transition="none">
Button
</a>
</span>
</h3>
</div>
</div>
</div>
This will cause a blank page to be shown for 1-2 secs before transitioning. I'd be looking for a fix, but if not, i'd be happy with that page just beeing black (my app background is black also, so this blink wouldnt be so noticeable).
Note: I have alredy tried setting body background color in css, won't work.
Thanks for your ideas!
As pointed by Omar, if you want to put a button inside a collapsible and prevent the collapsible from capturing the click while also handling the page in the same browser, the correct way to do this is (Take notice that this may only apply to RhoMobile, but its worth a try on other jquerymobile-based frameworks):
and avoid RhoMobile trying to open this in a new browser is by using:
javascript:
$(document).on('pagebeforeshow', '#index',function(e){
$('.details').bind('click', function (e) {
e.stopPropagation();
$.mobile.changePage("your_page");
});
});
HTML:
Button
Notice the href="javascript:;". I had this first set to "#" and also "", but that didn't work.
Is it possible to open a dialog in Jquery Mobile from javascript?
I tried doing something like this but it didnt work:
<a id='lnkDialog' href="goals.html" data-rel="dialog" data-transition="pop" style='display:none;'></a>
and then in js
document.getElementById('lnkDialog').click();
Any help would be appreciated
We'll need a lot more information, but unless #lnkDialog already has a function binded to a click event, that's not going to work. I'm assuming the data-rel contains the ID of the modal that will pop up.
It'd be more like
$('#lnkDialog').on({
click:
function() {
var selector = '#' + $(this).attr('data-rel');
$(selector).show();
}
});
but again, a LOT more information needed.
Here's what i do.
In my markup i have a dialog defined inside body, towards the end of it as follows:
<div data-role="dialog" id="messagebox">
<div data-role="header">
<h1>Message</h1>
</div><!-- /header -->
<div data-role="content">
<span id="phMessage"></span>
</div>
</div>
Then in javascript I have:
function showMessage(message) {
$("#phMessage").html(message);
$.mobile.changePage('#messagebox', 'pop', false, true);
}
The only thing you really need is $.mobile.changePage('#messagebox', 'pop', false, true);