CSS: div width increasing on adding the child div to it - javascript

[![enter image description here][1]][1]Hi I am desingning a webpage. I have set the header div width with the screen width using javascript code as follows
window.onload=getSize;
function getSize()
{
var x=window.screen.availWidth;
var y=window.screen.availHeight;
document.getElementById("header").style.width=(x-50)+'px';
document.getElementById("header").style.height=(0.2*y)+'px';
document.getElementById("wrapper").style.width=(x-50)+'px';
document.getElementById("wrapper").style.height=(0.6*y)+'px';
}
Now what happening is when I am adding the child divs to the parent div(header) the width of header gets increased considerably but i want it to remain fixed according to the display size
here is the css file
#CHARSET "ISO-8859-1";
#header {
margin: auto;
position : relative;
background-color: #009acd;
}
#logo1 {
position: absolute;
top: 5%;
left: 0.4%;
}
#caption {
position: absolute;
top: 50%;
left: 30%;
color: #FFFFFF;
}
#marquee{
position: absolute;
top: -15px;
color: #FFFFFF;
left: 300px;
}
#info{
position: absolute;
top: 60px;
left: 1075px;
color: #FFFFFF;
}
h3{
position: absolute;
top: 90px;
left: 1000px;
color: #FFFFFF;
}
#menu{
position: absolute;
bottom: 0%;
left: 0.215%;
}
#wrapper{
position: relative;
background-color: #FFFFFF;
}
#videos{
position: absolute;
top:0px;
left: 22px;
}
#studymaterial1{
position: absolute;
top:148px;
left: 32px;
}
#downloads{
position: absolute;
top: 315px;
left: 22px;
}
#wowslider-container1{
left: 233px;
top: 10px;
}
.formoid-solid-blue{
position: absolute;
left: 912px;
top: 12px;
}
HTML
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

You are checking
window.screen.availWidth
which is a constant and is equal to the width of your computer screen. Eg '1366px'
Instead you must use
window.innerWidth
which gives you the width of your browser window when the page loads.
var x=window.innerWidth;
var y=window.innerHeight;
Hope this helps. :)

You are missing unit(px/%) while assigning the width/height property.
Try this:
document.getElementById("header").style.width=(x-50)+'px';
____________________________________________________^^^^^^

Related

override css content of :befor selector

I have loading GIF with bellow code
<style>
.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 100000000000;
background: url('Preloader_11.gif') center no-repeat #fff;
}
.se-pre-con::before {
content: 'Please Wait...';
z-index: 9999;
width: 30%;
height: 10%;
margin: 28% 35%;
position: absolute;
text-align: center;
font-size: 16px;
}
</style>
<div class="se-pre-con" id="loading" style="display: none;"></div>
Preview of above code
loading Prview
I want to change content of .se-pre-con::before for different ajax from jquery to display different massages for different processes

Is it possible to have two h2 with CSS?

I'm just practicing some html/css/js and thought about creating a small program that acts like a light switch that turns an image on and off.
Everything is fine except for my 'ON' button and 'OFF' button has the same heading 'H2' so when I go into CSS it has no idea which one is for what which is understandable. I tried renaming the 'H2' to 'H2.left_switch' and 'H2.right_switch respectively <-- saw it somewhere, but it didn't work/ it wasn't displaying the correct heading.
HTML
h1 {
position: absolute;
left: 65px;
top: 150px;
}
h2 {
position: absolute;
left: 40px;
top: 150px;
}
h2 {
position: absolute;
left: 100px;
top: 150px;
}
.leftButton {
position: absolute;
top: 300px;
left: 60px;
width: 40px;
height: 30px;
background-color: gray;
}
.rightButton {
position: absolute;
top: 300px;
left: 130px;
width: 40px;
height: 30px;
background-color: gray;
}
.backBoard {
position: absolute;
top: 210px;
left: 40px;
width: 150px;
height: 150px;
background-color: rgb(218, 216, 216);
}
<!DOCTYPE html>
<html>
<link rel = "stylesheet" type = "text/css" href = "gayle.css">
<head>
<h1>FESTA</h1>
<h2> ON </h2>
<h2> OFF </h2>
</head>
<body>
<div class="center">
<div class="backBoard"></div>
<!--on-->
<div class="leftButton"></div>
<!--off-->
<div class="rightButton"></div>
<img id = "btsArmyBomb" src = "btsArmyBomb.png"/>
</body>
</html>
Thank you!
H2.left_switch refers to an h2 element with a class name of left_switch. The same goes with the h2.right_switch element.
Just add a class name to your h2 elements as follows:
<h1>FESTA</h1>
<h2 class="left_switch"> ON </h2>
<h2 class="right_switch"> OFF </h2>
And then target the h2 elements in your CSS like this:
h2 {
exampleStyle: exampleProperty; /* This would apply to both h2 */
}
h2.left_switch { /* This would apply to the h2 with ON */
position: absolute;
left: 40px;
top: 150px;
}
h2.right_switch { /* This would apply to the h2 with OFF */
position: absolute;
left: 100px;
top: 150px;
}
N.B. The first h2 in the css is just an example. You don't have to add that.
<h2 class="on"> ON </h2>
<h2 class="off> OFF </h2>
.on{
position: absolute;
left: 40px;
top: 150px;
}
.off{
position: absolute;
left: 100px;
top: 150px;
}

