I'm trying to make a div visible/invisible using java script. I have a function that is supposed to change the visibility to 'none' if the div is visible and to 'visible' if the div is none. However it doesn't seem to be working. Here is the code:
<script>
function toggleTools()
{
var element = document.getElementById('divTools');
if(element.style.visibility=='visible')
{
element.style.visibility='hidden';
}
else
{
element.style.visibility='visible';
}
}
</script>
I Tried Your Code and Its Working For me. Please Find Below Code. Set Visibility for the Element initially Otherwise its not working at the beginning.
<script>
function toggleTools()
{
var element = document.getElementById('divTools');
if(element.style.visibility=='visible')
{
element.style.visibility='hidden';
}
else
{
element.style.visibility='visible';
}
}
</script>
<div id="divTools" style="visibility:visible">
<p>Some Text</p>
</div>
<input type="button" onclick="toggleTools()" value="click" />
Go with
document.getElementById('divTools').style.display = 'block';
document.getElementById('divTools').style.display = 'none';
Try this way:
<script>
function toggleTools()
{
var element = document.getElementById('divTools');
if(element.style.display!='none')
{
element.style.display='none';
}
else
{
element.style.display='block';
}
}
</script>
But you can use JQuery.
$('#divTools').toggle();
The last thing don't work it's the first time whom charge the page. I check if visibility == '' and this works.
function toggleTools()
{
var element = document.getElementById('divTools');
if(element.style.visibility=='visible' || element.style.visibility=='')
{
element.style.visibility='hidden';
}
else
{
element.style.visibility='visible';
}
}
live demo: http://jsfiddle.net/Magicianred/9vTeR/1/
Enjoy your code.
The code works, provided you set the visibility initially:
via CSS:
#divTools {
visibility:hidden;
}
jsFiddle example
Or via JavaScript:
document.getElementById('divTools').style.visibility='hidden';
jsFiddle example
Related
Hey guys I am currently creating a newsletter popup.
I'm wanting to hide the div after the close button is selected using a cookie. The code snippet I've taken does include some code to try and achieve this but doesn't seem to work for me. Anyone know a solution?
JS
var delay = 0; //in milliseconds
jQuery(document).ready(function($){
setTimeout(function(){
showNewsletterPopup();
}, delay);
jQuery('.popup-close').click(function(){
$('.newsletter-overlay').hide();
});
});
function showNewsletterPopup(){
jQuery('.newsletter-overlay').show();
}
function onLoad() {
var showDiv;
if(localStorage.getItem("showDiv") == null) {
showDiv = true;
}
else {
showDiv = localStorage.getItem("showDiv")
}
if (showDiv) {
document.getElementById('newsletter-overlay').style.display = 'block';
}
else {
document.getElementById('newsletter-overlay').hide();
}
}
function onClose() {
document.getElementById('newsletter-overlay').remove();
localStorage.setItem("showDiv", false);
}
HTML
<div class="newsletter-overlay">
<div id="newsletter-popup">
<img src="/wp-content/uploads/static/TLTX.svg">
<div class="col1">
<div class="newsletter-in">
<h3>Take 10% off your first purchase</h3>
<p class="modalp">Join our Tribe! Our mates get the best rates. Every $1 spent will earn you 1 point. Be the first to know about new arrivals. Receive 10% off your first order! See more on our Tribe page
[wc_reg_form_bbloomer]
</div>
</div>
</form>
</div>
</div>
</div>
the provided code is a bit messy... there are some unused functions and a lot of noise. however, here is my proposal:
$(document).ready(function($) {
const $newsletterPopup = $('#newsletter-popup');
const $newsletterOverlay = $('.newsletter-overlay');
const $popupCloseLink = $('.popup-close');
let showDiv = JSON.parse(localStorage.getItem("showDiv"));
if (showDiv === null) {
showDiv = true;
}
if (showDiv) {
$newsletterOverlay.show();
$newsletterPopup.show();
} else {
$newsletterOverlay.hide();
$newsletterPopup.hide();
}
$popupCloseLink.click(function() {
$newsletterOverlay.hide();
$newsletterPopup.hide();
localStorage.setItem("showDiv", false);
});
});
I've written a simple html and js code to toggle between two images on click but relative url is not working in js code. code which is not working:
<img id="demo" src="one.jpg" ></img>
<script>
var pic = document.getElementById("demo");
function change()
{
if (pic.src == "one.jpg")
{
pic.src="two.jpg";
}
else
{
pic.src="one.jpg";
}
}
</script>
When I changed relative url to absolute its working fine:
<script>
var pic = document.getElementById("demo");
function change()
{
if (pic.src == "file:///D:/javaScript_tut/one.jpg")
{
pic.src="file:///D:/javaScript_tut/two.jpg";
}
else
{
pic.src="file:///D:/javaScript_tut/one.jpg";
}
</script>
replace
if (pic.src == "one.jpg")
with
if(pic.src.indexOf("one.jpg") >= 0)
This is what I have so far:
HTML:
<button id="clockToggle" onclick="toggleClock()">Toggle Clock</button>
CSS:
#clockWidget {
display:none;
}
JavaScript:
function enableClock() {
var clock = document.getElementById("clockWidget");
clock.style.display="block";
}
function disableClock() {
var clock = document.getElementById("clockWidget");
clock.style.display="none";
}
function toggleClock() {
var clock = document.getElementById("clockWidget");
if(clock.style.display="none") {
enableClock();
}
else {
disableClock();
}
}
My goal is to make the button so that it will toggle the clockWidget on and off. If possible answer with JavaScript instead of jQuery.
P.S. If you vote my question down, at least comment on why you did so
In the if statement of your toggleClock() function you are missing a '=' and thus do not compare but instead set the display property of clock. This is why it only calls enableClock(). If you use the following it should work as expected:
if (clock.style.display == "none") {
enableClock();
} else {
disableClock();
}
You're missing another '=' in your comparison:
if(clock.style.display == "none") {
enableClock();
} else {
disableClock();
}
$("#clockToggle").click(function(){
$("#clockWidget").toggle();
});
I have an image defined as following:
<div id="logo" class="exhibit-flowingFacet">
<div class="wrapper">
<img src="path/to/the/image/logo.png">
</img>
</div>
</div>
I want with a javascript get the image by its src and hide it.
function hideImage() {
if (document.getElementById()
{
if (document.getElementById('logo').getElementsByClassName('wrapper').src=="path/to/the/image/logo.png")
{
document.style.visibility = 'hidden';
}
}
};
hideImage();
But the code didn't work!! any idea?
With jQuery you could write
$('img[src="path/to/the/image/logo.png"]').hide();
Try this script:
function hideImage() {
var path = 'path/to/the/image/logo.png';
var img = document.getElementById('logo').getElementsByTagName('img')[0];
if (img && img.getAttribute('src').indexOf(path) > -1) {
img.style.visibility = 'hidden';
}
}
if (window.addEventListener) {
window.addEventListener('load', hideImage, false);
} else if (window.attachEvent) { // for older IE8-6 compatibility
window.attachEvent('onload', hideImage);
}
JSFiddle
You can try this:-
$('img[src="path/to/the/image/logo.png"]').css("display","none");
or try this:-
this.style.display = "none";
getElementsByClassName('wrapper') is an array, which is why you have to access the src-attribute of the first element - at least in your case.
if (document.getElementById('logo').getElementsByClassName('wrapper')[0].src=="path/to/the/image/logo.png")
You have to make sure you have a link to jquery library in your header using this code
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
You could diplay:none in css if you wanted it not to render on the screen, just pass the image source into the function
function hideImage(imageSrc) {
$('img[src=" + imageSrc + "]').css("display","none");
}
and turn it back on using
$('img[src="path/to/the/image/logo.png"]').css("display","block");
html head:
<script type="text/javascript" language="JavaScript">
function getStyle() {
var temp = document.getElementById("cont").style.display;
return temp;
}
function switch01() {
var current = getStyle();
if (current == "none") {
document.getElementById("cont").style.display = "block";
}
else {
document.getElementById("cont").style.display = "none";
}
}
</script>
body:
CONTENT
CSS:
#cont{
display: none;
}
After loading the page - first click doesn't work. After the first click - everything works.
Also, How could I show/hide the div slowly (with sliding effect, not momentally) ?
The value you get for the first time is "undefined".
You can:
1) Set the value via javascript when page loads;
document.getElementById("cont").style.display = "none";
or
2) decode "undefined" value to none, because you know that at first the value will be none;
var temp = document.getElementById("cont").style.display;
if (temp == "undefined")
temp = "none";
return temp;
both pretty ugly solutions, but they work.
If it must be inline you need to do this DEMO
CONTENT
and this (reversing the test for none to be a test for not block)
<script type="text/javascript" language="JavaScript">
function switch01(objId) {
var current = document.getElementById(objId).style.display;
document.getElementById(objId).style.display=(current!="block")?"block":"none";
return false
}
</script>
The above ANSWERS your question
UPDATE: Since it seems you would like jQuery instead, here is how you need to code that - notice the return false which Michal missed.
CONTENT
$(function() { // wait for the page to load
$('#toggle').on("click",function(e) { // when link clicked
$('#cont').slideToggle(); // slide open or closed
return false; // or e.preventDefault(); // stop the click executing the href
});
});
If you want the slide effect, my recommendation is using jQuery:
$('#toggle').click(function() {
$('#cont').slideToggle();
});
See this DEMO.
For changing the sliding speed and more information see documentation.
For hiding the div.. you can take a look at
$('cont').hide(); function.
More relevant Information is available here :
http://api.jquery.com/hide/
http://api.jquery.com/show/
And for sliding effect Jquery is top notch in this department. You just have to pass the argument as given below.. and it does the work.
$("cont").click(function () {
$(this).hide("slide", { direction: "down" }, 1000);
});
FYI : http://docs.jquery.com/UI/Effects/Slide