I have tried many different techniques in order to vertically align a div to the bottom of another div, does anybody have any idea as to how I could do this? I have tried a lot of things, but nothing seems to be working! :(
<div class="containerBlog">
<div class="infoBlog">
</div>
</div>
The inner div is a cricle in my code.
CSS:
.containerBlog { position:relative; }
.infoBlog { position:absolute; }
JS:
var container = document.querySelector(".containerBlog");
var info = document.querySelector(".infoBlog");
var cHeight = container.offsetHeight;
var iHeight = info.offsetHeight;
var top = cHeight / 2 - iHeight / 2;
info.setAttribute("style", "top:" + top + "px");
Try something like that?
Wait, I totally misunderstood your question. you simply want to position the div to the bottom of the parent?
Simply absolutely position it so.
CSS:
.containerBlog { position:relative; }
.infoBlog { position:absolute; bottom:0; }
You could use the display table and vertical align technique in your css
.containerBlog {
display:table;
vertical-align:middle;
}
.infoBlog {display:table-cell;}
I don't know if I'm clear enough let me know if this helped you
Related
I have a div that is supposed to follow the pointer, but it stays very far from the pointer right now, though it follows it.
I've tried some different codes, both written by me, suggested on here, or found online, but nothing helped.
Right now the one that works best is this..
var currentMousePos = { x: -1, y: -1 };
$(document).mousemove(function(event) {
currentMousePos.x = event.pageX;
currentMousePos.y = event.pageY;
$(".hidden-img").css('top', currentMousePos.y);
$(".hidden-img").css('left', currentMousePos.x);
});
I've also tried this http://jsfiddle.net/BfLAh/1/ but it doesn't work as in the fiddle
It follows the pointer but it's very far from the top left of the pointer.
I have managed to go with this code and make it work, at least the positioning
$(document).ready(function() {
$(".list-item").mousemove(function(e) {
var offset = $(".list-item").offset();
$("#hoverDisplay").animate({
left: e.pageX - offset.left,
top: e.pageY - offset.top
}, 1);
});
});
Now the only problem that stays is, I have 20+ "li" items that have to get hovered and show their own hidden div.
Here is the code of just 2 "li" elements.
<li class="list-item" style="background-color: #03C0A4;">
<div class="small-title" style="color:#E07354">nevaly</div>
<a href="a-project-called/nevaly/index.html" style="color:#E07354" class="project-title" onmouseenter=toggleHiddenDisplay("hoverDisplay") onmouseout=toggleHiddenDisplay("hoverDisplay")>Connecting brands and influencers - no limits.</a>
<div class="hidden-img" id="hoverDisplay" style="display:none;">
<img src='a-project-called/nevaly/thumb.gif'>
</div>
</li>
<li class="list-item" style="background-color: #f8e975;">
<div class="small-title" style="color:#e32e1d">Kulturhavn</div>
<a href="a-project-called/kulturhavn/index.html" style="color:#e32e1d" class="project-title" onmouseenter=toggleHiddenDisplay("hoverDisplay") onmouseout=toggleHiddenDisplay("hoverDisplay")>Ahoy! From the cultural harbour of Copenaghen.</a>
<div class="hidden-img" id="hoverDisplay" style="display:none;">
<img src='a-project-called/kulturhavn/thumb.gif'>
</div>
</li>
Now when I hover just the first hidden div content gets shown.
How can I take the hoverDisplay of the hovered "li" element using the JS that I wrote (thanks to you also guys!)?!
Thanks
If you want to match the position of image's top left corner and mouse pointer, then jsut set negative margin-top, and margin-left for you image like below:
$(document).ready(function () {
$("body").mousemove(function (e) {
$("#image").animate({
left: e.pageX,
top: e.pageY
}, 1);
});
});
body {
overflow:hidden;
position:absolute;
height:100%;
width:100%;
background:#efefef;
}
#image {
height:50px;
width:50px;
margin-top:-10px;
margin-left:-10px;
position:absolute;
}
<div id="container">
<img id="image"></img>
</div>
Here is its link to check it online in fiddle.
UPDATE
If your only reason for detecting mouse position is to show and hide the content of list items, then you don't need to detect mouse position manually, you can do it using jQuery with ease. First add this selector to your CSS file:
li.list-item div {
display: none;
}
And then you can show child of each .small-item using mouseover and children like below:
$(document).ready(function() {
$('.list-item').mouseover(function() {
$(this).children('.small-title').show();
}).mouseout(function() {
$(this).children('.small-title').hide();
});
})
We can get rid of this because as you mentioned in your comment you just want to fix the child state.
.mouseout(function() {
$(this).children('.small-title').hide();
})
I have created a slideshow which sits inside a div element. The images are not added in the html, but through javascript and adjust their class attribute to fade In and Out.
I am trying to add buttons over the images for next and previous slide.
Problem I'm having is that the img tags are showing on screen and inside the html structure shown in the debugger, but when I examine the element the div is at the top with height 0px above the images? So the images are not sitting inside.
The reason for this is that I want to add buttons positioned relative to the containing div element (to ensure they stay on the left/ middle and right/middle of the image when the window is resized.
To clarify; I need to add the images inside the div #container so that the size/ position are relative to it. I then want to add the other images as buttons also relative to the div so that they remain in position when the screen is resized. How do I do this?
Demo
HTML
<div id="container">
<!--IMG elements created in JS go here-->
<img class="previous_button" src="symbols/PreviousArrow.png"/>
<img class="next_button" src="symbols/NextArrow.png"/>
</div>
<script src = "jsScript.js" type="text/javascript"></script>
CSS
#container {
position: relative;
z-index:1;
width:50%;
height:600px;
top:20%;
border:10px solid black;
}
#container img#main {
transition:opacity 2s;
z-index:1;
position:absolute;
top:20%;
opacity:0;
width:25%;
}
#container img#main.fadeIn {
opacity:1;
z-index:100;
}
.previous_button {
position:absolute;
margin-left:8%;
height:35px;
width:35px;
}
.previous_button:hover {
opacity:1;
}
.next_button {
position: absolute;
height:35px;
width:35px;
}
.next_button:hover {
opacity:1;
}
JAVASCRIPT
var curIndex=0;
var imgDuration=2000;
var timeout;
var images;
var links;
var container=document.getElementById("container");
function getImageAndLink(){
images=document.querySelectorAll('img[id]');
};
var imageArray=[
{link:"page1.html", src:"image1.gif", id:"main"},
{link:"page2.html", src:"image2.gif", id:"main"},
{link:"page3.html", src:"image3.gif", id:"main"}
];
function create(arr){
for (i = 0; i < arr.length; i++) {
var imgEl = document.createElement("img");
imgEl.src=arr[i].src;
var id=arr[i].id;
imgEl.setAttribute("id",id);
var imgElA = document.createElement("a");
var link=arr[i].link;
imgElA.setAttribute("href", link);
imgElA.setAttribute("id",id);
imgElA.appendChild(imgEl);
container.appendChild(imgElA);
}
};
function slideshow() {
images.item(curIndex).className="fadeIn";
links.item(curIndex).className="fadeIn";
var interval=setInterval(function(){
images.item(curIndex).className="";
curIndex++;
if (curIndex==images.length) {
curIndex=0;
};
images.item(curIndex).className="fadeIn";
},imgDuration);
function stopSlide(){
clearInterval(interval)
};
container.addEventListener('mouseover', stopSlide, false);
container.addEventListener('mouseout', slideshow, false);
};
create(imageArray);
getImageAndLink();
slideshow();
Looks like your issue is that the inner content of the DIV has Absolute position and then they come out of the DIV on the dom, so makes it to have the 0 height.
with taking out the absolut position of those seem to have the height (added a border to the div so that you can see):
took out the position of these like this:
.previous_button {
margin-left:8%;
height:35px;
width:35px;
}
https://jsfiddle.net/gqjcpa0m/3/
http://jsfiddle.net/jZLW4/702/
I want the center divs to be exactly under eachother, so in this example there would be a bigger empty space between the left and center, center and right. Is this accomplishable?
Something like this (made in mspaint):
-
Bootstrap would make things easy:
<div class="col-md-4">
<!--first column-->
<div class="pull-right">Some content
</div>
<div class="pull-right">Some content
</div>
</div>
<div class="col-md-4">
<!--second column-->
<div class="center">Some content
</div>
<div class="center">Some content
</div>
</div>
<div class="col-md-4">
<!--first column-->
<div class="pull-left">Some content
</div>
<div class="pull-left">Some content
</div>
</div>
More about the Grid-System
CSS for centering div in div:
.center{
width: 50%; /*or every other width...*/
margin: 0 auto;
}
source
If you don't want to use Bootstrap, you can do the Columns and the floating like this:
.col-md-4{
float:left;
width:300px /*or whatever width you want*/
}
.pull-left{
float: left;
}
.pull-right{
float: right;
}
This seems to possible using display: flex which has compatibility with modern browsers. If we go with javascript, then here is the code:
Codepen
function setAlign(parentClass, childCommonClass) {
var childDivs = document.getElementsByClassName(childCommonClass);
var childDivsTotalWidth = 0;
var childDivsLength = childDivs.length;
var parentElement = document.getElementsByClassName(parentClass)[0];
var parentElementWidth = parentElement.offsetWidth;
for (var i = 0; i < childDivsLength; i++) {
childDivsTotalWidth += childDivs[i].offsetWidth;
}
var remainingWidth = parentElementWidth - childDivsTotalWidth;
var gap = remainingWidth / (childDivsLength - 1);
var leftWidth = 0;
for (var j = 0; j < childDivsLength; j++) {
if (j > 0) {
leftWidth += gap + childDivs[j - 1].offsetWidth;
}
childDivs[j].style.left = leftWidth + "px";
}
}
window.onload = setAlign('row', 'box');
window.onresize = function () {
setAlign('row', 'box');
}
First you'd need some type of parent element to add some adjustments to. Then you can simply change the display type of the first level type of child element within and use no extra class names or floats or clears. With a bit more specificity on the first level children you can make it not apply text-align center to the content within the actual divs being center.
Here's a LIVE example.
This example also has a couple more css lines of bullet proofing applied to it. Adjust to hearts content. Also in this example depending browsers width etc... it will responsively center or all be on one row centered together too. Any element that wraps will stay centered.
http://jsfiddle.net/jonnyborg/epebr0cu/1/
HTML
<!-- This style should be a Conditional Stylesheet for IE7 and below. calling it up top in the HEAD area.
.my_parent_element {display:block; margin:0 auto;}
.my_parent_element div {display:inline;}
-->
<div class="my_parent_element">
<div>Content 1</div>
<div>Content 2</div>
<div>Content 3</div>
</div>
CSS
/* other than IE7 and down. All other browsers & versions firefox, chrome etc... render. */
.my_parent_element {
text-align: center;
}
.my_parent_element div {
min-width: 10px;// give it a little substance just in case, but depends on your design especially for responsive layout.
display: inline-block;
float: none;
clear: none;
}
/*
Then see my HEAD Conditional Statement for IE7 and below fix. All other versions of IE will render this perfectly without the fix.
*/
I am planning to prepend two divs at certain interval of time to a main div which holds 5 divs. When i prepend a new div it should hide the last div in the list.
Here i have made a fiddle http://jsfiddle.net/vivekdx/53aht/
Html
<div class="container">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
</div>
CSS
.container{ width:300px; height:300px; background:#eee;}
.child{ width:280px; margin:10px; height:40px; background:#ccc; float:left; text-align:Center; font-size:30px;}
Script
for (i = 0; i < 2; i++)
{
setInterval(function ()
{
$(".container").prepend('<div class="child">6</div>');
}, 1000);
}
But it is not working good.
When i prepend 6th div 5th have to be hided likewise 4th div for 7th div ...
And also i haven't looping it correctly. Guide me here
So you only want to have the first five elements visible. You can limit the collection to all elements starting with nth using jQuery slice() method.
// prepend a <div />, then get all the children, skip the first 5 and hide the rest.
$(".container").prepend('<div class="child">6</div>').children().slice(5).hide();
Updated fiddle: http://jsfiddle.net/53aht/4/
Here is what you want to do.
http://jsfiddle.net/53aht/11/
but keep in mind that your DOM is growing every time you are adding new div so consider removing (delete) it form the DOM.
var counter = 10;
function addDiv() {
$(".container").prepend('<div class="child">' + (++counter) + '</div>');
setTimeout(addDiv, 1000);
}
addDiv();
CSS:
.container {
width:300px;
height:300px;
background:#eee;
overflow:hidden;
}
Try something like this:
for (i = 0; i < 2; ++i)
{
setTimeout(function() {
$(".container").prepend('<div class="child">6</div>').children().slice(5).hide();
} , i * 1000);
}
I would want to simulate the behavior of a table with div.
I have a struct of my layout divide into three columns:
div#wrapper {
width:800px;
float:left;
height:100%;
margin-top:7px;
text-align:center;
}
div#left {
width:167px;
float:left;
padding-bottom:50px;
margin-right:3px;
}
div#main {
width:454px;
float:left;
}
div#right {
width:167px;
float:left;
margin-left:3px;
}
wrapper is the container of three columns left,main,right
div "main" have a variable content so in some case is more long and in other case is very short. When the content vary,div wrapper is adapted and it's ok but left and right columns don't adapt to wrapper.
P.S Without doctype there is no problem, infact I set the height of left, main and right to 100% but when I insert transional.dtd , the height of div is not considered.
How can resolve this problem?
Sorry for my english!!
I agree with #Neurofluxation so let's see what I can find on Google:
100% Height Layout Using CSS
and
CSS Faux Columns
You could try to insert:
min-height: 100%;
as well, to cover yourself :)
I try to use
min-height:100%;
but I can solve the problem.
I read in different forum that is not possibile with xhtml fixed height:100% with a div, and that the only one method to solve this problem is to use JQuery?
you should use jQuery
<script type="text/javascript">
$(this).load(function() {
alert(document.documentElement.clientHeight + '+' + $(window).height());
if ($(window).height() - 250 > 300)
$('#content').css('min-height', '224px');
else
$('#content').css('min-height', $(window).height() - 250);
}
);
$(this).resize(function() {
if ($(window).height() - 250 > 300)
$('#content').css('min-height', '224px');
else
$('#content').css('min-height', $(window).height() - 250);
}
);
</script>
<div id="content" style="min-height:350px;">
</div>
just change numeric digits of hights.