I have a button that changes an element's style. Can I have this button auto-reset the CSS changed, back to default? Here is the code:
<div class="coinboxcontainer"><img id="coin1" src="/wp-content/uploads/2022/10/coin.png" alt="box" width="40" height="40">
<a onclick="tosscoin()"><img src="/wp-content/uploads/2022/10/coinbox.png" alt="box" width="40" height="40"></a>
<audio id="audio" src="/wp-content/uploads/2022/10/coinsound.mp3"></audio>
<script>
function tosscoin() {
document.getElementById("coin1").style.transform = "translatey(-70px)";
var audio = document.getElementById("audio");
audio.play();
}
</script>
</div>
This should remove all styles from that element:
document.getElementById("coin1").style.cssText = null
Resetting styles after some time
const button = document.querySelector('button')
button.addEventListener('click', () => {
button.style.transform = `translate(${100}px)`
setTimeout(() => button.style.cssText = null, 1000)
})
<button>click me</button>
To remove css styles from an element using js
Removes all styles.
document.getElementwithSomeMethod.style=null
document.getElementwithSomeMethod.style.cssText=null
Remove a single style
document.getElementBySomeMethod.style.removeProperty(propertyName)
Related
I have this image will be faded out after button click. How to I enable the image to the original state?
const playGame = () => {
init();
// logic removed for brevity
$('#hero').fadeTo(2000, 0.4);
}
const init = () => {
$('#hero').show();
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='hero'>
<img src="hero.jpg">
</div>
<button onclick="playGame()">Fight!</button>
fadeTo() works but when I tried with $('#hero').show(); it doesn't work. I have removed the logic for brevity.
use opacity 1
const playGame = () => {
init();
// logic removed for brevity
$('#hero').fadeTo(2000, 0.4);
}
const init = () => {
$('#hero').fadeTo(2000, 1);
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='hero'>
<img src="https://www.w3schools.com/bootstrap4/bird.jpg">
</div>
<button onclick="playGame()">Fight!</button>
fadeTo() modifies the opacity of the element. So, show() does not work as it is already showing. Try using fadeIn() instead. fadeIn() will make the opacity 100%.
You can use fadeToggle() to toggle between states. More info here.
Is there a way to hide or remove image while loading a new one, when changing src tag value.
Example code:
<img [src]="dynamicPath">
<button (click)="changeSrc()">Change Image Src</button>
In component:
dynamicPath = 'somePath.jpg';
changeSrc(){
this.dynamicPath = 'newPath.jpg';
}
The problem with this code is that after clicking the button, old image is still showing until new image has completely loaded, which is undesired.
Is there a way to remove it or show a hint that new image is being loaded?
Note that: my case doesn't allow solution of preloading many images at once.
You can remove the image from the DOM using *ngIf as below,
<img *ngIf="dynamicPath!=''" [src]="dynamicPath">
<button (click)="changeSrc()">Change Image Src</button>
you can set the variable to empty string ' ' as below
dynamicPath = 'somePath.jpg';
changeSrc(){
this.dynamicPath ='';
this.dynamicPath = 'newPath.jpg';
}
Just hookup the load event of the image.
html
<img [src]="dynamicPath" (load)="onload()" *ngIf="loadingImg">
<button (click)="changeSrc()">Change Image Src</button>
ts
loadingImg = true;
dynamicPath = 'somePath.jpg';
changeSrc(){
this.loadingImg = true;
this.dynamicPath = 'newPath.jpg';
}
onload() {
this.loadingImg = false;
}
you can use *ngIf in the img tag.
<img *ngIf="!loading" [src]="Path">
<button (click)="changeSrc()">Change Image Src</button>
Then you can make decision in the component.
Path = 'somePath.jpg';
loading=false;
changeSrc(){
this.loading =true;
this.Path = 'newPath.jpg';
this.loading =false;
}
I am trying to Exchange the src of an Image tag on a click Event, the Image src is a png file, but if I click on the Image the source shall Change to a give file.
<img src="images/eye.png" alt="Logo"
id="sidebar-collapse img-logo-main-page"
width="80">
And this is the JavaScript, I get the console Output in the console but Nothing changes:
const gifEgg = {
elements: {
logo: $('#img-logo-main-page'),
logoOverlay: $('#sidebar-image-collapse')
},
addGif () {
this.elements.logoOverlay.click(() => {
console.log("clicked");
this.elements.logo.attr('src', '../images/eyes_move.gif');
});
}
};
gifEgg.addGif();
The problem is that you are treating an id like a class. You gave the image an id of sidebar-collapse img-logo-main-page, but are trying to refer to it with #img-logo-main-page. An element can only have one id, but can have many classes. If you gave it a class name of sidebar-collapse img-logo-main-page, you could refer to it with .img-logo-main-page (any one or more of its classes), but an id must be unique and each element can only have one id.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://images.pexels.com/photos/658687/pexels-photo-658687.jpeg?auto=compress&cs=tinysrgb&h=350" alt="Logo"
id="img-logo-main-page"
width="80">
<button id="sidebar-image-collapse">
Change Image Source
</button>
<script>
const gifEgg = {
elements: {
logo: $('#img-logo-main-page'),
logoOverlay: $('#sidebar-image-collapse')
},
addGif () {
this.elements.logoOverlay.click(() => {
console.log("clicked");
this.elements.logo.prop('src', 'http://2.bp.blogspot.com/-3jbHdEj7o2k/Uk6zNIfJkqI/AAAAAAAAB5s/zf7UzbSkp80/s200/zrikh+ajig.gif');
});
}
};
gifEgg.addGif();
</script>
I have these couple of radio sources:
Radio 1 - http://ice3.securenetsystems.net/CKDX?playSessionID=2F01BCBA-BE9D-2A65-5B280ECE3E397AFE
Radio 2 - http://ice5.securenetsystems.net/CIRV?playSessionID=2EFE4082-EC1E-6FA0-10941E29181F671A
They both are working fine originally but when I put these sources in HTML in front of the src, they stop working and it's unable to play the audio.
Here's my code:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="container">
<span class="trigger-audio fa fa-play">
<audio src="http://ice3.securenetsystems.net/CKDX?playSessionID=2F01BCBA-BE9D-2A65-5B280ECE3E397AFE"
volume="1.0">
</audio>
</span>
<br>
<br>
<br>
<span class="trigger-audio fa fa-play">
<audio src="http://ice5.securenetsystems.net/CIRV?playSessionID=2EFE4082-EC1E-6FA0-10941E29181F671A"
volume="1.0">
</audio>
</span>
<script>
const audioButtons = document.querySelectorAll('.trigger-audio')
const buttonToStopAllAudios = document.querySelector('.fa-stop')
const getAudioElementFromButton = buttonElement =>
buttonElement.querySelector('audio')
const stopAudioFromButton = buttonElement => {
// Pause the audio
getAudioElementFromButton(buttonElement).pause()
// Update element classes
buttonElement.classList.add('fa-play')
buttonElement.classList.remove('fa-pause')
}
const playAudioFromButton = buttonElement => {
// Pause the audio
getAudioElementFromButton(buttonElement).play()
// Update element classes
buttonElement.classList.remove('fa-play')
buttonElement.classList.add('fa-pause')
}
audioButtons.forEach(audioButton => {
audioButton.addEventListener('click', () => {
// I get this first because I have to pause all the audios before doing anything, so I have to know it this audio was paused or not
const audioElement = getAudioElementFromButton(audioButton)
const audioIsPaused = audioElement.paused
// Stop all audios before starting this one
audioButtons.forEach(stopAudioFromButton)
audioIsPaused
? playAudioFromButton(audioButton) // Play if it's paused
: stopAudioFromButton(audioButton) // Pause if it's playing
})
})
buttonToStopAllAudios.addEventListener('click', () => {
audioButtons.forEach(stopAudioFromButton)
})
</script>
What would be the easiest way to fix this?
I'm a beginner so any help would be appreciated. :)
I'm working on a simple project that includes a media (mp3) player in the sidebar. I can get the play/pause button to visually switch and I can turn off the audio by assigning a href to another image however when trying to get the swapped image to pause audio I just can't seem to figure it out, here's my code..
EDIT: deleted shotty code
EDIT: Figured out three ways to do this, the two kind people below posted great ways but I also figured out how to crudely do this via jquery.
$('#left-05-pause_').click(function(){
$('#left-05-pause_').hide();
$('#left-05-play_').show();
});
$('#left-06-audio_').click(function(){
audio.volume = 1;
$('#left-06-audio_').hide();
$('#left-06-mute_').show();
});
Mitch, I have three points for you:
there's no need to wrap <a> around <img>
for performance avoid overuse of selecting elements (like getElementById), because once you've selected a link to the element put it into a variable and use again to access the same element
use native info about element's state (for <audio> in this example) - explore its properties
All in all just try next sample (file names have been changed for clarity):
<body>
<audio id="audioId">
<source src="song.mp3" type="audio/mp3" />
</audio>
<img id="imageId" src="play.png" onclick="toggle()" />
<script>
var audio = document.getElementById( 'audioId' )
, image = document.getElementById( 'imageId' )
function toggle()
{
if ( audio.paused )
{
image.src = 'pause.png'
audio.play()
}
else
{
image.src = 'play.png'
audio.pause()
}
}
</script>
</body>
You can try this
<a href="#">
<img src="http://royaltrax.com/aadev/images/left/images/left_05.png" id="imgPauseChange" onclick="changeImage()">
</a>
<script language="javascript">
function changeImage() {
if (document.getElementById("imgPauseChange").src == "http://royaltrax.com/aadev/images/left/images/left_05.png")
{
document.getElementById("aud").play();
document.getElementById("imgPauseChange").src = "http://royaltrax.com/aadev/images/left/images/left_05-pause.png";
}
else
{
document.getElementById("aud").pause();
document.getElementById("imgPauseChange").src = "http://royaltrax.com/aadev/images/left/images/left_05.png";
}
}
</script>