How to create customizable, dynamic grid layout using CSS and JavaScript? - javascript

I am working on a project that involves a lot of CSS. The customer wants to have a grid layout on the home page where he wants to be able to rearrange UI components with drag and drop. These UI components could be of different sizes: 1x1, 2x2 and 3x3. When I drop an UI item at the desired new location it should push the other components aside. Any possible holes should be filled with 1x1 components.
How it should work
Before I have draged a component
Draging the 2x2 component
Dropping the component in the middle, the two 1x1 components make room and adapt around the 2x2
Note that the size of the grid is not limited to 8 1x1, but the height as well as the width of it should be possible to expand and make smaller.
I’ll rather not use tables but other than that I am open to suggestions. Right now I've just used inline-block divs which I can drag and drop to switch the jQuery DOM objects. The effect isn't quite what the customer wants:
How it is now

I've made a lot dynamic layouts with the same idea. You need to think more in how your float behavior from block to block is stopping for the next following blocks, so they become correct repositioned like you want. So to define a float-stop element is necessary.
Your blocks will work with float:left maybe float:right. At some point you will figure out that this behavior has to stop somewhere best done with
CSS
.floatstop {
clear: both; //the important code here..
width: 100%;
height: 1px;
line-height: 1px;
margin-top:-1px;
}
and Html
<div class="floatstop"></div>
Made of all blocks who need border to the next block on the left side (maybe right side too) you have to define a base layout which has space for the very right placed block too with borderspace for it, otherwise it would float down under the block before.
But there is a more modern way!
You can use CSS3 codes to define your layout.
.columnblock {
width: 100%;
column-gap: 30px;
// for symmetric columned layouts use..
column-count: 3;
// or for not symmetric layouts use..
column-width: 280px;
}
<div class="columnblock">
<p>Lorem Ipsum</p>
<p>another Paragraph</p>
</div>
There other things to mention here but you can read about
http://www.w3schools.com/css3/css3_multiple_columns.asp

Related

"Priority Nav" breaks when div is floated

I'm using the "Priority Navigation" design pattern. For those who aren't quite sure what this is, basically when the viewport width is reduced and there isn't enough space for all the list-items to fix horizontally, they're moved into another nested list so they can still be accessed. This is within a "more" link at the end of the list.
At a basic level, this works fine in my example (below):
http://codepen.io/moy/pen/RrRJBe
The problems I'm having are:
1) Because I have another item alongside the navigation, which is floated (and of unknown width), I needed to set overflow:hidden; on the nav. This means when the width of the container changes, the nav stays alongside the other content rather than dropping onto the next line. It's fixes that ...the problem is it also means the dropdown on the end isn't visible as it's displayed below the navigation and overflow: hidden; is set.
Any alternative (CSS) fixes for this?
2) Another issue is the nav links need to be positioned to the right. No problem, just float the div right, yeah? Unfortunately it doesn't like this and the page almost crashes - must be something to do with the script trying to calculate the widths? As soon as the nav or it's parent is floated, it breaks!
The list-items are floated left so they display horizontally. Instead I tried using display: inline-block and text-align: right;. This positions the text correctly but when there's not enough horizontal space the items either wrap or all collapse into the "more" link rather than one-by-one.
-
Browser requirements: It's worth noting that my browser support is IE8+, so flexbox is unfortunately out the window. Even if it worked, it would mean that I'd have to find a fix for IE8/9.
Is anyone able to help with this, or maybe there's a plug-in I should take a look at. This script works great when the nav is isolated but as soon as another item is in it's path it becomes a bit tricky. On a previous attempt I got the width of the item which was in the way and subtracted it for the available space. But that isn't that flexible/scalable - but that again, maybe there isn't another way?
Thanks, hope someone can help!
Part 1
You can use clearfix instead of overflow: hidden.
Add the following to the parent element containing nav:
.wrap:before, .wrap:after {
content: '';
display: table;
clear: both;
}
But if you need to support IE8, you can just add element like below to the bottom of the parent element containing nav
html
<div class="clear"></div>
.clear {
clear: both;
}

Portfolio Expander width - Jquery CSS

