Two Javascript scripts conflicting (show/hide) - javascript

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.

Related

Revealing module pattern and jquery failed

I have a file call text.js and it has
var Text = function(canvas){
var textField = $('#textField'),
addTextButton = $('#addText');
var init = function(){
addTextButton.click(function(){
alert('won"t work?')
});
},
resetTextField = function(){
// it work if I put the selector here like var textField = $('#textField'),
textField.val(''); // won't work
};
return{
init:init
}
}();
It's included in my index.html. In there I do init like
$(function(){
Text.init();
}());
The problem is the even't can't be fired. I think I messed up something.
The code in Text is run immediately, and returns the object with init on it. If you run that code before the elements it looks up exist, for instance:
<!doctype html>
<html>
<head>
<!-- ... --->
<script src="text.js"></script><!-- Problem here -->
<script>
$(function(){
Text.init();
}());
</script>
</head>
<body>
<!-- ... --->
<input id="textField"><input id="addText" type="button" value="Add">
<!-- ... -->
</body>
</html>
... you'll end up with empty jQuery objects in textField and addTextButton.
Separately, you're also running the function you're trying to pass ready immediately (and then passing undefined into ready), the problem is here:
$(function(){
Text.init();
}());
// ^^---------- problem
You don't want those (). You want to pass the function into ready:
$(function(){
Text.init();
}); // <== Note no ()
If you're going to have the init method, it would be best to put all your initialization inside it rather than putting it in two places:
var Text = function(canvas){
var textField, addTextButton;
var init = function(){
textField = $('#textField');
addTextButton = $('#addText');
addTextButton.click(function(){
alert('won"t work?')
});
},
resetTextField = function(){
// it work if I put the selector here like var textField = $('#textField'),
textField.val(''); // won't work
};
return{
init:init
}
}();
Note, though, that if you follow the usual best practice of putting your scripts at the end of the document, just prior to the closing </body> tag, the elements defined above that will exist and be available, which would make using ready (and init) unnecessary. So if you control where the script tags go, that's an option.
So for instance:
<!doctype html>
<html>
<head>
<!-- ... --->
</head>
<body>
<!-- ... -->
<input id="textField"><input id="addText" type="button" value="Add">
<!-- ... -->
<script src="text.js"></script>
<script>
$(function(){
Text.init();
});
</script>
</body>
</html>
You are invoking the function once defined using () at a point where DOM is not loaded. Thus, all selectors return zero nodes.
var Text = function(canvas){
// ...
}();
^^
Remove that. And when you call it, you need to instance the function first, and keep that instance reference (if you wish to).
var text = new Text();
text.init();

Changing a javascript variable inside a DIV using JQuery

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.

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>

How can I get url from java script ad line?

I have one div when I click that div I want to open a child browser.I have the code for child browser but when I click the div it executes the javascript line and I didn't get any url from there.
Please check my code
Div code
<div class="box_padding " onClick="window.open(this.href,'targetWindow','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes);return false;" id="column-c-box-1" >
<script type="text/javascript" src="http://ad.leadboltads.net/show_app_ad.js?section_id=838333320"></script>
</div>
when I tried this nothing happening.
So I have tried one more way to solve this issue
function openwindow(){
w=open("myurl",'windowname','width=600,height=250,scrollbars,resizable,toolbar,status');
with(w.document){
write("<body>");
write("This is a new window");
write("</body>");
}
return false;
}
HTML:
<div class="box_padding "onClick="openwindow();" id="column-c-box-1" >
<script type="text/javascript" src="http://ad.leadboltads.net/show_app_ad.js?section_id=838333320"></script>
</div>
This is also not working.
If you have jquery available you can use this instead of this.href:
$('script').attr('src');
function openwindow(){
w=open($(this).find('script').attr('src'),'windowname','width=600,height=250,scrollbars,resizable,toolbar,status');
with(w.document){
write("<body>");
write("This is a new window");
write("</body>");
}
return false;
}
This seems to work in a preliminary test, native javascript. This would be trivial w/ jquery as a previous poster has shown.
Use the URL as a parameter in the div tag "srcVal".
<div class="box_padding " srcVal="http://ad.leadboltads.net/show_app_ad.js?section_id=838333320" onClick="openwindow()" id="column-c-box-1">click me</div>
or this way:
<div class="box_padding "onClick="openwindow();" id="column-c-box-1" >
<script type="text/javascript" src="http://ad.leadboltads.net/show_app_ad.js?section_id=838333320" id="scriptTag"></script>
</div>
Your function slightly modified:
function openwindow(){
var id = document.getElementById("column-c-box-1").getAttribute("srcVal");
//or
// var scr = document.getElementsByTagName('script');
//var id = scr[0].src; // use scr[scr - 1].src if have multiple scripts
var w=open(id,'windowname','width=600,height=250,scrollbars,resizable,toolbar,status');
with(w.document){
write("<body>");
write("This is a new window");
write("</body>");
}
return false;
}
I used "with" because that is in your original code, but I'd caution against it.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/with?redirectlocale=en-US&redirectslug=JavaScript%2FReference%2FStatements%2Fwith

Hide div when another div is empty

I know theres lots of answers on this problem, but I've read through all I can find but still cant get it to work.
I have a div which i need to be hidden if another div is empty, or just containing whitespace.
<div id="rt-main" class="mb12">
<div class="rt-grid-12">
<div class="rt-block component-block main-overlay-light">
<div id="rt-mainbody">
<div class="component-content">
<div class="blog-featured"></div>
( I want to hide div.mb12 when div blog-featured = ' ' )
My closest bet is this:
$(document).ready(function() {
str = $('div.section').text();
if($.trim(str) === "") {
$('div.section').hide();
}
});
But I get all sorts of errors in the console when trying.
Now I've got "TypeError: Cannot call method 'text' of null"
On the actual site (not included in the question), you have this:
jQuery.noConflict();
This makes it so that $ is no longer jquery. Most likely because one of the many other libraries you have included uses the $ name. You can simply change your code to use jQuery in place of $:
jQuery(document).ready(function() { ...
Alternatively, you can assign jQuery to a different variable name:
var $j = jQuery.noConflict();
$j(document).ready(function(){ ...
You want this -
jQuery(document).ready(function () {
var str = jQuery('div.blog-featured').text();
if (jQuery.trim(str) === "") {
jQuery('div.mb12').hide();
}
});
Demo ---> http://jsfiddle.net/PqXWJ/20/
Are you loading the jQuery library before your script? Do you have something like this in the <head> tags of your page?
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function() {
etc etc
</script>

Categories