I'm just now giving my first steps on jQuery animate(). I'm trying to make a presentation type thing just to practice, but I can't seem to be able to change the text of my div in the middle of the animation using the animate() function.
Here's my current code:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
div.animate({fontSize:'1em'},2000);
div.animate({opacity:'0'},"slow");
//can I change the text with animation???
div.animate({opacity:'1'},"slow");
div.animate({left:'0px'},"slow");
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<div id='text' style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>
</body>
</html>
Is there a practical way I can change the text while the opacity is turned off, so when the animation returns the text is changed?
You can use the queue function to queue up the change.
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
div.animate({fontSize:'1em'},2000);
div.animate({opacity:'0'},"slow");
div.queue(function() {
div.html('New text');
div.dequeue(); // This is necessary to continue the animation
});
div.animate({opacity:'1'},"slow");
div.animate({left:'0px'},"slow");
});
});
You can define an animation-listener and change your text within the listener:
$('div').animate(
{ opacity: 0 }, // and all the other properties you want to animate
{ duration: 50,
step: function(left){
// change text here after a particular progress
}
});
This is not available in jQuery, but you can use the jQuery plugin typed.js, here is an example:
div.typed({ strings: ["HELLO", "It's me..."], typeSpeed: 0 });
Related
Hey im trying to change color of "Hello" when i hover over it. So far i cant get it to work and when i look at the console i get "ReferenceError: hover is not defined" same goes for "out". How do i fix this and is this the only issue? thanks!
<html>
<head>
<title></title>
<script>
var $Osc = {
hover: function(event){
("style", "background-color:blue;")
},
out: function(event){
("style", "background-color:white;")
}
}
var $Osc = document.getElementById("change");
hover.addEventListener("mouseover", $Osc.hover, false);
out.addEventListener("mouseout", $Osc.out, false);
</script>
</head>
<body>
<div id="change"onmouseover="hover(this)" onmouseout="out(this)">
Hello
</div>
</body>
</html>
There's no place you have defined hover and out. You need to change your code this way:
var $OscElement = document.getElementById("change");
$OscElement.addEventListener("mouseover", $Osc.hover, false);
$OscElement.addEventListener("mouseout", $Osc.out, false);
You are also overwriting the $0sc as the current element, which causes a problem. Finally, either execute the whole script after the page load or put the script after the elements.
You don't need the onmouse events on the element, which can be removed.
Finally, the way you are setting the CSS is totally wrong. You need to use the event.target for the current element.
The fixed code would be:
var $Osc = {
hover: function(event) {
event.target.style.backgroundColor = "blue";
},
out: function(event) {
event.target.style.backgroundColor = "white";
}
}
var $OscElement = document.getElementById("change");
$OscElement.addEventListener("mouseover", $Osc.hover, false);
$OscElement.addEventListener("mouseout", $Osc.out, false);
<div id="change">
Hello
</div>
Ultimately, the whole thing can be easily achieved using CSS, not sure why you want JavaScript to do this:
#change {
background: white;
}
#change:hover {
background: blue;
}
<div id="change">
Hello
</div>
Firstly - i'm not even sure if the syntax is correct, but what i'm trying to do is, i have a div showing an animated image sequence which picks a position using a variable.
I will eventually use JSON to feed the value being changed, but for now i'm just trying to understand how to use JQuery to change the variable. Here's the code:
<div id="noiseAnimDiv" style="float: center; background-color: #ffffff; ">
<script type="text/javascript" src="./animatedpng.js">
</script>
<script type="text/javascript">
var stoptheClock = 3;
noiseAnim = new AnimatedPNG('noise', './noise/noise0.png', 8, 50);
noiseAnim.draw(false);
noiseAnim.setFrameDelay(stoptheClock, 1000); //spin yet stay on value 3
</script>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(
function() {
$("#stoptheClock").val(6); //
}
);
</script>
Any help much appreciated
code is live btw at so you can at least see the animation seq
http://ashleyjamesbrown.com/fgbp/noise.htm
The AnimatedPNG library you are using only checks the variable's value once - when initialized. in your code, you are changing the value after initializing it.
$(document).ready(
function() {
$("#stoptheClock").val(6); //
}
);
Should be
function() {
stoptheClock = 6;
noiseAnim.draw(false);
noiseAnim.setFrameDelay(stoptheClock,1000);
}
You are not using JQuery for any useful cause in your code, therefore I have removed all of the Jquery parts.
I want to create a function for showing pop or status when user typing something in field, I want to do it without submitting form, I have try following function but its not working properly can anyone let me know where the problem..........?
Javascript
<script type="text/javascript">
document.getElementById('confirm').addEventListener('change', checkFile, false);
approveletter.addEventListener('change', checkFile, false);
function checkFile(e) {
if ($('#confirm').val().length > 0) {
alert("txt");
}
}
</script>
HTML
<input type="text" name="text" id="confirm">
Just listen to the onkeyup and onkeydown events. I included a jsfiddle that might help.
jsfiddle
Edit - The Latest Update
Okay, I see you've got your fiddle from Vivek, but you might be interested in this as well. Now I get completely what you want to achieve, and here's a short description. The best practice is to split JavaScript from HTML and avoid putting JavaScript inside HTML head and body as much as you can.
So, first create three files: Test.js Example.html and Test.css. Of course, you also need jQuery file which you just include here inside the head. In Example.html put the following code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="Test.css"/>
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript" src="Test.js"></script>
</head>
<body>
<input type="text" id="test"/><span id="popup"></span>
</body>
</html>
In Test.css add some style to your pop-up span element (you could also use division element and style it to your liking if you want fixed height and width, add shadows and so on):
#popup {
background-color: red;
color: white;
display: none;
}
And finally, put the following JavaScript code in Test.js:
$(document).ready( function() {
$("#test").keyup( function() {
if($("#test").val().length>5) {
$("#popup").fadeIn();
$("#popup").html("Invalid length. Maximum is 5.");
}
else {
$("#popup").fadeOut();
}
});
});
By dividing JavaScript, CSS and HTML into separate files, you get much tidier HTML and separated styling and client-side logic from markup.
Old Answer
Wrap the code inside $(document).ready().
Like this:
$(document).ready(function() {
document.getElementById('confirm').addEventListener('change', checkFile, false);
approveletter.addEventListener('change', checkFile, false);
});
function checkFile(e) {
if ($('#confirm').val().length > 0) {
alert("txt");
}
}
Also, addEventListener is not available in IE8 and below. You could use the onchange event, like this:
$(document).ready(function() {
document.getElementById("confirm").onchange = checkFile;
});
There is a similar method for IE8 and earlier called attachEvent. In case of using the attachEvent method, it would look something like the following:
$(document).ready(function() {
document.getElementById('confirm').attachEvent('change', checkFile);
approveletter.attachEvent('change', checkFile);
});
You could also use the jQuery.change() as suggested in the comments by Protron:
$(document).ready(function() {
$("#confirm").change(function() {
if ($('#confirm').val().length > 0) {
alert("txt");
}
});
});
And of course it's possible to do it without the classic alert pop-up window. You could create your own HTML division element with display:none and show it when necessary. Just send me a note in the comments if you need instructions on that as well.
Using this, you need not click the web page.
<input type="text" name="text" id="confirm"><br /><br />
<span id="status" ></span>
<script type="text/javascript">
$('#confirm').keyup(function () {
if ($('#confirm').val().length > 0) {
$('#status').html("Text entered");
}
else
{
$('#status').html("Text removed");
}
}
)
</script>
Here's a simple animation i'm trying to make. The divs array carries the id of different divs. The loop function simply loops through the array and shows the divs and hides them making it like a slideshow. For some reason, both divs show at the same time and then hide at the same time. I just couldn't figure out why...please help out! Thanks!
Edit:I think the javascript loop isn't waiting for the JQuery animation to finish. I think ill have to use the setInterval function? Can someone tell me how I can use it here?
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script>
var divs=["#slide1","#slide2"];
function loop(){
for (var i=0;i<divs.length;i++)
{
$(divs[i]).show(1000).hide(1000);
}
}
$(document).ready(function(){
//$("#slide1").show();
loop();
});
</script>
</head>
<body>
<div id="slide1" style="display:none">ONE</div>
<div id="slide2" style="display:none">TWO</div>
</body>
</html>
How about this:
jsFiddle example
var divs = ["#slide1", "#slide2"];
function loop() {
var elem = divs.shift();
$(elem).show(1000).hide(1000, function () {
divs.push(elem);
loop();
});
}
$(document).ready(function () {
//$("#slide1").show();
loop();
});
When I try to clone a textarea by using cloneNote(true), the cloned textarea is not editable. Does anyone know how to resolve the problem? The sample codes show as following:
<html>
<head>
<script type="text/javascript" src="/javascripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
theme : "advanced",
mode : "textareas",
});
</script>
<script type="text/javascript">
testclonenode = {
addAbove : function (element) {
var rowEl = element.parentNode.parentNode.parentNode;
var rowElClone = rowEl.cloneNode(true);
rowEl.parentNode.insertBefore(rowElClone, rowEl);
return false;
}
};
</script>
</head>
<body>
<table>
<tr><td>
<textarea name="content" style="width:100%">this is a test </textarea>
<p> <button onclick='return testclonenode.addAbove.call(testclonenode, this);'> Add above </button>
</td></tr>
</table>
</body></html>
It does not work that way. Also, it is impossible to move a tinymce editor using dom manipulation.
The tinymce wiki states the following:
mceAddControl
Converts the specified textarea or div
into an editor instance having the
specified ID.
Example:
tinyMCE.execCommand('mceAddControl',false,'mydiv');
So when you clone a textarea there is another problem: You will have the same id twice which will result in errors accessing the right tinymce instance.
I got this to work by using an ID which is incremented each time my clone function is triggered, so
var insertslideID = 0;
function slideclone() {
$('<div class="slides"><textarea name="newslide['+insertslideID+'][slide_desc]" id="mydiv'+insertslideID+'"></textarea></div>').insertAfter('div.slides:last');
tinyMCE.execCommand('mceAddControl',false,'mydiv'+insertslideID);
insertslideID++;
}
$('input[name=addaslidebtn]').click(slideclone);
Seems to work.
A wee bit tidier, I just use a number for my id - copy1 is the name of my button - I add the new element to the end of my container.
var count = 0;
$("#copy1").click(function(){
var newId = count;
$( "#first" ).clone().appendTo( "#container" ).prop({ id: newId, });
tinyMCE.execCommand('mceAddControl',false,newId);
count++;
});
I ran into a similar problem, except my element IDs (not just textareas) could be anything, and the same ID was always appearing twice. What I did is supposed to be horribly inefficient but there was no noticeable performance loss with dozens of elements on the page.
Basically I removed the TinyMCE ID first (uses jQuery):
$(new_element).find('.mce-content-body').each(function () {
$(this).removeAttr('id');
});
Then I reinitialized TinyMCE for all relevant elements.