HTML/CSS/JS: Simple div not displaying - javascript

I just want to understand why the #div element is not appearing anyway at the simple following code:
<!DOCTYPE html>
<html>
<body>
<div id="div"></div>
<style>
#div{
color:black;
width:50px;
height:50px;
}
</style>
<script>
function algo(){
alert("ALGO");
}
document.querySelector("#div").onclick = algo;
</script>
</body>
</html>
Here's the fiddle:
http://jsfiddle.net/26pkt2y6/

color would mean the foreground color. Since there's no text to show, it appears that the div isn't displaying. Set the background to see the div.
function algo() {
alert("ALGO");
}
document.querySelector("#div").onclick = algo;
#div {
color: black;
width: 50px;
height: 50px;
background: #000;
}
<div id="div"></div>

Because it's empty, try to add some content between the div tags, or if you want to have a block like a button you have to change the CSS to:
<style>
#div{
background-color:black;
width:50px;
height:50px;
}
</style>

div{
color:black; change this to background-color:black;
width:50px;
height:50px;
}

Use background-color for the color

Your div is empty, set a text or styling with css, you should used background-color instead of color:
function algo(){
alert("ALGO");
}
document.querySelector("#div").onclick = algo;
#div{
background-color:black;
width:50px;
height:50px;
}
<div id="div"></div>

Related

jQuery toggle() with dblclick() changing display to none

I have created a div that when I double click it, it will expand the entire contents of the div to full screen. I now want to be able to toggle this when double clicking so it goes back to original size.
The code was working to increase the div size, but once adding the toggle() function, it now changes the display to none when I double click the first time. I assume I am just using toggle incorrectly, but am unable to figure out how to make this work.
HTML
<div class="popout-box">
<button id="btnShow">Wallboard</button>
<div class='menu' style='display: none'>
<div id="framewrap">
<button id="btnHide">Close</button><br/>
<iframe id="frame" src="https://url.com">
</iframe>
</div>
</div>
</div>
</div>
jQUery
$(document).ready(function(){
$("#framewrap").dblclick(function(){
$("#framewrap").toggle().css({"width":"100%","height":"100%","position":"fixed","left":"0px","right":"0px","top":"5px","bottom":"0px"});
});
});
CSS
#framewrap {
background-color:#1886c5;
overflow:hidden;
box-shadow: 0px 2px 10px #333;
}
#frame {
width:100%;
height:100%;
background-color:#1886c5;
}
.popout-box {
width: 400px;
height: 300px;
}
.menu {
position: absolute;
right: 15px;
}
I believe this is what you're after:
$(document).ready(function(){
$("#framewrap").dblclick(function(){
$(this).toggleClass('newClass');
});
});
CSS:
.newClass
{
width:100%,
height:100%,
...
...
}
jQuery
$(document).ready(function() {
$("#framewrap").on('dblclick', function() {
$("#framewrap").toggleClass('fixed');
});
});
CSS
.fixed {
width:100%;
height:100%;
position:fixed;
left:0;
right:0;
top:5px;
bottom:0
}

Change css3 icons color on mouse over with jquery

I have this ok css3 icon created with css.
http://jsfiddle.net/5c9gN/
JS:
$('.ok').mouseenter(function(){
$(this).parent().find('.ok:after, .ok:before').css('background','#ccc');
$(this).css('background','#33CC33');
});
$('.ok').mouseleave(function(){
$(this).parent().find('.ok:after, .ok:before').css('background','#ccc');
$(this).css('background','#ccc');
});
CSS:
.ok{height:40px; width:40px; display:block; position:relative; margin-left: auto; margin-right: auto;}
.ok:after, .ok:before{content:''; height:32px; width:10px; display:block; background: #ccc; position:absolute; top:6px; left:18px; transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);-ms-transform:rotate(45deg);}
.ok:before{height:16px; transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg); top:18px; left:6px;}
And I'm having a little issue while trying to change the color of the icon. It always changes the background color not the icon.
Could anyone help me?
Thanks
Using only CSS:
DEMO
.ok:hover:after, .ok:hover:before {
background: #33CC33;
}
Add this css
.ok.mouseover:after, .ok.mouseover:before{
background: #33CC33;
}
and update your JS code to this
$('.ok').mouseenter(function(){
$(this).addClass('mouseover');
});
$('.ok').mouseleave(function(){
$(this).removeClass('mouseover');
});

container width much larger then content

