Controlling toggling buttons with CSS and jQuery - javascript

As you can see in this jsfiddle, I'm trying to make a toggle switch (a mute button) that
displays the current setting, i.e. mute or unmute
when hovered upon, displays the alternative
However, my problem is when the user clicks the button, instead of displaying the opposite button, it shows that opposite buttons hover state. I hope this is making sense, haha. Basically the interaction is:
view button in unmute state
hover over and see the mute icon
click and see the unmute icon again, because it is the mute states hover image
when the icon is not hovered upon, it displays the proper icon, i.e. mute
In the jsfiddle example, I want a click to display the button, not the :hover attribute... any help? I'm aware that this kinda thing can't be handled by css alone.. (sorry if this seems confusing, ive been working in codespeak for a while today...)

Consider this alternative solution:
uses single button
manipulates .text() and .css() to change button attribute
custom toggler implemented because of special cases you require
Here is the code:
CSS:
button { width: 200px; height: 60px; color: white; font-size: 20px; background-color: red; }
HTML:
<button class=''> Mute </button>
JS:
function unmute() {
$('button').removeClass('muted');
$('button').text('Unmute');
$('button').css('background-color','blue');
}
function mute() {
$('button').addClass('muted');
$('button').text('Mute');
$('button').css('background-color','red');
}
function customToggler() {
if (disableToggle) return;
if ($('button').hasClass('muted')) unmute(); else mute();
}
var disableToggle = false;
$(document).ready(function() {
customToggler();
$('button').click(function() {
disableToggle = true;
customToggler();
});
$('button').mouseover(function() {
customToggler();
}).mouseout(function() {
customToggler();
disableToggle = false;
});
});
--
To see the above code in action, see http://jsfiddle.net/fwjz5/ Good luck!
​

You can handle hover states in javascript and remove CSS ones.

Well, I think this is the shortest solution right now:
http://jsfiddle.net/4mK9q/

Related

I need the alert when color dialog was closed without any action

I am Trying to catch the event when the color dialog was closed without any action and get the alert then. I am using onfocus and onblur, because color dialog has no close event.
This demo has to paint the text which was inserted in the text input element.
It does its job, but if the color was not changed from the previous case or if the color dialog was closed without any action nothing happens.
And this is what I would like to upgrade to have an alert in this case.
I was trying 231 different options but I am giving up (check the fiddle update number ).
This is the demo code. But my app works the same way. Actually getting the color from the color dialog is one step of one configuration process. That's why is important to notify the user that he has to choose some color other-ways configuration process will be aborted.
I hope to get a solution which I could then integrate into my app.
But let me resume it. If I change the color - all is fine. If I select the same color as I had in the previous case - all is fine also because I have some other task which I did not include in this demo to notify me about this.
But if I get to point when I open the color dialog and if I click on "OK", "Cancel" or "X", then I need the alert message.
If you go through the case and observe how values are acting in the console you could probably get an idea how to solve this. I hope.
var someText;
function createStatusF(){
countClose=0;
someText = prompt("Enter some text :", "");
if ((someText=="")||(someText==null)){
return;
}
document.getElementById("colorDialogID").focus();
document.getElementById("colorDialogID").value = "#FFCC00";
document.getElementById("colorDialogID").click();
}
document.getElementById("newlabelID").onclick = createStatusF;
//document.getElementById("colorDialogID").style.display = "none";
function peintTheText(){
document.getElementById("aID").innerHTML= someText;
var theColor=document.getElementById("colorDialogID").value;
document.getElementById("aID").style.color=theColor;
console.log(theColor);
}
document.getElementById("colorDialogID").onchange=peintTheText;
var countClose=0;
var type1;
function onfocusF(){
type1 = $(colorDialogID).attr('type');
countClose=countClose+1;
console.log(countClose+type1);
}
document.getElementById("colorDialogID").onfocus=onfocusF;
function onblurF(){
type1 = $(colorDialogID).attr('type');
countClose=countClose+1;
console.log(countClose+type1);
}
document.getElementById("colorDialogID").onblur=onblurF;
#colorDialogID {
position: absolute;
left: 0px;
top: 0px;
width: 0px;
height: 0px;
opacity: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" id="newlabelID" value="Open input element to insert text "/></br>
<input type="color" id="colorDialogID" ></br>
<a id="aID"> Text to paint</br>
https://jsfiddle.net/pr2501/jvrk6qcw/231/
I know this is not answer to your exact question, but you can try hide event of this tutorial because there is no close event for color dialog. Here is github repository of tutorial.

