Update html using jquery form - html

So here's what i'm trying to do.
A standalone html page with some jquery in it.
The jquery code has a form (with elemts to capture Marquee text, speed, color, repeat, etc)
With all the form elements captured above, i need to create a scrolling text marquee.
What i'm not able to figure out:
How can the HTMl element (div class="scroller") be updated whenever there is a change in any of the form field values ?
Below is what i have so far :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Simple jQuery scrolling function by Max Vergelli</title>
<style type="text/css">
div.scroller, #fast_scroller{
position:relative;
height:24px;
width:500px;
display:block;
overflow:hidden;
border:#CCCCCC 1px solid;
}
div.scrollingtext{
position:absolute;
white-space:nowrap;
font-family:'Trebuchet MS',Arial;
font-size:18px;
font-weight:bold;
color:#000000;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://jquerymobile.com/test/css/themes/default/jquery.mobile.css" />
<link rel="stylesheet" href="http://jquerymobile.com/test/docs/_assets/css/jqm-docs.css"/>
<script src="http://jquerymobile.com/test/js/jquery.js"></script>
<script src="http://jquerymobile.com/test/docs/_assets/js/jqm-docs.js"></script>
<script src="http://jquerymobile.com/test/js/jquery.mobile.docs.js"></script>
<script src="http://www.vegabit.com/jquery_scroller/jquery.Scroller-1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//this is the useful function to scroll a text inside an element...
function startScrolling(scroller_obj, velocity, start_from){
//bind animation to the children inside the scroller element
scroller_obj.children().bind('marquee', function(event,c) {
//text to scroll
var ob = $(this);
//scroller width
var sw = parseInt(ob.parent().width());
//text width
var tw = parseInt(ob.width());
//text left position relative to the offset parent
var tl = parseInt(ob.position().left);
//velocity converted to calculate duration
var v = velocity>0 && velocity<100 ? (100-velocity)*100 : 5000;
//same velocity for different text's length in relation with duration
var dr = (v*tw/sw)+v;
//is it scrolling from right or left?
switch(start_from){
case 'right':
//is it the first time?
if(typeof c == 'undefined'){
//if yes, start from the absolute right
ob.css({ left: sw });
sw = -tw;
}else{
//else calculate destination position
sw = tl - (tw + sw);
};
break;
default:
if(typeof c == 'undefined'){
//start from the absolute left
ob.css({ left: -tw });
}else{
//else calculate destination position
sw += tl + tw;
};
}
//attach animation to scroller element and start it by a trigger
ob.animate( {left:sw},
{ duration:dr,
easing:'linear',
complete:function(){ob.trigger('marquee');},
step:function(){
//check if scroller limits are reached
if(start_from == 'right'){
if(parseInt(ob.position().left) < -parseInt(ob.width())){
//we need to stop and restart animation
ob.stop();
ob.trigger('marquee');
};
}else{
if(parseInt(ob.position().left) > parseInt(ob.parent().width())){
ob.stop();
ob.trigger('marquee');
};
};
}
});
}).trigger('marquee');
//pause scrolling animation on mouse over
scroller_obj.mouseover(function(){
$(this).children().stop();
});
//resume scrolling animation on mouse out
scroller_obj.mouseout(function(){
$(this).children().trigger('marquee',['resume']);
});
};
//the main app starts here...
//change the cursor type for each scroller
$('.scroller').css("cursor","pointer");
//settings to pass to function
var scroller = $('.scroller'); // element(s) to scroll
var scrolling_velocity = 40; // 1-99
var scrolling_from = 'right'; // 'right' or 'left'
//call the function and start to scroll..
startScrolling( scroller, scrolling_velocity, scrolling_from );
//create a new scroller but it starts from left...
$('#fast_scroller').css("cursor","pointer");
startScrolling( $('#fast_scroller'), 75, 'left');
});
</script>
</head>
<body>
<br />
<br />
<div data-role="header" data-theme="f">
<h1>Banner Free*</h1>
</div><!-- /header -->
<div data-role="content">
<form action="#" method="get">
<div data-role="fieldcontain">
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" value="It was nice to meet you :) !!"</input>
</div>
<div data-role="fieldcontain">
<label for="slider2">Repeat:</label>
<select name="slider2" id="slider2" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>
<div data-role="fieldcontain">
<label for="slider">Text Speed:</label>
<input type="range" name="slider" id="slider" value="50" min="0" max="100" data-highlight="true" />
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Font styling:</legend>
<input type="checkbox" name="checkbox-6" id="checkbox-6" class="custom" />
<label for="checkbox-6">b</label>
<input type="checkbox" name="checkbox-7" id="checkbox-7" class="custom" />
<label for="checkbox-7"><em>i</em></label>
<input type="checkbox" name="checkbox-8" id="checkbox-8" class="custom" />
<label for="checkbox-8">u</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Color:</legend>
<input type="radio" name="radio-choice-b" id="radio-choice-c" value="on" checked="checked" />
<label for="radio-choice-c">Color1</label>
<input type="radio" name="radio-choice-b" id="radio-choice-d" value="off" />
<label for="radio-choice-d">Color2</label>
<input type="radio" name="radio-choice-b" id="radio-choice-e" value="other" />
<label for="radio-choice-e">Color3</label>
</fieldset>
</div>
<div class="ui-body ui-body-b">
<fieldset class="ui-grid-a">
<div class="ui-block-a"><button type="submit" data-theme="d">Cancel</button></div>
<div class="ui-block-b"><button type="submit" data-theme="a">Submit</button></div>
</fieldset>
</div>
</form>
</div><!-- /content -->
<div class="scroller">
<div class="scrollingtext">
this is a simple scrolling text!
</div>
</div>
<div id="fast_scroller">
<div class="scrollingtext">
this is faster!
</div>
</div>
</body>
</html>

