Hei, I am using Wordpress and a theme called Stockholm.
The problem is that whenever I click on the image a lightbox appears. When closing the lightbox or clicking outside the lightbox, I would assume the darker overlay to disappear, but it doesn't do that. it stays and it won't let me click anywhere else. I can't find the fault neither in js or css.
This is the page:
http://plaaditood.ee/portfolio_page/vaana-moisa-tolla-kuur-looduskivi-paigaldus-80-m2/
Another issue is with the height of the webpage. It doesn't have enough content to fill the height 100%. Making the body's min-height: 100% didn't work.
Thank you for any responses.
In regards to the lightbox not closing the grey overlay, it seems like you have the prettyphoto javascript twice on your page.
<script type='text/javascript' src='http://plaaditood.ee/assets/themes/stockholm/js/plugins.js?ver=4.2.2'></script>
<script type='text/javascript' src='http://plaaditood.ee/assets/plugins/js_composer/assets/lib/prettyphoto/js/jquery.prettyPhoto.js?ver=4.3.4'></script>
That may be what is causing the issue. You may also double check your implementation if after you remove one of the instances and it still doesn't fix the problem.
http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/documentation
In regards to the footer not staying to the bottom of the screen when there isn't as much content to push it to the bottom, you may try this:
http://www.cssstickyfooter.com/
you might try adding the following jQuery , provided that there will only be one lightbox open at any time:
$(document).on("click", ".pp_close", function(){
$(".pp_overlay").fadeOut();
});
Related
I'm afraid that my question is kinda stupid, but I have this problem for years and I've decided I'll ask. I'm using a div that covers the whole page. It is the first element after opening the body tag. I usually put some spinning element inside of it and type "loading...". I'm using simple script to fade out this div after the page is loaded.
Here's the simplified code:
HTML
<!DOCTYPE HTML>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="loader">
</div>
<!-- All the content of the page goes here -->
</body>
</html>
CSS
.loader {
position:fixed;
height:100%;
width:100%;
background: white
z-index:99999;
}
JavaScript
$(window).on('load', function() {
$(".loader").fadeOut("slow");
});
It works fine. But my problem occurs when you go to a page with an anchor (like "www.mysite.com/index.html#someanchor"). I see the scrollbar is in the correct position, the ".loader" div is on top of everything while page is fully loaded, and then suddenly after ".loader" fades away the page scrolls immediately back to the top. The same happens if you are in the middle of the page and hit F5 (or refresh button) - page reloads (I can see the scrollbars remain in the position I've been until that moment) and after loader fades it suddenly goes back to top. Is there a way I can avoid this? I've searched a lot of similar questions, I've tried setting time out, tried adding class, and still haven't find a way to fix this.
OK, this is very embarrassing, but thanks to Charles Bamford (who asked: "Are you running other scripts on the page?") I've figured out that Modernizr was causing this problem. I'm not sure this question will be of any use to anybody, so I'm thinking about deleting it...
I'm using colorbox to display an Iframe of my website's sign up page. Like so...
As you can see at the very bottom of the Iframe there is a white bar where the close 'X' used to be. I've removed every part of the border I can see to understand exists... Here is my JQuery for that...
$("#cboxTopLeft").hide();
$("#cboxTopRight").hide();
$("#cboxBottomLeft").hide();
$("#cboxBottomRight").hide();
$("#cboxMiddleLeft").hide();
$("#cboxMiddleRight").hide();
$("#cboxTopCenter").hide();
$("#cboxBottomCenter").hide();
$("#cboxClose").remove();
As far as I can tell this should be everything.
Add
$("#cboxLoadedContent").hide();
to the end of your jquery.colorbox.js file. :)
Used browser inspector and found it.
I'm working on a site that is using Highslide JS to create a slideshow window of larger product images when an image on the product page is clicked. I'm also using Piotr Rochala's fine jQuery plugin, slimScroll, as an alternative to ugly browser default scrollers on the same page.
The problem occurs when a product image is clicked, creating a new .highslide-controls div behind the slideshow that should only be in the top of the slideshow window. The div gets appended with each click, which I believe I've narrowed down to a conflict with the slimScroll script.
See: http://www.thelifeguardstore.com/newproductcart/pc/viewPrd.asp?idproduct=7409
I've attempted using jQuery's noConflict(), changing up the orders of when scripts are called, and looking at each script's JS code, but can't find exactly what's causing the problem. Although I have a feeling it's probably right in front of me, laughing maniacally.
Any help or clues as to what may be causing the issue is greatly appreciated.
I've been looking at using a script I've found online (here) as a basis for a website I'm looking to create. It has an issue in Chrome in that the page wont scroll once a link is clicked, however if I resize the window just a tiny bit the page "repaints" - I think this is the right term - and all is well again.
Is there anyway to do a repaint like this? I don't mean refresh :)! Sorry if this seems a bit vauge, if you try this link in chrome, press one of the links in the header and you'll see the problem when trying to then scroll.
Initially I'm thinking there might be some javascript I can call at the end of switching pages that repaints the page.
Thanks
You could try doing something like this after the slide has completely transitioned to a new page:
Since you've commented that it didn't work as I originally suggested, here's a way to "encourage" Chrome to do the hide/display trick:
$(".slide.loaded.prev").css("display", "none");
setTimeout(function() {
$(".slide.loaded.prev").css("display","");
});
or you could try this:
var slide=$(".slide.loaded.prev");
slide.css("display", "none").height(); // just get the height to trigger a relayout.
slide.css("display", "");
The above code simply finds the previously visible slide, sets the CSS property display to none (hiding it completely) and then removes it. This trick worked when using the Chrome developer tools.
It appears that the scroll bar is for the previous "slide" in Chrome. By toggling the display of the slide briefly, the scrollbar is hidden under the now current "slide's" content.
If you visit here: http://www.egyptevakantie.nl/dahab, click on the "andere plaatsen" tab, and then click on an image it brings up a magnified image, courtesy of the jQuery lightbox plug-in.
However, if you do the same here http://www.egyptevakantie.nl/dahab?rhys=yes (essentially the same site except for a couple of stylesheets and one or two minor html changes, none of which are in close proximity to the images) the lightbox fails. Instead of overlaying the content the lightbox is appended to the bottom of the page, where it is also displayed weirdly.
So far in debugging I've managed to work out that the plug-in still calculates the correct left and top values for where to place the lightbox, but by the time the dhtml is generated the top value has changed completely.
Does anyone have any idea why this is happening?
I think you are missing the jquery lightbox stylesheet file.
in the first page there is a reference to this css file:
/css/jquery.lightbox-0.5.css
but on the second link there is no reference to this file.
this css file is included in the jQuery lightbox download located here:
http://leandrovieira.com/projects/jquery/lightbox/
If image is appended at bottom page, for sure postion:absolute is not set.