overwrite the show method in jquery - javascript

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:

Related

How to open a small box from a web page to make a choice

So I am really new with javascript, html, and css and am currently in the process of creating a game web application. I would like to be able to have kind of a pop up box when you click on a card the appears in the middle of the screen showing the options that you can click for that card (meanwhile the main page colors get darker) and when you select one of those options it goes away (Or if you click off of the popup).
I'm not sure if I'm explaining it very well, but I don't even know what to look up online because I don't know what that is called or even where to start with that. Any ideas?
Make a div in your html and a :
<div id="test"></div>
<div id="card"></div>
give the diff a background color using rgba to enable transparency and the default display value set to none and give it 100% width and height:
#test {
width: 100%;
height: 100%;
display: none;
background-color: rgba(255,255,255,0.6);
}
Then in javascript u can use an event listener on click to trigger change the display state to block:
document.getElementById("card").addEventListener("click", function() {
document.getElementById("test").style.display = "block";
});
Here is a jsfiddle so you can check it out: click

Remove place holder image from a div once dynamic content has been added to it

If I have a div acting as a container that when empty shows an image, and I want to remove that image when content gets added to the container dynamically, what would be the best Jquery method to accomplish this? Doing the usual -
if ($(".container").html().length <= 0) {
$('.ad').show();
}
does not work in this case since the content being added is dynamic and does not involve a refresh. I tried storing the check in in a setIntercal function that would run every 100ms but the results didn't turn out as expected and it also caused some odd flickering on the page.
EDIT**
Josh Burgess' method would be the one I use in all cases if I didn't have to support IE8. Because of this I'm going to fall back to adding a .hide() method on the when the click event for adding content is fired. Thanks for the help!
Why use jQuery at all?
Try this CSS:
div.myDiv:empty{
background-image: url(path/to/myimage);
height: 50px;
width: 50px;
}
div.myDiv {
background-image: none;
height:auto;
width: auto;
}
--EDIT--
Here's a working example in jsfiddle, and it works in reverse as well

changing element.style on the finishing position of a jQuery animated div

I am using a photo album jQuery plugin (Supersized). It includes a thumbnail tray which slides up from the bottom of the screen at the touch of a button, resulting in the following HTML being created onto the div properties and in firebug css 'element.style. property:
style="display: block; bottom: -150px;"
and when caller clicked:
style="display: block; bottom: 0px;"
I am trying to place a footer div at the bottom of the page though, so want to move the finishing position to 'bottom:0px'. I have seen that an extra element.style can be added to local CSS but without a 'before' and 'after' type of selection I don't understand if that can help me. Furthermore I don't find the function in the JS files and from what I understand it can't be accessed anyway. I need to change these to be:
style="display: block; bottom: -150px;"
and when caller clicked:
style="display: block; bottom: 42px;"
Any advice would be most welcome. Thanks
$('#clickedElement').on('click', function() {
$('#element').css('bottom', '42px')
});
If i didn't missunderstand you?
Probably the function which you can not find is jquery .css() function you can read how it works here.
Also if you want to animate some dive you can use jquery .animate() function (docs).
In your case it should looks like:
$('#button').click(function() {
$('#element').animate({
$('#element').css('bottom', '42px');
}, 5000, function() {
});
});
Where 5000 it's time of your animation in miliseconds.

Using jquery to initiate custom events

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>

Drop-down input field

I would like to add a similar drop-down input field (picture below), to my website. I want it to appear when a link/image/button is clicked on. Can this be done with JavaScript? Also, I don't want it to affect the flow of the page.
Can this be done with JavaScript?
Yes. The JavaScript/CSS equivalent would be a button which (when clicked) displayed an element with position: fixed or position: absolute.
Here is a simple example using jQuery: http://jsfiddle.net/Byujd/1/
This is a bit complex.
HTML & Default Styles
You need an element which is displayed above the content:
<div class="modal">
<!-- Some content like textarea and stuff -->
</div>
Now you can style this box with the position-property and other things:
.modal {
position: absolute;
z-index: 999;
}
This now displays above the rest of the content.
Some jQuery-Goodness
The button just needs a listener. With jQuery this looks something like this:
$('.the-buttons-class').click( function (e) {
e.preventDefault();
$('.modal').toggle();
});
A better way
Instead of toggling the state of the modal with jQuery's toggle()-function you could toggle a class on it and manipulate the state accordingly:
CSS:
.modal {
...
display: none;
}
.modal.shown {
display: block;
}
JS:
$('.the-buttons-class').click( function (e) {
e.preventDefault();
$('.modal').toggleClass('shown');
});
Moar
I've done something pretty similar at my page. Make sure to check the search box.
The code for it is on GitHub.

Categories

Resources