How to hide an iframe after clicking - javascript

I got a stuck in this piece of code
The full code
<html>
<head>
<script>
function hide(kaka){
var temp=document.getElementById(kaka).visibility;
temp=(temp=='visible')?'hidden':'visible';
}
function remove(kaka){
var temp=document.getElementById(kaka).display;
temp=(temp=='block')?'none':'block';
}
</script>
</head>
<body>
<IFRAME id="kaka" SRC="ads.php" WIDTH=10000 HEIGHT=10000></IFRAME>
<script>
</body>
I'm trying to make the iframe to hide after someone's click

visibility and display are just text strings, so setting them to a variable, and then changing the variable, won't change the element.
function toggle(kaka) {
var temp=document.getElementById(kaka).visibility;
temp=(temp=='visible')?'hidden':'visible';
document.getElementById(kaka).visibility=temp;
}

Related

Changing the inner HTML of a div to a variable collected from user

I have a site, which takes a html code block from the user, for the site time.is and then is supposed to show that later. The code is taken as a JavaScript Prompt and the stored in the local storage
let timeislink= prompt("Please enter the code as it is, with no spaces, or your clock might break");
localStorage.setItem("timeisperslink", timeislink);
And for adding it to the div, I take the local storage value, and store it in a variable and try to pass that under the .innerHTML function, but that doesn't seem to be working
function changetime(){
let timedivneed= document.getElementById('timeisdynmdiv')
let usetimeis= localStorage.getItem("timeisperslink")
timedivneed.innerHTML+= usetimeis;
}
Any help is appreciated
Edit:- #HTML of the page in which div has to be changed#
<!DOCTYPE html>
<html lang="en">
<body onload="myFunction()">
<h2 id="timewish" onload="changetime()"></h2>
<div id="timeisdynmdiv">
</div>
</body>
</html>
Have removed unwanted things
What I think is that your script block is not located anywhere in the HTML. For best results, add your script block after the <div>. So:
<!DOCTYPE html>
<html lang="en">
<body onload="myFunction()">
<h2 id="timewish" onload="changetime()"></h2>
<div id="timeisdynmdiv">
</div>
<script>
window.onload = function(){
let timeislink= prompt("Please enter the code as it is, with no spaces, or your clock might break");
localStorage.setItem("timeisperslink", timeislink);
}
function changetime(){
let timedivneed= document.getElementById('timeisdynmdiv')
let usetimeis= localStorage.getItem("timeisperslink")
timedivneed.innerHTML+= usetimeis;
}
</script>
</body>
</html>
Tell me if this doesn't work for you and I'll try to fix it.
Use window load event and put your logic to get localStorage data.
// Test mock to set data in localstorage
document.onreadystatechange = function(e) {
if (document.readyState === 'complete') {
console.log("readyState");
localStorage.setItem("timeisperslink", "test data description");
}
};
window.addEventListener('load', (event) => {
console.log("loaded");
let timedivneed = document.getElementById('timeisdynmdiv')
let usetimeis = localStorage.getItem("timeisperslink")
timedivneed.innerHTML += usetimeis;
});

How to get current country name in blogger or blogspot.com

In blogger or blogspot we can add html or javascript tag from layout then add gadget. How to enable a div on the basis of different countries?
to get current country name in blogger use this code
<b:eval expr='data:blog.locale.country'/>
<script>
var country = <b:eval expr='data:blog.locale.country'/>;
console.log(country);
</script>
(Abdo)
By default, make all the div's hidden. Sample code using one of the GeoIP services would look like -
<script type="text/javascript">
//<![CDATA[
function geoip(json) {
window.onload = displayInCountry(json);
}
function displayInCountry(json) {
if (json.country === 'Austria') {
document.querySelector('#DIV-ID').style.display = "block";
}
}
//]]>
</script>
<script type="application/javascript" src="https://get.geojs.io/v1/ip/geo.js"></script>
You will need to replace the #DIV-ID with the ID of your Div element.

How to take value from input type="text" and use it on another page? [duplicate]

