I am using the switch class from foundation-zurb and I am using the example from their website, but the inside labels for the inactive/active settings are not working. The code is below:
<p>Above/Below</p>
<div class="switch">
<input class="switch-input" id="Above/Below" type="checkbox" name="ABSwitch">
<label class="switch-paddle" for="Above/Below">
<span class="switch-active" aria-hidden="true">A</span>
<span class="switch-inactive" aria-hidden="true">B</span>
</label>
</div>
The A and B on the respective active/inactive settings of the switch do not show up.
Try something like this:
<html>
<head>
<meta name="viewport" content="width=device-width" />
<link href="https://cdn.jsdelivr.net/foundation/6.1.1/foundation.min.css" rel="stylesheet" />
</head>
<body>
<p>Above/Below</p>
<div class="switch">
<input class="switch-input" id="Above/Below" type="checkbox" name="ABSwitch">
<label class="switch-paddle" for="Above/Below">
<span class="switch-active" aria-hidden="true">A</span>
<span class="switch-inactive" aria-hidden="true">B</span>
</label>
</div>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://cdn.jsdelivr.net/foundation/6.1.1/js/foundation.accordion.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(document).foundation();
});
</script>
</body>
</html>
Related
This question already has answers here:
move the position of bootstrap datepicker
(5 answers)
bootstrap date picker position
(2 answers)
Closed 2 years ago.
I have these datepickers and I want to move the position of each one to the right of each input instead of being in the left.
I tried so many css solutions but nothing seems to work.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/locales/bootstrap-datepicker.fr.min.js"></script>
</head>
<body>
<div class="form-group col-md-6">
<label for="inputPassword4"> beginning date
</label>
<input dir="rtl" type="text" class="form-control" id="beginning_date" name="beginning_date">
</div>
<div class="form-group col-md-6">
<label for="inputEmail4"> ending date
</label>
<input dir="rtl" type="text" class="form-control" id="ending_date" name="ending_date">
</div>
<script type="text/javascript">
$(function () {
$('#beginning_date').datepicker({
language: 'fr'})
$('#ending_date').datepicker({
language: 'fr'})
});
</script>
</body>
</html>
Just use orientation: 'right'
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/locales/bootstrap-datepicker.fr.min.js"></script>
</head>
<body>
<div class="form-group col-md-6">
<label for="inputPassword4"> beginning date
</label>
<input dir="rtl" type="text" class="form-control" id="beginning_date" name="beginning_date">
</div>
<div class="form-group col-md-6">
<label for="inputEmail4"> ending date
</label>
<input dir="rtl" type="text" class="form-control" id="ending_date" name="ending_date">
</div>
<script type="text/javascript">
$(function() {
$('#beginning_date').datepicker({
language: 'fr',
orientation: 'right'
})
$('#ending_date').datepicker({
language: 'fr',
orientation: 'right'
})
});
</script>
</body>
</html>
We can use oreientation: 'top right' for show the datepicker on top the input instead of the bottom.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/locales/bootstrap-datepicker.fr.min.js"></script>
</head>
<body>
<div class="form-group col-md-6">
<label for="inputPassword4"> beginning date
</label>
<input dir="rtl" type="text" class="form-control" id="beginning_date" name="beginning_date">
</div>
<div class="form-group col-md-6">
<label for="inputEmail4"> ending date
</label>
<input dir="rtl" type="text" class="form-control" id="ending_date" name="ending_date">
</div>
<script type="text/javascript">
$(function() {
$('#beginning_date').datepicker({
language: 'fr',
orientation: 'top right'
})
$('#ending_date').datepicker({
language: 'fr',
orientation: 'top right'
})
});
</script>
</body>
</html>
Change left property value for the div.datepicker element to auto, and set right property value to the previous value of left property.
div.datepicker {
left: auto;
right: 15px;
}
I want a Calendar on a HTML Input Text.
I don't want HTML5 or other solutions.
I created a possible solution on this JSFiddle.
<head>
<script type="text/javascript" src="http://services.iperfect.net/js/IP_generalLib.js"></script>
</head>
<input type="text" name="date1" id="date1" alt="date" class="IP_calendar" title="d/m/Y">
But I'm looking for other alternatives with other styles.
Any suggestion?
Why not doing this (just checked it) :
$(document).ready(function() {
$("#start_datepicker").datepicker();
$("#end_datepicker").datepicker();
});
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
</head>
<body style="font-size:62.5%;">
<form action="sample.php" method="post">
Start Date: <input type="text" name="startdate" id="start_datepicker"/>
End Date: <input type="text" name="enddate" id="end_datepicker"/>
</form>
</body>
</html>
I am trying to implement a date-time calendar using Bootstrap, and when I'm using the datetimepicker, no dates or times are being made available to select. The libraries needed for datetimepicker are already downloaded and in the respective folders within the directory.
Here is my code:
<head>
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="vendor/bootstrap/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<!-- Theme CSS -->
<link href="css/agency.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]> -->
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js" integrity="sha384-0s5Pv64cNZJieYFkXYOTId2HMA2Lfb6q2nAcx2n0RTLUnCAoTTsS0nKEO27XyKcY" crossorigin="anonymous"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js" integrity="sha384-ZoaMbDF+4LeFxg6WdScQ9nnR1QC2MIRxA1O9KWEXQwns1G8UNyIEZIQidzb0T1fo" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
</head>
<body>
<div class='col-sm-6'>
<div class="form-group">
<label for="carPUdatetime"> Date and Time: </label>
<div class='input-group date form_datetime' data-date-format="dd-MM-yyyy - HH:ii" id='carPUdatetime'>
<input class="form-control" type="text" required/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap-datetimepicker.js"> .</script>
<script src="vendor/bootstrap/js/locales/bootstrap-datetimepicker.fr.js"></script>
<script type="text/javascript">
$(function () {
$('#carPUdatetime').datetimepicker();
});
</script>
</body>
Your problem is that you called datepicker on the div and not the input.
Change
<input class="form-control" type="text" required/>
to
<input id="testInput" class="form-control" type="text" required/>
and update your javascript to
$(function () {
$('#testInput').datetimepicker();
});
Move the id='carPUdatetime' from the div to the input:
<label for="carPUdatetime"> Date and Time: </label>
<div class='input-group date form_datetime' data-date-format="dd-MM-yyyy - HH:ii">
<input id='carPUdatetime' class="form-control" type="text" required/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
That's not exactly an answer to your question, but the value of the for attribute in the label must be an HTML control, not div.
Apart from that, the code in your question works fine and the dates are displayed.
If you want to keep the calendar with the div, then give the input a different id from the div:
<label for="carPUdatetime"> Date and Time: </label>
<div class='input-group date form_datetime' data-date-format="dd-MM-yyyy - HH:ii" id='carPUcalendar'>
<input id='carPUdatetime' class="form-control" type="text" required/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#carPUcalendar').datetimepicker();
});
</script>
How can i convert this to an wordpress new page. I tried to add it tru html but that didn't work. My dropdown is all mest up. Nothing seems to be good. Can anyone help me out please?
Are point me in the wright direction. Are show me a preview how i can fix this problem.
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Smoelenboek</title>
<link rel="stylesheet" href="css/bootstrap-theme.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="css/default.css" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/tablesorter.js"></script>
<script id="data" type="text/javascript" src="js/search.js" xmlData="data/raetexport.xml"></script>
</head>
<body>
<STYLE TYPE="text/css">
body { background-image:url('background-alert-ipad.jpg'); }
</style>
<form class="form-horizontal">
<fieldset>
<div class="control-group">
<div id="controller">
<label class="control-label" for="searchinput"><Font color="#FFFFFF">Zoeken:</font>
<input type="text" id="term">
</label>
<div class="control-group">
<div class="controls">
<label class="control-label"><Font color="#FFFFFF">Opties:</font>
<select name="category" id="category">
<option value="none">Selecteer een optie</option>
<option value="roepnaam">Voornaam</option>
<option value="naamMedewerker">Achternaam</option>
<option value="team">Team</option>
</select>
</label>
</div>
</div>
</div>
</div>
</div>
<input name="Zoeken" type="button" id="searchButton" value="Search">
</fieldset>
</form>
<div id="result"> </div>
</body>
</html>
This was the correct fix.
Insert HTML Snippet WordPress plugin is the solution, It Adds HTML,
CSS and JavaScript code to your pages and posts easily. – user3599534
1 hour ago
Thank you.
I have a set of jquery tabs for top navigation (tabs are just text links, not "graphical" tabs). When you click a link, I want a fancybox to open containing an external html file. This is not happening. No fancy box is launching. Below is my code. Could you guys/gals let me know what I am doing wrong and how to fix? I'm having trouble figuring it out. Thanks.
Scripts:
<link rel="stylesheet" href="../css/jquery.fancybox.css" type="text/css" />
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script language="javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script language="javascript" src="../js/fancybox/jquery.fancybox.js"></script>
HTML:
<script type="text/javascript">
$(document).ready(function() {
$("#lesson-tabs").tabs();
$(".tabs-content").fancybox({
'type':'iframe',
'maxWidth' : 580,
'maxHeight' : 390,
'fitToView' : false,
'width' : 500,
'height' : 300,
'autoSize' : false
});
});
</script>
<div class="overhide" id="lesson-tabs">
<ul>
<li>
<span class="fun2learn-add" ></span>
<a href="lessons/addition1.html" class="first-class2 tabs-content" >Addition</a>
</li>
<li>
<span class="fun2learn-subtract" ></span>
Subtraction
</li>
</ul>
</div>
lessons/addition1.html code for fancybox:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Just try it!</title>
<style>
div {font-family:Arial, Helvetica, sans-serif;font-size:16px;}
.blkstyle {display:block;}
input[type=submit] {margin-top:10px;}
</style>
</head>
<body>
<div>
<p>If you have 14 apples, Justin has 12 and Mary gives you 7 more apples, but only gives Justin 3 apples, how many apples would you and Justin have altogether?</p>
<form>
<span class="blkstyle"><input type="radio" name="apples" /><label>24</label></span>
<span class="blkstyle"><input type="radio" name="apples" /><label>42</label></span>
<span class="blkstyle"><input type="radio" name="apples" /><label>36</label></span>
<span class="blkstyle"><input type="radio" name="apples" /><label>16</label></span>
<input type="submit" value="Answer" />
</form>
</div>
</body>
</html>
lessons/subtraction1.html code for fancybox:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Just try it!</title>
<style>
div {font-family:Arial, Helvetica, sans-serif;font-size:16px;}
.blkstyle {display:block;}
input[type=submit] {margin-top:10px;}
</style>
</head>
<body>
<div>
<p>Jamie has 38 lives left in play for his new video game.
He loses 6 lives on level Nine and 5 lives on level Twelve.
He hasn't gained anymore lives until level Twenty, where he gets 4 more,
but loses 1 life in play. How many lives does Jamie have left in play?</p>
<form>
<span class="blkstyle"><input type="radio" name="apples" /><label >26</label></span>
<span class="blkstyle"><input type="radio" name="apples" /><label>30</label></span>
<span class="blkstyle"><input type="radio" name="apples" /><label>22</label></span>
<span class="blkstyle"><input type="radio" name="apples" /><label>16</label></span>
<input type="submit" value="Answer" class="blkstyle"/>
</form>
</div>
</body>
</html>