Update slider and textbox with year\month count using radio button - javascript

Here is my current setup.
2 radio button to select either year or month
2 sliders, one for year and another one for month
Textbox which will display value of the slider
using onclick radio function, I am displaying only one slider depends upon the year\month selection.
when I change option between year and month, I would like to update the slider and textbox value accordingly. For example, if the year slider is on year 15 and when I change radio button to month, the slider should move to 180 (15*12) and textbox should update as 180.
As of now, I am able to display\hide the slider depends on the radio selection and update the textbox with slider value. But this value is not getting converted between year and month.
How can I achieve this ?
Fiddle : https://jsfiddle.net/anoopcr/vvemxcL3/
Below is my current code:
HTML:
<div class="inputQ">
<div class="InputQuest">Loan Tenure</div>
<div><input id="tentext" class="textbox"></div>
<div class="switch-field">
<div class="switch-title"></div>
<input type="radio" id="switch_left" name="switch_2" value="yes" onclick="javascript:yesnoCheck();" checked/>
<label for="switch_left">Yr</label>
<input type="radio" id="switch_right" name="switch_2" value="no" onclick="javascript:yesnoCheck();" />
<label for="switch_right">Mo</label>
</div>
</div>
<div class="MarkWrap1" id="MarkWrap1">
<div id="tenslidery" class="tenslidery"></div>
<div class="T">0</div>
<div class="T">5</div>
<div class="T">10</div>
<div class="T">15</div>
<div class="T">20</div>
<div class="T">25</div>
<div class="T">30</div>
</div>
<div class="MarkWrap2" id="MarkWrap2">
<div id="tensliderm" class="tensliderm"></div>
<div class="Tm">0</div>
<div class="Tm">60</div>
<div class="Tm">120</div>
<div class="Tm">180</div>
<div class="Tm">240</div>
<div class="Tm">300</div>
<div class="Tm">360</div>
</div>
Jquery:
$( "#tentext" ).val( "20");
$("#tenslidery").slider({
orientation: "horizontal",
range: false,
min: 0,
max: 30 ,
value: 20,
step: .1,
animate: true,
range:'min',
slide: function( event, ui ) {
$( "#tentext" ).val( ui.value );
}
});
$("#tentext").on("keyup",function(e){
$("#tenslidery").slider("value",this.value);
});
$("#tensliderm").slider({
orientation: "horizontal",
range: false,
min: 0,
max: 360,
value: 240,
step: 1,
animate: true,
range:'min',
slide: function( event, ui ) {
$( "#tentext" ).val( ui.value );
}
});
$("#tentext").on("keyup",function(e){
$("#tensliderm").slider("value",this.value);
});
function yesnoCheck() {
if (document.getElementById('switch_left').checked) {
document.getElementById('MarkWrap1').style.display = 'flex';
document.getElementById('MarkWrap2').style.display = 'none';
}
else if (document.getElementById('switch_right').checked) {
document.getElementById('MarkWrap2').style.display = 'flex';
document.getElementById('MarkWrap1').style.display = 'none';
}
}
CSS:
.tenslidery {
height:8px;
flex-basis:100%;
margin:0 calc((100% / 7) / 2);
}
.T {
font-size: 11px;
font-family:verdana;
margin-top:15px;
flex:1;
text-align:center;
position:relative;
}
.T:before {
content:"";
position:absolute;
height:15px;
bottom:100%;
width:1px;
left:calc(50% - 1px);
background:#c5c5c5;
}
.MarkWrap1 {
width:83%; /*Adjust this to adjust the width*/
margin: auto;
display:flex;
flex-wrap:wrap;
}
.Tm {
font-size: 11px;
font-family:verdana;
margin-top:15px;
flex:1;
text-align:center;
position:relative;
}
.Tm:before {
content:"";
position:absolute;
height:15px;
bottom:100%;
width:1px;
left:calc(50% - 1px);
background:#c5c5c5;
}
.MarkWrap2 {
width:83%; /*Adjust this to adjust the width*/
margin: auto;
display:none;
flex-wrap:wrap;
}
.tensliderm {
height:8px;
flex-basis:100%;
margin:0 calc((100% / 7) / 2);
}
.switch-field {
font-family: "Lucida Grande", Tahoma, Verdana, sans-serif;
overflow: hidden;
width:auto;
}
.switch-field input {
position: absolute !important;
clip: rect(0, 0, 0, 0);
height: 1px;
width: 1px;
border: 0;
overflow: hidden;
}
.switch-field label {
float: left;
}
label[for=switch_right]
{
border:1px solid #ccc;
border-radius:4px;
border-top-left-radius:0px;
border-bottom-left-radius:0px;
}
label[for=switch_left]
{
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
}
.switch-field label {
display: inline-block;
width: 35px;
background-color: #eee;
color: black;
font-size: 18px;
font-weight: normal;
text-align: center;
text-shadow: none;
height:25.4px;
line-height:1.4;
padding:2px;
cursor: pointer;
}
.switch-field label switch-right ( background:red;)
.switch-field label:hover {
cursor: pointer;
}
.switch-field input:checked + label {
background-color: deeppink;
-webkit-box-shadow: none;
box-shadow: none;
}

