function showX()
document.getElementById("one").style.display = "block";
document.getElementById("two").style.display = "none";
document.getElementById("three").style.display = "none";
function showZ()
document.getElementById("one").style.display = "none";
document.getElementById("two").style.display = "block";
document.getElementById("three").style.display = "none";
function showY()
document.getElementById("one").style.display = "none";
document.getElementById("two").style.display = "none";
document.getElementById("three").style.display = "block";
div {display:inline;}
div img {width:400px;height: 400px;}
#one {
display: none;
}
#two {
display: none;
}
#three {
display: none;
}
<html>
<section id="one">
take this info es cool 1
</section>
<section id="two">
take this info es cool 2
</section>
<section id="three">
take this info es cool 3
</section>
</html>
When I click my images nothing happens?
Can anyone give me a hand, please?
I have been trying to work this out for a while so decided to come here.
Thanks in advance for any help!
I am pretty new to programming and I need this for a website project that I am creating.
I need it so when I access the website it will only show the pictures and not the sections. When a picture is clicked it will show the first section but keep the other sections hidden.
You're missing curly brackets {}. This is working. You should also call the function.
function showX(){
document.getElementById("one").style.display = "block";
document.getElementById("two").style.display = "none";
document.getElementById("three").style.display = "none";
}
function showZ(){
document.getElementById("one").style.display = "none";
document.getElementById("two").style.display = "block";
document.getElementById("three").style.display = "none";
}
function showY(){
document.getElementById("one").style.display = "none";
document.getElementById("two").style.display = "none";
document.getElementById("three").style.display = "block";
}
showZ();
div {display:inline;}
div img {width:400px;height: 400px;}
#one {
display: none;
}
#two {
display: none;
}
#three {
display: none;
}
<html>
<section id="one">
take this info es cool 1
</section>
<section id="two">
take this info es cool 2
</section>
<section id="three">
take this info es cool 3
</section>
</html>
Related
I have two divs, one is hidden and the other one is visible. I'm using css display:none; to hide first and using style.display="block";
when I refresh the page it gives same div name in the address bar but the div is hidden.
I just want the div to stay block after refreshing or submitting the form inside the div
<html>
<head>
<meta charset="utf-8">
<title>Sample</title>
<style>
#content {
flex:8;
display:flex;
flex-direction:row;
justify-content:space-between;
flex-basis:100%;
padding:0 10px 0x 10px;
text-align:center;
}
#leftnav {
flex:1;
padding-top:20px;
}
#midcontent {
flex:9;
text-align:center;
padding-top:20px;
display:block;
}
#leftnav ul {
display: block;
margin: 0px;
padding: 0px;
list-style-type: none;
}
#m1,#m2,#m3 {
flex:9;
text-align:center;
padding-top:20px;
display:none;
}
</style>
</head>
<body>
<div id="content">
<div id="leftnav" align="center">
<ul>
<li>Page m1</li>
<li>Page m2</li>
<li>Page m3</li>
</ul>
</div>
<div id="midcontent" align="center">
<p>Home Page</p>
</div>
<div id="m1" align="center">
<p>Div m1</p>
</div>
<div id="m2" align="center">
<p>Div m2</p>
</div>
<div id="m3" align="center">
<p>Div m3</p>
</div>
</div>
<script type="text/javascript">
var d=document.getElementById('midcontent');
var d1=document.getElementById('m1');
var d2=document.getElementById('m2');
var d3=document.getElementById('m3');
function div1() {
if(d.style.display === "block") {
d.style.display = "none";
d1.style.display = "block";
} else {
d.style.display = "none";
d1.style.display = "block";
d2.style.display = "none";
d3.style.display = "none";
}
}
function div2() {
if(d.style.display === "block") {
d.style.display = "none";
d2.style.display = "block";
} else {
d.style.display = "none";
d1.style.display = "none";
d2.style.display = "block";
d3.style.display = "none";
}
}
function div3() {
if(d.style.display === "block") {
d.style.display = "none";
d3.style.display = "block";
} else {
d.style.display = "none";
d1.style.display = "none";
d2.style.display = "none";
d3.style.display = "block";
}
}
</script>
</body>
</html>
change:
function div1() {
var d=document.getElementById('midcontent');
var d1=document.getElementById('m1');
if(d.style.display === "block") {
d.style.display = "none";
d1.style.display = "block";
} else {
d.style.display = "none";
d1.style.display = "block";
}
}
to:
function toggleDiv() {
document.getElementById('midcontent').style.display = "none";
document.getElementById('m1').style.display = "block";
}
"i just want the div to stay block after refreshing" call the function on page load in html to make it execute after refresh of page:
<body onLoad="toggleDiv()">
<!-- Your html content -->
</body>
alternatively you can also do it in js:
document.addEventListener("DOMContentLoaded", function(event) {
// Your code to run since DOM is loaded and ready
toggleDiv()
});
If you want more in depth persistance and/or variable changes please provide additional information on how and why you want to do this exactly! Hope it helps! :)
I am "emulating" a Gravity Form. I am using a previous button for my form. I know the best way to solve the problem is by 'telling' the function the id of the current div (display: block) but I don't know how.
In the first part of the code, I show or hide divs based on the selected option of the tag select, now, in the second one is where I configure the "previous button".
<script>
function yesnoCheck(that) {
if (that.value == "2") {
document.getElementById("b").style.display = "block";
document.getElementById("a").style.display = "none";
<?php $new="b" ?>
} else {
document.getElementById("a").style.display = "none";
document.getElementById("d").style.display = "block";
}
}
</script>
<script>
function yesnoCheck2(that) {
if (that.value != " ") {
document.getElementById("c").style.display = "block";
document.getElementById("a").style.display = "none";
document.getElementById("b").style.display = "none";
<?php $new="c" ?>
} else {
document.getElementById("a").style.display = "none";
}
}
</script>
<script>
function yesnoCheck3(that) {
if (that.value != " ") {
document.getElementById("d").style.display = "block";
document.getElementById("c").style.display = "none";
<?php $new="f" ?>
} else {
document.getElementById("c").style.display = "none";
}
}
</script>
<script>
function yesnoCheck4(that) {
if (that.value.length == 8) {
document.getElementById("tform").style.display = "block";
} else {
document.getElementById("tform").style.display = "none";
}
}
</script>
It isn't entirely clear what you're trying to do, but what I think you're trying to do is navigate through a set of sections in a form as if they were different pages.
One really easy way to do this is to use the :target CSS selector, which allows you to select elements that match the ID of the current page's anchor fragment. For example, if I had a section with the ID of main, and the URL was something like https://example.com/#main, I could use section:target to show that section.
Here's a full example for you. HTML:
<section id="one">
<h1>Section 1</h1>
<p>
This is section one. Content goes here.
</p>
Next
</section>
<section id="two">
<h1>Section 2</h1>
<p>
This is section two. More content goes here.
</p>
Previous
Next
</section>
<section id="three">
<h1>Section 3</h1>
<p>
This is the last section.
</p>
Previous
</section>
CSS:
.button {
background: #333;
color: #fff;
text-decoration: none;
padding: 0.5em 1em;
border-radius: 0.3em;
}
section {
display: none;
}
section:target {
display: block;
}
Finally, some JavaScript to initialize things:
// Default to the first section
if (!location.hash.substr(1)) {
location.hash = 'one';
}
The buttons are just links to the next section, by way of anchor fragment.
This example is up on JSFiddle here: https://jsfiddle.net/91pnc3gf/
is there a way to to this code in CSS?
x = document.getElementsByTagName("a");
x[2].style.display = "none";
x[3].style.display = "none";
x[4].style.display = "none";
You can use the nth-child selector:
a:nth-child(3), a:nth-child(4), a:nth-child(5) {
display: none;
}
<a>1</a>
<a>2</a>
<a>3</a>
<a>4</a>
<a>5</a>
<a>6</a>
I have two divs on called #loading and one called #main;
<div id="loading"></div>
<div id="main"></div>
What I'm trying to achieve is with using javascript, show #loading for five seconds then after the five seconds hide the #loading div and show the #main div. The #main div is default hidden and once the #loading div is hidden the #main div shows.
I'm assuming that to achieve this would be a mixture of css and javascript; hopefully you understand what I'm trying to achieve and can help me accomplish what I'm trying to achieve.
Thankyou.
Your css would be:
#main {
display:none;
}
The JS would be:
setTimeout(function() {
document.getElementById('main').style.display = 'block';
document.getElementById('loading').style.display = 'none';
}, 5000);
Maybe this could help you out without the use of CSS. Only pure Jquery.
$("#loading").show();
$("#main").hide();
setTimeout(function() {
$("#loading").hide();
$("#main").show()
}, 5000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="loading">loading here..</div>
<div id="main" class="hidden">This is main content</div>
Use setTimeout.
window.onload = function() {
setTimeout(function() {
document.getElementById("loading").style.display = "none";
document.getElementById("main").style.display = "block";
}, 5*1000);
}
#main {
display: none;
}
<div id="loading">loading</div>
<div id="main">main</div>
Hope this helps
function loading(dur) {
if (window.busy) {return;}
document.getElementById('loading').style.display = "block";
document.getElementById('main').style.display = "none";
window.busy = setTimeout(function () {
document.getElementById('loading').style.display = "none";
document.getElementById('main').style.display = "block";
window.busy = 0;
}, dur);
}
loading(5000);
Personaly I would avoid using ID's here as they polute the global.
You can do this nicely with CSS and classes..
var holder = document.querySelector('.holder');
setTimeout(function () {
holder.classList.remove('isloading');
}, 5000);
.loading {
display: none;
}
div.isloading .loading {
display: block;
}
.main {
display: none;
}
div:not(.isloading) .main {
display: block;
}
<div class="holder isloading">
<div class="loading">Loading</div>
<div class="main">Main</div>
</div>
basically i'm trying to create multiple popup boxes that appear when different links are clicked. For some reason, a popup box only appears when the first link is clicked. When the rest of the links are clicked, nothing happens. Any help is appreciated, thanks. Also, I've only included 2 of the links in this example.
javascript code:
function xpopup() {
document.getElementById("x").onclick= function(){
var overlay = document.getElementById("overLay");
var popup = document.getElementById("xPopup");
overlay.style.display = "block";
popup.style.display = "block";
}
}
function ypopup() {
document.getElementById("y").onclick= function(){
var overlay = document.getElementById("overLay");
var popup = document.getElementById("yPopup");
overlay.style.display = "block";
popup1.style.display = "block";
}
}
</script>
HTML code:
<body onLoad="xpopup()"; "ypopup()";>
<div id="overLay"></div>
<div class="popupBox" id="xPopup"></div>
<div class="popupBox" id="yPopup"></div>
Link 1<br>
Link 2<br>
CSS code:
.popupBox{
display:none;
position: fixed;
width: 30%;
height: 40%;
margin-left: 16.5%;
margin-top: 4.5%;
background-color: white;
border: 2px solid black;
border-radius: 10px;
z-index: 10;
}
#overLay{
display:none;
position: fixed;
width: 100%;
height: 100%;
background-color: #707070;
opacity: 0.7;
z-index: 9;
left: 0;
top: 0;
}
Replace <body onLoad="xpopup()"; "ypopup()";> with <body onLoad="xpopup(); ypopup();"> and in your JavaScript code you have a typo.
function ypopup() {
document.getElementById("y").onclick= function(){
var overlay = document.getElementById("overLay");
var popup = document.getElementById("yPopup");
overlay.style.display = "block";
popup1.style.display = "block"; // Here the popup1 is undefined change it to popup.style.....
}
}
Edit :-->
I've changed your code to hide the popup, if you click on the greyed out section.
Fiddle
HTML:
<body>
<div id="overLay"></div>
<div class="popupBox" id="xPopup"></div>
<div class="popupBox" id="yPopup"></div>
Link 1
<br />
Link 2
<br />
</body>
JavaScript:
var overlay = document.getElementById("overLay");
var xpopup = document.getElementById("xPopup");
var ypopup = document.getElementById("yPopup");
document.getElementById("x").onclick = function () {
overlay.style.display = "block";
xpopup.style.display = "block";
};
document.getElementById("y").onclick = function () {
overlay.style.display = "block";
ypopup.style.display = "block";
};
overlay.onclick = function () {
overlay.style.display = "none";
xpopup.style.display = "none";
ypopup.style.display = "none";
};
I'm seeing two issues --
The first is already answered by chipChocolate.py:
Replace <body onLoad="xpopup()"; "ypopup()";> with <body onLoad="xpopup(); ypopup();">.
The second (and maybe this is just a typo?) is that you have:
function ypopup() {
document.getElementById("y").onclick= function()
var overlay = document.getElementById("overLay");
var popup = document.getElementById("yPopup");
overlay.style.display = "block";
popup1.style.display = "block";
}
}
You're referencing popup1 but you've named your variable popup. If you open up the javascript console you'll probably see that's throwing an error. Rename the variable popup1 and this should work.