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
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;
});
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.
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.
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()">
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>