I simply explicitly calculate the the values and submit to both slider and input box, should solve your problem
function yesnoCheck() {
var markWrap1 = $('#MarkWrap1');
var markWrap2 = $('#MarkWrap2');
var text = $('#tentext');
var value;
if ($('#switch_left').is(':checked')) {
markWrap1.css('display', 'flex');
markWrap2.css('display', 'none');
value = +$('#tensliderm').slider("option", "value") / 12;
text.val(String(value));
$('#tenslidery').slider('value', value);
} else if ($('#switch_right').is(':checked')) {
markWrap2.css('display', 'flex');
markWrap1.css('display', 'none');
value = +$('#tenslidery').slider("option", "value") * 12;
text.val(String(value));
$('#tensliderm').slider('value', value);
}
}
see https://jsfiddle.net/kevinkassimo/ayhenhL5/8/

Just as a tidy up and to add readability...
This will keep both sliders and the input in sync at all times, so if you need to get any current value elsewhere, it will be correct.
var yearVal;
var monthVal;
var yearSelected;
configure();
function updateVal(val) {
yearVal = yearSelected ? val : val / 12;
monthVal = yearSelected ? val * 12 : val;
}
function switchSliders() {
document.getElementById('MarkWrap1').style.display = yearSelected ? 'flex' : 'none';
document.getElementById('MarkWrap2').style.display = yearSelected ? 'none' : 'flex';
}
function updateSliders() {
$("#tenslidery").slider("value", yearVal);
$("#tensliderm").slider("value", monthVal);
}
function updateTenure() {
$("#tentext").val(yearSelected ? yearVal : monthVal);
}
function yesnoCheck() {
yearSelected = document.getElementById('switch_left').checked;
updateTenure();
switchSliders();
updateSliders();
}
function configure() {
$("#tenslidery").slider({
orientation: "horizontal",
range: false,
min: 0,
max: 30,
value: 0,
step: .1,
animate: true,
range: 'min',
slide: function (event, ui) {
updateVal(ui.value);
$("#tentext").val(ui.value);
}
});
$("#tensliderm").slider({
orientation: "horizontal",
range: false,
min: 0,
max: 360,
value: 0,
step: 1,
animate: true,
range: 'min',
slide: function (event, ui) {
updateVal(ui.value);
$("#tentext").val(ui.value);
}
});
$("#tentext").on("keyup", function (e) {
updateVal(Number(this.value));
updateSliders();
});
yearVal = 20;
monthVal = yearVal * 12;
yearSelected = true;
$("#tentext").val(yearVal);
updateSliders();
}

Related

