CODEWITHSUNDEEP
javascriptjqueryhtmlcssimage
Chris
Chris

Reputation: 954

JavaScript and CSS positioning an image for any resolution

I am trying to create a simple slide show of an image that is set up in and background div. I dont have problem with creating the slideshow code but i have problem with positioning the image that should change according to the the width of others monitors resolution.

In the image bellow i described were i want to place the image. The image should be placed in the red div.

enter image description here

Here is the image that i want to put in the red div to be like a background. The resolution is (1900px x 500px)

enter image description here

Here is a model what i managed to do. I tried in java script code to declared a global variable sw which I assigned the window.innerWidth (sw=window.innerWidth), after in CSS using jquery selecting the red div $('#rotator') and assigned the sw ($('#rotator').css('width', sw)), but the result wasn't what I need to obtain. I obtained the image that was cropped from the right according to the screen resolution. enter image description here

If someone know how to solve this question i will be greatful!

Here is my CODES:

HTML

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="jquery-2.1.0.js"></script>
    <script type="text/javascript" src="function.js"></script>
    <script src="jquery.easing.1.3.js"></script>
    </head>
<body >
    <div id="rotator"></div>
    <div class='slider'></div> 
</body>
</html>

CSS

body{
    margin: 0px;
    margin-left: 0px;
}

.slider{
    width: 940px;
    height: 360px;
    background-color: #FFDF00;
    margin: 0 auto;
    position: absolute;
    left: 15%;
    top: 20px;
    }

#rotator {
    position: relative;
    height: 500px;
}

.puzzle {
    width: 100px;
    height: 100px;
    background-position: -100px 0px;
    float: left;
}

And JavaScript that also contain the function of slideshow effect (that is working).

$(document).ready(init)

sw=window.innerWidth;

if (sw % 100 == 0) {
    sw=window.innerWidth
}
else{
    sw=Math.floor(sw/100)*100
}


//counter of slider
current_slide=0;
image_list=new Array
(
"img/1.jpg",
"img/2.jpg",    
"img/3.jpg",
"img/4.jpg",
"img/5.jpg"
);  

function init ()
{
    $('#rotator').css('width', sw)
    change(image_list[current_slide]);
    //start timer
    setInterval(  "change(image_list[current_slide])"   ,2500);
}

function change(bg_image){
    // this function creats cells inside <div id = 'rotator'>
    rot = $('#rotator'); //constructor
    rot.empty();
    for(y = 1; y<=5; y++)
     {
        for(x = 1; x<=sw/100; x++)
          {
           rot.append('<div class = "puzzle p-' + x + '-' + y + ' "></div>');
           //select the <div> using his class and setting up the cells coordinates 
           $('.p-' + x + '-' + y).css('background-position', (-(x-1)*100) + 'px ' + (- (y-1)*100) + 'px').css('background-image','url('+bg_image+')');
           $('.p-' + x + '-' + y).css('opacity', 0).delay(parseInt(Math.random()*1000)).animate({opacity: 1}, {duration: 1000})
          }
     }
     current_slide++;
     if(current_slide >= image_list.length)current_slide=0
}

Thank you for your time and consideration!

Upvotes: 1

Views: 417

Answers (1)

StephenRios
StephenRios

Reputation: 2240

You either have to put the image into a container div who's width is dynamic to the size of the page and set width of the image inside it to 100%, or use the CSS attribute background-size: cover; (which is only compatible with newer browsers).

Images set as the background image for a div will simply fill their container and be clipped by that container as it shrinks past the dimensions of the background image unless background-size: cover; is used. To gain the same effect in older browsers, the aforementioned 100% trick is used.

Cross-browser style: http://jsfiddle.net/2D5Vw/

New(ish)-School: http://jsfiddle.net/HLf2Q/

Upvotes: 4

Related Questions