I am working with hiding and showing divs in javascript, basically I want to show one div, then when a button is clicked hide that div and show another. I can't quite figure the javascript out here's what I have at the moment but the second layer isnt showing when I click hide.
<script language=javascript type='text/javascript'>
function hidediv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('layer').style.visibility = 'hidden';
document.getElementById('topbar').style.visibility = 'visisble';
}
else {
if (document.layers) { // Netscape 4
document.layer.visibility = 'hidden';
document.topbar.visibility = 'visible';
}
else { // IE 4
document.all.layer.style.visibility = 'hidden';
document.all.topbar.style.visibility = 'visible';
}
}
}
function showdiv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('layer').style.visibility = 'visible';
document.getElementById('topbar').style.visibility = 'hidden';
}
else {
if (document.layers) { // Netscape 4
document.layer.visibility = 'visible';
document.topbar.visibility = 'hidden';
}
else { // IE 4
document.all.layer.style.visibility = 'visible';
document.all.topbar.style.visibility = 'hidden';
}
}
}
</script>
and css:
#topbar {
background-image: url(images/back.png);
background-repeat: repeat;
height: 30px;
margin-top: 20px;
visibility: hidden;
}
#show {
float: right;
padding-right: 40px;
padding-top: 10px;
}
#hide {
float: right;
padding-right: 40px;
}
#layer {
background-image: url(images/back.png);
background-repeat: repeat;
padding-left: 20px;
padding-bottom:20px;
overflow: auto;
}
using standard html links like:
Hide
Any help would be appreciated, cheers!
EDIT
okay switched to something completely new but it seems to not show after hiding
<script type="text/javascript">
$(function(){
$('#showhide').click(function(){
$('#layer').toggle();
$('#topbar').toggle();
});
});
and
Show/Hide
and
<div id="layer"></div>
You dont need jQuery for this.
Your functions could look like this:
function hideElement(elementId)
{
document.getElementById(elementId).style.display = 'none';
}
function showElement(elementId)
{
document.getElementById(elementId).style.display = 'block';
}
Then on page load, or in the css you can hide the first div. When the click happens you can then use showElement to show it.
This will probably help you: http://api.jquery.com/hide/ or the http://api.jquery.com/toggle/.
EDIT:
I am hoping that following example will help you.
<!DOCTYPE html>
<html>
<head>
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("#button").click(function(){
$("#a").toggle();
$("#b").toggle();
});
});
</script>
</head>
<body>
<div id="a">
I am a.
</div>
<div id="b" style="display: none">
I am b.
</div>
<div id="button">
<button>Show/Hide</button>
</div>
</body>
</html>
Related
This question already has answers here:
Why do I have to click this input button twice to call a function?
(4 answers)
Closed 1 year ago.
Below I have 2 pieces of code. The purpose of the code is to alternate between showing and hiding an element by clicking on the button.
Logically, I feel both pieces of code are sound and should work in exactly the same way. However, #1 functions as required whilst #2 doesn't. #2 requires 2 presses of the button to first display the element. After that, it functions as required.
I assume I have made a mistake linked to nomenclature, but I am unable to pinpoint it. Please help in doing so.
#1
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top: 20px;
visibility: hidden;
}
</style>
</head>
<body>
<button onclick="myFunction()">Try it</button>
<div id="myDIV">
This is my DIV element.
</div>
<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.visibility === "hidden") {
x.style.visibility = "visible";
} else {
x.style.visibility = "hidden";
}
}
</script>
</body>
</html>
#2
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top: 20px;
visibility: hidden;
}
</style>
</head>
<body>
<button onclick="myFunction()">Try it</button>
<div id="myDIV">
This is my DIV element.
</div>
<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.visibility === "visible") {
x.style.visibility = "hidden";
} else {
x.style.visibility = "visible";
}
}
</script>
</body>
</html>
That's happening because the x.style returns inline style for an element (the value sets on the div tag <div id="myDIV" style="/*this value*/"> and not the overall element styling) which is empty by default , think of it as any other HTML attributes like id or width.
So what you want to do, is to declare the visibility propriety inside the div like so :
<div id="myDIV" style="visibility: hidden;">
this way x.style.visibility will return 'hidden' from the first time.
Here are two snippets so you see the difference:
The same as your code just added a console.log
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top: 20px;
visibility: hidden;
}
</style>
</head>
<body>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var x = document.getElementById("myDIV");
console.log('x.style.visibility = '+x.style.visibility);
if (x.style.visibility === "hidden") {
x.style.visibility = "visible";
} else {
x.style.visibility = "hidden";
}
}
</script>
<div id="myDIV">
This is my DIV element.
</div>
</body>
</html>
and now if we set visibility as an inline style
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top: 20px;
}
</style>
</head>
<body>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var x = document.getElementById("myDIV");
console.log('x.style.visibility = '+x.style.visibility);
if (x.style.visibility === "hidden") {
x.style.visibility = "visible";
} else {
x.style.visibility = "hidden";
}
}
</script>
<div id="myDIV" style="visibility: hidden;">
This is my DIV element.
</div>
</body>
</html>
account for starting condition
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.visibility === "hidden" || !x.style) {
x.style.visibility = "visible";
} else {
x.style.visibility = "hidden";
}
}
I have a slideToggle which is giving me an accordion-style function. This all works fine except for the first click which shows the content div briefly but then slides it closed straight away. Clicking again slides open correctly and all subsequent clicks function correctly.
Here's the Jquery script I'm using:
$(".tm-section-label").click(function() {
$(this).parent().addClass('active').find('.tm-extra-product-options-container').slideToggle('fast,easing');
});~
$(".tm-section-label").click(function() {
$(".tm-section-label").not(this).parent().removeClass('active').find('.tm-extra-product-options-container').slideUp('fast');
});
Here's the CSS I'm using :
.prodTabs div.cpf_hide_element {
display: none;
margin-bottom: 0;
}
.prodTabs.active > div.tm-extra-product-options-container {
visibility: visible;
height: auto;
opacity: 1;
}
.prodTabs.active div.cpf_hide_element {
display: block;
}
How can I make the initial click just slide the div open without having to click twice?
https://dotnetfiddle.net/hpJDeF
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.prodTabs div.cpf_hide_element {
display: none;
margin-bottom: 0;
}
.prodTabs.active > div.tm-extra-product-options-container {
visibility: visible;
height: auto;
opacity: 1;
}
.prodTabs.active div.cpf_hide_element {
display: block;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- Script to illustrates slideToggle() method -->
<script>
$(document).ready(function () {
$(".tm-section-label").click(function () {
$(this).parent().addClass('active');
var q = $(this).parent().find('.tm-extra-product-options-container');
if (q.hasClass('cpf_hide_element')) {
q.removeClass('cpf_hide_element');
}
else {
q.slideToggle('fast,easing');
q.removeClass('cpf_hide_element');
}
});
$(".tm-section-label").click(function () {
$(".tm-section-label").not(this).parent().removeClass('active').find('.tm-extra-product-options-container').slideUp('fast');
});
});
</script>
</head>
<body>
<div class="prodTabs" id="parent">
<div class="tm-extra-product-options-container cpf_hide_element" id="theContent">The content..</div>
<div class="tm-section-label">Click Me</div>
</div>
</body>
</html>
I'm working on my website, where I made some custom changes for the home page. I wanted to display the images only when the user hovers over the text.
I have absolutely no knowledge on this topic / coding in general so I’m glad that I was able to make it work somehow for desktop, but I’m stuck what to do to make the images responsive. I would really appreciate if someone could help me out with this, here's what I was able to work out so far:
<script language="Javascript">
function ShowPicture(id,Source) {
if (Source=="1") {
if (document.layers) document.layers[''+id+''].visibility = "show"
else if (document.all) document.all[''+id+''].style.visibility = "visible"
else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "visible"
} else if (Source=="0") {
if (document.layers) document.layers[''+id+''].visibility = "hide"
else if (document.all) document.all[''+id+''].style.visibility = "hidden"
else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "hidden"
}
}
</script>
<style type="text/css">
#Style2 {
position: fixed;
width:650px;
height:440px;
top: 110px;
right: 55px;
visibility:hidden;
}
h1 {
margin-top: 100px;
}
</style>
</style>
<h3>a<h3><h4>b<h4>
<div id="Style2"><img src="></div>
Use CSS:
#Style2 > img {
width: 100%;
}
That will make image always fit container.
Example:
function ShowPicture(id,Source) {
if (Source=="1"){
if (document.layers) document.layers[''+id+''].visibility = "show"
else if (document.all) document.all[''+id+''].style.visibility = "visible"
else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "visible"
}
else
if (Source=="0"){
if (document.layers) document.layers[''+id+''].visibility = "hide"
else if (document.all) document.all[''+id+''].style.visibility = "hidden"
else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "hidden"
}
}
#Style2 {
position: fixed;
width:250px;
height:440px;
top: 110px;
right: 55px;
visibility:hidden;
}
h1 {
margin-top: 100px;
}
#Style2 > img {
width: 100%;
}
<a href="http://kirakoroknai.com/project/bock-albus" onMouseOver="ShowPicture('Style2',1)" onMouseOut="ShowPicture('Style2',0)">
<h3>absence</h3><h4>— visual identity</h4>
</a>
<div id="Style2"><img src="https://i1.wp.com/kirakoroknai.com/wp-content/uploads/2018/02/kira-koroknai-absence-graphic-design-exhibition-identity-13.jpg?fit=2200%2C1760"></div>
I dont really see the point of using JS in this case... you can do all with CSS (as far as i understand the question)
<!DOCTYPE html>
<html lang="en">
<head>
<!-- head content -->
<style>
#img {
display: none;
}
#link:hover + #img {
display: block;
}
</style>
</head>
<body>
<div id="link">Hover me</div>
<img id="img" src="http://lorempizza.com/240/240">
</body>
</html>
maybe its not this your looking for, but i tried to help ;)
This is the code I have currently come up with. It fills in the correct title, but the page does not become visible on having a page title match. How do I go about fixing this? What is the proper way of "if page title, execute this code"?
<head>
<title>Page Name 1</title>
</head>
<body>
<style>
#notavailablemsg {
font-size: 30px;
color: #f04e37;
display: inline;
}
#notavailablemsg div {
display: inline;
visibility: hidden;
}
#submsg {
font-size: 22px;
visibility: hidden;
}
#pagename {
font-style: italic;
}
</style>
<center>
<div id="notavailablemsg">
<div>The page </div>
<br>
<div id="pagename">page title</div>
<div> no longer exists</div>
</div>
<div id="submsg">
We are sorry for the inconvenience.
</div>
</center>
<script>
var errortitle = document.getElementsByTagName("title")[0].innerHTML;
document.getElementById("pagename").innerHTML = errortitle;
</script>
<script>
if (errortitle == "Page Name 1") {
document.getElementByID("notavailablemsg").innerHTML.style.visibility = "visible";
document.getElementByID("submsg").innerHTML.style.visibility = "visible";
}
</script>
</body>
</html>
#Midas answered: Modify to
document.getElementById("notavailablemsg").style.visibility = "visible";
document.getElementById("submsg").style.visibility = "visible";
You can use document.title to get current title.
Example
<!DOCTYPE html>
<html>
<head>
<title>YourGoodTitle</title>
<style>
div {
border: 1px solid red;
width: 100%;
height: 50px;
display: none; /* its good to use display: none to hide elements*/
}
</style>
</head>
<body onload="myFunction()">
<h1>Hello World!</h1>
<center>
<div id="notavailablemsg">
Bad title
</div>
<div id="availablemsg">
Glad you are here
</div>
</center>
<script>
function myFunction() {
var title = document.title;
if( title == "YourGoodTitle" ) {
// select and make elements visible
document.getElementById( "availablemsg" ).style.display = "block";
} else {
// hide the elements you want, make their display = none;
// for example
document.getElementById( "availablemsg" ).style.display = "none";
// show your expected elements
document.getElementById( "notavailablemsg" ).style.display = "block";
}
}
</script>
</body>
</html>
https://plnkr.co/edit/KS2obzXrUqtzT8FWUvwL?p=preview
So if your title is YourGoodTitle, YourGoodTitle message will be shown. Else Bad title will be printed
[ Learning Purpose ]
I'm Trying to use only javascript for this..
any advices with the simplest way is very appreciate it..
I Have explained what I need to do in the button functions with comments..
P.S: I'm not sure if this is done using CSS.. so please guide me if it does.
Seems Like I'm being misunderstood I'm look for this effect:
http://lokeshdhakar.com/projects/lightbox2/
<!DOCTYPE html>
<html>
<head>
<style>#mydiv{height: 250px; width: 250px; background-color:#34f;}</style>
<script>
document.onreadystatechange = function()
{
if(document.readyState == "complete")
{
var div = document.getElementById("mydiv");
var mybutton = document.getElementById("mybutton");
mybutton.onclick = function()
{
// center div
// gray out the rest
};
document.onclick = function()
{
// remove gray out effect to the page
};
}
}
</script>
</head>
<body>
<div id="mydiv"></div>
<button id="mybutton"></button>
</body>
</html>
HTML:
<div id="mydiv" style="display:none"></div>
CSS:
#mydiv
{
background-color: white;
filter:alpha(opacity=50); /* IE */
opacity: 0.5; /* Safari, Opera */
-moz-opacity:0.50; /* FireFox */
top: 0px;
left: 0px;
z-index: 20;
height: 100%;
width: 100%;
background-repeat:no-repeat;
background-position:center;
position:absolute;
}
JavaScript:
mybutton.onclick = function()
{
document.getElementById("mydiv").style.display = "";
};
document.onclick = function()
{
document.getElementById("mydiv").style.display = "none";
};
may be helps you.