Changing color in a radial-gradient [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 years ago.
Improve this question
I have prepared a complete example for my question -
Screenshot with a div and 3 jQuery UI sliders:
HTML code:
<div id="myCanvas"></div>
<p>Select background color:
<span id="swatch"></span>
<div id="red"></div>
<div id="green"></div>
<div id="blue"></div>
</p>
CSS code:
#myCanvas {
background: radial-gradient(#FFFFFF, #99CC99);
width: 300px;
height: 60px;
}
#red,
#green,
#blue {
width: 300px;
margin: 15px;
}
#swatch {
padding: 10px;
margin: 5px;
color: #FFF;
}
#red .ui-slider-range {
background: #ef2929;
}
#red .ui-slider-handle {
border-color: #ef2929;
}
#green .ui-slider-range {
background: #8ae234;
}
#green .ui-slider-handle {
border-color: #8ae234;
}
#blue .ui-slider-range {
background: #729fcf;
}
#blue .ui-slider-handle {
border-color: #729fcf;
}
JavaScript code:
jQuery(document).ready(function($) {
$('#selectable').selectable();
$('#kukuSlider').slider();
function hexFromRGB(r, g, b) {
var hex = [
r.toString(16),
g.toString(16),
b.toString(16)
];
$.each(hex, function(nr, val) {
if (val.length === 1) {
hex[nr] = '0' + val;
}
});
return hex.join('').toUpperCase();
}
function refreshSwatch() {
var red = $('#red').slider('value'),
green = $('#green').slider('value'),
blue = $('#blue').slider('value'),
hex = '#' + hexFromRGB(red, green, blue);
$('#swatch').text(hex);
$('#swatch').css('background-color', hex);
// why does not the following line work?
$('#myCanvas').css('background', 'radial-gradient(#FFFFFF, ' + hex + ');');
console.log('background: ' + $('#myCanvas').css('background'));
}
$('#red, #green, #blue').slider({
orientation: 'horizontal',
range: 'min',
slide: refreshSwatch,
change: refreshSwatch,
max: 255,
value: 127
});
$('#red').slider('value', 255);
$('#green').slider('value', 140);
$('#blue').slider('value', 60);
});
Problem:
The background color of #myCanvas div does not change, eventhough I call
$('#myCanvas').css('background', 'radial-gradient(#FFFFFF, ' + hex + ');');
And I have also tried calling similar code but with a colon:
$('#myCanvas').css('background: radial-gradient(#FFFFFF, ' + hex + ');');
At the same time the background color of the #swatch span changes just fine.
Simple answer: you included the ; at the end of the CSS rule. Remove it.
$('#myCanvas').css('background', 'radial-gradient(#FFFFFF, ' + hex + ')');
jQuery(document).ready(function($) {
function hexFromRGB(r, g, b) {
var hex = [
r.toString(16),
g.toString(16),
b.toString(16)
];
$.each(hex, function(nr, val) {
if (val.length === 1) {
hex[nr] = '0' + val;
}
});
return hex.join('').toUpperCase();
}
function refreshSwatch() {
var red = $('#red').slider('value'),
green = $('#green').slider('value'),
blue = $('#blue').slider('value'),
hex = '#' + hexFromRGB(red, green, blue);
$('#swatch').text(hex);
$('#swatch').css('background-color', hex);
$('#myCanvas').css('background', 'radial-gradient(#FFFFFF, ' + hex + ')');
}
$('#red, #green, #blue').slider({
orientation: 'horizontal',
range: 'min',
slide: refreshSwatch,
change: refreshSwatch,
max: 255,
value: 127
});
$('#red').slider('value', 255);
$('#green').slider('value', 140);
$('#blue').slider('value', 60);
});
#myCanvas {
background: radial-gradient(#FFFFFF, #99CC99);
width: 300px;
height: 60px;
}
#red,
#green,
#blue {
width: 300px;
margin: 15px;
}
#swatch {
padding: 10px;
margin: 5px;
color: #FFF;
}
#red .ui-slider-range {
background: #ef2929;
}
#red .ui-slider-handle {
border-color: #ef2929;
}
#green .ui-slider-range {
background: #8ae234;
}
#green .ui-slider-handle {
border-color: #8ae234;
}
#blue .ui-slider-range {
background: #729fcf;
}
#blue .ui-slider-handle {
border-color: #729fcf;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<div id="myCanvas"></div>
<p>
Select background color:
<span id="swatch"></span>
</p>
<div id="red"></div>
<div id="green"></div>
<div id="blue"></div>
Also note that you cannot have block level elements, such as div, inside inline elements, such as p.

How to add auto calculation for two inputs

