CODEWITHSUNDEEP
javascriptjquerycss
lewisjb
lewisjb

Reputation: 686

JQuery - Automatically changing image width

I'm creating a website and I have a problem with IE compatibility. My idea to fix this is to have a JQuery script that changes the images width proportional to the window. However, my script isn't working.

$(document).read(function() {
        updateSizes();
        $(window).resize(function() {
            updateSizes();
        })
    });

    function updateSizes() {
        var $windowHeight = $(window).height();
        var $windowWidth  = $(window).width();
        $(".fadingImg").css("width",$windowWidth * 0.7)
    }

I have tried adding + "px" to $(".fadingImg").css("width",$windowWidth * 0.7)

My JQuery implementation is: 

<script src="http://abrahamyan.com/wp-content/uploads/2010/jsslideshow/js/jquery-1.4.3.js" type="text/javascript"></script>

Upvotes: 0

Views: 87

Answers (4)

chank
chank

Reputation: 3636

if your fadingImg is a <img>, then try to set the attribute

$(".fadingImg").attr("width",$windowWidth * 0.7)

Upvotes: 0

Indy
Indy

Reputation: 363

Instead of using JavaScript for this solution, why not use CSS?

.fadingImg { width: 70%; }

Upvotes: 0

bizzehdee
bizzehdee

Reputation: 21023

You need to add px but in the right place

$(".fadingImg").css("width", ($windowWidth * 0.7) + "px")

You also need to make sure that you have class="fadingImg"

You also need to make sure that you put it within a ready block

$(function() {
  //code here
});

Upvotes: 0

palaѕн
palaѕн

Reputation: 73966

It should be

$(document).ready(function() {

not

$(document).read

Upvotes: 4

Related Questions