Jquery add div with background behind text element - javascript

I want to place an absolute positioned div behind text some text or images. The reason I can't set the absolute div z-index to -1 is because there is content behind the text or images with background images. So the absolute div will be positioned behind that.
I am familiar with Javascript, jQuery, css etc. So what could I do to position the absolute div behind the text but in front of the background images?
Thanks!

Like this maybe?
.div-1 { background-image:url(my-image.jpg) no-repeat 0 0; position:relative; }
.div-2 { position:absolute; z-index:1; top:0 left:0; }
.div-3 { position:absolute; z-index:2; top:0 left:0; }
<div class="div-1">
<div class="div-2">behind</div>
<div class="div-3">in front</div>
</div>

Rather than setting z-index of div with background image to -1, create a div containing the images/text and set its z-index to 1.

Related

To position a div after a fixed div if the fixed div height changes dynamically, css issue

I have a position: fixed div that loads a dynamic image from an external source, the image height changes every time it loads.
Now I need to position the next div immediately from where the first div ends.
Have tried by getting the height during runtime but sometimes it takes time to load and the height sent is not proper.
Is there any CSS solution to it.
Theres many ways to do it, the most optimal would be to use floats (float:left;)
div{
float:left;
}
.img{
background-color:red;
width:100px;
height:100px;
}
.div{
background-color:lime;
width:100px;
height:100px;
}
<div class="img">Dynamic Image</div>
<div class="div">Div next to it</div>

Keep the ads div fully in view

I've got to (unfortunately) put our ads onto our website. They're positioned down the right hand side of the page, outside of the content area.
When the screen width gets smaller, because it's positioned outside of the content they get cut off by the browser. I can offset everything by putting left: -someValuepx, which moves everything over.
Rather than having to put in lots and lots of media queries to keep slightly moving it over, is this something I can do in Javascript, to automatically keep them in the view? Ideally I'd like a function that I can run on page load, and then on the window resize event.
Here's a jsfiddle of the CSS at the moment. Edit the #container left attr to move the content.
And here's the code (as I believe it's required if you link to jsfiddle?)
HTML
<div id="container">
<div id="ads">
</div>
<div id="content">
</div>
</div>
CSS
#container {
width:500px;
min-height:100px;
background-color: firebrick;
margin:0px auto;
position:relative;
left:-50px;
}
#ads {
background-color:red;
position:absolute;
top:0;
right:-170px;
width:160px;
min-height:100px;
}
#content {
width:100%;
background-color:green;
min-height:100px;
}
I have a pure css solution, if you change your div structure to the following:
<div id="container">
<div class="padding">
<div id="ads"></div>
<div id="content"></div>
</div>
</div>
You are able to use the following styles:
#container {
width:670px;
min-height:100px;
margin:0px auto;
position:relative;
}
#container > .padding {
margin-right:170px;
background-color: firebrick;
}
#ads {
background-color:red;
position:absolute;
top:0;
right:0;
width:160px;
min-height:100px;
}
#content {
width:100%;
background-color:green;
min-height:100px;
}
#media (max-width:670px) /*this is the width of the container*/
{
#container {float:right;}
}
And this will keep your adds in view when the viewport is resized
Example
What you can do, is to create a function in JS that gets executed one time when the document is loaded and also when you resize.
This function should add a class (ie: hidden) to the the ads. you want to hide, and with CSS, give the right properties. Just addClass and removeClass, depending on the situation, should make the trick.
Example:
#ads { // normal values that makes the content of the ads visible }
#ads .hide  { // offset values to hide the ads }
This way, you keep behavior & presentation separated.
Hope it helps !
In your html markup, you have both content and the ads inside a container. The problem is that the content takes all space of the container, and the ads are positioned outside of it.
Just make the container wide enaugh to hold both content and the ads, then position them appropriately. Make one break point on the width of content+ads (660px), where you would position the ads below the content, and give the container its current width (500px).

