Visit : to see my example: http://www.nycthirst.com/test-space/test-orig-best.html
Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
div#GHOLD { position: relative; width: 400px; height: 464px;
}
div.gname { position: absolute; top: 7px; left: 0px; height: 23px; text-align: center;
/*border: solid black 1px; padding-top: 4px;*/
z-index: 20;
}
div.bname { position: absolute; top: 3px; left: 0px; height: 27px; text-align: center;
padding-top: 4px;
/*border:solid black 1px;*/
z-index: 25;
}
div.ihold { position: absolute; top: 36px; left: 0px;
width: 400px; height: 360px; z-index: 10;
}
img.bgraph { border: none; width: 400px; height: 360px; z-index: 10; }
-->
</style>
<script type="text/javascript">
function graphShow(which)
{
var ghold = document.getElementById("GHOLD");
var gdivs = ghold.getElementsByTagName("DIV");
gdivs[0].className = gdivs[1].className = gdivs[2].className = "gname";
gdivs[which].className = "bname";
gdivs[3].style.zIndex = gdivs[4].style.zIndex = gdivs[5].style.zIndex = 10;
gdivs[which+3].style.zIndex = 15;
}
</script>
</head>
<body>
<div id="GHOLD">
<div class="bname" style="left: 39px; width: 77px; height: 135px; top: 35px;" onMouseOver="graphShow(1);"></div>
<div class="gname" style="left: 162px; width: 77px; height: 135px; top: 35px;" onMouseOver="graphShow(0);"></div>
<div class="gname" style="left: 280px; width: 77px; height: 135px; top: 35px;" onMouseOver="graphShow(2);"></div>
<div class="ihold" style="z-index: 15;">
<img class="bgraph" src="http://www.asme.org/wwwasmeorg/media/ASMEMedia/Events/Energy/energy_landing_page_drop1.png" alt="95 percent">
</div>
<div class="ihold">
<img class="bgraph" src="http://www.asme.org/wwwasmeorg/media/ASMEMedia/Events/Energy/energy_landing_page_drop2.png" alt="69 percent" style="z-index: 10;">
</div>
<div class="ihold">
<img class="bgraph" src="http://www.asme.org/wwwasmeorg/media/ASMEMedia/Events/Energy/energy_landing_page_drop3.png" alt="52 percent" style="z-index: 10;">
</div>
</div>
</body>
</html
>
So here is the deal the page code above works perfectly in firefox and chrome. It does not do a thing in IE. The idea is on a mouse over or over state the background image will change. IF there is an easier solution I would love to see it. I am a bit of a novice with Javascript.
IE doesn't seem to like passing mouse events to elements that look invisible to it. If you don't have a background or visible text on your trigger divs, the mouseover event just passes right through them.
You basically have to give the trigger divs a background, or content, that covers the area you want mouseovers to happen on. IE doesn't care about the content of the background, as long as it's there and isn't the color "transparent". You should even be able to get away with using a 1x1 transparent GIF as the background, as long as you tile it.
Related
I have a simple jQuery website, where there are four blocks, when you press a block, another block slides out of it. It all works, for the most part, however, i was wondering how i could get the block that slides out to move the other elements below it down.
$(document).ready(function() {
var height = 145;
var speed = 600;
$("#one").animate({
width: "100%",
height: height
}, speed, function() {
$("#two").animate({
width: "100%",
height: height
}, speed, function() {
$("#three").animate({
width: "100%",
height: height
}, speed, function() {
$("#four").animate({
width: "100%",
height: height
}, speed);
});
});
});
$("#one").click(function() {
$(".dropDown").not("#oneS").slideUp();
$("#oneS").slideToggle();
});
$("#two").click(function() {
$(".dropDown").not("#twoS").slideUp();
$("#twoS").slideToggle();
});
$("#three").click(function() {
$(".dropDown").not("#threeS").slideUp();
$("#threeS").slideToggle();
});
$("#four").click(function() {
$(".dropDown").not("#fourS").slideUp();
$("#fourS").slideToggle();
});
});
#charset "utf-8";
.selectors {
position: relative;
border-radius: 30px;
}
#one {
background-color: blue;
height: 400px;
width: 100px;
margin-bottom: 10px;
}
#two {
background-color: red;
height: 400px;
width: 100px;
margin-bottom: 10px;
}
#three {
background-color: yellow;
height: 400px;
width: 100px;
margin-bottom: 10px;
}
#four {
background-color: green;
height: 400px;
width: 100px;
}
.dropDown {
background-color: #E9E9E9;
height: 300px;
width: 100%;
position: absolute;
//overflow:auto;
border-radius: 10px;
z-index: 1;
}
#oneS {
display: none;
top: 150px;
}
#twoS {
display: none;
top: 150px;
}
#threeS {
display: none;
top: 150px;
}
#fourS {
display: none;
top: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jQuery.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div id="one" class="selectors">
<div id="oneS" class="dropDown"></div>
</div>
<div id="two" class="selectors">
<div id="twoS" class="dropDown"></div>
</div>
<div id="three" class="selectors">
<div id="threeS" class="dropDown"></div>
</div>
<div id="four" class="selectors">
<div id="fourS" class="dropDown"></div>
</div>
</body>
</html>
Four blocks:
Slid out block:
As you can see when the block is slid out, it covers over the red and yellow block. Instead i would like the sliding block to move the red and yellow block down the page, and out from under the sliding block.
There's a few things wrong.
The general issue is that you're fighting the natural behavior of the HTML since the .dropDown elements are children of the .selectors elements. You would get closer to your desired result if they were siblings.
Make them siblings and remove some troublesome CSS properties like position:absolute and top and you should get closer to your desired effect.
Here is a JSBin of a working demo: http://jsbin.com/titibununu/1/edit?html,css,js,output
Please give me a clue how to achieve that with pure css?
I need to make 2 divs side by side and I have some element that is adding to the one of that divs, but far below it's bottom. The page automatically resizes then, but these 2 divs heights stays unchanged. Is it possible to make them still fit whole page as it is described in the css, or the only solution is to specify their exact heights by script?
Or maybe there's another way to make such a layout with a div added by script?
Let me show it in the fiddle:
window.onload=run;
function run()
{
document.getElementById("b1").addEventListener("click", function()
{
var d=document.createElement("div");
d.id="dd";
d.style.top="2000px";
d.style.left="0";
d.style.width="50px";
d.style.height="20px";
d.appendChild(document.createTextNode("Test"));
document.getElementById("col2").appendChild(d);
});
}
html, body
{
height: 100%;
}
div#col1
{
background: #eee;
position: absolute;
top: 0;
bottom: 0;
left: 5rem;
width: 5rem;
text-align: center;
}
div#col2
{
background: #eff;
position: absolute;
top: 0;
bottom: 0;
left: 10rem;
right: 0;
}
div#dd
{
position: absolute;
background: #f99;
border: 2px solid red;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>
Test
</title>
</head>
<body>
<div id="col1">
<input type=button id="b1" value="+">
</div>
<div id="col2">
</div>
</body>
</html>
Thank you!
Short update: I just found, that neither html nor body heights were not updated after adding, but browser lets scroll to the newly added div. It's very strange behavior even for the css/html
I'm not sure exactly what you're aiming for, but maybe overflow: hidden is what you need? It will make it so the div won't expand to include that addition...
window.onload=run;
function run()
{
document.getElementById("b1").addEventListener("click", function()
{
var d=document.createElement("div");
d.id="dd";
d.style.top="2000px";
d.style.left="0";
d.style.width="50px";
d.style.height="20px";
d.appendChild(document.createTextNode("Test"));
document.getElementById("col2").appendChild(d);
});
}
html, body
{
height: 100%;
}
div#col1
{
background: #eee;
position: absolute;
top: 0;
bottom: 0;
left: 5rem;
width: 5rem;
text-align: center;
}
div#col2
{
background: #eff;
position: absolute;
top: 0;
bottom: 0;
left: 10rem;
right: 0;
overflow: hidden;
}
div#dd
{
position: absolute;
background: #f99;
border: 2px solid red;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>
Test
</title>
</head>
<body>
<div id="col1">
<input type=button id="b1" value="+">
</div>
<div id="col2">
</div>
</body>
</html>
If you don't need scrolling - try position:fixed instead of absolute.
You don't need all this CSS, all you need to do is to set their height in CSS explicitely:
first to height: 100vh
after you add new element, to height: calc(100vh + X) where X is distance from initial divs bottom to bottom of the added element.
EDIT: Another solution with removed position: absolute:
window.onload=run;
function run()
{
document.getElementById("b1").addEventListener("click", function()
{
var d=document.createElement("div");
d.id="dd";
d.style.width="50px";
d.style.height="20px";
d.appendChild(document.createTextNode("Test"));
document.getElementById("col2").appendChild(d);
});
}
html {
height: 100%;
}
body
{
display: flex;
min-height: 100%;
margin: 0 5rem 0 0;
}
div#col1
{
background: #eee;
width: 5rem;
text-align: center;
}
div#col2
{
background: #eff;
width: calc(100vw - 10rem);
}
div#dd
{
background: #f99;
border: 2px solid red;
margin-top: 2000px;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>
Test
</title>
</head>
<body>
<div id="col1">
<input type=button id="b1" value="+">
</div>
<div id="col2">
</div>
</body>
</html>
I recently discovered that my content in google chrome was not being rendered when it was longer than 16777216px in length.
jsfiddle
FULL HTML:
<html>
<head>
<style>
#content {
height: 16777316px;
position: relative;
font-size: 2em;
font-weight: 700;
}
#semi-hidden {
position: absolute;
bottom: 0;
background-color: #000000;
color: #ffffff;
height: 200px;
width: 50%;
float: left;
}
#hidden {
position: absolute;
bottom: 0;
background-color: #ffffff;
color: #000000;
height: 100px;
width: 50%;
float: right;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div id="content">Scroll Down ↓
<div id="semi-hidden"> The Bottom 100px of this DIV is not rendered. </div>
<div id="hidden"> This DIV is completly hidden. </div>
</div>
</body>
</html>
EDIT: This is due to Google Chrome not supporting layouts larger than 16777216 px.
Google Chrome represents laid out element positions using LayoutUnits, which can represent 1/64th the space of a signed int (2^31 / 64 integral values, or +/-16777216).
Google Chrome has no intention of supporting larger values in the near future.
Bug Report
I know there are a lot of questions on z-index around here, but I am using z-index for a while now and it always worked fine, but now I'm struggling on this one and I just don't understand why it isn't working because I think I did all necessary steps.
test.html
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js " type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.boxGrid').hover(function(){
$(".boxCaption", this).stop().animate({bottom:'0px'},{queue:false,duration:300});
}, function() {
$(".boxCaption", this).stop().animate({bottom:'-121px'},{queue:false,duration:300});
});
});
</script>
</head>
<body>
<div style="position: relative; width: 226px; height: 246px;">
<div class="boxGrid">
<div class="buttonBack blogImg">
<div class="boxCaption">
<h3>Top-Blog</h3>
</div>
</div>
</div>
</div>
</body>
</html>
style.css
.boxGrid
{
width: 226px;
height: 246px;
background-image: url(buttonBorder.png);
position: absolute;
top: 0px;
left: 0px;
z-index: 100;
}
.buttonBack
{
position: absolute;
top: 12px;
left: 13px;
border: 0px;
width: 200px;
height: 223px;
z-index: 50;
overflow: hidden;
}
.blogImg
{
background-image: url(blogButton.png);
}
.boxCaption
{
position: absolute;
background: url(caption.png);
height: 121px;
width: 100%;
bottom: -121px;
text-align: center;
}
.boxCaption h3
{
font-size: 30px;
color: #fff;
}
So I want this .boxGrid class to be above the .buttonBack class, I added position: properties to all div's that are using z-index.
JsFiddle so the red box needs to be behind the blue one.
Thanks in advance
You can't "hide" child element under its parent, because when you're setting z-index for parent, the child is also affected. Just make them siblings.
<div style="position: relative; width: 226px; height: 246px;">
<div class="boxGrid"></div>
<div class="buttonBack blogImg">
<div class="boxCaption">
<h3>Top-Blog</h3>
</div>
</div>
</div>
Look at this jsfiddle: http://jsfiddle.net/ZwC9n/
You have the div.buttonBack as a child to the div.boxGrid. You may need to reorder the HTML.
<div style="position: relative; width: 226px; height: 246px;">
<div class="buttonBack></div>
<div class="boxGrid">
<div blogImg">
<div class="boxCaption">
<h3>Top-Blog</h3>
</div>
</div>
</div>
I have some javascript to set the offsetLeft attribute of an img element. But my javascript doesn't move the HTML element, what do you think I can do to make it move left? This is a scenario when it is easiest for me to position the element in javascript & not css.
The img that wont move left when it should(it displays centred) has the id "headerImg":
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/homepage.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Kamalei - Home Page</title>
<style type="text/css">
<!--
body { text-align: center; min-width: 1200px; }
#backgroundImg { z-index: -1; position: absolute; left: 0px; top: 0px; }
#heading { height: 300px; }
#main { margin: 0 auto; }
#navBar { display: inline; height: 700px; width: 200px; z-index: 1; position: relative; }
#content { display: inline; height: 700px; width: 800px; padding: 20px; padding-left: 30px; }
#headingImg { left: 0px; }
#navBarImg { position: relative; z-index: 0; padding-right: -5px; margin-right: -5px; }
-->
</style>
</head>
<body>
<div id="heading">
<!-- This image will not move to the left when I call the below javascript -->
<img id="headingImg" src="images/logoWritting.png" alt="Kamalei Childrens Centre" width="600px" height="240px"/>
</div>
<div id="main">
<div id="navBar">
<img id="navBarImg" src="images/navBackground.png" alt="" width="200px" height="700px"/>
</div>
<div id="content">
</div>
</div>
<img id="backgroundImg" src="images/background.png" alt="" width="100%" height="1100px"/>
<script type="text/ajavscript">
<!--
var CONTENT_WIDTH = 1000;
function getScreenSize()
{
var res = {"width": 630, "height": 460};
if ( parseInt(navigator.appVersion)>3 )
{
res["width"] = screen.width;
res["height"] = screen.height;
}
else if ( navigator.appName == "Netscape" && parseInt(navigator.appVersion)==3 && navigator.javaEnabled() )
{
var jToolkit = java.awt.Toolkit.getDefaultToolkit();
var jScreenSize = jToolkit.getScreenSize();
res["width"] = jScreenSize.width;
res["height"] = jScreenSize.height;
}
return res;
}
document.getElementById("headingImg").style.left = ((getScreenSize()['width']/2)-(CONTENT_WIDTH/2))+"px";
-->
</script>
</body>
</html>
Set the .style.left along with position:absolute, not the offsetLeft. Alternatively, change the .style.marginLeft. offsetLeft is a read-only property.