I've been playing around with changing the way my portfolio looks and I've been struggling with getting my expander to push elements down (like google images does).
My test is here: http://chris-carpenter.co.uk/new/
I've used this as a starting point to add a filterable option for my work:
queness.com/post/14577/create-a-simple-responsive-portfolio-page-with-filtering-and-hover-effect
This is what is causing the problems. I've found ways to create the filterable portfolio, and ways to create a static portfolio that has an expanding content section but combining them is blowing my mind. I can't seem to figure it out.
At the moment this opens and pushes elements down, but the width is limited by the parent div, so anything below & to the right doesn't seem to shift.
<div class="portfolio--expand is-expanded">
</div>
I'm now looking at inserting a content div at the end of the row clicked. Much like this.
http://jsfiddle.net/JfcAu/450/
I'm not experienced enough with JS to understand what's happening and apply it to what I have though. Could anyone help me achieve a filterable grid which has a click to expand option?
I don't expect to retain any current styling ofcourse, since I haven't changed it at all from the original source yet, I just want the function working.
This has been hurting my brain for ages.
Useful things I've looked at:
isotope.metafizzy.co/filtering.html
oriongunning.com/blog/thumbnail-grid-expanding-preview/
You might have to do some width adjustment, but this:
#portfoliolist .portfolio {
box-sizing: border-box;
width: 23%;
margin: 1%;
display: none;
float: left; /* <-- this is taking it out of the DOM */
}
has a float:left - that is taking it out of the DOM - you have to remove the float:left - and then adjust width to maybe 22% or something to let the expanded content push everything out of the way.

Hovering over an image in one div container to have an img or background appear in or over top of a different container

So I'm fairly new as far as coding goes, just so everyone knows.
I'm trying to accomplish two simultaneous things
1. The first is, I would like be able to hover over an image in one container and have another image in a different container appear. Even if that means having an image that technically overlaps the container and just happens to have the same dimensions (which are width: 350px and height: 205px, by the way). If another solution is to have the initial image be a clickable link to open the second image, that would be fine too. In fact, that'd be preferable.
2. I need to do this multiple times, each with different initial and secondary images, with float:right or a similar css function involving setting the sets of initial images being wrapped to the right of my first div container.
3. I need to maintain the set of initial images (buttons), in two rows, with overlap-y: hidden and overlap-x: scroll.
My css for the button images is this, and must either stay this way or have a similar effect:
div.img {
margin: 10px;
**padding: 5px;**
**height: 38px;**
**width: 38px;**
float: right;
display:inline;}
div.img img {
**height: 38px**
**width: 38px**
display: inline;
float:right;
margin: 10px;
**border: 12px solid #ffffff;**
**border-radius: 8px;**
**box-shadow: 3px 3px 1px #888888;**
I put all the key points of the css that I need to keep (or display in a similar fashion) in bold. The part in question is the display: inline function. I need my set of images to be in two rows, wrapping to the right side of the container (or at least scrolling horizontally), but instead they are displaying as two rows of three, then one vertical column that is no longer aligned with the two rows of three.
To see the type of solution I'm looking for, here's the page: http://hellothisismelody.tumblr.com/codeconstruction/
As you can see, it's set up like a Nintendo 3DS. I'm looking to make functioning buttons on the bottom screen that make an image appear in the top screen, and looking to have those images set up like the home screen of a Nintendo 3DS, which looks like this:
Click for Nintendo 3DS Homescreen
Thank you for you time.
Regarding your first question, you can use this:
<div class=container1>
<img src='blah1.png'>
</div>
<div class=container2>
<img src='blah2.png'>
</div>
$('.container1 img').hover(function() {
$('.container2 img').get(0).src = 'blah3.png';
});

Liquid Grid - How do people refer to it

I've been playing with the google apps console and it has a fluid page where there are grids of items. When the user makes the window bigger and smaller the width of the grid items gets smaller and smaller until it drops one onto the next row when it cant make each grid item any smaller.
Can anyone tell me what this technique is called so I can find some tutorials. For bonus points, does it require javascript?
The technique is known as liquid or elastic layout. It is achieved via CSS, no javascript required. If you're looking for tutorials, you might this article useful:
"70+ essential resources for creating liquid and elastic layouts" by Zoe Mickley Gillenwater
Most used method (at least by my observation) is floating div with width in percentage and css media style.
Example
.thumb {
float: left;
width:18%;
margin:1%;
background: #eee;
height: 200px;
}
#media (max-width: 724px) {
.thumb {
width:48%;
}
}
In example above div.thumb will have width of 20%(margin+width) meaning it will have 5 div per row. And if viewport has width of max 724px there will 2 divs per row.
There are a lot of methods for this but this is most easiest to do, if your div's have same height, otherwise you will have some glitches with float.
EDIT: here is jsfiddle http://jsfiddle.net/P2URP/
What you are looking for it's called fluid (or scalable, liquid, etc.) "tiles" better than "grid"
This other question may solve yours if you want to do it only with CSS: Fluid, flexible and scalable tiles to fill entire width of viewport

