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
Related
So, as the title says, I want to put <ul> around an image. The ul got 4 <li>, and I want to put 2 <li> on the left side of the image, and 2 <li> on the right side:
<ONE>-----<TWO>-----(imageLOGO.png)-----<THREE>-----<FOUR>
Here is how it looks at the moment:
As you can see the 4 <li> are at the top left corner of the site. They are put on the blue line from the same <div> - #line . I tried with padding, but it looks really bad, and it is hard to control once the page is minimized or resized in any way.
Here is the html file:
<body>
<div id="line">
<div class="line-menu">
<ul class="menu-buttons">
<li>ONE</li>
<li>TWO</li>
<li>TREE</li>
<li>FOUR</li>
</ul>
</div>
</div>
<div id="top">
<div id="logo">
<img src="images/chelsea-logo.png">
</div>
</div>
</body>
And the css file:
body {
background: url('../images/background.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin: 0;
}
#top{
width: 150px;
margin: 0 auto;
height: 150px;
z-index: 1;
}
#top img {
position: absolute;
width: 150px;
height: 150px;
z-index: 1;
}
#top img:hover {
width: 158px;
height: 158px;
transition: all 0.3s ease;
}
#line {
position: absolute;
top: 0px;
width: 100%;
height: 75px;
background: #423BD9;
}
.line-menu {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.line-menu ul {
display: inline-block;
padding: 5px;
margin: 25px;
}
.line-menu li {
padding: 0 89px;
display: inline-block;
}
I'll provide more information if needed. Thank you in advance for your time.
Here is one way of doing it.
You have the right idea by using absolute positioning to place the logo over the link panel.
I specified a width for the li elements and then applied text-align: center on the parent ul to keep then centered.
To open up space for the logo, I added a right-margin of 200px between the 2nd and 3rd li elements, using the nth-child selector.
You can adjust margins on various elements to control the spacing between and above the li elements.
Note, for smaller screena, you may need to use media queries and make adjustments to the margins and so on.
body {
margin: 0;
}
#top {
border: 1px dotted black;
position: absolute;
top: 0px;
left: 0;
right: 0;
text-align: center;
}
#top img {
vertical-align: top;
width: 150px;
height: 150px;
}
#top img:hover {
width: 158px;
height: 158px;
transition: all 0.3s ease;
}
#line {
position: absolute;
top: 0px;
width: 100%;
height: 75px;
background: #423BD9;
}
.line-menu {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.line-menu ul {
display: block;
text-align: center;
margin: 20px 0 0 0;
padding: 0;
}
.line-menu li {
display: inline-block;
margin: 0 20px;
width: 100px;
border: 1px solid #CCCCCC;
}
.line-menu li:nth-child(2) {
margin-right: 200px;
}
<div id="line">
<div class="line-menu">
<ul class="menu-buttons">
<li>ONE</li>
<li>TWO</li>
<li>THREE</li>
<li>FOUR</li>
</ul>
</div>
</div>
<div id="top">
<div id="logo">
<img src="http://placehold.it/150x150">
</div>
</div>
Add image after one and two. And .list-menu li float:left; display:block;
How can I make the image overflow height responsive?
The images I have sometimes have long heights which make the window scroll bar visible.
So I want to make these heights responsive - to make the image being scaled down to fit the window height.
Is it possible?
CSS,
html, body {
height: 100%;
margin: 0;
padding: 0 0;
border: 4px solid black;
}
.container-fluid {
height: 100%;
display: table;
width: 100%;
padding-right: 0;
padding-left: 0;
border: 4px solid blue;
}
.row-fluid {
height: 100%;
display: table-cell;
vertical-align: middle;
width: 100%;
border: 4px solid red;
}
.centering {
float: none;
margin: 0 auto;
}
HTML,
<div class="container-fluid">
<div class="row-fluid text-center">
<div>
<img src="images/xxx.jpg" class="img-responsive centering">
</div>
</div>
</div>
You can use height: 100% and vertical-align: top on img and on parent element use height: 100vh
body, html {
margin: 0;
padding: 0;
}
div {
display: inline-block;
height: 100vh;
width: 100%;
text-align: center;
}
img {
height: 100%;
vertical-align: top;
}
<div>
<img src="http://placehold.it/400x850">
</div>
Replace the .centering class by the built-in .center-block of bootstrap
Then add a new class .myimg
.myimg {
margin: 0 auto;
position: absolute;
height:100%;
top:0;
bottom:0;
}
Check this fiddle https://jsfiddle.net/wo2eysh8/3/
I'm writing an html page that should have the following behavior:
When loaded it contains an empty <div> with a link inside it.
Once pressed the link runs the script StartTrial.js which is supposed to load an image from a directory, visualize it, and give some instructions on what to do.
However, as you can see, once the image is loaded it covers the instructions. This is cause the instructions are written in a <div> that has a margin of 30px from the container <div> with its size before loading the image. How can I fix my code so that the text is always shown with a 30px margin from the bottom of the image?
Here are my code snippets:
Html
<div id="container">
Start Trial
<img class="displays" id="t1_img" src="./images/immi.jpg">
</div>
<div class="instruction" id="instr_1">
<p><b>Instruction:</b><p>
<p>Some text here.</p>
</div>
CSS
#container {
position: relative;
background: gray;
width: 300px;
height: 300px;
margin: 30px;
}
.displays {
position: absolute;
display: none;
top: 0px;
left: 0px;
}
JavaScript
function StartTrial() {
$('#startTrial').hide();
$('#t1_img').show();
$('#instr_1').show();
}
Change your css to use min-height and min-width
#container {
position: relative;
background: gray;
min-width: 300px;
min-height: 300px;
margin: 30px;
}
and remove the absolute positioning, as there is no real need for it.
.displays {
display: none;
top: 0px;
left: 0px;
}
Your image is larger than the container and hence it is overlapping the instructions.
No need to over-engineer it, you can have a css only solution or a simple JS one as follows:
CSS only solution
HTML:
<input type="checkbox" id="startCheckbox" class="start-checkbox"/>
<div id="container" class="container">
<label for="startCheckbox" class="start-trial center">Start Trial</label>
<div class="instruction center" id="instr_1">
<p><b>Instruction:</b></p>
<p>Some text here.</p>
</div>
</div>
CSS:
.center {
position: absolute;
top:0; right:0; bottom:0; left:0;
margin: auto;
}
.container {
border: 1px solid #ccc;
width: 400px;
height: 400px;
position: relative;
}
.container .instruction {
border: 1px dashed #333;
background: rgba(255,238,221,.9);
width: 250px;
height: 250px;
padding: 25px;
text-align: center;
display: none;
}
.container .start-trial {
position: absolute;
height: 20px;
width: 80px;
text-decoration: underline;
cursor: pointer;
}
.container .start-checkbox {
display: none;
}
.start-checkbox {
display: none;
}
.start-checkbox:checked ~ .container .start-trial {
display: none;
}
.start-checkbox:checked ~ .container .instruction {
display: block;
}
.start-checkbox:checked ~ .container {
background: url(http://www.ceritaspros.com/dev/images/dogs/FunnyPuppies/funny-puppies-sleeping-400x400.jpg);
}
Fiddle: http://jsfiddle.net/qobbkh6f/5/
CSS+JS Solution
HTML:
<div id="container" class="container">
Start Trial
<div class="instruction center" id="instr_1">
<p><b>Instruction:</b></p>
<p>Some text here.</p>
</div>
</div>
CSS:
.center {
position: absolute;
top:0; right:0; bottom:0; left:0;
margin: auto;
}
.container {
border: 1px solid #ccc;
width: 400px;
height: 400px;
position: relative;
}
.container .instruction {
border: 1px dashed #333;
background: rgba(255,238,221,.9);
width: 250px;
height: 250px;
padding: 25px;
text-align: center;
display: none;
}
.container.clicked {
background: url(http://www.ceritaspros.com/dev/images/dogs/FunnyPuppies/funny-puppies-sleeping-400x400.jpg);
}
.container.clicked .start-trial {
display: none;
}
.container.clicked .instruction {
display: block;
}
.copntainer.clicked .instruction {
display: block;
}
.container .start-trial {
position: absolute;
height: 20px;
width: 80px;
}
JS:
$("#container").on("click", "#startTrial", function(e) {
e.preventDefault();
$("#container").addClass("clicked");
});
Fiddle: http://jsfiddle.net/qobbkh6f/3/
Try this and let me know if it helps
HTML
<div id="container">
Start Trial
<img class="displays" id="t1_img" src="./images/immi.jpg">
</div>
<div class="instruction" id="instr_1">
<p><b>Instruction:</b><p>
<p>Some text here.</p>
</div>
CSS
#container {
position: relative;
background: grey;
width: 300px;
height: 300px;
margin: 30px;
overflow:hidden
}
.displays {
position: absolute;
top: 0px;
left: 0px;
max-height:100%;
}
Javascript
function StartTrial() {
$('#startTrial').hide();
$('#t1_img').show();
$('#instr_1').show();
}
http://jsfiddle.net/5jx3dn44/
Don't use absolute positioning on your image.
The whole concept of absolute positioning is to make an element overlap the other elements on the page. If you don't want something to overlap other elements then don't use it.
Also don't give a size to your container. It's not the container that's 300x300 and grey - it's your start trial block. If the container is invisible and flexible then it will look good with the image in it when you remove the start trial block. I forget how hide() works but just change to display:none if it doesn't actually remove the element from the layout.
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/
I'm trying to have the menu overlap content, but as of now it moves the content box away.
I've already tried the position: relative trick, but the problem doesn't seem to go away. The solution is probably something really obvious, but I need help finding it.
EDIT: Sorry, forgot to add, the box will also be resizable() so I'm trying to avoid absolute positioning.
EDIT2: nevermind, right:5px fixes that problem
JSFiddle
HTML
<div class="box">
<div class="top">
<div class="icon"></div>
<div class="menubox">
<ul class="menu">
<li>Menu Option 1
</li>
<li>Menu Option 2
</li>
</ul>
</div>
</div>
<div class="content">
<p>content goes here</p>
</div>
<div class="content">
<p>content goes here</p>
</div>
</div>
CSS
.box {
width: 400px;
height: 200px;
margin: 5px;
float: left;
background: LightGray;
border: 1px solid DarkGray;
overflow: hidden;
}
.top {
width: 100%;
height: 25px;
background: lightblue;
}
.icon {
float: right;
background: red;
height: 15px;
width: 15px;
margin: 5px;
}
.menubox {
float: right;
background: yellow;
position: relative;
z-index:100;
width: 150px;
}
.content {
width: 180px;
height: 165px;
margin: 0px 10px 47px;
float: left;
position: relative;
z-index: 0;
display: block;
background:DarkGray;
}
li {
list-style-type: none;
text-decoration: none;
}
ul {
margin:none;
padding:none;
}
JS/jQuery
$('.icon').mouseover(function () {
$(".menu").show();
}); //toggle menu on hover
$(".menu").mouseleave(function () {
$(this).hide();
});
use position: absolute?
fiddle
.menubox {
float: right;
background: yellow;
position: relative;
z-index:100;
width: 150px;
top: 25px;
right: 5px;
position: absolute;
}
.box {
width: 400px;
height: 200px;
margin: 5px;
float: left;
background: LightGray;
border: 1px solid DarkGray;
overflow: hidden;
position: relative; /* add this */
}
Edit: better position
The yellow menubox needs to be positioned absolutely so it does not interfere with the flow of the document (take up space).
Give it a position:absolute;
Furthermore, the .box element needs to have a position:relative so the menu is positioned relative to that box.
Updated your fiddle for you:
http://jsfiddle.net/CcVnL/11/
Check the below link i have updated your code.
"jsfiddle.net/CcVnL/9/"