I have this calculator that I'd like for the results to auto update after the the user adds input.
I've tried the .keyup thing, but I don't understand it.
I'm kinda new to javascript.
Here's my codepen for the project.
http://codepen.io/Tristangre97/pen/zNvQON?editors=0010
HTML
<div class="card">
<div class="title">Input</div>
<br>
<div id="metalSpan"><input class="whiteinput" id="numMetal" type="number">
<div class="floater">Metal Quantity</div>
<div id="metalAlert">
</div>
</div>
<br>
<div id="forgeSpan"><input class="whiteinput" id="numForge" type=
"number">
<div class="floater">Forge Quantity</div></div>
<br>
<input checked id="rb1" name="fuel" type="radio" value="spark"> <label for=
"rb1">Sparkpowder</label> <input id="rb2" name="fuel" type="radio" value=
"wood"> <label for="rb2">Wood</label><br>
<br>
<button class="actionButton" id="submit" type="button">Calculate</button></div>
<div id="forgeAlert">
</div>
<div id="radioSpan">
<div class="floater">
</div>
<div class="card">
<div class="title2">Results</div>
<br>
<div id="result"><span id="spreadMetal"></span> metal <span class=
"plural"></span> forge<br>
<span id="spreadSpark"></span> <span id="fuelType"></span> <span class=
"plural"></span> forge <span id="allSpark"></span><br>
Completion Time: <span id="timeSpark"></span> minutes<br></div>
</div>
</div>
JS
var metals = 0;
var ingots = 0;
var forges = 0;
var spread = 0;
var sparks = 0;
var tSpark = 0;
var isWood = false;
$(document).ready(function() {
$("#result").hide();
$("#alert").hide();
$("#submit").click(function() {
metals = $("#numMetal").val();
forges = $("#numForge").val();
if (metals == 0 || metals == '') {
$("#metalAlert").html("Please enter a value");
}
else if (forges == 0 || forges == '') {
$("#metalAlert").html('');
$("#forgeAlert").html("Please enter a value");
}
else {
if ($("input[name=fuel]:checked").val() == "wood") {
isWood = true;
}
else {
isWood = false;
}
if (forges > 1) {
$(".plural").html("per");
}
else {
$(".plural").html("in the");
}
$("#forgeAlert").html('');
if (metals % 2 == 0) {}
else {
metals = metals - 1;
$("#alert").show();
}
ingots = metals / 2;
spread = Math.floor(metals / forges);
sparks = Math.ceil(((spread / 2) * 20) / 60);
if (isWood) {
sparks = sparks * 2;
}
tSpark = sparks * forges;
if (forges > 1) {
$("#allSpark").html(String("(" + tSpark + " total)"));
}
else {
$("#allSpark").html(String(''));
}
$("#timeSpark").html(String((isWood) ? (sparks / 2) : sparks));
$("#spreadMetal").html(String(spread));
$("#spreadSpark").html(String(sparks));
$("#fuelType").html((isWood) ? "wood" : "sparkpowder");
$("#result").show();
}
});
});
To run the function whenever something is inputted in the field, try the
$("input").on('input', function() { .. });
var metals = 0;
var ingots = 0;
var forges = 0;
var spread = 0;
var sparks = 0;
var tSpark = 0;
var isWood = false;
$(document).ready(function() {
$("#result").hide();
$("#alert").hide();
$("input").on('input', function() {
metals = $("#numMetal").val();
forges = $("#numForge").val();
if (metals == 0 || metals == "") {
$("#metalAlert").html("Please enter a value");
} else if (forges == 0 || forges == "") {
$("#metalAlert").html("");
$("#forgeAlert").html("Please enter a value");
} else {
if ($("input[name=fuel]:checked").val() == "wood") {
isWood = true;
} else {
isWood = false;
}
if (forges > 1) {
$(".plural").html("per");
} else {
$(".plural").html("in the");
}
$("#forgeAlert").html("");
if (metals % 2 == 0) {
} else {
metals = metals - 1;
$("#alert").show();
}
ingots = metals / 2;
spread = Math.floor(metals / forges);
sparks = Math.ceil(spread / 2 * 20 / 60);
if (isWood) {
sparks = sparks * 2;
}
tSpark = sparks * forges;
if (forges > 1) {
$("#allSpark").html(String("(" + tSpark + " total)"));
} else {
$("#allSpark").html(String(""));
}
$("#timeSpark").html(String(isWood ? sparks / 2 : sparks));
$("#spreadMetal").html(String(spread));
$("#spreadSpark").html(String(sparks));
$("#fuelType").html(isWood ? "wood" : "sparkpowder");
$("#result").show();
}
});
});
body {
background-color:#316b6f;
font-family:Helvetica,sans-serif;
font-size:16px;
}
.whiteinput {
outline: none;
border-width: 0px;
margin: 0;
padding: .5em .6em;
border-radius: 2px;
font-size: 1em;
color: #316b6f;
}
.actionButton {
background-color: #316B6F;
color: #fff;
padding: .5em .6em;
border-radius: 3px;
border-width: 0px;
font-size: 1em;
cursor: pointer;
text-decoration: none;
-webkit-transition: all 250ms;
transition: all 250ms;
}
.actionButton:hover {
color: #fff;
}
.actionButton:active {
background: #BBFF77;
color: #316B6F;
-webkit-transition: all 550ms;
transition: all 550ms;
}
.card {
position: relative;
background: #4E8083;
color:#FFFFFF;
border-radius:3px;
padding:1.5em;
margin-bottom: 3px;
}
.title {
background: #76B167;
padding: 3px;
border-radius: 3px 0px 0px 0px;
position: absolute;
left: 0;
top: 0;
margin-bottom: 5px;
}
.title2 {
background: #2F3A54;
padding: 3px;
border-radius: 3px 0px 0px 0px;
position: absolute;
left: 0;
top: 0;
margin-bottom: 5px;
}
.floater {
padding: 3px;
}
.radiobtn {
background: red;
border-radius: 2px;
}
input[type=radio] + label:before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
vertical-align:middle;
margin-right: 8px;
background-color: #aaa;
margin-bottom: 6px;
border-radius: 2px;
-webkit-transition: all 450ms;
transition: all 450ms;
}
input[type=radio], input[type=checkbox] {
display:none;
}
input[type=radio]:checked + label:before {
content: "\2022"; /* Bullet */
color:white;
background-color: #fff;
font-size:1.8em;
text-align:center;
line-height:14px;
margin-right: 8px;
}
input[type=checkbox]:checked + label:before {
content:"\2714";
color:white;
background-color: #fff;
text-align:center;
line-height:15px;
}
*:focus {
outline: none;
}
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<div class="card">
<div class="title">Input</div><br>
<div id="metalSpan">
<input class="whiteinput" id="numMetal" type="number">
<div class="floater">
Metal Quantity
</div>
<div id="metalAlert">
</div>
</div>
<br>
<div id="forgeSpan">
<input class="whiteinput" id="numForge" type="number">
<div class="floater">
Forge Quantity
</div>
</div>
<br>
<input type="radio" id="rb1" name="fuel" value="spark" checked>
<label for="rb1">Sparkpowder</label>
<input type="radio" id="rb2" name="fuel" value="wood">
<label for="rb2">Wood</label><br><br>
<button class="actionButton" id="submit"
type="button">Calculate</button>
</div>
<div id="forgeAlert">
</div>
<div id="radioSpan">
<div class="floater">
</div>
<div class="card">
<div class="title2">Results</div><br>
<div id="result">
<span id="spreadMetal"></span> metal <span class="plural"></span> forge<br>
<span id="spreadSpark"></span> <span id="fuelType"></span> <span class="plural"></span> forge <span id=
"allSpark"></span><br>
Completion Time: <span id="timeSpark"></span> minutes<br>
</div>
</div>
</div>
Codepen
It is triggering your errors because that is part of your function.
More info regarding the input method.
Look, you have two options:
Put all your algorithm of submit click into a function and call him into two binds: the submit click and input change (on('change')) or just remove your calculate button and rely the calculation into onchange of the inputs: each change of checks or inputs will trigger the calculation of metals. The second approach it's more interesting for me and removes the necessity to the user clicks to calculate (he already clicked into inputs and checks). Obviously you can add a filter to only allow to calculation function run after a certain minimum number of data filled, it's a good idea to avoid poor results resulted by lack of data.
In order to auto update calculation, we have to listen to users input on input elements. The easiest approach with minimum changes to existing code is to add input events and emit click on the button:
$("#numMetal, #numForge").on('input', function(){
$("#submit").click()
})
Better approach is to move calculation logic to separate function and call it on desirable events:
$("#numMetal, #numForge").on('input', function(){
calculate()
})
$("#submit").click(function(){
calculate()
})
This will keep the code structured and easier to follow.
Try this:
$( "#numMetal, #numForge" ).keyup(function(event) {
console.log('a key has been pressed');
// add code to handle inputs here
});
What happens here is that an event listener - the key up event - is bound to the two inputs you have on your page. When that happens the code inside will be run.
As suggested in other comments it would be a good idea to call a separate method with all the input processing code you have in the submit call, this way you will avoid code duplication.
You will also want to bind events to the checkboxs. This can be achieved with this:
$( "input[name=fuel]" ).on('change',function() {
console.log('checkbox change');
// call processing method here
});