Javascript Video Button

I'm a bit of a novice when it comes to Jquery.
I'm trying to pause/play a video by clicking the video itself and also by click a play/pause button.
Now, I've managed to get it working as desired when the user clicks the video.
But I can't get it to work using the button as well.
This what I've tried so far:
$("video").trigger("play");//for auto play
$('video, #pausebutton').click(function() {
if ($('video').hasClass('pause')) {
$("video").trigger("play");
$(this).removeClass('pause');
$("#artwork").removeClass('fadein')
$(this).addClass('play');
$("#pausing").html("▐▐");
} else {
$("video").trigger("pause");
$(this).removeClass('play');
$(this).addClass('pause');
$("#artwork").addClass('fadein');
$("#pausing").html("►");
}
});
The pause button does actually pause the video, but it doesn't resume play when clicked for a second time. It also ignores the other attributes such as add and removing classes etc. Just to clarify, all these things work when the video is clicked directly.
Any help would be appreciated.
Cheers
It's the use of this inside the event handler, when the button is clicked this is the button, not the video, and the classes are set on the button instead of the video
$("video").trigger("play"); //for auto play
$('video, #pausebutton').click(function () {
if ($('video').hasClass('pause')) {
$("video").trigger("play");
$('video').removeClass('pause');
$("#artwork").removeClass('fadein')
$('video').addClass('play');
$("#pausing").html("▐▐");
} else {
$("video").trigger("pause");
$('video').removeClass('play');
$('video').addClass('pause');
$("#artwork").addClass('fadein');
$("#pausing").html("►");
}
});
FIDDLE

Animation after submiting

I have questioner in HTML and one submit button:
<Input type = "Submit" Name = "Submit6" VALUE = "Dalej >">
I use jQuery to protect situation that user can click two times in submit button with this code:
<script>
$('form').submit(function(){
$(this).find(':submit').attr('disabled','disabled');
});
</script>
Now I want develop this part of script to show also gif animation during loading process. I saw that my users don't know why this system doesn't work and they try to click next time submit but it's disable.
I have two idea how can I solve it. One is show gif animatino (like ajax or something different) and second extinguish the page with animation. First will be more easy and for me is OK.
Can you give me tips?
Assuming you are using ajax request to post your data to server,
Add an image to the html page,
<img id='waiting' src="waiting.gif" style="display:none"/>
And change the script like this,
<script>
$('form').submit(function(){
$(this).find(':submit').attr('disabled','disabled');
$("#waiting").css("display","block");
$.post("/url/to/post/data", function(){
$("#waiting").css("display","none");
});
});
</script>
use the button instead of sumit
$(document).ready(function(e) {
$("form :button").click(function(){
$(this).attr('disabled','disabled');
$("html").fadeOut("1000",function(){ // fade animation
$("form").submit();
});
})
});
If you are using Bootstrap, there is a component for this kind of functionality,
http://getbootstrap.com/javascript/#buttons
Getting inspired from this I've also created a button that toggles classes while making it enabled or disabled, and based on the current class you can show different texts on each state
<button class="btn-progressive">
<span class="button-label">Log In</span>
<i class="icon-spinner icon-large icon-spin"></i>
</button>
and using css you can do,
.btn-progressive .icon-spinner { display: none; }
.btn-progressive.progressing .icon-spinner { display: inline; }
.btn-progressive.progressing .button-label { display: none; }
So while toggling button's enable state, we can also toggle 'proressing' class.
P.S. If you are ok with CSS3 compatibility, you can also use disabled attribute for these CSS rules

Javascript display onclick with an animation