Navigation bar : position Absolute and Sticky

I'm trying to make a navigation bar that overlap my header and stick to the top of the window on scroll.
It will start at top: 45px and stick at top: 0 on scroll.
My first approach was to set it at position: fixed; top: 45px and change the value with JS on a scroll event. But Firefox gave me the warning about "asynchronous panning" discussed on this post.
I have been able to do it with a bit of CSS trickery, but I am wondering if there is a simpler CSS way or a valid JS approach to do this (not throwing a warning).
body {
position: relative;
height: 100%;
width: 100%;
background-color: grey;
overflow-x: hidden;
margin: 0;
}
.container {
position: absolute;
top: 0;
left: -1px;
width: 1px;
bottom: 0;
padding-top: 45px;
overflow: visible;
}
nav {
position: sticky;
top: 0;
transform: translateX(-50%);
margin-left: 50vw;
width: 300px;
height: 70px;
background-color: red;
}
header {
height: 50vh;
background-color: blue;
}
main {
height: 200vh;
width: 100%;
background-color: green;
}
<div class="container">
<nav></nav>
</div>
<header>
</header>
<main>
</main>
You can simplify your code and avoid using an extra container:
body {
background-color: grey;
margin: 0;
}
nav {
position: sticky;
top: 0;
width: 300px;
height: 70px;
margin:45px auto -115px; /* 115 = height + margin-top */
background-color: red;
}
header {
height: 50vh;
background-color: blue;
}
main {
height: 200vh;
background-color: green;
}
<nav></nav>
<header>
</header>
<main>
</main>

Can't override default margin of h1 text?

Despite doing:
top: 0%;
margin-top: 0%;
padding-top: 0%;
there's still a gap between the top of the header in #txt and #outer - why?
It looks like it's because the <h1> text has a default margin that I can't override?
JS FIDDLE
Because you have a height of 90% which makes the object not as high as the parent and is therefore unable to reach the bottom.
Changing the height to 100% will fix the problem.
Edit:
If you want to move the space from the bottom of the div to the top you have to change top: 0% to top: 10%.
You just need to add this to your CSS
#txt h1 {
margin-top: 0;
}
You had set a fixed height for #txt, from what i understood, this is what you're looking for?
https://jsfiddle.net/dryy2j31/5/
#txt {
position: absolute;
background-color: green;
top: 0%;
margin-top: 0%;
padding-top: 0%;
width: 100%;
height: auto;
}
In your fiddle you are applying the margin:0%; to the #txt div, so no rules are being applied to the <h1>. You just need to add #txt h1 { margin: 0; see below.
var outer = document.createElement("div");
outer.id = "outer";
var txt = document.createElement("div");
txt.id = "txt";
txt.innerHTML = "<h1>Enter your email</h1> <p>We need your email to do stuff.</p>";
outer.appendChild(txt);
document.body.appendChild(outer);
#outer {
background-color: yellow;
width: 530px;
height: 300px;
position: absolute;
left: 0%;
right: 0%;
top: 9.05%;
margin: 0 auto;
}
#txt {
position: absolute;
background-color: green;
top: 0%;
margin-top: 0%;
padding-top: 0%;
width: 100%;
height: 100%;
}
#txt h1 {
margin: 0;
}

Positioning z-index does not work as expected

