Changing a javascript variable inside a DIV using JQuery - javascript

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.

Related

Conditionally blink text

Can anyone let me know how can i make it blink text based on if statement?
Sample:
if value 0 - NO BLINK
If not 0 - Should blink
Thank you in advance
I think you mean $('.blink'), assuming you mean a class and not a tag name.
<script type="text/javascript">
setInterval(function(){
$('.blink').each(function(){
$(this).css('visibility' , $(this).css('visibility') === 'hidden' ? '' : 'hidden')
});
}, 250);
</script>
JSFiddle test
You don't need the inline style, Since you are using jQuery, toggle will help you doing this. you can simply do it in this way.
Here is demo:
setInterval(function(){
$('.blink').toggle();
}, 250);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class='blink'>Hello!</div>
<div class="blink">Testing again.</div>
See this fiddle.
http://jsfiddle.net/tcy6a5kz/
//Line 21
if (blinkStatus == 1) {
Blinker.start();
}
else {
Blinker.stop();
}
At this line, you can change the if statement to whatever you want (true-like or false-like value).
You can get the span value like this:
// This will return the inner text of the span
// I expect this text as 0 or more. (number or text)
// No text in the span == 0
$('span.top-title').val();
So you can change my code at line 21:
//Line 21
if ($('span.top-title').val() == 1) {
Blinker.start();
}
else {
Blinker.stop();
}
NOTE: You need jQuery included to your site to run this code. Everything starting with '$' is jQuery object and cannot operate without jQuery library.
In case you do not have jQuery. You can include it in your HTML:
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
This script must be included before the scripts that uses jQuery. (in most cases it's included at the <head> tag of the HTML. I'm not sure, but I think the "blog service providers" ignoring script definitions in the blog posts.
I know this is too old, but it might help someone searching for this.
I figure it out myself and I know that this is not the best solution.
<div class="blink1">
<span><asp:Label runat="server" Text="Label" ID="inprogress"></asp:Label></span>
</div>
<div class="blink2"><span><asp:Label runat="server" Text="Label" ID="behindsched"></asp:Label></span>
</div>
<script>
var in_progress = parseInt(documentElementById("<%=inprogress.ClientID%>").innerHTML);
var behind_sched = parseInt(documentElementById("<%=behindsched.ClientID%>").innerHTML);
var blinkfunc1 = function(){
$('.blink1').toggle();
}
var blinkfunc2 = function(){
$('.blink2').toggle();
}
var blinkspeed = 550;
$(document).ready(function{
if(in_progress > 0){
setInterval(blinkfunc1, blinkspeed);
}
if(behind_sched > 0){
setInterval(blinkfunc2, blinkspeed);
}
});
</script>
Make sure you don't forget this into your head tag
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

How can show pop when user typing using javascript?

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>

Undefined functions

I'm learning javascript and I'm having trouble figuring out why my script is not working. I'm guessing its because the imageIn and imageOut functions don't have access to the counter variable. How would I go about fixing this? Both imageIn and imageOut have errors in my error console 'undefined'.
<style type="text/css">
ul {
list-style-type:none;
}
</style>
<body>
<div id="slideShow">
<ul>
<li>
<img src="stockboat.png" alt="Steam Boat" id="boat" />
</li>
</ul>
</div>
<script type="text/javascript" src="getElementsByClassName.js"></script>
<script type="text/javascript">
var image = document.getElementsByTagName('img');
for (i = 0, ii = image.length; i < ii; i++) {
image[i].style.opacity = "0.5";
image[i].addEventListener('mouseover', imageIn, 'false');
image[i].addEventListener('mouseout', imageOut, 'false');
}
function imageIn() {
image[i].style.opacity = "1";
}
function imageOut() {
image[i].style.opacity = "0.5";
}
</script>
</body>
</html>
I think you're right about it not recognizing your iteration variable, you'll have to do:
Use reference object:
function imageIn() {
this.style.opacity = "1"; // use "this" instead of image array
}
function imageOut() {
this.style.opacity = "0.5"; // use "this" instead of image array
}
-or-
Closure Approach:
image[i].addEventListener('mouseover'
, (function(obj){return function(){imageIn(obj)};})(image[i])
, 'false');
image[i].addEventListener('mouseout'
, (function(obj){return function(){imageOut(obj)};})(image[i])
, 'false');
Need to change function definition:
function imageIn(obj) { // added parameters "obj"
obj.style.opacity = "1";
}
This method allows you to reference the loop variable, which is nice to have as an example for when using setTimeOut in a loop - so you can reuse code later :)
You may try jsfiddle and put the 2 functions imagineIn and imageOut before the code that use them.
You need to wait for the dom to finish loading before accessing any elements.
Wrap your code in with the following:
window.addEventListener('load', function () {
. . . // Your code
});
Additionally, your i variable is wrapped in the closure of both imageIn and imageOut. This means that whenever any image is receives a mouseover or mouseout event, the opacity will always change for the last image in your list of images.
To fix this, you can bind a scope to the functions:
image[i].addEventListener('mouseover', imageIn.bind(image[i]), false);
Then in your imageIn function you would do:
this.style.opacity = "1";
One last point: you are passing the string 'false' as the third argument to addEventListener. In JavaScript, any non-empty string will evaluate to true, so you should pass the boolean value false instead to prevent event bubbling.
I find jQuery incredibly time-saving and intuitive. You just have to get used to throwaway functions. Check it out! http://jsfiddle.net/wgxZu/1/
<style type="text/css">
ul {
list-style-type:none;
}
</style>
<body>
<div id="slideShow">
<ul>
<li>
<img src="http://placekitten.com/100/100" alt="Steam Boat" id="boat" />
</li>
<li>
<img src="http://placekitten.com/200/100" alt="Steam Boat" id="boat" />
</li>
<li>
<img src="http://placekitten.com/300/60" alt="Steam Boat" id="boat" />
</li>
</ul>
</div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var image = document.getElementsByTagName('img');
for (i = 0, ii = image.length; i < ii; i++) {
image[i].style.opacity = "0.5";
$(image[i]).hover(function(){$(this).css({"opacity":"1.0"})},
function(){$(this).css({"opacity":"0.5"})});
}
</script>
</body>
</html>
There could be errors in your <script type="text/javascript" src="getElementsByClassName.js"></script> which is causing the rest of your script to stop executing.
In addition to the answers mentioned here I would offer some other advice:
Define your counter variables: var i = 0, ii = image.length. Otherwise you might end up using some global i and ii variables that are already set....
Use an inspector like Chrome Developer Tools to find issues in your JS code.
Add and remove CSS classes rather than changing the elements styles. This will allow you to make multiple style changes with little effort.
Learn to make use of Event Delegation in your code, it will help you in the long run especially when you want to start making use of dynamic content.
Good luck with your learning.
Also, as far as getting the code to work you can take a look at this jsFiddle which uses your code with a few modifications: http://jsfiddle.net/b9Fua/

