I'm attempting to use an audio player on my site and I need to use jquery to make an image act as a play/pause button.
Currently I'm using JS and CSS image sprites to make the image change when its clicked. So to begin with the image is displayed as a play button, when it's clicked the first time it becomes a pause button. Then if its clicked again it becomes a play button etc.
The first time its clicked it plays the track in the audio player, however if clicked again it wont pause it.
Ideally I need to make it so when the button is clicked it will play the track and then pause it if clicked again.
The audio player comes with custom events which I believe can be used to achieve what I'm after but I'm not too sure how to implement the play and pause event.
The custom event can be found here:
http://radykal.de/codecanyon/fullwidthaudioplayer/#api
Below is the current JS and CSS I'm using.
JS
<script type = "text/javascript">
jQuery(document).ready(function() {
jQuery(".fap-single-track").click(function() {
jQuery(this).toggleClass('playing');
});
});
</script>
CSS
.fap-single-track {
display: block;
width: 24px;
height: 23px;
text-indent: -99999px;
background: url(http://www.danceyrselfclean.com/wp-content/uploads/2012/12/sprites.png);
cursor: pointer;
}
.playing{
background-position: -27px 0;
}
.playing:hover {
background-position: -27px -28px !important;
}
.play_pause:hover {
background-position: 0 -28px;
}
Any assistance would be much appreciated.
According to the link you gave, you have to use .toggle() and not .toggleClass
I got there in the end with a little help. I just had to add in the custom event in the correct place so the JS now looks like this:
<script type = "text/javascript">
jQuery(document).ready(function() {
jQuery(".fap-single-track").click(function() {
jQuery(this).toggleClass('playing');
jQuery.fullwidthAudioPlayer.toggle();
});
});
</script>
Related
am editing a web app (not my code) , and has alot of modals show up when some message or notification come
so i want to add a sound for that modal
the problem that this modal is in all over the app , and alot of jquery .show methods i should track and add that sound
$('#ajax_alert').show();
i tried to listen to a change, like changing in css attributes but didn't work
$('#ajax_alert').on("change",function(){
//make sound
})
how can i overwrite the show method ? i can trigger the sound inside it by checking if triggered id is ajax_alert, play that sound !
I agree with the comments that it's probably not the best idea and it seems a bit hacky, but it can be done.
So what the JQuery .show() method does is just change an element's CSS to display: block; right? So you can overwrite the .show method, but tell it to keep doing that and then also add some additional functionality:
jQuery.fn.show = function() {
this.css('display', 'block');
setTimeout(() => alert('My very own added functionality'), 0); // Newly added functionality
return this;
};
$('a').click(function() {
$('div').show()
})
div {margin-top: 20px; background-color: blue; height: 60px; width: 60px; display: none;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Click to show div
<div></div>
Working JSFiddle here:
Is it possible to add a button to Photoswipe? I know that I can make a on-click event to a button, but then i can't change the button-icon. Is it possible to just add a new button that print the picture with the normal java script funktion 'print' ?
Recent versions of Photoswipe (4.1.0, 4.1.1) seem to require you to actually customize it to add a new button. Just adding the button in the html and styling it appropriately worked on most browsers, but not Android, where Photoswipe does not let the event through to trigger your button.
Here's an example of adding a like button.
Add your button to where the other buttons are placed in your html:
<button class="pswp__button pswp__button--like" title="Like"></button>
Photoswipe uses the css background property to add icons to their buttons, so you can do something like this in your css file:
.pswp__button--like {
background: url(like.png) 0 0 no-repeat;
background-size: 44px 44px;
}
The file like.png would have your button icon in it. I did things differently since I was using a font-based icon, so rather than using the background property I added content to my <button>. If you do that you need to override the default background by adding something like this to your css:
.pswp__button--like {
background: inherit !important;
}
To get it to work on Android, you then need to edit photoswipe-ui-defaults.js and add an entry for your button in _uiElements like this:
{
name: 'button--like',
option: 'likeEl',
onTap: function() {
// handle your button click event here
}
}
Don't forget to update photoswipe-ui-defaults.min.js if you are using it.
Finally, where you initialize photoswipe in javascript, add the option
likeEl: true
If you skip this last step your button won't be activated.
I am doing something similar with a download button.
Add a new button:
<button class="pswp__button pswp__button--download" title="Download" onclick="download()"></button>
In your CSS:
.pswp__button--download, .pswp__button--download:before {
background: url('/path/to/image') 12px 12px no-repeat;
background-size: 20px 20px;
width: 44px;
height: 44px;
}
The 12px 12px is the offset for the image to help center it. Adjust this and the background-size as needed.
Keep the hight and width as is to keep it the same size as the toolbar.
I'm trying to rotate a icon when i click on a link next to the icon.
The idea is when I click on the link, the icon rotate and the content slide down. I have manage to make the content slide down but I can't get the icon to rotate in the same script.
This is the script:
<script>
$(function(){
$(".change_delivery_address").click(function(){
$(".spm").slideToggle();
});
});
This is de html:
<div class="change_delivery_address"><h6>Choose another delivery address<img src="images/layout- img/menu-icons/arrow_carrot-right.png"></h6>
</div>
The CSS:
.change_delivery_address h6{
cursor: pointer;
color: #3274f4;
margin-top: 20px;
padding-top: 5px;
padding-left: 20px;
}
.change_delivery_address h6:active{
background: none;
}
.spm {
display: none;
}
Hope you someone can help me out with this thanks.
It looks as though your problem is that you haven't included any rotation in your click function.
include JQueryRotate, a small library that allows rotation, by adding
<script type="text/javascript" src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js">
and then your script should look like this. Because I'm assuming that you want it to rotate and then rotate back, I'm adding a boolean to check which way it's rotated and act accordingly because there's no rotateToggle:
var rotated = false;
$(".change_delivery_address").click(function(){
$(".spm").slideToggle();
if(rotated) {
rotateAngle = -90;
}
else {
rotateAngle = 90;
}
$("img[src='images/layout-img/menu-icons/arrow_carrot-right.png']").rotate(rotateAngle)
});
Besides the additional jQuery library you can also apply a CSS class to the image to rotate the image as well. You would use the transform property described here http://www.w3schools.com/cssref/css3_pr_transform.asp. Additionally you can also apply a transition through CSS as well to animate the icon turning. The benefit here is no additional plugins but this is supported only in HTML5 supporting browsers, so if you will run into problems in IE8.
I don't know what will work best for you but I wanted to throw out an additional option.
Is it possible to set onmouseup, onmousedown, onclick etc. functions on a video element that is fullscreen, using webkitRequestFullScreen? I register them for the element when I create it, but I do not appear to get the events when the video is full screen.
Also, is it possible to stop the video progress bar appearing when in full screen mode whenever I move the mouse?
Any answers welcome, either using jquery or javascript, or similar.
I couldn't find a way to listen to mouse events on fullscreen as well,
but I've found a workaround:
Instead of putting the video on fullscreen, I simply change the video CSS to:
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 999;
Video then behaves like it's on fullscreen, and everything works as usual.
Finally found a way to do it in Chrome: wrap your video element with div and call webkitRequestFullScreen() for that div rather then for video + some additional magic will be required.
HTML code snippet:
<div id="video-container" style="background-color: #000000;" onclick=divClicked()>
<video id="myvideo">Video not supported!</video>
</div>
JavaScript code snippet:
function doFullscreen() {
var container = document.getElementById("video-container");
if (container.requestFullscreen) {
container.requestFullscreen();
} else if (container.mozRequestFullScreen) {
container.mozRequestFullScreen();
} else if (container.webkitRequestFullscreen) {
container.webkitRequestFullscreen();
}
var video = document.getElementById("myvideo");
// have to resize the video to fill the whole screen
video.width=window.screen.availWidth;
video.height=window.screen.availHeight;
}
Such approach allows handling mouse/etc. events in div element - see onclick declaration at HTML example above.
Also note that such approach doesn't force video controls to appear either on fullscreen or in windowed mode.
For the second question regarding the progress bar you can add the following to your CSS:
video::-webkit-media-controls-enclosure {
display:none;
}
But note once again that it is not needed when using the approach above.
Ok, I am using JavaScript to control an image swap so that when someone clicks on the image, it changes to a "lit" version of the image. The code to do this within the link tag is onclick="changeto('wdl')" and I added onmouseover="changeto('wdl')" to the link so when you hover over it, it lights up as well.
Now, where the problem comes in, naturally, is when I added onmouseout="changeto('wdd')" which is the unlit version of the image. What happens here of course is when I hover over it, it lights up, when I move the cursor away it changes to the non lit version. But when you click on it it changes the image to the lit version as it should, but because of the onmouseout command, it changes to the unlit version.
What I want is to be able to hover on the image and have it light up. If you click it and move the mouse away it stays lit, but if you don't click it and move the mouse away it stays on the "off" image.
Any help appreciated, I am stumped here. I was going to try to use some sort of if (!this) type of thing, but I honestly just don't know.
I see two solutions:
1. Declare separate CSS class for onclick event that is defined below wdd (or uses !important.
2. Use a flag variable which is set to true in onclick and then tested in onmouseout:
onclick="changeto('wdl');flag=true;"
onmouseout="if (!flag) changeto('wdd')"
Here is a simple example with CSS and Javascript:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example</title>
<style>
#whl {
background: #e0e0ff;
line-height: 150px;
text-align: center;
width: 150px;
}
#wdl {
background: #e0ffe0;
line-height: 150px;
text-align: center;
width: 150px;
}
#whl:hover {
background: #ffcccc;
}
#wdl:hover {
background: #ffcccc;
}
#whl.selected {
background: #ffcccc;
}
#wdl.selected {
background: #ffcccc;
}
</style>
<script>
function doClick(el) {
document.getElementById("whl").className = document.getElementById("whl").className.replace( /(?:^|\s)selected(?!\S)/ , '' );
document.getElementById("wdl").className = document.getElementById("wdl").className.replace( /(?:^|\s)selected(?!\S)/ , '' );
el.className += "selected";
}
</script>
</head>
<body>
<div id="whl" onclick="doClick(this);">WHL</div>
<div id="wdl" onclick="doClick(this);">WDL</div>
</body>
</html>
It works with colours and in your case you will have to replace colours with background images (in the CSS).
You should use a combination of CSS and javascript. Look up css hover to achieve the mouseover function and do the click part from js
CSS Hover on w3schools http://www.w3schools.com/cssref/sel_hover.asp