SitePoint Sponsor

User Tag List

Results 1 to 21 of 21
  1. #1
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    802
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    expand a div to display an image

    using this code i found.
    Code:
    <!DOCTYPE html>
    <html>
    <head>
      <style>
        div {
        background-color:#bca;
        background: #fff;
        position: absolute;
        top: 50%;
        left: 50%;
        background-repeat: no-repeat;
        background-position: center center;
        border:1px solid green;
        padding:10px;
    }
    img{
    width:50px;
    height:50px;
    overflow:hidden;
    }
    
      </style>
      <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
      <button id="go">&raquo; Run</button>
    
    <div id="block1">
    <img src="imgs/staffHmImg01.jpg">
    </div>
    
    <div id="block2">
    <img src="imgs/staffHmImg02.jpg">
    </div>
    
    <script>
    
    
    $("#go").click(function(){
      $("#block1").animate({
        width: "100px",
        height: "100px",
        opacity: 0.6,
      }, 1500 );
    });
    </script>
    
    </body>
    I want to create an animation that when the user clicks on the div containing the image, the div expands horizontally to display the entire image.
    I tried to add the image & an overflow: hidden. but it didn't work.
    I then tried to resize the image but of course it stayed small.
    what would be my best course of action? give the img an id & add a second function such as:



    Code:
    <!DOCTYPE html>
    <html>
    <head>
      <style>
        div {
        background-color:#bca;
        background: #fff;
        position: absolute;
        top: 50%;
        left: 50%;
        background-repeat: no-repeat;
        background-position: center center;
        border:1px solid green;
        padding:10px;
    }
    img{
    width:50px;
    height:50px;
    overflow:hidden;
    }
    
      </style>
      <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
      <button id="go">&raquo; Run</button>
    
    <div id="block1">
    <img src="imgs/staffHmImg01.jpg">
    </div>
    
    <div id="block2">
    <img src="imgs/staffHmImg02.jpg">
    </div>
    
    <script>
    
    
    $("#go").click(function(){
      $("#block1").animate({
        width: "100px",
        height: "100px",
        opacity: 0.6,
      }, 1500 );
    
      $("#image").animate({
        width: "100px",
        height: "100px",
        opacity: a,
      }, 1500 );
    });
    </script>
    
    </body>
    thank you
    D

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,055
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Can you post a link to the page, so that I can get the url of the images?

  3. #3
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    802
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    here you go just uploaded it.

  4. #4
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    802
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    what i plan to do is to give the image the same on click function of the button. so when the user clicks on it it expands horizontally
    not yet position anything.
    right now it kinda works in reverse...and vertically...
    and it is only affecting one image have not touched the other yet. or put in any final positioning.

  5. #5
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,055
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Try this:

    Code:
    <!DOCTYPE html>
    <html>
      <head>
        <style>
          #block1{
            height: 0;
            width: 333px;
            background-image: url('http://www.danielamorescalchi.com/coreCorp/imgs/staffHmImg01.jpg');
          }
        </style>
      </head>
      <body>
        <button id="go">&raquo; Run</button>
        <div id="block1"></div>
        
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script>
          $("#go").click(function(){
            $("#block1").animate({ height: "400px" }, 1500);
          });
        </script>
      </body>
    </html>

  6. #6
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    802
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    can you take a quick look at this again. tweaked it some
    i tried a setting of -600 to get it to go to the left. as you can guess that is not what happened.

  7. #7
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    802
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    changed it to
    Code:
        <script>
    
          $("#go1").hover(function(){
    
            $(".block1").animate({ width: "600px", height: "300px" }, 1500);
    
          });
    	  $("#go2").hover(function(){
    
            $(".block2").animate({ width: "600px", height: "300px" }, 1500);
    
          });
    
        </script>
    but how do I make so if the user hovers away from the divs they resize back to normal?
    thx
    D

  8. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,055
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi Sherpa,

    Quote Originally Posted by pdxSherpa View Post
    how do I make so if the user hovers away from the divs they resize back to normal?
    The .hover() method accepts two anonymous functions as parameters.
    One applied on mouse over and one on mouseout.

    Have a look at the documentation, then let me know if you are still stuck.

  9. #9
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    802
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    hello Pullo, not as stuck...
    this is the new version
    diff.
    One of my probs is that I am not 100% sure of what exactly i am going for. open to advice.

  10. #10
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,055
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    Good to see you got the hang of .hover()

    Quote Originally Posted by pdxSherpa View Post
    open to advice.
    That depends on what you want to achieve.
    Could you expand on that?

  11. #11
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    802
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    sure...was thinking of something along this lines...
    looking at this on chrome inspect elements:
    looks like both are background images...

    but something along the lines of two subjects and when the user hovers over one addy info displays and puts the other subject in the background. Maybe pop subject "a" slightly, make it take center stage on the screen with an enlarged display/div. While it recedes subject "b" in the background and darkens/blurs the background as well. As when a user opens a modal window ?

    Could you point me to a few quick tutorials on how do that (must admit it be even better if you tell me how to do it, but then you'd be doing the work :-) )


    thx
    D

  12. #12
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,055
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    A quick demo to get you started:

    Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Animate div example</title>
        <style>
          #wrapper{
            margin:50px auto;
            width:800px;
            height:500px;
            overflow: hidden;
            position:relative;
          }
          #left{
            width:800px;
            height:500px;
            position:absolute;
            left:-400px; 
            background:blue;
          }
          #right{
            width:800px;
            height:500px;
            position:absolute;
            left:400px; 
            background:red;
          }
        </style>
      </head>
    
      <body>
        <div id="wrapper">
          <div id="right"></div>
          <div id="left"></div>
        </div>
      
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <script>
          $("#left").hover(function(){
            $(this).animate({ left: '+=400'});
          }, function(){
            $(this).animate({ left: '-=400'});
          });
          $("#right").hover(function(){
            $(this).css("z-index", 9999);
            $(this).animate({ left: '-=400'});
          }, function(){
            $(this).animate({ left: '+=400'}, function(){
              $(this).css("z-index", 0)
            });
          });
        </script>
      </body>
    </html>

  13. #13
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    802
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    wow...thank you.
    you make it look so easy.

  14. #14
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,055
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    You're welcome
    I haven't forgotten about your other thread either, I've just been a little busy today.

  15. #15
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    802
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    was toying with this idea:
    Code:
    jQuery('<div/>')  
        .attr('id', 'foo')  
        .css({  
            fontWeight: 700,  
            color: 'green'  
        })  
        $("#left").hover(function(){  
            .show('#foo');  
        });
    so when the user hover over the left or right side jquery opens a div. I was going in the right direction until i changed from "alert" to "show" is there a better command to use for this? & as part of the attribute could you actually put in a form or images?
    thx
    D

  16. #16
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,055
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by pdxSherpa View Post
    so when the user hover over the left or right side jquery opens a div.
    Define "opens"

    Quote Originally Posted by pdxSherpa View Post
    I was going in the right direction until i changed from "alert" to "show" is there a better command to use for this?
    show() is a method that needs to be called on a jQuery object.

    You cannot write .show("#foo");

    You can write $("#foo").show() or $("#foo").show("slow")

    Quote Originally Posted by pdxSherpa View Post
    as part of the attribute could you actually put in a form or images?
    You can create elements dynamically (such as a form or an image) and append them to another element: http://api.jquery.com/append/

    In my opinion this is not the best way to go.
    Last edited by Pullo; Jul 17, 2013 at 07:43. Reason: Corrected typo

  17. #17
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    802
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    What would be the best way?
    I did try adding a div. styling it display:hidden, positioned absolutely, left & top. z-indexed. Then on hovering over one of the two elements for it to display.
    It froze the animation already functioning. granted...am very new to jquery, and was trying to grab the info of their sites and see waht could work. so am sure I coded it wrong.

  18. #18
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,055
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi Sherpa,

    Quote Originally Posted by pdxSherpa View Post
    when the user hover over the left or right side jquery opens a div.
    Sorry, but I still don't get this. What do you mean "opens"?

    Quote Originally Posted by pdxSherpa View Post
    What would be the best way?
    To do what?

    Quote Originally Posted by pdxSherpa View Post
    I did try adding a div. styling it display:hidden, positioned absolutely, left & top. z-indexed. Then on hovering over one of the two elements for it to display.
    It sounds like you are trying to recreate the demo I posted.

    The best thing to do now would be to post the code that you have so far, then say what you are trying to achieve and what part of what you have is not working.

    Try using the template described here to structure your code.

  19. #19
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    802
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hi pullo the code you created is great. what I wanted to have was an extra small display appear when the user hovers over one of the two main area.
    so let's say you hover over the red area. it expands and an additional component appears to its side and display images/vid or content.

  20. #20
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,055
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Ah ok, then something like this:

    Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Animate div example</title>
        <style>
          #wrapper{
            margin:50px;
            width:800px;
            height:500px;
            overflow: hidden;
            position:relative;
          }
          #left{
            width:800px;
            height:500px;
            position:absolute;
            left:-400px; 
            background:blue;
          }
          #right{
            width:800px;
            height:500px;
            position:absolute;
            left:400px; 
            background:red;
          }
          #additional-content-right{
            background: green;
            height:300px;
            width:250px;
            margin-right: 100px;
            padding: 10px;
            float: right;
          }
          
          .hidden{
            display: none;
          }
        </style>
      </head>
    
      <body>
        <div id="additional-content-right" class="hidden">
          <h1>Some great content here</h1>
        </div>
        <div id="wrapper">
          <div id="right"></div>
          <div id="left"></div>
        </div>
      
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <script>
          $("#left").hover(function(){
            $(this).animate({ left: '+=400'});
          }, function(){
            $(this).animate({ left: '-=400'});
          });
          $("#right").hover(function(){
            $(this).css("z-index", 9999);
            $(this).animate({ left: '-=400'});
            $("#additional-content-right").fadeIn()
          }, function(){
            $(this).animate({ left: '+=400'}, function(){
              $(this).css("z-index", 0)
            });
            $("#additional-content-right").fadeOut()
          });
        </script>
      </body>
    </html>

  21. #21
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    802
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    that is really interesting thank you Pullo!


Bookmarks

Posting Permissions

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