I made some elements with a for loop and I wanted to get the value and the source, but it seems I can't.
I made a demo of what I did here.
My function seems to work only on the last element created by the for loop.
$("#emprev").click(function(){
var hisval = $(this).attr("value");
var hissrc = $(this).attr("src");
alert(hisval);
alert(hissrc);
});
id attribute should be unique, so when you use jquery to get elements by their id (using #) you will get only the first element.
You should use the classes instead:
$(".emprev").click(function(){
var hisval = $(this).attr("value");
var hissrc = $(this).attr("src");
alert(hisval);
alert(hissrc);
});
Here is the update to your code:
var emval = [':D',':C','8)',':O',':)','._.',':heart:',':P',';P',';)',':(','.-.','-.-'];
var emsrc = ['http://emojipedia-us.s3.amazonaws.com/cache/18/2f/182fa3786046d170707fa46a257185cb.png','http://emojipedia-us.s3.amazonaws.com/cache/c5/a5/c5a5a52fa1633e19ab2648f23ab1ee37.png','http://emojipedia-us.s3.amazonaws.com/cache/c1/2c/c12c7f3797ed8fcdcbedffb2649abfb1.png','http://emojipedia-us.s3.amazonaws.com/cache/55/af/55af488f029266842c13a54d4c50fc11.png','http://emojipedia-us.s3.amazonaws.com/cache/be/22/be22105632cfc32abf7b24bed3924e12.png','http://emojipedia-us.s3.amazonaws.com/cache/ce/1a/ce1a33d6a4535ce73c8b2b899d51071b.png','http://emojipedia-us.s3.amazonaws.com/cache/3e/f0/3ef0aeaf797844b672df6198c53ba479.png','http://emojipedia-us.s3.amazonaws.com/cache/43/be/43be98eee74f44eddec9c3137b1edf28.png','http://emojipedia-us.s3.amazonaws.com/cache/7e/d5/7ed517c9f335c3171b6f92685514667a.png','http://emojipedia-us.s3.amazonaws.com/cache/58/be/58be1ae13dbf3fb471f7f598a0365734.png','http://emojipedia-us.s3.amazonaws.com/cache/0c/04/0c04f9fd77dc486724c269587028e7d2.png','http://emojipedia-us.s3.amazonaws.com/cache/e6/7c/e67c860bd5cd2b9b443516171ec3c6a3.png','http://emojipedia-us.s3.amazonaws.com/cache/c1/05/c105ab901e2fa6e67b38879bcc0ac0b0.png'];
$(document).ready(function () {
for (var i = 0; i <= 12; i++) {
img = $('<img class="emprev" width="32px" height="32px" style="margin-bottom:3px;margin-left:4px;margin-top:2px">')
img.attr("value", emval[i]);
img.attr("src", emsrc[i]);
$("#emoji-list").prepend(img)
}
$(".emprev").click(function(){
var hisval = $(this).attr("value");
var hissrc = $(this).attr("src");
alert(hisval);
alert(hissrc);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="emoji-list" style="display:block;width:290px;height:200px;background:#ecebeb;border:1px solid black;border-radius:5px;position:absolute;bottom:150px;left:52%;z-index:9999999"></div>
Note that I also made some small changes to your code to make sure everything there works correctly
Related
I'm a noob working my way to learn JavaScript on my own and using some resources but want to probe things on my own hence trying this thing but it's not working for some reason. Help is appreciated.
The object is to clarify some blurred images by swapping the source. The images are called zero.jpg/zeroblur.jpg, one.jpg/oneblur.jpg and so on... The page loads with blurred image sources until clicked on. I want to write code so that it goes back to original blurred source image after 5 secs.
P.S.: The code in comments is what I've tried to write on my own.
window.onload = init;
function init() {
var blurryPic = document.getElementsByTagName("img");
for (var i = 0; i < blurryPic.length; i++) {
blurryPic[i].onclick = clarify;
// setTimeout(resetPic, 5000);
}
}
function clarify(eventObj) {
var pic = eventObj.target;
var id = pic.id;
id = "images/" + id + ".jpg";
pic.src = id;
}
// function resetPic(eventObj) {
// var pic = eventObj.target;
// var id = pic.id;
// id = "images/" + id + "blur.jpg";
// pic.src = id;
// }
It's better with CSS: your image stays the same and you only toggle a class, the class making your image blur.
document.getElementById("clickImg").addEventListener("click", function() {
this.classList.toggle("blurImg")
})
.blurImg {
-webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */
filter: blur(5px);
}
<img src="https://www.muralsticker.com/23751-thickbox/autocollants-en-vinyle-pour-enfants-spongebob-squarepants.jpg" id="clickImg">
If what you want is really to be able to reset the original image, I think it's better to stock it in a specific attribute, like this:
document.getElementById("reset").addEventListener("click", function() {
document.getElementById("clickImg").src = document.getElementById("clickImg").getAttribute('origSrc')
})
var imgs = [
'https://vignette.wikia.nocookie.net/spongebob/images/d/d7/SpongeBob_stock_art.png/revision/latest?cb=20190921125147',
'https://static.vecteezy.com/system/resources/previews/000/072/351/non_2x/spongebob-squarepants-vector.jpg',
'https://upload.wikimedia.org/wikipedia/en/c/c7/BattleForBikiniBottom.jpg'
]
document.getElementById("random").addEventListener("click", function() {
document.getElementById("clickImg").src = imgs[Math.floor(Math.random() * 3)]
})
<input type="button" value="RESET" id="reset" />
<input type="button" value="RANDOM" id="random" /><br/>
<img src="https://www.muralsticker.com/23751-thickbox/autocollants-en-vinyle-pour-enfants-spongebob-squarepants.jpg" origSrc="https://www.muralsticker.com/23751-thickbox/autocollants-en-vinyle-pour-enfants-spongebob-squarepants.jpg" id="clickImg">
I used an if statement for this to check if the first loaded image file was present or not. Then use the attribute src for the file. Here's an example.
#javascript
function magicChanger(){
var myImage = document.getElementById("emailImage")
if (myImage.getAttribute("src") == "first loaded image"){
myImage.setAttribute("src", "second image")
}
else{
myImage.setAttribute("src", "first loaded image")
}
}
#html element
<button id = "emailButton" onclick="magicChanger()">
<img id="emailImage" src="{% static 'GoEnigmaPics/emailIcon.png' %}" alt="email">
</button>
Thanks for all the answers! I wanted to get it done in JS only so CSS wouldn't work. Appreciate the answers and will definitely incorporate in future projects!
P. S. This is what got it done in the end.
window.onload = init;
function init() {
var blurryPics = document.getElementsByTagName("img");
for (var i = 0; i < blurryPics.length; i++) {
blurryPics[i].onclick = clarify;
}
function clarify(eventObj) {
var pic = eventObj.target;
var id = pic.id;
id = "images/" + id + ".jpg";
pic.src = id;
setTimeout(reBlur, 3000, pic);
}
function reBlur(eventObj) {
var pic = eventObj.target;
var id = pic.id;
id = "images/" + id + "blur.jpg";
pic.src = id;
}
Please try this code,To Is there a way to switch images src back to original after on.click src change event?
It switches back because by default, when you click a link, it follows the link and loads the page. In your case, you don't want that. You can prevent it either by doing e.preventDefault();
$(function() {
$('.menulink').click(function(){
$("#bg").attr('src',"img/picture1.jpg");
return false;
});
});
I hope this code will be useful.
Thank You.
Good Evening Everyone.
Background: I am getting list of images from a Mongo Database and then I am calling ajax once to load those data in to particular div.
Here I am building those img tags dynamically and then appending it to a div.
Now I am trying to get the img id based on user operation, lets say clicks on 'share button' for a particular img, then I have to get the image id, and then have to look search the DB with that image id.
My code after the ajax call is:
function showImages(imageList) {
for ( var i = 0, len = imageList.length; i < len; i++) {
var elem = document.createElement("img");
elem.src = 'getImg/' + imageList[i][0] + '/' + imageList[i][1];
elem.id = imageList[i][2];
alert(elem.id);
elem.height = '100';
elem.width = '100';
elem.alt = 'SPF HYD';
/* $("a[id=shareImage]").click(function(){
var qwerty = $("img", $(this).parent()).attr("id");
alert('image id is after anchor by click...'+qwerty);
}); */
var image = document.getElementById("imageLoad");
image.appendChild(elem);
}
}
Could any one help me to get the image id onclick or any button trigger?
I threw a quick demo together to demonstrate what I meant. It's made possible using jQuery event Delagation
function showImages(imageList) {
for ( var i = 0, len = imageList.length; i < len; i++) {
var elem = document.createElement("img");
elem.src = 'getImg/' + imageList[i][0] + '/' + imageList[i][1];
elem.id = imageList[i][2];
console.log(elem.id);
elem.height = '100';
elem.width = '100';
elem.alt = 'SPF HYD';
var image = document.getElementById("imageLoad");
image.appendChild(elem);
}
}
//The event handler is registered on the document object - the second argument here is the delegate, <img>
$(document).on("click", "img", function(e) {
alert($(this).attr("id"));
});
var imageList = [[0, 1, 2], [3, 4, 5]]; //These values are merely for testing
showImages(imageList);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="imageLoad"></div>
Using Event Delegation is necessary here because your img tags are being dynamically generated, plus it's a lot cleaner to register one event handler for all img tags, rather than an event handler for each
Hope this helps
Use addEventListener function to add an Event Listener to your dynamically created element.
var div = document.getElementById("div");
var imgShare = document.createElement("img");
imgShare.src = "http://icons.iconarchive.com/icons/graphicloads/100-flat-2/128/share-2-icon.png";
imgShare.id = "post002";
imgShare.addEventListener("click", share);
div.appendChild(imgShare);
var imgLike = document.createElement("img");
imgLike.src = "http://www.brandsoftheworld.com/sites/default/files/styles/logo-thumbnail/public/102011/like_icon.png?itok=nkurUMlZ";
imgLike.id = "post001";
imgLike.addEventListener("click", like);
div.appendChild(imgLike);
function share(e){
alert("Share id:" + e.currentTarget.id);
}
function like(e){
alert("like id:" + e.currentTarget.id);
}
<div id="div"></div>
JSFiddle Link...
I am "new" to JavaScript, making my first image- and media-slider for a website.
I have searched for answers in the web and here in SO, but they did not work for me.
My last big change was to divide my script into two parts. One outside of $(document).ready() and one inside. I want the user to be able to call a function via a button in the HTML. To make this possible this function has to be global and can not be located inside the $(document).ready(). Am I right?
Before I divided my script everything was inside the $(document).ready() area and it worked properly. But of cause I could not call the function via a button.
But now the part inside my $(document).ready(), which has to build the slider when the page is loaded, is not waiting for it. All my getElementById()'s are producing the error: "Can't set property 'style' of null." So the slider will not be built.
This is telling me getElementById() returns "null" even if it is inside $(document).ready().
HTML:
<!-- very content -->
<link href="...css" />
<script src="...js" />
<div id="slider"></div>
<!-- more content -->
<div id="changeContent"></div>
<!-- more content -->
</body>
</html>
JavaScript:
// Configuration
var slidersParentId = 'imslider';
var slideShowTitle = '';
var thumbnailWidth = 20;
var slidesWidth = 281.25;
var slidesHeight = 144.5625;
var currentSlideWidth = 500;
var currentSlideHeight = 257;
var nextSlideWidth = 375;
var nextSlideHeight = 192.75;
var prevSlideWidth = nextSlideWidth;
var prevSlideHeight = nextSlideHeight;
var resizeDifference = currentSlideWidth - nextSlideWidth;
var slidesMargin = 20;
var animationDistance = slidesWidth + slidesMargin;
var animationSpeed = 2000;
var intervalSpeed = 7000;
var contentDiv = "descriptif_site_spip";
// Variables from slides.json
var numberOfSlides;
var jsonSlides = {};
var bgImgUrl;
// Cache the DOM
var $slideShow = $('#'+slidersParentId);
var $slideInner;
var $slides;
var $slideNav;
var $navThumb;
var $thumb;
var $hovers;
var $content = document.getElementById(contentDiv);
// Other global Variables
var interval;
var currentSlide = 1;
var nextSlide = currentSlide + 1;
var prevSlide = currentSlide - 1;
var lastSlide = currentSlide;
var lastCurrentDif;
var lastNextSlide = lastSlide + 1;
var lastPrevSlide = lastSlide - 1;
var thumbImgs = [];
var navTo;
var interval;
var i;
// Global Variables for dragging
var dragStartPosition;
var dragStopPosition;
var draggedDistance;
var slidesDragged;
var posSlidesDragged;
var negSlidesDragged;
// IRIS-MEDIA-MODUS ?!
var iris_mode = 1;
//global functions...
//global warming...
$(document).ready(function(){
$.ajax({}
//getting some json...
});
// Building the slideshow windows
if (slideShowTitle !== 0) {
$slideShow.append('<h2 class="slideShowTitle">'+slideShowTitle+'</h2>');
}
$slideShow.append('<div id="outerWindow"><div id="innerWindowPositioner"<div id="innerWindow"></div></div</div>');
$slideInner = $slideShow.find('#innerWindow');
$slideInner.css({'width': numberOfSlides*slidesWidth+numberOfSlides*slidesMargin*currentSlideWidth*3});
// Building the slides & hovers
for (i=1; i<=numberOfSlides; i++) {
var idSlides = "slide_Nr"+i;
alert(idSlides);
var idHover = "hover_Nr"+i;
var j = i-1;
bgImgUrl = "url('" +jsonSlides[j].mediaUrl+ "')";
var title = jsonSlides[j].title;
var artUrl = jsonSlides[j].articleUrl;
var subtitle = jsonSlides[j].subtitle;
var text = jsonSlides[j].text;
var date = jsonSlides[j].date;
$slideInner.append('<div class="slide" id="'+idSlides+'"><div class="hover" id="'+idHover+'"></div></div>');
$('#'+idSlides).css('top', '56.21875px');
document.getElementById(idSlides).style.backgroundImage = bgImgUrl;
$('#'+idHover).append('<div class="hover-title"><h3>'+title+'</h3><span class="hover-subtitle">'+subtitle+'</span></div><span class="hover-date">'+date+'</span><br clear="all" /><p class="hover-text">'+text+'</p>');
}
$slides = $slideInner.find('.slide');
$hovers = $slides.find('.hover');
// Building the thumbnail navigation
$slideShow.append('<div id="slideShowNavigation"><ul id="navigationThumbnails"></ul></div>');
$slideNav = $slideShow.find('#slideShowNavigation');
$navThumb = $slideNav.find('#navigationThumbnails');
for (i=0; i<numberOfSlides; i++) {
thumbImgs[i] = jsonSlides[i].mediaUrl;
// alert(thumbImgs);
}
for (i=1; i<=numberOfSlides; i++) {
j = i-1;
var idThumbs = "thumb_Nr"+i;
bgImgUrl = "url('" +jsonSlides[j].mediaUrl+ "')";
$navThumb.append('<li class="thumb" id="'+idThumbs+'"></li>');
document.getElementById(idThumbs).style.backgroundImage = bgImgUrl;
}
$thumb = $navThumb.find('.thumb');
$( '<li class="year"> > 2000 > </li>' ).insertBefore( "#thumb_Nr62" );
$navThumb.prepend('<li class="year">1980 >> </li>');
$navThumb.append('<li class="year"> 2020 >></li>');
$navThumb.append('<br clear="both" />');
// ...some
// ...more
// ...functions
});
With this HTML-structure it is not working.
When I put the script-inclusion at the end of my HTML it works correctly and the slider will be built.
So why is my $(document).ready() firing too early?
I also tried $(window).load() but it hat no effect.
Or is there any why to make function inside $(document).ready() globally available without removing it from $(document).ready()?
Probably because your script is running before the rest of the page loads. Try using $(window).ready().
EDIT:
Had wrong function .load() I meant to have .ready()... Whoops!
My last big change was to divide my script into two parts. One outside of $(document).ready() and one inside. I want the user to be able to call a function via a button in the HTML. To make this possible this function has to be global and can not be located inside the $(document).ready().
Actualy, it can:
All global JavaScript objects, functions, and variables automatically become members of the window object.
I suppose you need something like this:
window.addEventListener('DOMContentLoaded', function () {
window.my_magic_function = function (/* my magic params */) {
/* doing my magic */
};
});
<button onclick="my_magic_function(/* my magic params */)">Do magic</button>
window.addEventListener('DOMContentLoaded', ...) equivalent to $(document).ready(...)
I’m iterating through the elements and grabbing the src attribute of the child of that element. I have this HTML code:
<noscript data-alt="super awesome">
<img src="http://farm9.staticflickr.com/8235/8585847956_39864361e3.jpg" alt="something" />
</noscript>
<noscript data-alt="super awesome">
<img src="http://farm9.staticflickr.com/8235/8585847956_39864361e3.jpg" alt="something" />
</noscript>
and jQuery:
$('body').children().each(function() {
var noscriptTag = $(this)[0];
var imgAlt = noscriptTag.getAttribute("data-alt");
var img_src = noscriptTag.find('img');
var img_regular = img_src.getAttribute("src");
console.log(img_regular);
});
But I’m getting this error:
Uncaught TypeError: Object #<HTMLElement> has no method 'find'
I also tried various other combinations (like $(this).find('img');) without making it work.
Here’s the demo: http://jsfiddle.net/LjWhw/
How do I target the img tag of that element? Thanks!
UPDATE: You can’t target elements which are inside <noscript> with JavaScript.
You are trying to call find jQuery function on DOM object, Use jQuery object instead of DOM javascript object to call find on it.
Change
var noscriptTag = $(this)[0];
To
var noscriptTag = $(this);
Edit: You will also need to change the code accordingly e.g. img_src.getAttribute("src"); to img_src[0].getAttribute("src"); or img_src.attr("src");
I would suggest you to do it this way:
$('body').children().each(function() {
var noscriptTag = $(this).find('noscript').first();
//---------------^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^-----this way
var imgAlt = noscriptTag.getAttribute("data-alt");
var img_src = noscriptTag.find('img');
var img_regular = img_src.attr("src");
console.log(img_regular);
});
try this
http://jsfiddle.net/UQJsy/1/
$('noscript').each(function () {
var noscriptTag = $(this);
var imgAlt = noscriptTag.attr("data-alt");
var img_src = noscriptTag.children('img');
var img_regular = img_src.attr("src");
alert(imgAlt);
});
In javascript I have a reference to a div. In that div is an anchor element with a name='foundItem'
How do I get a reference to the anchor with the name foundItem which is in the Div I have the reference of?
There are 'many' foundItem anchors in other divs on the page. I need 'this' DIVs one.
// assuming you're not using jquery or mootools
// assume div is mydiv
var lst = mydiv.getElementsByTagName('a');
var myanchor;
for(var i=0; i<lst.length; ++i) {
if(lst[i].name && lst[i].name == 'foundItem') {
myanchor = lst[i];
break;
}
}
// the mootools method
var myanchor = $(mydiv).getElement('a[name=foundItem]');
You can use the getElementsByTagName method to get the anchor elements in the div, then look for the one with the correct name attribute:
var found = null;
var e = divReference.getElementsByTagName('A');
for (var i=0; i < e.length; i++) {
if (e[i].name && e[i].name == 'foundItem') {
found = e[i];
break;
}
}
If found is not null, you got the element.
If you happen to use the jQuery library, you can let it do the searching:
var found = null;
var e = $(divReference).find('a[name=foundItem]');
if (e.length == 1) found = e.get(0);
Use a JavaScript library like jQuery and save yourself time.
var theAnchor = $('#divId a[name=foundItem]');
Using jquery, it's dead easy:
<script type="text/javascript">
$(function(){
var item = $("#yourDivId a[name=foundItem]")
)};
</script>
Update:
As per the comments, if you have control over what to id/name/class your anchor tag/s, it would be best to apply a class to them:
<div id="firstDiv">
test
</div>
<div id="secondDiv">
test another one
</div>
<!-- and so forth -->
<script type="text/javascript">
$(function(){
var item = $("#firstDiv a.foundItem");
alert(item.html()); // Will result in "test"
var item2 = $("#secondDiv a.foundItem");
alert(item2.html()); // Will show "test another one"
)};
</script>
If you're doing anything with javascript, jQuery saves you tons of time and is worth investing the effort to learn well. Start with http://api.jquery.com/browser/ to get an intro to what's possible.
Not sure if this helps, but wanted a function to handle the load of a page dynamically and scroll to the anchor of choice.
function scrollToAnchor(anchor_val) {
alert("" + anchor_val);
var page = document.getElementById('tables');
var found = null;
var cnt = 0;
var e = document.getElementsByTagName('a');
for (var i = 0; i < e.length; i++) {
if (e[i].name && e[i].name == anchor_val) {
found = e[i];
break;
}
cnt++;
}
if (found) {
var nPos = found.offsetTop;
alert("" + nPos);
page.scrollBy(0, nPos);
} else {
alert('Failed with call of scrollToAnchor()' + cnt);
}
}