Two Javascript scripts conflicting (show/hide)

I have two Javascript scripts on a site. One is an accordion (show/hide) and the other is a basic script to show/hide based on a hyperlink click. Both scripts work fine independently, but once together on the same page the accordion one stops working: the click to display the items in the accordion stops working. Here's the code:
<link rel="stylesheet" href="[template_url]/js/tinycord/tinycord.css" type="text/css" />
<style>
.inner-boxes .box3, .details1 {
display:none;
}
</style>
<script type="text/javascript">
var parentAccordion=new TINY.accordion.slider("parentAccordion");
parentAccordion.init("acc","h3",0,-1);
</script>
<script>
$(function(){
$(".para").click(function(){
$("#fillit").html($(this).next(".details1").html());
});
$(".details1:first").clone().appendTo("#fillit").show();
});
</script>
<script type="text/javascript" src="[template_url]/js/tinycord/script.js"></script>
content of script.js
var TINY={};
function T$(i){return document.getElementById(i)}
function T$$(e,p){return p.getElementsByTagName(e)}
TINY.accordion=function(){
function slider(n){this.n=n; this.a=[]}
slider.prototype.init=function(t,e,m,o,k){
var a=T$(t), i=s=0, n=a.childNodes, l=n.length; this.s=k||0; this.m=m||0;
for(i;i<l;i++){
var v=n[i];
if(v.nodeType!=3){
this.a[s]={}; this.a[s].h=h=T$$(e,v)[0]; this.a[s].c=c=T$$('div',v)[0]; h.onclick=new Function(this.n+'.pr(0,'+s+')');
if(o==s){h.className=this.s; c.style.height='auto'; c.d=1}else{c.style.height=0; c.d=-1} s++
}
}
this.l=s
};
slider.prototype.pr=function(f,d){
for(var i=0;i<this.l;i++){
var h=this.a[i].h, c=this.a[i].c, k=c.style.height; k=k=='auto'?1:parseInt(k); clearInterval(c.t);
if((k!=1&&c.d==-1)&&(f==1||i==d)){
c.style.height=''; c.m=c.offsetHeight; c.style.height=k+'px'; c.d=1; h.className=this.s; su(c,1)
}else if(k>0&&(f==-1||this.m||i==d)){
c.d=-1; h.className=''; su(c,-1)
}
}
};
function su(c){c.t=setInterval(function(){sl(c)},20)};
function sl(c){
var h=c.offsetHeight, d=c.d==1?c.m-h:h; c.style.height=h+(Math.ceil(d/2)*c.d)+'px';
c.style.opacity=h/c.m; c.style.filter='alpha(opacity='+h*100/c.m+')';
if((c.d==1&&h>=c.m)||(c.d!=1&&h==1)){if(c.d==1){c.style.height='auto'} clearInterval(c.t)}
};
return{slider:slider}
}();
I don't think these scripts actually conflict. You are loading the accordion code after you try to use it. Perhaps reorder your script tags.
<script type="text/javascript" src="[template_url]/js/tinycord/script.js"></script>
should go before the use of TINY.accordion which it defines:
var parentAccordion=new TINY.accordion.slider("parentAccordion");
I don't know enough about the meaning of the string arguments in the call to init, but perhaps you could change the script element that creates the accordion and initializes it to happen on document load, for example by delaying it using jQuery's $.ready or by moving it after any elements whose ids appear in those string arguments.
Also the accordion code is unintentionally using a global s. And short names like s can easily collide which is a maintenance hazard even if not the cause of your immediate problem.
var a=T$(t), i=s=0, ...
is not declaring s locally. Perhaps edit it to say
var a=T$(t), s, i=s=0, ...
<script language="javascript">
jQuery.noConflict();
var b=jQuery.noConflict() || $.noConflict;
b(document).ready(function(){
b(".btn-slide").click(function(){
b("#panel").slideToggle("slow");
b(this).toggleClass("active"); return false;
});
});
</script>
Then instead of $ use b to access jQuery.

how to get tinyMCE editable for a cloned textarea by cloneNode(true) function

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.

Categories