How to disable / enable fancybox on the fly? - javascript

We are developing a site with fluid layout (so it works on mobile too), that adjusts itself when resizing the window.
Everything is ok but an area when we use fancybox to zoom the images.
What I want it to disable fancybox when I call our "mobile ajusts" function (triggered by window.resize already) on our gallery, and re-enable it again when when going back to the "desktop" version.
I've tried a lot of things like preventDefault on 'click', using the $('.case-gallery a').fancybox($.fancybox.cancel) and stuff like that, but it seems that as fancybox is already stored in the DOM element, I'm not being able to disable it and enable it again on the fly - and my knowledge of JS is not really advanced.
Any help?

try this to listen to fancybox onStart event and then use $.fancybox.cancel() (don't forget (). It's a function).

I have the same problem, and here is my current working thought:
jQuery check if event exists on element
use this answer to check a variable property to the DOM... like check if DOM.style.whatever > 10. just my working thought. I have a site that has a carousel of products in DIVs, and i want the not-displayed products to not be clickable based on their DIVs opacity. I'll repost in a day if i figure it out.

Related

Keep classes added by jQuery after window resize

I'm building a plugin menu for a Wordpress website using the Divi theme.
I add a class using the following code:
jQuery("#cdBarsicon").click(function () { jQuery(".cdMobileMenu").addClass("cdMobileActive"); });
I noticed while testing on a mobile browser that my menu is closed when scrolling down.
What actually happens is that the window is resized when the mobile browser hides the navigation area.
So I realized that all jQuery class changes are reset after the window is resized.
This is probably normal, but how would I keep the menu visible after resizing the window?
I tried using vanilla javascript instead of jQuery, same problem.
function openMobileMenu() { document.getElementById("cdMobileMenu").classList.add("cdActive"); }
I also tried using css() and show() instead of addClass, same problem. It gets reset.
I'm considering using a cookie but I feel I'm missing a simpler solution.
I'm not sure exactly why but the solution in this case was to use the text block instead of the code block in the Divi builder to add the shortcode that displays my menu.

itemtap event not firing on all taps

I'm using Sencha Touch 2.1. I have Ext.carousel.Carousel container and bunch of Ext.dataview.Dataview as pages inside carousel.
On each dataview I have a lot of buttons (rendered using CSS - so they are not buttons controls but simple divs with fancy styles). I'm trying to catch itemtap event when user taps on the "button".
Everything works fine in browser on the desktop. On the iPad however touch sensitivity is different and often I will not get itemtap event when user not carefully and somewhat slowly taps on the button. Carousel would start moving slightly as in swipe event was detected and carousel needs to change pages.
I tried to replace itemtap and use itemtouchstart instead. Button responsiveness got significantly better, but I often see false positives when user legitimately swipes between pages.
I'm stuck. I want to have responsive buttons and also swipe across to change pages.
Anybody seen something similar? Or solve it somehow?
This is a known issue check out this forum post in sencha forum. Tragically i have the same issue & at the moment it cannot be solved using sencha alone perhaps a solution is available in phonegap but i dont know.

Phonegap-(Android/iphone) Image gallery with multiple images is giving problems?

