Create wall for post made of blocks - javascript

i need a way to create a wall made of blocks.
The idea was: i get the informations via php, then i echo them in a div.
Stylesheet
.block{
min-height:100px;
min-width:190px;
background-color:#999;
float:left;
margin-bottom:10px;
margin-left:5px;
margin-right:5px;
}
.holder{
width:800px;
height:100%;
margin: 0 auto;
}
Here the html:
<html>
<head>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class='holder'>
<? *connect to the db*
my_query=mysql_query("SELECT * FROM news");
while($array=mysql_fetch_array(my_query)){
echo "<div class='block' id='block_".$array['id']."'>".$array['text']."<div>";
}
?>
</div>
</body>
</html>
Now, the problem is that obviously the blocks have not the same height nor the same width, and so the float left create horrible margin between the blocks and the right side of the holder.
How they should be
http://img17.imageshack.us/img17/1813/cy44.png
How they display
http://img716.imageshack.us/img716/9703/lnyr.png
Ideas: For the width I could use jquery maybe creating id by echo.
if($('#block_'+id).css('width')>590){$('#block_'+id).css('width','790')}
if($('#block_'+id).css('width')>390){$('#block_'+id).css('width','590')}
if($('#block_'+id).css('width')>190){$('#block_'+id).css('width','390')}
This should do the trick for the width, but what about the height? Should i try to create a function set the absolute position of all the element based on the height of the element that are before?

I not clearly understand your requirement. But you can do one thing set comman class for all elements say '.elements' and once rendered you can get all elements you can all elements like this below commands.
$(document).ready(function(){
$('.elements') // and you do want you want to do.
})

Hungerstar pointed out that already exist Masonry. It did the trick.

Related

Display inline block with fluid Design not aligning same line [duplicate]

This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 1 year ago.
I am using Fluid web design taking widths in "Percentages". I also reset all Margins and Paddings to default 0px. There is no border in any div. Still, why be default these are not aligned in same line???
Example:
<html>
<head>
<style>
*{margin:0px;padding:0px;}
div{display:inline-block;}
.divOne{background:yellow;width:20%;}
.divTwo{background:green;width:60%;}
.divThree{background:red;width:20%;}
</style>
</head>
<body>
<div class="divOne">One</div>
<div class="divTwo">Two</div>
<div class="divThree">Three</div>
</body>
</html>
Please, someone help me out. How in world is this not aligned in same line. But if I reduce % of any of these to go below 100% (like 98% or less), then these get aligned. But, if there is no margin, no padding. Why is this gap of width required?
You need to add HTML comments between your divs to cancel the whitespace interpreted by the browser :
*{margin:0px;padding:0px;}
div{display:inline-block;}
.divOne{background:yellow;width:20%;}
.divTwo{background:green;width:60%;}
.divThree{background:red;width:20%;}
<div class="divOne">One</div><!--
--><div class="divTwo">Two</div><!--
--><div class="divThree">Three</div>
Weird space that inline-blocks give.
https://css-tricks.com/fighting-the-space-between-inline-block-elements/
You can have those three divs in one row to avoid any hacks/tricks.
https://jsfiddle.net/dghkcg04/
<div class="divOne">One</div><div class="divTwo">Two</div><div class="divThree">Three</div>
The browser interprete de div like a white space so doing this to get it:
<!DOCTYPE html>
<html>
<head>
<style>
*{
margin:0;
padding:0;
}
div{
display:inline-block;
margin:0;
padding:0;
}
.divOne{background:yellow;width:20%;}
.divTwo{background:green;width:60%;}
.divThree{background:red;width:20%;}
</style>
</head>
<body>
<div class="divOne">One</div><div class="divTwo">Two</div><div class="divThree">Three</div>
</body>
</html>

How to crop the image so that it fits 50% of the screen?

I need the image to fit the 50% of the screen height of the device and not 50% of the current screen size (the user might have minimized the screen). Also, when the user resizes the screen, I don't want the image to automatically fit the screen once initially it is rendered.
The image is very large and I am looking to crop it, and not resize it. Here is what I done so far:
home.html:
<!DOCTYPE html>
<html lang="en-us">
<head>
<link rel="stylesheet" type="text/css" href="home.css">
</head>
<body>
<img class="image" src="myimage.jpg" alt="">
</body>
</html>
home.css:
html, body {
margin:0;
border:0;
padding:0;
}
img.image {
width:100%;
}
I don't want to use anything apart from HTML, CSS and JavaScript. It would be great if somebody help me understand how should this be done in CSS. Thanks!
Consider using the css clip property.
Combining clip with a little JavaScript to get the screen size may just be the right solution.
to crop the image, you will need a container with overflow:hidden.
DEMO/example :
html, body {
height:100%;
margin:0;
}
.crop50h {
height:50%;
overflow:hidden;
}
/* some specific behavior for image ? */
.crop50h {
text-align:center;
}
.crop50h img {
/* width:100%; ? */
margin:0 -100%;
min-width:100%;
}
Wit html basis :
<div class="crop50h">
<img src="http://lorempixel.com/1200/1200/"/>
</div>
If I've read your question correctly, I believe you're asking to set the image to be 50% of the desktop window, not the browser window.
In that case you can use window.screen.availHeight in Javascript to get the available height:
var half = window.screen.availHeight / 2;
var image = document.getElementByClassName("image")[0];
image.width=(half)+"px";

