I'm using shadowbox js for showing Flash video in lightbox style popups.
So far it's working but I have this problem:
when the page loads and the user clicks too early on the linked image which should open the
shadowbox the swf is loaded directly (and no popup appears).
Also, the script seems to stop in this case and never assigns the right clicklistener - so the shadowbox is never shown also on subsequent clicks.
Shadowbox 3.0.1
Anybody has experienced the same issue, any solutions?
Thanks.
You didn't post any info on when is the shadowbox first called.
If my guess is correct, You are running shadowbox in an onload event handler.
Try calling it when DOM is ready.
jQuery:
$(document).ready(function(){
//call it here
});
[EDIT]
In response to Your comment.
If this doesn't help there is only one solution.
Add this just after the line loading jquery script in head
<script>
$('<div></div>')
.css({width:'100%',height:'100%',
'position':'fixed','top':'0px',left:'0px',
'z-index':'10000'})
.addClass('cover');
.prependTo('body');
</script>
The above should be one line, but then it's being cut by the stackoverflow's CSS ;)
and then $('.cover').remove(); when You are sure everything is loaded.
I do that when running crazy lots of code on pageload ;)
Related
I'm working on a big application. In my application a lightbox opens up on page load and refresh. There are many JavaScript files included in the application, and many developers have worked on it. I'm trying to debug and identify the JS code that is causing that lightbox to open up so that I could edit it.
I tried adding breakpoint in Chrome developer's tool on Load (see image below), but when it stops on first breakpoint, the lightbox is already on the screen. Which means the code for lightbox was rendered before first load event listener fired up.
Is there any way I can find out from where that lightbox code is opening up?
P.S: I'm also unsure what is the exact code syntax used to open up the lightbox, otherwise I would have searched the source files for that syntax.
UPDATE: On further inspection, I've found out when these lines in the jQuery library file are executed, the lightbox shows up.
These lines appear to be event loop triggering. I'm not sure if this information is any useful for solving this problem.
You can use
console.trace();
To see what functions where invoced to get to the line in code you put the .trace in.
Since you found a function inside the jQuery library that is somehow involved in the opening you should put it there.
Aditiinally you can put a code-sided breakpoint underneath it by calling
debugger;
If not already. consider using a local, uncompressed version of jq for easier debugging.
I have a few Pretty Photo images in my app, but they are opening in a new page instead of in a PrettyPhoto display.
Here's the index of my app, which is stripped down of everything not nescessary to run it.
Click the down arrow in order to view the pretty photo page.
I use the jQuery version from the download. Also PrettyPhoto and it's script are initialised right before the closing div tag.
What could possibly be wrong with it? Why are the images opening in a new page?
Thx in advance!
It's because you are calling the plugin once the document is loaded but not after clicking on the down arrow.
If you go to your site. Click on the down arrow. Open the js inspector and copy/paste this
//jQuery.noConflict();
jQuery(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto({
social_tools: false,
theme: 'light_square'
});
});
You will see it's working.
So try to trigger the prettyPhoto once the pictures are loaded.
In a few websites developed by me there is a slide-in/fade-in animations of the content once the page is loaded. I use jQuery for that but before the animation it is necessary the content to be hidden. To achieve that first I have used a css rule #content{display:none} . Then in the page header in a javascript block <script type="text/javascript">
$(function() {
$('#content').css("display","block");
$('#content').stop().css("margin-top","100%").animate({marginTop:'100%'} ,1300).animate({ marginTop:'5'}, 700,"swing", function(){
$('#loading').fadeOut();
...
If I understand well, the jQuery code executes once the page is loaded and it works well this way, but there is one problem. If the user has no javascript support then the page remains blank because of the hidden with a css content. Also google webmaster tools shows a blank page preview probably because they do not execute the javascript(jQuery) code and also the Safari web browser's Top sites page is with a blank page preview because of the same css rule. So in order to have a full support for non javascript browsers I removed the css rule and instead of that I use a javascript code to hide the content <script type="text/javascript">document.getElementById("content").style.display="none"; document.getElementById("loading").style.display="block";</script> only for the users that has a javascript support but this way if the internet connection is too slow first the content is loading like in a normal page, and once it is loaded then the browsers hides it and the animation is executed. This is annoying because this way the animation is bothering the user experience instead of improving it. You start reading the page and suddenly the page disappears and slide in... You can see the result here - http://sky-camp.com/en/paragliding-courses.html
What do I miss? I use javascript for content hiding instead of jQuery in order to try to hide the content before the jQuery plugin is loaded, but It does not work the way I expect.. Any help will be appreciated
Try doing something in the head like:
<script>document.write('<style>#content{display:none;}</style>');</script>
I haven't don't that in a long time, but I used to use it often.
<code>
$( function(){$('#content').css("display","none"); });
</code>
when your page charge completly:
<code>
$(window).load(function() {
$( function(){$('#content').css("display","block");
});
</code>
This is just my opinion...
But I don't really ever prepare for people disabling javascript. As somebody already said, who still does that? If they did there web experience would be awful. Why don't you just add a noscript tag that bypasses that whole function and just shows the content. So if anybody ever does visit the site without JS they just see the page normally.
I feel all the suggestions people have been posting are horribly gross and not at all good practice.
I am redesigning a webpage that has an image slider on the top to show some of my featured work. The image-slider works fine and works by clicking the right or left arrow for the next or previous image.
All was well until I added the links to the fancyBox files so that other images (not in the slider) in that page could be viewed in the pop-up fancyBox.
fancyBox works fine, but because of it my slider now disappears once one clicks the left or right arrow.
Can someone please help me fix the slider, or fancyBox, so that both the slider scripts and FancyBox work on this page?
Here is a link to the webpage
In the source I have also noted which files in the are part of the slider and which are for FancyBox
I would really appreciate any and all help!
Thanks in Advance,
theirf
See an error when stepping through in Firebug:
When I called show(slide,[object Object]) with your args, an error was thrown!
TypeError: f.easing[i.animatedProperties[this.prop]] is not a function
[Break On This Error]
...e)});else for(var g in a)ca(g,a[g],c,e);return d.join("&").replace(bD,"+")}}),f....
Caused by $("#pic-" + next).show('slide',{direction: dir});
where 'dir' is an empty string. Believe this is causing your error.
You also have a few other issues...such as hiding before showing. Check out more jQuery anim stuff or..simpler use a pre-built slider :)
It looks like you are loading two different versions of jQuery. One in the header(1.7), the other is in the top of m.js(1.4.2). Try taking that copy of 1.4.2 out of m.js to start. Make sure to check your console for errors, then go from there.
Also, I'm not all that sure about the slider script you are using. I have used BxSlider with fancyBox on the same page before, and they play great together... Just an idea.
I have a pretty large form to develop and it could take some time to render (over 5 secs). Now to give the user an indication of something happening I'd like to fire up a lightbox with a simple "page loading" message whilst the rest of the page loads in the background. Once the page is fully loaded I can close the lightbox and the user can continue through the application. Now I know I shouldn't use window.onload to activate this as jQuery's document.ready is quicker and a better solution for this issue but does anyone have any advice on how to do this or if it's possible.
It is better to just add a semi-transparant div to the dom and and make it disappear onload.
Executing javascript-heavy functions (like the lightbox) kind of defeat the purpose of a waiting indicator.
Add a script in the head (after css is included) that opens the lightbox. Last in the body add a script (preferably with an event handler to know that the dom actually is ready) that closes the lightbox :)
document.addEventListener("DOMContentLoaded", function () {
//close lightbox
}, false);