Site Loads to the Right, until finished, then centers

There were 2 other threads on Stackoverflow of people having this issue. Neither applied to me. One was something about javascript. I disabled javascript on my browser, still did this.
The other was adsense banners, and I don't have any on this page.
Can someone give me an idea why this is loading to the right, and then centering when the page is fully loaded?
Thanks!
http://www.halotracker.com/Reach/TrueSkillLB.aspx?GameType=Competitive&Playlist=13
It's because your width on the tables is set to 100% with two of the columns with the * to determine the padding. the * character tells the table to determine the width remaining and fill it with the table. So what happens is the browser renders the first * less the fixed width of the center column. It doesn't even render the third column until after the centering occurs. You can see this with firebug and stop the load when it is still aligned to the right.
<div class="SiteBody">
<table width="100%">
<tbody>
<tr>
<td width="*"></td>
<td width="1062"></td>
<td width="*"></td>
</tr>
</tbody>
</table>
</div>
I will say this once because so many will probably jump on this. You shouldn't use Tables to setup layout it's bad practice and it can give you problems like what you are seeing. That said, my conscience is clear.
You could remove the the first and third TD's, remove the Width 100% and set the background in the parent container. In my opinion this would be the best way to handle it. Set the margin to 0, auto and that should give you everything you are wanting.
<div class="SiteBody">
<div class="SiteMiddle">//site content</div>
</div>
<style>
.SiteBody { background: transparent url(image of background) }
.SiteMiddle { width:1062px; margin: 0, auto; }
</style>
OR This is probably the best way as it layers the divs and allows you to set the backgrounds for left and right and still set a centered content with the correct width
<div class="SiteBody">
<div class="SiteLeft">
<div class="SiteRight">
<div class="SiteMiddle">//site content</div>
</div>
</div>
</div>
<style>
.SiteBody { }
.SiteLeft { background: transparent url(image of left background) no-repeat left top; }
.SiteRight { background: transparent url(image of left background) no-repeat right top; }
.SiteMiddle { margin: 0, auto; width: 1062px; }
</style>
Don't use tables for layout.
They cause the page to be rendered more slowly, and may cause very late adjustments. I'm sure you've noticed this ;)
The site design doesn't look very complex. I would advise you to remake it without the use of tables as layout (the tables for the playlists are fine of course).
Hm, it's difficult to say, but this may be because of the right box with "position:absolute"
Maybe you should get rid of the table centering your main content, so as not to confuse your browser about the positon of every element on the page.
Try this one for HTML:
<div class="SiteBody">
<!-- remove table stuff here -->
<div class="container">
<!-- Your content -->
</div>
<!-- remove table stuff here -->
</div>
with this CSS:
.SiteBody {text-align:center;}
.container {width:1062px;margin:0 auto;text-align:left;position:relative;}
I'm guessing it's Cufon - which replaces your fonts after the dom is loaded. Can you replace Cufon and see if you still have this issue?
If that doesn't can you put up a test version of your page with all the script tags removed?
Don't use TABLES for layouts. If you use TABLES, use fixed width cells.
Move JS script tag to the end of HTML code.
Try to disable one by one the JS scripts and see what's happening.
Monitor your HTML rendering in real-time with Firebug.
After analysis of your site, below are my comments:-
Page total weight is of 2736.6 Kbytes (Which is high)
CSSImages weight is 986 Kbytes
JS files weight is 623.2 Kbytes
If you can use caching on server for CSS & JS files then page load will reduce
As CBRRacer mentioned, you should handle that too
I stripped all the javascript, cufon, absolute divs, etc from the site here
http://www.halotracker.com/Test/Halo%20%20Reach%20Challenges.htm
The only thing left is the tables. And I've seen the tables work before. I've always used tables and this problem randomly started. Anyway, cant figure it out, none of the answers given to me were complete.
Enjoy my reputation points CBRacer.

Categories