I think a jsfiddle will illustrate the problem much better: http://jsfiddle.net/9mHk2/
I'm trying to get the wrapping div to transition into the new width with a slide/fade/something rather than snap into it.
What is the simplest way to do this?
<div style="border:1px solid #000000; padding:8px; float:right;">
Here is a div with some text <span id="spn1">....</span>
</div>
<br /><br /><br />
<center>
<input id="btn1" name="btn1" type="submit" value="Hide" />
</center>
$('#btn1').click(function (e) {
e.preventDefault();
$('#spn1').fadeOut('500');
});
Seems like you want to hide the ellipses and then slowly animate the rectangle, correct? You can do this by calculating the width before and after the span is hidden and then animate it:
$('#btn1').click(function (e) {
e.preventDefault();
// Here's the width before the span is hidden
var originalWidth = $('#rectangle').width();
$('#spn1').hide();
// Here's the width after the span is hidden
var newWidth = $('#rectangle').width();
// Now animate the difference!
$('#rectangle').css('width',originalWidth).animate({width: newWidth}, 1200);
});
FIDDLE
Here is a different approach than user1506980's, hide the span using width animation. Requires some extra CSS.
#spn1 {
overflow: hidden;
display: inline-block;
margin: 0;
padding:0;
height: 1em;
}
$('#btn1').click(function (e) {
e.preventDefault();
$('#spn1').animate({width:0},500).fadeTo(500,0);
});
jsFiddle
Related
I know the onmouseover and onmouseout so that they can run a function when hovered over on when not being hovered over but I don't know how to make them expand. I have made dropdown boxes, but I can't get them to expand.
EX:
123 [Not Hovering]
123456789123 [During Hover]
I've Tried This:
<!DOCTYPE html>
<head>
</head>
<body>
<p id="exp" onmouseover="over()" onmouseout="out()" style="background- color: #FFD700;width: 100px;height: 250px;">
Expand Me!
</p>
<button onclick="run()">Run</button>
<script type="text/javascript">
function over() {
document.getElementById("exp").style.width = "250px";
}
function out() {
document.getElementById("exp").style.width = "100px";
}
</script>
<div id="x" style="background-color: #0FF"> </div>
</body>
</html>
but I want it to come out and go back in slowly not instantly, and I'm sure there is a better way to do this because I don't want to go pixel by pixel to get it to go slower because that would lagg the webpage
I think a CSS transition would be best for this, no JS needed.
div {
width: 25px;
overflow: hidden;
transition: width 1s;
}
div:hover {
width: 100%;
}
<div>123456789123</div>
I made a div which has a background image of a face, I have designed div which contains a paragraph, 2 buttons and an input box.
I know this question has been asked quite often however my situation is different, I'd like for my div with the background image of a face to be clickable so that the div containing everything else slides out from the left.
What is the best method to do this?
HTML
<div id="image"></div>
<div id="container">
<p>I like nutella and croissants</p>
<input id="message" placeholder="type...." required="required" autofocus>
<button type="button" id="send">Send</button>
<button type="button" id="close">Close</button>
</div>
CSS
div#image { background: url(http://i.imgur.com/PF2qPYL.png) no-repeat; }
JQUERY
$(document).ready(function(){
$( "#image" ).click(function() {
jQuery(this).find("#container").toggle();
});
});
Using the article link posted by Raimov (which I actually came across in a Google search before realize he posted it as well ;), we can use jQuery to animate the width when the toggling element is clicked. Remember that a background does not add size to an element, so the toggle with the background image must have a height attribute set. Also, if you have long lines of text in the form, you'll have to wrap them yourself or use another method from the article.
http://jsfiddle.net/iansan5653/wp23wrem/ is a demo, and here is the code:
$(document).ready(function () {
$("#image").click(function () {
$("#container").animate({width: 'toggle'});
});
});
and this CSS is necessary:
div#image {
background: url(http://i.imgur.com/PF2qPYL.png) no-repeat;
height: 36px;
/*height needed to actually show the div (default width is 100%)*/
}
#container {
white-space: nowrap;
overflow: hidden;
}
I created a jsFiddle for you, where after clicking on img, the form hides to the left.
$("#image").click(function() {
var $lefty = $(this).children(); //get the #container you want to hide
$lefty.animate({
left: parseInt($lefty.css('left'),10) == 0 ?
-$lefty.outerWidth() : 0
});
The resource was taken from:
Tutorial how to slide elements in different directions.
Lets try something more simple. I have a pink box and I want it to turn from pink to red when the user mouseovers it. This function is not working. Can anyone help me fix the code or find the error?? They have told me if I can't get this working I am going to be let go!!
<html>
<head><title></title>
<script src="raphael-min.js"></script>
<script src="jquery-1.7.2.js"></script>
<style type="text/css">
#input
{
margin-top:-200px;
}
</style>
</head>
<body style="background-color:black";>
<div id="draw-here-raphael" style="height: 400px; width: 400px; background: #666; z-index:0;">
</div>
<div id="input" style="z-index:99;" >
<input type="text" value="0"; style="text-align:right;" /><br />
</form>
</div>
<script type="text/javascript">
//all your javascript goes here
$(function() {
var r = new Raphael("draw-here-raphael"),
// Store where the box is
position = 'left',
// Make our pink rectangle
rect = r.rect(20, 20, 250, 300, 10).attr({"fill": "#fbb"});
$("rect").(function(i) {
$("rect").mouseover(function() {
$("rect").attr({"fill": "red"});
});
});
});
</script>
</body>
</html>
why dnt u use css for this
#draw-here-raphael:hover{background-color:Red;}
Or, Use this code instead
$(rect).mouseover(function() {
this.attr({"background-color": "red"});
});
Try changing the $("rect") to just rect
rect = r.rect(20, 20, 250, 300, 10).attr({"fill": "#fbb"});
rect.(function(i) {
rect.mouseover(function() {
rect.attr({"fill": "red"});
});
});
However as someone pointed out in a comment it may not work with SVG.
If you have the rect as a div with height and width, fixed position with left and top and a background-color you can just change the css value of background-color on mouseover.
For a div example:
Suppose you have a div with id="pinkBox"
$('#pinkBox').mouseover(function() {
$(this).css('background-color','#ff0000');
});
You will need to position the div too, I'm not sure how the Raphael stuff works, never looked at it personally, but if its fixed positioning then you can emulate this in css with position:fixed; top: some value; left: some value; width: some value; height: some value
Full code:
HTML:
<div id="pinkBox" style="position:fixed; left:20, top:20; width:250; height:300" ></div>
Javascript:
$(document).ready(function() {
$('#pinkBox').mouseover(function() {
$(this).css('background-color','#ff0000');
});
});
Unfortunately if you are not using CSS3 you will not be able to have rounded corners unless you use images. Using CSS3 though you can add rounded corners by adding the following style to the div
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
For simplicity I have added the styles inline on the div, I would suggest making a class though and using the class attribute, keeping your css in a seperate file or in the head of your document.
I changed it around a bit, but what about something like this:
var canvas = Raphael(document.getElementById("draw-here-raphael"));
// Make rectangle pink
var r = canvas.rect(20, 20, 250, 300, 10).attr("fill", "#fbb");
$("#draw-here-raphael").mouseover(function() {
r.attr("fill", "red");
});
http://jsfiddle.net/7PLy9/
Newbie jQuery questions. Say I have a label on a web page. I want the effect of sliding out an input box when hovering the mouse over the label. Any hint on how to assemble some existing jQuery support to achieve it?
Example at jsFiddle.
HTML:
<div class="HasHiddenInput">
<div>My label</div>
<div class="HiddenInput">
<input .../>
</div>
</div>
Javascript:
$(function(){
$('.HasHiddenInput').hover(
function(){
$(this).find('.HiddenInput').stop(true,true).slideDown();
},
function(){
$(this).find('.HiddenInput').stop(true,true).slideUp();
}
);
});
Optional CSS:
.HiddenInput{
display:none; /*Initially hidden*/
}
.HasHiddenInput{
padding: 5px;
border: solid 1px #ccc;
}
On hover animate a div to show the input:
$("#YourLabel").hover(function(){
$("#DivWrappingInput").animate({
width: 100,
}, 500);
});
Without seeing any code or CSS, it's hard to say but something like this should work:
Assumign your HTML is like this:
<div>
<div>
<label>Label 1</label>
<input />
</div>
</div>
$(document).ready(function(){
$('label').hover(function(){
//Animate width to show the input box
$(this).siblings('input').animate({'width':200 + 'px'});
}, function(){
//Animate width to hide input box
$(this).siblings('input').animate({'width':0 + 'px'});
}
});
You'll need to add a position of relative to the input box. You can animate the width of the input box if required as well. It depends on the context of use of the input box and label.
I want to drop the opacity and overlay text on a thumbnail image when I mouse over it. I have several ideas about how to do it, but I'm fairly certain they're inefficient and clumsy.
Make a duplicate image in Photoshop with the text overlay and reduced opacity. Swap the original out for the duplicate on mouseover.
Use CSS to drop the opacity on mouseover. Use Javascript to toggle visibility of a div containing the overlay text.
The problem I see with 1 is it seems like an unnecessary use of space and bandwidth, and will cause slow load times. With 2, it seems like I'd have to hard-code in the location of each div, which would be a pain to maintain and update. I know this is a somewhat general question, but I'm at a loss about how to go about this. How can I do this relatively simple task in a way that will make it easy to add new thumbnails?
Wrap your image in a <div class="thumb">
Add position: relative to .thumb.
Add <div class="text> inside .thumb.
Add display: none; position: absolute; bottom: 0 to .text.
Use .thumb:hover .text { display: block } to make the text visible on hover.
Like this: http://jsfiddle.net/dYxYs/
You could enhance this with some JavaScript/jQuery: http://jsfiddle.net/dYxYs/1/
$('.text').hide().removeClass('text').addClass('text-js');
$('.thumb').hover(function(){
$(this).find('.text-js').fadeToggle();
});
This way, the basic effect still works without JavaScript, and users with JavaScript get the appealing fade effect.
Go with option 2. There are ways to do it to not have to write a jQuery function for each image. As seen in my jsfiddle.
http://jsfiddle.net/daybreaker/dfJHZ/
HTML
<img src="http://placekitten.com/300/300" />
<span class="text" style="display:none">THIS IS A KITTEN</span>
<br><br>
<img src="http://placekitten.com/200/200" />
<span class="text" style="display:none">THIS IS A KITTEN</span>
jQuery
$('img').mouseover(function(){
$(this).css('opacity','.2');
$(this).next('span.text').show();
}).mouseout(function(){
$(this).css('opacity','1');
$(this).next('span.text').hide();
});
You would need to modify the span.text css to overlay it on top of the image, but that shouldnt be too bad.
Wrap it in an element and do something like this:
var t;
$('div.imgwrap img').hover(function(){
t = $('<div />').text($(this).attr('title')).appendTo($(this).parent());
$(this).fadeTo('fast',0.5);
},function(){
$(this).fadeTo('fast',1);
$(t).remove();
});
with a markup similar to:
<div class="imgwrap">
<img src="http://www.gravatar.com/avatar/3d561d41394ff0d5d0715b2695c3dcf0?s=128&d=identicon&r=PG" title="text" />
</div>
example: http://jsfiddle.net/niklasvh/Wtr9W/
Here's an example. You can position the text however you want, but the basic principle below.
http://jsfiddle.net/Xrvha/
#container { position: relative; }
#container img, #container div {
position: absolute;
width: 128px;
height: 128px;
}
#container img { z-index -1; }
#container div {
z-index 1;
line-height: 128px;
opacity: 0;
text-align: center;
}
#container:hover img {
opacity: 0.35;
}
#container:hover div {
opacity: 1;
}
If you don't want to change your HTML wraping things etc, I suggest you this way. Here is the jQuery:
$(function() {
$(".thumb").mouseenter(function() {
var $t = $(this);
var $d = $("<div>");
$d.addClass("desc").text($t.attr("alt")).css({
width: $t.width(),
height: $t.height() - 20,
top: $t.position().top
});
$t.after($d).fadeTo("fast", 0.3);
$d.mouseleave(function() {
$(this).fadeOut("fast", 0, function() {
$(this).remove();
}).siblings("img.thumb").fadeTo("fast", 1.0);
});
});
});
2 is a good solution, have done about the same as this and it isn't as hard as you would've tought;
Drop de opacity with css indeed, than position a div relative to the img, and over it. It can be done with plain css. The z-index is the trick. That div can just be shown with $('#div').slideUp() ie.