I'm trying to come up with a script that will have a number of thumbnails across (in width) the browser. I want it to be able to be flush and not have gaps on the sides. The thumbnails should always be the same size, and I'm guessing that the only way is the change the spacing between each image. But can someone help me out? Let me know if my question is unclear.
EDIT: here's an example: http://www.beautyineverything.com/
Thank you!
Something like this?
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<title>sandbox</title>
<meta http-equiv='content-type' content='text/html; charset=UTF-8'/>
<script type='text/javascript' src='js/jquery-1.6.1.min.js'></script>
<script type='text/javascript'>
var MAX_IMAGE_WIDTH = 240;
$(function(){
$(window).resize(resizeImages).resize();
});
function resizeImages() {
var containerWidth = $('.imageContainer').innerWidth();
var numberOfImages = Math.ceil(containerWidth / MAX_IMAGE_WIDTH);
var imageWidth = Math.ceil(containerWidth / numberOfImages);
var imageWidthLast = containerWidth - (numberOfImages - 1) * imageWidth;
$('.imageContainer .image').css('width', imageWidth);
$('.imageContainer .image:nth-child(' + numberOfImages + 'n)').css('width', imageWidthLast);
$('.imageContainer .image').each(function(){
$(this).text($(this).innerWidth());
});
}
</script>
<style type='text/css'>
.imageContainer {
border:1px solid black;
overflow:hidden;
}
.image {
width:160px;
height:160px;
float:left;
}
</style>
</head>
<body>
<div class='imageContainer'>
<?php
for ( $n = 10; $n < 30; ++$n) {
$backgroundColor = '#' . sprintf('%02x%02x%02x', $n * 8, $n * 8, $n * 8);
echo "<div class='image' style='background-color:{$backgroundColor};'></div>";
}
?>
</div>
</body>
</html>
Resizing images could be written in a bit smarter way so that instead of 223+223+223+223+223+223+223+216 they would be 223+222+222+222+222+222+222+222. For this, width of each column should be calculated individually, so that widths of columns vary only by 1px max.
This might sound primitive but tables were designed for something like this only.
one solution is to have a table and put your images as background-image of the cells. (or put it inside and give it a height and width 100%) Its is easy to keep control over the cell size and margins/padding.. that is why they were so popular for structural stuff.
Before ruling the idea out, do note that (apart form the fact that i HATE to use tables for designing and positioning stuff, but do not hesitate to use it for what it was meant to be) making tables will reduce the amount of code to be written. use css to size the cells and table. use inline to put background image. no js functions wat-so-ever.
please drop a comment if you disagree of if i am missing something :)
Related
I've been trying to get this fairly simple program to work and am running into performance problems.
I'm trying to make thousands of tiny colored dots on a canvas. Creating so many new paths is slowing down my computer before I am able to get the amount that I want on the canvas, and then crashes when I try to export the canvas as an SVG. I looked into using symbols, but I need the colors of each dot to be different.
The goal is for every color and position to be completely random and unique, and to have the dots completely cover the canvas. The canvas will eventually need to be printed 55 inches by 75 inches, so I will want the circles to be of high enough resolution that they don't look pixellated when printed. This can mean either being able to export to a high enough raster resolution or to export to a vector.
I'm using paper.js because I figured that it would be best to render the dots as vector graphics so that I can print them at high quality when I need to, but is there a better way to do this?
Thanks.
the html below is everything (except for the paper.js library).
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css">
<!-- Load the Paper.js library -->
<script type="text/javascript" src="js/paper.js"></script>
<!-- Define inlined PaperScript associate it with myCanvas -->
<style type="text/css">
html,
body {
margin: 0;
overflow: hidden;
height: 100%;
}
/* Scale canvas with resize attribute to full size */
canvas[resize] {
width: 550px;
height: 750px;
background-color: #39ff14;
}
</style>
<script type="text/paperscript" canvas="myCanvas">
paper.install(window);
tool.fixedDistance = .1;
var layer = project.activeLayer;
function onMouseMove(event) {
var radius = (1 * Math.random()) + .5;;
var path = new Path.Circle({
center: Point.random() * view.size,
radius: radius,
fillColor: "#000000".replace(/0/g,function(){return (~~(Math.random()*16)).toString(16);}),
})
}
// START DOWNLOAD BUTTON &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
function downloadDataUri(options) {
if (!options.url)
options.url = "http://download-data-uri.appspot.com/";
$('<form method="post" action="' + options.url
+ '" style="display:none"><input type="hidden" name="filename" value="'
+ options.filename + '"/><input type="hidden" name="data" value="'
+ options.data + '"/></form>').appendTo('body').submit().remove();
}
$('#export-button').click(function() {
var svg = project.exportSVG({ asString: true });
downloadDataUri({
data: 'data:image/svg+xml;base64,' + btoa(svg),
filename: 'export.svg'
});
});
// END DOWNLOAD BUTTON &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
</script>
</head>
<body>
<canvas id="myCanvas" resize></canvas>
<input type="button" value="Download as SVG" id="export-button">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- <script src="js/scripts.js"></script> -->
</body>
</html>
Maybe what I'm trying to do is impossible, but I'd like to ask before I give up.
I'm editing my blog and would like the background colors of my text posts to change randomly every time the page is visited.
I found this on teamtreehouse.com from a Google search:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf=8">
<style type="text/css">
#posts {
width: 90%;
height: 700px;
margin: auto
}
</style>
</head>
<body onload="return ran_col()">
<div id="posts">
</div>
<script type="text/javascript">
function ran_col() { //function name
var color = '#'; // hexadecimal starting symbol
var letters = ['000000','FF0000','00FF00','0000FF','FFFF00','00FFFF','FF00FF','C0C0C0']; //Set your colors here
color += letters[Math.floor(Math.random() * letters.length)];
document.getElementById('posts').style.background = color; // Setting the random color on your div element.
}
</script>
</body>
</html>
The effect works really well. The problem I'm having with it is that I have multiple #posts divs and it will only generate a random background color for one of the #posts divs. The rest have no background colors.
I would like each #posts div on my site to have a different random color, not the same random color. Is there a way to do that? I'll admit I'm not very good at these sorts of things but once I get an idea in my head I have a hard time letting it go. Any suggestions or tips would be great.
Thanks!
Use the following function:
document.getElementsByClassName("posts").style.background = color;
instead of
document.getElementById('posts').style.background = color;
An Id, must be unique, a class can have multiple items. Maks sure you go change your divs to contain this class instead of the Id you are using.
Example:
<div id="posts">
should be
<div class="posts">
Edit#1:
As per comments below, the css file has has to be changed so that that the IDs become classes. So just change the #posts to .posts
Edit#2:
getElementsByClassName will return an array of the elements, you then have to iterate through them to change the background color with something like this:
var x = getElementsByClassName("posts");
var i;
for(i=0;i<x.length;i++)
{
x[i].style.backgroundColor = color;
}
Edit #3:
This is a final working example of all the above. Try it out. I added a div="page" container that becomes visible at the end of the script so that the divs don't load one after the other.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf=8">
<style type="text/css">
.posts {
width: 90%;
height: 700px;
margin: auto
}
#page{
display:none;
}
</style>
<script>
function ran_col() { //function name
var color; // hexadecimal starting symbol
var letters = ['000000','FF0000','00FF00','0000FF','FFFF00','00FFFF','FF00FF','C0C0C0']; //Set your colors here
var x= document.getElementsByClassName("posts");
var i;
for(i=0;i<x.length;i++)
{
color="#";
color += letters[Math.floor(Math.random() * letters.length)];
x[i].style.backgroundColor = color;
}
document.getElementById("page").style.display = "block";
}
</script>
</head>
<body onload="ran_col()">
<div id="page">
<div class="posts">
test1
</div>
<div class="posts">
test2
</div>
<div class="posts">
test3
</div>
</div>
</body>
</html>
Basically I saw this page THIS PAGE and if you scroll up and down you can see the glass of drink becoming full and empty depeing on where your scrollbar is. Any idea how this is done?
It's pretty complex to do stuff like that but not particularly hard.
First, you'll need to manage this using something like jQuery. You got that already so good...
The html below is a working example that assumes the user has an image:
it is 700 x 100. The code is pretty simple. Round the window's scrollTop() value and figure the right frame offset based on the results. No need to fully explain, the code below says it all.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Test</title>
<meta name="viewport" content="width=device-width">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>
<style>
#main{position:relative;}
.dummy{height:500px;}
#glass{
height:200px;
width:100px;
background:url(http://www.hep-g.com/glass.jpg) no-repeat;
background-position:0 0;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
var frame = 0;
$(window).scroll(function(){
if($(window).scrollTop() % 100 < 10)
frame = Math.floor($(window).scrollTop() / 100) * 100;
if(frame > 700)
frame = 700;
$('#glass').css('background-position', '-' + frame + 'px 0');
});
});
</script>
<body>
<div id="main">
<section class="dummy">
This is dummy content
</section>
<section id="glass"></section>
<section class="dummy">
This is dummy content
</section>
<section class="dummy">
This is dummy content
</section>
</div>
</body>
</html>
It is actually one image with the background-position changing. The image is completely loaded by the time you see the glass originally.
http://www.smokeybones.com/static/img/tv/beer_sprite_lrg.jpg?e3e4e50f54ea
I am working with taveling fish. The fish should swim across the screen from both direction. I am having a little bit hard of understanding how to set up the array so the fish could swim. The array i was thinking was like this
Var fishPos = new Array
fishPos[0] = fish1
fishPos[1] = fish2
fishPos[2] = fish3
then do the function of the fish..I really don't know how to do animated fish swim...i am trying. I guess i am woundering If the array i am looking for is what i just did up there.. Thanks.
Ok this is what I have so far but something is still not right they fish will not swim...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Fish tank</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
// <![CDATA[
var fishPos = new Array(3);
var fishPos = 0;
var direction;
var begin;
fishPos[0] = "fish1.gif";
fishPos[1] = "fish2.gif";
fishPos[2] = "fish3.gif";
function fishSwim(fishNumber) {
document.getElementById("fish"+fishNumber).style.left = horizontal[fishPos[fishNumber] + "px";
++fishPos[fishNumber];
if (fishPos[fishNumber] == 49)
fishPos[fishNumber] = 0;
}
function startSwimming() {
setInterval(fish1Swim, 100);
}
// ]]>
</script>
</head>
<body onload="startSwimming();">
<p><span id="fish1" style=
"position:absolute; left:10px; top:10px"><img src="fish1.gif" alt="Image of a fish" /></span></p>
<p><span id="fish2" style=
"position:absolute; left:10px; top:120px"><img src="fish3.gif" alt="Image of a fish" /></span></p>
<p><span id="fish3" style=
"position:absolute; left:10px; top:250px"><img src="fish2.gif" alt="Image of a fish" /></span></p>
</body>
</html>
You are approaching it from the wrong direction. To make it easier for you you should try using animation plugin like http://www.spritely.net/ (require jQuery).
If you wanted to make it by yourself you'd have to write a tweening function which would - over specified time - move your object from point A to B, change its animations frames, offset its Y position to give this fishy/wobbly movement effect etc. Creating array of positions isn't really the way to go.
You will find a lot of tips on how to start working on creating your own animations engine at this fine article at Dev.Opera http://dev.opera.com/articles/view/javascript-animation/
If you are targeting only the modern browsers you could try playing with CSS3 animations - though these aren't widely supported yet.
If there an easy way to fix the width of the html table columns at the time the page is rendered. I DO NOT want to specify the pixel or percent width of the columns in my code. However, once the page is created and the widths determined based on the initial content in the table I do not want the widths to change, even if the size of the cell content changes.
Just so you understand what i'm trying to do, if I have the content of a cell change(from normal to bold for example), say when I hover over the row, the size of the columns will change. This looks quite odd.
To be honest I didn't understand the answer you gave to my comment, but I'll attempt at an answer anyway :-)
What you maybe need is to wrap the content of each cell in a div (or some other block element) and set it's width. That should limit the widening of the cells, however as I hinted at im my comment, the wider content will overflow, which most like look ugly. However you didn't really specify what you want the wider content to do...
<style type="text/css">
#the-table td .wrap {
overflow: hidden; /* try different values for different effects */
}
</style>
<script type="text/javascript">
$(function(){
$('#the-table th, #the-table td').wrapInner(function() {
return $("<div/>").css("width", $(this).width() + "px");
});
});
</script>
Live example: http://jsfiddle.net/Vx5Zq/
Notice how the letter F is cut off on hover.
I think this should do the trick (not checked though):
var w = $('#myTable td.leftCol').outerWidth();
$('#myTable td.leftCol').css({width: w+'px'});
[EDIT]
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(
function() {
$("table td").each(
function() {
var w = $(this).outerWidth();
alert(w+'px');
w *= 2;
$(this).css({width: w+'px'});
alert(w+'px');
}
);
}
);
</script>
</head>
<body>
<table>
<tr>
<td>abc</td>
<td>def</td>
<td>ghi</td>
</tr>
</table>
</body>
</html>
Adding some width to your current tds will stop the resizing when the the text goes bold.
First set your table using css to fixed rendering:
<style type="text/css">
#mytable{ table-layout: fixed; }
</style>
Then you can use jquery to add 2px of width to your tds like so:
<script type="text/javascript">
$(function(){
$('#mytable td').each(function(){
var $this = $(this) // cache this td
// set style to 2px wider
$this.css({ width: $this.outerWidth() + 2, height: $this.outerHeight() + 2 });
})
});
</script>