I want to implement a button that adds a X number of elements next to each other (horizontally), but lets say everything should look centered, so the first div should appear in the middle, but if I clic again, the second div should appear next to the first one, but they both must look equally centered, and so on.
I really don't know if I explained myself and thanks in advance.
Center-align the container of the divs, and display the divs inline.
$('.newDiv').on('click', function() {
$('.container').append('<div class="test">test</div>');
});
.container {
height: 30px;
width: 100%;
background: aqua;
text-align: center;
}
.test {
display: inline;
background: gold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a class="newDiv" href="#">add div</a>
<div class="container"></div>
Related
I'm using display flex to display multiple items in one big container (parentDiv). The code is working fine but I get big problems with horizontal centering the items (especially If there are only a few items they should get horizontally centered) so I was using justify-content what leads to big issues:
The parent div is not able to display all items anymore. The first item that gets displayed is the item "04" while it should be "01". How to avoid this?
Please have a look at this code:
#bigDiv {
position: absolute;
width: 100%;
height: 100%;
}
#parentDiv {
width: 90%;
height: 50%;
overflow-y: hidden;
overflow-x: scroll;
text-align: center;
white-space: nowrap;
background: red;
display: flex;
justify-content: center;
align-items: center;
}
.item {
color: white;
background: blue;
flex: 0 0 4%;
margin: 0 3%;
}
.item::after {
content: "";
display: block;
padding-bottom: 100%;
}
<div id="bigDiv">
<div id="parentDiv">
<div class="item">01</div>
<div class="item">02</div>
<div class="item">03</div>
<div class="item">04</div>
<div class="item">05</div>
<div class="item">06</div>
<div class="item">07</div>
<div class="item">08</div>
<div class="item">09</div>
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
<div class="item">13</div>
<div class="item">14</div>
<div class="item">15</div>
<div class="item">16</div>
</div>
</div>
See this image:
My intentions: The parent div should be able to show all of the items (starting with "01" - and the last element should be the "16"-one)
Note: If there are only 4 or less items they should get centered horizontally. (The reason why I added justify-content).
You're fiting 160% into 100%. And you want it centered. And it works: the 160% total width of the resulting children is nicely centered.
But you're also expecting whatever is outside the parent to be accessible.
It's pretty much like making a child element go outside of its parent by -30% to the left or to the top (by any other method) and expecting the parent to allow you to scroll to it. It's not going to happen!
If it did, the child would no longer be placed at -30%, it would be placed at 0%. Scrollbars will never scroll to left or top negative space. It's by design. You need to take it into consideration when designing your page.
Whenever you center a bigger child into a smaller parent you won't be able to use parent's scrollbars to scroll to the beginning of the child. So anything preventing the child positioning in the parent's left negative space will fix it.
I have a stars rating image which is controlled using Javascript and CSS to display a rating out of five (in quarter steps, twenty is the dimensions of the star in pixels):
$.fn.stars = function() {
return $(this).each(function() {
var val = Math.round(parseFloat($(this).html())*4)/4;
var size = Math.max(0, (Math.min(5, val)))*20;
var $span = $("<span />").width(size);
$(this).html($span);
});
}
$(function() {
$("#avg-rating").html('<span class="stars">{{ avg_rating }}</span>');
});
span.stars, span.stars span {
display: block;
background: url(stars.png) 0 -20px repeat-x;
width: 100px;
height: 20px;
}
span.stars span {
background-position: 0 0;
}
The image is displayed in a Bootstrap column:
<div class="container-fluid">
<div class="text-center">
<div class="row">
<div class="col-xs-6"><div id="avg-rating"></div></div>
<div class="col-xs-6">blah blah</div>
</div>
</div>
</div>
The image is currently left justified in its column. I have tried several things in CSS to align the image horizontally in its column, such as adjusting the display attribute or background position. But I am unable to move the image without upsetting the functionality of the image manipulation.
Update
Using inline-block instead of block messes up the placement of the stars (image should show four lighted stars out of five):
span.stars, span.stars span {
display: inline-block;
...
Your problem seems to stem from here:
span.stars, span.stars span {
display: block;
background: url(stars.png) 0 -20px repeat-x;
width: 100px;
height: 20px;
}
You've set the star container to 'display: block' which makes it take up the whole line. You want it to be an inline-block with a width smaller than the full-width available so that it can be centred.
Here is an example of how it would work:
https://jsfiddle.net/f6L8gr1b/2/
If your elements with class "col-xs-6" are supposed to be next to each other horizontally, you can use inline-block.
.col-xs-6 {
display: inline-block;
}
The div elements default to block which places them on a new line.
so I wanted an animated footer for my webpage using jquery. There's supposed to be a button which should trigger the animation. I found a nice example for all this, and everything is fine and dandy. Except that the button (including the footer) has this code that makes it stick to the bottom of your web browser, rather than to the bottom of the page. I do [i]not[/i] want it to, like, "scroll" along with the page, I realy want it to be underneath all my other divs. I tried putting it in the div container (which has all my other divs in it as well), but that doesn't seem to work.
Now, (after 2.5 hours of googling) I found out that it might/may/could have something to do with "absolute" positioning in the CSS, so I tried switching some things around such as giving the footer's container a relative position or giving it an "overflow: hidden;" along with the rest a left float but nothing seemed to solve my problem. (I could've done something wrong, not that great with CSS after all :-/)
I hope someone is able/willing to help.
P.S. Here's the example I used:
http://return-true.com/2010/04/jquery-pop-up-footer-version-2/
and here's the code:
Javascript:
jQuery(function($) {
var open = false;
$('#footerSlideButton').click(function () {
if(open === false) {
$('#footerSlideContent').animate({ height: '300px' });
$(this).css('backgroundPosition', 'bottom left');
open = true;
} else {
$('#footerSlideContent').animate({ height: '0px' });
$(this).css('backgroundPosition', 'top left');
open = false;
}
});
});
HTML:
<div id="footerPlacement">
<div id="footerSlideContainer">
<div id="footerSlideButton"></div>
<div id="footerSlideContent">
<div id="footerSlideText">
<h3>Hey! I'm a Sliding Footer</h3>
<p>What's a Sliding Footer? Well I'm a cool little element which can be hidden from view, and revealed when the user wants to see me.</p>
<p>What can you use me for? Well look at all this stuff:</p>
<ul>
<li>Sales information</li>
<li>Important updates</li>
<li>Unobtrusive about panel</li>
<li>Or just a good ol' footer</li>
</ul>
<p>There are obviously many other uses, but these are the few useful ones I can think of.</p>
</div>
</div>
</div>
</div>
CSS:
#footerPlacement {
margin-bottom: 0px;
width: 1000px;
margin-left: auto;
margin-right: auto;
}
#footerSlideContainer {
position: fixed;
margin-left: 0px;
bottom:0px;
width: 1000px;
}
#footerSlideButton {
background: url('../images/footer/footerbtn.png') top left no-repeat transparent;
position: absolute;
top: -55px;
right: 20px;
width:50px;
height:50px;
border: none;
cursor: pointer;
}
#footerSlideContent {
width: 100%;
height: 10px;
background: #251b15;
color: #CCCCCC;
font-size: 0.8em;
border: none;
font-family: DejaVuSansBook, Sans-Serif;
}
#footerSlideText {
padding: 15px 10px 25px 25px;
}
Thanks in advance!
if you change your #footerPlacement to include position:relative, you can change #footerSlideContainer to be position:absolute and then your footer will sit below any content above it.
However you will need to make the content have a min-height of around 350px for the footer to work properly and if your content isn't long enough, the footer won't be at the bottom of the browser.
I also added overflow:hidden to #footerSlideContent. I have made a fiddle to demonstrate:
http://jsfiddle.net/tc6b8/
I have a page, where I'm showing images side by side according to the category they belong to, each image array begins with the category it belongs to. Images vary in their width & height, but are put into a div with an absolute height of 330px.
CSS:
.front-index {
margin: 0 1em 0 2em;
}
.front-work {
margin: 0 2em 2em 0;
display: table;
width: 66px;
position: relative;
height: 330px;
background-color:#f0f0f0;
}
.front-work img {
margin: .3em 0 .3em 0;
}
.wraptocenter {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.wraptocenter * {
vertical-align: middle;
}
.front-index,
.front-work {
float: left;
}
HTML:
<div class="front-index"><p>How to get<br /> this text on the same line with<br /> yellow image on the right?</p></div>
<div class="front-work">
<div class="wraptocenter">
<img width="162" height="250" src="http://images.fanpop.com/images/image_uploads/Yellow-Wallpaper-yellow-646738_800_600.jpg"/>
</div>
</div>
<div class="front-work">
<div class="wraptocenter">
<img width="250" height="166" src="http://www.takenseriouslyamusing.com/wp-content/uploads/2012/08/Blue.png"/>
</div>
</div>
…
JSFIDDLE: http://jsfiddle.net/rCAKa/9/
I'd like to align the text to the same line as the first image on the right.
What I had in mind, is that may-be this should be done in jquery. Ie. somehow measure the image distance from the top inside the .front-work div and then assign the value to the .front-index div as an inline code (top: whatever px ).
Maybe someone of you have faced this kind of problem and know a solution to this kind of problem? CSS or JS.
In my humble opinion I don't think that what you're doing is possible through CSS - it requires some simple JavaScript trickery because you have to know the relative position (from the top of the container) of the first image on the right in order to position the text - something which CSS isn't quite designed for.
The strategy in JS would be:
Loop through each element with text that you want to position
Fetch the vertical top offset of the first image to the right (relative to containing parent)
Set top padding matching to top position of image. Alternatively, you can set the top position, paddings or margins of the child elements, or other ways to reposition the text.
$(document).ready(function() {
$(".front-index").each(function() {
var fromTop = $(this).next().find("img").position().top;
$(this).css({
"padding-top":fromTop
});
});
});
I have forked your fiddle, and you can see it in action here - http://jsfiddle.net/teddyrised/LT54V/1/
p/s: On a related note, .wraptocenter * { } is probably not the best (as in, most efficient) selector out there, because if you have many child elements in the element (who may or may have even more child elements), CSS will have to iterate through all of them. Instead, try using .wraptocenter > * { } or just .wraptocenter img { } :)
I first tried to solve the problem using css. After a while I figured out the following logics:
Create a div with the same height as the cell on the right with the display set as table
Make a table-cell div in the first one that centers vertically
In this div make another subdiv with the same height as the image.
The HTML code is then this:
<div class="front-index">
<div class="front-index-inner">
<div style="height:250px;">
<p>How to get<br /> this text on the same line with<br /> yellow image on the right?</p>
</div>
</div>
</div>
and as my CSS part this:
.front-index {
margin: 0 1em 0 2em;
display: table;
height: 330px;
overflow: hidden;
}
.front-index-inner {
display: table-cell;
width: 100%;
vertical-align: middle;
}
You can see the result over here: http://jsfiddle.net/rCAKa/10/
I hope this brings a solution to you that is clear, understandable and useful.
Greetings,
Jef
I am trying to create a carousel, where clicking on any element will slide it leftwards, simultaneously sliding the right element into viewport. For that, I need to have the divs stacked side by side. I am trying it out as a float based layout (see Fiddle ).
Problem is that here clicking the red colored div slides it leftward alright, but not the green element leftwards. This is probably due to the fact that they are actually lying below another, as visible when the overflow: hidden is removed from #cont's style. How elese to stack them side by side so that sliding one leftward automatically slides the next one leftwards as well? (Creating the to-be-next element on the fly while clicking and animating it into viewport is a no-no, the element should be present in the DOM!)
I'd suggest you use a plugin, as there is more to this than you may realize. There are many plugins out there for this, here's a list to get you started: http://www.tripwiremagazine.com/2012/12/jquery-carousel.html
I modified your Javascript, HTML, and CSS to get you pointed in the right direction:
http://jsfiddle.net/nf5Dh/2/
You need a container contContent, positioned absolutely, and that container gets moved within the container div. You just float the elements in contContent to get them next to each other.
HTML:
<div id='cont'>
<div id="contContent">
<div id='i1'></div>
<div id='i2'></div>
<div id='i3'></div>
</div>
</div>
CSS:
#cont {
width: 50px;
padding-top: 10px;
background: blue;
height: 50px;
overflow: hidden;
position: relative;
}
#contContent {
height: 50px;
width: 150px;
position: absolute;
top: 0;
left: 0;
}
#contContent > div {
float: left;
display: inline-block;
height: 50px;
width: 50px;
}
#i1 { background: red; }
#i2 { background: green; }
#i3 { background: yellow; }
And the JS:
$("#contContent > div").click(function(){
$("#contContent").animate({left: "-=50px"},1000);
});
You'd probably be better off using an ul instead of all divs, this is at least more semantically correct, though not technically necessary.
<div id="carousel">
<ul id="carouselContent">
<li id="slide1"></li>
<li id="slide2"></li>
<li id="slide3"></li>
</ul>
</div>
This:
#cont {
white-space:nowrap;
overflow: hidden;
}
.pane { // or whatever the slide divs are called. get rid of the float.
float: none;
display: inline-block;
*zoom:1;
*display:inline;
}
You can use that carousel where you can generate javascript for the carousel http://caroufredsel.dev7studios.com/configuration-robot.php
I've used http://sorgalla.com/jcarousel/ for things like this in the past, that's based on postion: relative and left/right offsets. Probably easier than messing with floats.
You can try using a list item instead, and display them inline.