Extend image by viewpoint beyond DIV container

I have a black rectangle I wish to extend the full left to right horizontal viewpoint. Problem is, I have a DIV container (980px) I can't change (long story - basically restriction of the software I'm using).
style="position:fixed; left:0%; width:100%; height:300px"
This works, but I'm left with a fixed rectangle I don't want. Absolute positioning extends to a maximum of 980px (governing DIV container). Any suggestions? JS?
Any information you can provide would be extremely appreciated.
Within your stylesheet you will need to change the parent div ( the 980px div ) to have position: static
#parentDiv{
width:960px;
position:static;
}
#fullWidth{
position:absolute;
width:100%;
height:300px;
background: #000;
left:0;
}

Light box background color should cover the whole screen using CSS

This is my page URL
http://sample.com/mytest.php
In this page, if we click a Sign In button it will display a popup screen with black background. But if we zoom out the page, then it reduces the size of a background color. But i want to cover background the whole screen if we zoom out. I used the code below in my page.
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 2000%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
But in a test page the below code is used for cover the whole background. It works fine.
<style type="text/css">
/*give the body height:100% so that its child
elements can have percentage heights*/
body{ height:100% }
/*this is what we want the div to look like*/
div.fullscreen{
display:block;
/*set the div in the top-left corner of the screen*/
position:absolute;
top:0;
left:0;
background-color: black;
/*set the width and height to 100% of the screen*/
width:100%;
height:100%;
color: white;
}
</style>
<div class="fullscreen">
<p>Here is my div content!!</p>
</div>
How can i do the same for my login page background i don't know. Anyone can please help me to solve this problem.
try
div.fullscreen{
position:fixed
...
}
absolute: The element is positioned relative to its first positioned (not static) ancestor element
fixed: The element is positioned relative to the browser window
You have to put below code before the end of the body tag or after starting of the body tag
<div class="black_overlay" id="fade" style="display: block;"></div>
You need to move your popup and background to outside of any other block elements, probably just before </body>. The background is stretching to fill 100% of it's container which is the table cell rather than the body. This means you will have to change the position (left and right) though.
The problem is that div.black_overlay is inside the table, so you can't use widht:100% and height:100%. Just move div.black_overlay outside the table and add z-index: 1;. I have tested using Firebug and it works!

How do I make a div that is the width of the entire screen?

If a div A is contained inside another div (B) that is 500px wide, how can div A still be the width of the entire screen? I want to "break out" of that 500px div.
Given your question, you could use position:absolute in div A. It will find the nearest positioned parent (a parent that has either fixed, absolute or relative position). But you need to have the nearest positioned element have 100% width and is positioned snug to the left.
here's a demo using body
<body>
<div id="b">
<div id="a">test</div>
</div>
</body>
body{
position:relative;
}
#b{
width:500px;
}
#a{
position:absolute;
top:0;
left:0;
right:0;
}
Use position: absolute on the child div and keep the parent on position: static.
you can try to make div A's position: absolute;
It depends on what you want it to look like. Using the css:
overflow:hidden;
will make the div be larger than the containing div but hidden behind it,
otherwise, if you want it to be shown on top of the containing div you could use the 'position' css like the other answers given.
jsfiddle for you:
http://jsfiddle.net/HRT2M/
.b
{
Position:fixed;
}
on div b should get it working for you
Martyn
You can use min-width to force the div B to certain width -
<div id="a" style="width:500px;display:block;">
<div id="b" style="min-width:960px;">
</div>
</div>
You can also use javascript to set its width -
<script style="text/javascript">
window.onload = function () {
document.getElementById ("b").style.width = window.screen.width;
}
</script>
<div id="b" style="width:500px;">
<div id="a" style="width:100%; position:absolute; overflow:hidden;"><div/>
</div>
This works.
You can add a class or id to your div tag. This css will work for both
#yourdivid .yourdivclass {
position:absolute;
left:0;
right:0;
overflow:hidden;
}

Categories