Script Not Working on Website But Working on JsBin, Jsfiddle After One Refresh

Question

This is a simple jquery script which finds a image greater than 300px and show url in paragraph. And this code working on online editor sites like jsbin but same code not working on website.

<html>

<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>

<body>
    <main>
        <p>
        </p>
        <img src="http://icons.iconarchive.com/icons/icons-land/metro-raster-sport/128/Soccer-Ball-icon.png">
        <img src="http://www.iconarchive.com/download/i65352/icons-land/metro-raster-sport/American-Football-Ball.ico">
        <img src="http://simpleicon.com/wp-content/uploads/football.png">
    </main>
    <script>
        $(function() {

            $('main img').each(function() {
                $Height = 300;
                if ($(this).height() > $Height) {
                    $image = $(this).attr('src');
                    $('p').text($image);
                    return false;
                }
            });

        });
    </script>
</body>

</html>

But if you change Only the greater-than sign to less-than sign in jquery if statement, then script will work on both website and online editor and showing image url everytime you refresh it.

How to make this script work to also display a image url which is greater than some pixels?

I found a way which makes it work also on website: Running the script in

$(window).on("load",function(){

}

score 0 · Answer 1 · edited May 23 '17 at 12:31

The jQuery code executes as soon as the DOM is ready— it does not wait for the images to load! Therefore, none of the images have a height when the script searches for them.

When you refresh, the images are loaded instantly from the cache, in time for jQuery to catch them.

Take a look at this StackOverflow thread for an idea of how to trigger your function in response to each image's onload event!

e.g.,

$('main img').on('load', function(){
    if ($(this).height() > 300)
        $('p').text($(this).attr('src'))
    ;
});

Note that this code should supplement the code you've already written, since the jQuery documentation points out how the load event can fail to fire if the images are already in the cache.

score 0 · Answer 2 · answered Jun 17 '16 at 05:11

Your code works before images are loaded. You should give it a bit delay . Try this;

$(function() {
   setTimeout(function(){
    $('main img').each(function() {      
        $Height = 300;
        if ($(this).height() > $Height) {
           $image=$(this).attr('src');
           $('p').text($image);
           return false; 
        }      
     });
   },150);
});

Neeraj · Answer 3 · 2016-06-17T07:36:10.543

calling .widht() or .height() also calculates padding assigned to the element.
try remove padding from the element, or you can simply subtracts the padding from the element
i.e;

remove padding:

main > img{padding: 0;}

Calculate the image height and remove padding:

 $(function() {
    $img = $('main img');
    $img.each(function() {
     var tp = parseInt($img.css('padding-top'), 10);
     var bp = parseInt($img.css('padding-bottom'), 10);
     $Height = 300;
     if ($(this).height() - (tp + bp) > $Height ) {
       $image=$(this).attr('src');
       $('p').text($image);
       return false; 
     }
   });

 });

Hope this will help. :)

score -1 · Answer 4 · answered Jun 17 '16 at 05:07

-1

just add https: before //ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js and then try.

note : your system must be connected to the internet or provide system file url for jquery.min.js

answered Jun 17 '16 at 05:07

Sunny Samrat

62
4

If you look at the linked jsbin, you'll see that jQuery is loading just fine. Omitting the `https:` in the `src` url is valid; see [this answer](http://stackoverflow.com/a/550073/5869747). – A. Vidor Jun 17 '16 at 05:10
of course, but when you try to open //ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js from inspect element it will show error page saying Your file was not found – Sunny Samrat Jun 17 '16 at 05:19
Have a look at [this article](http://www.paulirish.com/2010/the-protocol-relative-url/), which actually discusses this very example! While specifying the scheme may be "best practices", it is not the cause of the OP's problem. – A. Vidor Jun 17 '16 at 05:22
may i know that, you have uploaded this file on server or testing locally – Sunny Samrat Jun 17 '16 at 05:33
As stated in the question, the OP is testing at [http://tikik.com/abc/](http://tikik.com/abc/), but that's a great point! The scheme-free URL will fail if the site is loaded with the `file://` scheme. – A. Vidor Jun 17 '16 at 05:37

score -1 · Answer 5 · answered Jun 17 '16 at 05:23

-1

Javascript in both JSBin links are same,there is no differences.

If you want your function to work properly just add "$(document).ready" on your function like:-

$( document ).ready(function() {
$('main img').each(function() {
  $Height = 300;
  if ($(this).height() > $Height) {
  $image=$(this).attr('src');
  $('p').text($image);
  return false; 
  }
});
});

Hope,this will for both web & JSBin. Please read: -https://learn.jquery.com/using-jquery-core/document-ready/

answered Jun 17 '16 at 05:23

Aditya

39
7

According to the [jQuery documentation](https://learn.jquery.com/using-jquery-core/document-ready/), the notation used by OP (i.e., `$(myReadyCallback)`) is already shorthand for `$(document).ready(myReadyCallback)`! This is not the cause of the OP's problem. – A. Vidor Jun 17 '16 at 05:25

Script Not Working on Website But Working on JsBin, Jsfiddle After One Refresh

5 Answers5