I added inline stylesheet to color the two radio button, but the two radio buttons remain blue, they don't became red or green.
This is the code, could you please help me find the bug in my code?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head
content must come *after* these tags -->
<title>Ristorante Con Fusion</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/bootstrap-social.css" rel="stylesheet">
<link href="css/mystyles.css" rel="stylesheet">
</head>
<body> <form class="form-horizontal" role="form">
<div class="form-group">
<label for="btn-group" class="col-xs-12 col-sm-2 control-label">Sections</label>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1" autocomplete="off" style ="background-color:red;" checked > True
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3" style="background-color: green;" autocomplete="off"> False
</label>
</div></div>
</form><!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>
</body>
</html>
Change the class btn-primary to btn-success to became green and btn-danger to become red
You are styling the radio button itself but the thing that is making the button blue is the label that is containing it. Try this
<label class="btn btn-primary active" style ="background-color:red;">
<input type="radio" name="options" id="option1" autocomplete="off" checked > True
</label>
<label class="btn btn-primary" style="background-color: green;">
<input type="radio" name="options" id="option3" autocomplete="off"> False
</label>
Related
I've been struggling to make this as reusable as possible. I have written it such that if I put the id's of both the target fieldset and the input checkbox it works. However, I have a number of form elements that must all act the same, so this isn't a great way to deal with it.
When a user enables or disables the checkbox switch, then I want the following form field to disable or enable accordingly. I've tried multiple different ways to accomplish this and cleaned up my javascript based on suggestions in other threads, but when I attempt to activate the switch I get the below error. Any help would be amazing!
form_enable.js:2 Uncaught TypeError: Cannot set property 'disabled' of null at enable_disable (form_enable.js:2) at HTMLInputElement.onchange (Trim.htm:11)
My trimmed down HTML:
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Test</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="container">
<div class="form-group custom-control custom-switch">
<input class="custom-control-input" type="checkbox" name="report_url_active" id="report_url_active_yes" onchange="enable_disable(report_url_disable_fieldset,report_url_active_yes)">
<label class="custom-control-label" for="report_url_active_yes">Will you need a report?</label>
</div>
<div class="container">
<fieldset disabled id="report_url_disable_fieldset"> <!-- Enable if report_url_active_yes is checked -->
<div class="form-group form-inline">
<label class="form-control-label" for="report_url">Reports URL</label>
<input class="form-control" type="text" id="report_url">
</div>
</fieldset>
</div>
</div>
<script src="js/jquery-3.5.0.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/form_enable.js"></script>
</body>
And my form_enable.js file:
function enable_disable(target_id,check_id) {
document.getElementById(target_id).disabled = !check_id.checked;
}
Try:
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Test</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="container">
<div class="form-group custom-control custom-switch">
<input class="custom-control-input" type="checkbox" name="report_url_active" id="report_url_active_yes">
<label class="custom-control-label" for="report_url_active_yes">Will you need a report?</label>
</div>
<div class="container">
<fieldset id="report_url_disable_fieldset"> <!-- Enable if report_url_active_yes is checked -->
<div class="form-group form-inline">
<label class="form-control-label" for="report_url">Reports URL</label>
<input class="form-control" type="text" id="report_url">
</div>
</fieldset>
</div>
</div>
<script src="js/jquery-3.5.0.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/form_enable.js"></script>
</body>
</html>
And form_enable.js:
document.getElementById("report_url").setAttribute("disabled", "true");
document.getElementById("report_url_active_yes").addEventListener("change", function() {
document.getElementById("report_url_active_yes").checked ? document.getElementById("report_url").removeAttribute("disabled") : document.getElementById("report_url").setAttribute("disabled", "true")
});
I am trying to make a dropdown menu for a date and time picker within a multiple step form. The issue here is that the jQuery libraries are conflicting each other (specifically in between the </form> and the </body>), where the multiple step form works when the date and time picker libraries are disabled, and vice versa. I Looked online but nothing seem to resolve the issue.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- jQuery -->
<!-- Custom styles for this template-->
<link href="coupons_Example.css" rel="stylesheet">
<title>Title of the document</title>
</head>
<body>
<!-- jQuery -->
<!-- multistep form -->
<!-- multistep form -->
<form id="msform">
<!-- progressbar -->
<ul id="progressbar">
<li class="active">Discount Setup</li>
<li>Type of Discount</li>
<li>Discount Time Period</li>
</ul>
<!-- fieldsets -->
<fieldset>
<h2 class="fs-title">Create Discount</h2>
<h3 class="fs-subtitle">Step 1</h3>
<input type="text" name="email" placeholder="Name of Discount" />
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset>
<h2 class="fs-title">Type of Discount</h2>
<h3 class="fs-subtitle">Step 2</h3>
<!-- Picking the date and time -->
<input type="text" name="datetimes" />
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset>
<h2 class="fs-title">Discount Time Period</h2>
<h3 class="fs-subtitle">Step 3</h3>
<input type="text" name="discountstart" placeholder="Discount Start Period" />
<input type="text" name="discountend" placeholder="Discount End Period" />
<input type="text" name="speekeasy" placeholder="Speekeasy" />
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="submit" name="submit" class="submit action-button" value="Submit" />
</fieldset>
</form>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<script src="app.js"></script>
<script src="http://thecodeplayer.com/uploads/js/jquery-1.9.1.min.js" type="text/javascript"></script>
<!-- jQuery easing plugin -->
<script src="http://thecodeplayer.com/uploads/js/jquery.easing.min.js" type="text/javascript"></script>
</body>
</html>
Please try below link
https://api.jquery.com/jQuery.noConflict/
Or for use multiple versions for jquery in same page, include jquery migrate:
https://code.jquery.com/jquery-migrate-1.4.1.min.js
But best advice do not user multiple jQuery library
Why dont you find the same module that requires the same jquery major version instead?
I did a research while it can be achieved by separating the scope, havent done it
you might want to check it by yourself in this link
https://www.tutorialspoint.com/How-to-use-multiple-versions-of-jQuery-on-the-same-page
Don't Use Multiple jQuery Core Library. Use either 3.4 or 1.9
In order to get Date etc work, you need to update(recall) that js after ajax call.
I am working through Chapter 23 of Javascript for Web Developers. Why does running
applicationCache.update()
from Chrome's console
return
Uncaught DOMException: Failed to execute 'update' on 'ApplicationCache': there is no application cache to update.
??
My HTML file
<!DOCTYPE html> <html manifest="offline.appcache">
<head>
<title>Dynamic Quiz</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<!-- Here is the question and its possible answers -->
<div class="questionEntire">
<h3 class="questionTitle">Question title goes here</h3>
<form>
<button type="submit">Next</button>
<div class="choices">
<!-- <input type="radio" name="answer" value="0"><span>Choice 1</span><br> -->
<!-- <input type="radio" name="answer" value="1"><span>Choice 2</span><br> -->
<!-- <input type="radio" name="answer" value="2"><span>Choice 3</span><br> -->
<!-- <input type="radio" name="answer" value="3"><span>Choice 4</span><br> -->
</div>
</form>
</div>
<!-- This is the div that should be shown at the end -->
<div class="totalDiv hideThis">
<h3 class="total">Your Score is</h3>
<p>total</p>
</div>
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script src="eventUtilities.js"></script>
<script src="main.js"></script>
</body>
</html>
My offline.appcache file
CACHE MANIFEST
#Comment
CACHE:
https://code.jquery.com/jquery-2.1.1.js main.js
main.js
NETWORK:
*
I am unable to see any files in Chrome's web dev tools under Resource->Application Cache. When I run applicationCache.status, 0 is always returned.
http://jsfiddle.net/michaellatch/uxtawuwv/
Thank you in advance!
I am new to BootStrap 3 and am having problems with my divs overlapping. I'm probably missing something simple, but can't seem to find the problem. Here is the html.
You can also find a working copy of what I am trying to do in Bootstrap at wibberding.info/SolarTime.
Thanks for any help you can give.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<title>Solar Time</title>
<link rel="icon" type="image/ico" href="favicon.ico">
</head>
<body>
<div class="jumbotron">
<div class="container clearfix">
<h1 id="clock">Solar Time</h1>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-8">
<p>This web app allows you to find Solar Time in two ways:</p>
<p> 1. Find Solar Time by reading the location data from your device. You will have to have this turned on. </p>
<p> 2. By entering a longitude. You can find the longitude of your zipcode here.</p>
</div>
<div class="col-md-4">
<form id="form">
<input id="device" type="radio" name="locationData" value="device" checked onchange="solarTime.checkLocationMethod()">
<label for="device">Use my device location.</label><br>
<input id="latLong" type="radio" name="locationData" value="latLong" onchange="solarTime.checkLocationMethod()">
<label for="latLong">Enter Longitude</label>
<input type="text" size="10" maxlength="30" id="longitude" onFocus="solarTime.changeToLong()"></input> (Enter postive longitude for East and negative for West. All of the United States is negative.) <br>
<input type="button" onclick="solarTime.checkLocationMethod()" value="Find Solar Time" />
</form>
</div>
</div>
</div>
</body>
</html>
So it looks like I missed a closing DIV tag. It now works :-) Thank you everyone for your help . . .
I have checked radio button using Jquery buts its not updated in UI .
Anyone has any idea .below is my snippets...
<!DOCTYPE html>
<html>
<head>
<title>Radio Button</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script>
function getValue() {
alert("Value is :"+$('input[name=animal]:checked').val());
}
function setValue(toBeSetID) {
$("input[name=animal][id=radio-choice-2]").prop("checked", true);
$("label[for='rock']").addClass("ui-radio-on");
alert("Value is :"+$('input[name=animal]:checked').val());
}
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Radio Button</h1>
</div><!-- /header -->
<div data-role="content">
<input type="radio" name="animal" id="cat" value="Cat" />
<label for="cat">Cat</label>
<input type="radio" name="animal" id="radio-choice-2" value="choice-2"/>
<label for="radio-choice-2">Dog</label>
<input type="radio" name="animal" id="radio-choice-3" value="choice-3" />
<label for="radio-choice-3">Hamster</label>
<input type="radio" name="animal" id="radio-choice-4" value="choice-4" />
<label for="radio-choice-4">Lizard</label>
<input type="button" value="Get Radio Button Value" onclick="getValue();">
<input type="button" value="Set Radio Button Value" onclick="setValue();">
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
Its Checked by programm as alert box says But not updated in UI.
As Chase says in his answer to your other question, you have to refresh the jQuery Mobile widget when you change the checked property of the underlying form element. This can be done by writing:
$("input[name=animal][id=radio-choice-2]")
.prop("checked", true).checkboxradio("refresh");
That way, you do not have to manipulate the classes yourself, the mobile widget does all the work.
Note in passing that your selector targets an element that has an id attribute, so it can be simplified:
$("#radio-choice-2").prop("checked", true).checkboxradio("refresh");