Two rows of divs floating right - javascript

I am working on a responsive web design that positions divs floated right, but in two rows.
Once the container div becomes two narrow, the tile divs will move down to form a new row.
For example
<div id="container">
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
</div>
.tile {
height:96px;
width:96px;
}
Would display three divs in the first row, and two more in a row under the first row.
If the page is re-sized and the container becomes two narrow for the first row, div tiles should move to form a new row.
Thanks!

you have to nest the first 3 divs and the second 2 divs. You also need to 'divide' these 2 divs, so they build 2 rows (done with css:clear) in order to achieve what you pretend:
html:
<div id="container">
<div class="firstrow">
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
</div>
<div class="clear"></div>
<div class="secondrow">
<div class="tile"></div>
<div class="tile"></div>
</div>
</div>
css:
.tile {
height:96px;
width:96px;
float:right;
border: 1px solid red;
}
.clear{clear:both;}
see the example here: http://jsfiddle.net/hbrunar/R59Qe/1/

I assume you're looking for this?
.tile {
height:96px;
width:96px;
float: left;
}

You should add "float:left" property to your class="tile", otherwise it will just render all div one below other.
Thanks.

Related

position().left isn't giving the expected value

In the employee section of a Wordpress site, I'm trying to have the bio slide open in the correct position when you click on each employee photo.
It's working well when the row is full width (4 columns) and in mobile (1 column) but in the 2 column layout (480px to 882px), position().left is returning 0, so the negative margin isn't being properly applied and the bio goes offscreen.
I can't for the life of me figure out why this is... Any help is greatly appreciated!
The site in question: http://contractor-marketing.website/
The HTML (simplified):
<div class="row">
<div class="column column_1">
<!--content-->
<div class="bio-full"><!--content--></div>
</div>
<div class="column column_2">
<!--content-->
<div class="bio-full"><!--content--></div>
</div>
<div class="column column_3">
<!--content-->
<div class="bio-full"><!--content--></div>
</div>
<div class="column column_4">
<!--content-->
<div class="bio-full"><!--content--></div>
</div>
</div>
The JS:
jQuery('.column').each(function(s, el) {
jQuery(this).find('.bio-full').eq(0).css('margin-left',-(jQuery(el).position().left));
});
Check my example below. Although I took a different approach, it essentially does what you want, and it even animates the element transition.
NOTE: This animation will happen EACH time you press the animate button. You must prevent such animation from happening more than once (if that is the behavior you are looking for). Also, change the $('#animate') selector and click event to the event of your choice.
$('#animate').click(function() {
$(".bio-full").animate({
left: "+=300",
}, 1000, function() {
// Animation complete.
});
});
body{
padding:0;
margin:0;
}
.bio-full{
background-color: red;
display:hidden;
position:relative;
width:300px;
left:-300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="animate">Animate</button>
<div class="row">
<div class="column column_1">
<!--content-->
<div class="bio-full"><h1>Profile</h1></div>
</div>
<div class="column column_2">
<!--content-->
<div class="bio-full"><h1>Profile</h1></div>
</div>
<div class="column column_3">
<!--content-->
<div class="bio-full"><h1>Profile</h1></div>
</div>
<div class="column column_4">
<!--content-->
<div class="bio-full"><h1>Profile</h1></div>
</div>
</div>
I hope this helps!
Cheers!

Mansonry layout responsive gutter

I'm trying to make a mansonry-like layout but with elements that have responsive sizes. The sizes are limited though, they can only be multiples of the smalles rectangle. The idea is that I can have 1x1, 1x2, 2x2, 2x1 elements that fit the best place possible in the page.
I saw some questions like this before but the answer was always something unuseful like 'use bootstrap'. I tried bootstrap grid, skeleton grid and many other already. None of them can handle elements that overlap columns.
I'm using Mansonry js library now, and I'm almost there. There is only one glitch that I'm not beeing able to solve. Mansonry for some reason doesn't like when I make a 2x2 element. It breaks the gutter (even when I include the exact gutter size in the elements width).
Things to note, I'm using a variable (percetage) element width and a height based on that width.
My test html part:
<div class="container">
<div class="grid">
<div class="grid-sizer"></div>
<div class="gutter-sizer"></div>
<!-- Exemplo divisão -->
<div class="grid-item"> </div>
<div class="grid-item"> </div>
<div class="grid-item grid-item--width2"> </div>
<div class="grid-item"> </div>
<div class="grid-item"> </div>
<div class="grid-item"> </div>
<div class="grid-item"> </div>
<div class="grid-item"> </div>
<div class="grid-item"> </div>
</div>
</div>
My css:
.container {
margin-left: auto;
margin-right: auto;
width: 90%;
}
.grid-sizer,
.grid-item {
width: 33%;
background-color: #666;
margin-bottom: 0.20%;
margin-top: 0%;
}
.gutter-sizer { width: 0.5%; }
.grid-item:before{
content:"";display:block;padding-top:50%;
}
.grid-item--width2{
width: 66.5%;
background-color: #555;
}
This is getting me: http://s23.postimg.org/knxbt44xn/gutter.png
Hello, myself.
I solved it. I tested: Masonry, Nested, Skeleton, Boostrap, (Doing manually), (some cms plugins)...
Finally, the answer was: Freewall.
https://github.com/kombai/freewall
This plugin solves nesting and gutter both vertically and horizontally. If you set widths and heights in proportion, it just works. Actually according to my tests, it works with anything you set. Has tons of options too. I love it!
<div class="container">
<div id="freewall">
<!-- Exemplo divisão -->
<div class="brick"> </div>
<div class="brick two"> </div>
<div class="brick"> </div>
<div class="brick"> </div>
<div class="brick tall"> </div>
<div class="brick"> </div>
<div class="brick"> </div>
<div class="brick"> </div>
</div>
</div>
My final js:
// jQuery
$(document).ready(function() {
var wall = new freewall("#freewall");
wall.reset({
selector: '.brick',
cellW: 320,
cellH: 160,
fixSize: 0,
gutterX: 5,
gutterY: 5,
onResize: function() {
wall.fitZone();
}
});
$(window).trigger("resize");
});
The css just sets the width to 33% (66% on wide), and height to 50% on normal and 100% on tall (heighs based on width using padding top).

How to change the text inside a div by hovering over other elements

So basically I am making some concept logic for a project I am working on. It's a portfolio with boxes of images and I want to be able to change the value of a h2 to some description text based on the box that was hovered on.
Right now it's just a black box so 'square1, square2, square3...etc' will work for now. I looked up some stuff on jquery and found this link from a stackoverflow answer. This does what I need but is only shifting through one piece of information instead of many in my case.
Wondering how I can achieve that via jquery. I imagine I would need to make an array with all the descriptions I need, and (this is where I am lost) somehow attach the value of array to the square and then from there change text of h2 to the array value.
Thanks for any help in advance here's what I have so far (not much just did some foundation work). Not sure if this matters but if there is no hover I want the h2 to say nothing.
HTML (makes me post code if I have jsfiddle)
<div class="squares">
<div class="square1"></div>
<div class="square2"></div>
<div class="square3"></div>
<div class="square4"></div>
<div class="square5"></div>
<h2 class="squareIdent"> </h2>
</div>
You can implement this using data attribute to hold your description that you want your box to load in the h2 -
Working Example - http://codepen.io/nitishdhar/pen/CdiHa
Explanation
Write your HTML in this structure -
<div class="squares">
<div class="square" data-content="Alpha"></div>
<div class="square" data-content="Beta"></div>
<div class="square" data-content="Gamma"></div>
<h2 class="square-data-holder"></h2>
</div>
Notice I have added data-content that will hold whatever text you want it to hold. We will use this to extract the same when we have to fill it in the h2.
Use this jQuery snippet to achieve the hover effect -
$(document).ready(function() {
$('.square').hover(
function() {
$('.square-data-holder').text($(this).data('content')).fadeIn('slow');
}, function() {
$('.square-data-holder').fadeOut('slow');
});
});
hover() takes two handlers to handle hover in & hover out - $( selector ).hover( handlerIn, handlerOut ), Refer - http://api.jquery.com/hover/
So on hover of any of the div's with class square, we get hold of the content of the div that was hovered using -
$(this).data('content')
And we append the same to the h2 element. On hover out, we just make h2 empty.
This should do what you want.
Judging by the example at http://danielmarkiewicz.com/ it looks like you may need to have formatted content inserted into the heading. Here is one approach to do that with HTML content inside each square.
Demo here
HTML
<div class="squares">
<div class="square square1">
<span class="heading">
<h1>Square 1</h1>
<h2>Details</h2>
</span>
</div>
<div class="square square2">
<span class="heading">
<h1>Square 2</h1>
<h2>Details</h2>
</span>
</div>
<div class="square square3">
<span class="heading">
<h1>Square 3</h1>
<h2>Details</h2>
</span>
</div>
<div class="square square4">
<span class="heading">
<h1>Square 4</h1>
<h2>Details</h2>
</span>
</div>
<div class="square square5">
<span class="heading">
<h1>Square 5</h1>
<h2>Details</h2>
</span>
</div>
<header class="squareIdent"></header>
</div>
CSS
.heading { display: none; } // Hide the heading content within Squares
JavaScript
$(document)
.on('mouseover', '.square', function(e) {
var self = $(this),
headingContent = self.find('.heading').first().html();
$('.squareIdent', self.closest('.squares')).html(headingContent);
})
.on('mouseout', '.square', function(e) {
var self = $(this);
$('.squareIdent', self.closest('.squares')).html(null);
})
;
DEMO
I am probablly late as Nitish already gave a good answer but here is what i have done.
HTML:
<div class="squares">
<div class="square1" data-text="I am Square 1"></div>
<div class="square2" data-text="I am Square 2"></div>
<div class="square3" data-text="I am Square 3"></div>
<div class="square4" data-text="I am Square 4"></div>
<div class="square5" data-text="I am Square 5"></div>
<h2 class="squareIdent"> </h2>
</div>
CSS:
div.square1, div.square2, div.square3, div.square4, div.square5
{
height: 100px;
width: 100px;
background-color: black;
margin-left: 126px;
margin-top: 150px;
float: left;
}
div.squares
{
margin-left: 175px;
}
.squareIdent{
opacity: 0;
}
JS:
$(".squares > *").hover(function(){
$(".squareIdent").text($(this).attr("data-text"));
$(".squareIdent").stop().animate({
opacity: 1
}, 500);
}, function(){
$(".squareIdent").stop().animate({
opacity: 0
}, 500);
});
Note i have added the Animation as you showed in your question.

Remove an item from grid which should have always exactly 6 columns

I have an html structure like shown in this fiddle: http://jsfiddle.net/VrkU5/7/. I hope it is clear enough.
div.item with .item only class is item which contains something, let say an image. div.item.empty is empty, with a placeholder.
Row example:
<div>
<div class="row-fluid">
<div class="span2">
<div class="item">1</div>
</div>
<div class="span2">
<div class="item">2</div>
</div>
<div class="span2">
<div class="item">3</div>
</div>
<div class="span2">
<div class="item"> </div>
</div>
<div class="span2">
<div class="item empty"> </div>
</div>
<div class="span2">
<div class="item empty"> </div>
</div>
</div>
</div>
Problem:
I want to remove an item form this list and replace it with an empty one. Everything is working fine, I can remove it and append an empty one to div.row-fluid. But my problem is that I could have multiple rows....
If one item is removed from a row, script should get one item from next, closest row, append it to first row (from which item was removed), and append empty.
I need to have always 6 item in each row.
I am looking forward for the simplest way of doing this. I am using jQuery. Anyone got an idea?
The problem is bootstrap actually, it was causing a ton of problems. I removed it from JS fiddle and used this CSS as well as added a clearer div at the bottom.
http://jsfiddle.net/VrkU5/23/
.row-fluid > div.span2{float:left;margin-left:0px;width:16%;}
.clearer {clear:both;}
.item {
width: 86%;
padding: 5%;
color: #fff;
background: #ff0000;
margin-bottom: 10px;
text-align: center;
min-height: 1.4em;
cursor: pointer;
}
.item.empty {
background: #cccccc;
}

Make child div's width grow at the same rate as parent

I have a div with several nested divs. All the child div's are float:left so they are all on the same line. The parent div "newDistractor" has a width of 100% so as it's parent grows it does as well. All of the child nodes have fixed widths of 20px. I want the div "distractorText" to grow at the same rate as it's parent so it occupies all empty space. Any ideas how to do it.
<div class="newDistractor">
<div style="width:20px"> </div>
<div style="width:20px"> </div>
<div class="distractorText">Enter text to add option.</div>
<div style="width:20px"> </div>
<div style="width:20px"> </div>
<div style="clear:left;margin-bottom:-43px;"> </div>
</div>
This could work. It doesn't actually resize the distractorText div, but it might be what you need:
<div class="newDistractor">
<div class="left"> </div>
<div class="left"> </div>
<div class="right"> </div>
<div class="right"> </div>
<div class="distractorText">Enter text to add option.</div>
<div style="clear:left;margin-bottom:-43px;"> </div>
</div>
The CSS for it is basically:
.left { float: left; }
.right { float: right; }
Look at it in action here
edit I cleaned the jsfiddle a little: look now
You could use jQuery's .resize() and then each time count the number of children <div>s, divide it into the current width, and set accordingly.
For this example specifically, you could use margins instead of floating div elements.
<div class="newDistractor">
<div class="distractorText" style="margin:0px 40px;">Enter text to add option.</div>
<div style="clear:left;margin-bottom:-43px;"> </div>
</div>
I haven't tried this right-off, but if you set the width of class "distractorText" to 100%, it should take care of the issue... or to some other "acceptable" percentage (maybe 50).
All religious crusades put aside, the following HTML will do what you need ^L^ :
<table class="newDistractor" style="width:100%">
<td style="width:20px">a</td>
<td style="width:20px">b</td>
<td class="distractorText" style="width:100%">Enter text to add option.</td>
<td style="width:20px">c</td>
<td style="width:20px">d</td>
<td style="clear:left;margin-bottom:-43px;">e</td>
</table>

Categories