I cannot position info-pop-title on top of bar-header as you can see from my current code the text "TEST----" is visible but under the bar-header element.
http://jsfiddle.net/uvh4ymh9/
Could you point me out what am I doing wrong and how to fix it
PS: I cannot change structure for the HTML, only CSS solution
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
.bar-header, .bar-footer {
position: fixed;
left: 0px;
width: 1280px;
z-index: 1;
background-color: rgba(50,50,50,0.5);
text-align: center;
}
.bar-header {
top: 0px;
height: 60px; /* safearea top 25 + content 20 + space bottom 15*/
}
.bar-header h1 {
position: fixed;
top: 25px; /* safearea top 25 */
left: 25px; /* safearea left */
font-size: 20px; /* content */
}
.bar-footer {
top: 670px;
height: 50px; /* safearea bottom 20 + content 20 + space top 10 */
font-size: 20px; /* content */
}
.bar-footer > ul {
position: fixed;
top: 680px; /* footer top 670 + space top 10*/
left: 1150px;
}
.bar-footer > ul li {
float: left;
}
.bar-footer li:nth-child(1) span {
color: blue;
}
#scene-main {
position: fixed;
top: 0px;
left: 0px;
width: 1280px;
height: 720px;
/*background: #ffffff url("/auth/assets/tv-safearea-transparent.png") no-repeat left;*/
background-color: darkgrey;
}
#btn-up, #btn-down {
position: fixed;
left: 1230px;
width: 50px;
height: 50px;
background-color: yellow;
outline: 1px solid black;
z-index: 200;
}
#btn-up {
top: 0px;
}
#btn-down {
top: 50px;
}
#content {
position: fixed;
top: 0px; /* header */
}
.content-section:first-child {
margin-top: 60px; /* header height content does not go under header */
}
.content-section {
background-color: lightgray;
outline: 1px solid black;
width: 1280px;
}
/* Content sizes */
.content-snippet {
height: 360px; /* 1 slots */
width: 1280px;
background-color: lightblue;
outline: 1px solid green;
}
.content-snippet:nth-child(even) {
background-color: lightcoral;
}
.content-section h2 {
position: relative;
top: 30px; /**avoid to go under the header bar*/
}
.active {
background-color: violet !important;
}
.snippet-pop-info {
position: fixed;
top: 640px; /*430 = final position as visible / 670 = final position as not visible */
width: 1280px;
height: 240px;
background-color: darkblue;
opacity: 1;
color: white;
}
.snippet-pop-info ul {
position: absolute;
top: 0px;
left: 1155px;
width: 100px;
}
.snippet-pop-info ul li {
width: 100px;
}
.snippet-pop-info .rating {
position: absolute;
top: 65px;
left: 25px;
unicode-bidi: bidi-override;
direction: rtl;
}
.snippet-pop-info .rating > span {
display: inline-block;
position: relative;
width: 20px;
}
.snippet-pop-info .rating > span:hover:before,
.snippet-pop-info .rating > span:hover ~ span:before {
content: "\2605";
position: absolute;
}
#info-pop-title {
position: fixed;
top: 0px;
left: 250px;
z-index: 1;
font-size: 30px;
color: white;
font-weight: bold;
}
#info-pop-description {
position: absolute;
overflow: hidden; /* hide content that does not fit in the columns*/
top: 25px;
left: 300px; /* TEST */
height: 80px;
width: 800px;
font-size: 20px;
-webkit-column-count: 2;
-webkit-column-gap: 10px;
column-count: 2;
column-gap: 10px;
}
</style>
</head>
<body>
<div id="viewport">
<div id="scene-main" class="scene" style="">
<div class="bar-header"><h1>ChannelLive logo</h1></div>
<div id="page">
<div id="content">
<div id="snippet-cnt-0" class="content-snippet">
0
<div class="snippet-pop-info" style="top: 720px;">
<h1 id="info-pop-title" style="word-wrap: break-word;">TEST-----------------</h1>
<div class="rating"><span>☆</span><span>☆</span><span>☆</span><span>☆</span><span>☆</span></div>
<div id="info-pop-description" style="word-wrap: break-word;">null</div>
<ul>
<li class="focusable" data-href="movie-play">Play</li>
<li class="focusable" data-href="movie-details">Details</li>
</ul>
</div>
</div>
</div>
</body>
</html>
It's not clear what you're trying to accomplish, but I can make Chrome work like Firefox by getting rid of the
position: fixed;
style from #content. Whether that will work in the larger context of your layout, I don't know, but the problem is that the way z-index works is weird and complicated, and involves not just individual fixed elements but also any fixed parents they might have.
edit — oh also, set the z-index of .snippet-pop-info to 2. Here is an updated version of your fiddle.
Make your
.bar-header, .bar-footer{
z-index:0;
}
This will do the trick. Since your z-index for .bar-header and .info-pop-title are the same.
Add z-index in your content div
#content
{
position:fixed;
top:0;
z-index:1;
}
I'm afraid you can't make it work with the way your html is nested.
The element you want to pull on top to cover the rest is located in the main container while your second element is isolated in the header. If you want to bring your info-pop-title there you'll have to change the z-index of your #page element, which will cover everything.
The only thing I see you can achieve with this structure would be to position your diverse containers relatively and change the css of your info-pop-title with a negative margin, position absolutely this time.

Categories