I want to fade in and fade out one button in my web page using jQuery library. The problem is that the code below is not executing because of some syntax errors.
$(document).ready(y);
var y=function(){
$('div').mouseenter(z);
$('div').mouseleave(a);
};
var z=function(){
$('div').fadeTo('fast',1);
};
var a=function(){
$('div').fadeTo('fast',0.5);
};
Should anyone tell me what I am doing wrong here?
Variable and functions gets hosted to the top
this
$(document).ready(y);
var y = function(){
$('div').mouseenter(z);
$('div').mouseleave(a);
};
becomes like this when parsed by the browser
var y = undefined
$(document).ready(y); // undefined
// redefines y
y = function(){
$('div').mouseenter(z);
$('div').mouseleave(a);
};
so declering y first or chage it to a function helps
$(document).ready(y); // function
function y(){
$('div').mouseenter(z);
$('div').mouseleave(a);
};
EDIT:
I feel like you are doing an awful lot of work to fade in/out a button, try this instead?
$(document).ready(function(){
$('#button_id').fadeIn(1000);
$('#button_id').fadeOut(1000);
//fade in/out on the button click
$('#button_id').click(function(){
$('#button_id').fadeIn(1000);
$('#button_id').fadeOut(1000);
});
//the value parse into the fade methods will execute the animation over 1 second
});
Related
This is simple code which works fine, but I want to figure it out how to set a variable for novy.fadeIn(2000).
For example one day will my js file had 300 lines and I want to change variable from one place -> fadeIn to fadeOut or something like that.
var novy = $('<div/>', {id:'namaste'});
var text = {textAlign : 'center', color : '#fff', fontSize: 'xx-large'}
// var example = novy.fadeIn(2000) this is not working
novy.appendTo('body').text('this code is .ITCHI.').css(text).hide();
$(document).on('click', function(){
novy.fadeIn(2000); // example;
})
For better view please look here: https://jsfiddle.net/t305qap2/
The example you give is a little far-fetched for me, but to achieve what you are asking, you can do one of two things:
Wrap common code in a dedicated function
var fade = function (element, duration) {
element.fadeIn(duration);
}
This will let you call fade(novy, 2000) and exchange the underlying animation call as you need it.
Store the function, not the result, in a variable
You see, the reason why var example = novy.fadeIn(2000) isn't working is because it stores the result of calling fadeIn on that element, which is the element itself. fadeIn merely has the side-effect of animation. If you want to store a reference to the function instead of the result, JS allows this. See here:
var novyFader = novy.fadeIn // typeof novyFader === 'function' => true
novyFader.call(novy, 2000)
You want to assign the line to a function and store it as a variable. you can then change the function to a different value in the future
so create a clickFunction like this that returns a function
var clickFunction = function() { return function(){novy.fadeIn(2000);} }
Now change your on click to this
$(document).on('click', clickFunction);
At this time your code should work the same.
In the future you can assign clickFunction to some other function like
clickFunction = function() { return function() {novy.fadeOut(2000);} }
But you might also have to set the document.on callback again
HTH
I cannot understand why this is happening. I have a swiper nested in another swiper (one for vertical scrolling, the other for horizontal. What is driving me nuts is the nested swiper is not defined when I need to destroy it. Here is what I am doing:
function embedSwiper(){
var embeddedEcosystem = new Swiper('.swiper-nested', {
//Styling set in bootstrap.min.css for pagination
mode: 'vertical',
pagination: '.pagination-nested',
paginationClickable: true,
simulateTouch : true,
});
embeddedEcosystem.swipeTo(0, 500, false);
return embeddedEcosystem;
}
That creates the swiper, and returns it to this function:
function reInitEmbedded(){
setTimeout(function(){
embed = embedSwiper();
$(".swiper-nested").css({"height" : "0px"});
$(".swiper-nested").css({"height" : $(".internal-relations").height()});
useLocalImg();
embed.reInit();
//Set the slide height properly since it never works as intended
return embed;
}, 600);
}
I need to set the height here otherwise the slide is not properly fitted (and yes I have tried calculate height, but that was giving me issues on mobile since I am using worklight)
Now, here is where stuff gets wonkey. I am testing this in chrome (sorry, no link that I can provide you with at the moment).
//Resize cards
swiper = reinitSwiper();
innerSwiper = reInitEmbedded();
//Show info
detailsTransition();
//Hides the overlay, and empties the panels to be filled next time
//Bound calls for use when needed
$(".back-button.btn.btn-primary.pull-left").on('click', function(){
goBack(lookUpName);
innerSwiper.destroy();
swiper.destroy();
});
As you can see, I have the swiper variable, which works, and can be destroyed normally, and I have the innerSwiper. The rest is irrelevant because it was working prior to this. What is driving me nuts is that innerSwiperkeeps coming up as undefined, but it shouldn't be because I have traced the stack call in chrome's debugger and the returns all have the swiper variable for the inner swiper. So my question is: What am I doing wrong that I keep getting undefined?
This is because of scoping issue.
inside the click handler, the scope is changed and it does not have access to innerSwiper. So, do this instead:
this.swiper = reinitSwiper();
this.innerSwiper = reInitEmbedded();
var self = this; // HOLD REFERNECE TO THIS AS SELF
//Show info
detailsTransition();
//Hides the overlay, and empties the panels to be filled next time
//Bound calls for use when needed
$(".back-button.btn.btn-primary.pull-left").on('click', function(){
goBack(lookUpName);
self.innerSwiper.destroy(); // here you use self that has reference to swiper
self.swiper.destroy();
});
One more mistake as Thom x pointed out. fix it like this:
// Make sure self is defined be before this function
function reInitEmbedded(){
setTimeout(function(){
embed = embedSwiper();
$(".swiper-nested").css({"height" : "0px"});
$(".swiper-nested").css({"height" : $(".internal-relations").height()});
useLocalImg();
embed.reInit();
//Set the slide height properly since it never works as intended
self.innerSweeper = embed; // change this
}, 600);
}
reInitEmbedded is not returning any value.
function reInitEmbedded(){
setTimeout(function(){
return true;
}, 600);
}
var a = reInitEmbedded();
console.log(a);
==> undefined
Ok, so I figured out what I was doing wrong. Due to the fact that swiper and innersSwiper were global, and I didn't realize that setTimeout can't return anything, I had to access the global variables directly. And since i wasn't using the word innerSwiper in the reInitEmbedded, it wasn't referencing properly.
I had a little problem today and thought I could try stack overflow. I'll be short and sweet (I removed lot of code to make this clear).
I recently discovered raphaeljs and I like it.
I make some circle draggable and it works fine like this:
Working script:
<script>
var paper = Raphael(100,100,500,500);
var circ = paper.circle(50,50,10)
var start = function(){ };
var move = function(dx,dy)
{
this.attr({cx: this.ox + dx, cy: this.oy + dy});
};
var up = function(){};
circ.drag(move,start,up);
<script>
Ok fine, it works and all functions are called properly!
BUT!
I want my move ,start ,up functions to be inside an object and not in the main page
SO
here's my next code
<script src="myobject.js"></script>
<script>
var paper = Raphael(100,100,500,500);
var myobj = new myobject("12","12","6");
<script>
Content of myobject.js :
function myobject(vx,vy,vr)
{
var x,y,r;
x=vx;y=vy;r=vr
paper.circle(x,y,r);
var start = function(){};
var move = function(dx,dy){};
var up = function(){};
this.drag(move,start,up); // error here this line crash
}
I cannot find how to use the drag function inside my object to make it draggable.
Well, that's it. I hope I've been clear and pardon me if there's anything wrong with the way I made this post but it is my first one!
Thanks to everyone that will try to help me!
Wilson
Inside myobject, this variable points to this object, and not to Raphael circle. As myobject does not have drag function, the code yields an error. To make it work, you must refer to Raphael object that has to be dragged, i.e.
function myobject(vx,vy,vr) {
...
this.circle = paper.circle(x,y,r);
...
this.circle.drag(move,start,up);
...
}
Fine, #Hubert OG was right but I also had to change the way I declared my function from
var start()=function
to
this.start() = function
WARNING: Fill your circle/forms because if you don't you have to click the fine border to move it around.
Once the buttons are created, is there anyway I can add a link or use window.location method like this: `window.location = 'nextpage.html?foo=number'. I currently have this
var typeValue = location.search;
var typeStringValue= typeValue.replace("?type=","");
var containers = typeValue.replace("?type=multi","");
var containersValue = parseInt(containers);
var sampleLetter = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"];
function createButton(buttonName){
var buttonDivBlock = document.getElementById("sampleSets");
var buttonElement = document.createElement("input");
buttonElement.setAttribute("type","button");
buttonElement.setAttribute("name",buttonName);
buttonElement.setAttribute("value","Sample Set"+" "+buttonName);
buttonElement.setAttribute("id",buttonName);
buttonDivBlock.appendChild(buttonElement);
// document.getElementById(sampleLetter[i]).setAttribute('onclick',window.location='SampleInfo.html'+typeStringValue+bottonName);<!--add the button link -->
}
function setButtons(numberOfContainers){
for(i=0;i<numberOfContainers;i++){
createButton(sampleLetter[i]);
}
}
window.onload = function(){
setButtons(containersValue);
}
But document.getElementById("'"+sampleLetter[i]+"'").setAttribute('onclick',window.location='SampleInfo.html'+typeStringValue+bottonName);<!--add the button link -->
returns a null value.
Well, maybe I can help you along with an example:
function getFive() { return 5;}
callOtherFunction("stringArgument", getFive());
The second argument to callOtherFunction is going to be 5, not the getFive function. In many cases, like adding event listeners and AJAX code, you actually want to pass the function itself as an argument, so it can be called later. But if you don't want to bother declaring that function seperately, it looks like this:
callOtherFunction("stringArgument", function() { return 5; });
To make code look cleaner, you can press Enter after the { and make a multi-line function.
Now, all that in mind, take another look at the line you've commented out. Do you see what's missing? (PS. Apologies for the "egging-on" format - I find people get much better at figuring things out if I help them find the solution, rather than just showing it to them)
The sampleLetter variable is not defined where you are trying to use it (judging by commented code). Use the value you had just set to the id attribute a few lines earlier.
document.getElementById(buttonName).setAttribute( /* ... */ );
Or if you are trying to set it in the loop instead of in the createButton function, do not add the single quotes
document.getElementById(sampleLetter[i]).setAttribute( /* ... */ );
so im a little new to javascript, but im trying to make a progress bar, with some other functionalities, on click of a button. im tring to use the set interval in javascript in order to time the bar, this is my js so far:
//Javascript Document
function progress(){
Var uno = setTimeout("uno()", 3000);
uno(){
document.getElementById("title").innerHTML = "Connecting...";
document.getElementById("progressInner").style.display = 'block';
document.getElementById("progressInner").style.width = '20px';
}
}
From what i have gathered this is how it works, however i am skeptical as it seems i am setting a variable uno but not doing anything with it.... from my background in php, thats not how that works :p any pointers you guys can give me on this? my html is here: http://jsbin.com/apoboh/1/edit
right now, it does nothing, it gives me : Uncaught ReferenceError: progress is not defined
first, you are using setTimeout not setInterval. The former fires the callback once, the latter indefinitely at a set interval.
Second, these methods return a token that you can use to cancel a setInterval, do this instead
function startProgress(){
// only start progress if it isn't running
if (!App.progressToken) { // App is you apps namespace
App.progressToken = setInterval(function(){
document.getElementById("title").innerHTML = "Connecting...";
document.getElementById("progressInner").style.display = 'block';
document.getElementById("progressInner").style.width = '20px';
}, 3000);
}
}
later, when you want to stop:
function stopProgress(){
clearInterval(App.progressToken);`
delete App.progressToken
}
The variable uno simply holds the handle to the timeout that you just set. You can later use it to clear the timeout before it executes if you need to via a call to clearTimeout().
If you don't need to clear the timeout, then there's really no reason to store the handle at all.
function progress(){
function uno(){
document.getElementById("title").innerHTML = "Connecting...";
document.getElementById("progressInner").style.display = 'block';
document.getElementById("progressInner").style.width = '20px';
}
var timeoutFunc = setTimeout(uno, 3000);
}
You pass a function to setTimeout which it will call later, not a string. So this code will define a function uno, and then pass it to setTimeout and delay 3 seconds then call it every 3 seconds after that.
You forgot to put word "function " before uno()