I have a bit of Javascript that detects the browser and applies a transform to an elements depending on the browser. The one for Webkit works fine on Chrome however the Firefox one doesn't. Can someone please tell me if my code below is correct:
if(typeof navigator.vendor.toLowerCase().indexOf('chrome')!=-1){
document.getElementById('jj_preview7').style.WebkitTransform = 'scale(' + jj_input23 + ') ' + 'rotate(' + jj_input24 + 'deg)' + 'translate(' + jj_input25 + 'px, ' + jj_input26 + 'px)' + 'skew(' + jj_input27 + 'deg, ' + jj_input28 + 'deg)';
}
if(typeof navigator.vendor.toLowerCase().indexOf('firefox')!=-1){
document.getElementById('jj_preview7').style.MozTransform = 'scale(' + jj_input23 + ') ' + 'rotate(' + jj_input24 + 'deg)' + 'translate(' + jj_input25 + 'px, ' + jj_input26 + 'px)' + 'skew(' + jj_input27 + 'deg, ' + jj_input28 + 'deg)';
}
Thanks in advance
// Test element we apply both kinds of transforms to:
var testEl = document.createElement('div');
testEl.style.MozTransform = 'translate(100px) rotate(20deg)';
testEl.style.webkitTransform = 'translate(100px) rotate(20deg)';
var styleAttrLowercase = testEl.getAttribute('style').toLowerCase();
// when we check for existence of it in the style attribute;
// only valid ones will be there.
var hasMozTransform = styleAttrLowercase.indexOf('moz') !== -1;
var hasWebkitTransform = styleAttrLowercase.indexOf('webkit') !== -1;
Doing this you can now do:
var transformParts = [];
if (jj_input23 !== '') {
transformParts.push('scale(' + jj_input23 + ')');
}
if (jj_input23 !== '') {
transformParts.push('rotate(' + jj_input24 + 'deg)');
}
if (jj_input25 !== '' && jj_input26 !== '') {
transformParts.push('translate(' + jj_input25 + 'px, ' + jj_input26 + 'px)');
}
if (jj_input27 !== '' && jj_input28 !== '') {
transformParts.push('skewX(' + jj_input27 + 'deg) skewY(' + jj_input28 + 'deg)');
}
var transformTxt = transformParts.join(' ');
if (hasWebkitTransform) {
document.getElementById('jj_preview7').style.WebkitTransform = transformTxt;
}
if (hasMozTransform) {
document.getElementById('jj_preview7').style.MozTransform = transformTxt;
}
Here is the solution: http://jsfiddle.net/Adu49/1/
As you are reading from inputs directly without parse it, so you may generate CSS declaration like: scale() translate(deg,deg) which is obviously illegal. And in this case, Firefox prefer to drop it, while Chrome prefer to accept partial correct declaration. That's why your code doesn't work on Firefox but on Chrome, and after you fill all the fields it will eventually work on both browsers.
So I placed some value || default in your code, which will guaranty a proper default value is set when the input box is empty (if you want to interact with user, you need more validation code here.)
And some off-topic here. Please change the way you naming variables and elements, it's too confusing.
Related
I have a function that sums my values and everything works fine, but only when all inputs have a value entered. However, I would like default to have 0 assigned to it.so that the function works when at least one value is given . How to do it ?.
var DeductiblepercentageM = thisPointer.entity.getValue('number.DeductiblepercentageM[' + i + ']');
var InsuranceLimitM = thisPointer.entity.getValue('number.InsuranceLimitM[' + i + ']');
var insuranceRaitingM = thisPointer.entity.getValue('number.insuranceRaitingM[' + i + ']');
var InsurerNumberM = thisPointer.entity.getValue('number.InsurerNumberM[' + i + ']');
DeductiblepercentageM = DeductiblepercentageM.replace(",", ".");
DeductiblepercentageM = parseFloat(DeductiblepercentageM)
InsuranceLimitM = InsuranceLimitM.replace(",", ".");
InsuranceLimitM = parseFloat(InsuranceLimitM)
insuranceRaitingM = insuranceRaitingM.replace(",", ".");
insuranceRaitingM = parseFloat(insuranceRaitingM)
InsurerNumberM = InsurerNumberM.replace(",", ".");
InsurerNumberM = parseFloat(InsurerNumberM)
//log the outcome of decimal separator change
var positionSum = +(DeductiblepercentageM + InsuranceLimitM +insuranceRaitingM + InsurerNumberM);
jQ('[id="DeductibleM[' + i + ']"]').val(positionSum);
thisPointer.entity.setValue('DeductibleM[' + i + ']', positionSum);
thisPointer.entity.mergeLocal(true);
if (totalSum != "NaN") {
totalSum = +(totalSum + positionSum).toFixed();
}
}
else {
totalSum = "-";
}
According to #Terry
var InsuranceLimitM = thisPointer.entity.getValue('number.InsuranceLimitM[' + i + ']') || 0;
adding || 0 to the end of the code helps and makes the code count right away
Well, i don't know if the return in the transform function can work, but, someone know if there is a way where i can get something similar to this? Put a function inside an object...
var t = $(this).scrollTop();
var h = $(window).height();
function transform(val){
return "-webkit-transform": "translateY(" + val + "%)",
"-ms-transform": "translateY(" + val + "%)",
"transform": "translateY(" + val + "%)";
}
$("#header").css({
opacity: 50 * (t/h),
tranform(50 * (t/h))
});
You could use a CSS extension language (like LESS or SCSS) to handle variables, then simply process and use some simple stylesheet.
If you want to stick with JS, I would suggest returning a hash from transform and extending that later, like:
function transform(val) {
return {
"-webkit-transform": "translateY(" + val + "%)",
"-ms-transform": "translateY(" + val + "%)",
"transform": "translateY(" + val + "%)"
}
}
function transformWithOpacity(val) {
var base = transform(val);
base["opacity"] = val;
return base;
}
var num = 50 * (t/h);
$("#header").css(transformWithOpacity(num));
You can use JQuery extend function for this
$("#header").css($.extend({
opacity: 50 * (t/h)
},
tranform(50 * (t/h))
));
http://liveweave.com/R9jW9x
I have 4 textbox's each representing a css padding location (ex. padding-top, padding-left, etc:)
I'm experimenting with value detections. What I'm trying to figure out is when padding top and bottom [A] are the same values (as well as left and right [B]) how to set the values to padding: A B;
If all are same to set value to padding: A;
If all are different set value to nothing/blank
and
If all are different, or A & B maybe same, but C and D maybe different then to set value to padding: A B C D;
The script works fine onload, but when the input values are changed my result is not finalizing.
Can anybody explain why this is?
$(document).ready(function() {
var top = $(".padding-top").val(),
bottom = $(".padding-bottom").val(),
left = $(".padding-left").val(),
right = $(".padding-right").val(),
result = $(".padding-final");
// Update padding code
var Finalize = function() {
if ((top === "") && (right === "") && (bottom === "") && (left === "")) {
// Check if all are empty
result.val("");
} else if ((top === right) && (bottom === left)) {
// If all are same
result.val("padding: " + top + "px;");
} else if ((top === bottom) && (left === right)) {
// Check if first two values are same
result.val("padding: " + top + "px " + left + "px;");
} else {
result.val("padding: " + top + "px " + right + "px " + bottom + "px " + left + "px;");
}
};
// Update padding code when sides change
$(window).on('load keyup change', function() {
Finalize();
});
});
I won't write the code for you. But, I will hopefully send you in the right direction:
First, you should check whether padding-top, padding-right, padding-bottom, and padding-left are equal to each other.
>> If they are equal, then you can set the middle one equal to any of the values (since they're equal).
>> If they are not equal, then you can check to see if top and bottom are equal to each other && left and right are equal to each other. If they are, then you can set the middle to the top/bottom number + " " + left/right number.
>> Else set the middle to top number, right number, bottom number, left number.
EDIT
Actually, I got to tinkering a bit with the idea and came up with this to help you a bit more. But, that's it. No more help from me!
var top = 2;
var bottom = 2;
var right = 5;
var left = 5;
top == bottom && right == left && top == left ? alert(top)
: top == bottom && right == left ? alert(top + " " + left)
: alert(top + " " + right + " " + bottom + " " + left);
JSFiddle
After you solve this, a more challenging problem would be to type numbers into the middle box and change the top/right/bottom/left paddings accordingly.
I would play with this
var a=$(".padding-top"), b=..., c=..., d=...;
var test=0,padding;
if (a) test += 1;
if (b&& b!=a) test += 2;
if (c && c!=a) test += 4;
if (d && d!=c && d!=a) test += 8;
if (test== 1) padding = a;
if (test== 2 || test == 3) padding = a + " " + b; // when a+b or just b, we need a and b
if (test>4 && test < 8) padding = a + " " + b + " " + c; // c, a+c or b+c
if (test > 8) padding = a + " " + b + " " + c " " + d;
Also you can do
$(".paddings").on('keyup change', function() {
Finalize();
});
and use IDs for padding-top, left, bottom, right
As stated cases in your question, i have made following code:
$(document).ready(function() {
var top = $(".padding-top").val(),
bottom = $(".padding-bottom").val(),
left = $(".padding-left").val(),
right = $(".padding-right").val(),
result = 'Padding: ';
// Applies new code value
function Finalize() {
if(top === bottom === left === right) {
//If all are same
result += top + ' ';
} else {
if ((top === bottom) && (left === right)) {
// Check if first two values are same
result += top + ' ' + left + ' ';
} else {
result += left + ' ' + right + ' ' + top + ' ' + bottom + ' ';
}
}
result += 'Px';
$('#middle-input').val(result);
}
Finalize();
$(".padding-inputs").on('keyup change', function() {
Finalize();
});
});
I have my own webshop and on the home page i have a lot of products with countdown.
So whats the problem?
The problem is, when i have many javascripts on home page then the broser will freezing, getting slow.
How i know this is an javascript problem ? I tried to disable javascript on the browser and my website works normal.
/*!
*
* Brian2000: BK_Countdown v1.1
* AKA: Brian's jQuery Robust Date/Time Countdown
* http://brian2000.com
*
* Copyright 2012-2013, Brian Kennedy
* Licensed under the GPL Version 3 license
* http://www.gnu.org/licenses/gpl-3.0.en.html
*
* Date: Wed Jan 9 2013 2:54PM EST
*
* You can't remove this part, and if you make changes or improve things, please keep me informed.
* Thank you, enjoy, and support Open Source!
*/
/*
This portion explains how to use the counter, I recomend not deleting it either ;-)
VARS [required]
------------------------------------------------
container: ID of Element for counter
targetDate: MM/DD/YYYY
targetTime: HH:MM:SS (0-23 Hour) [seconds are optional]
OPTIONS:
------------------------------------------------
order: format/output order
order: 1 = Label + Spacer + Value
order: 2 = Value + Spacer + Label (reverse from order 1)
spacer: text/string seperator between label and value
element: html element for label and value containers (default is span)
end: Message to display when date has passed
dayOf: Message to display on day of counter expiration
*/
function BK_CountDown(container, targetDate, targetTime, opts) {
/////////////////////////////////////////////////////
//vars
this.opts = opts;
this.complete = false; //for exiting interval
this.container = container; //target
DArray = targetDate.split('/');
this.targetDate = DArray[0] + '/' + DArray[1] + '/' + DArray[2];
TArray = targetTime.split(':');
this.targetHour = TArray[0]; //hr
this.targetMin = TArray[1]; //min
if (typeof TArray[2] == 'undefined') { //sec
this.targetSec = 0;
}else{
this.targetSec = TArray[2];
}
/////////////////////////////////////////////////////
// options
var defaults = {
'order' : "1",
'spacer' : ':',
'element' : 'span',
'end' : "Deal is ended!",
'dayOf' : "Deal is ended!"
}
if(typeof this.opts != "undefined") { //if options were assigned...
for(var i in defaults) { //assign defaults for unchanged opts
if(typeof this.opts[i] == "undefined") {
this.opts[i] = defaults[i];
}
}
}else{ //no options were assigned
this.opts = defaults;
}
/////////////////////////////////////////////////////
/////////////////////////////////////////////////////
//////// assembly
/////////////////////////////////////////////////////
s = this.opts['spacer'];
this.c = container.substring(1);
e = this.opts['element'];
if(this.opts['order'] == 2){
//reverse assembly
$(container).append('<' + e + ' id="' + this.c + '_count_days" class="count_days"></' + e + '>');
$(container).append('<' + e + ' id="' + this.c + '_txt_days" class="txt_days">' + s + ' Days</' + e + '>');
$(container).append('<' + e + ' id="' + this.c + '_count_hours" class="count_hours"></' + e + '>');
$(container).append('<' + e + ' id="' + this.c + '_txt_hours" class="txt_hours">' + s + ' :</' + e + '>');
$(container).append('<' + e + ' id="' + this.c + '_count_min" class="count_min"></' + e + '>');
$(container).append('<' + e + ' id="' + this.c + '_txt_min" class="txt_min">' + s + ' :</' + e + '>');
}
else{
//default assembly
$(container).append('<' + e + ' id="' + this.c + '_txt_days" class="txt_days">Days ' + s + '</' + e + '>');
$(container).append('<' + e + ' id="' + this.c + '_count_days" class="count_days"></' + e + '>');
$(container).append('<' + e + ' id="' + this.c + '_txt_hours" class="txt_hours">Hours ' + s + '</' + e + '>');
$(container).append('<' + e + ' id="' + this.c + '_count_hours" class="count_hours"></' + e + '>');
$(container).append('<' + e + ' id="' + this.c + '_txt_min" class="txt_min">Minutes ' + s + '</' + e + '>');
$(container).append('<' + e + ' id="' + this.c + '_count_min" class="count_min"></' + e + '>');
}
/////////////////////////////////////////////////////
/////////////////////////////////////////////////////
//////// Count Update function
this.count_update = function count_update(){
date = new Date(); //NOW
targetDate = new Date(this.targetDate);
targetDate.setHours(this.targetHour);
targetDate.setMinutes(this.targetMin);
targetDate.setSeconds(this.targetSec);
var UDate = Math.round(date.getTime()/1000);
var UTargetDate = Math.round(targetDate.getTime()/1000);
differance = UTargetDate - UDate;
days=Math.floor(differance/(60*60*24)*1);
hours=Math.floor((differance%(60*60*24))/(60*60)*1);
minutes=Math.floor(((differance%(60*60*24))%(60*60))/(60)*1);
seconds=Math.floor((((differance%(60*60*24))%(60*60))%(60))*1);
//if range is 0 don't display range
//days
if(days <= 0){$(this.container + '_count_days').remove();$(this.container + '_txt_days').remove();}
else{$(this.container + '_count_days').text(days);}
//hours
if(days <= 0 && hours <= 0){$(this.container + '_count_hours').remove();$(this.container + '_txt_hours').remove();}
else{$(this.container + '_count_hours').text(hours);}
//min
if(days <= 0 && hours <= 0 && minutes <= 0){$(this.container + '_count_min').remove();$(this.container + '_txt_min').remove();}
else{$(this.container + '_count_min').text(+minutes);}
//seconds
$(this.container + '_count_sec').text(seconds);
//Singular text for 'reverse' assembly
if(this.opts['order'] == 2){
if(days <= 1){$(this.container + '_txt_days').text(this.opts['spacer'] + ' dag en ');}
else{$(this.container + '_txt_days').text(this.opts['spacer'] + ' dagen en ')}
if(hours == 1){$(this.container + '_txt_hours').text(this.opts['spacer'] + ' uur en ');}
else{$(this.container + '_txt_hours').text(this.opts['spacer'] + ' uur en ');}
if(minutes == 1){$(this.container + '_txt_min').text(this.opts['spacer'] + ' min');}
else{$(this.container + '_txt_min').text(this.opts['spacer'] + ' min');}
if(seconds == 1){$(this.container + '_txt_sec').text(this.opts['spacer'] + '');}
else{$(this.container + '_txt_sec').text(this.opts['spacer'] + '');}
}
//end of countdown
if(days <= 0 && hours <= 0 && minutes <= 0 && seconds <= 0){
//timer is over, final output
//if date is today!
if(new Date().toDateString() == targetDate.toDateString()){
$(this.container).addClass('count_now');
$(this.container).text(this.opts['dayOf']);
}else{//if date is after today
$(this.container).addClass('count_end');
$(this.container).text(this.opts['end']);
}
this.complete = true;
}
};
/////////////////////////////////////////////////////
/////////////////////////////////////////////////////
//run immediately
this.count_update();
//now loop this every second
var selfobject = this; //scope gets lost within setInterval (see: http://www.vonloesch.de/node/32)
var theCounter = setInterval(function(){
selfobject.count_update();
if(selfobject.complete == true){
clearInterval(theCounter);}
}, 1000);
}
HTML:
$(document).ready(function() {
var aanbiedingcountdown = new BK_CountDown('#deal1', '05/25/2014', '23:57', {order: 2, spacer: ''});
var aanbiedingcountdown = new BK_CountDown('#deal2', '05/26/2014', '23:57', {order: 2, spacer: ''});
var aanbiedingcountdown = new BK_CountDown('#deal3', '05/28/2014', '23:57', {order: 2, spacer: ''});
var aanbiedingcountdown = new BK_CountDown('#deal4', '05/28/2014', '15:10', {order: 2, spacer: ''});
var aanbiedingcountdown = new BK_CountDown('#deal5', '05/26/2014', '23:57', {order: 2, spacer: ''});
});
You see, for every countdown that i want i need to create an ID.
But what i want is that when the page load, the countdown dont need to run, it makes my website slower. So, only when the someone refresh the page then he get the right date & time.
Example: Time is now 16:00u, the countdown are set at 17h, so, when someone is still on my website (10min) without refreshing the page then the countdown is still 16h only if he refresh the page then countdown is 16:10h...
I've seen this on other websites and they have more than 100 products with countdowns on the same page and still works perfect because timer is not running only if people refresh the page the the timer will set to right date & time.
Demo: http://jsfiddle.net/uJk73/ (i removed seconds, i though site will go faster without this, but no succes)
Hope someone can help my with this.
Updated jsfiddle
So let's say you had 9 deals
<div id="countdowntimer">
<div id="deal1"></div>
<div id="deal2"></div>
<div id="deal3"></div>
<div id="deal4"></div>
<div id="deal5"></div>
<div id="deal6"></div>
<div id="deal7"></div>
<div id="deal8"></div>
<div id="deal9"></div>
</div>
Get rid of this loop in BK_CountDown()
//now loop this every second
/*var selfobject = this; //scope gets lost within setInterval (see: http://www.vonloesch.de/node/32)
var theCounter = setInterval(function(){
selfobject.count_update();
if(selfobject.complete == true){
clearInterval(theCounter);}
}, 1000);
*/
Then
$(document).ready(function() {
var deals = []; // create an array
deals.push( new BK_CountDown('#deal1', '05/24/2014', '23:59', {order: 2, spacer: ''}) );
deals.push( new BK_CountDown('#deal2', '05/24/2014', '22:59', {order: 2, spacer: ''}) );
deals.push( new BK_CountDown('#deal3', '05/24/2014', '12:59', {order: 2, spacer: ''}) );
deals.push( new BK_CountDown('#deal4', '05/24/2014', '13:49', {order: 2, spacer: ''}) );
deals.push( new BK_CountDown('#deal5', '05/24/2014', '14:49', {order: 2, spacer: ''}) );
deals.push( new BK_CountDown('#deal6', '05/24/2014', '15:57', {order: 2, spacer: ''}) );
deals.push( new BK_CountDown('#deal7', '05/24/2014', '15:58', {order: 2, spacer: ''}) );
deals.push( new BK_CountDown('#deal8', '05/24/2014', '15:59', {order: 2, spacer: ''}) );
deals.push( new BK_CountDown('#deal9', '05/24/2014', '16:00', {order: 2, spacer: ''}) );
var dealcounter = setInterval(function(){ // create one setTimeout
if (deals.length){
for (i in deals){
var selfobject = deals[i];
selfobject.count_update();
if(selfobject.complete == true) delete deals[i]; // remove from array
}
}else{
clearTimeout(dealcounter); // no more to count down, stop this loop
}
}, 5000); // 5 seconds
});
I have a form which passes a number of parameters. So far, the stock parameters are being passed:
var params = "title=" + document.getElementById("title").value +
"&url=" + document.getElementById("url").value +
"&snippet=" + document.getElementById("snippet").value +
"&tags=" + document.getElementById("tags").value +
"&status_bookmark=" + document.getElementById("status_bookmark").value +
"&comment=" + document.getElementById("comment").value +
"&status_comment=" + document.getElementById("status_comment").value;
I'm attempting to append additional form elements to this parameter string, which are:
var i, lng = document.getElementById('addbookmark').length;
// If the length property is undefined, then there is only one checkbox.
if (typeof lng === "undefined") {
params + "&topic-link-item-1=" + document.getElementById("topic-link-item-1").value;
params + "&topic-link-comment-box-1=" + document.getElementById("topic-link-comment-box-1").value;
}
else {
for (i = 0; i < lng; i++) {
params + "&topic-link-item-" + i + "=" + document.getElementById("topic-link-item-" + i).value;
params + "&topic-link-comment-box-" + i + "=" + document.getElementById("topic-link-comment-box-" + i).value;
}
}
Here, I've used code taken from another StackOverflow article, and as you can see, I'm trying to build up a series of paired parameters that match the ad hoc form elements I'm generating elsewhere via jQuery, which works.
However, these values appear not be getting passed via the form, while the other form elements are being passed.
Any suggestions?
Update
I've revised the code, per the suggestions, but it's not working:
var i, formObj = document.form['addbookmark'], formObjLng = document.form['addbookmark'].length;
// If the length property is undefined, then there is only one checkbox.
if ((typeof formObjLng !== "undefined")) {
for (i = 0; i < formObjLng; i++) {
if ((formObj.elements['topic-link-item-' + i].type == "checkbox") && (formObj.elements['topic-link-item-' + i].checked)) {
params = params + "&topic-link-item-" + i + "=" + encodeURIComponent(document.getElementById("topic-link-item-" + i)).value;
params = params + "&topic-link-comment-box-" + i + "=" + encodeURIComponent(document.getElementById("topic-link-comment-box-" + i)).value;
}
}
}
As for the form, it's simply a form with an ID of "addbookmark", and to again state what I said earlier, everything else works with the exception of what Im attempting here.
There are 2 issues with your code. You need to URL encode the values using the encodeURIComponent function. Also you need to assign the result back to the params variable when concatenating:
var params =
"title=" + encodeURIComponent(document.getElementById("title").value) +
"&url=" + encodeURIComponent(document.getElementById("url").value) +
"&snippet=" + encodeURIComponent(document.getElementById("snippet").value) +
"&tags=" + encodeURIComponent(document.getElementById("tags").value) +
"&status_bookmark=" + encodeURIComponent(document.getElementById("status_bookmark").value) +
"&comment=" + encodeURIComponent(document.getElementById("comment").value) +
"&status_comment=" + encodeURIComponent(document.getElementById("status_comment").value);
and also for the other values that you are adding:
var i, lng = document.getElementById('addbookmark').length;
// If the length property is undefined, then there is only one checkbox.
if (typeof lng === "undefined") {
params += "&topic-link-item-1=" + encodeURIComponent(document.getElementById("topic-link-item-1").value);
params += "&topic-link-comment-box-1=" + encodeURIComponent(document.getElementById("topic-link-comment-box-1").value);
}
else {
for (i = 0; i < lng; i++) {
params += "&topic-link-item-" + i + "=" + encodeURIComponent(document.getElementById("topic-link-item-" + i).value);
params += "&topic-link-comment-box-" + i + "=" + encodeURIComponent(document.getElementById("topic-link-comment-box-" + i).value);
}
}
Notice how:
params += "&topic-link-item-" + i + "=" + encodeURIComponent(document.getElementById("topic-link-item-" + i).value);
which is equivalent to:
params = params + "&topic-link-item-" + i + "=" + encodeURIComponent(document.getElementById("topic-link-item-" + i).value);
is not the same as what you were doing initially:
params + "&topic-link-item-" + i + "=" + encodeURIComponent(document.getElementById("topic-link-item-" + i).value);
You were simply concatenating 2 values and never assigning the result back to the params variable.
I'm pretty sure Javascript doesnt' allow text append the way you are doing it.
Should be
params = params +