Call this when the submit button is pressed:
$('form').find(':input').each(function(){
$(this).on('change',function(){
// Manipulate the marquee in here
if($(this).val()=='b') {
$('.marquee').css('font-weight','bold');
}
// etc...
});
});

you can use the onchange event like such:
<input onchange="updateMarquee()"/>
Here's a link for a quick tutorial:
onchange event

Related

Toggle between two different tag contents using checkbox

HTML
<body class="music">
<pre class="chord">Chords</pre>
<div class="lyric" style="display: none">Lyrics</div>
<input class="c" id="event" type="checkbox" checked data-toggle="toggle" data-size="small" width="5px" data-onstyle="info" data-offstyle="info" data-on="Chords" data-off="Lyrics">
</body>
Please help me with jquery code. By default only pre tag contents are displayed. When checkbox is checked I need to display only the contents of div tag. When box is unchecked, I want the reverse to be happened i.e. only show contents of pre tag.
So,continuing the comment earlier, here's the code that you may want to use.
$(function(){
var chord = $(".chord");
var lyric = $(".lyric");
var event = $("#event");
event.on("change", function(){
chord.toggle();
lyric.toggle();
});
})
by leveraging the data attributes in your HTML, a better way to do it is to update pre content based on checkbox selection
$(function(){
var selection = $(".selection");
var event = $("#event");
event.on("change", function(){
var content = $(this).is(":checked") ? $(this).data("on") : $(this).data("off");
selection.text(content);
});
})
<script
src="https://code.jquery.com/jquery-3.5.1.min.js">
</script>
<body class="music">
<pre class="selection">Chords</pre>
<input
class="c"
id="event"
type="checkbox"
checked data-toggle="toggle"
data-size="small"
width="5px"
data-onstyle="info"
data-offstyle="info"
data-on="Chords"
data-off="Lyrics" />
</body>
HTML:
<div id="content1">Content 1</div>
<div id="content2">Content 2</div>
<input type="checkbox" checked id="checkbox">
CSS:
#content2 {
display: none;
}
JS (using JQuery):
$(function() {
$('#checkbox').on('click', function() {
if (!$(this).is(':checked')) {
$('#content1').hide();
$('#content2').show();
} else {
$('#content1').show();
$('#content2').hide();
}
});
});
If you have any questions, ask.
you just need to toggle the displays. I replaced the pre tag with a div for spacing
function jsdisplay(){
$(".chord").eq(0).toggle();
$(".lyric").eq(0).toggle();
}
pre{
margin:0;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body class="music">
<pre class="chord">Chords</pre>
<div class="lyric" style="display: none">Lyrics</div>
<input class="c" id="event" type="checkbox" checked data-toggle="toggle" data-size="small" width="5px" data-onstyle="info" data-offstyle="info" data-on="Chords" data-off="Lyrics" onchange="jsdisplay()">
</body>

Firefox HTML5 invalid form message bubble position

I am having a simple HTML5 form field:
<input type="text" name="first" id="first" placeholder="first" required="required" value="">
If the submit is invalid (empty), the message bubble appears as expected. But when I scroll to the form field position with the mouse scroll wheel and do not change focus, the bubble stays fixed and does not scroll with the document.
In Chrome, the message bubble behaves correctly and scrolls together with the document.
A search for "html5 firefox form validation message position" or similar did not produce any useful results.
Simple HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Form Test</title>
</head>
<body style="padding-top: 800px; padding-bottom: 200px;">
<form style="margin: 0 auto;">
<input type="text" name="first" id="first" placeholder="first" required="required" value="">
<input type="submit" name="submit" value="test">
</form>
</body>
</html>
Not a complete solution. Can close each element at first time using the solution below. Look still its an Firefox open bug
if(navigator.userAgent.toLowerCase().indexOf("firefox") > -1){
$(document).ready(function(){
$( "form" ).on('mouseleave', function(event) {
var activeElement = $("*:focus");
if(activeElement){
setTimeout(function(){
var x = window.scrollX, y = window.scrollY;
activeElement.blur();
window.scrollTo(x, y);
},1000);
}
});
});
}
Updated one
if(navigator.userAgent.toLowerCase().indexOf("firefox") > -1){
$("form input").on("invalid", function(event) {
$( "form" ).on('mouseleave', function(event) {
activeElement = document.activeElement;
setTimeout(function(){
console.log(activeElement);
var x = window.scrollX, y = window.scrollY;
activeElement.blur();
activeElement.focus();
window.scrollTo(x, y);
},2000);
});
});
}

How would I add range slider mockups in bootstrap 4?

I have been playing with Bootstrap 4 for a bit. I have created a range form with a slider. I would like to add mockups (little lines or numbers on top of the slider to know what you are selecting) or even a number left or right of the slider, but I am not sure how. Here is the code:
<div class="form-group">
<label for="range">How many flags would you like?</label>
<input class="form-control-range" type="range" name="flag_number" id="range" list="range">`
</div>
I have tried using the datalist tag, but it doesn´t seem to work... How would one do it?
Bootstrap 4 real input type range will be like this
<input type="range" class="custom-range" min="0" max="5" step="0.5" id="ex6" value="0">
and add some text for the display the value with this code :
<span>Current Slider Value: <span id="ex6Val"></span></span>
finally add the javascript function (use jQuery)
$(document).ready(function(){
$('#ex6').on('change', function(e){
var id = e.target.value;
document.getElementById("ex6Val").innerHTML = id;
});
$('#ex6').change();
});
Check the snippet
$('#ex6').on('change', function(e) {
var id = e.target.value;
document.getElementById("ex6Val").innerHTML = id;
});
$('#ex6').change();
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row justify-content-center">
<div class="col">
<div class="form-group">
<input type="range" class="custom-range" min="0" max="5" step="0.5" id="ex6" value="0">
<span>Current Slider Value: <span id="ex6Val"></span></span>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<input id="ex6" type="text" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="3"/>
<span id="ex6CurrentSliderValLabel">Current Slider Value: <span id="ex6SliderVal">3</span></span>
// With JQuery
$("#ex6").slider();
$("#ex6").on("slide", function(slideEvt) {
$("#ex6SliderVal").text(slideEvt.value);
});
// Without JQuery
var slider = new Slider("#ex6");
slider.on("slide", function(sliderValue) {
document.getElementById("ex6SliderVal").textContent = sliderValue;
});

Treeview with Checkboxes simple html with Css

I am looking for a treeview format for my ipfire backup system.
where the users need to select the folders for update. like in the image-->
Exemple
the server script is CGI Perl but i can implement simple HTML and CSS or very simple JS.
I need the parent folders if checked to check automaticly the content
I don't know your HTML but if it fits this
<div class="tree">
<input type="checkbox" /> 1.
<div>
<input type="checkbox" /> 1.1.
<div>
<input type="checkbox" /> 1.1.1.
</div>
</div>
</div>
and if you use the jQuery library you could do it like that
$(document).ready(function() {
$('.tree input[type="checkbox"]').on('change', function() {
checkParent($(this));
});
function checkParent(element) {
if (element.prop('checked')) {
var parent = element.parent().parent().find('> input[type="checkbox"]');
if (parent.length) {
parent.prop('checked', true);
checkParent(parent);
}
}
}
});
$(document).ready(function() {
$('.tree input[type="checkbox"]').on('change', function() {
checkParent($(this));
});
function checkParent(element) {
if (element.prop('checked')) {
var parent = element.parent().parent().find('> input[type="checkbox"]');
if (parent.length) {
parent.prop('checked', true);
checkParent(parent);
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="tree">
<input type="checkbox" /> 1.
<div>
<input type="checkbox" /> 1.1.
<div>
<input type="checkbox" /> 1.1.1.
</div>
</div>
</div>

knockout does not change the radio button view

I have a working panel with radio buttons a label and a textfield. Everything works good except if i click on radio buttons explicitly the radio button does not change the radio button view.
Here the plnkr link to it:
https://embed.plnkr.co/auD0sMEL88EsuaQqvt7E/
As #user3297291 mention that the checked and click binding get in confict.
Add this binding:
ko.bindingHandlers.stopBubble = {
init: function(element) {
ko.utils.registerEventHandler(element, "click", function(event) {
event.cancelBubble = true;
if (event.stopPropagation) {
event.stopPropagation();
}
});
}
};
You have to add in every radio element this binding like this:
<input data-bind="checked: discountValue, stopBubble: true" id="discountArbitrary" name="discount" type="radio" value="arbitrary" />
I created one jsfiddle that works as you expected.
https://jsfiddle.net/astrapi69/s3r60uLu/
I guess the click binding is conflicting with checked binding.
You can use computeds to calculate enabled/focused flags.
You can check modified code (I've omitted focused flags in favor of simplicity):
// Code goes here
var DiscountViewModel = function() {
var self = this;
self.arbitrary = ko.observable();
self.percent = ko.observable();
self.permanent = ko.observable();
self.discountValue = ko.observable('arbitrary');
self.enableArbitrary = ko.computed(() => self.discountValue() === 'arbitrary');
self.enablePercent = ko.computed(() => self.discountValue() === 'percent');
self.enablePermanent = ko.computed(() => self.discountValue() === 'permanent');
self.onArbitrary = onArbitrary;
self.onPercent = onPercent;
self.onPermanent = onPermanent;
function onArbitrary() {
self.discountValue('arbitrary');
}
function onPercent() {
self.discountValue('percent');
}
function onPermanent() {
self.discountValue('permanent');
}
};
var vm = new DiscountViewModel();
ko.applyBindings(vm);
/* Styles go here */
.header-line {
margin-bottom:20px;
margin-top:20px;
margin-left:20px;
}
<script data-require="jquery#2.1.3" data-semver="2.1.3" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.3/js/tether.js"></script>
<link data-require="bootstrap#4.0.0-alpha.2" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" />
<script data-require="bootstrap#4.0.0-alpha.2" data-semver="4.0.0-alpha.2" src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js" type="text/javascript" defer="defer"></script>
<h1 class="header-line">
KO binding hasFocus over boolean values
</h1>
<div class="form-group row">
<div class="col-xs-1">
</div>
<div class="col-xs-1">
<input name="discount" type="radio" value="arbitrary" data-bind="checked: discountValue" />
</div>
<div class="col-xs-4">
<label for="arbitrary" data-bind="click: onArbitrary">Discount arbitrary</label>
</div>
<div class="col-xs-5">
<input type="text" class="form-control" id="arbitrary" placeholder="Enter arbitrary discount" data-bind="enable: enableArbitrary, value: arbitrary, hasFocus: enableArbitrary">
</div>
</div>
<div class="form-group row">
<div class="col-xs-1">
</div>
<div class="col-xs-1">
<input name="discount" type="radio" value="percent" data-bind="checked: discountValue" />
</div>
<div class="col-xs-4">
<label for="percent" data-bind="click: onPercent">Discount percent</label>
</div>
<div class="col-xs-5">
<input type="text" class="form-control" id="percent" placeholder="Enter percent of discount" data-bind="enable: enablePercent, value: percent, hasFocus: enablePercent">
</div>
</div>
<div class="form-group row">
<div class="col-xs-1">
</div>
<div class="col-xs-1">
<input name="discount" type="radio" value="permanent" data-bind="checked: discountValue" />
</div>
<div class="col-xs-4">
<label for="permanent" data-bind="click: onPermanent">Discount permanent</label>
</div>
<div class="col-xs-5">
<input type="text" class="form-control" id="permanent" placeholder="Enter permanent discount" data-bind="enable: enablePermanent, value: permanent, hasFocus: enablePermanent">
</div>
</div>
The problem is that by clicking the radio button, two things happen:
The checked binding does its thing
The event bubbles up to the parent element, and the click binding also does its thing.
You'll have to make sure clicking the input element stops the click binding from firing.
There's a great answer by R.P. Niemeyer here: https://stackoverflow.com/a/14321399/3297291