I want to animate a simple search form. Before the click event, it is hidden behind my fix nav bar (margin-top:-47px). When the user clicks a search button, I want to set the form's margin-top property to 0px so it shows on the page.
jsFiddle
I am using this HTML :
<nav>
<a data-icon="search" class="search-form-toggle"></a>
...
<div class="form search-form">
<fieldset data-icon="search">
<input type="search" placeholder="Search...">
</fieldset>
</div>
And this CSS :
.search-form {
margin-top: -47px;
}
And the following javascript (jQuery) :
$('.search-form-toggle').click(function(){
if($(".search-form").css("margin-top") == "-47px") {
$(".search-form").animate({margin-top: "0px"}, 1000);
} else {
$(".search-form").animate({margin-top: "-47px"}, 1000);
}
return false;
});
When I click the button, it is not working... I guess it is a Javascript issue?
Plus, can I achieve the same result (nice transition) without using jQuery?
The error is in the .animate() it should be:
$(".search-form").animate({'margin-top' : '0px'}, 1000);
and
$(".search-form").animate({margin-top: "-47px"}, 1000);
You forgot the quotes around the margin-top
here's my working fiddle though make sure you add the ajax file that is attached
Fiddle
Here is the working fiddle. You'd forgot to put the quotes.
.animate({"margin-top": "XXpx"});
http://jsfiddle.net/5xxWu/
The answer given were really helpful in debugging my code. However, I went with another option when I found animte.css. It is a CSS library that provides multiple animations for divs and others.
I was also using QuoJS, and I didn't want to add jQuery to my loading time, especially since I am developing for mobile devices.
Here is my final code :
JS :
document.querySelector(".search-toggle").addEventListener("click", function(){
var form = $$(".search-form");
if (form.hasClass('display')) {
form.removeClass('display');
} else {
form.addClass('display animated flipInX');
}
});
CSS :
.search-form {
display:none;
}
.display {
display:block;
}
At first, my div only have the .search-form class, so it is not displayed. I add the .display class with QuoJs with the addClass() function.
The transition are very sleek, thanks to animate.css.

How to prevent users from clicking multiple times on a linked image?

I have a page with a linked image, where the link takes a bit of time to load. Therefore, users tend to click multiple times on it. This occasionally causes errors to crop up in the code. How do I prevent users from clicking on the link more than once?
In an attempt to remedy this, I changed the link to an onClick event and then in the function I used the code:
$('#myImageId').unbind('click');
window.location.href = "myLink";
However, that doesn't seem to be helping. Also, I'd prefer to keep it a simple linked image instead of using javascript.
Once solution is to add a class to the element that is used as a flag to determine of the code should run.
Here's an example: http://jsfiddle.net/qLhr8/
$('#myImageId').click(function() {
var $th = $(this);
if( !$th.hasClass( "pending" ) ) {
// Add the "pending" class, so subsequent clicks will not
// run the code inside this if()
$th.addClass( "pending" );
window.location.href = "myLink";
// you could do a setTimeout to remove the class
// if the new page never loads
}
});
With the added class, you can also change the look of the image (lower its opacity perhaps) to indicate that it shouldn't be clicked again.
.pending {
opacity: .4;
filter:alpha(opacity:40);
cursor: wait;
}
<img src="..." id="myImageId">
$('#myImageId').bind('click', function() {
$(this).unbind('click');
/* do long time task....
});
if your image is wrapped by a link the code will be
<img src="..." id="myImageId">
$('#myImageId').parent().bind('click', function(evt) {
$(this).unbind('click');
/* do long time task....
evt.preventDefault();
});
A hacky CSS solution that might/might not work: create another image element, without the link and make it a sibling to the link, like this:
<div>
<img src="my_img.png" id="img_link" alt="GO" />
<img src="my_img.png" id="img_nolink" alt="GO" />
</div>
Now apply this CSS:
#img_nolink { display: none; position: relative; top: -200px; /* Height of the image */ }
#link:active + #img_nolink { display: block; }
This should show the non-link image when the link is clicked (theoretically).

Categories

Resources