Html
<div id="greenn31"></div>
css
#greenn31{
background-color:#093;
float: left;
height: 25px;
width: 25px;
margin-left: 544px;
margin-top: 51px;
position:absolute;
visibility:hidden;
}
Javascript
if (!$("#greenn31").css('visibility') === 'hidden') {
alert (source3);
document.getElementById("greenn31").style.visibility = "visible";
source3 = source3 - node31;
}
How i could check the visibility of div green31?
Thanks for your interest!
If you're already mixing plain JS with jQuery, I would suggest switching to plain JS :)
var el = document.getElementById('greenn31');
var style = window.getComputedStyle(el);
if (style.visibility === 'hidden') {
el.style.visibility = 'visible';
}
https://jsfiddle.net/zo2mbys4/
Your code work fine check the Example Fiddle.
I'll just suggest to use display instead of visibility it's more efficient when you want to hide elements (see the difference below) then you could use jQuery function is() with selector :visible.
display attribute with none value will hide the element and hide also the space allocated for this element in the page.
visibility attribute with hidden will hide the element but space that is allocated for it still on the page.
Hope this helps.
if ($("#greenn31").is(':visible')) {
alert ("visible");
}else{
alert ("hidden");
}
#greenn31{
background-color:#093;
float: left;
height: 25px;
width: 25px;
margin-left: 544px;
margin-top: 51px;
position:absolute;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="greenn31"></div>
You can try with below code:
if ($("#greenn31").css('visibility') === 'hidden') {
$("#greenn31").css({'visibility': 'visible'});
}
Related
I'm using javascript, so that when a user presses a button, a div will appear/disappear by changing the visibility property of the div. It works when the div is hidden and I want it to appear. However, when I presses the button again, it does not become hidden as it should.
document.getElementById("SmileyButton").addEventListener("click", getSmileys);
function getSmileys() {
var button = document.getElementById("SmileyDiv").style.visibility = 'visible';
// document.getElementById("SmileyDiv").style.visibility = 'visible';
if (button.visibility == 'hidden') {
button.visibility = 'visible'
} else {
button.visibility = 'hidden'
}
}
.enterPostBackground {
background-color: gainsboro;
width: 400px;
height: 50px;
}
#SmileyDiv {
height: 80px;
width: 160px;
background-color: grey;
overflow: scroll;
visibility: hidden;
}
<br>
<br>
<div id="SmileyDiv"></div>
<div class="enterPostBackground">
<button class="test" id="SmileyButton" style="font-size: 30px;float:left; " type="button" onclick="getSmileys()">😃</button>
</div>
This may solve your problem.
Changes I did,
I removed the onclick from the button. You don't need it as long as you have registered the click event in the JavaScript side.
I fixed your HTML as you had incorrect markup. _(You forgot to close the <script> tag, as well you forgot to close the second div tag.
I change the logic of your script to make it more performant.
<!DOCTYPE html>
<html>
<head>
<style>
.enterPostBackground {
background-color: gainsboro;
width: 400px;
height: 50px;
}
#SmileyDiv {
height: 80px;
width: 160px;
background-color: grey;
overflow: scroll;
visibility: hidden;
}
</style>
</head>
<body>
<br>
<br>
<div id="SmileyDiv"></div>
<div class="enterPostBackground">
<button
class="test"
id="SmileyButton"
style="font-size: 30px;float:left;"
type="button"
>😃</button>
</div>
</body>
</html>
<script>
// I get the SmileyDiv here. This is because it runs only once, and makes
// your script more performant.
var button = document.getElementById("SmileyDiv");
document.getElementById("SmileyButton").addEventListener("click", getSmileys);
// I set the initial visibility status here
button.style.visibility = 'visible';
function getSmileys() {
// You had forgot to add the `.style` in the button property. That's
// why the button didn't worked properly.
if (button.style.visibility === 'hidden') {
button.style.visibility = 'visible'
} else {
button.style.visibility = 'hidden'
}
}
</script>
There are a couple of problems there.
You're assigning the result of document.getElementById("SmileyDiv").style.visibility = 'visible'; to button. The result of an assignment expression is the value that was assigned, so button will be "visible".
Then you're trying to use a visibility property on button, but strings don't have that property. You probably meant to assign the result of document.getElementById("SmileyDiv") to button, but even then, you'd need button.style.visibility, not just button.visibility.
The style property only reflects the element's directly-assigned style information, not anything applied to it by CSS. Your div doesn't have visibility: xxx in its style attribute, it inherits it via CSS. You need to use getComputedStyle to get the computed style of the div.
You're using addEventListener and an onclick, so your function is getting called twice. Just use addEventListener.
button is an odd variable name for a div. :-)
See comments:
document.getElementById("SmileyButton").addEventListener("click", getSmileys);
function getSmileys() {
// It's a div, not a button
var div = document.getElementById("SmileyDiv");
// ** Get the *computed* style of the div
var style = getComputedStyle(div);
if (style.visibility !== 'hidden') {
div.style.visibility = 'hidden'
} else {
div.style.visibility = 'visible'
}
}
.enterPostBackground {
background-color: gainsboro;
width: 400px;
height: 50px;
}
#SmileyDiv {
height: 80px;
width: 160px;
background-color: grey;
overflow: scroll;
visibility: hidden;
}
<br>
<br>
<div id="SmileyDiv"></div>
<div class="enterPostBackground">
<button class="test" id="SmileyButton" style="font-size: 30px;float:left; " type="button">😃</button>
</div>
You are checking for button.visibility. Your button does not have a visibility attribute. You should check for button.style.visibility. You are also assigning the click listener twice, once in JS and the other in your HTML. This would cause the hide/show process to be reversed everytime.
var button = document.getElementById("SmileyButton");
button.addEventListener("click", getSmileys);
function getSmileys() {
var smileyDiv = document.getElementById("SmileyDiv");
if(smileyDiv.style.visibility == 'hidden') {
smileyDiv.style.visibility = 'visible'
} else {
smileyDiv.style.visibility = 'hidden'
}
}
.enterPostBackground {
background-color: gainsboro;
width: 400px;
height: 50px;
}
#SmileyDiv {
height: 80px;
width: 160px;
background-color: grey;
overflow: scroll;
}
<br>
<br>
<div id="SmileyDiv"></div>
<div class="enterPostBackground">
<button class="test" id="SmileyButton" style="font-size: 30px;float:left;visibility:hidden" type="button">😃</button>
</div>
First of all, no, I'm not going to use jQuery.
So, I have this project I'm working on, and I want to do a slide toggle element. Everything is nice and good until I press the button really fast. Then the borders dissapear and the element has reached its final height(500 px in this case).
Perhaps my explanation wasn't that accurate, but I'll give you the code.
var div = document.getElementById('div');
var btn = document.getElementById('button');
function clickFunction(){
if(div.style.height === "0px") {
div.style.height = "500px";
div.style.borderStyle = "solid";
} else {
div.style.height = "0px";
setTimeout(function(){div.style.borderStyle = "none";}, 500);
}
}
btn.onclick = clickFunction;
div#div {
transition: 500ms ease;
width: 100px;
height: 200px;
margin-top: 20px;
}
.container {
width: 120px;
background-color: red;
padding: 8px;
}
<button id="button">
Press me
</button>
<div class="container">
<div id="div" style="border-style: none; border-width: 2px; height: 0px;"></div>
</div>
I also tried using clearTimeout() but it wasn't working. Yes, I set setTimeout as a variable, but it doesn't do anything.
Any ideas? Cheers.
Your current code uses combinations of inline styles and an id selector in conjunction with the inline style being updated by JavaScript in an if/then as well as with a setTimeout() callback. All of these instructions, coupled with the speed at which the client can repaint the UI are all contributing to the problem.
By cleaning up the approach to toggling the styles and how the styles are applied in the first place, there is much less potential conflict in instructions and timing.
Remove all the static styles from the HTML and set up CSS classes for the normal and expanded states of the element. Then just use the element.classList.toggle() method to seamlessly toggle the use of the expanded class. No timers needed.
var div = document.getElementById('div');
var btn = document.getElementById('button');
btn.addEventListener("click", function(){
div.classList.toggle("expanded");
});
.container {
width: 120px;
background-color: red;
padding: 8px;
}
.normal {
transition: 500ms ease;
width: 100px;
margin-top: 20px;
border:0px solid black;
height: 0px;
}
.expanded {
height: 200px;
border:2px solid black;
}
<button id="button">Press me</button>
<div class="container">
<div id="div" class="normal"></div>
</div>
NOTE:
Be careful when setting up CSS selectors that are id based because they become very difficult to override later. I'm not saying never use them, but more often than not, CSS classes provided the most flexible solutions and help to avoid gobs and gobs of inline styles.
Looking to achieve a dimmed-background effect by dimming (or changing the opacity of) all elements on the page but one; I've been trying out :not() as well as some jQuery selectors to try and exclude all but the element, but to no avail. Does anyone know of the best way to do this with SASS/Compass or, failing that, jQuery?
So far, I've tried things like:
.opacityFade:not(.classToExclude) {
STYLES HERE
}
or
$('controlElement').click(function(){
$(body).not('desiredTargetToExclude').toggleClass('classThatFadesStuffOut');
});
Ideally, I'd like to avoid having to write more JS and better separate responsibilities,but there might not be a way to do that. Little new to Front-End development, so I'm not aware of a best way to go about doing this; thanks!!
You can achieve this by placing a blanket over all elements, and then pulling the element you want to display out of the DOM order with the z-index property
.item {
background: #f00;
width: 100px;
height: 100px;
display: inline-block;
margin: 10px;
}
.item.selected {
position: relative;
z-index: 200
}
.blanket {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0.5;
z-index: 100;
}
Note that the element needs to have a non static position.
See http://jsfiddle.net/cyberdash/fCMaT/
you could add another class to the non-dimmed/active div. I'll put together a fiddle.
http://jsfiddle.net/nqT7V/
In Jquery:
$(".item").click(function(){
var $this = $(this);
$this.parent().addClass("dimmed");
$this.parent().find(".item").removeClass("active");
$this.addClass("active");
});
$(".holder").click(function(e){
if (e.target != this) return;
var $this = $(this);
if ($this.hasClass("dimmed")){
$this
.removeClass("dimmed")
.find(".item").removeClass("active");
}
});
I am trying to work out how to show more divs when hovering over one div.
I know how to show changes of the same div when hovering over it but how can I show more divs when hovering over one div?
Take this as an example:
http://jsfiddle.net/j4LFD/
How can I make it so when you hover over the box another box appears next to it?
Im not sure if this can be done with css or needs javascript?
Thanks!
James
You can do it with css like this:
.box , .appear{
background: #151515;
height: 100px;
width: 100px;
float:left;
}
.appear{
background:red;
display:none
}
.box:hover{
background: #e6e6e6;
height: 100px;
width: 100px;
}
.box:hover + .appear {
display:block;
}
Check this example http://jsfiddle.net/j4LFD/1/
To my knowledge it's not possible without Javascript, and I'd recommend using jQuery because it will make your life a lot easier. If you just want to show a div then you can do something similar to
<div id="div1">First Div</div>
<div id="div2" style="display:none">Second Div</div>
Then in the javascript
$('#div1').mouseover(function(){
$('#div2').show();
})
$('#div1').mouseout(function(){
$('#div2').hide();
})
If you actually want to add it dive on hover then you can use the jquery .append() function (http://api.jquery.com/append/)
Edit: Ok seeing sandeep's answer it clearly is possible in CSS, but still, this is how you'd do it in JS :-)
CSS solution: Use a parent/container div.
http://jsfiddle.net/samliew/j4LFD/4/
You can also do this with vanilla Javascript (no JQuery) and without having your elements be adjacent siblings. Example fiddle: http://jsfiddle.net/3nxfG/
html/js:
<div id="box1" class="box"></div>
<div id="box2" class="box hidden"></div>
<script type="text/javascript">
var box1 = document.getElementById('box1');
box1.onmouseover = function() {
var box2 = document.getElementById('box2');
box2.style.visibility = 'visible';
};
box1.onmouseout = function() {
var box2 = document.getElementById('box2');
box2.style.visibility = 'hidden';
};
</script>
css:
.box {
background: #151515;
height: 100px;
width: 100px;
float: left;
}
.hidden {
visibility: hidden;
}
You can fake it, use the box to hide the second box and the border to be the box,http://jsfiddle.net/j4LFD/3/
Some code when I call a showhide method in html is not working correctly. The method shows then hides some html content on this webpage, however, the html or css is not functioning correctly. For example, when the page is loaded in a browser, the space where the div will be shown is just empty space, when there shouldn't be space at all, but when the div is shown it just fills that space. The I think it could be something to do with the css, however I am not to sure. Here is the CSS id I am using to show and hide.
#showAndHide {
text-align: justify;
height: auto;
width: 700px;
margin: auto;
position: relative;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 20px;
padding-right: 10px;
visibility: hidden;
}
and here is a small sample of the html that this is being applied to.
<div id="showAndHide">
<div id="physicalAdress">
<div class="h4">
<h4> What is your physical address? </h4>
</div>
<p> Property name (if you have one) </p>
<input type="text" name="propertyName" /><br/>
that html is within the showandhide div, then within a user input div which is:
.userinput {
text-align: justify;
height: auto;
width: 700px;
margin: auto;
position: relative;
border-collapse: collapse;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 20px;
padding-right: 10px;
border-right-style: solid;
border-left-style: solid;
}
here is the Javascript method.
function showHideDiv()
{
var divstyle = new String();
divstyle = document.getElementById("showAndHide").style.visibility;
if(document.getElementById("yesPrint").checked == true)
{
document.getElementById("showAndHide").style.visibility = "visible";
}
if(document.getElementById("noPrint").checked == true)
{
document.getElementById("showAndHide").style.visibility = "hidden";
}
}
Basically when I run the page, and show the content the styling is becoming skewed and the positioning of the html that is not with the show and hide content is also becoming skewed.
Any ideas/help would be appreciated.
use display:none instead of visibility: hidden;.
visibility: hidden; reserves space for element
Change visibility:hidden to display:none to prevent the element from taking up space when hidden.
You may need to change your JavaScript slightly, but I can't say for sure as you haven't posted it, but you're going to need something like this:
element.style.display = "block"; //Show the element
function toggle_show(id) {
var el = document.getElementById(id);
if (el && el.style) {
el.style.display = el.style.display == 'none' ? 'block' : 'none';
}
}
http://webdesign.about.com/od/css/f/blfaqhidden.htm
Quoting webdesign:
"visibility: hidden hides the element, but it still takes up space in the layout.
display: none removes the element completely from the document. It does not take up any space, even though the HTML for it is still in the source code."