Welcome guest, is this your first visit? Create Account now to join.
Results 1 to 4 of 4

This is a discussion on Problems injecting jQuery code with $(window).load or $(document).ready within the Plugins Development section, part of the Chrome Plugins category: Hi everyone! This is my first post in this wonderful forum! :-) I'm developing a simple extension that shows the ...


  1. #1
    ZapoTeX is offline Junior Member
    Join Date
    Aug 2012
    Posts
    2

    Default Problems injecting jQuery code with $(window).load or $(document).ready

    Hi everyone! This is my first post in this wonderful forum! :-)

    I'm developing a simple extension that shows the RGB value and the coordinates next to the mouse cursor whenever the mouse is over an image (any image in the webpage). My extension uses jQuery code from a jQuery Image Color Picker by Project Sierra.

    In order for the extension to work, I need to "attach" to every image in the webpage the object "ImageColorPicker". I'm using this code:

    Code:
    $(window).load(function(){    var tooltip = $( '<div id="tooltip">' ).appendTo( 'body' )[0];
        $("img").ImageColorPicker();
    });
    The extension works as it should, however, it messes up some pages. For example, I tried with a phpBB forum and here's what happens:
    1) The header is all messed up, while, when the extension is deactivated or the line "$("img").ImageColorPicker();" is commented, it is rendered the right way. I actually took screenshots of the "wrong" and "right" way, but I can't put them into this post, otherwise I get "post denied".

    2) Pictures from ImageShack and other similar services (Flickr, etc...) are loaded, then they disappear. I can see them slowly growing from top to bottom, then when they are complete they disappear.

    I tried it with both $(window).load and $(document).ready and the result is the same.

    Any help would be greatly appreciated! Best regards

    ZapoTeX

  2. #2
    ZapoTeX is offline Junior Member
    Join Date
    Aug 2012
    Posts
    2

    Default

    OK, I did some more experimenting and I think I found what the problem is. Inside the ImageColorPicker, there is this code:
    Code:
    widget.element.wrap('<div class="ImageColorPickerWrapper"></div>');
    widget.$wrapper = widget.element.parent();
    widget.$wrapper.append(widget.$canvas);
    widget.ctx = widget.$canvas.get(0).getContext('2d');
    I'm a complete and total beginner with jQuery, but from what I understand, every image in the page gets wrapped into a div. Then, of course, the header of a phpBB forum (with all the tiny symbols for LogOut, New Messages, FAQ, etc...) gets messed up: every image is wrapped into a div and this div will behave differently from the original image when it comes to alignment, floating, maybe even size, etc...
    (the other problem, about images disappearing, I don't understand yet, but I think it is related to the div problem, maybe there are some strange settings for divs in the forum's css).

    Anyway, I would say potential solutions are:
    1) Avoid wrapping with a div: I still need the canvas, though, as it is fundamental to get the RGB values from the image
    2) Force the div to inherit the size, alignment behavior and floating properties of the original image

    I have no idea how to proceed in either case :-) Any help would be highly appreciated.

    Best

    ZapoTeX

  3. #3
    abhi729 is offline Super Moderator
    Join Date
    Jul 2011
    Posts
    63

    Default

    Try going through jQuerry selectors. This might help you understand the code problem.

  4. #4
    firetonton is offline Junior Member
    Join Date
    Oct 2012
    Posts
    2

    Default

    Hello

    I had the same problem.
    I solved it by using
    jQuery(function () {
    // your stuff
    });
    instead of
    jQuery(document).load(function () {
    // your stuff
    });

    Actually you maybe have already solved your problem but I post for people having this problem too.

    firetonton

Similar Threads

  1. Replies: 0
    Last Post: 04-27-2011, 04:41 PM
  2. pdf download opens a save as window before opening the document
    By Complimenta in forum Chrome Troubleshooting
    Replies: 0
    Last Post: 10-26-2010, 11:15 AM
  3. Chrome OS - Ready to download
    By Benni in forum Chrome OS News
    Replies: 21
    Last Post: 11-20-2009, 03:37 PM
  4. Extensions (almost) ready
    By Benni in forum Plugins Development
    Replies: 0
    Last Post: 09-10-2009, 02:16 PM
  5. Chrome is not ICC Version 4 ready
    By Luc VN in forum Chrome Tech
    Replies: 0
    Last Post: 06-06-2009, 07:50 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •