I'm Not too Fluent in Javascript but I managed to alter this code and make it toggle between the Play button and the Pause Button for a song... it goes like so:
$(function()
{
$("#plbutton").toggle(function()
{
$("#playit").hide();
$("#pauseit").show();
},
function()
{
});
});
$(function()
{
$("#pabutton").toggle(function()
{
$("#pauseit").hide();
$("#playit").show();
},
function()
{
});
});
This is the HTML:
<span id="playit"><img src="images/playbutton.png" /></span>
<span id="pauseit" ><img src="images/pausebutton.png" /></span>
and this is the css for the pause span:
#pauseit{
display: none;}
Now When I Click the Play Button It switches to the Pause Button, then When I Click the Pause Button it Switches to the Play but after that It requires TWO Clicks in order to work... It'll pause/play the song but the image wont toggle till you click again...
I tried looking around but due to my minimal knowledge of java and jquery I wasn't able to apply the fixes to my code...
Try this:
$(document).ready(function() {
$("#plbutton").on("click", function(e)
{
e.preventDefault();
$("#playit").hide();
$("#pauseit").show();
});
$("#pabutton").on("click", function(e)
{
e.preventDefault();
$("#pauseit").hide();
$("#playit").show();
});
});
If you use links, add e.preventDefault();
if not this should work
<span id="playit"><img src="images/playbutton.png" /></span>
<span id="pauseit"><img src="images/pausebutton.png" /></span>
$(document).ready(function() {
$("#playit").on("click", function(e) {
$("#$WeFuckinBall").play()
$(this).hide();
$("#pauseit").show();
});
$("#pauseit").on("click", function(e) {
$("#WeFuckinBall").pause()
$(this).hide();
$("#playit").show();
});
});
You can even leave out the span
the simplest code i can think of is
HTML:
<span id="playit"><img src="images/playbutton.png" /></span>
<span id="pauseit" ><img src="images/pausebutton.png" /></span>
JQUERY:
var elems = $("#playit,#pauseit")
elems.on("click", function(){
elems.toggle();
if($(this).attr('id') == 'playit'){
$('#WeFuckinBall').play();
}else{
$('#WeFuckinBall').pause();
}
});
You dont need toggle, simply using .click() will solve your problem:
$(function()
{
$("#plbutton").click(function()
{
$("#playit").hide();
$("#pauseit").show();
});
$("#pabutton").click(function()
{
$("#pauseit").hide();
$("#playit").show();
}
});
Related
I have a number of links (A elements) STYLED AS buttons with class "btn" and when one of them is clicked, I want that particular button to be disabled. this code doesn't work:
$('.btn').on('click', function(e) {
$(this).prop('disabled',true);
});
There are a gazillion tutorials for preventing the default event of a form submit button, and then disabling that, but that is not quite what I need...
Apparently, my $this isn't pointing to the correct object, or something =)
----------- UPDATE ---------------
SORRY, update above. The element I have is not a button, it is a link styled as a button...
Don't try to disable the Anchor tag. Try to set the href instead.
$('.btn').on('click', function(e) {
e.preventDefault();
$(this).off("click").attr('href', "javascript: void(0);");
//add .off() if you don't want to trigger any event associated with this link
});
You only need to stop defaultevent from links.
$('.btn').on('click', function(e) {
$(this).prop('disabled',true);
e.preventDefault();
});
This works for me:
$('a').css("pointer-events", "none");
In my case I used the following:
onclick="$(this).css('pointer-events', 'none');"
It works fine.
$('.btn').on('click', function(e) {
$(this).prop('disabled',true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<button class='btn'>But1</button>
<button class='btn'>But2</button>
</div>
Instead of using this, you can just specify your target by using its id.
$('.btn').on('click', function(e) {
$('#btn2').prop('disabled',true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="btn1" class="btn">Button</button>
<button id="btn2" class="btn">Button</button>
<button id="btn3" class="btn">Button</button>
Hope it helps
$('.btn').on('click', function(e) {
$(this).attr('disabled', true);
});
Check this post: https://stackoverflow.com/a/5876747/5243272
This works (in chrome), but perhaps some drawbacks?
$('.btn').on('click', function(e) {
if( $(this).prop('disabled') == true) {
return false;
}
$(this).prop('disabled',true);
});
$(document).ready(function() {
$('.btn').on('click', function(e) {
e.stopPropagation();
e.preventDefault();
alert('I have been clicked!');
$(this).css('pointer-events', 'none').css('cursor', 'default');
});
});
This will prevent any other further clicks on that link.
If your Html like this
This is another paragraph.
use below code :
$(".test").one("click", function() {
var clas = $(this).attr("class");
setTimeout(function() {
$("." + clas).removeAttr('href');
}, 100);
});
If your Html like this
<button class="btn">This is another paragraph.</button>
use below code :
$(".btn").one("click", function() {
var clas = $(this).parent().attr("class");
setTimeout(function() {
$("." + clas).removeAttr('href');
}, 100);
});
HI guys this is my Html code :
<ul id="var_language_short">
<li id="languages_more"><label class="form_present_trigger">More</label></li>
</ul>
<div id="language_checkbox" class="popup_fullscreen">
<div class="popup_fullscreen_close">close</div>
<ul id="var_language_long">
</ul>
</div>
<div class="form_present_row">
<span class="form_present_title">
<label class="form_present_title_label" for="var_prixPlat">Prix moyen
d'un plat<span class="req" title="Required">*</span></label>
</span>
<div class="form_present_content">
<span class="form_present_update">
<input class="form_present_input var_prixPlat" type="text" id="var_prixPlat" />
</span>
</div>
</div>
...
jquery code:
var list_Tyepe_Restaurant = document.getElementById('iType')
.contentWindow.document.body.innerHTML;
$("#var_language_long").html(list_Tyepe_Restaurant);
$("#languages_more").click(function (e) {
$("#language_checkbox").css("visibility", "visible");
$("#language_checkbox").css("opacity", "1");
});
$(".popup_fullscreen_close").click(function (e) {
$("#language_checkbox").css("opacity", "0");
$("#language_checkbox").css("visibility", "hidden");
});
I can show and hide this list but The problem is that when i hide it there is a blank space and the following inputs don't rise.
Pleade help
Dont use visibility, it does not rise/unrise.
Use display
Or even easier, use show() and hide()
var list_Tyepe_Restaurant = document.getElementById('iType').contentWindow.document.body.innerHTML;
$("#var_language_long").html(list_Tyepe_Restaurant);
$("#languages_more").click(function (e) {
$("#language_checkbox").show();
});
$(".popup_fullscreen_close").click(function (e) {
$("#language_checkbox").hide();
});
FYI .hide() is equivalent to .css('display', 'none');
Use .hide() not visibilty.
hide removes space taken but visibilty doesnt.
$("#languages_more").click(function (e) {
$("#language_checkbox").show()
});
$(".popup_fullscreen_close").click(function (e) {
$("#language_checkbox").hide();
});
For some reason you want to use visibilty then set height to 0
$("#languages_more").click(function (e) {
$("#language_checkbox").css({"visibility" :"visible","height":"auto","opacity":"1"});
});
$(".popup_fullscreen_close").click(function (e) {
$("#language_checkbox").css({"visibility" :"hidden", "height":"0","opacity":"0"});
});
instead of $("#language_checkbox").css("visibility", "visible");
use
$("#language_checkbox").show();
And instead of $("#language_checkbox").css("visibility", "hidden");
use
$("#language_checkbox").hide()
As per visibility:hidden; it will hide the selector, but will retain the space, if you want to get rid of the space also then you have to use display:none; to hide and display:block; to show.
I have updated the code with few options
$("#languages_more").on('click', function () {
$("#language_checkbox").show();
});
$(".popup_fullscreen_close").on('click', function () {
$("#language_checkbox").hide();
});
or for better animation stuff you can use
$("#languages_more").on('click', function () {
$("#language_checkbox").fadeIn();
});
$(".popup_fullscreen_close").on('click', function () {
$("#language_checkbox").fadeOut();
});
or
$("#languages_more").on('click', function () {
$("#language_checkbox").slideDown();
});
$(".popup_fullscreen_close").on('click', function () {
$("#language_checkbox").slideUp();
});
Here is what I am trying to do. I have a button (#facebook-button) that when clicked will show the contents of a div (#facebook). Now I want it so when the mouse is not on top (hover) of the div #facebook that it then hides the div #facebook.
Here is what I have so far:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#facebook').hide();
jQuery('#facebook-button').click(function() {
jQuery('#facebook').show();
});
});
</script>
Any suggestions?
You can use jQuery's on mouseleave event, that event is fired when the mouse leaves the area.
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#facebook').hide().on('mouseleave', function() {
jQuery('#facebook').hide();
});
jQuery('#facebook-button').click(function() {
jQuery('#facebook').show();
});
});
</script>
You can try some thing like this.
CSS
div { display: none; }
HTML
<a id="hover" href="#">Show</a>
<div id="div">Contents</div>
JS
$('#hover')
.mouseleave(function() {
$('#div').hide();
})
.click(function(e) {
e.preventDefault();
$('#div').show();
});
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#facebook').hide();
jQuery('#facebook-button').click(function() {
jQuery('#facebook').show();
$('#facebook').on('mouseenter', function() {
// do something or remove that part to just leave mouseleave
}).on('mouseleave', function(){
$('#facebook').hide();
});
});
});
</script>
Basically after showing the div, we will just spot when his mouse is leaving the #facebook div to hide it.
You could also optimize the code and put $('#facebook') in a variable considering the amount of time you re use it. Saves you calling jquery more times than actually needed.
Try this Demo.
$('.fbContent').hide();
$('button').hover(
function() {
$('.fbContent').show();
},
function() {
$('.fbContent').hide();
}
)
I am trying to hide a div whenever I will hover over it and show another one in the same place.. And when I take the mouse out of that.. the previous div will be shown and this div will be hidden...
$(document).ready(function(){
$('#hover_tutor').hover(
function () {
$('#hover_tutor').hide();
$('#hover_tutor_hidden').show();
},
function () {
$('#hover_tutor').show();
$('#hover_tutor_hidden').hide();
}
);
});
<div id="hover_tutor">Blah</div>
<div id="hover_tutor_hidden" style="display:none;">Bleh</div>
But on hovering the hover_tutor... something is happening.. It's jumping up and down.. I don't know what's wrong...
You need to use .mouseenter event for #hover_tutor div and .mouseleave for #hover_tutor_hidden div:
$('#hover_tutor').mouseenter(function () {
$(this).hide();
$('#hover_tutor_hidden').show();
});
$('#hover_tutor_hidden').mouseleave(function () {
$('#hover_tutor').show();
$(this).hide();
}
).mouseleave();//trigger mouseleave to hide second div in beginning
Working Demo
You can also use toggle method instent of hide/show on hover event
<div id="hover_tutor" style="display: block;">Blah</div>
<div id="hover_tutor_hidden" style="display: none;">Bleh</div>
$('#hover_tutor').hover(
function () {
$('#hover_tutor').toggle();
$('#hover_tutor_hidden').toggle();
});
Working demo
http://jsfiddle.net/ivyansh9897/8jgjvkqk/
try this,
$('#hover_tutor').hover(function () {
$(this).hide();
$('#hover_tutor_hidden').show();
});
$('#hover_tutor_hidden').hover(function () {
$('#hover_tutor').show();
$(this).hide();
}
));
If you do have the flexibility to modify your html little bit using class attribute there's a better way. Use .toggle() to alter the state of your element on both mouseover and mouseleave.
HTML :
<div id="hover_tutor" class="hello">Blah</div>
<div id="hover_tutor_hidden" class="hello" style="display:none;">Bleh</div>
jQuery :
$(".hello").on("mouseover mouseleave", function(){
$("#hover_tutor").toggle();
$("#hover_tutor_hidden").toggle();
});
jsFiddle
I am doing toggle class to hide and show, toggle class is working fine, but when i click that "Close" link and outside the div the current displaying div was not getting hide, i am new to jquery. help me if any one know this answer, i have attacted a code below.
Html code
<div class="NoViews">
<img src="~/Content/Theme/images/fav.png" alt="">
<p>Shortlist</p>
<span>1</span>
<div class="shortlistProperty">
<div class="shortlistHeader">
<h5>Shortlisted properties (1)
<p class="flRight"><a class="closeShortlist" href="#">Close</a></p>
</h5>
</div>
<div class="shortlistBody">
Div content
</div>
</div>
</div>
jquery code
$(document).ready(function () {
$(".shortlistProperty").hide();
$(".mySearchProperty").hide();
$(".NoViews").click(function () {
$('.shortlistProperty').toggle();
$('.mySearchProperty').hide();
});
$(".closeShortlist").click(function () {
$('.shortlistProperty').toggle();
$('.shortlistProperty').toggle(false);
});
$(".searchView").click(function () {
$('.mySearchProperty').toggle();
$('.shortlistProperty').hide();
});
$(".closemySearch").click(function () {
$('.mySearchProperty').toggle();
$('.mySearchProperty').toggle(false);
});
});
In this, i want when i click that close link my current div have to get hides and when i click out side the current div have to close.
You have to stop the event bubble. Check the code.
$(document).ready(function () {
$(".shortlistProperty").hide();
$(".mySearchProperty").hide();
$(".NoViews").click(function (e) {
$('.shortlistProperty').toggle();
$('.mySearchProperty').hide();
e.stopPropagation();
});
$('.shortlistProperty').click(function (e) {
e.stopPropagation();
});
$(".closeShortlist").click(function (e) {
$('.shortlistProperty').toggle();
e.stopPropagation();
});
$(".searchView").click(function (e) {
$('.mySearchProperty').toggle();
$('.shortlistProperty').hide();
e.stopPropagation();
});
$(".closemySearch").click(function (e) {
$('.mySearchProperty').toggle();
e.stopPropagation();
});
$('body').click(function (e) {
$('.shortlistProperty').hide();
});
});