Expand a div to display an image

pdxSherpa · July 14, 2013, 6:29pm

using this code i found.

<!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:

<!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 );

[COLOR="#B22222"]  $("#image").animate({
    width: "100px",
    height: "100px",
    opacity: a,
  }, 1500 );[/COLOR]
});
</script>

</body>

thank you
D

James_Hibbard · July 14, 2013, 6:48pm

Can you post a link to the page, so that I can get the url of the images?

pdxSherpa · July 14, 2013, 7:46pm

here you go just uploaded it.

pdxSherpa · July 14, 2013, 7:48pm

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.

James_Hibbard · July 14, 2013, 8:15pm

Try this:

<!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>

pdxSherpa · July 14, 2013, 9:41pm

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.

pdxSherpa · July 14, 2013, 9:43pm

changed it to

    <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

James_Hibbard · July 15, 2013, 6:23am

Hi Sherpa,

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.

pdxSherpa · July 15, 2013, 1:15pm

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.

James_Hibbard · July 15, 2013, 1:17pm

Hi,

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

That depends on what you want to achieve.
Could you expand on that?

pdxSherpa · July 15, 2013, 1:35pm

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

James_Hibbard · July 15, 2013, 7:35pm

Hi there,

A quick demo to get you started:

<!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>

pdxSherpa · July 16, 2013, 8:08pm

wow…thank you.
you make it look so easy.

James_Hibbard · July 16, 2013, 8:09pm

You’re welcome
I haven’t forgotten about your other thread either, I’ve just been a little busy today.

pdxSherpa · July 17, 2013, 5:20am

was toying with this idea:

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

James_Hibbard · July 17, 2013, 5:37am

Define “opens”

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")

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.

pdxSherpa · July 17, 2013, 2:42pm

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.

James_Hibbard · July 17, 2013, 5:47pm

Hi Sherpa,

Sorry, but I still don’t get this. What do you mean “opens”?

To do what?

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.

pdxSherpa · July 17, 2013, 8:10pm

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.

James_Hibbard · July 18, 2013, 8:14am

Ah ok, then something like this:

<!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>