Develop Reference

How to hide the rest of unused image

more you ask, more knowledge you get. Right ? I don't know this question is basic or not but a little make me think hard.
Look pic 1 what do i have.
pic 1: http://imgur.com/YFpfo69
When i upload an image, it will show up to the container called <img id="image"/> and the image is horizontally draggable. My problem is, how do i hide the rest of unused image ? When i dragging the image, the rest will not showing up

To fix this you can place overflow: hidden in the CSS of the parent element of the #image element.

Add the style overflow: hidden; to the parent element, like this:
<div style="overflow: hidden;">
<img src="img.png" id="image" />
</div>

Fixed Image On Scroll Shifting Position

JSFiddle: https://jsfiddle.net/DTcHh/19451/
I am building a website using Bootstrap 3. On scroll I have an image that sticks to the page by changing position to fixed. This works however it always shifts out of place once it turns fixed. I am aware this has something to do with the margins (and I have played with pixels and this seems to practically solve the problem, the margin-left needs to be a % for the responsive website). Here's the code:
HTML
<div class="row">
<div class="col-sm-5">
<h2 class="white">Some Text</h2>
</div>
<div class="col-sm-7">
<img class="img-responsive screen-phone" src="img/phone.png">
</div>
</div><!--END ROW-->
CSS
.screen-phone{
max-width:300px;
margin-top:25px;
margin-left:25%;
z-index:999;
}
Javascript
$(document).ready(function(){
$(window).scroll(function () {
if ($(this).scrollTop()>1120){
$('.screen-phone').css('position','fixed').css('top','0');
}else{$('.screen-phone').css('position','static');
};
});
});

Try this
CSS
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
.screen-phone{
max-width:300px;
margin-top:25px;
//margin-left:25%;
z-index:999;
float:right;
}
JavaScript
/* Latest compiled and minified JavaScript included as External Resource */
$(document).ready(function(){
// var stickyPhone = ($#)
$(window).scroll(function () {
if ($(this).scrollTop()>500){
$('.screen-phone').css('position','fixed').css('right','0');
}else{$('.screen-phone').css('position','relative');
};
});
});
I Removed the margin-left and added a float right. Then on the JS i changed the position to left:0. It seams to work.

I made several changes that made it work:
Move the class name to the div element instead of the img element
Make the CSS changes only when necessary by using a boolean variable
The 500 pixel test was too long for the size of the text. When invoked, the change in size due to the image being fixed would shrink below 500 forcing another change, and so on.
See the updated jsfiddle: https://jsfiddle.net/DTcHh/19475/

Alright, I figured this out. What needs to be done is you put a separate class on the containing DIV. You give it left:(whatever your percent value is here). You take margin-left OFF the containing image. If using Bootstrap like me, you'll have to get around margin issues you can create two classes like I did to remove the margin of the row and col-sm-7. In my case I did:
.screen-phone{
max-width:300px;
margin-top:25px;
/*Removed margin-left:25%*/
z-index:999;
}
.sticker{
left:25%
}
.zero-row{
margin:0;
}
.no-margin{
width:0;
}
HTML:
<div class="row zero-row">
<div class="col-sm-5">
<h2 class="white">Some Text</h2>
</div>
<div class="col-sm-7 no-margin sticker">
<img class="img-responsive screen-phone" src="img/phone.png">
</div>
</div><!--END ROW-->
Updated Fidde: https://jsfiddle.net/1chkghhq/1/

images change onHover jquery

I need many images to change when mouse hover on a image.Me try one but its change only one image how can i change many images on hover on image.My try fiddle
HTML:
<div id="container">
<div class="fimg"><img height="130px" width="100%" src="a.jpg" alt="" />
</div> <div class="simg">
<img height="130px" width="100%" src="A.jpg" alt="" /><p class="text_over_image" style="font-size:36px;">TEXT</p>
</div>
Javascript:
$(function(){
$("#container").hover(function(){
$("img", this).stop().animate({top:"-130px"},{queue:false,duration:200});
}, function() {
$("img", this).stop().animate({top:"0px"},{queue:false,duration:200});
});
});

If I correctly understand your problem, you want an image slider when you hover on the container.
The images are in inline-block are they are set to white-space: nowrap. So, that they don't wrap. container is set to overflow: hidden, it hides the extra images.
The images are shown by animating the margin-left of the inner div. So, it is like the inner container is moving but the container stays still.
You can modify it however you like, vertical animation, using css transitions and stuff.
I cannot post the code here because of the shortened url of the images.
You can test and modify it here, it's a pen.

Replacing responsive tables for better markup and accessibility

I am trying to create a site with a set of images that can be viewed by scrolling the page vertically or by clicking a button that links to the next image in the set using an anchor tag.
The images are centered vertically and horizontally inside a container that responds to the size of the browser window.
<a id="1">
<table cellpadding="0" cellspacing="0" border="0" height="100%" width="100%">
<tr valign="middle"><td align="center">
<img src="image.png">
</td></tr>
<tr><td>
Down
</td></tr>
</table>
</a>
I know of no other way to achieve this but to use tables though I am aware that it is very poor markup.
I have also found that the site renders correctly in Firefox 16.0.2 but not in Safari 5.0.6 where after the second image in the set the tables appear to grow in height exponentially.
How can I code this site for better accessibility and with proper markup?

