Magnific Popup Conflict - javascript

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;
}

Related

How to fix 'toggle between images in owl carousel the content moves to top'

I am working on the project, here is my live link to the site code My link
Here u will see the owl slider of the product. when I toggle between the images the images and the whole content is moved to the top of the page behind the fixed header.
what I want is that the screen remain still and do not move or scroll to top or bottom
You need to prevent the default behavior of the anchor tag that you're using. Maybe try using this:
$(".horizontal-thumb ").click(function(e) {
// change slider image
// do something else
e.preventDefault(); // this is what you need
})

How do I stop the page from expanding when animating an element so it slides in from off screen?

I'm making my first website and I've run into a problem I can't easily fix as I'm not sure how to phrase a google search for it. I need to slide images into the page without making the scroll bar appear or, rather, without the page expanding in width to encompass the newly appeared image while it slides in.
Here's the actual test version of the page:
http://test.dingac.com/accommodation.html
The part I need help with is the sliding of the pictures when you click on the arrows next to the blueprint for each apartment in the accommodation tab.
If you want to look at the code, the relevant code is in the JqueryAnimate.js file but keep in mind, the comments aren't in English, I'm new to this so the code is a bit weird and the CSS isn't fine tuned yet. I've posted the relevant code snippet further down. My current issue is the slide animation. The way I did it right now is for all the images to be there from the start but all but one have display:none. When you click the arrow to the right it fades out and slides out the current picture (using Jquery) and turns on the display of the next picture (which is positioned relatively at left: 2000px) while animating it to left:0px.
In the moment the new image appears, the page sees that a new element is on the page and not everything is being displayed so it expands the width of the page to encompass the off-screen picture. This is only an annoyance on desktop as it only makes the scroll bar appear, but on mobile it makes the whole page zoom out until the new picture is on screen and then zoom back in as the picture slides in.
$("#buttonRight"+apInd).click(function(){
if(status[apInd].circleIndex!=status[apInd].numApPic){
status[apInd].Picture.fadeOut({duration: 1000, queue: false}).animate({left: '-2000px'},1000);
status[apInd].NextPicture.fadeIn({duration: 1000, queue:false}).animate({left: '0px'},1000);
status[apInd].PreviousPicture=status[apInd].Picture;
status[apInd].Picture=status[apInd].NextPicture;
$("#apCircle"+apInd+"-"+status[apInd].circleIndex).attr("class","circle");
status[apInd].circleIndex++;
$("#apCircle"+apInd+"-"+status[apInd].circleIndex).attr("class","circleSelected");
status[apInd].NextPicture=$("#apPicture"+apInd+"-"+(status[apInd].circleIndex+1));
}
if(status[apInd].circleIndex===status[apInd].numApPic) //hiding/showing arrows when at the edge of the selection
{
status[apInd].arrowDisplay="left";
$("#buttonRight"+apInd).css("opacity",0).css("cursor","default");
}
else
{
if(status[apInd].arrowDisplay!=="both")
{
status[apInd].arrowDisplay="both";
$("#buttonRight"+apInd).css("opacity",1).css("cursor","pointer");
$("#buttonLeft"+apInd).css("opacity",1).css("cursor","pointer");
}
}
});
What I need is for the page width to stay constant or, more specifically, that there be no zooming in mobile and no horizontal scroll bar on desktop.
Use overflow: hidden (or, for more fine grained control, overflow-x: hidden) in your CSS.
For example, if this is the HTML of your page:
<body>
<div id="page-wrap">
Contents
</div>
</body>
You can use overflow like so:
#page-wrap {
overflow-x: hidden; // hides horizontal overflowing elements
overflow-y: auto; // shows scrollbars if the content vertically overflows
}
Link to MDN
Try to add an overflow:hidden on the span with id="apImgBox"

Page jumps to top when click Menu Icon on mobile

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.

First slide doesnt show in jQuery Royal Slider within tabs

I am trying to integrate Royal Slider within my website. However I am having trouble with the first slide when the slider is within tabs on my page.
For example, you can see at http://christierichards.co.uk/slidertest/newtemplatefix.php that the slider is working perfectly (there is no styling as of yet).
On this page http://christierichards.co.uk/slidertest/newtemplate.php when you click on before and after (this is the tab I want the slider appearing in) the first slide does not show until you click tab 2 and then the height seems to appear.
I have managed to fix it within the tabs but this is only by adding a fixed height onto .rsOverflow. I cannot use a fixed height as I need the auto-height feature to work for clients to add their own photos. So I need a different way around it.
There must be a piece of conflicting code somewhere however I am stumped! Any help would be appreciated.
Thanks
The slider is being initialised while it is hidden behind a tab. Because of this, it cannot calculate its height and width, and is invisible. When you change to the next item in the slider, the heights and widths are recalculated, which is why you can see it again.
You can either add an initial height to .rsOverflow, or (re)initialise the slider when the tab is clicked, and the contents are made visible.
For example:
var sliderInitialised = false;
$j( "#tabs" ).tabs({
activate: function( event, ui ) {
// Check the activated tab, is the one that contains the slider
if(!sliderInitialised) {
// Initialise slider ...
sliderInitialised = true;
}
}
});
Alternatively, the slider could be initialised before all the tab contents are hidden.

how include multiple divs in one javascript toggle?

I am trying to implement a javascript toggle effect for my "small" or mobile sized version of a responsive site. I am using my own custom WordPress theme.
I'm trying to use the script from this article: http://webdesignerwall.com/tutorials/mobile-navigation-design-tutorial/comment-page-1
The tricky part is that I'm trying to include several divs, not just a single nav. If you look at the site now (which is still under construction), at:
http://66.147.244.81/~assureva/
and reduce your browser window to narrower than 540px, you'll see that I've managed to get my top navbar (smallnav), 2 "login" links, and facebook and LinkedIn icons, all to disappear, and re-appear when pressing the "main menu" button that now appears at the top, to the right of the logo. But I can't seem to add in the last part, which is the 4 links that comprise the main "nav". I've wrapped the entire area in a div (mobimenubg), but the main navbar acts like it isn't in that div, but the "smallnav", "logins" and "socialcons" divs all combine as desired in the "mobimenubg" div.
If I go ahead and set the "navbar" div to "display:none" it will disappear but it won't re-appear when I click the "main menu" button.
So I think the answer to ask the javascript to include the "mobimenubg" div AND the "navbar" div (the "navbar div is a container that includes the actual "nav") but I don't know how to write it properly.
Here's the javascript:
<script type="text/javascript">
jQuery(document).ready(function($)
{/* prepend menu icon */
$('#mobimenuwrap').prepend('<div id="menu-icon">Main Menu</div>');
/* toggle nav */
$("#menu-icon").on("click", function(){
$("#mobimenubg").slideToggle();
$(this).toggleClass("active");
});
});
</script>
Can someone tell me how add the navbar div? Do I add another line after:
$("#mobimenubg").slideToggle();
or can I include it in the parens:
$("#mobimenubg" IN HERE?).slideToggle();
I don't know the conventions -
Help greatly appreciated!!
I've wrapped the entire area in a div (mobimenubg), but the main navbar acts like it isn't in that div,
You actually have the right code, but your HTML structure is off. The navbar div is not contained within the mobimenubg div, and that is the problem. Just make sure to nest navbar there, or otherwise I think you can also call the function on the navbar like:
$("#navbar").slideToggle();

Categories