I want to run a - accept our terms pop up box - that must be accepted before the page can be seen. I think I found answers here: https://stackoverflow.com/questions/6588167/how-do-i-make-a-popup-appear-immediately-before-the-rest-of-the-page-loads
But I am at a loss to what I was doing wrong, and why my method had a time lag.
I uploaded http://jsfiddle.net/ZqVuj/2/ as example - If you click run you can see the lorem pops up for a moment then black. Why does the modal not work before the rest of the page loads?
Someone built the page Im on off the code from this page: http://www.queness.com/post/77/simple-jquery-modal-window-tutorial
I took out the fade-ins, and changed $(document).ready(function() to $(function()
Yet the text still loads for a moment before the modal kicks in. What am I doing wrong?
Instead of $(function() {...}), use (function() { ... })(); and put it right at the top of the <body>. That way, it will run instantly before the page content is shown.
Bear in mind, though, that anyone with basic knowledge of their browser can just remove the popup and reveal the content. You should use a more reliable method for securing your content.
Related
I have a webforms web app, and all I need to do is, when a user clicks on the browser back button, I want to make a post-back or reload my page so it makes the post-back itself so new data is loaded.
I am using a library called jQuery-backDetect
which allows me to detect browser's back button click and I try to do is to make a post-back using __doPostback('arg1', 'arg2'). But it won't work at all.
And the strangest thing here is that, if I have the browser's debugger (in developer tools) open, or I pause the code execution using a breakpoint, it works perfectly. Here is a simple code I have written:
$(window).load(function(){
$('body').backDetect(function(){
// Callback function
debugger;
__doPostback('arg1', 'arg2');
});
});
I have tried to go through all the question here but they didn't help.
As strange as the question sounds, I really hope someone can help me. Thanks
You might consider wrapping the page content in an UpdatePanel, that might help create the behavior you are looking for.
I have got infinity scroll plugin on my website. After reaching the bottom I get new products which are as intended. The issue is that some content like "add-to-cart" or "product-price" are not displaying as it should be. For example, there is margins and padding set via js.
I thought that maybe if I bind this js with body element this may work, but I cannot find js that make those changes.(its Magento website)
This is only happening in products that were loaded through infinity plugin. After resizing window everything gets fine.
Why is this happening? Any help is appreciated
search for something like
".addEventListener('resize'"
".resize("
".on( "resize"
in firebug's script tab, you may find the eventlistener method and see what happens when it gets fixed when you resize the page.
generally you will have to provide some more information.anything else is guessing
So, I'm having a problem with MDL's javascript breaking my Twitter widget for showing tweets on the sidebar.
When I remove the javascript, it works perfectly fine. I tried changing the position of the script, but nothing resolves the issue, whenever the MDL's javascript finishes loading, the widget is instantly gone.
If you take a look with "inspect element" you can see the widget's iframe is still there below the facebook widget, but its body is empty.
You can take a look at the issues right here. Please don't mind the messy code, I will still make a lot of changes and optimizations.
This question is a follow-on to another question which needed asking and warranted a new post, so excuse me if I refer to things which may not be clear without reading the other question.
When using the utility waitForKeyElements() I'm facing an issue in which a div is included inside a small popup contained within the same URL. My extension is currently running on the Twitter site, and my intention is that a div contained on the profile pages (e.g. http://twitter.com/todayshow) gets moved above another div on the page. I'm doing this via waitForKeyElements() because of some loading issues which are resolved by using this utility.
However, on a profile page you can click a link to another users name which pops up a small window (inside the same window/tab, on the same URL) showing some info about them and a few previous tweets. The issue here is that the same div appears on this popup and is then moved to the main page behind the popup window, where it shouldn't be. On a profile page, this can be stopped by plugging in the false parameter to waitForKeyElements(), however on a non-profile page it is still possible to activate this popup which is then moving onto the main page, as the div I wish to move it above on a profile page still exists here, causing clear issues.
I'm wondering if there's a way around this, as bugs in Chrome have stopped me from excluding these pages. So far (just brainstorming) I'm thinking:
on a page where the div doesn't exist to begin with, create an empty one meaning false will handle the issue.
somehow stop the script from firing on a given URL, although due to the way Twitter works this would have to monitor OnClick() and the page URL (I think) which I'm unsure how to do.
stop running when the popup appears, but I have almost no idea where to start with that.
Any help is appreciated. Any necessary code related to this question can be found in the first two links, and the issue I'm facing can be seen by a quick visit to Twitter.
EDIT: When plugging in the false param it works when going directly to profiles via the URL bar, if you're on a profile and use a link to get to a profile, the script isn't inserted and my extension fails. So this would need resolving too, or an alternative method altogether.
I had a brainwave that I could use insertAfter() to insert the <div> I was originally moving in front of, after the <div> I was originally moving. This <div> is not present on the popup, which means that nothing is moved onto the back page when it shouldn't be.
In regards to the previous question, my code is now simply:
waitForKeyElements (
"jQuery selector for div(s) you want to move", // Opposite to what it was.
moveSelectDivs
);
function moveSelectDivs (jNode) {
jNode.insertAfter ("APPROPRIATE JQUERY SELECTOR"); // Again, the opposite.
}
This solves the issue I was having and my extension is now working just fine, however I will leave this question posted in case anybody comes back to it in future.
I'm using the colorbox plugin for modal popups. It's working nicely, but there's a main thing about it that seems wrong.
I have a form that pops up, and on submitting (or clicking a link) in the form, this might open another "colorbox" modal. It works smoothly, but there's one thing that bothers me.
As it is, colorbox seems to wait until it receives the response (via ajax) and then shows a "loading.gif" and starts to change size.
To me it makes more sense to have the "loading.gif" show as soon as they are opening a new colorbox modal. (and not just the image, I just mean that whatever happens when you open a new colorbox) It doesn't have to resize (obviously) but it's just annoying because some of my colorbox modals use webservices that are slow, so you might submit a form and nothing happens for literally 1 or 2 seconds. It'd be nice if it just would look like it was loading the next one for that time.
Ideas on how to do this?
It looks like the loading graphic is being shown onLoad, and the script tries to figure out the content type before this point. So if you have a slow web service, it may take time to realize the content type, thus not showing the loading.gif.
I did a quick test, and displaying the gif onOpen seems to work:
$(".myClass").colorbox({
onOpen:function(){
// taken from colorbox.css
$('#cboxLoadingGraphic').show();
},
onComplete:function(){
$('#cboxLoadingGraphic').hide();
}
});