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.
Related
I'm still very inexperienced in jQuery but trying to tackle this issue. I have a hamburger menu that opens and closes when clicked. However, I added CSS to the hamburger menu to expand to 100vh when open. This worked fine, however, the content in the background still scrolls behind the menu. I found CSS that locks the body in place via an overflow: hidden styling to the "HTML, body" class and lets me open and close the menu without the background scrolling, but with that CSS styling constantly in place, I cannot scroll at all even when the menu is closed.
This brings me to my question. I believe I found one of the scripts that open and closes the hamburger menu. Would it be possible to modify and add to this script so that it adds the above style to the "HTML, body" class only when the menu is open?
I went through W3 Schools to get a better understanding of the syntax, but this script is a little different than what I saw in the tutorials.
Here is the script:
function() {
return e(".mobile_nav.opened .mobile_menu_bar").not(e(this)).trigger("click"), s.hasClass("closed") ? (s.removeClass("closed").addClass("opened"), n.stop().slideDown(500)) : (s.removeClass("opened").addClass("closed"), n.stop().slideUp(500)), !1
}
Is this a possible solution or is there a better option for me to prevent the background scroll? I would share the link but I have to have it hidden an under-construction page.
Here is a screen shot of what I am seeing on my end.
The issue I'm having is that when a modal is opened, the background body is scrollable using the mouse wheel.
Seems like this problem is known and people have suggested to set the body to overflow:hidden as stated in this link:
Prevent BODY from scrolling when a modal is opened
which works fine if your page is short and the modal link is on the initial visible page. However, if you have a longer page and you have to scroll down to see the modal link, once you click to open the modal, the background body shifts to the top.
The background does not scroll anymore, which is what I want, but is there any way to prevent it from popping back to the top when the modal is opened? It's inconvenient when you need to add multiple entries of something using the modal and you have to keep scrolling down to click the modal link to add another item.
In your onclick(I'm guessing you use onclick) event-method insert a return false; at the end, that will prevent the site from scrolling to the top.
I was having a similar problem in which modals larger than the window were cut off, and scrolling anywhere would scroll the background and not the modal.
This question pointed me to this plugin which is simple to use and fully addresses mine in addition to your problem of not permitting the background to scroll:
However this issue is said to be resolved in Bootstrap 3 and the plugin should not be needed if you're using the current version of Bootstrap.
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.
I have a problem in the page whose URL can be seen below:
http://hero.mynet.com/new/
There is a tabbed structure at the middle bottom of page.Each tab consists one carousel working.And each carousel item (image) can be shown in an overlay when they are clicked.
I used jQuery 1.3.2 (I know it's old but I cannot change because of other depencies), jQuery UI 1.7.3, jCarousel 0.2.8 and FancyBox 1.3.4 to build this.
Problem can be seen in the screen shots of Internet Explorer and Chrome when 2nd or 3th tab clicked and prev button clicked.
What can caused this, I tried many things to fix this but none of the fixed my problem.
What do you recommend? It's difficult to change all structure to a new one because of the time planing of this job.
tHanks to all answers already now
Internet Explorer Screen Shot
Chrome Screen Shot
This problem is because you are trying to create the carousel after you have created the tabbed interface. So probably jcarousel is trying to render the carousel inside a container whose display property is set to null (a non-active tab) . Since position and many other properties of this container can not be reliably determined, this will fail in most browsers. Please try rendering the carousel before, once the carousel is rendered, then create the tabs.
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 ;)