Expanding Div to fit Proportional Image - javascript

I want the div 'expand' to expand to a set height when hovered over and then revert back to the original height of the div on mouse out.
My problem is that the images inside 'expand' needs to remain proportional and thus its height is going to vary depending on the browser width.
So I need some code (html, css, javascript, jQuery, PHP, etc.) that will set the div 'expand' to expand to a preset height on hover and then revert to the height of the image (plus a 5 pixel padding on all sides).
The markup:
<html>
<head>
<style>
.expand{
background-color: red;
height: auto;
padding: 5px;
width: 18%;
}
</style>
</head>
<body>
<div class="expand">
<img src="http://yabooks.ml/Images/The Dmon King.jpg" style="width: 100%;">
<h3>The Demon King</h3>
<h5>Cinda Williams Chima</h5>
<p>jfah;jfhe;jfhwehccneufhea'hfehechceiphf'jfah;jfhe;jfhwehccneufhea'hfehechceiphf'jfah;jfhe;jfhwehccneufhea'hfehechceiphf'jfah;jfhe;jfhwehccneufhea'hfehechceiphf'jfah;jfhe;jfhwehccneufhea'hfehechceiphf'</p>
</div>
</body>
</html>

You have to get first the original height of the div you want to expand, like this:
var height = $(".expand").css('height');
and animate that div using .animate into a desired height, lets say 500px:
$(".expand").on("mouseenter",function(){
$(this).animate({"height":"500px"},"slow");
})
and animate back to the original height:
var height = $(".expand").css('height');
$(".expand").on("mouseleave",function(){
$(this).animate({"height":height},"slow");
})
Note: Be sure to close all your tags. I noticed your <img> without a closing that's why your <p> tag won't wrap inside the div. I'd fixed that in this FIDDLE

You want to use jQuery's mouseover and mouseout functions coupled with the animation function. You will need to select your div and bind a function to its onmouseover event. Consider the following rendition of your HTML body:
<div id="expand">
<img src="http://yabooks.ml/Images/The Dmon King.jpg" style="width: 100%;">
<h3>The Demon King</h3>
<h5>Cinda Williams Chima</h5>
<p>Text</p>
</div>
Here, we've given your div an id "expand", so we can easily select it using jQuery and bind functionality to it's onmouseover event using the mouseover function:
var expanded = "2000px";
var time = 2000;
$("#expand").mouseover(function(){
$( "#expand" ).animate({
height: expanded
}, time);
});
To have the div contract, you'd want to use jQuery's mouseout function to bind to the element's onmouseout event:
$("#expand").mouseout(function(){
$( "#expand" ).animate({
height: contracted
}, time);
});
This mouseout functionality in this case is hard to demonstrate in jsfiddle, but hopefully the following jsfiddle helps you obtain the behavior you desire: http://jsfiddle.net/9dmzytm7/

Related

How to scroll a large image inside a smaller div using mouse click and drag?

I want to place a large image inside a div and let the user scroll through the image using the mouse (click and drag to the desired direction). How can this effect be achieved?
CSS:
#image{
position: relative;
margin: 0 auto;
width: 600px;
height: 400px;
top: 300px;
background: url("http://www.treasurebeachhotel.com/images/property_assets/treasure/page-bg.jpg") no-repeat;
}
HTML:
<div id="image"></div>
EDIT:
I want to implement this myself in order to gain knowledge, 3rd party frameworks are last resort.
<html>
<body>
<div style="width:200;height:200;overflow:scroll;">
<img src="/home/james/Pictures/scone_ontology.png" />
</div>
</body>
</html>
Check out jQuery UI Draggable. The first example sounds like exactly what you are trying to do:
https://jqueryui.com/draggable/
So you just want 600w 400h div, with a "map" inside that you can scroll around and look at with the mouse? You're very close already.
Have a div with the size you want the end-product to take up. Make sure you set its css to overflow:scroll;. Then put your image inside this div. Your image can ofcourse also be the background-image of a div.
And that's it.
A cool trick would be to wrapp all this up in a div that is slightly smaller, with overflow:hidden. Just small enough to hide ugly scrollbars. But that might be bad usability.

JqueryUI bounce hides element and moves it left and animate doesn't apply to child divs

I want to use the function called bounce and animate in the JqueryUI library and I'm facing 3 problems:
1) I use the following code to apply the bounce effect:
$('#element').toggle( 'bounce', { times: 3 }, "slow" );
But this hides the element after the finish of bouncing. How to avoid this behavior??
2) I have centered the element using margin-left: auto;margin-right: auto; but during bouncing the element is positioned to the left and ignores the margin auto.
3) I use the function animate to fade in background-color to an element using this code:
$('#element').animate({backgroundColor: '#FFFF99'}, 'slow');
For some reason this applies the animation effect till the first child div and not the whole box. For example:
<div id="element">
<p>this paragraph will get animated but the child div will not</p>
<form>
<div id="child"></div>
</form>
</div>
This is a fiddle to explain the problem:
http://jsfiddle.net/E5XvT/1/
Thanks
from jQuery docs:
.toggle(): Display or hide the matched elements.
what you want is this :
$('#element').effect( 'bounce', { times: 3 }, "slow" );
Fiddle
You are explicitly setting a background color on your #child
background-color: white;
remove that line and it will work.
Looks like rusln answered #1...
To answer #2 use:
<div id="element" align="center">...
To answer #3 use (in css)
#child {
background-color: inherit;
}
hope this helps

