We Keep Coding

Ticker-style getting cut in Mobile View

The requirement is to sow the information continuously hence opted for a ticker style.
Now I am using an [ticker-style.css] along with [jquery.ticker.js]
It works fine in a Full Screen however while browsing in a Mobile/Tabler - the text is getting cut (see below screenshot) - I tried to play around the width however the rendering was not as expected.
Can you help here.
Thanks in advance.
/*
jQuery News Ticker is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, version 2 of the License.
jQuery News Ticker is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with jQuery News Ticker. If not, see <http://www.gnu.org/licenses/>.
*/
(function($){
$.fn.ticker = function(options) {
// Extend our default options with those provided.
// Note that the first arg to extend is an empty object -
// this is to keep from overriding our "defaults" object.
var opts = $.extend({}, $.fn.ticker.defaults, options);
// check that the passed element is actually in the DOM
if ($(this).length == 0) {
if (window.console && window.console.log) {
window.console.log('Element does not exist in DOM!');
}
else {
alert('Element does not exist in DOM!');
}
return false;
}
/* Get the id of the UL to get our news content from */
var newsID = '#' + $(this).attr('id');
/* Get the tag type - we will check this later to makde sure it is a UL tag */
var tagType = $(this).get(0).tagName;
return this.each(function() {
// get a unique id for this ticker
var uniqID = getUniqID();
/* Internal vars */
var settings = {
position: 0,
time: 0,
distance: 0,
newsArr: {},
play: true,
paused: false,
contentLoaded: false,
dom: {
contentID: '#ticker-content-' + uniqID,
titleID: '#ticker-title-' + uniqID,
titleElem: '#ticker-title-' + uniqID + ' SPAN',
tickerID : '#ticker-' + uniqID,
wrapperID: '#ticker-wrapper-' + uniqID,
revealID: '#ticker-swipe-' + uniqID,
revealElem: '#ticker-swipe-' + uniqID + ' SPAN',
controlsID: '#ticker-controls-' + uniqID,
prevID: '#prev-' + uniqID,
nextID: '#next-' + uniqID,
playPauseID: '#play-pause-' + uniqID
}
};
// if we are not using a UL, display an error message and stop any further execution
if (tagType != 'UL' && tagType != 'OL' && opts.htmlFeed === true) {
debugError('Cannot use <' + tagType.toLowerCase() + '> type of element for this plugin - must of type <ul> or <ol>');
return false;
}
// set the ticker direction
opts.direction == 'rtl' ? opts.direction = 'right' : opts.direction = 'left';
// lets go...
initialisePage();
/* Function to get the size of an Object*/
function countSize(obj) {
var size = 0, key;
for (key in obj) {
if (obj.hasOwnProperty(key)) size++;
}
return size;
};
function getUniqID() {
var newDate = new Date;
return newDate.getTime();
}
/* Function for handling debug and error messages */
function debugError(obj) {
if (opts.debugMode) {
if (window.console && window.console.log) {
window.console.log(obj);
}
else {
alert(obj);
}
}
}
/* Function to setup the page */
function initialisePage() {
// process the content for this ticker
processContent();
// add our HTML structure for the ticker to the DOM
$(newsID).wrap('<div id="' + settings.dom.wrapperID.replace('#', '') + '"></div>');
// remove any current content inside this ticker
$(settings.dom.wrapperID).children().remove();
$(settings.dom.wrapperID).append('<div id="' + settings.dom.tickerID.replace('#', '') + '" class="ticker"><div id="' + settings.dom.titleID.replace('#', '') + '" class="ticker-title"><span><!-- --></span></div><p id="' + settings.dom.contentID.replace('#', '') + '" class="ticker-content"></p><div id="' + settings.dom.revealID.replace('#', '') + '" class="ticker-swipe"><span><!-- --></span></div></div>');
$(settings.dom.wrapperID).removeClass('no-js').addClass('ticker-wrapper has-js ' + opts.direction);
// hide the ticker
$(settings.dom.tickerElem + ',' + settings.dom.contentID).hide();
// add the controls to the DOM if required
if (opts.controls) {
// add related events - set functions to run on given event
$(settings.dom.controlsID).on('click mouseover mousedown mouseout mouseup', function (e) {
var button = e.target.id;
if (e.type == 'click') {
switch (button) {
case settings.dom.prevID.replace('#', ''):
// show previous item
settings.paused = true;
$(settings.dom.playPauseID).addClass('paused');
manualChangeContent('prev');
break;
case settings.dom.nextID.replace('#', ''):
// show next item
settings.paused = true;
$(settings.dom.playPauseID).addClass('paused');
manualChangeContent('next');
break;
case settings.dom.playPauseID.replace('#', ''):
// play or pause the ticker
if (settings.play == true) {
settings.paused = true;
$(settings.dom.playPauseID).addClass('paused');
pauseTicker();
}
else {
settings.paused = false;
$(settings.dom.playPauseID).removeClass('paused');
restartTicker();
}
break;
}
}
else if (e.type == 'mouseover' && $('#' + button).hasClass('controls')) {
$('#' + button).addClass('over');
}
else if (e.type == 'mousedown' && $('#' + button).hasClass('controls')) {
$('#' + button).addClass('down');
}
else if (e.type == 'mouseup' && $('#' + button).hasClass('controls')) {
$('#' + button).removeClass('down');
}
else if (e.type == 'mouseout' && $('#' + button).hasClass('controls')) {
$('#' + button).removeClass('over');
}
});
// add controls HTML to DOM
$(settings.dom.wrapperID).append('<ul id="' + settings.dom.controlsID.replace('#', '') + '" class="ticker-controls"><li id="' + settings.dom.playPauseID.replace('#', '') + '" class="jnt-play-pause controls"><!-- --></li><li id="' + settings.dom.prevID.replace('#', '') + '" class="jnt-prev controls"><!-- --></li><li id="' + settings.dom.nextID.replace('#', '') + '" class="jnt-next controls"><!-- --></li></ul>');
}
if (opts.displayType != 'fade') {
// add mouse over on the content
$(settings.dom.contentID).mouseover(function () {
if (settings.paused == false) {
pauseTicker();
}
}).mouseout(function () {
if (settings.paused == false) {
restartTicker();
}
});
}
// we may have to wait for the ajax call to finish here
if (!opts.ajaxFeed) {
setupContentAndTriggerDisplay();
}
}
/* Start to process the content for this ticker */
function processContent() {
// check to see if we need to load content
if (settings.contentLoaded == false) {
// construct content
if (opts.ajaxFeed) {
if (opts.feedType == 'xml') {
$.ajax({
url: opts.feedUrl,
cache: false,
dataType: opts.feedType,
async: true,
success: function(data){
count = 0;
// get the 'root' node
for (var a = 0; a < data.childNodes.length; a++) {
if (data.childNodes[a].nodeName == 'rss') {
xmlContent = data.childNodes[a];
}
}
// find the channel node
for (var i = 0; i < xmlContent.childNodes.length; i++) {
if (xmlContent.childNodes[i].nodeName == 'channel') {
xmlChannel = xmlContent.childNodes[i];
}
}
// for each item create a link and add the article title as the link text
for (var x = 0; x < xmlChannel.childNodes.length; x++) {
if (xmlChannel.childNodes[x].nodeName == 'item') {
xmlItems = xmlChannel.childNodes[x];
var title, link = false;
for (var y = 0; y < xmlItems.childNodes.length; y++) {
if (xmlItems.childNodes[y].nodeName == 'title') {
title = xmlItems.childNodes[y].lastChild.nodeValue;
}
else if (xmlItems.childNodes[y].nodeName == 'link') {
link = xmlItems.childNodes[y].lastChild.nodeValue;
}
if ((title !== false && title != '') && link !== false) {
settings.newsArr['item-' + count] = { type: opts.titleText, content: '' + title + '' }; count++; title = false; link = false;
}
}
}
}
// quick check here to see if we actually have any content - log error if not
if (countSize(settings.newsArr < 1)) {
debugError('Couldn\'t find any content from the XML feed for the ticker to use!');
return false;
}
settings.contentLoaded = true;
setupContentAndTriggerDisplay();
}
});
}
else {
debugError('Code Me!');
}
}
else if (opts.htmlFeed) {
if($(newsID + ' LI').length > 0) {
$(newsID + ' LI').each(function (i) {
// maybe this could be one whole object and not an array of objects?
settings.newsArr['item-' + i] = { type: opts.titleText, content: $(this).html()};
});
}
else {
debugError('Couldn\'t find HTML any content for the ticker to use!');
return false;
}
}
else {
debugError('The ticker is set to not use any types of content! Check the settings for the ticker.');
return false;
}
}
}
function setupContentAndTriggerDisplay() {
settings.contentLoaded = true;
// update the ticker content with the correct item
// insert news content into DOM
$(settings.dom.titleElem).html(settings.newsArr['item-' + settings.position].type);
$(settings.dom.contentID).html(settings.newsArr['item-' + settings.position].content);
// set the next content item to be used - loop round if we are at the end of the content
if (settings.position == (countSize(settings.newsArr) -1)) {
settings.position = 0;
}
else {
settings.position++;
}
// get the values of content and set the time of the reveal (so all reveals have the same speed regardless of content size)
distance = $(settings.dom.contentID).width();
time = distance / opts.speed;
// start the ticker animation
revealContent();
}
// slide back cover or fade in content
function revealContent() {
$(settings.dom.contentID).css('opacity', '1');
if(settings.play) {
// get the width of the title element to offset the content and reveal
var offset = $(settings.dom.titleID).width() + 20;
$(settings.dom.revealID).css(opts.direction, offset + 'px');
// show the reveal element and start the animation
if (opts.displayType == 'fade') {
// fade in effect ticker
$(settings.dom.revealID).hide(0, function () {
$(settings.dom.contentID).css(opts.direction, offset + 'px').fadeIn(opts.fadeInSpeed, postReveal);
});
}
else if (opts.displayType == 'scroll') {
// to code
}
else {
// default bbc scroll effect
$(settings.dom.revealElem).show(0, function () {
$(settings.dom.contentID).css(opts.direction, offset + 'px').show();
// set our animation direction
animationAction = opts.direction == 'right' ? { marginRight: distance + 'px'} : { marginLeft: distance + 'px' };
$(settings.dom.revealID).css('margin-' + opts.direction, '0px').delay(20).animate(animationAction, time, 'linear', postReveal);
});
}
}
else {
return false;
}
};
// here we hide the current content and reset the ticker elements to a default state ready for the next ticker item
function postReveal() {
if(settings.play) {
// we have to separately fade the content out here to get around an IE bug - needs further investigation
$(settings.dom.contentID).delay(opts.pauseOnItems).fadeOut(opts.fadeOutSpeed);
// deal with the rest of the content, prepare the DOM and trigger the next ticker
if (opts.displayType == 'fade') {
$(settings.dom.contentID).fadeOut(opts.fadeOutSpeed, function () {
$(settings.dom.wrapperID)
.find(settings.dom.revealElem + ',' + settings.dom.contentID)
.hide()
.end().find(settings.dom.tickerID + ',' + settings.dom.revealID)
.show()
.end().find(settings.dom.tickerID + ',' + settings.dom.revealID)
.removeAttr('style');
setupContentAndTriggerDisplay();
});
}
else {
$(settings.dom.revealID).hide(0, function () {
$(settings.dom.contentID).fadeOut(opts.fadeOutSpeed, function () {
$(settings.dom.wrapperID)
.find(settings.dom.revealElem + ',' + settings.dom.contentID)
.hide()
.end().find(settings.dom.tickerID + ',' + settings.dom.revealID)
.show()
.end().find(settings.dom.tickerID + ',' + settings.dom.revealID)
.removeAttr('style');
setupContentAndTriggerDisplay();
});
});
}
}
else {
$(settings.dom.revealElem).hide();
}
}
// pause ticker
function pauseTicker() {
settings.play = false;
// stop animation and show content - must pass "true, true" to the stop function, or we can get some funky behaviour
$(settings.dom.tickerID + ',' + settings.dom.revealID + ',' + settings.dom.titleID + ',' + settings.dom.titleElem + ',' + settings.dom.revealElem + ',' + settings.dom.contentID).stop(true, true);
$(settings.dom.revealID + ',' + settings.dom.revealElem).hide();
$(settings.dom.wrapperID)
.find(settings.dom.titleID + ',' + settings.dom.titleElem).show()
.end().find(settings.dom.contentID).show();
}
// play ticker
function restartTicker() {
settings.play = true;
settings.paused = false;
// start the ticker again
postReveal();
}
// change the content on user input
function manualChangeContent(direction) {
pauseTicker();
switch (direction) {
case 'prev':
if (settings.position == 0) {
settings.position = countSize(settings.newsArr) -2;
}
else if (settings.position == 1) {
settings.position = countSize(settings.newsArr) -1;
}
else {
settings.position = settings.position - 2;
}
$(settings.dom.titleElem).html(settings.newsArr['item-' + settings.position].type);
$(settings.dom.contentID).html(settings.newsArr['item-' + settings.position].content);
break;
case 'next':
$(settings.dom.titleElem).html(settings.newsArr['item-' + settings.position].type);
$(settings.dom.contentID).html(settings.newsArr['item-' + settings.position].content);
break;
}
// set the next content item to be used - loop round if we are at the end of the content
if (settings.position == (countSize(settings.newsArr) -1)) {
settings.position = 0;
}
else {
settings.position++;
}
}
});
};
// plugin defaults - added as a property on our plugin function
$.fn.ticker.defaults = {
speed: 0.10,
ajaxFeed: false,
feedUrl: '',
feedType: 'xml',
displayType: 'reveal',
htmlFeed: true,
debugMode: true,
controls: true,
titleText: '',
direction: 'ltr',
pauseOnItems: 3000,
fadeInSpeed: 600,
fadeOutSpeed: 300
};
})(jQuery);
/* Ticker Styling */
.ticker-wrapper.has-js {
margin: 0;
padding: 0;
width: 780px;
height: 32px;
display: block;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
background-color:inherit;
font-size: inherit;
}
.ticker {
width: 710px;
height: 23px;
display: block;
position: relative;
overflow: hidden;
background-color: #fff;
#media #{$xs}{
width: 200px;
}
}
.ticker-title {
padding-top: 9px;
color: #990000;
font-weight: bold;
background-color: #fff;
text-transform: capitalize;
}
.ticker-content {
margin: 0px;
/* padding-top: 9px; */
position: absolute;
color: #506172;
font-weight: normal;
background-color: #fff;
overflow: hidden;
white-space: nowrap;
font-family: "Roboto",sans-serif;
font-size: 16px;
}
.ticker-content:focus {
none;
}
.ticker-content a {
text-decoration: none;
color: #1F527B;
}
.ticker-content a:hover {
text-decoration: underline;
color: #0D3059;
}
.ticker-swipe {
padding-top: 9px;
position: absolute;
top: 0px;
background-color: #fff;
display: block;
width: 800px;
height: 23px;
}
.ticker-swipe span {
margin-left: 1px;
background-color: #fff;
border-bottom: 1px solid #1F527B;
height: 12px;
width: 7px;
display: block;
}
.ticker-controls {
padding: 8px 0px 0px 0px;
list-style-type: none;
float: left;
}
.ticker-controls li {
padding: 0px;
margin-left: 5px;
float: left;
cursor: pointer;
height: 16px;
width: 16px;
display: block;
}
.ticker-controls li.jnt-play-pause {
background-image: url('../images/controls.png');
background-position: 32px 16px;
}
.ticker-controls li.jnt-play-pause.over {
background-position: 32px 32px;
}
.ticker-controls li.jnt-play-pause.down {
background-position: 32px 0px;
}
.ticker-controls li.jnt-play-pause.paused {
background-image: url('../images/controls.png');
background-position: 48px 16px;
}
.ticker-controls li.jnt-play-pause.paused.over {
background-position: 48px 32px;
}
.ticker-controls li.jnt-play-pause.paused.down {
background-position: 48px 0px;
}
.ticker-controls li.jnt-prev {
background-image: url('../images/controls.png');
background-position: 0px 16px;
}
.ticker-controls li.jnt-prev.over {
background-position: 0px 32px;
}
.ticker-controls li.jnt-prev.down {
background-position: 0px 0px;
}
.ticker-controls li.jnt-next {
background-image: url('../images/controls.png');
background-position: 16px 16px;
}
.ticker-controls li.jnt-next.over {
background-position: 16px 32px;
}
.ticker-controls li.jnt-next.down {
background-position: 16px 0px;
}
.js-hidden {
display: none;
}
.no-js-news {
padding: 10px 0px 0px 45px;
color: #fff;
}
.left .ticker-swipe {
/*left: 80px;*/
}
.left .ticker-controls, .left .ticker-content, .left .ticker-title, .left .ticker {
float: left;
}
.left .ticker-controls {
padding-left: 6px;
}
.right .ticker-swipe {
/*right: 80px;*/
}
.right .ticker-controls, .right .ticker-content, .right .ticker-title, .right .ticker {
float: right;
}
.right .ticker-controls {
padding-right: 6px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<strong>Trending now</strong>
<!-- <p>Rem ipsum dolor sit amet, consectetur adipisicing elit.</p> -->
<div class="trending-animated">
<ul id="js-news" class="js-hidden">
<li class="news-item">Dolor sit amet, consectetur adipisicing elit.</li>
<li class="news-item">Spondon IT sit amet, consectetur.......</li>
<li class="news-item">Rem ipsum dolor sit amet, consectetur adipisicing elit.</li>
</ul>
</div>

The problem is that you are setting fixed widths for ticker elements.The ticker container has a width of 720px no matter what size the screen, and on screens < 767px the container for the scrolling text is just 230px.
Either change the CSS if it is your own, or if not you can add these rules after the Ticker CSS in included:
#media (max-width: 767px){
.ticker-wrapper.has-js,
.ticker,
.trending-tittle .ticker {
width: 100%!important;
}
}
This sets them to use the full width of the screen.