The way I would probably do it without resorting to too many hacks would be to just put each image in a div, set some dimensions based on css, then use javascript to adjust accordingly.
Here is the sample HTML:
div class="item">
<img src="http://www.focus-itoutsourcing.com/wp-content/uploads/2013/10/Software-testing-trends-2013.jpg" />
</div>
<div class="item">
<img src="http://www.focus-itoutsourcing.com/wp-content/uploads/2013/10/Software-testing-trends-2013.jpg" />
</div>
The sample CSS:
html {height:100%;}
body {height:100%;}
div.item {
width:100%;
height:100%;
text-align:center;
}
div.item > img {
max-height:100%;
max-width:100%;
}
And finally the jquery which simply readjusts sizes on resize and at the start.
$(document).ready(function(){
//Setup function for sizing.
var win = $(window), body = $('body');
var els = $('div.item');
function DoResize() {
var height = win.height(),
width = body.width();
els.each(function(i,el){
var ele = $(el);
ele.height(height).width(width);
var img = ele.find('img');
var difference = (height - img.height())/2.0;
img.css('margin-top',difference+'px');
});
}
DoResize();
$(window).on('resize', DoResize);
});
I set up a jsfiddle for you to see it in action. It also readjusts for resizing of the window. It should work in most browsers even IE7 according to caniuse.com.
Update:
To include the captions and such you can do a variety of things. The easiest would be to add relative positioning to each item, then absolute positioning to each element you want to position with respect to each image.
You would do the html more or less like so:
<div class="item">
<img src="http://www.focus-itoutsourcing.com/wp-content/uploads/2013/10/Software-testing-trends-2013.jpg" />
<div class="caption">
Caption for Item 1
</div>
<div class="link">
Item link
</div>
</div>
Then the style would just have updates for the other classes within the parent div.
I updated the jsfiddle here to show you some things you can do: link
Updated again:
Add the following script tag to your page:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
before the Resizing script.

Damn Miltox beat me too it. His is better though. Just to say the reason safari was weird was you had multiple tables set at 100% height each stacked on top of each other so they were adding up, you should have had one big table. Miltox's answer will have fixed that all anyway.

Fluent change of images

I make an image gallery. I have 9 fields, in each field there is an image (or better, there is a part of image). In total, I have 9 big images and in each of that fields there is a 1/9 of each big image.
When I "hover" one of these nine fields, I need to change the other fields to the rest of this image and see the whole image over all fields.
Okay, this I am able to make with CSS and a little bit of JS, but I am looking for any javascript/jQuery effect, let´s say to change image by image from right top corner to left bottom corner, any fluently change between images.
Example, with 3 images:
HTML:
<img onmouseover="show_image('r');" rel="1" src="" class="r">
<img onmouseover="show_image('r');" rel="1" src="" class="r">
<img onmouseover="show_image('b');" rel="2" src="" class="b">
<img onmouseover="show_image('g');" rel="3" src="" class="g">
<img onmouseover="show_image('b');" rel="2" src="" class="b">
<img onmouseover="show_image('g');" rel="3" src="" class="g">
<img onmouseover="show_image('r');" rel="1" src="" class="r">
<img onmouseover="show_image('b');" rel="2" src="" class="b">
<img onmouseover="show_image('g');" rel="3" src="" class="g">
CSS:
img {float: left; width: 30%; height: 100px; margin: 0 9px 9px 0;}
img:nth-child(3n+3) {margin-right: 0;}
.g {background: #070;}
.b {background: #00f;}
.r {background: #f00;}
JavaScript:
function show_image(id) {
$('img').removeClass().addClass(id).removeAttr('onmouseover');
}
(fiddle)
Do you have any idea how to make the fluent change of images when hover one of them?
In HTML there should be all 27 small images, it´s no problem, I´m looking for the switching effect. You can send links for examples, maybe I only don´t know how to call what I need :-)
Thanks.

Ok, I understand your question now!
You mean, when you hover over on an image, the rest of images get replaced by its remaining parts and whole of the 9 images match up to complete the image?
You need to set these functions!
Try to remove the onmouseover function from the element, and try to use jQuery for that!
Lets start the example!
The example image tag:
<img src="some/source/to_file.png" alt="photo" class="image5" id="red" />
First you need to get the image on which the mouse over event occured, like this:
$('img').mouseover(function () {
var id = $(this).attr('id');
var class = $(this).attr('class');
if(id == 'red') {
if(class == 'image5') {
/* replace all the other images with red one
* here you will check the image's class too, which is the number
* location where it is present at!
*/
}
}
}
After this, you will need to shift the image's back too! For that, use this:
$('img').mouseleave(function () {
// shift the src tag back as
$('.image5').attr('src', 'its/src/to_file5.png');
$('.image7').attr('src', 'its/src/to_file7.png');
$('.image6').attr('src', 'its/src/to_file6.png');
}
And so on.
And yes, you will be needed to keep the images in the browser as downloaded files on the page load and just keep shifting them once the user hover's over!
In your fiddle, all you're doing is adding a classname but you are not removing or reverting it back on mouseleave event; there is no mouseleave event.

You can use the jQuery UI switchClass() method which allows you to animate whole class.
Here is a working code sample using your as basis:
function show_image(id) {
$('img').each(function() {
var className = this.className;
if (className == id)
className = '';
$(this).removeClass().switchClass(className, id, 1000, 'linear').removeAttr('onmouseover');
});
}
Since it's removing one class and add other, if the one you remove and add is the same it won't work hence the need to check and reset.
As for "linear" it's just my personal choice of easing method, choose your own from the full list.
Updated fiddle.