I have a div and I want to be both inline-block and display none, but I have to choose one of them.
My HTML:
.like_user_wrapper{
margin-top:20px;
padding:5px;
height:55px;
box-shadow:1px 1px 10px #f0f0f0;
background:white;
display:inline-block;
display:none;
}
It's not a good idea to have the div just hide using JavaScript
Just use visibility: hidden;
#like_user_wrapper{
margin-top:20px;
padding:5px;
height:55px;
box-shadow:1px 1px 10px #f0f0f0;
background:white;
display:inline-block;
visibility: hidden;
}
Note this is using a custom ID (#...) , not a class (....)
If you want is to become visible at some point, you can use this JavaScript property with that ID:
document.getElementById('like_user_wrapper').style.visibility='visible';
This can be included in a onmouseover="", or a javascript function etc, so it appears when you want it to. This can be implemented in html like this:
<!DOCTYPE HTML>
<html>
<head>
<style>
#like_user_wrapper {
margin-top:20px;
padding:5px;
height:55px;
box-shadow:1px 1px 10px #f0f0f0;
background:white;
display:inline-block;
visibility: hidden;
}
#hover {
width: 80px;
height: 50px;
background-color: red;
}
</style>
</head>
<body style="background-color:blue;">
<div id="like_user_wrapper">Like User Wrapper</div>
<br><br>
<div id="hover" onmouseover="document.getElementById('like_user_wrapper').style.visibility='visible';" onmouseout="document.getElementById('like_user_wrapper').style.visibility='hidden';">Hover over me</div>
</body>
</html>
Help page on the visibility CSS property here
N.B. In most browsers, by default a DIV has the display property block, so you might not need inline-block - you could just wrap it in a <div> with that property anyway.
If you are trying to hide and show the element using jQuery, to display it back avoid using jQuery.show().
Instead do $('.like_user_wrapper').css({'display': 'inline-block'}); to display the element.
On the other hand, to hide it is ok to just do $('.like_user_wrapper').hide();
And remove the display: inline-block from your css.
Related
I have a project that contains a bordered div where I would like to dynamically display some other div elements that represent visualized data points. I have no trouble creating the elements and positioning them using javascript, but I'm now trying to keep them confined within the "display div." I've looked into some clipping and masking ideas out there, but I'm not sure it's applicable (a lot of them deal with actual images - here, I'm not). Below is a simplified representation of the page I'm building:
CSS:
#info {
width:100px;
height:100px;
float:left;
display:inline-block;
border: 2px solid blue;
}
#display {
width:400px;
height:300px;
display:inline-block;
border: 1px solid black;
}
#data {
position:absolute;
width:100px;
height:100px;
border-radius:100px;
background:green;
left:70px;
top:30px;
}
HTML:
Div Window Test<br>
<br>
<div id="info">Info Sidebar<br></div>
<div id="display">
<div id="data"></div>
</div>
As you can see, there is a black-bordered display area, and a floating green circular-shaped element to represent a data point drawn inside the display. As shown, the data point div is partly outside the display. There will be many, many data points of varying size AND location - some well inside the display, and some outside (and even some past the browser window). What I would like to is somehow constrict/mask the data points to only show what's rendered within the display div boundaries. Is there a simple way to do this using CSS or a mask?
Is this what you look for?
In below sample I added position: relative; to have your absolute positioned children relate to the #display element and overflow: hidden; to cut off any overflowed parts.
#info {
width:100px;
height:100px;
float:left;
display:inline-block;
border: 2px solid blue;
}
#display {
width:400px;
height:300px;
display:inline-block;
border: 1px solid black;
position: relative; /* added */
overflow: hidden; /* added */
}
#data {
position:absolute;
width:100px;
height:100px;
border-radius:100px;
background:green;
left:70px;
top:-30px;
}
Div Window Test<br>
<br>
<div id="info">Info Sidebar<br></div>
<div id="display">
<div id="data"></div>
</div>
Let's consider there is a style sheet in an html page as shown below
#main {
display: block;
width: 500px;
}
#content {
border: 1px solid #ccc;
}
now I have a situation where I have to update the CSS rule of #main meaning I have to add some css attributes like color, background etc.
So the Style sheet in my html page should be updated like shown below:
#main {
display: block;
width: 500px;
color: #333;
background: #fff;
}
#content {
border: 1px solid #ccc;
}
I can use jQuery css to add CSS rules as shown below
$('#main').css('background','blue');
//but this is not adding #main in <style></style>
//output of above jquery code is:
//<div id='main' style="background: blue"></div>
What I need is for it to add css attributes to a rule in the style sheet (i.e., #main in <style></style>)
I am developing a code editor which is why I face such a problem.
it took me a long time but finally here we go: DEMO
if we click on the #main element the style tag will get changed using the function that we just defined, so if we get the text of the script tag before the function it will be:
<style>#main {
display: block;
width: 500px;
height:200px;
background-color:#000;
}
#content {
border: 1px solid #ccc;
}
</style>
and then after the function is called it will be:
<style>#main {
display: block;
width: 500px;
height:200px;
background-color:#000;
color:#FFF;
}
#content {
border: 1px solid #ccc;
}
</style>
The Function:
//*styleElem* is the target style tag
//*elemToChange* is the target element that we want to change inside the style tag
//*cssRule* is the new CSS rule that we want to add to the target element
function addCSSToStyleTag(styleElem,elemToChange,cssRule){
var oldStyle=styleElem.text(),
theElement=elemToChange,
position=oldStyle.indexOf(theElement),
cssToBeAdded=cssRule,
closingBracketIndex=oldStyle.indexOf('}',position)-1,
newStyle=oldStyle.substr(0,closingBracketIndex)+cssToBeAdded+oldStyle.substr(closingBracketIndex,oldStyle.length);
styleElem.text(newStyle);
};
$('#main').one('click',function(){
addCSSToStyleTag($('style'),'#main','color:#FFF;');
});
I think you cannot explicitly catch css rules inside the current style, but as a work around you can append another style to the head with the new rules, it will override the existing rules as follows :
var newCss = "<style>#main{
display:block;
width:500px;
color: #333;
background:#fff;
}
#content{
border:1px solid #ccc;
} </style>";
$("head").append(newCss);
Try this
var style="#main{display: block;
width: 500px;
color: #333;
background: #fff;"};
$('style').append(style);
This is assumed that you have only one <style> tag in page
You can apply hardcore css to perticular div...Like this
$('#main').css("background":"blue");
<!DOCTYPE html>
<html>
<head>
<style>
.main_box{
width:400px;
border:1px solid #000000;
}
.option-heading{
width:292px;
border:1px solid #000000;
background-color:#FFCC00;
overflow:auto;
padding:4px
}
.option-content{
width:300px;
height:300px;
border:1px solid #000000;
background-color:#8AC007;
}
.arrow-up{width:25px;float:right;}
.arrow-down{width:25px;float:right;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".arrow-up").hide();
$(".option-heading").click(function(){
$(this).next(".option-content").slideToggle(500);
$(this).find(".arrow-up, .arrow-down").toggle();
});
});
</script>
</head>
<body>
<div class="main_box">
<div class="option-heading">
<div class="arrow-up"><img src="Untitled.png"></div>
<div class="arrow-down"><img src="Untitledone.png"></div>
</div>
<div class="option-content"></div>
</div>
</body>
</html>
When I click on "option-heading" div, "option-content" div slides up but also the height of "main_box" div changes. I want to keep the height of "main_box" div same after the "option-content" div slides up.
Does anyone know how to do it??
you can do it easily, you just have to set min-height to whatever sum of height of .option-heading, .option-content and border size so its 336px
so update styling of .main_box
.main_box {
width: 400px;
border: 1px solid #000000;
min-height: 336px;
}
Make use of the min-height property. It allows you to set the minimal height of a given element.
.main_box {
min-height: 300px;
}
.main_box{
min-height:300px;
height:auto;
}
use height:auto
Is it possible to switch the display:block part of #about{ with display:none part of #downloads with a OnClick?
#about {
position:relative;
-moz-border-radius: 5px;
border-radius: 5px;
width:800px;
height:450px;
margin-left:50px;
margin-right:50px;
border:solid 2px #000000;
background-color:#448efc;
margin-bottom:5px;
display:block
}
#downloads {
position:relative;
-moz-border-radius: 5px;
border-radius: 5px;
width:800px;
height:450px;
margin-left:50px;
margin-right:50px;
border:solid 2px #000000;
background-color:#448efc;
margin-bottom:5px;
display:none
}
heres my OnClick Code<a href="#downloads" onclick="somthing?"> im not sure if its possible do any of you know how?
You can change the css using jquery.
<a href="#downloads" onclick="$('#about').css("display", "none");">
I would suggest something like this:
#about, #downloads {
/* all of the CSS rules EXCEPT display here */
}
.hidden {display:none}
Then your HTML should be:
<div id="about">...</div>
<div id="downlaods" class="hidden">...</div>
Now your link can be:
<a href="#downloads" onClick="document.getElementById('about').className = 'hidden';
document.getElementById('downloads').className = '';">Downloads</a>
It seems you are actually looking for jQuery toggle(). because it makes no sense keeping onclick event on the element which has already display: none.
<div id="about" onclick="$('#downloads').toggle()"></div>
<div id="downloads" onclick="$('#about').toggle()"></div>
Working Fiddle
Seems like you want to hide #about:
$('#downloads').click(function() {
$('#about').hide();
});
With this, there's no need to add onclick attributes.
I had to change my quotesmarks, code below fully works for me....
<form action="uploadprofileaccept.php"
class="dropzone" onclick="$('#imageform').css('display', 'none');">
</form>
I have a series of square divs with text in them, and I need to draw a line across those divs, over the text. Z-Index is not an option. Neither is <strike>, because it needs to extend across the entire div, not just the text.
What I need is for it to extend across the entire div, but to be ON TOP of the text, as if on a different layer, and I am trying to determine if it is possible without Z-Index.
With the help of :after - DEMO
div {
position: relative;
}
div:after {
position: absolute;
left: 0;
top: 50%;
height: 1px;
background: #c00;
content: "";
width: 100%;
display: block;
}
Link To Fiddle
.wrapper {
position:relative;
width:110px;
}
.square {
width:20px;
height:20px;
border:2px solid #000;
display:inline-block;
text-align:center;
}
.strike {
position:absolute;
width:100%;
height:2px;
background:black;
top:11px;
left:0px;
}
what about a background image as a solution?
I mean someCSS Code like:
.DIV.squarestroke {
background: url(img_with-line.gif) repeat;
}
If you can't use text-decoration:line-through it's likely you have padding or margin on your div which is why the line doesn't go all the way across. This snippet will draw a line the width of the div and through the text preserving your padding or margins.
<div style="border:solid 2px black; padding : 100px">
<div class="strike-through" style="border-bottom : solid 1px red; margin-bottom : -12px;"></div>
<div style="text-align : center; padding-left:50px; padding-right:50px; border : solid 1px green;">Lorem Ipsum Voluptatem</div>
</div>
A good old fashion hr might do it:
<hr style="position:absolute; width:50px; top:5px; left:5px;" />