So I am having trouble getting a div to position absolute over another div using javascript. The main picture is a background image. I want to click on a list item to bring a div over that image using javascript.
$(document).ready(function() {
//Carpet
$('#gray').click(function(event) {
$('.carpetArea img').remove();
$('.carpetArea').html('<img style="opacity:0; margin-top:-20px;" src="http://192.185.2.154/~sogo/tempsourceoneevents.com/wp-content/uploads/2014/10/lightgray.png"/>');
$('.carpetArea img').animate({opacity: '1', marginTop : '0px' }, 500);
});
});
The css for the carpet image
.carpetArea img {
position:absolute;
zoom:1;
}
The problem is that the image when clicked goes below the main image. It is supposed to animate a little from the top of the page a little downwards to line up over the carpet thats on the background image.
Full Code
$(document).ready(function () {
//Carpet
$('#gray').click(function (event) {
$('.carpetArea img').remove();
$('.carpetArea').html('<img style="opacity:0; margin-top:-20px;" src="http://192.185.2.154/~sogo/tempsourceoneevents.com/wp-content/uploads/2014/10/lightgray.png"/>');
$('.carpetArea img').animate({
opacity: '1',
marginTop: '0px'
}, 500);
});
});
.babBGD {
background: url("http://192.185.2.154/~sogo/tempsourceoneevents.com/wp-content/uploads/2014/10/booth.jpg") repeat scroll 0 0 transparent;
height: 612px;
margin: 0 auto;
position: relative;
width: 1112px;
}
.carpet {
height: 118px;
left: 35px;
position: absolute;
top: 132px;
width: 185px;
z-index: 1;
}
.carpet ul {
list-style: none outside none;
margin: 0;
padding: 0;
}
.carpet ul li {
cursor: pointer;
display: block;
float: left;
height: 34px;
margin-bottom: 7px;
margin-right: 2px;
text-indent: -5000px;
width: 34px;
}
.table {
height: 116px;
position: absolute;
right: 28px;
top: 134px;
width: 185px;
z-index: 1000;
}
.table ul {
list-style: none outside none;
margin: 0;
padding: 0;
}
.table ul li {
cursor: pointer;
display: block;
float: left;
height: 34px;
margin-bottom: 7px;
margin-right: 2px;
text-indent: -5000px;
width: 35px;
}
.carpet-color {
position:absolute;
zoom:1;
z-index: 100;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="babBGD">
<div class="carpet">
<ul>
<li id="gray">Gray</li>
</ul>
</div>
</div>
<div class="carpetArea carpet-color"></div>
Looks like the only thing you need to do is to move .carpetArea into .babBGD container to make carpet position relatively to it:
<div class="babBGD">
<div class="carpet">
<ul>
<li id="gray">Gray</li>
</ul>
</div>
<div class="carpetArea carpet-color"></div>
</div>
Demo: http://jsfiddle.net/w0x0vz56/6/
Related
How can I make the images in the thumbnails take up the whole space of the thumbnail so that the overlay div ("November") and the slideToggle div ("Women & Girls in STEM") don't stick out?
I use jQuery and Bootstrap. When the user hovers over the image, the slideToggle slides up, then disappears when the mouse leaves. But it doesn't fit the image; nor does the November overlay.
$(document).ready(function () {
$('.thumbnail').hover(function () {
$('.slider', this).slideToggle('fast');
});
//$('.thumbnail').hover(function () {
// $('.slider', this).animate({
// opacity: 0.75,
// height: "toggle"
// }, 750, function () {
// //Animation complete.
// });
//});
});
.womens-overlay {
position: absolute;
background: rgba(0,0,0,1);
top: 0;
right: 0;
padding: 2%;
width: 35%;
color: #FFFFFF;
}
/*Removes the automatic thumbnail frames.*/
.thumbnail {
border: none;
box-shadow: none;
float: left;
position: relative;
margin: 5px;
color: #333;
}
.thumbnail img {
max-height: 100%;
max-width: 100%;
}
.thumbnail .slider {
border: none;
box-shadow: none;
display: none;
opacity: 0.8;
background: #D2D6E2;
width: 100%;
position: absolute;
bottom:4px;
padding: 5px;
}
.slider {
position: absolute;
padding-top: 0%;
}
<div class="col-sm-6 col-md-4">
<div class="image-box">
<div class="thumbnail">
<img src="Images/celebrating-women-in-stem.jpeg" />
<div class="womens-overlay">
<h3>November</h3>
</div>
<div class="slider">
<h2>Women & Girls in STEM Month</h2>
<h3>EVENT</h3>
<p>This November, we are celebrating women and girls in STEM. Come join us!</p>
<button type="button" class="btn btn-primary">Learn More</button>
</div>
</div>
</div>
</div>
Add an each function so it will work on multiple thumbnails. Then get the height of the thumbnail and set the .slider height to the same.
$(document).ready(function () {
$('.thumbnail').each(function(){
// get height
var height = $(this).height();
// set slider height
$(this).children('.slider').css({'height':height+'px'});
$(this).hover(function () {
$(this).children('.slider').slideToggle('fast');
});
});
});
Then set overflow:hidden on the .thumbnail
.thumbnail {
border: none;
box-shadow: none;
float: left;
position: relative;
margin: 5px;
color: #333;
overflow: hidden;
}
fiddle - https://fiddle.jshell.net/Jim_Miraidev/xrevsesq/
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.
I am trying to implement something like this http://www.jamieoliver.com (slider -> arrow on hover)
I have done this much http://jsfiddle.net/PXLJG/5/ In the jsfiddle script? The arrow must be stand. The div.class=content 'Text next article' must be slide to left next to the arrow.
$('.holdingbox').hover(function () {
$('.rightbox').stop().animate({
width : '120px'
}, 400)
}, function () {
$('.rightbox').stop().animate({
width : '-0'
}, 400)
});
HTML:
<div class="holdingbox">
<a href="#">
<div class="margined">
<div class="rightbox">
<div class="content"><p>Következő cikk</p></div>
</div>
<div class="leftbox"> > </div>
</div>
</a>
</div>
CSS:
div {
display : inline-block;
}
.holdingbox {
position: relative;
top: 0;
margin-left: 100px;
}
.leftbox {
position: absolute;
display: inline-block;
height: 36px;
background-color: #ac193d;
color: #FFF;
font-weight: bold;
padding: 1px;
}
.holdingbox a {
text-decoration: none;
color: #FFF;
display: block;
}
.leftbox img {
margin: 0 auto;
margin-top: 10px;
}
.rightbox {
position: relative;
display: inline-block;
overflow: hidden;
width: 0;
height: 50px;
vertical-align: top;
margin-right: 0;
}
.rightbox a {
text-decoration: none;
color: #FFF;
}
.content {
width: 120px;
position: absolute;
background-color: #ac193d;
height: 38px;
text-align: center;
left: 0;
top: 0;
right: 0;
color: #FFF;
}
.content p {
margin-top: 8px;
}
just add position: absolute; right: 0; in .rightbox class.
.rightbox {
display: inline-block;
height: 50px;
margin-right: 0;
overflow: hidden;
position: absolute;
right: 0;
vertical-align: top;
width: 0;
}
Working here - http://jsfiddle.net/PXLJG/7/
I tried to fix up the code you've already got but it needed some major rehauling so I've just re-done it all.
JSFiddle: http://jsfiddle.net/t2z9Q/
CSS
.container {
width: 120px;
position: relative;
overflow: hidden;
color: white;
}
.container .content {
width: 100px;
overflow: hidden;
position: absolute;
left: 120px;
float:left;
z-index: 99;
background: #ac193d;
}
.container .arrow {
float: right;
width: 20px;
position: relative;
color: black;
z-index: 100;
background: #ac193d;
}
JS
$('.arrow').hover(function() {
$('.container .content').stop().animate({left: '0'}, 400)
}, function() {
$('.container .content').stop().animate({left: '120px'}, 400)
});
HTML
<div class="container">
<div class="content">Next Article</div>
<div class="arrow">></div>
</div>
This way you lose a lot of the jargon html & css that isn't really required but still get the same effect.
You are applying inline-block style on all divs. Please revert to normal display of block.
div{
display: block;
}
or just remove it as the default display is block
http://jsfiddle.net/PXLJG/8/
That should solve your core issue.
Now if you want to show the arrow to the left of the text div, remove absolute position on the arrow.
Now you will be having a whitespace between the inline-block elements, that is the arrow and the text. To remove it easily remove the whitespace between those two div in HTML
http://jsfiddle.net/PXLJG/18/
For something exactly like as in the website, you can try positioning both arrow and text using absolute positioning and anchoring them with their right property.
This way, as the width increases it will expand from right to left.
http://jsfiddle.net/PXLJG/20/
I am using a simple toggle to open and close my mobile navigation. When the navigation loads is loads the phone width and show the nav when is should be hidden causing the page to load wider than the width. Plus I can't get the Nav Menu to stay on the page so when it gets clicked again it will close.
Here is what I have and I am not sure why the nav is showing then it has not been clicked.
#nav-ph {
position: absolute;
top: 100px;
right: 0px;
margin: 0px;
padding: 5px 0;
list-style: none;
z-index: 9999;
width: 100%;
}
.nav-btn-ph {
position: absolute;
top: -2px;
left: -40px;
width: 40px;
height: 35px;
display: block;
cursor: pointer;
}
.nav-btn-ph img {
margin: 20px 0px 0px 13px;
}
.main-nav-ph li {
padding:0 10px;
text-align: left;
text-decoration: none;
color: #FFF;
font-family: #m;
font-size: 24px;
}
.main-nav-ph li a {
color: #000;
text-decoration: none;
}
.main-nav-ph li a:hover {
color: #000;
}
$(function() {
$('#nav-ph').stop().animate({'margin-right':'-300px'},1000);
function toggleDivs() {
var $inner = $("#nav-ph");
if ($inner.css("margin-right") == "-300px") {
$inner.animate({'margin-right': '0'});
$(".nav-btn-ph").html()
} else {
$inner.animate({'margin-right': "-300px"});
$(".nav-btn-ph").html()
}
}
$(".nav-btn-ph").bind("click", function(){
toggleDivs();
});
});
<div id="nav-ph">
<div class="nav-btn-ph">Nav Menu</div>
<ul class="main-nav-ph">
<li>THE ADVANTAGE
</li>
<li>OUR SERVICES
</li>
<li>OUR TEAM
</li>
<li>MAKING NEWS
</li>
<li>CONTACT
</li>
</ul>
</div>
Here is a link to jsfiddle http://jsfiddle.net/BrentRansom/vb3v5/1/
If I understood correctly, try to remove the following items
.nav-btn-ph {
position: absolute;
top: -2px;
left: -40px; //remove this css, the nav emnu will stay longer
width: 40px;
height: 35px;
display: block;
cursor: pointer;
}
better remove this animation code to stay within the margin
$('#nav-ph').stop().animate({'margin-right':'-300px'},1000);
Check this JSFiddle
UPDATE: I figured it out thank goodness... So the key was to make the position: absolute and take out the bottom: 400px on the last thing on my CSS.
I'm trying to make a slide show of images that fade in and out when the circular buttons are clicked. There are 4 pictures and will be 4 circular buttons, so if I click the 3rd button the 3rd pic will fade in. However, my code isn't doing it properly. I reckon I'm using index() improperly? The pictures aren't appearing. They just fade in halfway through and then fade back out and then all the pictures disappear altogether. I think it's because of my position:relative on the ".pic"s. Help please!
Here's my HTML:
<body>
<div class="wrapper">
<div class="image_frame">
<div src="" class="first"></div>
<img src="images/galaxy.jpg" class="gala pic">
<img src="images/aurora.jpg" class="auro pic">
</div>
<div class="buttonholder">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
</body>
</html>
Here's my CSS:
html, body {
background: black;
margin: 0;
padding: 0;
}
.wrapper {
width: 800px;
margin: 0 auto;
padding: 0;
}
.image_frame {
width: 700px;
height: 400px;
position: relative;
overflow: hidden;
}
img {
width: 700px;
height: 400px;
padding-top: 10px;
float: left;
}
.gala {
display: block;
position: relative;
}
.buttonholder {
display: block;
width: 400px;
margin: 0 auto;
text-align: center;
}
ul li {
list-style: none;
height: 3px;
width: 3px;
float: left;
background: #efefef;
padding: 10px;
margin: 0 5px;
border-radius: 100px 100px 100px 100px;
cursor: pointer;
text-indent: -9999px;
}
.button_normal {
background: #efefef;
}
.selected {
background: grey;
}
.pic {
position: relative;
bottom: 400px;
}
And here's my JS
$('ul li').click(function(){
$('img').fadeOut(300);
var listPos = $('ul').index(this);
$('img').eq(listPos).fadeIn(300);
});
To minimally change your code replace your code
var listPos = $('ul').index(this);
with this:
var listPos = $('ul li').index(this);
or, better:
var listPos = $(this).index();
To answer the second part of your question you might want to refer to this answer: How to overlay images, or this Image over Image CSS