Page jumps to top when click Menu Icon on mobile - javascript

I have written code for the mobile site so that when you click the menu item, the page body becomes fixed and cannot scroll (so that we are able to scroll through the drop down menu, without the background scrolling). However, whenever I click the menu button, the page jumps to the top of the website. I am trying to get it so that when you click the menu button, the page stays where it is, and does not jump to the top. Any help is greatly appreciated.
OUR WEBSITE
jQuery( function($) {
$( ".x-btn-navbar" ).on('click', function(e) {
$('body').toggleClass("noScroll");
e.preventDefault();
});
});
.noScroll {
position: fixed;
}
EDIT I have tried putting e.preventDefault(); into my jQuery but it still doesn't work. The "duplicate" page that I was linked to does not work. This has been marked as a duplicate but it is not. I am trying to get help so that I can get my website to work. Please unmark as duplicate.

Related

Magnific Popup Conflict

I have a JS conflict occurring and cannot figure it out.
My site is a one page layout that uses smooth scroll to move from section to section.
There are 4 scripts in particular that I believe are conflicting.
The problem is once I click an image to open it, the page bounces right back to the top instead of staying where it is. After closing the image popup, I have to scroll back down every time. You will also notice that after closing the popup image, clicking any nav button at the top forces a scroll from the top down and not from the current position (as shown earlier in the video).
This problem is even worse in Safari (Firefox does not do this part) as the active nav items do not display (green highlight) after closing a popup image.
Please have a look at a video screen grab I posted of the issue I am having.
http://whataprettyface.ca/video2.html
I have the Filterizr / Magnific Popup / Portfolio working perfectly on my mobile site. But the mobile site does not include the smooth scroll feature.
As mentioned above, I am using:
1) Magnific Popup v1.1.0 (Pops open images in forefront)
http://whataprettyface.ca/desktop/js/jquery.magnific-popup.js
2) J.Query Filterizr (arranges selected photo gallery)
http://whataprettyface.ca/desktop/js/jquery.filterizr.js
3) My 'Scripts' main JS (contain smooth scroll code)
http://whataprettyface.ca/desktop/js/scripts.js
4) And a 'portfolio" script:
$(function(){
'use strict';
// portfolio filter container
$('.filtr-container').filterizr('filter', '1');
// portfolio filter
$('.simplefilter li').click(function() {
$('.simplefilter li').removeClass('active');
$(this).addClass('active');
});
// portfolio image-popup
$(".image-popup").magnificPopup({
type: "image",
removalDelay: 300,
mainClass: "mfp-fade"
});
});
I have read about no.Conflict but am not sure how to properly implement it here or if it will even work.
I feel like the answer is before my eyes but I am a novice.
Any help is greatly appreciated!
To my dismay, the issue was not in my scripts at all. It was as simple as changing a few lines in my CSS.
By moving the 'hidden overflow' from the html/body and adding in to the portfolio container, the issue was resolved.
#work .container{
overflow: hidden;
}

JavaScript .toggle - vertical scrollbar goes up?

I have this function:
$(document).ready(function() {
$("#toggle-area").click(function() {
$("#show-area").toggle(300);
});
});
It displays some text when user click on the link. The problem is I have 12 links, one below the other, and the vertical scrollbar appears. However, when I scroll down and click on the 12th link (for example), my scrollbar jumps on the top of the page and I have to scroll down until the end to see the text that appeared.
How do I avoid this jump, and keep my list where it was before the click?
Here is the link - JSFiddle
Thanks in advance.
You could use preventDefault to skip the default hyperlink behaviour.
suppose #toggle-area are a hyperlink element.
$(document).ready(function() {
$("#toggle-area").click(function(e) {
$("#show-area").toggle(300);
e.preventDefault();
});
});

Sliding div in and out on click, but the original isn't showing on page load?

