Just started learning HTML, and I came across a simple problem which I couldn't find the answer to. I know that I can use the line <img src ="link to src"/> to display an image. I also know I can used the <script> </script> tags to hold javascript code. My question is, how can I only display the img if a variable in my script is equal to true?
<!DOCTYPE html>
<HTML>
<TITLE>Img Tester</TITLE>
<BODY>
<h1>Image:</h1>
<img src ="link to src"/> <!--only display this if the variable c == true in the script-->
</BODY>
<SCRIPT>
var c = confirm("Display Image?");
if(c== true) {
//do something here that displays image?
}
</SCRIPT>
</HTML>
First, I'd set the default style of the image with id="img1" to hidden. Both display: none and visibility: hidden are similar however visibility takes up space.
Please take a look at the snippet below. If you press ok, you will see the image of the dragon. If you press cancel, it won't appear.
var image = document.getElementById("img1");
var c = confirm("Display Image?");
if (c) {
image.style.display = 'block';
}
#img1 {
display: none;
height: 200px;
width: 200px;
}
<h1>Image:</h1>
<img id="img1" src="http://cdn.playbuzz.com/cdn/df02649d-894e-4b82-94da-cd10dd2449a0/7833c7a7-6301-446b-8fbc-ed948aaaa0be.jpg"/>
A few pointers
Tag names should be in lowercase, not uppercase
Instead of if(c == true), use the equivalent if (c)
Give an id to that image and hide the element with that id
<!DOCTYPE html>
<HTML>
<TITLE>Img Tester</TITLE>
<BODY>
<h1>Image:</h1>
<img style="display:none" id="img1" src ="link to src"/> <!--only display this if the variable c == true in the script-->
</BODY>
<SCRIPT>
var c = confirm("Display Image?");
if(c== true) {
document.getElementById( "img1" ).style.display = "inline";
}
</SCRIPT>
</HTML>
Observe two changes in the code
Id attribute has been given to the image element and its display property is set to none
In the if section, a line has been added to hide the image using that id
document.getElementById( "img1" ).style.display = "inline";
by setting its display property to 'inline'.
Use div for this as following:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
<div id = "display">
<h1>Image:</h1>
<img src ="link to src"/>
</div>
<script>
document.getElementById('display').style.visibility = 'hidden';
var c = confirm("Display Image?");
if(c== true) {
//do something here that displays image?
document.getElementById('display').style.visibility = 'visible';
}
</script>
</body>
</html>
display: none will download the image even if the user clicks cancel. Here's another approach to download the image ONLY if the user clicks OK
<h1>Image:</h1>
<div id="myImg"></div>
</BODY>
<SCRIPT>
var c = confirm("Display Image?");
if(c== true) {
document.getElementById("myImg").innerHTML='<img src="img_src" />';
}
</SCRIPT>
You can replace the div with p or whatever you like.
Use this code
<HTML>
<TITLE>Img Tester</TITLE>
<BODY>
<h1>Image:</h1>
<img id="img"/>
</BODY>
<SCRIPT>
var c = confirm("Display Image?");
if(c== true) {
document.getElementById("img").setAttribute("src","1.jpg");
}
</SCRIPT>
</HTML>
I'd use classes for this task...
<img id="image-1" class="myimage" />
In your styles you should hide the image
.myimage {
display: none;
}
Also you need another class to show your image
.myimage-show {
display: block;
}
Now you need set myimage-show class to show your image
<script>
var c = confirm("Display Image?");
if(c== true) {
document.getElementById('image-1').classList.add('myimage-show');
}
</script>
Related
I have this code:
<script>
radius.style.setproperty('display');
</script>
<style>
.radius{
display: none;
}
</style>
<body>
<p id="radius"> Enter the radius</p>
</body>
What I intend to do here is that, by default, the paragraph has display=none. I want to display this paragraph through JS when some specific condition is met. But the problem is that using above code, I am not able to accomplish what I want. Please suggest what should have been done instead?
at the first you should get dom, after that change style attr. like this
for example:
<html>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color = "blue";
</script>
</body>
</html>
Try
<html>
<body>
<p id="radius"> Enter the radius</p>
<script>
let radius = document.getElementById("radius");
if(condition == true){
radius.style.display = "block";
}else{
radius.style.display = "none";
}
</script>
</body>
</html>
You can set element style in javascript
element.style.cssPropertyInCamelCase = 'value'
Example
const element = document.getElementById('id')
element.style.display = 'none'
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);
I'm working on an application with modal overlays that appear within iFrames when the corresponding buttons are pressed. To close one of these modal overlays, the Cancel button is defined in the parent window this way:
Cancel
I'd like to replace this with a JavaScript function (let's call it onCancel() ) so I can reset some values if needed in addition to closing the overlay. What is the JavaScript equivalent to "#close"?
You can't close an iFrame, you either have to remove or hide it. The example below removes the iframe. If you just want to hide you can replace the last line (containing removeChild with this one frame.style.display="none"; You can then get it back by using this line frame.style.display="block";
<!DOCTYPE html>
<head>
<title>test</title>
<style type="text/css">
.top {
height: 100px;
width: 200px;
background-color: blue;
}
</style>
<script type="text/javascript">
function removeIFrame() {
var frame = document.getElementById("iframe");
frame.parentNode.removeChild(frame);
}
</script>
</head>
<body>
<div class="top" onclick="removeIFrame();"></div>
<iframe id="iframe" src="/" width="200" height="100"></iframe>
<div class="top"></div>
</body>
<!DOCTYPE html>
<head>
<title>test</title>
<style type="text/css">
.top {
height:100px;
width:200px;
background-color:green;
}
</style>
<script type="text/javascript">
function removeIFrame() {
var frame = document.getElementById("target");
frame.parentNode.removeChild(frame);
}
</script>
</head>
<body>
<div class="top" onclick="removeIFrame();"></div>
<iframe id="target" src="http://www.disney.com" width="100" height="100"></iframe>
<div class="top"></div>
</body>
The approach that works for me is to define the following JavaScript function in the parent page:
function onCancel()
{
var myIFrame = document.getElementById("myIFrame");
var myForm = myIFrame.contentDocument.myForm;
var stuffWasChanged = myIFrame.contentDocument.stuffWasChanged;
if (stuffWasChanged == "true")
myForm.action = "reset.do";
myForm.submit();
location.href = '#';
}
Note that if the stuffWasChanged flag was not set to true, then no action is defined for the form in question, so the modal overlay simply goes away without any servlet method being called.
How would you write a toggle which toggles the display property of an element onmouseover/onmouseout from display:none to display:block;, or regardless, any css property which jquery's toggle can operate on- how exactly would you write a toggle function without jquery?
And why can't you take a javascript css property as a boolean in the following code?
<html>
<head>
<style type="text/css">
a {
display:none;
}
</style>
<script type="text/javascript">
function ab(a)
{
if(document.getElementById(a).style.display=='none')
{
document.getElementById(a).style.display="block";
}
else if(document.getElementById(a).style.display=="block")
{
document.getElementById(a).style.display="none";
}
}
</script>
</head>
<body>
<div class="fg">
<div style="width:100px;height:100px;border:2px solid blue;" onmouseover="ab('g');"
onmouseout="ab('g');">
<a id="g" href="http://www.dfadsafafa.com">lajflke</a></div></div>
</body>
</html>
The solution you mentioned seems fine, but can make it more concise.
function toggle(id){
var div1 = document.getElementById(id);
if (div1.style.display == 'none') {
div1.style.display = 'block'
} else {
div1.style.display = 'none'
}
}
What I am looking to achieve is that when an image is clicked, the content is shown and the image changes to another image, and when this is clicked again the image reverts back and the content becomes hidden
Currently I have this in script tags
<script language="javascript" type="text/javascript">
function setVis(id, vis) {
document.getElementById(id).style.display = vis;
}
function swapImage() {
switch (imageNo) {
case 1:
image.src = "images/img.png"
imageNo = 2
return(false);
case 2:
image.src = "images/img1.png"
imageNo = 1
return(false);
}
}
</script>
and this in the main html page
<h4><img id="image" name="image" src="images/img.png" width="10" height="10" border="0" onclick="swapImage();"/> Content</h4>
This doesn't work it shows the content but it won't hide it again, and the images do not change.
I would appreciate any help that can be offered thanks
This code should do the toggle for you.
<head>
<script language="javascript" type="text/javascript">
var imageNo = 2;
function swapImage() {
image = document.getElementById('image')
switch (imageNo) {
case 1:
image.src = "images/img.png"
imageNo = 2
document.getElementById('content').style.display = 'none'
return(false);
case 2:
image.src = "images/img1.png"
imageNo = 1
document.getElementById('content').style.display = 'block'
return(false);
}
}
</script>
</head>
<body>
<h4><img id="image" name="image" src="images/img.png" border="0" onclick="swapImage();"/></h4>
<div id="content" style="display:none">This content toggles</span>
</body>
i think it may be easier (imho because i hate working in javascript) to use jquery, using jquery you can have a look at the toggle function which gives you this functionality very easy. I believe it has less of a learning curve than neat javascript. If you need any help let me know.
Jquery Toggle
Here is similar solution like dev_musings but with a few less lines of code (for more about Alternate image with javascript onclick follow the link):
<script language="javascript" type="text/javascript">
function swapImage() {
var image = document.getElementById('image');
if (image.src == "images/img.png")
{
image.src = "images/img1.png";
document.getElementById('content').style.display = 'none';
}
else
{
image.src = "images/img.png";
document.getElementById('content').style.display = 'block';
}
return(false);
}
</script>
</head>
<body>
<h4><img id="image" name="image" src="images/img.png" border="0" onclick="swapImage();"/></h4>
<div id="content" style="display:none">This content toggles</span>
</body>