how to set jquery slider on auto instead of click or hover on thumbs

i am new learner of jquery and javaScript.
i want to create a slider with a big image section and a section of thumbs.
slider should slide automatically i have coded so far is working on click or hover but i dont know how to set it on auto please help me how to modify my code. code and slider screen shoot is given below.
slider image
$("document").ready(function()
{
$("#thumbs a").mouseenter(function()
{
var smallimgpath = $(this).attr("href");
$("#bigimage img").fadeOut(function()
{
$("#bigimage img").attr("src",smallimgpath);
$("#bigimage img").fadeIn();
});
return false;
});
});
</script>
#imagereplacement{
border: 1px solid red;
width:98%;
height:400px;
margin:auto;
padding-top:8px;
padding-left:10px;
}
#imagereplacement p{
text-align:inline;
}
#bigimage{
/* border: 1px solid green; */
margin:auto;
text-align:center;
float: left;
}
#thumbs{
/*border: 1px solid yellow;*/
margin: 110px 10px;
text-align:center;
width:29%;
float: right;
}
#thumbs img{
height:100px;
width:100px;
}
//This is where all the JQuery code will go
</head>
<body>
<div id="imagereplacement">
<p id="bigimage">
<img src="images/slider1.jpg">
</p>
<p id="thumbs">
<img src="images/slider1.jpg">
<img src="images/slider2.jpg">
<img src="images/slider3.jpg">
</p>
try with this example, please let me know in case of any more question from you :
$("document").ready(function(){
var pages = $('#container li'),
current = 0;
var currentPage, nextPage;
var timeoutID;
var buttonClicked = 0;
var handler1 = function() {
buttonClicked = 1;
$('#container .button').unbind('click');
currentPage = pages.eq(current);
if ($(this).hasClass('prevButton')) {
if (current <= 0)
current = pages.length - 1;
else
current = current - 1;
nextPage = pages.eq(current);
nextPage.css("marginLeft", -604);
nextPage.show();
nextPage.animate({
marginLeft: 0
}, 800, function() {
currentPage.hide();
});
currentPage.animate({
marginLeft: 604
}, 800, function() {
$('#container .button').bind('click', handler1);
});
} else {
if (current >= pages.length - 1)
current = 0;
else
current = current + 1;
nextPage = pages.eq(current);
nextPage.css("marginLeft", 604);
nextPage.show();
nextPage.animate({
marginLeft: 0
}, 800, function() {});
currentPage.animate({
marginLeft: -604
}, 800, function() {
currentPage.hide();
$('#container .button').bind('click', handler1);
});
}
}
var handler2 = function() {
if (buttonClicked == 0) {
$('#container .button').unbind('click');
currentPage = pages.eq(current);
if (current >= pages.length - 1)
current = 0;
else
current = current + 1;
nextPage = pages.eq(current);
nextPage.css("marginLeft", 604);
nextPage.show();
nextPage.animate({
marginLeft: 0
}, 800, function() {});
currentPage.animate({
marginLeft: -604
}, 800, function() {
currentPage.hide();
$('#container .button').bind('click', handler1);
});
timeoutID = setTimeout(function() {
handler2();
}, 4000);
}
}
$('#container .button').click(function() {
clearTimeout(timeoutID);
handler1();
});
timeoutID = setTimeout(function() {
handler2();
}, 4000);
});
* {
margin: 0;
padding: 0;
}
#container {
width: 604px;
height: 453px;
position: relative;
}
#container .prevButton {
height: 72px;
width: 68px;
position: absolute;
background: url('http://vietlandsoft.com/images/buttons.png') no-repeat;
top: 50%;
margin-top: -36px;
cursor: pointer;
z-index: 2000;
background-position: left top;
left: 0
}
#container .prevButton:hover {
background-position: left bottom;
left: 0;
}
#container .nextButton {
height: 72px;
width: 68px;
position: absolute;
background: url('http://vietlandsoft.com/images/buttons.png') no-repeat;
top: 50%;
margin-top: -36px;
cursor: pointer;
z-index: 2000;
background-position: right top;
right: 0
}
#container .nextButton:hover {
background-position: right bottom;
right: 0;
}
#container ul {
width: 604px;
height: 453px;
list-style: none outside none;
position: relative;
overflow: hidden;
}
#container li:first-child {
display: list-item;
position: absolute;
}
#container li {
position: absolute;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<center>
<h1>HTML Slideshow AutoPlay (Slide Left/Slide Right)</h1>
<br />
<br />
<div id="container">
<ul>
<li><img src="http://vietlandsoft.com/images/picture1.jpg" width="604" height="453" /></li>
<li><img src="http://vietlandsoft.com/images/picture2.jpg" width="604" height="453" /></li>
<li><img src="http://vietlandsoft.com/images/picture3.jpg" width="604" height="453" /></li>
</ul>
<span class="button prevButton"></span>
<span class="button nextButton"></span>
</div>
</center>
Here an example i've created that create an auto slider CodePen Demo and JSFiddle Demo
I've used an object literal pattern to create slide variable just to avoid creating many global function and variable. Inside document.ready i've initialised my slider just by calling slide.init({....}) this way it makes it easy to reuse and work like plugin.
$.extend(slide.config,option)
this code in simple words override you're default configuration defined in config key
as i mentioned in my above comment make a function slider() and place seTimeout(slide,1000) at bottom of your function before closing
Here in this code its done in animate key of slide object it is passed with two parameter cnt and all image array, If cnt is greater then image array length then cnt is set to 0 i.e if at first when cnt keeps on increment i fadeout all image so when i make it 0 the next time the fadeToggle acts as switch
if On then Off
if Off the On
and calling function slider after a delay makes it a recursive call its just one way for continuously looping there are many other ways i guess for looping continuous you can try
well i haven't check if all images Loaded or not which is most important in slider well that you could try on your own.
var slide = {
'config': {
'container': $('#slideX'),
'delay': 3000,
'fade': 'fast',
'easing': 'linear'
},
init: function(option) {
$.extend(slide.config, option);
var imag = slide.getImages();
slide.animate(0, imag);
},
animate: function(cnt, imag) {
if (cnt >= imag.length) {
cnt = 0;
}
imag.eq(cnt).fadeToggle(slide.config.fade, slide.config.easing);
setTimeout(function() {
slide.animate(++cnt, imag);
}, slide.config.delay);
},
getImages: function() {
return slide.config.container.find('img');
}
};
$(document).ready(function() {
slide.init({
'contianer': $('#slideX'),
'delay': 3000,
'fade': 'fast',
'easing': 'swing'
});
})
body {
margin: 0;
padding: 0;
}
.contianer {
width: 100%;
height: 100%;
position: relative;
}
.container > div,
.container > div >img {
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" id="slideX">
<div id="img1">
<img src="http://imgs.abduzeedo.com/files/articles/magical-animal-photography-gregory-colbert/5.jpg" />
</div>
<div id="img2">
<img src="http://cdn-5.webdesignmash.com/trial/wp-content/uploads/2010/10/great-dog-photography-016.jpg" />
</div>
<div id="img3">
<img src="http://onlybackground.com/wp-content/uploads/2014/01/marble-beautiful-photography-1920x1200.jpg" />
</div>
</div>

How can I use fullcalendar.io as a type="date" picker?

Fullcalendar.io is quickly becoming the top-choice library for calendar applications. Is it possible to use it as a <input type="date"> picker? Something like the jQuery UI "Datepicker"?
I'd like to have something like...
<form>
<input type="date">
</form>
<script type="text/javascript">
$('input[type=date]').fullCalendar()
</script>
I was able to get something like I wanted with the following,
$(document).ready(function() {
$('#foo').click( function () {
var $input = $(this);
alert('bar');
console.log({sibs: $input.siblings().length });
if ( $input.siblings('.minical').length == 0 ) {
var $cal = $("<div>", {class:"minical"});
$input.parent().append($cal);
$cal.fullCalendar({
theme: true,
aspectRatio:1,
dayRender: function ( date, cell ) {
$(cell).parent().parent().addClass('hello');
},
header: {
left: 'prevYear,prev,today',
center: 'title',
right: 'next,nextYear'
},
dayClick: function ( date, jsEvent, view ) {
$input.val( date.format() );
$cal.remove();
},
contentHeight: 'auto',
defaultView: 'month',
editable: false,
});
}
});
});
And, css
.minical {
width:200px;
border: 1px solid black;
font-size:8px;
}
.minical .fc-row {
min-height:20px !important;
height:10px;
margin:0;
padding:0 !important;
}
.minical h2 {
font-size: .8em;
text-align: center;
}
.minical button { padding: 0; margin:0; }
.minical .fc-past { color:lightgray }
.minical .fc-day-number { font-size: .8em }
.minical .fc-day-header { font-size: .9em }
Find an example here

Event Handlers On Newly Created Elements

I have a web app with a number of textareas and the ability to add more if you wish.
When you shift focus from one textarea to another, the one in focus animates to a larger size, and the rest shrink down.
When the page loads it handles the animation perfectly for the initial four boxes in the html file, but when you click on the button to add more textareas the animation fails to accomodate these new elements... that is, unless you place the initial queries in a function, and call that function from the addelement function tied to the button.
But!, when you do this it queries as many times as you add a new element. So, if you quickly add, say 10, new textareas, the next time you lay focus on any textarea the query runs 10 times.
Is the issue in my design, or jQueries implementation? If the former, how better can I design it, if it is the latter, how can I work around it?
I've tried to chop the code down to the relevant bits... I've tried everything from focus and blur, to keypresses, the latest is on click.
html::
<html>
<head>
<link rel="stylesheet" type="text/css" href="./sty/sty.css" />
<script src="./jquery.js"></script>
<script>
$().ready(function() {
var $scrollingDiv = $("#scrollingDiv");
$(window).scroll(function(){
$scrollingDiv
.stop()
//.animate({"marginTop": ($(window).scrollTop() + 30) + "px"}, "slow" );
.animate({"marginTop": ($(window).scrollTop() + 30) + "px"}, "fast" );
});
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>boxdforstacks</title>
</head>
<body>
<div class="grid">
<div class="col-left" id="left">
<div class="module" id="scrollingDiv">
<input type="button" value="add" onclick="addele()" />
<input type="button" value="rem" onclick="remele()" />
<p class="display">The value of the text input is: </p>
</div>
</div> <!--div class="col-left"-->
<div class="col-midd">
<div class="module" id="top">
<p>boxa</p>
<textarea class="tecksd" placeholder="begin typing here..." id="boxa" ></textarea>
<p>boxb</p>
<textarea class="tecksd" placeholder="begin typing here..." id="boxb"></textarea>
<p>boxc</p>
<textarea class="tecksd" placeholder="begin typing here..." id="boxc"></textarea>
<p>boxd</p>
<textarea class="tecksd" placeholder="begin typing here..." id="boxd"></textarea>
</div>
</div> <!--div class="col-midd"-->
</div> <!--div class="grid"-->
</body>
</html>
<script type="text/javascript" src="boxd.js"></script>
js:
function onit(){
$('textarea').on('keyup change', function() {
$('p.display').text('The value of the text input is: ' + $(this).val());
});
}
$('textarea').on("click",function(){
//alert(this.id.substring(0,3));
if ( this.id.substring(0,3) == 'box' ){
$('textarea').animate({ height: "51" }, 1000);
$(this).animate({ height: "409" }, 1000);
} else {
$('textarea').animate({ height: "51" }, 1000);
}
}
);
var boxfoc="";
var olebox="";
var numb = 0;
onit();
function addele() {
var tops = document.getElementById('top');
var num = numb + 1;
var romu = romanise(num);
var newbox = document.createElement('textarea');
var newboxid = 'box'+num;
newbox.setAttribute('id',newboxid);
newbox.setAttribute('class','tecksd');
newbox.setAttribute('placeholder','('+romu+')');
tops.appendChild(newbox);
numb = num;
onit();
} //addele(), add element
function remele(){
var tops = document.getElementById('top');
var boxdone = document.getElementById(boxfoc);
tops.removeChild(boxdone);
} // remele(), remove element
function romanise (num) {
if (!+num)
return false;
var digits = String(+num).split(""),
key = ["","c","cc","ccc","cd","d","dc","dcc","dccc","cm",
"","x","xx","xxx","xl","l","lx","lxx","lxxx","xc",
"","i","ii","iii","iv","v","vi","vii","viii","ix"],
roman = "",
i = 3;
while (i--)
roman = (key[+digits.pop() + (i * 10)] || "") + roman;
return Array(+digits.join("") + 1).join("M") + roman;
} // romanise(), turn numbers into roman numerals
css :
.tecksd {
width: 97%;
height: 51;
resize: none;
outline: none;
border: none;
font-family: "Lucida Console", Monaco, monospace;
font-weight: 100;
font-size: 70%;
background: white;
/* box-shadow: 1px 2px 7px 1px #0044FF;*/
}
.tecksded {
width: 97%;
resize: none;
outline: none;
border: none;
overflow: auto;
position: relative;
font-family: "Lucida Console", Monaco, monospace;
font-weight: 100;
font-size: 70%;
background: white;
/* box-shadow: 1px 2px 7px #FFDD00;*/
}
/*#postcomp {
width: 500px;
}*/
* {
#include box-sizing(border-box);
}
$pad: 20px;
.grid {
background: white;
margin: 0 0 $pad 0;
&:after {
/* Or #extend clearfix */
content: "";
display: table;
clear: both;
}
}
[class*='col-'] {
float: left;
padding-right: $pad;
.grid &:last-of-type {
padding-right: 0;
}
}
.col-left {
width: 13%;
}
.col-midd {
width: 43%;
}
.col-rght {
width: 43%;
}
.module {
padding: $pad;
}
/* Opt-in outside padding */
.grid-pad {
padding: $pad 0 $pad $pad;
[class*='col-']:last-of-type {
padding-right: $pad;
}
}
body {
padding: 10px 50px 200px;
background: #FFFFFF;
background-image: url('./backgrid.png');
}
h1 {
color: black;
font-size: 11px;
font-family: "Lucida Console", Monaco, monospace;
font-weight: 100;
}
p {
color: white;
font-size: 11px;
font-family: "Lucida Console", Monaco, monospace;
font-weight: 100;
}
You should use the following:
// New way (jQuery 1.7+) - .on(events, selector, handler)
$(document).on("click", "textarea", function () {
event.preventDefault();
alert('testlink');
});
Since the textarea is added dynamically, you need to use event delegation to register the event handler.
Try
$(document).on('click', 'textarea', function() {
// do something
});
The issue is you are binding the textareas only on the page load. I made a JSFiddle with working code: http://jsfiddle.net/VpABC/
Here's what I changed:
I wrapped:
$('textarea').on("click", function () {
//alert(this.id.substring(0,3));
if (this.id.substring(0, 3) == 'box') {
$('textarea').animate({
height: "51"
}, 1000);
$(this).animate({
height: "409"
}, 1000);
} else {
$('textarea').animate({
height: "51"
}, 1000);
}
});
in a function so it looked like this:
function bindTextAreas() {
$('textarea').unbind("click");
$('textarea').on("click", function () {
//alert(this.id.substring(0,3));
if (this.id.substring(0, 3) == 'box') {
$('textarea').animate({
height: "51"
}, 1000);
$(this).animate({
height: "409"
}, 1000);
} else {
$('textarea').animate({
height: "51"
}, 1000);
}
});
}
bindTextAreas();
What this does is it allows you to call this function, bindTextAreas, whenever you create a new textarea. This will unbind all the current events than rebind them. This will make it so your new textarea is has the click handler setup.
An place where this function is called is in the addele function like this:
function addele() {
var tops = document.getElementById('top');
var num = numb + 1;
var romu = romanise(num);
var newbox = document.createElement('textarea');
var newboxid = 'box' + num;
newbox.setAttribute('id', newboxid);
newbox.setAttribute('class', 'tecksd');
newbox.setAttribute('placeholder', '(' + romu + ')');
tops.appendChild(newbox);
numb = num;
onit();
bindTextAreas();
} //addele(), add element
Notice the bindTextAreas(); line near the bottom. This reloads all the click handlers.

Categories

Resources