I keep on getting ReferenceError: toggleExpand is not defined in console on firefox when I click the img
I am trying to get the image to enlarging, floating in center screen on click, no jquery, pure javascript, html, css.
HTML
<body>
<script type="text/javascript">
function toggleExpand(id){
var doc = document.getElementById(id);
doc.style.z-index = "1";
doc.style.width = "512px";
doc.style.align = "center";
}
</script>
<img id="img1" onclick="toggleExpand('img1');" src="I:\Images\image.jpg" alt="image" style="width:128px; height:auto; cursor:pointer; z-index:0"/>
</body>
This is my code used this can used this
<html>
<head>
<script>
function toggle(){
var doc = document.getElementById("divSection");
doc.style.z-index = "1";
doc.style.width = "512px";
doc.style.align = "center";
}
</script>
</head>
<body>
<p>Click the button to trigger a function.</p>
<p class="button" onclick="toggle()">Show/hide</p>
</body>
</html>
First of, a property cannot contain a -
so change it to CamelCase zIndex or wrap in brackets ["z-index"]
also, strange no-one mentioned, no need to pass the ID! You already have the this reference to the clicked referring HTMLIMGElement,
so yes, use simply onclick="toggleExpand(this);" without the ID
Also I see you named your function TOGGLE... so let's toggle!
img[onclick]{vertical-align:top; cursor:pointer; }
<script>
function toggleExpand(el){
var io = el.tog ^= 1; // Store the toggle state
el.style.zIndex = io ? 1 : 0;
el.style.width = (io ? 256 : 128) +"px";
}
</script>
<img onclick="toggleExpand(this);" src="https://www.gravatar.com/avatar/6edc0ac8cd9f3e790389f3284eaaf9e9?s=32&d=identicon&r=PG" alt="image" style="width:128px; height:auto; z-index:0"/>
<img onclick="toggleExpand(this);" src="https://i.stack.imgur.com/1ZIkv.jpg?s=48&g=1" alt="image" style="width:128px; height:auto; z-index:0"/>
jsBin playground
change doc.style.z-index to doc.style['z-index'] and check
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<body>
<script type="text/javascript">
function toggleExpand(id) {
var doc = document.getElementById(id);
doc.style['z-index'] = "1";
doc.style.width = "512px";
doc.style.align = "center";
}
</script>
<img id="img1" onclick="toggleExpand('img1');" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/Alexanderplatz_Stadtmodell_1.jpg/1920px-Alexanderplatz_Stadtmodell_1.jpg" alt="image" style="width:128px; height:auto; cursor:pointer; z-index:0"
/>
</body>
</body>
</html>
Why you are passing your id as a function argument! why not use something like this-
<body>
<img id="img1" onclick="toggleExpand();" src="I:\Images\image.jpg" alt="image" style="width:128px; height:auto; cursor:pointer; z-index:0"/>
<script type="text/javascript">
function toggleExpand(){
var doc = document.getElementById('img1');
doc.style.z-index = "1";
doc.style.width = "512px";
doc.style.align = "center";
}
</script>
</body>
It is better to do in this way.
var doc = document.getElementById(id)
doc.addEventListener('click',toggleExpand);
Related
How to execute a javaScript url when a visitor clicks inside div
Like this example :
<html>
<head>
<meta charset="UTF-8">
<style>
.youtube .play,.youtube img{cursor:pointer;position:absolute}
.youtube{position:relative;padding-bottom:56.23%;height:0;overflow:hidden;max-width:100%;background:#000;margin:5px}
.youtube embed,.youtube iframe,.youtube object{position:absolute;top:0;left:0;width:100%;height:100%;z-index:100;background:0 0}
.youtube img{bottom:0;display:block;left:0;margin:auto;max-width:100%;width:100%;right:0;top:0;border:none;height:auto;-webkit-transition:.4s all;-moz-transition:.4s all;transition:.4s all}
.youtube img:hover{-webkit-filter:brightness(75%)}
.youtube .play{height:72px;width:72px;left:50%;top:50%;margin-left:-36px;margin-top:-36px;background:url(//i.imgur.com/TxzC70f.png) no-repeat}
</style>
</head>
<body>
<div class="youtube" data-id="YQHsXMglC9A"></div>
</body>
<script>
/* Light YouTube Embeds by #labnol */
/* Web: http://labnol.org/?p=27941 */
document.addEventListener("DOMContentLoaded",
function() {
var div, n,
v = document.getElementsByClassName("youtube");
for (n = 0; n < v.length; n++) {
div = document.createElement("div");
div.setAttribute("data-id", v[n].dataset.id);
div.innerHTML = labnolThumb(v[n].dataset.id);
div.onclick = labnolIframe;
v[n].appendChild(div);
}
});
function labnolThumb(id) {
var thumb = '<img src="https://i.ytimg.com/vi/ID/hqdefault.jpg">',
play = '<div class="play"></div>';
return thumb.replace("ID", id) + play;
}
function labnolIframe() {
var iframe = document.createElement("script");
iframe.setAttribute("src", "https://www.youtube.com/embed/" + this.dataset.id + "?autoplay=1");
iframe.setAttribute("frameborder", "0");
iframe.setAttribute("allowfullscreen", "1");
this.parentNode.replaceChild(iframe, this);
}
</script>
</html>
Like this picture
image
.
Html code + javascript :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="a" style="background-color:#999; height:90px; width:250px;" >Click here</div>
</body>
</html>
Javascript :
<script type="text/javascript">
document.write("Hello World!");
</script>
Or :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
How do I run javaScript url when a visitor clicks inside div ?
Something liked this would do it...
function clickMe() {
alert("You clicked me!")
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="a" style="background-color:#999; height:90px; width:250px;" onclick="clickMe()" >Click here</a></div>
</body>
</html>
First of all, instead of trying to run a script, you should try to run a function.
For example
function test(){
document.write("Hello World!")
}
function test2(){
document.getElementById("output").innerHTML = "Hello World!"
}
<div onclick="test()">
<p> Click me </p>
</div>
<div onclick="test2()">
<p> Click me (won't remove screen) </p>
</div>
<div id="output">
</div>
Clicking on the first div will call the test() function. This function will however overwrite everything on the screen, that's not what you want.
The second method doesn't do that, instead it sets the content of the third div to "Hello World!"
I believe you want to run a JavaScript function when your div gets clicked. You just need to add an onclick() event to your <div> tag and declare that function. So your div would be something like this:
<div id="a" style="background-color:#999; height:90px; width:250px;" onclick="writeFunction();">Click here</div>
And the function, with the same name as you declared on your onclick:
<script type="text/javascript">
function writeFunction(){
document.write("Hello World!");
}
</script>
As you have used document.write and i have kept that, it does not show the result that you have illustrated in your picture and your div is vanishing. In order to do as you have imagined, you have to add a <p> element which is initally blank:
<p id='text'></p>
and then ask your function to set its text, like this:
document.getElementById('text').innerHTML = "Hello World!";
You can learn more here: https://www.w3schools.com/jsref/event_onclick.asp
I created this code so my page would be hidden until it finishes loading. But my code doesn't work as I expected. I expected this to hide the BODY until the OnLoad event was triggered.
However, instead, it just stays hidden.
Any help would be appreciated, if there is maybe another, better method of hiding the BODY until it finishes loading, or what's wrong with this one.
Here's what I've tried so far:
function unveil() {
var thebod = document.getElementById("testbody");
thebod.STYLE = "display: block;"
}
<HTML>
<HEAD>
<TITLE>HELLO</TITLE>
</HEAD>
<BODY ID="testbody" ONLOAD="unveil();" STYLE="display: none;">
<div align="CENTER">
HELLO WORLD!
</div>
</BODY>
</HTML>
The DOMContentLoaded event of the window object can do this. But, don't hide the body, hide a wrapper instead. And, when you set the style, make sure to set the style of a CSS property, not the style object itself.
window.addEventListener("DOMContentLoaded", function(){
document.getElementById("wrapper").style.display = "block";
});
#wrapper { text-align:center; background:#e0e0e0; display:none;}
<HTML>
<HEAD>
<TITLE>HELLO</TITLE>
</HEAD>
<BODY>
<div id="wrapper">
HELLO WORLD!
<!-- The following is only added to create a delay in the
parsing of the document -->
<script>
for(var i = 0; i < 100000000; ++i){ var x = i / 3.14; }
</script>
</div>
</BODY>
</HTML>
You're not setting the elements 'style' correctly:
You can either do:
element.style.display = "block";
Or
element.setAttribute('style', "display: block");
Here is a working example:
function unveil() {
var thebod = document.getElementById("testbody");
thebod.style.display = "block";
}
<HTML>
<HEAD>
<TITLE>HELLO</TITLE>
</HEAD>
<BODY ID="testbody" ONLOAD="unveil();" STYLE="display: none;">
<div align="CENTER">
HELLO WORLD!
</div>
</BODY>
</HTML>
Your issue is here:
thebod.STYLE = "display: block;"
which should read:
thebod.style.display = 'block';
Here is the complete approach (using unobtrusive javascript):
var body = document.getElementsByTagName('body')[0];
function unveil() {
body.style.display = 'block';
}
window.addEventListener('load', unveil, false);
body {
display: none;
}
div {
text-align: center;
}
<div>HELLO WORLD!</div>
<HTML>
<HEAD>
<TITLE>HELLO</TITLE>
</HEAD>
<BODY ID="testbody" onload="testbody.style.display = '';" style="display: none;">
<div align="CENTER">
HELLO WORLD!
</div>
</BODY>
</HTML>
Welcome again,and again. I have a lot of errors,it's just joking with me.
The code is works here => https://jsfiddle.net/jh5tkfpp/ posted by a forum member (Sridhar). But in my local-webserver it's throwing TypeError: comp1GameTitle is null .
var cGamePic = new Array("https://c6.staticflickr.com/9/8804/28522899701_efbaa953a7_n.jpg", "https://c5.staticflickr.com/7/6003/6004770804_692aecf57c_b.jpg", "https://c5.staticflickr.com/7/6006/6004652276_87ba0278a9_b.jpg", "https://c7.staticflickr.com/7/6139/6007896022_c7ac652043_b.jpg");
var cGameName = new Array("beach", "cycle1", "cycle2", "cycle3");
var randomItemContainer1 = Math.floor(Math.random() * cGamePic.length); //container1
var randomItemContainer2 = Math.floor(Math.random() * cGamePic.length); //container2
var comp1GameTitle = document.querySelector("#container1 h1"); //Heading from main container
var comp1GameImage = document.querySelector("#container1 img"); //Image from main container
var comp2GameTitle = document.querySelector("#container2 h1"); //Heading from main container
var comp2GameImage = document.querySelector("#container2 img"); //Image from main container
comp1GameTitle.innerHTML = cGameName[randomItemContainer1];
comp1GameImage.src = cGamePic[randomItemContainer1]; //Random image
<!doctype html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<title>Random_page</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="rnd.js"></script>
</head>
<body>
<div id="container1" style="float:left; width:40%; margin:10px;">
<h1>Title</h1>
<img src="" width='100%' height='100%' />
</div>
<div id="container2" style="float:left; width:40%; margin: 10px;">
<h1>Title</h1>
<img src="" width='100%' height='100%' />
</div>
</body>
</html>
It works in jsfiddle since they are executed onload. But you have put scripts in the head. So when they are executed DOM is not ready there is no element with id container1. So you can make changes as following snippet
<body>
//Rest of code
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="rnd.js"></script>
</body>
else you can still keep rnd.js inside header tag but put all code in rnd.js inside a window.onload function
Im making a simple hud that supposed to show itself when your mouse is on the main panel.
For some reason the onmouseover and out not working. When I click inspect element in the browser on the panel it shows me the html tag. I know that the listeners were created, again from looking at the inspect element in the browser.
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<LINK href="stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="mainpanel" class="notselectable">
<div id="top">
<img src="icons/white/open.png" style="float:right" class="btnMedia" />
</div>
<div id="bottom">
<center>
<img src="icons/white/pre.png" class="leftandright btnMedia" />
<img src="icons/white/play.png" class="leftandright btnMedia" />
<img src="icons/white/next.png" class="leftandright btnMedia" />
</center>
</div>
</div>
</body>
<script>
var panel = document.getElementById("mainpanel");
var top = document.getElementById("top");
var bottom = document.getElementById("bottom");
//alert("script")
panel.onmouseover = function() {
alert("in")
top.display = "block";
bottom.display = "block";
}
panel.onmouseout = function() {
alert("out")
top.display = "none";
bottom.display = "none";
}
</script>
</html>
There are two things wrong in your code.
Missing style when manipulating with CSS values
And top is a reserved keyword in JavaScript and it's tricky to use it as an variable
This works:
var panel = document.getElementById("mainpanel");
var top2 = document.getElementById("top");
var bottom = document.getElementById("bottom");
panel.onmouseover = function() {
top2.style.display = "block";
bottom.style.display = "block";
}
panel.onmouseout = function() {
top2.style.display = "none";
bottom.style.display = "none";
}
#mainpanel {
background: #faa;
height: 100vh;
}
#top, #bottom {
display: none;
}
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<div id="mainpanel" class="notselectable">
<div id="top">
I am top!
</div>
<div id="bottom">
I am bottom!
</div>
</div>
</body>
</html>
This question already has answers here:
How to get element's attribute set in CSS class
(6 answers)
Closed 9 years ago.
I checked it in two newest browsers.
JS code:
window.onload = function () {
alert
(document.getElementById("slideshow").getElementsByTagName ("img") [0].style.width);
}
HTML code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
<script src="script.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="slideshow">
<img src="slides/1.gif">
<img src="slides/2.gif">
<img src="slides/3.gif">
</div>
</body>
</html>
CSS code:
#slideshow img {
display : none;
width : 300px;
height : 200px;
}
But I have empty string from alert. Why the error (no errors in Firebug) occurs? Can I read style added from css file at all ? http://jsfiddle.net/HM47Q/
Use getComputedStyle instead.
window.onload = function () {
var elem = document.getElementById("slideshow").getElementsByTagName("img")[0];
console.log(window.getComputedStyle(elem, null).getPropertyValue("width"));
}
jsFiddle example
Empty images doesn't have width/height
Because you are retrieving inline style.
use this:
var element = document.getElementbyId("#slideshow").getElementsByTagName('img')[0];
var style = window.getComputedStyle(element),
var width = style.getPropertyValue('width');
JSFiddle: http://jsfiddle.net/enzoferber/HM47Q/2/
var firstImg = document.getElementById("slideshow").getElementsByTagName ("img") [0];
alert ( window.getComputedStyle(firstImg).width );
You have to use getComputedStyle in order to do it.
This is working::
Make your image display:block,otherwise it will return 0.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
<style>
#slideshow img {
display : block;
border:1px solid;
width : 300px;
height : 200px;
}
</style>
</head>
<body>
<div id="slideshow">
<img src="slides/1.gif">
<img src="slides/2.gif">
<img src="slides/3.gif">
</div>
<script>
window.onload = function () {
alert(document.getElementsByTagName('img')[0].clientWidth);
}
</script>
</body>
</html>