How to open different contents in the different pop up window - html

<html>
<script type="text/javascript">
function openWin(url) {
window.open(url, "_blank", "toolbar=no, scrollbars=no, resizable=no, top=200, left=300, width=870, height=650");
}
</script>
Content 2
Content 3
</html>`
this is my code to open to javascript popup. but when i click content 2 only one popup should open ` but here instead multiple popups are opening. and also parallely content 3 window should open in a diff window.

You don't want to supply javascript on the href attribute, instead use onclick.
Content 2.
Also, you are missing some necessary tags in your HTML document. You are missing the required body tag for example. You can check your document for syntax and to some extend semantic errors by using the W3C HTML validator.

Related

HTML hide and show - when does the code run?

In my page I have a hidden <div>, such as the following:
<div id="myid" style="display:none;">
...
</div>
When the user clicks a button, I have a javascript code that calls $('#myid').show("slow");, thus displaying this <div>.
My question is when does the code inside the <div> gets called: when the page first loads or only when it's shown?
My concern is that inside this <div> I'd like to place a page counter (with an <iframe>), which should only be called when the <div> is shown. The alternative would be to put the code inside the javascript, but I'd rather keep it in the page.
The code inside the div get called as you load the page.
So the counter will get called everytime the page is loaded even if the div stays hidden.
So you have to use javascript somehow like this:
<div id="myid" style="display:none;">
...
</div>
<script>
function showCounter() {
document.getElementById("myid").innerHTML = '<script>counter-code</script>';
document.getElementById("myid").show('slow');
}
</script>
and add the function showCounter to your button.
It will be run when the page loads, display:none only affects visibility and has nothing to do with code operation layer (in fact, some browsers ignore CSS entirely and may show it anyway).
If you want a piece of code to only run when clicking a JavaScript button, you should attach that code to the Javascript function. Make an empty div on your page and then use the function to put code inside it:
<div id="jsDiv"></div>
<script>
function jsCode() {
document.getElementById('jsDiv').innerHTML = 'Whatever you want';
}
</script>
Then attach the jsCode() function to your button, and the HTML will only be rendered when the function is called. If you're using server-side scripting (PHP, Rails etc.) or something more complex, look into jQuery and AJAX functions.
Try like this:
$(document).ready( function() {
$('#myid').show("slow")
}

assistance with html code for popup window

I will be using shopify's system so i am restricted to how and which pages i can edit.
I have one page that is an app but i want that page, on loading, to show a popup disclaimer before they can see the page.
I am told that i can't edit the app page itself but i can add javascript code in the common site footer to check current url and if it equals this certain page, then create a popup.
I have created a page that holds the disclaimer information so i would like the popup window to load this pages' content.
I believe i can load the content using this div tag
div id="popupinfo" pages.disclaimer.content div
I do not know how to add the if statement to check if current url = site.com app.html then div id="popupinfo" pages.disclamier.content div
This site uses their own language called Liquid, hence the double brackets..but any code to pull the content of an html page would work i am sure.
Can i please have some assistance in how i am to
check current page
if page = xxx
best way to create a popup window where the user has to click as yes or ok button
then display the regular page
Thanks in advance!
Brocour
It's only possible to open a pop-up window upon a user-action, for example a 'click' action.
if( document.URL === "myPage.html" ){
// Disclaimer alert
if (confirm('Do you agree to this Disclaimer?')){
// Redirect
window.location = "myNewPage.html";
} else {
// Do nothing
}
}
Try something like this:
<html>
<head>
</head>
<script type="text/javascript">
function poponload()
{
popupwindow=window.open("","mywindow","location=1,status=1,scrollbars=1,width=100,height=100");
popupwindow.moveTo(0, 0);
}
</script>
<body onload="javascript: poponload()">
This is the page
</body>
</html>
You could use the code in this example i made.
$(document).ready(function(){
$('#open_popup').click(function(){
popupwindow=window.open("http://google.com","mywindow","location=1,status=1,scrollbars=1,width=600,height=500");
})
})

html Intro page for a website

I have created a html page with the following code in between "head" tags:
meta http-equiv="Refresh" content="5; url= contacts.html"
Now when the above code is added to a web page, It waits for 5 seconds and moves the contacts.html page. If you press the "back" button on your browser, the browser will take you to the previous page which is the "intro page" or the page that I have entered the above code.
But I need to stop that from happening(returning back to the intro page when the 'back' button on the browser is pressed). Is it possible to do so? If its possible, then how? o_O
You can use javascript to do this, but JavaScript isn't foolproof because someone could turn off their javascript and bypass your mechanism.
Add this inside your and add onload="preventHistoryBack()" to your -tag in your content.html:
<script type="text/javascript">
function preventHistoryBack() {
for(var i = 0; i < window.history.length; i++) {
window.history.back(i) = window.location;
}
}
</script>
<body onload="preventHistoryBack()">
This will replace the complete history of the browser with your current location. So when the user hits the back button, it will go to the same page as he is now.

html page outside iframe must call parent page

Well, apparently there is no answer yet to the problem I have.
I made a website with an iframe.
In this iframe I display the pages activaded by the menu buttons.
Those pages are found by searchengines too.
But without the website these pages are "naked".
I want the following.
If the "naked" page has been found, automatically a call has been made to the parent page to dress the "naked" page. So the whole website will be visible and not the "naked" page.
Thanks4thinking with me.
You need to detect whether "iframed" child page is called directly, and if that's the case - redirect to the parent page. Below is a basic example how to do it in such child page:
<html>
<head>
<title></title>
<script type="text/javascript">
function checkIfInIframe() {
if (window == window.parent) location.href = 'Parent.html';
}
</script>
</head>
<body onload="checkIfInIframe();">
<!--Child Content-->
</body>
</html>
Here we call JavaScript function "checkIfInIframe" in page's body "onload" event. The code checks whether page is at top level (where it shouldn't be) or not. It does that by comparing "window" object to it's parent' If it's the same object - page redirects to it's parent. You can even pass parameters in a Query string in that redirect so parent would automatically know which page to open in the Iframe

Content Loading

I am creating new Page with two divs.This Page Loading within Iframe.
First Div get contents from Database then load.Second Div contains Save and Cancel Button Only.
At the Time of loading Save and Cancel Button (Second Div) comes first.How to avoid this??
Hide the second div via CSS.
Then add some javascript which unhiddes the div when the loading from the DB is finished
Have the first document load the second document when it's ready. With a onload handler on the first document that sets the location of the second iframe.
Let's say your iframes have 2 ids: "iframe1" and "iframe2". You load the database content in iframe1, and an empty page in iframe2.
Here is a sample code for the document loaded in iframe1 :
<html>
<head>
<script>
function init () {
frameElement.ownerDocument.getElementById("iframe2").contentWindow.location = "/someurl/document2.html";
}
</script>
</head>
<body onload="init()">
<!-- iframe1 content -->
</body>
</html>
Dynamically load the content using something like JQuery or Prototype to control when and how divs load.