Elements misposition at resize (using max-width:100% to scale rel. to window size)

I am using max-width: 100%; height: auto; on all my <img> elements and on my image slider wrapper.
When resizing the browser window, the images scale correctly, but many surrounding elements don't follow along and misposition. They will self-correct once the page is refreshed or next image is loaded in the image slider. Any ideas?
Demo - scale the window, css at line 25
Pikachoose library sets the sizes of a few elements on each animation.
<div class="pika-stage" style="height: 355px;">
<div class="pika-aniwrap" style="position: absolute; top: 0px; left: 0px; width: 835px;">
This is why everything fixes itself when the next animation happens. You could look though the source and replicate the animations re-sizing code and put it in a $(window).resize event handler. Looking at the docs for Pikachoose it seems that they have a goto method.
You could do something like this:
$(window).resize(function(){$('#pikame').data('pikachoose').GoTo(3)})
Where the index of 3 is the current active slide. You probably want to use a form of timeout and only call it once to improve performance.
var resizeSlider = null
$(window).resize(function(){
if(resizeSlider) clearTimeout(resizeSlider)
resizeSlider = setTimeout(function() {
$('#pikame').data('pikachoose').GoTo(3)
}, 300)
})
This should make it so the goto is fired 300ms after the last window.resize event.
Hope this gives you some ideas.

Scroll a div 30px when anchor clicked

What's the best way to scroll a div with overflow:auto by a certain pixels or certain percentage when clicking an anchor? The HTML is very simple:
<style>
#container{
height:250px;
overflow:auto;
</style>
<div id="container">
<p>Lots of Content</p>
</div>
Scroll Down
When I click the anchor above, I want to scroll that div above a certain amount of pixes, say 30px. I'm hoping jQuery has something built in that makes this simple.
$('#scrolldiv').click(function(e){
var current = $('#container').scrollTop();
$('#container').scrollTop(current + 30);
e.preventDefault();
});​
jsFiddle
For that purpose I would use jQuery's animate:
$('#scrolldiv').click(function(){
$('#container').animate({scrollTop: '+=30'});
});
I belive it's got the shortest syntax for this and it looks nice.
jsFiddle example

Show div with jQuery. css question

I have three divs with display: inline-block. In every div i have div with display: none when im trying to show hiding div with $('#div-id').show(1000) nearest divs 'jump around'
What should i change? I do like to see div under div just draw and the left or right div doesn't change his place.
For example two divs with my problem there (hide div shows up onchange in the textbox)
http://jsfiddle.net/WZCJu/13/
I added this CSS:
#amount-div, #specific-div {
width: 300px;
vertical-align: top
}
Version without the width, you may like it better:
http://jsfiddle.net/WZCJu/15/
Try using css's visibility property instead since it retains the element's position in the flow.
Docs: http://www.w3schools.com/css/pr_class_visibility.asp
Example:
<div id="herp" style="width: 100px; height: 40px; visibility: hidden;">plarp</div>
<div id="derp" style="width: 100px; height: 40px; visibility: visible;">slarp</div>
If you change the divs to use float: left; with a specified width you can avoid the "jump around".
See my updated example at: http://jsfiddle.net/WZCJu/12/
I changed the following:
<div id="amount-div" style="display:inline-block;">
...
<div id="specific-div" style="display:inline-block;">
To use floats with a specified width.
<div id="amount-div" style="float:left;width:220px;">
...
<div id="specific-div" style="float:left;width:220px;">
I also changed the <br> tag which preceeds the submit button so that it will clear the floated divs like so (though, there are better ways of handling that in my opinion):
<br style="clear:both">
display none removes the element completely from the document. there wont be any space reserved for it. so when u bring it back(show) it ll rearrange the nearby divs. so try using visibility:hidden which will retain the space but keep the div hidden..
Changing an HTML element from display: none to display: block or some other value will always cause it to change the flow of other elements around it in the tree. To prevent the DIVs from jumping around, you have a few options. Here are a couple simple ones:
First, you could "pad" the DIV in another DIV with a fixed size. For example:
<div style="width: 100%; height: 2em;">
<div id="js-amount" style="display: none">
<p>You will achieve this goal by:</p>
<p id="achieved-date"> <p>
<p id="weekly-limit-amount">Your weekly limit will be decreased by $100</p>
</div>
</div>
Secondly, you could use absolute positioning to remove your DIV from the flow of the document:
<div id="js-amount" style="display: none; position: absolute; top: 200px; left: 50px;">
<p>You will achieve this goal by:</p>
<p id="achieved-date"> <p>
<p id="weekly-limit-amount">Your weekly limit will be decreased by $100</p>
</div>
You must set a fixed size for your divs, so when the new one appears, it's constrained with the given side. I updated your JSFiddle : http://jsfiddle.net/WZCJu/16/
Have a look at how I constrain the size for your divs in the CSS. To improve layout, I took the liberty to add some styling to the submit button, so the HTML is a little bit modified too.
If you have any trouble understanding my solution, ask some questions.
When using display: none, the element does not render at all so it doesn't use any space on the rendered web page. I think you might want to use visibility:hidden to hide your element but still make the space usage calculation.
EDIT: It appears jQuery method works only on the display style so my answer is not applicable and indeed a fixed offset is necessary to avoid side effects in the page flow.

Categories

Resources