As I was making a gallery for a webpage I ran into a problem with js automatically running the (next_image) function, after some searching around I found out it was due to the () after the statement.
however, I can not for the life of me figure out how else to get the clicked_id to the next_image function.
So my question is: how can I make it so that the function runs only after clicking the button while still sending the clicked_id?
function opencase(clicked_id) {
document.getElementById("right_arrow").addEventListener("click", next_image(clicked_id));
}
function next_image(photoid){
console.log(photoid);
photoid++;
document.getElementById("disp").setAttribute("src", "images/image"+photoid+".jpg");
console.log(photoid);
}
Any help will be greatly appreciated :D
Instead of directly calling the function , call it from the addEventListener callback function
function opencase(clicked_id) {
document.getElementById("right_arrow").addEventListener("click", function() {
next_image(clicked_id)
});
}
function next_image(photoid) {
console.log(photoid);
photoid++;
document.getElementById("disp").setAttribute("src", "images/image" + photoid + ".jpg");
console.log(photoid);
}
Related
Why does this function get fired without having clicked on the specified button?
I had a look at a few similar problems but none deal with this code structure (might be obvious reason for this im missing...).
document.getElementById("main_btn").addEventListener("click", hideId("main");
function hideId(data) {
document.getElementById(data).style.display = "none";
console.log("hidden element #"+data);
}
You are directly calling it.
document.getElementById("main_btn").addEventListener("click", hideId("main");
You should do that in a callback.
document.getElementById("main_btn").addEventListener("click", function (){
hideId("main");
});
This code executes your function hideId("main") you should pass just the callback's name:
document.getElementById("main_btn").addEventListener("click", hideId);
function hideId(event) {
var id = event.target.srcElement.id; // get the id of the clicked element
document.getElementById(data).style.display = "none";
console.log("hidden element #"+data);
}
document.getElementById("main_btn").addEventListener("click", hideId.bind(null, "main");
I'm using jQuery for a while but it is the first time I need to create my own function. (I'm using noConflict)
I have a code who work like this :
jQuery(function()
{
jQuery("#tabs-3").dynatree({
checkbox: true,
onActivate: function(dtnode) {
alert("You activated " + dtnode);
}
});
//etendre tt les noeuds
jQuery("#tabs-3").dynatree("getRoot").visit(function(dtnode){
dtnode.expand(true);
});
});
The code above is working, BUT, this part of code is in an ajax call, it worked for the first time when I called it, but not the second time or in future. when i call it with a function it gives error "jQuery.mytree is not a function". So what's wrong in my code. please help me .
(function(jQuery){
jQuery.fn.extend({
mytree: function (mytreename)
{
alert(mytreename);
jQuery(mytreename).dynatree({
checkbox: true,
onActivate: function(dtnode) {
alert("You activated " + dtnode);
}
});
}
});
jQuery.mytree('#tabs-3');
})(jQuery);
Thanks!
That's because when you do jQuery.fn.extend, it extends your selector.
For example:
<div id = "tabs-3"></div>
<script type="text/javascript">
(function(jQuery){
jQuery.fn.extend({
mytree: function mytree() {
console.log("My tree ", this.attr("id"));
// Do your cool AJAX calls
}
});
jQuery("#tabs-3").mytree();
})(jQuery);
</script>
Will work. Inside mytree(), this is the result of your selector.
you have to call like,
jQuery("#tabs-3").mytree();
Arf I run into the next problem due to my construction I believe. The function is in a php lets call it 1.php.
1.php call in ajax 2.php
2.php contain a code who create a structure in ... (this part works).
In 2.php I call mytree, I don't get any error and the log works. But the dynatree doesn't work.
jQuery.fn.extend({
mytree: function mytree() {
console.log("My tree ", this.attr("id"));
jQuery(this.attr("id")).dynatree({
checkbox: true,
onActivate: function(dtnode) {
alert("You activated " + dtnode);
}
});
}
});
Anything to do for it to work?
Thanks!
To call dynatree,
jQuery.fn.extend({
mytree: function mytree() {
console.log("My tree ", this.attr("id"));
jQuery("#"+this.attr("id")).dynatree({
checkbox: true,
onActivate: function(dtnode) {
alert("You activated " + dtnode);
}
});
}
});
Aaaaaaaaaaaand I missed the "#" ;)
Ok, now It works like earlier, the first time I call the ajax everything is all right.
But when I click back on the link who call the ajax I get the ul li part not on dunatree. I have the log so it pass in the function. I can't figure why it doesn't make ul li in dynatreee. :(
Got the answer here!
I call now the function on the success call ajax on 1.php. (I think it's best coding just for that)
But before i check may tabs content, if it's not empty (previous tree) i destroy it before recreate it.
success : function(msg)
{
if(msg!="")
{
//jQuery("#tabs-3").html(msg);
(function(jQuery){
//alert('Pass!'+jQuery("#tabs-3").text());
if(jQuery("#tabs-3").text()!="")
{
jQuery("#tabs-3").dynatree("destroy");
}
jQuery("#tabs-3").html(msg);
jQuery("#tabs-3").mytree();
})(jQuery);
}
}
Maybe not the more efficient but the best i found ;)
Special thanks to arun kumar!
I execute the following function when a page is executed:
$scope.displayTags = function(Id) {
$scope.toogleSelectionBlocs = function selectionB(b) {
// I have a checkbox to check...
}
$scope.showHello() {
console.log("HELLO WORLD!");
}
}
Then I have an other checkbox: (same controller but other function)
$scope.checkClick = function(){
if($scope.mycheckbox == true){
$scope.showHello();
}
}
I have the following error:
TypeError: undefined is not a function
at Scope.$scope.checkClick (....)
How I can fix it?
Thanks for your help!
1) $scope.showHello is missing the "=function(params){ .... } " part. (That should solve the problem you asked for)
2) Can you post more of your controller code to make clear what you are actually trying to do - the code looks a bit strange to me. (e.g. the "= function selectionB(b) {" part.
You have a mistake in your function thats should be:
$scope.showHello = function() {
console.log("HELLO WORLD!");
}
and another thing why do you write the function inside another function, you should move the $scope.showHello to the outside of the $scope.displayTags
I have the following function (I've removed code from the middle that is not important to my question):
function shadowBoxRefresh(){
$("#sb-nav-next, #sb-nav-previous").click(function(){
$('#sb-container').addClass("visibility_stay");
$('#sb-overlay').addClass("opacity_stay");
Shadowbox.close();
Shadowbox.clearCache();
shadowBoxSetup();
setTimeout("Shadowbox.open(c)", 400)
$('#sb-container').removeClass("visibility_stay");
$('#sb-overlay').removeClass("opacity_stay");
}
});
}
My problem is, I need this part:
$('#sb-container').removeClass("visibility_stay");
$('#sb-overlay').removeClass("opacity_stay");
to fire after the rest of the function has completed. I'm wondering if a callback would do the job, but I'm not versed well enough in callbacks to know how to implement it.
Your help would be much appreciated.
If by "after the rest of the function" you mean, "after the Shadowbox.open(c)" that happens .4 sec later, then do this:
function shadowBoxRefresh(){
$("#sb-nav-next, #sb-nav-previous").click(function(){
$('#sb-container').addClass("visibility_stay");
$('#sb-overlay').addClass("opacity_stay");
Shadowbox.close();
Shadowbox.clearCache();
shadowBoxSetup();
setTimeout(function () {
Shadowbox.open(c);
$('#sb-container').removeClass("visibility_stay");
$('#sb-overlay').removeClass("opacity_stay");
}, 400);
}
});
}
Assuming after shadowBoxSetup() is when you want it
function shadowBoxSetup( callback ) {
// Your code...
callback();
}
To use that
function shadowBoxRefresh(){
$("#sb-nav-next, #sb-nav-previous").click(function(){
$('#sb-container').addClass("visibility_stay");
$('#sb-overlay').addClass("opacity_stay");
Shadowbox.close();
Shadowbox.clearCache();
shadowBoxSetup(function(){
$('#sb-container').removeClass("visibility_stay");
$('#sb-overlay').removeClass("opacity_stay");
});
setTimeout("Shadowbox.open(c)", 400);
}
});
}
It will be executed after the rest of the function has completed; statements are executed in order.
Are you saying you want it to execute after the timeout? If so, create a function that encapsulates the two calls and the open() call.
If not, you might need to be a bit clearer.
I have used a script I have found. Where it should do some thing when the mouse hovers over the element
$this.hover(
function () {
tip.html("<p>" + tTitle + "</p>");
setTip(tTop, tLeft);
setTimer();
},
function () {
stopTimer($this);
tip.hide();
}
);
But i want to execute it, without I have to hover the mouse over the element?
How can I do that?
You can pull the code out of the function:
tip.html("<p>" + tTitle + "</p>");
setTip(tTop, tLeft);
setTimer();
To trigger the hover on:
$this.trigger('mouseover');
To trigger the hover out:
$this.trigger('mouseout');
Another choice is to move the definition outside of the callback, and do it like this:
function onMouseOver() {
tip.html("<p>" + tTitle + "</p>");
setTip(tTop, tLeft);
setTimer();
}
function onMouseOut() {
stopTimer($this);
tip.hide();
}
// bind the hover event
$this.hover(onMouseOver, onMouseOut);
// or use them manually:
onMouseOver();
onMouseOut();
I have tried to pull the code out of the function, but that didn't help.
But the problem was that i tried to call a function that hadn't been initialized yet.
Sorry for the inconvenience, and thanks:)
If you want it to run outside of the hover be sure to enclose the function calls in a $(document).ready or your elements wont be ready without the DOM loaded