We Keep Coding

Change the width of the images according to aspect ratio

I am building a comic reading website. I got a problem with displaying images. Most of my images are having the aspect ratio of 2/3. Means 1000x1500. So I am displaying them with below css rules. But there are some images like double page images. So when the css rule max-width=728px is applied this 4/3 raito image can't read anything. So basically I want to change the css rule for max-width=728px when the user came across to 4/3 ratio images. Css rule max_width=728px still have to apply the 2/3 ratio images but when the ratio changes to 4/3 it has to be max-width=1250px. What do i need to do for solving this? It is related to css or need some javascript. This manga website has this future I think. Double page images are displaying width of ~1300 and when i shrink the browser its javascript updating the width and height.
Example:http://www.mangaeden.com/en/en-manga/berserk/344/17/
My website:http://mangabozok.com/oku/Berserk/346/5
HTML:
<div class="gnc02">
<img src="paths">
</div>
CSS:
.gnc02 img {
display:block;
margin:auto;
max-width: 728px;
height: auto;
}

You can try the following style:
.gnc02 img
{
display: block;
margin: auto;
max-width: 1250px;
max-height: 1092px;
}
For the 2:3 images, the max-height applies and restricts the width to 728 pixels. For the 4:3 images, the max-width applies and restricts the width to 1250 pixels.
.gnc02 img
{
display: block;
margin: auto;
max-width: 1250px;
max-height: 1092px;
}
<div class="gnc02">
<img src="http://cdn.mangaeden.com/mangasimg/82/82018e71734a3893bc60f2e3a5df4520b1343c862ef09e3c7b30fd1d.jpg" />
</div>
<br/>
<div class="gnc02">
<img src="http://cdn.mangaeden.com/mangasimg/d6/d6afc1d18c0c08d6129f121a3531f47933d8fdbccca0ea7f78ed10e8.jpg" />
</div>
Note: when running the code snippet, you should switch to "Full page" mode.

.gnc02 {
max-width: 728px;
display:block;
margin:auto;
}
.gnc02 img {
max-width: 100%;
float:left;
}

try this
.gnc02 {
width: 99% !important;
display:block;
margin:auto;
}
.gnc02 img {
max-width: 100%;
}
<div class="gnc02">
<img src="http://cdn.mangaeden.com/mangasimg/82/82018e71734a3893bc60f2e3a5df4520b1343c862ef09e3c7b30fd1d.jpg" />
</div>
this code is used for responsive designing. I think this may help you in any type of image or the size of the image.

How to make images fade visible when i'm scrolling

<div id="smiley">
<div id="star">
<img src="inc/img/heks.png" class="star">
<img src="inc/img/impo.png" class="star">
<img src="inc/img/angst.png" class="star">
</div>
</div>
#smiley{
margin: 50px auto 80px;
width: 1132px;
height: 300px;
}
#smiley #star{
display: none;
float: left;
height: 300px;
width: 1132px;
}
#smiley #star img.star{
display: block;
float: left;
width: 300px;
margin: 50px 38px 0px;
}
I need have the images to fade visible when i'm scrolling down to them.
i hope you understand the question.
This website template, does it http://www.templatemonster.com/demo/51771.html

Demo .. Source code
If you want to show the images only when they become in the window of browser.. without affecting their loading ..
Try this, make the visibility of image hidden, then using JavaScript add class fadeIn to the image when it become in the window of browser ..
So .. in your CSS :
<style>
.star {
visibility: hidden;
}
.fadeIn {
-webkit-animation: animat_show 0.8s;
animation: animat_show 0.8s;
visibility: visible !important;
}
#-webkit-keyframes animat_show{
0%{opacity:0}
100%{opacity:1}
}
</style>
Then load jQuery library
<script src="//code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
and in your JavaScript:
<script>
function showImages(el) {
var windowHeight = jQuery( window ).height();
$(el).each(function(){
var thisPos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
if (topOfWindow + windowHeight - 200 > thisPos ) {
$(this).addClass("fadeIn");
}
});
}
// if the image in the window of browser when the page is loaded, show that image
$(document).ready(function(){
showImages('.star');
});
// if the image in the window of browser when scrolling the page, show that image
$(window).scroll(function() {
showImages('.star');
});
</script>
Hope this will help you ..

Make Div fixed bottom & scrollable

