I'm new to programming and was wondering how to make a customized alert that shows the id or class name of the object when I click on it. My site has a picture of 8 different animals, and I want it so that every time I click on one of the animals there's an alert with "This is a (animal's name)". Why won't my javascript code below work?
should i be using "this" instead of "parama"? i don't understand whether or not to have any parameters for my function clicky.
var images = new Array()
images[0] = "bison"
images[1] = "frog"
function clicky(parama){
for (entry in images){
if (parama.attributes["name"].value === images[entry]){
$(parama).onClick(alert("This is a" + parama.attributes["name"].value));
} else {
$(parama).onClick(alert("dang it");
}
}
}
using sort of a combination of both your answers, I figured out a way to do it with a lot less code than I originally had. Check it out! (images all had classes of "pic")
$('.pic').click(function(){
alert("This is a " + this.getAttribute('alt'))
});
I'd recommend to use the title or alt attribute on images instead of a JS array - that's more SEO friendly and semantic. Not to mention that alt is required on images to make your HTML valid - DEMO
var images = document.getElementsByTagName("img");
for ( var i = 0, count = images.length; i < count; i++ ) {
images[i].addEventListener("click", function() {
alert( this.getAttribute("alt") );
});
}
UPDATE
if you open to use jQuery - DEMO
$("img").on("click", function() {
alert( $(this).prop("alt") );
});
You can use .click() but it's recommended to use .on() instead to attach different kind of event listeners to elements. jQuery also provides a shorthand for getting the properties - .prop()
Related
I'm new to javascript and jQuery. I'm trying to create an online gallery to see photos, using 2 buttons "next" and "prev". It must be cyclic so, for example, if I click "next" when the last photo is displayed, the next photo must be the first one.
I tried to use 3 variables: first img, last img and current img, so that I just need to do currimg = currimg.prev() (or next). And, for example, if the img displayed is the first one, I do currimg = lastimg.
$(document).ready(function() {
$("img").wrapAll("<div></div>");
$("img").nextAll().hide();
var firstimg = $("img:first");
var lastimg = $("img:last");
var currimg = firstimg;
$("#nextbutton").click(function(){
currimg.fadeOut("fast", function(){
(currimg==lastimg) ? currimg=firstimg : currimg=currimg.next();
currimg.fadeIn("fast");
});
});
$("#prevbutton").click(function(){
currimg.fadeOut("fast", function(){
(currimg==firstimg) ? currimg=lastimg : currimg = currimg.prev();
currimg.fadeIn("fast");
});
});
});
The problem is that the cycle works only if I press firstly prev. If I click next and then twice prev, it doesn't work and it shows nothing. Where is the problem?
The problem with your solution is that every time you assign to your currimg the values returned from currimg=currimg.next(); or currimg.prev(); you are assigning a new jQuery object.
This causes that when you make the comparison (currimg==firstimg) this will not be true even if both currimg and firstimg are pointing to the same DOM element.
In order to check if two jQuery objects point to the same DOM element you can use the is method.
So, your code should look something like:
$(document).ready(function() {
var $imgs = $("img");
$imgs.wrapAll("<div></div>");
$imgs.nextAll().hide();
var firstimg = $imgs.first();
var lastimg = $imgs.last();
var currimg = firstimg;
$("#nextbutton").click(function(){
currimg.fadeOut("fast", function() {
currimg = (currimg.is(lastimg)) ? firstimg : currimg.next();
currimg.fadeIn("fast");
});
});
$("#prevbutton").click(function(){
currimg.fadeOut("fast", function(){
currimg = (currimg.is(firstimg)) ? lastimg : currimg.prev();
currimg.fadeIn("fast");
});
});
});
Note that I have also stored all your images in $imgs so that there is no need to do multiple selections of the images on your script startup. The use of the ternary operator has also been changed in order to be clearer/cleaner.
I am working on a dialog script in Vanilla JS. I ran into a problem with the click event on the video image. Even tough the image is surrounded with an anchor tag it shows the image as the event.target on the "trigger-dialog-open" event.
Here is the HMTL:
<a class="trigger-dialog--open thumbnail" data-dialog-id="dialog-video" href="javascript:;">
<figure>
<img src="http://i.ytimg.com/vi/id/sddefault.jpg" alt="" />
</figure>
</a>
And this is the event in JS:
var openTriggers = document.getElementsByClassName('trigger-dialog--open');
for (var i = 0; i < openTriggers.length; i++) {
openTriggers[i].addEventListener("click", function (event) {
this.openDialog(event.target.getAttribute('data-dialog-id'));
}.bind(this), false);
}
The event handler wants to know the dialog-id from the anchors data attribute. It can't be found because it thinks the image is the event.target, not the actual anchor. How can I correct this? Thanks!
Use event.currentTarget. The event.target is supposed to be the img element since that is what the user has clicked on. The click then bubbles up through the image's containers. event.currentTarget gives you the element that the click handler was actually bound to.
(Or if you didn't bind this to some other object you could use this within the click handler and it should also be the current target.)
I have a few questions is the var openTriggers supposed to be a part of a module hash? Because if it's global then you don't use a this, you only add a this, if it's referencing a variable that the function is also contained in. For example:
var aThing = {
openTriggers: document.getElementsByClassName('trigger-dialog--open'),
openModal: null,
openDialog: function(clickedThingAttr){
if(this.openModal !== null){
this.openModal.style.display = 'none';
}else{
this.openModal = document.getElementById(clickedThingAttr);
}
this.openModal = document.getElementById(clickedThingAttr);
this.openModal.style.display = 'block';
},
setEventListenersNStuff: function(){
for (var i = 0, n = this.openTriggers.length;i < n; i++) {
this.openTriggers[i].addEventListener("click", function (event) {
this.openDialog(event.target.getAttribute('data-dialog-id'));
});
};
}
};//end of aThing hash object
aThing.setEventListenersNStuff();
There are a few issues here:
1. why are you using .bind I think that is a jQuery thing, you want to pass a string to another function when an object is clicked, there no need for binding at all.
2. Also make sure that if you want to do something like open a modal, there is no need to call another method unless it's kinda complex.
3. What about other potential dialogs, it seems that when a .trigger-dialog--open is clicked you're just showing that one one modal with the embedded id, but what about others? Make sure all modals are closed before you open a new one, unless you want to have like 10 modals are open.
A thing to note: I added the line var i = 0, n = openTriggers.length;i < n; i++, now in this case it's silly optimization, and I heard for modern browsers this doesn't apply, but to explain why I added it, is because i < openTriggers.length would count and integrate the array N times. (This may be an outdated optmiziation).
If you meant global
Below I added a different set of code, just in case you meant that var openTriggers is global, kinda like you wrote above. Also I used querySelectorAll for this which is like jQuery's $('.thing') selector.
anyhoo, I also added
var openTriggers = document.querySelectorAll('.trigger-dialog--open');
var n = openTriggers.length;
function openDialog(ddId){
for (var i = 0;i < n; i++) {
openTriggers[i].style.display = 'none';
};
document.getElementById(ddId).style.display = 'block';
};
for (var i = 0;i < n; i++) {
openTriggers[i].addEventListener("click", function (event) {
openDialog(event.target.getAttribute('data-dialog-id'));
});
}
}
So for the question of hiding already open modals I would suggest you could either cache the open Dialog within a module, or you could toggle a class, which would be less efficient since it would require an extra DOM search. Additionally you could add a if this.openModal.id === clickedThingAttr to hide if open, that way you got a toggle feature.
Anyways I suggest you read up on this stuff, if you want to use plain JS but would like the features of jQuery: http://blog.romanliutikov.com/post/63383858003/how-to-forget-about-jquery-and-start-using-native
Thank you for your time.
You can use a closure
var openTriggers = document.getElementsByClassName('trigger-dialog--open');
for (var i = 0; i < this.openTriggers.length; i++) {
(function(element) {
element.addEventListener("click", function (event) {
element.openDialog(event.target.getAttribute('data-dialog-id'));
}, false)
})(openTriggers[i]);
}
I have wrote this javascript to show some images with id: imgFotogramma1/imgFotogramma2/ecc.. randomly in 8 different div with id Fotogramma1/Fotogramma2/ecc..:
function rullino() {
var immagini = new Array("strutture/1.jpg", "strutture/2.jpg", "strutture/3.jpg", "strutture/4.jpg", "strutture/5.jpg", "strutture/6.jpg", "strutture/7.jpg", "strutture/8.jpg", "strutture/9.jpg");
for (i = 1; i < 9; i++) {
var x = Math.floor(immagini.length * Math.random(1));
var imgId = "imgFotogramma" + i;
$(function () {
$(imgId).fadeIn(1000);
src = $(imgId).attr('src');
src = immagini[x];
alert(src);
});
}
setInterval("rullino()", 4000);
};
Now,this code start when body is loaded and its repeated every 4 seconds but i don't understand why the images are not displayed. I have started to work with Jquery not too much time ago and probably something are wrong.
I want to specify that: if i use normally javascript to assign to the src attribute the value of immagini[x],all work fine and the images are displayed.I have problem only to apply the fadein() motion.
I need a help to understand where is wrong,i have studied the fadeIn() API and i have tried to apply to my case.
Thanks in advance to anyone want to help me.
$(imgId).fadeIn(1000);
should be:
$('#'+imgId).fadeIn(1000);
Use # + idOfElemnt to select element with particular id.
You already doing it right. Just replace
var imgId = "imgFotogramma"+i;
With
var imgId = "#imgFotogramma"+i;
Since your are using the ID of the image, then your must have to use the "#" for id for applying the jQuery on it.
To select an ID, use # + elemID. Like this:
var imgId = "#imgFotogramma" + i;
Also, fade will not occur if the element is not hidden. First hide it, and then fade it in:
$(imgId).hide().fadeIn(1000);
Hilariously, I'm having incredible difficulty finding any half-good way to determine whether or not an HTML element is inside another one or not -- which seems like it should be a basic core feature of traversing and analyzing the HTML DOM. I was immensely surprised and disappointed that the "hasDescendant" (or likewise) method is missing.
I'm trying to do this:
var frog = $('#frog');
var walrus = $('#walrus');
if (frog.hasDescendant(walrus)) console.log("Frog is within walrus.");
else console.log("Frog is outside walrus.");
I've tried to reproduce what I'm looking for with many jQuery combinations.
walrus.is(frog.parents());
walrus.has(frog);
walrus.find(' *').has(frog);
frog.is(walrus.find(' *'));
I haven't found a working solution yet.
[edit]
Solution: walrus.has(frog)
Alternate: if (walrus.has(frog)) { doStuff(); }
Alternate: var booleanResult = walrus.has(frog).length>0;
//Chase.
jQuery has just the function for this: jQuery.contains: "Check to see if a DOM element is within another DOM element."
Demo (live copy):
HTML:
<p id="frog">Frog <span id="walrus">walrus</span></p>
JavaScript:
jQuery(function($) {
var frog = $("#frog"),
walrus = $("#walrus");
display("frog contains walrus? " + $.contains(frog[0], walrus[0]));
display("walrus contains frog? " + $.contains(walrus[0], frog[0]));
function display(msg) {
$("<p>").html(msg).appendTo(document.body);
}
});
Use
if (walrus.has(frog).length) {
// frog is contained in walrus..
}
Demo at http://jsfiddle.net/gaby/pZfLm/
An alternative
if ( $('#frog').closest('#walrus').length ){
// frog is contained in walrus..
}
demo at http://jsfiddle.net/gaby/pZfLm/1/
If you wanted to write your own function you could do it without jQuery, perhaps something like this:
function isAncestor(ancestor, descendent) {
while ((descendent = descendent.parentNode) != null)
if (descendent == ancestor)
return true;
return false;
}
I'm a Jeopardy game and I'm using the FancyBox lightbox plugin to show all the questions in.
I'm trying to create a bonus question. This question is supposed to pop up once all of the 25 spots are gone. I'm currently using a large if statement:
if($('#html5_100').is(':hidden') &&$('#html5_200').is(':hidden') &&$('#html5_300').is(':hidden') &&$('#html5_400').is(':hidden') &&$('#html5_500').is(':hidden') &&$('#attr_100').is(':hidden') &&$('#attr_200').is(':hidden') &&$('#attr_300').is(':hidden') &&$('#attr_400').is(':hidden') &&$('#attr_500').is(':hidden') &&$('#tf_100').is(':hidden') &&$('#tf_200').is(':hidden') &&$('#tf_300').is(':hidden') &&$('#tf_400').is(':hidden') &&$('#tf_500').is(':hidden') &&$('#dtag_100').is(':hidden') &&$('#dtag_200').is(':hidden') &&$('#dtag_300').is(':hidden') &&$('#dtag_400').is(':hidden') &&$('#dtag_500').is(':hidden') &&$('#tag_100').is(':hidden') &&$('#tag_200').is(':hidden') &&$('#tag_300').is(':hidden') &&$('#tag_400').is(':hidden') &&$('#tag_500').is(':hidden')){
$('#bonus').fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'hideOnOverlayClick':false,
'hideOnContentClick':false,
'showCloseButton' : false,
'overlayOpacity' : 1
}).click();
}
And I'm trying to use $('#ID').is(':hidden');
I put 25 of these ifs in each Click function for each button. The problem is that once I click submit it opens this fancybox. Is there a way to stop this?
If you need more help understanding I could upload my game and just give you a link to it.
It seems like your code is working, as least for me so maybe the id's don't exist on the page?
Also, maybe a better method to check all if all of those divs are hidden would be to just loop through all of them. This method also makes it easier to add additional questions with minimal effort (demo):
var checkDivs = function() {
var i, j, divs = 'html5 attr tf dtag tag'.split(' ');
// loop through div names
for (i = 0; i < divs.length; i++) {
j = 1;
// loop through all numbered div names (adding 100 each time)
while ($('#' + divs[i] + '_' + (j * 100)).length) {
// check if hidden
if (!$('#' + divs[i] + '_' + (j * 100)).is(':hidden')) {
return false;
}
j++;
}
}
return true;
};
does &&$('#html5_200').is(':hidden') is like that in your code? you need to change all those "&&$" it to && $('#html5_200').is(':hidden') (add space between && and $() ),
edit:
whay did you added the .click() after the call to $('#bonus').fancybox{ ... }? try to remove this from your code because i thik the call to the .click() function trigger this. if it doesn't help either, i will have to see the rest of your code to figure it out