CODEWITHSUNDEEP
jquerycss
battlenub
battlenub

Reputation: 187

Jquery changing image width via class

I'm trying to dynamically change the width of images via the value I get from a slider in Jquery

Firebug error

TypeError: document.getElementsByClassName(...).css is not a function   
document.getElementsByClassName(".images").css("width", ui.value);

HTML

<div id="filmpkes">         
    <img class="images" src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/d0/A-Team-Logo.svg/600px-A-Team-Logo.svg.png" width="100px"/>            
</div>

JS

$(function(){
$("#slider").slider(

    {   min:50,
        max:250,
        change:function(event,ui){
            alert(ui.value);
            document.getElementsByClassName(".images").css("width", ui.value);
        }           
    }               
);
});

EDIT : Can't believe I mixed that up, thanks!

EDIT: Can't get the image to resize http://jsfiddle.net/P5PLg/

Upvotes: 0

Views: 134

Answers (4)

Sergio
Sergio

Reputation: 28837

You are mixing vanilla javascript with jQuery...
And if using plain vanilla JS you need to remove the . in getElementsByClassName(".images")

Try this:

var images = document.getElementsByClassName("images");
$(images).css("width", ui.value);

Or (even better) with just jQuery it would look like:

$(".images").css("width", ui.value);

Upvotes: 0

kkemple
kkemple

Reputation: 992

The issue is there is not .css() method for vanilla JavaScript, if you know jQuery you can use:

$(".images").css("width", ui.value);

or in vanilla javascript:

var images = document.getElementsByClassName("images");

images.forEach(function( image, index, images ) {

    image.style.width = ui.value;
});

Upvotes: 1

Vahid Taghizadeh
Vahid Taghizadeh

Reputation: 997

Check this code and replace with your js codes

$(function(){
$("#slider").slider(
    {   min:50,
        max:250,
        change:function(event,ui){
            alert(ui.value);
            $(".images").css("width", ui.value);
        }           
    }               
);
});

Upvotes: 1

stevebot
stevebot

Reputation: 24005

Why are you using 

document.getElementsByClassName(".images").css("width", ui.value);

Why not just use JQuery? The document does not have the CSS function.

$(".images").css("width", ui.value);

Upvotes: 0

Related Questions