I have a text area. Whenever someone will click on the text-area then the height will be increased and clicking again anywhere in the screen height will be decrease.
<textarea id="revbox" style="height: 50px; width: 260px;"></textarea>
<script>
$('textarea#revbox').focus(function () {
$('textarea#revbox').animate({ height: 150 }, 1000);
});
</script>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
But the code is not working. How can i do that?
Your code is good for the focus event, and you only need to add similar code for the blur event. Try this:
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<textarea id="revbox" style="height: 50px; width: 260px;"></textarea>
<script>
$('textarea#revbox').focus(function () {
$('textarea#revbox').animate({ height: 150 }, 1000);
});
$('textarea#revbox').blur(function () {
$('textarea#revbox').animate({ height: 50 }, 1000);
});
</script>
Please note that you need to include jQuery at the top (preferably in the <header>).
try using mouseenter and mouseleave events:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="revbox" style="height: 50px; width: 260px;"></textarea>
<script>
$('textarea#revbox').on("mouseenter",function () {
$('textarea#revbox').animate({ height: 150 }, 1000);
});
$('textarea#revbox').on("mouseleave",function () {
$('textarea#revbox').animate({ height: 50 }, 1000);
});
</script>
Related
Hello i have a problem with my website.
I want to make a JavaScript function which scrolls down to an object with the id #important. Usually i just modify the link to page.html#important. but because the object is at the bottom of a div which has a scrollbar itself that won't work.
Code:
<script language="javascript" type="text/javascript">
var timeout = setInterval(reloadChat, 10);
function reloadChat() {
$("#chat").load("chat.php");
}
reloadChat();
</script>
and in chat.php i fetch rows from my database in which the last row is being displayed in a <div id="lastmessage"></div> which i want to scroll down to
Thanks in advance
Is .scrollIntoView() something like you want?
https://www.w3schools.com/jsref/met_element_scrollintoview.asp
Or maybe this can help?
https://stackoverflow.com/a/270628/4335288
var objDiv = document.getElementById("important");
objDiv.scrollTop = objDiv.scrollHeight;
I would use Element.scrollIntoView() with behavior set to smooth.
Source: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
window.onload = function(e){
var element = document.getElementById('second');
element.scrollIntoView({ behavior: 'smooth' });
}
#first {
height: 2000px;
background-color: lightgreen;
}
#second {
height: 2000px;
background-color: lightpink;
}
#third {
height: 2000px;
background-color: lightblue;
}
<html>
<head>
<title>Test</title>
</head>
<body>
<div id="first"></div>
<div id="second"></div>
<div id="third"></div>
</body>
</html>
behavior: 'smooth' will quickly provide good UX.
You can choose when to call element.scrollIntoView({ behavior: 'smooth' });. It will scroll to that DOM element when called.
I am working with web application and I want to resize textarea with animation effect (smoothly resize) when the textarea gain focus.
I tried following code to resize textarea on focus gain but it does not smoothly resize.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type='text/javascript'>
function abc()
{
$('#txt').attr('rows',15);
}
</script>
</head>
<body>
<textarea id='txt' rows="4" onfocus='abc();' cols="50">
this is testing of textrea
</textarea>
</body>
</html>
If you dont need support for IE9 and older versions, pure CSS can solve your issue.
#txt {
height:80px;
transition: all 2s;
-webkit-transition: all 2s; /* Safari */
}
#txt:focus {
height:300px;
}
http://jsfiddle.net/MHC8T/
try this:
function abc()
{
$('#txt').animate({'height':"+=100px"}, 400);
}
you can switch the height to whatever you want.. the +=100 is relative and will add 100px to the height of the textarea
also as an external event handler
$("#txt").bind("focusin",function abc(){
$('#txt').animate({'height':"+=100px"}, 400);
});
hope that helps
Try this...
$('#txt').focus(function() {
$('#txt').animate({
width: 500,
height: 200
}, 1000);
});
$('#txt').blur(function() {
$('#txt').animate({
width: 160,
height: 48
}, 1000);
});
Example: http://jsfiddle.net/FMp4a/
For more information about the $.animate() see this page in the jQuery API documentation...
http://api.jquery.com/animate/
Try this
$('textarea.expand').focus(function ()
{
$(this).animate({ height: "4em" }, 500);
});
for more information check
"http://jsfiddle.net/Y3rMM/"
I came up with a different answer, this way it auto adjusts to the size of the amount of content in the textarea instead of a fixed height
$('#txt').focus (function() {
$(this).animate({
height: $(this)[0].scrollHeight
}, 200);
});
$('#txt').blur(function() {
$('#txt').animate({
height: 40
}, 200);
});
Example: http://jsfiddle.net/FMp4a/10/
This jQuery code will highlight the div box when clicked.
I want to get the highlight on load, how can I do that?
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style type="text/css">
div { margin: 0px; width: 100px; height: 80px; background: #666; border: 1px solid black; position: relative; }
</style>
<script>
$(document).ready(function() {
$("#div1").click(function () {
$(this).effect("highlight", {}, 3000);
});
});
</script>
</head>
<body">
<div id="div1"></div>
</body>
</html>
Put the statement for highlight in document.ready at the same level you are binding click event..
Live Demo
$(document).ready(function() {
$("#div1").effect("highlight", {}, 3000); //this will highlight on load
$("#div1").click(function () {
$(this).effect("highlight", {}, 3000);
});
});
Alternatively, this way might be a little cleaner in that if you add some other effects that you want to show on the click state, you only need to define them one time.
$(document).ready(function() {
$("#div1").click(function () {
$(this).effect("highlight", {}, 3000);
});
$('#div1').click();
});
Javascript
$(document).ready(function() {
$("#div1").effect("highlight", {}, 3000);
});
This will highlight the div1 when the document is ready. If you also want a click handler, you can keep it and put in whatever code you want (ie. you can also keep the effect in there as well, if you want to).
Fiddle
Basically, I currently have a slide down menu that displays links when you click the header.
I want this to change to a horizontal slide but my knowledge is currently only with HTML and CSS, in other words I'm not very good at jquery/javascript.
So yeh, here's an example (Click CATEGORIES) http://newsunken.tumblr.com/
I would like it so that when you click categories the categories slide from the left to the right and display like "CATEGORIES TEES JUMPERS HEADWEAR"
Sorry for the noob question!
$('#box').click(function()
{
$(this).animate({
width: '350px'
}, 300, function() {
// Animation complete.
});
});
and
<div id="box" style="width:70px; height: 20px;overflow:hidden; border:1px solid black;">Categories Tees Jumpers Headwear Gift Vouchers</div>
here's the best thing i could come up with but isnt as sleek as the one on newsunken.tumblr.com
This script slides horizontally fine, just in case I am showing the whole page. Please, pay attention to the document.ready function
<html>
<head>
<title>sliding</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#box').click(function()
{
$(this).animate({width: '350px'}, 300, function() {
// Animation complete.
});
});
});
</script>
</head>
<body>
<div id="box" style="width:70px; height: 20px;overflow:hidden; border:1px solid black;">Categories Tees Jumpers Headwear Gift Vouchers</div>
</body>
</html>
I'm not sure if it is what you are looking for, but try this:
$('#box').click(function()
{
$(this).animate({
height: 'toggle',
width: '350px'
}, 300, function() {
// Animation complete.
});
});
I have an image in a html document and when the webpage loads i want the image to bounce. I have a jquery function that does this only when the image is clicked on. I can't figure out how to make this work onLoad...
Here is the code
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style type="text/css">
div { margin-left: 500px; margin-top: 200px; width: 100px; height: 80px; position: relative; }
</style>
<script>
$(document).ready(function() {
$("#logo").click(function () {
$(this).effect("bounce", { times:4, distance:200 }, 400);
});
});
</script>
</head>
<body>
<div id="logo"><img src="http://visionhelp.files.wordpress.com/2012/01/soccer-ball.jpg"/> </div>
</body>
</html>
Thanks for checking this out. Much appreciated! :)
$(document).ready(function () {
$("#logo").effect("bounce", { times:4, distance:200 }, 400);
});
or, using a more modern style of document ready function:
$(function () {
$("#logo").effect("bounce", { times:4, distance:200 }, 400);
});
This work for you:
$(window).load(function() {
$('#logo').effect("bounce", {
times: 4,
distance: 200
}, 400).click(function() {
$(this).effect("bounce", {
times: 4,
distance: 200
}, 400);
});
})
With a jsFiddle example
Just trigger the click event on page load. Try this
$(document).ready(function() {
$("#logo").click(function () {
$(this).effect("bounce", { times:4, distance:200 }, 400);
})
.click();//Will trigger the click event on page load
});
If you don't want this effect on logo click but just on page load then use this.
$(document).ready(function() {
$(this).effect("bounce", { times:4, distance:200 }, 400);
});