Looking to spruce up the standard checkbox?
We're open to any method - whether it's a background image, CSS3, or some jQuery magic.
Looking to spruce up the standard checkbox?
We're open to any method - whether it's a background image, CSS3, or some jQuery magic.
If you don't mind utilizing an existing toolkit, jQuery UI Button offers the ability to transform checkboxes into custom-styled buttons that accommodate the four essential visual states along with a hover state:
However, to fully utilize this feature as desired (using the value attribute as the label), you will need to assign id attributes to your checkboxes and incorporate <label> elements corresponding to these ids showcasing the checkbox values as their inner text. You can manually modify your markup like so:
<input type="checkbox" id="nutri" name="nutri" value="select">
<label for="nutri">select</label>
Alternatively, you can make dynamic changes:
$("input:checkbox").each(function(index) {
$("<label>").text(this.value)
.attr("for", this.id = "checkbox" + index + 1)
.insertAfter(this);
});
Subsequently, all it takes is invoking button() on the checkbox or buttonset() on a container. If the default jQuery UI themes do not align with your project requirements, feel free to craft your own style for each visual state using ThemeRoller.
You can view a live demonstration in this fiddle.
To style your checkbox using only CSS, simply include a label right after the checkbox:
#custom_checkbox {
display:none;
}
#custom_checkbox + label{
background:url('images/custom-check.png') no-repeat;
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}
#custom_checkbox:checked + label{
background:url('images/custom-check-checked.png') no-repeat;
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}
$('#yourCheckbox').hide().after($('<img/>', { src: 'blah.png', alt: 'whatever' }).click(function(){
$(this).prev('input:checkbox').click();
}));
An alternative approach would be to create a label with an embedded image, eliminating the need for the click() handler.
I'm populating a listview with items from localStorage. When a user clicks on a list item, a corresponding popup should appear. I already have a working solution where the popups are displayed upon request. However, this time I am dynamically adding t ...
I need assistance with a task involving a list of elements that allows users to print only the clicked element, rather than the entire page. The elements are structured as follows: <div class="element" id="#element1">Element 1</div> <div cl ...
I am currently facing a challenge in loading multiple JSON files into tables within different divs. Here is the structure of my JSON data: JSON file 1: [ { "id": 12345, "code": "final", "error": "", "data": [ ...
I am in the process of developing a Chrome extension that involves sending data requests from a popup script to a content script (via a background script), analyzing the request on the content script, and then sending back a response (again through the bac ...
When I make an AJAX call to a Rails controller, retrieve a record, and then pass that record back to the AJAX function, I encounter a strange issue. Here is my AJAX request written in CoffeScript: jQuery -> $.ajax type: 'GET', url: ...
My goal is to use mouse hover instead of clicking on the circles in bxSlider's pager, but I am unsure how to achieve this. I attempted changing the source code from click to hover, as demonstrated on a site like this one. The original code snippet lo ...
Encountered a strange issue with the "find_elements_by_css_selector" function in Selenium. Despite expecting to retrieve 10 elements, only 9 are returned consistently across various page examples. Interestingly, when testing the same selector using JavaScr ...
Could an ajax request be initiated from a mouseleave event? My goal is to send the string 'Y' when the mouse exits the li element in order to update the database. Do you think this is feasible? (function(){ $('li#myId').mouseenter(f ...
My goal is to simplify my ajax calls by creating a function that can be reused. Although I'm unsure if I'm doing it correctly, I would like to attempt this approach. <script> $(document).ready(function(){ var reg_no=$("#reg_no").va ...
I have successfully created a pie chart using highchart and javascript, allowing me to adjust each slice individually using a slider. However, I am facing an issue where I want the maximum value of the pie to be 100%, with the other sliders contributing to ...
I encountered an issue when trying to invoke a JavaScript function with multiple arguments from an HTML page. Here is what I am attempting to do: wbNavigator.Navigate(new Uri("http://localhost:56433/route.html", UriKind.Absolute)); object results = wbNavi ...
Having trouble playing a user-uploaded video using the <video tag. The video doesn't seem to load into the DOM properly. Here's the code snippet: function Videos ({uploadedFiles}){ if (uploadedFiles) { console.log(uploadedFile ...
I was attempting to create a calculator using JavaScript, but when I click on any button, nothing happens (the buttons don't display their values on the calculator's screen). My text editor (vs code) didn't indicate any errors, but upon insp ...
Can anyone help with this code snippet? Here's the link table { height: 200px; width: 200px; background-color: #444557; /* seems to be hidden by the gradient */ /* Here is the CSS for a gradient background */ /* Source: http://colorzilla ...
Currently, I am developing a plugin known as Baraja which is designed for spreading items in a card-like manner. I am facing an issue with the code and unable to determine how to set the plugin to load the cards in "Rotated spread (horizontal)" fashion by ...
Usually, it's quite simple to integrate SCSS styles and the jQuery path into an Angular project by adding them to the script:[] section. However: Upon inspecting the angular.js file created from jhipster, I noticed that the architect part is missing ...
I am looking to store values in a specific format: "somekey": "value1", "value2" My goal is to create a function that takes in "somekey" and returns "value1", "value2". Alternatively, I could initialize a collection in my JavaScript file and reference i ...
My images are shrinking in Chrome, as expected, but they don't adjust their size in Firefox and IE9. I'm using the CSS below: .pics img { max-width: 100%; height: auto; width: auto\9; /* ie8 */ border: 1px solid #CCC; } ...
When using Jquery Ajax, I have a main entry script called "index.php." This script allows the user to request "/folder2/index.php" using ajax. I also use the same path "/folder2/index.php" for direct access. However, because of the ajax call, I need to ...
Having some trouble with a PHP script in my assignment related to page handling. When I submit it through another PHP page, it is showing the actual PHP code instead of executing properly, but it works fine when run standalone. I've created an HTML l ...