I have a bunch of content that floats left in a container, and I'd like for the container to hug the content, but for some reason it's much wider then the content and I have no idea why. I have it set up in a fiddle here http://jsfiddle.net/vG8NY/6/ the red and blue bordered containers should hug the right edge of the circle.
The code is very simple and is as follows:
HTML:
<div class="hot_spot-container">
<div class="content-spot">
<img class="hotspot-cir" src="http://www.klossal.com/sixred/discovery/images/hotspot-left.png" />
<div class="hotspot-content"></div>
<img class="hotspot-cir" src="http://www.klossal.com/sixred/discovery/images/hotspot-right.png" />
<br class="clear-fix" />
</div>
</div>
CSS:
.hot_spot-container {border:1px solid blue;
position:absolute;
}
.content-spot {
border:1px solid red;
display:inline-block;
}
.hotspot-cir {
float:left;
height:100%;
width:auto;
}
.hotspot-content {
float:left;
background:#ec6e47;
}
.clear-fix {
clear:both;
}
JS
$(".content-spot").css({
height:$(window).height() * ".2"
});
try this:
$(".content-spot").css({
height:$(window).height() * ".2",
width:$(window).height() * ".2"
});
when you change height of content-spot it's width still fixed and need to get resize too.
DEMO
you can use this code too:
$(".hotspot-cir").css({
height:$(window).height() * ".2"
});
DEMO
You must define the width for the element to which you have set the position: absolute; so you should use something like this:
.hot_spot-container {border:1px solid blue;
position:absolute;
/* any width you want or if you don't know the width then define auto.*/
width: 45px;
}
if you make
.hot_spot-container {display:inline-block}
instead of it having position:absolute it does what you want it to. if you want position absolute you need to give it a width
Try this
I removed your javascript and made this changes
.content-spot {
border:1px solid red;
display:inline-block;
width: auto;
}
.hot_spot-container {
border:1px solid blue;
position:absolute;
display: inline-block;
}

CSS Global Class Issue with Child

i have a global class for an html
<div class="wrapper">
<div class="content"></div>
</div>
and the CSS is
.div { width:auto; display:block }
.content { width:100px; height:50px; }
On the .content div, i do not need "display:block" class. But Its applying on Runtime.
i Have given dispay:inherit; but it doesn't work. Is there any Other Way for Removing the Display Style ?
.div { width:auto; display:block }
this might not be working....for the above provided html cos there is not div named class
what you can do is
.content { width:100px; height:50px; display:inline}
.content { width:100px; height:50px; display: inline; }
or another display property
You can just do:
.content { width:100px; height:50px; display:inline }
//or display:none or whatever your standard default is
inline is what the value is by default, see MDN Ref.

Dynamically changing height of div element based on content

I'm working on a Facebook-like toolbar for my website.
There's a part of the toolbar where a user can click to see which favorite members of theirs are online.
I'm trying to figure out how to get the div element that pops up to grow based on the content that the AJAX call puts in there.
For example, when the user clicks "Favorites Online (4)", I show the pop up div element with a fixed height and "Loading...". Once the content loads, I'd like to size the height of the div element based on what content was returned.
I can do it by calculating the height of each element * the number of elements but that's not very elegant at all.
Is there a way to do this with JavaScript or CSS? (note: using JQuery as well).
Thanks.
JavaScript:
function favoritesOnlineClick()
{
$('#favoritesOnlinePopUp').toggle();
$('#onlineStatusPopUp').hide();
if ($('#favoritesOnlinePopUp').css('display') == 'block') { loadFavoritesOnlineListing(); }
}
CSS and HTML:
#toolbar
{
background:url('/_assets/img/toolbar.gif') repeat-x;
height:25px;
position:fixed;
bottom:0px;
width:100%;
left:0px;
z-index:100;
font-size:0.8em;
}
#toolbar #popUpTitleBar
{
background:#606060;
height:18px;
border-bottom:1px solid #000000;
}
#toolbar #popUpTitle
{
float:left;
padding-left:4px;
}
#toolbar #popUpAction
{
float:right;
padding-right:4px;
}
#toolbar #popUpAction a
{
color:#f0f0f0;
font-weight:bold;
text-decoration:none;
}
#toolbar #popUpLoading
{
padding-top:6px;
}
#toolbar #favoritesOnline
{
float:left;
height:21px;
width:160px;
padding-top:4px;
border-right:1px solid #606060;
text-align:center;
}
#toolbar #favoritesOnline .favoritesOnlineIcon
{
padding-right:5px;
}
#toolbar #favoritesOnlinePopUp
{
display:block;
border:1px solid #000000;
width:191px;
background:#2b2b2b;
float:left;
position:absolute;
left:-1px;
top:-501px; /*auto;*/
height:500px;/*auto;*/
overflow:auto;
}
#toolbar #favoritesOnlineListing
{
font-size:12px;
}
<div id="toolbar">
<div id="favoritesOnline" style=" <?php if ($onlinestatus == -1) { echo "display:none;"; } ?> ">
<img class="favoritesOnlineIcon" src="/_assets/img/icons/favorite-small.gif" />Favorites Online (<span id="favoritesOnlineCount"><?php echo $favonlinecount; ?></span>)
<div id="favoritesOnlinePopUp">
<div id="popUpTitleBar">
<div id="popUpTitle">Favorites Online</div>
<div id="popUpAction">x</div>
</div>
<div id="favoritesOnlineListing">
<!-- Favorites online content goes here -->
</div>
</div>
</div>
</div>
Maybe you could remove the height property (make sure it's not set in the CSS) and let the DIV expand in height by itself.
Make it a float element and don't use a clearing element after it.
You should take out the CSS height:25px property in the toolbar, the contents will expand the container. Also, ID selector tags are unique and you can specify directly to them without having to reference the ancestor:
INCORRECT:
#toolbar #popUpAction { /*some css */ }
#toolbar #popUpAction a { /*some css */ }
CORRECT:
#popUpAction { /*some css */ }
#popUpAction a { /*some css */ }

Categories