I want to have a long page, with a fixed top 100px div, and a fixed 50px bottom div. However, I want the bottom div to scroll as you scroll down the page.
Its hard to explain, but the best example of this is on the front page of PayPal.com
On the first page load, the bottom div looks like it is fixed, and as you adjust the height of the browser window, that div stays at the bottom. Yet as you scroll down the page it is not fixed.
Can anyone explain how they have done this? I am trying to re-create something similar, but cant see how they have managed it.
As far as I can see they have this html...
<div id="fixed-top">
<header class="table-row">
// header content
</header>
<div class="table-row table-row-two">
// Video content
</div>
<div class="table-row">
//bottom content
</div>
</div>
And this CSS...
#fixed-top {
height: 100%;
width: 100%;
display: table;
position: relative;
top: 0;
left: 0;
z-index: 1;
}
.table-row {
display: table-row;
}
But that alone doesn't do it. I also can't see any js thats getting window height and applying it to the main fixed div.
Help! :)
EDIT:
Have just found a way to do it with javascript, controlling the height of the middle row using the window height, minus the 150px for the header and third row.
jQuery(document).ready(function(){
$('div.table-row-two').css({'height':(($(window).height())-150)+'px'});
$(window).resize(function(){
$('div.table-row-two').css({'height':(($(window).height())-150)+'px'});
});
});
But saying that, Zwords CSS only method seems like a winner.

From what I understand, you are looking for something like a sticky footer. So basically if the content is not enough, the footer should go sit at the bottom like its fixed, but if content comes in, it should scroll down like other content.
Try this - http://css-tricks.com/snippets/css/sticky-footer/

First off, you'll need to set the height of the body and html tag, otherwise the table won't take the full screen. Then I altered your code, made it a bit easier.
HTML:
<div id="fixed-top">
<header>
// header content
</header>
<div>
// Video content
</div>
<div>
//bottom content
</div>
</div>
CSS:
html, body {
margin: 0;
padding: 0;
height: 100%;
min-height: 100%;
}
#fixed-top {
display: table;
width: 100%;
height: 100%;
}
#fixed-top > * { /* makes all the direct children of #fixed-top a table row*/
display: table-row;
background: lightblue;
}
#fixed-top > *:nth-child(1) {
background: lightgreen;
height: 40px;
}
#fixed-top > *:nth-child(3) {
background: lightgreen;
height: 25%;
}
You can either set the height to a fix height (in px) or percentages. If you only give two of the three rows a height, the third one will automaticly fill up the rest space.
Also, check this demo.

Check this fiddle / Fullscreen
Using display:table;,display:table-row;,min-height to adjust to screen
HTML
<div class="wrapper">
<div class="row">menu</div>
<div class="row">content</div>
<div class="row">footer</div>
</div>
<div class="wrapper">
<div class="row">content1</div>
<div class="row">content2</div>
<div class="row">content3</div>
</div>
CSS
html,body,.wrapper{
width:100%;
height:100%;
margin:0px auto;
padding:0px;
}
.wrapper{
display:table;
border:1px solid black;
}
.wrapper .row{
display:table-row;
background-color:rgb(220,220,220);
}
.wrapper .row:nth-of-type(1){
min-height:15px;
}
.wrapper .row:nth-of-type(2){
height:100%;
background-color:white;
}
.wrapper .row:nth-of-type(3){
min-height:15px
}

You can do this easily with jQuery using $(window).height() and subtracting your footer/header's heights. See Fiddle for an example.

How to make SpriteSpin responsive?