I have made an image gallery in HTML5, JavaScript and CSS by using jQuery mobile. IE Phonegap platform ok.
The images are coming dynamically and are loaded in it, like this:
http://torontographic.com/wordpress/mouseSwipe/mouseSwipe.html
Above mouseSwipe Slider:
TYPE: 'mouseSwipe'
HORIZ: true
plugin available at
torontographic.wordpress.com
The problem coming with it is that I cannot click on the image and go to next page, because two events are occurring together.
The second problem is that I cannot swipe the page up down, from the place where gallery is placed, except the other area where gallery is not present.
To make it more clear, I am making news application in which I have added 5 - 10 gallery like Pulse news application.
I'm a little confused about some of the details of the issue, but I hate to see this question go completely unanswered in case someone else has this issue.
This plugin (mouseSwipe) overrides the default dragging functionality for mobile devices. Whereas normally devices would scroll the page on the mouse starting event, this plugin overrides that behavior to detect click movement across an element. Since it interrupts that functionality, dragging the opposite direction (for scrolling) is also broken. If the plugin were still being maintained by the owner (it doesn't appear to be), it could be updated to fix this issue, or emit events that could be used to manually create the functionality you're wanting.
I assume this is also what is giving you trouble for clicking to go to the specified page.
If you want my honest opinion, I would choose a different library, perhaps one that focuses solely on the swipability of mobile devices, and then handle desktop functionality separately (though, if you're using PhoneGap, it's likely you aren't even publishing this to a web platform for desktops). If it's going to be on the web, you can use modernizr (or the like) to figure out if the device supports touch input, and then implement something like the following:
http://labs.rampinteractive.co.uk/touchSwipe/demos/Image_gallery_example.html
For devices that do not support touch, you could fall back to button/arrow-based navigation (after all, as a desktop user, I do not expect to be able to drag it back and forth with the mouse).
In the file http://torontographic.com/wordpress/mouseSwipe/jquery.mouseSwipe.js onmousedown function has the code below. This will stop the event from the default behaviour and in cases stop captured/bubbled. You may want to look at these or the way event are being handled by the libraries.
e.preventDefault()
Here is more on how to stop JQuery propagation and regular behaviour.
event.preventDefault() vs. return false
What is event bubbling and capturing?
The reason you cannot swipe up and down is likely due to that the "swipe" event is hogging the "movestart" or "move" event.
I ran into a similar problem once when using this plugin:
http://stephband.info/jquery.event.swipe/
Their solution as pointed on on their website was to call the preventDefault method on the event to keep it from blocking as seen here.
jQuery('.mydiv')
.on('movestart', function(e) {
// If the movestart is heading off in an upwards or downwards
// direction, prevent it so that the browser scrolls normally.
if ((e.distX > e.distY && e.distX < -e.distY) ||
(e.distX < e.distY && e.distX > -e.distY)) {
e.preventDefault();
}
});
I have no experience with jQuery mobile, but i would reckon the problems are similar.

jquery scrolling help

Is it possible without the help of a plugin to make a page scroll to a certain position on the click of a button?
Basically, if the user clicks a button a popup gets displayed in the center of the screen, if the user uses the button at the bottom of the page, the popup is sometimes out of view so I am wanting to couple the showing of the popup and scolling to the top of the popup on the clickup.
Is this possible?
Thanks
Using the CSS
position : fixed
is the best bet for your problem.
In case if you would like to know the way to scroll the page to certain position using jQuery then here it is.
Use jQuery's scrollTop() function in the following way.
jQuery(window).scrollTop(<position>);
Using jQuery to handle scrolling will also resolve any browser incompatibility.
You can get that effect with the scrollIntoView method. But it's probably better to centre your popup on the window rather than the document to avoid the problem in the first place ...
Sometimes lean and mean works nicely. No Plugins, No JQuery:
window.scrollTo()
Watch out for cross browser incompatibilities that might creep in. That's the point of JQuery ;)

How to implement the functionality of autoscrolling page if the element is below page fold in javascript?

I want to implement a similar functionality like Template Monster's menu. I am trying to create a feature list which slides down when the user clicks on the feature. But if the link is at the bottom of the page and the user clicks on that link, the feature list is shown below the view area and the user doesn't know that it is open until he manually scrolls the browser window down.
I want to incorporate a functionality that if the feature list is not in the viewable area, the browser window automatically scrolls down to show the full list (templatemonster.com has done so with their drop down menus).
Can anybody help me?
Thanks,
Gaurav
The website which you reference is using the Prototype JavaScript framework with Scriptaculous for it's visual effects. These libraries make this sort of task much easier as there are built in controls to achieve, more or less, exactly what you want.
If you want something to slide down when a user clicks on it; you should be thinking about the event click and effect slide down Check out the demo in the manual for this.
The second aspect of scrolling can be achieved using these libraries too. Again, checkout the demo in the manual for this too. Essentially, you need to use an anchor tag to mark the point on the page where the feature exists, and then use the scrollto effect to take you to that poision on the page.
Hope this sets you on the right path.

Categories