I'm using jquery mobile to make an app. I'm playing a sound file when the page loads and displaying an image to turn the sound file off when clicked. everything is working fine however I can only get the image to change on the index page. I can turn off the sound file on any page however the image wont change on any other page. please help =) <3
<script type="text/javascript">
var newsrc = "soundOff.png";
function changeImage() {
var sample = document.getElementById("foobar");
sample.pause();
if ( newsrc == "soundOff.png" ) {
document.images["sound"].src = "/img/soundOff.png";
document.images["sound"].alt = "Sound Off";
newsrc = "soundOn.png";
}
else {
var sample = document.getElementById("foobar");
sample.play();
document.images["sound"].src = "/img/soundOn.png";
document.images["sound"].alt = "Sound On";
newsrc = "soundOff.png";
}
}
var sample = document.getElementById("foobar");
sample.play();
document.images["sound"].src = "/img/soundOff.png";
Should be this:
document.getElementById('your_id').src = "/img/soundOff.png";
Your path seems a little wierd to me.Check it properly
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.
i was trying to make a facemash like site using js. But when i click on an image is not changing the images rightly. its sometime showing same images in both the img elements. here the js code i use for selecting images when clicked.
function changeEle(id) {
var otherSrc = id == 0? imageElements[1].src : imageElements[0].src;
var ele = imageElements[id];
var oldSrc = ele.src;
var newSrc = randomFromArray(imagesList);
while(newSrc == oldSrc || newSrc == otherSrc) {
newSrc = randomFromArray(imagesList);
}
ele.src = newSrc;
}
imageElements[0].onclick = function() {
changeEle(1);
}
imageElements[1].onclick = function() {
changeEle(0);
}
Check what oldSrc and otherSrc contain with a debugger or console.log(). I think you'll find that the values aren't exactly the same as the original values in imagesList, so that when you do the comparison (newSrc == oldSrc || newSrc == otherSrc) images that are the same image as far as you're concerned manage to slip by.
I have 2 html pages with an image on each one. I need to be able to click the image on the 2nd page and have it redirect me to the 1st page - with the first image.src changed to that of the second.
What is the best/correct way to do this? I have been trying to do it by storing the src in sessionStorage but it does't seem to be working. Here is the code for setItem:
<script type="text/javascript">
$('.images').on('click', '.groupOne', function(){
var image = $(this).find("img"); // selects images inside group
var imageSrc = img.first().attr("src"); // get src of first image
sessionStorage.setItem("choice", imageSrc);
window.location.href = 'firstPage.html';
});
</script>
And then to change the first image I need to use getItem:
<script type="text/javascript">
$(document).ready(function() {
var imgTwo = sessionStorage.getItem("choice");
var imgOne = document.getElementById("pageOneImage");
imgOne.src = imgTwo; //sets src of img1 to src of img2
});
</script>
But this doesn't seem to be working. Is there an easier way to do this using more jQuery? Thank you!
Maybe not the best solution, but how about adding the src as a param to the query string?
On the second page:
window.location.href = 'firstPage.html?src=' + src;
And the first page:
var reg = new RegExp("(^|&)src=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
var src = r != null ? unescape(r[2]) : null;
Now you got the src, if redirecting from the second page.
JavaScript Noob here.
I want to show the dynamically changing image effect like this:
http://dotsignals.org/google_popup.php?cid=202
(if this webpage cannot show changing image, click on any camera at http://dotsignals.org)
I have examined the code, and have some questions:
1.The website uses setImage and refreshSetImage to initialize and refresh the image for a dynamically changing effect. What is the use of Math.random in here? I understand it is a way to differentiate images from different time at the same cam. But how does it works? How would the backend respond?
2.Related to the first question. What is the mechanism of the refreshSetImage? I didn't see any sign of requesting data from the server. Does it send a "GET"? How does it refresh the image?
function setImage(imageID){
var currentImage = imageID;
document.getElementById(currentImage).src ='http://207.251.86.238/cctv9.jpg'+'?math=';
refreshSetImage();
}
function refreshSetImage() {
document.images["myCam"].src = 'http://207.251.86.238/cctv9.jpg'+'?math='+Math.random();
setTimeout('refreshSetImage()',1000);
}
function ScaleSize(imageID) {
var elem = document.getElementById(imageID);
elem.style.width = 500;
elem.style.height = 300;
}
3.How is the backend designed?
4.Now I want to use these two functions in my own project. I want to add a parameter of camID in the setImage and refreshSetImage functions, so the src of the image will change to something like: 'http://..../'+camID+'.jpg'+'?math'. camID is a String that identifies different cameras. I changed it to:
function refreshSetImage(camID) {
document.images["myCam"].src = 'http://207.251.86.238/'+camID+'.jpg'+'?math='+Math.random();
setTimeout('refreshSetImage(camID)',1000);
}
function setImage(imageID,camID){
var currentImage = imageID;
document.getElementById(currentImage).src = 'http://207.251.86.238/'+camID+'.jpg'+'?math=';
refreshSetImage(camID);
}
and got an error :Uncaught ReferenceError: camID is not defined VM132:1. The image is not changing as well. I don't know what is the problem. What is VM132:1 ?
Thanks
check
function refreshSetImage(imageID,camID) {
currentImage = imageID;
url = 'http://207.251.86.238/'+camID+'.jpg'+'?math='+Math.random();
//document.getElementById(currentImage).src= url;
console.log(url);
}
$(document).ready(function(){
imageID = "imageID";
camID = "camID";
setInterval(function() {
refreshSetImage("imageID","camID");
}, 3000);
});
https://jsfiddle.net/Cuchu/vr1ftwg1/
Was not sure what to title this post, I've been having a go at trying to make a little Windows 8 app, I don't have much knowledge and sorry in advance if this is hard to understand, below is my itemDetail.js
(function () {
"use strict";
WinJS.UI.Pages.define("/pages/itemDetail/itemDetail.html", {
// This function is called whenever a user navigates to this page. It
// populates the page elements with the app's data.
ready: function (element, options) {
var item = options && options.item ? Data.resolveItemReference(options.item) : Data.items.getAt(0);
element.querySelector(".titlearea .pagetitle").textContent = item.group.title;
element.querySelector("article .item-title").textContent = item.title;
element.querySelector("article .item-subtitle").textContent = item.subtitle;
element.querySelector("article .item-image").src = item.backgroundImage;
element.querySelector("article .item-image").alt = item.subtitle;
element.querySelector("article .item-content").innerHTML = item.content;
element.querySelector("article .track1").innerHTML = item.track1;
WinJS.Utilities.query("#playMP3").listen("click", getStartVideoFuntion("http://www.ikkmusic.com/ikkmusic.com%20mix.mp3"));
},
});
function getStartVideoFuntion(src) {
return function () {
// Set video element's source
var vid = WinJS.Utilities.query("#playback")[0];
vid.src = src;
vid.play();
};
}})();
So I have a file called data.js which has all the sample data in, and I'm getting the info here and displaying it and it works fine, but my problem is with the bottom one (below) where the url is shown, when the button is pressed it plays the url in the html5 player tag, this works, is there a way for me to put the contents of item.track1 where the URL is now, I can't get it to put the contents of the data there.
WinJS.Utilities.query("#playMP3").listen("click", getStartVideoFuntion("http://www.ikkmusic.com/ikkmusic.com%20mix.mp3"));
WinJS.Utilities.query("#playMP3").listen("click", getStartVideoFuntion(item.track1));