Not sure what i've done here, but i'm trying to move my leftside navigation on and of screen. As you can see on the page load(link below), the navigation doesn't show, but once you click on the menu icons things start to move around. Though that isn't working correctly till you click both of the icons once.
Javascript
var boxes = $('ul.topLevelNavigation');
$(document).ready(function () {
$('.button').click(function (e) {
e.preventDefault();
var box = $($(this).attr('href'));
if (!box.hasClass("topLevelNavigation")) {
var current = $('ul.topLevelNavigation');
current.stop().animate({
left: '-25%',
}, 500).removeClass('topLevelNavigation');
box.stop().animate({
left: '25%',
}, 500).addClass('topLevelNavigation');
}
});
});
link to site http://keithfrenchdesigns.com/RunwayMag/index.html
Thanks in advance for any help
Your navigation doesn't show on page load because you're relying on JavaScript to hide and show it, but your JavaScript only fires when the navigation button is clicked, not on page load. You can do one of two things to fix this.
Have JavaScript hide the navigation on page load - Set left: -25% on either topLevelNavigation1 or topLevelNavigation2 depending on which one you want to show on page load.
Hide your navigation by default with CSS - Add left: -25% by default on your HTML by means of a class (make sure you remember to remove the class with JavaScript when you want to show it) or just add an inline style <ul class="topLevelNavigation2" style="left: -25%">.
The second method is definitely the more preferred method as you're not relying on JavaScript to load the initial state of your site and you don't have to wait until the DOM is ready to hide your navigation (potentially having the navigation show and then disappear for no reason).
Regardless of the method you use you'll also need to add the topLevelNavigation class to the navigation that's showing be default.
EDIT: Here's a jsfiddle demonstrating what I mean.

Scroll up menu style with hover

Need help.
I have make some menus with vertical scroll on hover event, there are 3 menus (home,download,contact). The Scroll effect on hover event has worked, but on click event some bug occur (some menus can't scroll down/scroll to grey side with animation) when other menus has been clicked. the bug occur when i clicked menus in some sequence:
1. download then contacts
2. contact then download
3. contact then home
this is my code in jsFiddle
and when i run the code on firefox with firebug some error appear after i do mouse over and mouse out on clicked menu.
Error Print screen:
Thank for advance :)
The reason behind the freezing of the scroll event, when you click on a menu is that, after you click , the menu becomes disabled, hence your background-pos never changes and so , the method css(bg-pos) becomes undefined and you are again trying to do (undefined).split(), which is not possible and hence the animation freezes.
What you need to do is on click, you need to enable the menus again. This is done through this code:
$.fn.stopBG = function (x, y, speed) {
if(event.which == 1){
$("#home").removeClass('disable1').addClass('enable1');
$("#download").removeClass('disable2').addClass('enable2');
$("#contact").removeClass('disable3').addClass('enable3');
}
var pos = this.css('background-position').split(' ');
I have updated your fiddle, see this one : http://jsfiddle.net/VSTAm/3/
I have tried this fix in chrome...it works properly there.

Trying to make a onmouseover javascript drop down menu

Effect I want . Basically I want to popup a simple menu when the user mouseovers a link .
I tried several ready made scripts , but had trouble integrating them with my site. SO decided to built my own.
here is what I am trying to do:
<li onmouseover=showlist1() onmouseout=hidelist1() ><a class="navigation" href="show_delhi_items.php">Menu heading</a></li>
function showlist1() //onmouseover
{
document.getElementById('list1').style.visibility='visible' ;
}
function hidelist1() //onmouseout
{
if (menu elements don't have focus)
{
document.getElementById('list1').style.visibility='hidden' ;
}
}
now in this how do I implement the 'menu elements don't have focus' part ? I know its not possible to know which elemtn has focus. so I need an alternative. Basically the problem is that as soon as the mouse moves outside the main link(the link that popups the hidden menu), the menu hides. what i want is for the menu to remain visible if it gets focus. but currently it gets hidden as soon as the mouse outside our main link
hope I was clear enough.
Make the menu overlap the list item that has the onmouseover menu. Then only close the menu if the mouse is outside both the list item and the menu. You will have to use:
position: absolute;
top: some-y-value;
left: some-x-value;
Hmm now I made that comment i better back it up with an actual way of doing it :)
Go here and read all about suckerfish dropdowns
Go here to see an example implementation

Categories