I want to make a global popup, so I can access it from different pages. I was reading about this and the solution was to add it directly to body tag in index.html tag, so I did that and now I can open it from my other page (page in which html this popup is not added) using this code
$("#about-create-new-game-popup" ).enhanceWithin().popup();
setTimeout(function(){
$('#about-create-new-game-popup').popup('open');
}, 2000);
The problem is this popup is shown during the application load as it is added to index.html page. Can someone please tell me what am I doing wrong here. Thanks.
I have had this problem before.
What you have to do is define it as a popup before the page is loaded.
A popup will only show when you open it, but in the beginning when the page is loaded it's just another div that's why it's shown. Define it as a popup as soon as possible and it should be hidden.
simply add this code in the beginning:
$("#about-create-new-game-popup" ).popup();
Related
Edit: Stackoverflow modify automatically the Amazon links when you click, so for see the popup, select, copy and paste the URLs in the browser.
On Amazon there is a link to open directly a side popup, like this:
https://www.amazon.com/dp/B07FKTZC4M/#aod (#aod open the popup)
where We can enter some filters. I tried different ways with no success to generate a link that open directly the site popup with new filter pre-applied.
So i need a link that open this page with "new filter" pre-applied:
I tried different solutions, but don't work, for example:
https://www.amazon.com/dp/B07FKTZC4M/ref=aod_f_new#aod
https://www.amazon.com/dp/B07FKTZC4M/ref=new#aod
https://www.amazon.com/dp/B07FKTZC4M/#aod_f_new=true
https://www.amazon.com/dp/B07FKTZC4M/ref=aod_f_new=true#aod
https://www.amazon.com/dp/B07FKTZC4M/ref=aod_f_new?ie=UTF8&f_new=true#aod
I see some informations on source page, maybe that help:
Question: Is there a way to create a link that open directly the side popup with new filter pre-applied? Maybe adding some parameters to the URL.
You can call a function in JavaScript with which you can change the z-index of the popup.
Something like this:
<button onclick="popup()" value="open popup">
Also make the popup. I am just making a rough one:
<div id="popup" style="z-index:1000; position: absolute;">Some code</div>
Remember to set the z-index at behind and the position. Then for JS i will make it simple in case you can't code JS
function popup(){
document.getElementById("popup").style.zIndex=-1;//basically changing the popup's z-index
}
This will just change the z-index of the popup which you must create yourself
I'm using chrome, is there a way to record the html behavior/changes whenever I load a page, or whenever I click a button, so that I can analyse the loading pattern of the html?
I need to do this is because I'm using a scrollbar plugin, and whenever the page load, if the plugin is currently loading there will be a class name attach to the html tag (e.g. scrollLoad). Once the plugin is loaded, the class will be removed.
The problem is I need to get the right class name so that I can target it inside my css..., I'm wondering is there a way to preview the loading of a html page.
you can add a script, that is triggered on each page load.
With jQuery you could check if a page is loaded completely. You could go the other way arround and add the loading class by default and remove it, as soon as the loading is completed
$(function(){
console.log("DOM ready");
$('#element').removeClass('scrollLoad');
});
Maybe you can use the on() with the 'change' attribute?
http://api.jquery.com/on/
generally if we click on a link within a iframe window, the directed new page will be viewed within the iframe window. Can i have a way to have the new page displayed as such without being in the iframe window.
Thanks in Advance,
Samuel Mathews.
You might know about the TARGET attribute for links. With it, you can load a linked page not in the current, but in a different named (I)FRAME / window.
There are also some special target names which might help you:
_parent: Opens the page in the frame containing the current (I)FRAME
_top: Opens a page in the current browser window as the top frame
There are also other special targets, but they are not important in this case. See: http://www.w3schools.com/tags/att_a_target.asp
With jQuery you can easily get any element from iframe, attach an event callback for example when clicked and act accordingly e.g. view a page anywher you require.
example,
http://jsfiddle.net/Lmx9X/show/
see the code here,
http://jsfiddle.net/Lmx9X/
js
$(document).ready(function(){
/*define a callback function to all anchors of iframe*/
$('#subpage').contents().find('a').on('click',function(e){
/*prevent the default behaviour of navigating to the href of the anchors*/
e.preventDefault();
/*do whatever you require, here for example a dialog is presented and navigates the parent page to the href url*/
if (confirm('Prevented iframe from navigating to page. Do you want outer page to navigate instead??')) {
var url = $(this).attr("href");
window.location.href = (url.indexOf("#")==0?window.location.href:"")+$(this).attr("href");
}else{
alert("ok, will not navigate!");
}
});
});
html
<iframe id="subpage" src="http://jsfiddle.net/s22Jm/1/show"></iframe>
I have this project that I need a modal box to appear when they login for the first time.
I'm using a class called superbox which works well but it's activated by clicking links with href and rel attributes attached.
So I was wondering if there was a way of auto clicking the link on page load.
This is the link below:
Open
Any help would be appreciated,
Thanks.
Okay basically, auto clicking literally doesn't exist. But you can activate the box on pageload.
$(document).ready(function () {
//alert('page was loaded!');
SomeSuperBoxOpeningFunction('content', '470x225');
});
EDIT
But since there is no such feature in superbox plugin. Then lets make a totally alternative fix for that:
http://jsfiddle.net/hobobne/8FLkx/
This is a very very simple idea behind showing some boxes.
I checked the sourcecode of your superbox and found the the following function:
function showBox(curSettings, $elt)
I'm trying to focus an existing tab when the content reloads. The usual window methods don't seem to work.
Here's whats happening: On page_1 I have a link like...
Go to my other page
If the tab doesn't exist, when the link is clicked it opens a new tab and takes focus. (Perfect)
If you then go back to page_1 and click the link again, it reloads the content in the existing tab (perfect) but doesn't focus (crap). I've tried the usual window.focus, $(window).focus methods on load with page_2 without luck.
Any recommendations?
It is impossible.
The following appears to work in IE8 and FF13:
<script type="text/javascript">
// Stupid script to force focus to an existing tab when the link is clicked.
// And yes, we do need to open it twice.
function openHelp(a) {
var tab = window.open(a.href, a.target);
tab.close();
tab = window.open(a.href, a.target);
return false;
}
</script>
Help
There is a workaround to this. Use javascript to open a window in a new tab, store a reference to that tab, and when you want to focus it; close it first and then re-open it.
if (window.existingWindow != null)
try { window.existingWindow.close(); } catch (e) { };
window.existingWindow = window.open("/your/url", "yourTabName");
We use a similar approach to opening the preview pane of the current page you're working on in our service called Handcraft where the above works as expected (we wanted the new window to always focus).
Without using a framework you can put a script block at the bottom of your page that will run once the page loads. Because it is after your HTML you can be assured that the HTML is refers to is actually available.
The script can set the focus to the element you want.