Site i am working on is made with twitter bootstrap and is fully responsive. I have successfully made SpriteSpin to work with my site but there is a problem, i can't make it responsive as rest of my site because it adds inline css to div where the image is.
JS looks like this:
First it calls images:
$(function(){
var frames = [
"folder/image.jpg",
(other images)
];
Then this:
$("#mali").spritespin({
width : 960,
height : 540,
(other code)
});
How can i change this fixed width and height and put there css class or w/h to 100% so that is responsive.
I already tried to add css class to container with this but no success:
$( "div" ).addClass( "myClass" );
I believe the problem here is that the script somehow adds inline css
<div class="spritespin spritespin-instance" unselectable="on" style="overflow: hidden; position: relative; width: 480px; height: 327px;">
You can see it on official SpriteSpin website (link below) when using inspect element on Bicycle image.
Help me fix this issue or suggest me other 360 image sprite spin solution that is responsive and works on mobile touch.
SpriteSpin: http://spritespin.ginie.eu/

You can override CSS by adding !important after your own CSS directives.
In it's simplest form:
background: red !important;
If you have inline style attributes in HTML:
<div style="background: red;">
The inline styles for this div should make it red.
</div>
you can try this CSS:
div[style] {
background: yellow !important;
}
But it's not really good practice to rely on it in production code. More info:
http://css-tricks.com/when-using-important-is-the-right-choice/,
http://css-tricks.com/override-inline-styles-with-css/

I know this is an old post but I ran into this same problem today. Basically all you need to do is set a media query at each screen size in your css to resize the container and the images will respond since their widths and heights are already set at 100%.
#media only screen and (min-width: 100px) and (max-width: 767px) {
.spritespin, .spritespin-instance {
width:383px !important;
height:300px !important;
}
}

It's great to use it with bootstrap solution for responsive embed objects
var $container = $(".images3d-container")
if ($container.length && $.fn.spritespin != undefined) {
var source = []
$container.find(".images").find('img').each(function () {
source.push($(this).attr('src'))
})
$container.find(".view").spritespin({
source: source,
animate: false,
renderer: "image",
width : 450, // width in pixels of the window/frame
height : 450 // height in pixels of the window/frame,
})
}
.images3d-container .images {
display: none;
}
.images3d-container .view {
width: 100%!important; /* here it is */
height: 0 !important;
padding-bottom: 100%;
position: relative;
overflow: hidden;
border-bottom: 1px solid #ccc;
margin-bottom: 20px;
}
<section class="images3d-container">
<div class="view"></div>
<ol class="images">
<li><img src="/img/1.jpg"></li>
<li><img src="/img/2.jpg"></li>
<li><img src="/img/3.jpg"></li>
<li><img src="/img/4.jpg"></li>
</ol>
</section>

I know this question is old, but for people that happen to look for an answer: the plugin now has a setting for this. Just add responsive: true, and set the width of the SpriteSpin. See the official demo.

vertically align img inside floated div

There are 5 floated divs which heights are stretched to 100% of document height using Javascript. All 5 of them contain img element.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link type="text/css" rel="stylesheet" href="style.css"/>
</head>
<body>
<div id="wrapper">
<div id="static"><img src="http://www.rs.dhamma.org/wheel.gif"/></div>
<div><img src="http://www.rs.dhamma.org/wheel.gif"/></div>
<div><img src="http://www.rs.dhamma.org/wheel.gif"/></div>
<div><img src="http://www.rs.dhamma.org/wheel.gif"/></div>
<div class="clear"><img src="http://www.rs.dhamma.org/wheel.gif"/></div>
</div>
</body>
</html>​
Javascript:
//sets columns height to 100%;
function colsHeight(){
var docHeight = $(document).height();
$("#wrapper div").height(docHeight);
};
$(document).ready(function(){
colsHeight();
});
and CSS:
*{
margin: 0;
padding: 0;
}
#wrapper{
width: 1000px;
margin: 0 auto;
}
#wrapper div{
padding: 0 20px;
background-color: #9F81F7;
float: left;
border-right: 1px solid black;
}
#wrapper img{
}
div.clear:after{
content: " ";
clear: both;
}
​I've tried setting parent's div display: table and img display: table-cell, vertical-align: middle but no luck. Defining margin-top: 50% is acting anything but expected.
JSFIDDLE HERE!!!
Any help appreciated.
Thanks!

You could position them absolutely, then set top: 50% and margin-top: -63px. Of course, this only works if you know the height of the image (126px in your case). If the image sizes are dynamic, the easiest, but yucky way would be to set the margin-top on the images using js after they are loaded.
Anyway, the static method can be seen here: http://jsfiddle.net/3gqcS/2/

This feels a bit dirty, but you can set the div's line-height to div height + image height then overflow:hidden
<div id="static" style="height: 481px; line-height: 607px; overflow: hidden;">

since you using javascript and jQuery(can't live without him) you can do....
check this: http://jsfiddle.net/828pW/
here is the code:
function verticalAlignImage(img)
{
if(img.height)
{
$(img).css({
position:'absolute',
top: ($(img).parent().height() - img.height)/2
}).parent().css('position', 'relative');
}
else
{
setTimeout(function(){
verticalAlignImage(img);
}, 100);
}
}
​

Try setting the columns:
position:relative;
width:<width>;/* width must be set */
and the images as:
position:absolute;
top:0;
bottom:0;
margin:auto 0;
That should perfectly center them however then you need to set column width as the image with absolute positioning take up no space at all.
Also, instead of using java script just add:
html, body, #wrapper, #wrapper div{height:100%;}
instead.
Learned from: http://www.tutwow.com/htmlcss/quick-tip-css-100-height/