So I'm rather new to JavaScript and I would love some help getting this code to work. I've looked at multiple other posts talking about session storage as well as if/else statements and still can't seem to figure it out.
I have a page, lets call it page 1 and it has 3 links, "red" "green" and "blue".
When you click on any of these links its function sets a session storage variable 'colorVar' to the color chosen and then redirects to a page called page 2.
As page 2 loads, the window.onload action is used to start a function according to the variable set on page 1. In this case the function that starts on page 2 simply displays "Your color is ____!".
Heres the code:
<!-- [This is Page 1] -->
Set color to red
Set color to blue
Set color to green
<script>
function colorRed() {
sessionStorage.setItem("colorVar", "red");
}
function colorBlue() {
sessionStorage.setItem("colorVar", "blue");
}
function colorGreen() {
sessionStorage.setItem("colorVar", "green");
}
</script>
<!-- [This is Page 2] -->
<script>
window.onload = sessionStorage.colorVar + 'Write()';
function redWrite() {
document.write("Your color is red!")
}
function blueWrite() {
document.write("Your color is blue!")
}
function greenWrite() {
document.write("Your color is green!")
}
</script>
You can pass sessionStorage as as query string at href of <a> element; use location.search at window.onload event at Page2.html
Page1.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
Set color to red
Set color to blue
Set color to green
<script>
function color(elem) {
event.preventDefault();
sessionStorage.setItem("colorVar", elem.dataset.color);
location.href = elem.href + "?colorVar=" + sessionStorage.getItem("colorVar");
}
</script>
</body>
</html>
at Page2.html
<script>
window.onload = function() {
document.write("Your color is " + location.search.split("=").pop())
}
</script>
plnkr http://plnkr.co/edit/eNVXr4ElXRzrxlZ7EY0a?p=preview
Edit: Clearly the answer above is much better than what i provided. I'll leave this here for future viewers - maybe the way I phrased things help someone sometime.
Taylor,
Two things.
sessionStorage() is unique to each page/tab. From the docs "Opening a page in a new tab or window will cause a new session to be initiated"
window.onload is expecting a function. You're just concatenating a string.
If you find a different way to pass information from one page to another (you could stuff it in the URL) your new color function should look something like this:
<script>
window.onload = writeColor(sessionStorage.colorVar);
function writeColor(color) {
document.write("Your color is " + color + "!")
}
</script>
You can't set window.onload to be a string; you have to point it directly to a function.
I would suggest creating a new function (call it writeColor) that contains if statements based on the value of sessionStorage.colorVar; then you can do window.onload=writeColor;
Alternately, change your window.onload line to window.onload = window[sessionStorage.colorVar + 'Write']; which will grab your function from the global scope and assign it to window.onload.

how do I change window size?

I'm trying to change the size of my window onload. It doesn't seem to work.
Here is the setup:
<script>
var w=800;
var h=600;
function changeScreenSize(w,h)
{
window.resizeTo(w,h)
}
</script>
<body onload="changeScreenSize(w,h)" style="background-image:url(Untitled.jpg)">
This solution is from php.org (somewhere) - works for windows DOM, Mac cracks.
Hide menubar and favs, percent (width,height) gets complicated:
http://css-tricks.com/snippets/html/top-bottom-halves-layout/
<script>
function changeScreenSize(w,h)
{
window.resizeTo( w,h )
}
</script>
</head>
<body onload="changeScreenSize(1200,260)">
http://ysdn2005-w11.wikispaces.com/Change+Browser+Window+Size+Upon+Loading
Yep, this page details method. Script above works.
function changeScreenSize()
{
w=window.open('','', 'width=800,height=600');
w.focus();
}
<body onload="changeScreenSize()">

Execute open New Window and Execute Javascript

Good Day!
is it possible when i open new window from parent window, a javascript will execute on the new WINDOW?
Like for example if the new window completely load, a textfield will change a value.
Thanks
get the parameter from new window onLoad() event to parent window, notifying that new window has been load.
I hope this will solve your question.
Here's an example for putting a function in a child window then let the child window runs it. The showTitle function will simply show the current document title. The child page will wait for a specific function and calls it when it arrives.
parent.html:
<html>
<head>
<title>parent</title>
</head>
<body>
<script>
function showTitle() {
alert('Page Title = '+this.document.title);
}
function childLoaded() {
showTitle();
var childWnd=document.getElementById('fchild').contentWindow;
if (!childWnd) return;
childWnd.newFunc=showTitle;
}
</script>
parent<br />
<iframe id=fchild src="child.html" width=300 height=300 onload="childLoaded()"></iframe>
</body>
</html>
child.html:
<html>
<head>
<title>child</title>
</head>
<body>
<script>
var waiter,newFunc=null;
function waitFunc() {
if (newFunc) {
clearInterval(waiter);
newFunc();
}
}
waiter=setInterval(waitFunc, 1000);
</script>
child
</body>
</html>

Categories