Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Aug 2012
    Posts
    38
    Thanks
    8
    Thanked 1 Time in 1 Post

    adding a blocking layer and div

    I am trying to add a blocking layer and div activated when a image is clicked. I have this code from a class I took but it is activated from a form post button:

    if (valid) {
    // Add a blocking layer
    $('<div class="blocking"></div>').css({
    "height": $(document).height(),
    "width": "100%",
    "position": "absolute",
    "left": "0px",
    "top": "0px"
    }).appendTo('body');

    How would I do something similar but make it activate onClick or something on an image?

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    Code:
    function addBlocking() {
       $('<div class="blocking"></div>').css({
          "height": $(document).height(),
          "width": "100%",
          "position": "absolute",
          "left": "0px",
          "top": "0px"
       }).appendTo('body');
    }
    
    $('img').click(function() {
       addBlocking();
       ...
    });

  • Users who have thanked devnull69 for this post:

    Vigilante23 (08-29-2012)

  • #3
    New Coder
    Join Date
    Aug 2012
    Posts
    38
    Thanks
    8
    Thanked 1 Time in 1 Post
    Quote Originally Posted by devnull69 View Post
    Code:
    function addBlocking() {
       $('<div class="blocking"></div>').css({
          "height": $(document).height(),
          "width": "100%",
          "position": "absolute",
          "left": "0px",
          "top": "0px"
       }).appendTo('body');
    }
    
    $('img').click(function() {
       addBlocking();
       ...
    });
    I tried this but nothing happend. I tried it with an onClick, without. Made an ID on the img and tried that but simply nothing is happening when I click on the image. Any ideas or specifications? Sorry if it's obvious I'm really new with javascript and jQuery.

  • #4
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    are you actually calling jquery in your code?
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • Users who have thanked harbingerOTV for this post:

    Vigilante23 (08-29-2012)

  • #5
    New Coder
    Join Date
    Aug 2012
    Posts
    38
    Thanks
    8
    Thanked 1 Time in 1 Post
    Quote Originally Posted by harbingerOTV View Post
    are you actually calling jquery in your code?
    That's embarrassing. I wasn't. Thanks. I must've deleted it accidentally somewhere because I did have it.

  • #6
    New Coder
    Join Date
    Aug 2012
    Posts
    38
    Thanks
    8
    Thanked 1 Time in 1 Post
    So how would I got about adding a div on top of that blocking layer?

  • #7
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,636
    Thanks
    6
    Thanked 1,003 Times in 976 Posts
    By applying an absolute, relative, or fixed position and giving it a higher z-index than the “blocking” div – or by putting it inside that blocking div.

    As a side note: it’s better to apply styles via the stylesheet, not in the JavaScript. After all, that blocking div has a class already so you can easily address that in your CSS file.


  •  

    Posting Permissions

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