How to prevent centered text in input button be moved when dynamically changed

I have an input button with a centered text. Text length is changing dynamically with a js (dots animation), that causes text moving inside the button.
Strict aligning with padding doesn't suit because the text in the button will be used in different languages and will have different lenghts. Need some versatile solution. The main text should be centered and the dots should be aligned left to the end of the main text.
var dots = 0;
$(document).ready(function() {
$('#payDots').on('click', function() {
$(this).attr('disabled', 'disabled');
setInterval(type, 600);
})
});
function type() {
var dot = '.';
if(dots < 3) {
$('#payDots').val('processing' + dot.repeat(dots));
dots++;
}
else {
$('#payDots').val('processing');
dots = 0;
}
}
<input id="payDots" type="button" value="Pay" class="button">
.button{
text-align: center;
width: 300px;
font-size: 20px;
}
https://jsfiddle.net/v8g4rfsw/1/ (button should be pressed)

The easiest as this is a value and extra elements can't be inserted, would be to just use leading spaces to make the text appear as it's always centered.
This uses the plugin I wrote for your previous question
$.fn.dots = function(time, dots) {
return this.each(function(i,el) {
clearInterval( $(el).data('dots') );
if ( time !== 0 ) {
var d = 0;
$(el).data('dots', setInterval(function() {
$(el).val(function(_,v) {
if (d < dots) {
d++;
return ' ' + v + '.';
} else {
d = 0;
return v.substring(dots, v.length - dots)
}
})
}, time));
}
});
}
$(document).ready(function() {
$('#payDots').on('click', function() {
$(this).val('Proccessing').prop('disabled',true).dots(600, 3);
});
});
.button{
text-align: center;
width: 300px;
font-size: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="payDots" type="button" value="Pay" class="button">

You can find updated code below
Click Here
HTML Code
<button id="payDots">
<span>Pay</span>
</button>
JS Code
var dots = 0;
$(document).ready(function() {
$('#payDots').on('click', function() {
$(this).attr('disabled', 'disabled');
setInterval(type, 600);
})
});
function type() {
$('button').css('padding-left','100px','important');
var dot = '.';
if(dots < 3) {
$('#payDots').text('processing' + dot.repeat(dots));
dots++;
}
else {
$('#payDots').text('processing');
dots = 0;
}
}
CSS Code
button{
text-align: left;
width: 300px;
font-size: 20px;
position:relative;
padding-left:130px;
}

CSS3 - shortest way fill a webpage with a variable number of rectangles of different sizes

I want to make an html5 template where the page is filled with rectangles.
If there is only one rectangle, it will take the whole screen. Other rectangles will then come up from the bottom, eating up the place of the first.
Each rectangle must be an html element because I will put background-size:cover on it (so using the remaining container space to make up the first rectangle is not a viable solution). There are two layouts, one with two and the other with 3 columns.
The exact behavior is available here : JS BIN
It works perfectly fine but I think there are shorter and better ways to do that.
Any CSS expert around ? A JS solution is OK too but only if it is shorter. LESScss can be used too.
Maybe something with column-count?

Masonry is an interesting framework that may help you with your situation...or possibly push your idea to a new level.
Take a look at the site and see if it can assist you in your endeavor:
http://masonry.desandro.com/

Like this?
This solves only your "Portrait" section
HTML
<div class="container"></div>
CSS
.container {
width:100%;
}
.box {
background-color:red;
display:inline-block;
height: 25%;
width: 50%;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
border:1px solid blue;
text-align:center;
}
.fullWidth {
width:100%;
}
JS
$(document).ready(function () {
var maxNum = 12;
var startNum = 1;
function render() {
if (startNum % 2 === 0) {
$(".container").children(".box:nth-of-type(odd)").removeClass("fullWidth");
$(".container").append("<div class='box'>" + startNum + "</div>");
} else {
$(".container").append("<div class='box fullWidth'>" + startNum + " </div>");
}
if (startNum < maxNum) {
setTimeout(render, 1500);
}
startNum++;
}
render();
});
EDIT Added "Landscape" section
And like this?
This solves only your "Landscape" section
HTML
<div class="container"></div>
CSS
.container {
width:100%;
}
.box {
background-color:red;
display:inline-block;
height: 25%;
width: 33.333%;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
border:1px solid blue;
text-align:center;
}
.halfWidth {
width:50%;
}
.fullWidth {
width:100%;
}
JS
$(document).ready(function () {
var maxNum = 12;
var startNum = 1;
function render() {
if (startNum % 3 === 0) {
$(".container").children(".box").removeClass("halfWidth");
$(".container").append("<div class='box'>" + startNum + "</div>");
} else if ((startNum - 2) % 3 === 0) {
$(".container").children(".box:nth-of-type(" + (startNum - 1) + ")").removeClass("fullWidth").addClass("halfWidth");
$(".container").append("<div class='box halfWidth'>" + startNum + "</div>");
} else {
$(".container").append("<div class='box fullWidth'>" + startNum + " </div>");
}
if (startNum < maxNum) {
setTimeout(render, 1500);
}
startNum++;
}
render();
});

Licenseplate formatting & validation

I've got a blackout... I haven't got a clue how to apply the javascript to the text area...
Also; what is best? Load it using onfocus, onblur or onclick?
I have a text area like this:
<input type="text" name="c_Kenteken" id="invoerKenteken" class="zoek_kentekenplaat" />
And this script:
<script language="javascript" type="text/javascript">
function GetSidecodeLicenseplate(Licenseplate){
var arrSC = new Array;
var scUitz = '';
Licenseplate = Licenseplate.replace('-', '').toUpperCase();
arrSC[0] = /^[a-zA-Z]{2}[\d]{2}[\d]{2}$/ // 1 XX-99-99
arrSC[1] = /^[\d]{2}[\d]{2}[a-zA-Z]{2}$/ // 2 99-99-XX
arrSC[2] = /^[\d]{2}[a-zA-Z]{2}[\d]{2}$/ // 3 99-XX-99
arrSC[3] = /^[a-zA-Z]{2}[\d]{2}[a-zA-Z]{2}$/ // 4 XX-99-XX
arrSC[4] = /^[a-zA-Z]{2}[a-zA-Z]{2}[\d]{2}$/ // 5 XX-XX-99
arrSC[5] = /^[\d]{2}[a-zA-Z]{2}[a-zA-Z]{2}$/ // 6 99-XX-XX
arrSC[6] = /^[\d]{2}[a-zA-Z]{3}[\d]{1}$/ // 7 99-XXX-9
arrSC[7] = /^[\d]{1}[a-zA-Z]{3}[\d]{2}$/ // 8 9-XXX-99
arrSC[8] = /^[a-zA-Z]{2}[\d]{3}[a-zA-Z]{1}$/ // 9 XX-999-X
arrSC[9] = /^[a-zA-Z]{1}[\d]{3}[a-zA-Z]{2}$/ // 10 X-999-XX
//except licenseplates for diplomats
scUitz = '^CD[ABFJNST][0-9]{1,3}$' //for example: CDB1 of CDJ45
for(i=0;i<arrSC.length;i++){
if (Licenseplate.match(arrSC[i])) {
return i+1;
}
}
if (Licenseplate.match(scUitz)) {
return 'CD';
}
return false;
}
function FormatLicenseplate(Licenseplate,Sidecode) {
Licenseplate = Licenseplate.replace('-', '').toUpperCase();
if (Sidecode <= 6) {
return Licenseplate.substr(0, 2) + '-' + Licenseplate.substr(2, 2) + '-' + Licenseplate.substr(4, 2)
}
if (Sidecode == 7 || Sidecode == 9) {
return Licenseplate.substr(0, 2) + '-' + Licenseplate.substr(2, 3) + '-' + Licenseplate.substr(5, 1)
}
if (Sidecode == 8 || Sidecode == 10) {
return Licenseplate.substr(0, 1) + '-' + Licenseplate.substr(1, 3) + '-' + Licenseplate.substr(4, 2)
}
return Licenseplate
}
</script>
The CSS:
input.zoek_kentekenplaat
{
border:none;
border-color:#F0F0F0;
font-size: 18px;
font-weight: bold;
line-height: 0px;
width: 125px;
height: 30px; /*background-color: #f4be04;*/
padding-left: 20px; /*border: 1px solid #ffcc00;*/
padding-bottom: 0px;
padding-top: 0px;
text-transform: uppercase;
/*margin-left: 10px;*/
margin-top: 2px;
background: url(http://email.allianz.nl/public/ANG/278b2c33c92f75d6795b0c75e3a18e21/kenteken_125_2_2.jpg) no-repeat;
/*margin-bottom: 21px;*/
}
Here's the JSFIDDLE: http://jsfiddle.net/jazperader/676sD/
I got the distinct feeling that it's just something tiny and stupid.
I know there isn't a onfocus, onblur or onclick in the text area HTML.
I'd like your expert opinion on this ;-)
Thanks!
Jazper

What you are trying to do is common, however, it brings up some performance concerns. Since you would ideally like to have the formatting applied as they type what you could do is use the keydown or keyup event so something like:
<input type="text" onkeyup="myFunction()">
Again, this would fire every time the user typed and removed their finger from the key. So you are potentially creating a performance issue since the event will fire frequently. In your situation it may not be a big deal since you are only dealing with a small amount of text so the event may only fire 10 times or so.
If you do want to optimize your code a bit have a look at this http://benalman.com/code/projects/jquery-throttle-debounce/examples/debounce/ You will see an example of how to throttle your events so your code is not executed every time.

dropdown is in middle of page, should open list according to position

I have a dropdown which is in the middle of the page. It always opens the list downwards, as it should be. Now, we have to implement it in a way that whenever the browser screen size is changed, & the dropdown box does not have enough space to open the list, it should open the list upwards.
Please let me know, if more details are required.
code :
HTML For DropDown List/Picker :
<div id="pick-container" class="wGridPx_30 hPrefixPx_2 hSuffixPx_2 outer ">
<label id="pick-label" class="input hPrefixPx_1">
<span id="pick-guide">Start typing EID, first or last name</span>
<input id="peoplepick" type="text" class="wGridPx_29" />
</label>
</div>
javascript :
if( $("div#people-picker-container").length == 0 ) {
$("#peoplepick").parent().append("<div id='people-picker-container' class='ui-picker-container'></div>");
//Set the desired height for dropdown
$("#people-picker-container").css({'max-height':'260px'});
}
Adding the list :
var people = $.parseJSON(data.d);
$("#people-picker-container").html(null);
$.each(people, function (index, item) {
//For image handler (ashx) please contact 'acn.ppl.plumbers' team to get code and access rights
var person = "<div class='ui-person-item'><input type='hidden' name='eid' value=" + item.EnterpriseId + " /> " +
"<div class='ui-person-img'><img src='/services/PhotoProvider.ashx?id=" + item.EnterpriseId + "'/></div>" +
"<div class='ui-person-info'>" +
"<span>" + item.DisplayName + "</span>" +
"<div class='ui-person-desc'>" + item.DisplayText + "</div>" +
"</div>" +
"</div>";
$("#people-picker-container").append(person);
CSS :
.ui-picker-container{
position:absolute;
border:1px solid #afafaf;
background-color:#fff;
overflow-y: auto;
overflow-x: hidden;
padding-right: 20px;
z-index:100;}
.ui-picker-dropup{
bottom: 18%;
}
.ie7 .ui-picker-container {
margin-top:21px;
margin-left:-240px;
}
.ui-person-item{
width:auto;
position:relative;
min-height:48px;
margin:8px 0;
background-color:#fff;
word-wrap:break-word;
cursor:pointer;
z-index:110;
}
.ui-person-img{
width:48px;
height:48px;
overflow:hidden;
position:absolute;
left:10px;
}
.ui-person-img img{
width:100%;
}
.ui-person-info{
min-width:100px;
position:absolute;
left:80px;
width:69%;
}
.ui-person-desc{
font:1em Arial;
color:#808080;
}
.hidden{
display:none;
}
.ui-person-info span {
color:#000;
font-style:normal;
left:auto;
height:auto;
top:auto;
z-index:auto;
cursor:pointer;
}
I am trying to add class - .ui-picker-dropup when screen size changes, but this is not working with all the scrren sizes, & not able to figure out how to dynamically calulate the bottom %. is there any other way to do this?
I was using this way, but this is absolutely incorrect :
//Calulate the size of scrren
var screenHight = $(window).height();
var screenWidth = $(window).width();
var pickerPosition = { left: 0, top: 0 };
var picker = document.getElementById('pick-container');
pickerPosition = picker.getBoundingClientRect();
var xPicker = pickerPosition.left;
var ypicker = pickerPosition.top;
alert(" ypicker " + ypicker);
if(ypicker != 288){
$("#people-picker-container" ).addClass( "ui-picker-dropup");}

A designer friend of mine asked me this question for something she was working on and pointed me to your unanswered question. I'll summarize the solution I gave to her at this codepen..
I wrote the solution as a basic jQuery plugin that will add a class to the element when it approaches within a buffered amount of the bottom of the page or beyond. This should provide the flexibility to change the direction of the dropdown list when the element has a special class.
USAGE
$('#target').bottomFeeder();
// or with options
$('#target').bottomFeeder({
buffer: 100, // buffer is the distance from the bottom of the page that the class is added
className: 'bottom' // class name to be added
});
PLUGIN
$.fn.bottomFeeder = (function(){
var lastScrollTop = $(window).scrollTop(),
delta = 5, // every 5px scroll
winH = 0,
observees = [];
var checkPosition = function(obj){
var el = $(obj.el),
top = el.offset().top;
if((top + obj.config.buffer) > (lastScrollTop + winH))
el.addClass(obj.config.className);
else
el.removeClass(obj.config.className);
};
$(window).on('scroll', function(){
// nothing to do
if(observees.length === 0) return;
var st = $(this).scrollTop();
// scroll was less than the delta
if(Math.abs(lastScrollTop - st) <= delta)
return;
// update shared variables
winH = $(window).outerHeight();
lastScrollTop = st;
for(var i = 0; i < observees.length; i++){
checkPosition(observees[i]);
}
});
return function(config){
config = config || { buffer: 50, className: 'bottom' };
observees.push({ el: this, config: config });
};
})();