Each div is shown only after 2 clicks at the start.After 2 initial clicks on each div, each div showhide works with just 1 click. Javascript and html
function showhide() {
var div = document.getElementsByClassName('search_form')[0];
if (div.style.display == "none") {
div.style.display = "block";
} else {
div.style.display = "none";
}
}
function showhide2() {
var div = document.getElementsByClassName('login')[0];
if (div.style.display == "none") {
div.style.display = "block";
} else {
div.style.display = "none";
}
}
function showhide3() {
var div = document.getElementsByClassName('carrello')[0];
if (div.style.display == "none") {
div.style.display = "block";
} else {
div.style.display = "none";
}
}
.search_form {
display: none;
float: right;
}
.login {
display: none;
float: right;
}
.carrello {
display: none;
float: right;
}
<div class="login-carrello">
<img src="img.png" onClick="showhide();" onmouseover="this.src='img.png'" onmouseout="this.src='gg.png'" width="50px" height="50px">    
<img src="img.png" onClick="showhide2()" onmouseover="this.src='img.png'" onmouseout="this.src='img.png'" width="50px" height="50px">
<img src="imgt.png" onClick="showhide3()" onmouseover="this.src='img.png'" onmouseout="this.src='img.png'" width="50px" height="50px">
</div>
are both in a single PHP page.Thanks in advance.
The problem is in JavaScript code. Since display property was initially set in css, div.style.display won't give you none. So, you have to change your code a little bit. Like this:
if(div.style.display != "block")
div.style.display = "block";
else
div.style.display = "none";
Once you set the display property using JavaScript code, you can read it using JavaScript.
Because the display property is not actually set (although it is applied through CSS), it's initial value is empty (and thus not equal to 'none' ).
If checked in the reverse order, it would work, but perhaps safer is to use an extra class (with the display property) you toggle instead.
A minimized example:
function showhide(cn) {
var div = document.getElementsByClassName(cn)[0];
div.classList.toggle('show');
}
.login-carrello >img{
width:50px;
height: 50px;
}
.search_form,.login, .carrello {
float: right;
display: none;
}
.show{
display:block;
}
<div class="login-carrello">
<img src="/wp-content/themes/kyro/img/search.png" onClick="showhide('search_form')">
<img src="img.png" onClick="showhide('login')">
<img src="imgt.png" onClick="showhide('carrello')">
</div>
<div class="search_form">search_form</div>
<div class="login">login</div>
<div class="carrello">carrello</div>
The start setting for .search_form,.login, .carrello is display:none, but adding .show overrides that. (I've also taken the liberty of parameterizing the classname to show/hide so only a single function is needed. With late binding it could be automated further, but this stays pretty close to the original)
Not sure if you're looking for a double click, or just two seperate clicks. However if a double click would satisfy your functionality requirement, you could try something like the following:
<img src="img.png" ondblclick="showhide2()" onmouseover="this.src='img.png'" mouseout="this.src='img.png'" width="50px" height="50px">
Related
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/
I'm very inexperienced in javascript but have managed (with the help of google) to put together the following expandable/collapsible link
<script type="text/javascript">
function toggleMe(a) {
var e = document.getElementById(a);
if(!e) return true;
if(e.style.display == "none") {
e.style.display = "block"
}
else {
e.style.display = "none"
}
return true;
}
</script>
<p>
<input onclick="return toggleMe('para1')" style="font-size:18px; color:#008080;" type="text" value="LINK TO EXPAND" />
</p>
<p id="para1">
<strong><em>text text text text</em></strong>
</p>
The only problem with it is that it is expanded by default and I wanted it collapsed by default. Can anyone help with this? Thank you!
Also, if anyone knows how to get +/- signs next to the link that change depending on whether it is expanded or collapsed, that would be great.
<script type="text/javascript">
function toggleMe(a) {
var e = document.getElementById(a);
var toggleIcon = document.getElementById('toggle-icon');
if(!e) return true;
if(e.style.display == "none") {
e.style.display = "block";
toggleIcon.innerHTML = '-';
}
else {
e.style.display = "none";
toggleIcon.innerHTML = '+';
}
return true;
}
</script>
<p>
<input onclick="return toggleMe('para1')" style="font-size:18px; color:#008080;" type="text" value="LINK TO EXPAND" />
<span id="toggle-icon">+</span>
</p>
<p id="para1" style="display: none;">
<strong><em>text text text text</em></strong>
</p>
You can try putting in style statement the display option like below:
<p id="para1" style="display:none"><strong><em>text text text text</em></strong></p>
That can default collapse when you open your html, hope it help you...
Options 1:
Add this to your css to hide it by default:
#para1 {
display: none;
}
Options 2:
Move your script down, and call it initially toggleMe('para1'); so you will hide it first.
<p>
<input onclick="return toggleMe('para1')" style="font-size:18px; color:#008080;" type="text" value="LINK TO EXPAND" />
</p>
<p id="para1">
<strong><em>text text text text</em></strong>
</p>
<script type="text/javascript">
function toggleMe(a) {
var e = document.getElementById(a);
if(!e) return true;
if(e.style.display == "none") {
e.style.display = "block"
}
else {
e.style.display = "none"
}
return true;
}
toggleMe('para1');
</script>
Daniel has the correct answer to your question. This is a bit more than you asked for, but I think you will have a better time if you manipulate classes instead of element styles properties. Just makes it a bit more flexible.
In the example below I wrapped your code in a common element and then changed that element's class to achieve your desired effect. That let me easily add in your plus and minus too.
It's a little raw but you can see where this can take you. Hope it helps.
https://jsfiddle.net/6xoe1b94/
function toggleMe(a) {
var e = document.getElementById('wrapper');
if(! e.classList.contains('active')) {
e.classList.add('active');
}
else {
e.classList.remove('active');
}
}
#para1{
display:none;
}
.active #para1{
display:block;
}
#plus{
display:inline-block;
}
#minus{
display:none;
}
.active #plus{
display:none;
}
.active #minus{
display:inline-block;
}
<div id='wrapper'>
<p>
<input onclick="return toggleMe('para1')" style="font-size:18px; color:#008080;" type="text" value="LINK TO EXPAND" /><span id='plus'>+</span><span id='minus'>-</span>
</p>
<p id="para1">
<strong><em>text text text text</em></strong>
</p>
</div>
I added a solution that removes the javascript and css from your html. I also changed your expand/collapse element to a div instead of input. I've added a span element within the div that changes it's text content (either + or -) based on whether #para1 is displayed or not. Also, in css I added display: none; to #para1 (this initially hides the element), cursor: pointer; (shows it is clickable when the user hovers over it) user-select: none; (stop div from highlighting when user clicks on it).
// store elements
var expandEl = document.getElementById("expand");
var plusMinusEl = document.getElementById("plusMinus");
var para1El = document.getElementById("para1");
// toggle function: pass element as argument
function toggleMe(el) {
// check if element is hidden
if(el.offsetParent === null) {
plusMinusEl.textContent = "-";
el.style.display = "block"
}
else {
plusMinusEl.textContent = "+";
el.style.display = "none"
}
}
// click function for expand div
expandEl.addEventListener("click", function() {toggleMe(para1El)});
#expand {
font-size:18px;
color:#008080;
cursor: pointer;
user-select: none; /* stop div from highlighting */
}
#para1 {
display: none;
}
<div id="expand">
LINK TO EXPAND <span id="plusMinus">+</span>
</div>
<p id="para1"><strong><em>text text text text</em></strong></p>
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>
I have two div in my html file. I want to hide the 1st div and show another div on html input button onclick event.
Here is my code,
function switchVisible() {
if (document.getElementById('Div1') !== undefined) {
if (document.getElementById('Div1').style.display == 'Block') {
document.getElementById('Div1').style.display = 'none';
document.getElementById('Div2').style.display = 'Block';
} else {
document.getElementById('Div1').style.display = 'Block';
document.getElementById('Div2').style.display = 'none';
}
}
}
#Div2 {
display: none;
}
<input id="Button1" type="button" value="" onclick="javascript:switchVisible();" />
But it's not working. Any help will be appreciated.
Thanks.
1) Inside onclick, you don't have to use "javascript:", that is implied.
2) You check for "display: block", I always check for "display: none" (Because the display can also be "inline-block", etc.)
Try this:
function switchVisible() {
if (document.getElementById('Div1')) {
if (document.getElementById('Div1').style.display == 'none') {
document.getElementById('Div1').style.display = 'block';
document.getElementById('Div2').style.display = 'none';
}
else {
document.getElementById('Div1').style.display = 'none';
document.getElementById('Div2').style.display = 'block';
}
}
}
#Div2 {
display: none;
}
<div id="Div1">Div 1</div>
<div id="Div2">Div 2</div>
<input id="Button1" type="button" value="Click" onclick="switchVisible();"/>
As it is tagged with jQuery, here's the simple jQuery answer
$('body').on("click touchstart", "#Button1", function(e){
$("#Div1, #Div2").toggle();
});
use on to listen for the id #Button, I've used both click and touchstart to make it mobile friendly, and then used toggle() which sets the state of the display: to the opposite to what it is now. So if it was display:none, it becomes display:block, if it was display:block it becomes display:none
Try this:
var div1 = document.getElementById('Div1'),
div2 = document.getElementById('Div2');
function switchVisible() {
if(!div1) return;
if (getComputedStyle(div1).display == 'block') {
div1.style.display = 'none';
div2.style.display = 'block';
} else {
div1.style.display = 'block';
div2.style.display = 'none';
}
}
document.getElementById('Button1').addEventListener('click', switchVisible);
#Div2 {
display:none;
}
<div id="Div1">Div 1</div>
<div id="Div2">Div 2</div>
<input id="Button1" type="button" value="Click me" />
However, this approach may be better:
var wrapper = document.getElementById('wrapper');
function switchVisible() {
wrapper.classList.toggle('switched');
}
document.getElementById('Button1').addEventListener('click', switchVisible);
#wrapper > :last-child {
display: none;
}
#wrapper.switched > :last-child {
display: block;
}
#wrapper.switched > :first-child {
display: none;
}
<div id="wrapper">
<div>Div 1</div>
<div>Div 2</div>
</div>
<input id="Button1" type="button" value="Click me" />
you might wanna try this..
function switchVisible() {
var div1=document.getElementById('Div1');
var div2=document.getElementById('Div2');
if (div1 !== undefined && div2 !== undefined) {
div1.style.display = div2.style.display === '' ? 'none' : div2.style.display === 'none' ? 'none' : 'block';
div2.style.display = div1.style.display === 'block' ? 'none' : 'block';
}
}
#Div1{
display: block;
background: blue;
}
#Div2 {
display: none;
background: red;
}
.divs
{
width: 50px;
height: 50px;
border: 1px solid #000;
}
<input id="Button1" type="button" value="Hide" onclick="switchVisible();" />
<div id="Div1" class="divs"> </div>
<div id="Div2" class="divs"> </div>
Probably you have some syntax errors in your code. This one is working:
function switchVisible() {
if (document.getElementById('Div1') !== undefined) {
if (document.getElementById('Div1').style.display == 'block') {
document.getElementById('Div1').style.display = 'none';
document.getElementById('Div2').style.display = 'block';
} else {
document.getElementById('Div1').style.display = 'block';
document.getElementById('Div2').style.display = 'none';
}
}
}
#Div1 {
display:none;
}
#Div1 {
background: red;
}
#Div2 {
background: green;
}
#Div1, #Div2 {
width: 50px;
height:50px;
}
<div id="Div1"></div>
<div id="Div2"></div>
<input id="Button1" type="button" value="" onclick="javascript:switchVisible();" />
Don't add the click event through html. Add an event listener like document.getElementById ("Button1").addEventListener ("click", switchVisible, false);
See working jsFiddle here: http://jsfiddle.net/bevanr01/gmkconLw/
I'm trying to make two forms that aren't displayed at the same time. The first one stays visible when the page opens, but if the user select, the first one should be hidden and the second one might take it's place. So here is my CSS for this:
#switcher {
float: right;
font-size: 12px;
}
#web_upload {
visibility: hidden;
}
#local_upload {
visibility: visible;
}
Here is the HTML:
<form action="img_upload.php" id="local_upload" method="post" enctype="multipart/form-data">
<center>
<input type="file" name="file" id="file" />
<br />
<input type="image" name="submit" src="graphics/upload.png" />
</center>
</form>
<form action="url_upload.php" id="web_upload" method="post" method="post">
<center>
<input type="text" name="url" id="url" />
<br />
<input type="image" name="submit" src="graphics/upload.png" />
</center>
</form>
And here is my Javascript to do it:
function showHide(id, other)
{
if(document.getElementById(id)) {
if(document.getElementById(id).style.visibility != "hidden") {
document.getElementById(other).style.visibility = "hidden";
document.getElementById(id).style.visibility = "visible";
} else {
document.getElementById(id).style.visibility = "hidden";
document.getElementById(other).style.visibility = "visible";
}
}
}
So, I'm having three problems:
The second form has a reserved place on the page and I don't want this empty place
The second form is displaying on that reserved place instead of taking place over the first one
If the user select one of the options and try to select other after nothing happens
How I can solve this problems?
#Nathan Campos: I'd combine display and visibility like so --
CSS:
#web_upload {
display: none;
visibility: hidden;
}
#local_upload {
display: inline;
visibility: visible;
}
JavaScript:
function showHide(id, other)
{
var id1 = document.getElementById(id);
var id2 = document.getElementById(other);
if (id1.style.display == "none") {
id1.style.display = "inline";
id1.style.visibility = "visible";
id2.style.display = "none";
id2.style.visibility = "hidden";
} else if (id1.style.display == "" || id1.style.display == "inline") {
id1.style.display = "none";
id1.style.visibility = "hidden";
id2.style.display = "inline";
id2.style.visibility = "visible";
}
}
display: none/block; Show the form / Totally hide and clear the space
visibility: hidden; Hide the form, but keep the space preserved
The CSS visibility property is not the right choice here.
The 'visibility' property specifies whether the boxes generated by an element are rendered. Invisible boxes still affect layout (set the 'display' property to 'none' to suppress box generation altogether)
Reference: http://www.w3.org/TR/CSS21/visufx.html#visibility
Consider instead the CSS display property - display:none applied to an element will make it appear as if it is not present at all, it will be invisible and will not affect layout.
#switcher {
float: right;
font-size: 12px;
}
#web_upload {
display:none;
}
#local_upload {
display:block;
}
//
function showHide(id, other)
{
switch (document.getElementById(id).style.display) {
case 'block':
document.getElementById(id).style.display = 'none';
document.getElementById(other).style.display = 'block';
case 'none':
document.getElementById(id).style.display = 'block';
document.getElementById(other).style.display = 'none';
}
}