0

I'm trying to create a function that uses jQuery to get height of image, I have tried everything I can find but nothing works...

$(document).ready(function() {
window.onload = onLoad;

var array = "0|1|2|3|4|5|6|7|8|9|10|11|12|13|14|15|16|17|18|19|20|21|22|23|24|25|26|27|28|29|30|31|32|33|34|35|36|37|38|39|40|41|42|43|44|45|46|47|48|49|50|51|52|53|54|55|56|57|58|59|60|61|62|63|64|65|66|67|68|69|70|71|72|73|74|75|76|77|78|79|80|81|82|83|84|85|86|87|88|89|90|91|92|93|94|95|96|97|98|99|100|101|102|103|104|105|106|107".split("|");

function onLoad(){

    $("style").html("");

    var img = array[Math.floor(Math.random()*array.length)] + ".JPG";

    document.getElementById("show").src = img;

    var img_height = $("#show").height();

    var img_hgt = img_height - 238;

    alert(img_hgt);

    $("#show").ready(function() {
        var img_hgt = $("#show").height();
    })

    $("style").html("#show {position:absolute;top:0px;left:0px; -webkit-animation-name:slide_animation; -webkit-animation-duration:5s;} @-webkit-keyframes slide_animation { 0% { top:0px; } 100% { top:"+img_hgt+"px; } }");
    setTimeout(onLoad,2*1000);
}
});

Please help...

What I'm trying to achieve with this animation is a sort of ken-burns slide down effect...

swenflea
  • 562
  • 1
  • 5
  • 14
  • 1
    FYI, you can just use this: `var img = Math.floor(Math.random()*108) + ".JPG";` instead of fetching a string out of your string array. You don't even need that array. – jfriend00 Jan 18 '12 at 09:10
  • To get an image's height, you have to wait until it has loaded successfully. You can use a `.onload(fn)` handler or jQuery's [`.load() event`](http://api.jquery.com/load-event/). – jfriend00 Jan 18 '12 at 09:12
  • you might wanna recheck your code. i can see a lot of erroneous stuff like emptying a style tag using jQuery `.html()` to add dynamic styles? or still using `document.getElementById` if you can do `$('#element-id')` in jQuery? or use a loop to generate that long array? – Joseph Jan 18 '12 at 09:16
  • 2
    BTW `$(document).ready(function()` already does everything you want `window.onload()` to handle, so it's redundant. – James McCormack Jan 18 '12 at 09:18
  • I agree with @fskreuz. To quickly access the DOM element from a jQuery reference, you can just do `$("#show")[0]` – James McCormack Jan 18 '12 at 09:19
  • maybe the rest of the code is hindering the proper operation. like one answer said, there's nothing wrong with getting the height. – Joseph Jan 18 '12 at 09:24
  • @swenflea can you put a demo? or a fiddle? – Joseph Jan 18 '12 at 09:43

4 Answers4

6

Try this

var myImg = new Image();
myImg.src = img;
myImage.onload = function() {
    alert(this.width);
};
devnull69
  • 16,402
  • 8
  • 50
  • 61
  • 1
    the OP is generating random image src, not from an existing image's src. it would be like `myImg.src = img;` where `img = {randomNumber}.JPG` – Joseph Jan 18 '12 at 09:52
  • 1
    The above will work even if the image is hidden. You have to use the standard js this.width and not the jQuery .width() because the jQuery one gets the width of the DOM element not the actual image. – laymanje Jan 18 '12 at 16:21
0

This seems to work fine:

http://jsfiddle.net/YVwZZ/

$(document).ready(function(){
   var imgheight = $('img').height();
   alert(imgheight);
});
HandiworkNYC.com
  • 10,914
  • 25
  • 92
  • 154
  • 1
    This will give you the height of the image on screen. If you want to get the original image size you'll have to create an Image object and get its size onload ... see my answer – devnull69 Jan 18 '12 at 09:13
0

here's how i did it:

HTML

<img id="show" src="" />

CSS

#show {
    position:absolute;
    top:0px;
    left:0px;
}

JS

//generate array from 0 to 107
var myArray = [];
for (i = 0; i <= 107; i++) {
    myArray.push(i);
}

//look at our array in string form! (comma separated due to  .toString());
alert(myArray.toString());

function loadImages() {

    //url randomizer
    var img = myArray[Math.floor(Math.random() * myArray.length)] + ".JPG";

    //get reference to our HTML "show"
    var show = $('#show');

    //new image
    var myImg = new Image();

    //bind onload to image object
    myImg.onload = function() {

        //check if we got the height
        alert(this.height);

        //animation here. use jQuery .animate() instead!
        //http://api.jquery.com/animate/

        //recurse (loop)
        setTimeout(loadImages, 2 * 1000);
    };

    //set url
    //here's why it should be set after the onload bind
    //http://www.thefutureoftheweb.com/blog/image-onload-isnt-being-called
    myImg.src=img;
}

//wait for document to load
$(document).ready(function() {
    loadImages();
});
Joseph
  • 117,725
  • 30
  • 181
  • 234
  • Can someone please give me an example of how to use .animate() to animate the top:, Im very new to jQuery if you haven't figured out all ready... lol – swenflea Jan 18 '12 at 20:14
  • what `.animate()` does it to slowly transition the object from it's current style to the specified style. like say if your `#show` has `top:0px` and `position:absolute`. if i did `$('#show').animate({top:100,left:200},5000,function(){alert('hi!')})`, it would move (slide) the image 100px down and 200px to the right from it's original position in 5000 miliseconds (5 seconds) and alert 'hi!' when the animation finishes. – Joseph Jan 18 '12 at 21:04
  • The only problem now is that sometimes it's sliding down from the top of the page, I need it to always slide up from the bottom... I tried adding `$("show").css("top","0px");` when animation finishes but it doesn't work... – swenflea Jan 18 '12 at 21:19
  • `$("#show").css("top","0px")` - you need the "#" if you reference it with its ID. or if you are trying to use the one already in the variable, `show.css("top","0px")`. can you kindly edit your question so that it describes the effects you wanted? so that others can figure it out rather than try to understand the code. and so that future researchers can find it easily :) – Joseph Jan 18 '12 at 21:23
  • you may wanna see this question http://stackoverflow.com/questions/7719553/ken-burns-effect-with-nivo-slider and this website http://nivo.dev7studios.com/ – Joseph Jan 18 '12 at 22:19
-2

Btw. this

array = "0|1|2|..."

is NOT an array. It is a string. If you try to get a random entry of this string with your code you'll end up getting the separator "|" sometimes.

Try this instead

array = [0,1,2,3,4, ...];

EDIT: Everything is fine with your implementation regarding the array. I overlooked the split('|') at the end of the line

array = "0|1|2|...". split('|');
devnull69
  • 16,402
  • 8
  • 50
  • 61