I have a button. I click 3 times on
this button. I want show a yellow box
on first click, and hide the yellow
box and show a blue box instant of
that on second click , and hide blue
box and show a red box instant of blue
box on third click.
Is it possible with jQuery? How??
You can use the toggle() method, which takes multiple functions as parameters and executes one for each click (in sequence)
example at http://www.jsfiddle.net/4qsq4/
Keep in mind that this is a bit brute solution. If you could provide some of your HTML structure we could possibly automate this more.
Another realisation.
Use the toggle() event.
Example: http://jsfiddle.net/4xBmc/
Related
how can I change the color of button text inside alert box in react native.
Alert.alert('Hey There!', 'This is an Alert');
Above line generates a simple alert dialog with single "OK" button. I want to change "OK" button color which is default by blue color in android how can I change it to dark gray.
The alert box is part of the system, so you can't change it with CSS. Every operating system will have its own alert box appearance.
If you want to influence the appearance of an alert box, you will have to manually create your own as an HTML element, and create your own javascript function which mimics the built-in alert.
If you're able to use jQuery, you could look into the dialog() function, for example.
I am trying to toggle one button using jQuery. So far, all of the information I have found is to toggle a paragraph, for instance, using another button, but I want to make this button appear and reappear when it is clicked. I also want to increase the "score" when the shown button is clicked, and decrease the "score" when the button reappears (after the user clicks it). Does anyone know how to accomplish this?
I have a series of buttons, but I will link the code for one of them for now.
HTML:
<li><button id="active1" onclick="disappear1()"></button></li>
JavaScript:
function disappear1() {
$("#active1").toggle();
currentStreak++;
document.getElementById("streak").innerHTML="current streak: " + currentStreak;
}
I know that the problem is that when I click on the button, the button disappears so there's no way for me to find it again. I want there to be a way to still reference it.
The .toggle() function changes the targeted element's CSS display property to hide/show the element. When the element is hidden it is still in the DOM and can still be targeted with same method as when it's visible.
The example below toggles an element with an ID of 'active1' when a button is clicked. Even when the 'active1' element is hidden it is still referenced and made visible again.
$('#button1').click( function (){
$('#active1').toggle();
});
I am creating a easy to use form web app that uses button presses to generate answers.
I would like the boxes to either show a colour or display a number and if possible both, then once press it then only shows the number or dims the other boxes so you can clearly see that you have pressed box 3 for example. I would like this to eventually to record what button is pressed and then be added to a form.
Any idea how I can create such buttons?
Give all the buttons a class and then something like:
$('.btnClass').click(function() {
$('.btnClass').css('opacity', 0.5);
$(this).css ('opacity', 1);
});
That will dim the non-selected buttons.
you could achive this by using radiobutton´s labels,
http://www.w3schools.com/tags/tag_label.asp
you hide the actual radiobuttons and style the labels like a traffic light or whatever,
so when you click the label it will automatically check the radiobutton.
with a bit of javascript/css and helperclasses you can easyily achive your desired effect (eg. blending out the other labels etc.)
With JavaScript is it possible to have a drop down menu display a form field with an input type of text, instead of a list option? Could I get a jsfiddle demo example?
I recommend using JQuery to do this? Basically hide and show a div with all your input fields on it. This way you can create the illusion that it's a native dropdown. A standard dropdown does not support custom markup. There are aloso third party alternatives for "custom dropdowns" I suspect they are all implemented using some variation on what I suggested above...
Of course it is possible, but I doubt it is possible using a common <select> element. You should probably create a <div> consisting of several inputs (i.e. <input type = "text">).
Then you'll have a button (with a down-pointing arrow image :) ) and to its onclick event, you'll bind a function that shows your <div>. To hide the <div>, you can bind the hiding function to a click on the background or another click on your button.
To add some elegancy and create a dropdown effect while showing the <div>, you can set its height to 0 and then continually increment it with a timer.
I want to create an alert box with 3 radio buttons in it. It should be like
'Replace'
'Save'
'Merge'
along with OK and Cancel buttons. Any idea how to achieve this?
To add to what WoLpH said, you specifically want a modal overlay that can be called programmatically similar to an alert box. Give jQuery UI or YUI a try.
There is no default javascript box that does this, you have confirm(), prompt and alert available and that's it.
There are however widgetsets/libraries that give you this option. Try Ext JS for example
You can use javascript to create modal dialog box with the controls you would like to show. You can customize the look & get rid of the default grey dialog boxes, it's really cool. Check the link below.
Javascript modal dialog sample
use the input tag to generate radio buttons
<input type="radio" name="button_1">Replace</input>
and div tag to generate you okay and cancel buttons
<div id="cancel">Cancel</div>
and have the onclick functions of your div's be a javascript call which pulls the data out of the radio buttons.