css responsive design having difficulty accessing width with javascript

I am making my first responsive design website.. I have an image slider div that is set with using pixels and media queries. I want to be able to access the width so I can tell the image slider how far I need to move. Unfortunately media queries don't seem to change the HTML. Is there any workarounds to get that information so I can use it in javascript.
here is a simple webpage example to play with and a JSFiddle http://jsfiddle.net/synthet1c/sNbW9/
<!doctype html>
<html>
<head>
<style>
body{
position:absolute;
background:red;
width:100%;
height:100%;
}
#outer{
position:absolute;
width:80%;
height:80%;
background:red;
background-image:url('http://www.largepictures.net/largepictures/scenery/largepictures_scenery_large_3066.jpg');
background-position: center;
margin:auto;
}
#inner{
width:80%;
height:80%;
background:rgba(255,0,0,0.3)
margin:auto;
margin-top:5%;
}
</style>
<script>
document.getElementById('inner').onclick = function(){
alert(document.getElementById('inner').style.width);
}
</script>
</head>
<body>
<div id="outer">
<div id="inner">click the box to get width</div>
</div>
</body>
</html>
The element.style object is only available for properties set with the style attribute (as the name might suggest). To retrieve CSS settings for elements whose style is set using a stylesheet:
document.getElementById('inner').onclick = function(){
alert(window.getComputedStyle(document.getElementById('inner'), null).width);
}
JS Fiddle demo.
References:
element.style.
window.getComputedStyle().
I made a little snippet for myself as this is a function I have been needing for a while
var comStyle = function(element , pseudoElt){
if(!pseudoElt){pseudoElt = null}
return window.getComputedStyle(document.getElementById(element), pseudoElt); }
This has me thinking though... Am I able to change the prototype so if element.style.something equals and empty string then use getComputedStyle() to get the actual value from the stylesheet?
Can't you just use offsetWidth, it's read-only property providing width of an element as an integer.
var el = document.getElementById('inner')
el.onclick = function(){
alert(el.offsetWidth)
}
http://jsfiddle.net/t2r7jnb4/

how to fix position vertically and absolute horizontally for a division

I'm trying to fix header vertically and absolute horizontally. I am using the following codes.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="style.css" rel="stylesheet" type="text/css">
<script src="header_position.js" type="text/javascript"></script>
</head>
body tag
$(window).scroll(function(event) {
$("#headerpos").css("margin-left", 0-$(document).scrollLeft());
});
#headerpos{
position:fixed;
border-top:8px solid #8DC540;
background:#1E415B;
width:956px;
padding-bottom:7px;
margin:auto;
z-index:100;
}
I tried using class attrb in div as well as id attrb
.header{
position:fixed;
border-top:8px solid #8DC540;
background:#1E415B;
width:956px;
padding-bottom:7px;
margin:auto;
z-index:100;
}
Also tried by removing margin:auto;
I saw this all from the link Position a Div "Fixed" Vertically and "Absolute" Horizontally within a "Position:Relative" Container Div
But it is not working and in Chrome if I go to inspect element I see an error:
Uncaught Reference error: $ is not defined (at line 1)
Please help. It's very important.
You need to include jQuery in the head of your page like this:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="header_position.js" type="text/javascript"></script>
Also, be sure to wrap your jQuery in a document ready call:
$(document).ready(function () {
$(window).scroll(function (event) {
$("#headerpos").css("margin-left", 0 - $(document).scrollLeft());
});
});
If $ is not defined, you'll need jQuery. Just include
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> before the other script.
I also recommend putting both script tags at the bottom of the page to make it load faster.
if you are using fixed positioning in css, you don't need js to centeralign a div horizontally.
try this.
.header{
position:fixed;
border-top:8px solid #8DC540;
background:#1E415B;
width:956px;
padding-bottom:7px;
margin-left:-478px;
left:50%;
z-index:100;
}

Changing background position with Javascript?

Though I can see this question has been asked before I really need a solution without the use of JQuery, its for an embedded web interface and I don't want the overhead of loading jQuery. I need to be able to manipulate sprites using just the JS on the single page, the state of the sprite is dependent on certain JS variables. I'm sure this must be possible, but can't find anything without the use of JQuery.
The easiest way (I think) is to define your own css classes and change those clasess on certan events. i.e.
<style type="text/css">
.bg1{
/* Some attributes set here */
background-position:cen‌​ter;
}
.bg2{
/* Some attributes set here */
background-position:left;
}
</style>
and then you put your javascript like this
document.getElementById("some_id").class = "bg2";
I think you can use Object.style.backgroundPosition="position" to change your desired background position .
Try this code
<!DOCTYPE html>
<html>
<head>
<style>
div
{
background-image: url('example.png');
background-repeat: no-repeat;
width: 400px;
height: 400px;
border: 1px solid #000000;
}
</style>
<script>
function displayResult()
{
document.getElementById("div1").style.backgroundPosition="center bottom";
}
</script>
</head>
<body>
<button type="button" onclick="displayResult()">Position background image</button>
<br>
<div id="div1">
</div>
</body>
</html>
Reference

Categories