What I want to do with jquery mobile is when I click a button on the first popup window, the first popup window will disappear with a flip animation, after which the second popup window will appear with the same kind of animation. I tried to use this in the event listener:
$("#div_first").popup("close");
$("#div_second").popup("open");
The first popup window did disappeared. However the second popup window didn't popup. How can I do this with mobile jquery? Thank you!
You need to call next popup once the current popup is closed popupafterclose. Moreover, it is important to data-history="false" to popup div in order not to go back in history to previous activity.
$("#pop1").popup("open", { /* open first popup */
positionTo: "window",
transition: "flip"
}).on("popupafterclose", function () { /* open second popup */
$("#pop2").popup("open", {
positionTo: "window",
transition: "flip",
reverse: true /* optional for reverse effect */
});
});
Demo
Related
Is there a way to reverse a click function when the browser is resized? As of now my menu toggle is working as expected. The problem is when the browser resizes the menu is staying open and the overlay is still active.
I attempted to call functions on a window resize event but had no luck. I would like the functions reversed at 768px
$nav_list.click(function() {
$(this).toggleClass('active');
$('.pushmenu-push').toggleClass('pushmenu-push-toleft');
$menuLeft.toggleClass('pushmenu-open');
$('.menu-open-overlay').toggleClass('open');
});
I have a problem with the Popup of OpenLayers 4, when I open the popup info and I'm inside the div with the pointer, it still triggering the hover popup with the data behind the popup, how can I prevent that?
I'm using this CSS code for the popup:
#popup {
z-index: 20;
background-color: #fff;
}
The popup is created with the overlay layer:
overlay = new ol.Overlay({
element: container,
autoPan: true,
autoPanAnimation: {
duration: 250
}
});
But the pointer still passes through the div. the popup contains a lot of div and inside span
In the screenshot the hover popup was triggered when the pointer was on the Vehs text
You can refer to this for the code I use for the popup, the only difference is that I have a hover popup, I think the problem is on the creation of the click popup (the one with button) and the real z-index of it.
http://openlayers.org/en/latest/examples/popup.html
You can use pointer-events:none before its open and pointer-events:all once it's in open state
In the end, I found a very simple way to solve the problem, inside the function I call for the hover popup I add a simple if statement
map.on('pointermove', function(evt) {
info.html("");
if (overlay.getPosition() !== undefined) {
return;
}
.....
}
Working on a mobile app, I have a menu that "slides" from left to right, using:
$.mobile.changePage(href, { transition: "slide", reverse: true });
On the page I am sliding to, I have a jqm back button, that goes back to my previous page.
The back button, "slides" the page from left to right. I want it to slide from right to left, reversing my left -> right initial transition.
I have tried:
Back
This does not work. I then thought, lets not "reverse" the transition, as it was already reversed to start with. So I tried just specifying slide thinking it would default to the normal slide of right -> left.
Back
This also does not work. My animation on the back button keeps sliding left -> right.
Thanks
Ended up using this.
Overriding the backbutton click event.
<script type="text/javascript">
$(document).on('touchstart', '[data-rel=back]', function (e) {
e.preventDefault();
$.mobile.changePage("index.html", { transition: "slide", reverse: false, changeHash: false });
});
I had to use changeHash: false, as my navigation flow did not register the page to be removed from the history when you now use the UI backbutton. This left me with cycling through all the "menu" page cycles I opened when clicking the hardware backbutton, until all is gone and the app closes.
With the changeHash, I now have one extra click when closing the app, which I can live with.
Here is a link to the item in question:
http://www.nychukdesign.com/uploads/dynamic-top-bar-nav-menu.html
All HTML, Javascript and CSS is in the one html file
Functionality description:
This is a simple dynamic horizontal navigation bar that is intended to disappear when a user scrolls down the page, in which a trigger is activated when the user mouses into the area, of which it slides down and reappears, and disappears once more upon mousing out. When the user scrolls back to the top the navigation returns to it's default (static) state...which is where the problem comes in.
Problem description:
Sometimes (and yes I can not re-create this problem every time) when you return to the top of the page, and the navigation returns to it's default state, when the mouse leaves this area (without scrolling down again) the navigation will slide up and disappear. Sometime it will happen on the first try, sometimes after several, and primarily in Firefox 2.0, although I have had it happen once or twice in Safari.
My thoughts:
I am baffled by this, and why I am seeking help. Any advice would be greatly appreciated.
To re-create the problem
Update: I just discovered how to re-create the problem. You must scroll down and trigger the menu at least once, before scrolling back to the top, in which mousing over the menu will for some reason make it disappear.
Code:
<script type="text/javascript">
// Use short notation of DOM ready
$(function(){
// Assign variables for the menu, the trigger and the menu position (relative to the document)
var menu = $('#menu'),
menuTrigger = $('#menu-trigger'),
pos = menu.offset();
// Listen for the scroll event
$(window).scroll(function(){
// If we scroll past the position of the menu's height and it has it's default style, then hide menu.
if($(this).scrollTop() > pos.top+menu.height() && menu.hasClass('default')){
menu.fadeOut('fast', function(){
// Remove the default class and replace with fixed class
$(this).removeClass('default').addClass('fixed');
});
// Initiate the trigger to show and hide the menu with the mouse event
$(menuTrigger).removeClass('hidden').addClass('block').mouseenter(function(){
$(menu).slideDown('fast').mouseleave(function(){
$(menu).slideUp('fast');
});
});
// If we scroll back to top and menu has fixed class, fadeIn menu
} else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){
menu.fadeIn('fast', function(){
// Hide the trigger
$(menuTrigger).removeClass('block').addClass('hidden');
// Give menu default style
$(this).removeClass('fixed').addClass('default');
});
}
});
});
</script>
I have a HTML page on click of button i am displaying a Popup made on same page as div.
On displaying that popup i need to disable the scrollbar of the parent page.
Presently i am doing this:
/* Function to disable parent page scrollbar */
function DisableParentPageScroll(){
$('body,html').css('overflow-y','hidden');
}
/* Function to enable parent page scrollbar */
function EnableParentPageScroll(){
$('body,html').removeAttr("style");
}
But when i am disabling the page there is a page shift observed. How can i prevent this?
The term which you are using Page Shift, its occurring because you are removing the scrollbar and when the scroll bar is removed the space becomes empty and then the design document gets more space and hence its shifting. If you want to avoid this you have to add some Padding or Margin to the external wrapper or <body>.
For e.g. like this
/* Function to disable parent page scrollbar */
function DisableParentPageScroll(){
$('html').css('overflow', 'hidden'); // Added this for few browsers
$('body').css({
'overflow-y':'hidden',
'padding-right': '20px' // Asuming the scrollbar width as 20px
});
}
/* Function to enable parent page scrollbar */
function EnableParentPageScroll(){
$('html').removeAttr('style'); // Added this for few browsers
$('body').css({
'overflow-y':'auto',
'padding-right': '0'
});
}