אין אפס?

לעיתים צריך לפרמט מספר (דהיינו לסדר אותו קצת לפני תצוגה) במקום להציג מספר שכזה 12209203 נרצה להוסיף פסיקים קצת לשיפור הקריאה. EXT בצורה טבעית תומך בזה בעזרת ה RENDERER שלו 
לדוגמא 

var numberRenderer = function(v) {
    try{
      var formatNumber = Ext.util.Format.number(v,"0,000")
      return  formatNumber  ;
    } catch(ex){
        return v;
  }
}

אך אם אני לא משתמש בFRAMEWORK ועדיין רוצה להוסיף מפרידים להלן סקריפט נחמד שמצאתי, שמפריד את הנקודה העשרונית ומטפל בפסיקים בעזרת REGEX

// this function taken from
// http://www.mredkj.com/javascript/numberFormat.html
 
var formatNumber = function (num){
  var nStr = num + '';
  var x = nStr.split('.');
  var x1 = x[0];
  var x2 = x.length > 1 ? '.' + x[1] : '';
  var rgx = /(\d+)(\d{3})/;
  while (rgx.test(x1)) {
    x1 = x1.replace(rgx, '$1' + ',' + '$2');
  }
  return x1 + x2;
}
אין תגובות:

ועכשיו - להחזיר אותו לHEX

ולהחזיר אותו לHEX


function rgb2hex(rgb)
{
    rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    function hex(x) {
        return ("0" + parseInt(x).toString(16)).slice(-2);
    }
    return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}
אין תגובות:

המרת צבע ל RGB

אני רוצה לנתח צבע מסוים והוא בHEX לשם כך אני צריך לפרקו לRGB (red blue green)  
להלן אחלה פונקציה שמצאתי ברשת 

function hex2rgb(hex) {
  var c, o = [], k = 0, m = hex.match(
    /^#(([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})|([0-9a-f])([0-9a-f])([0-9a-f]))$/i);
      
  if (!m) return {r:0,g:0,b:0};
  for (var i = 2, s = m.length; i < s; i++) {
    if (undefined === m[i]) continue;
    c = parseInt(m[i], 16);
    o[k++] = c + (i > 4 ? c * 16 : 0);
  }
  return {r:o[0], g:o[1], b:o[2]};
};
אין תגובות:

האם הדפדפן מציג CSS3 ??

HTML5 זה בהחלט מגניב ו CSS3 זה נהדר, אך מה אם אני משתמש גם בדפדפנים ישנים וגם בחדשים, ובכן ישנם הרבה אמצעים לבדיקת המצאות חלקים של JS אך מה עם CSS איך אדע לדוגמא אם הדף תומך ב transitions לדוגמא?

באתר הבא מצאתי קטע קוד מעניין שיצור אלמנט DIV ובודק עליו האם הPROPERTY החדש נמצא. בקיצור גם אהבתי וגם עובד.

אין תגובות:

לבקש את הCache

נראה שהטלפונים החכמים משתלטים על חיינו, ובכל זאת הגלישה עדיין איננה מהירה כפי שהייתם מצפים.
מה נדרש מווידג'ט על מנת שיוכל להיות מהיר על גבי מכשיר שכזה, ובכן CACHE, אם נשמור את הווידג'ט על גבי המכשיר ממש כמו שמחשב שולחני עושה, נקבל תוצאות מהירות טובות ונחסוך למשתמשים את זמן הטעינה.

זה אוטומטי לא?

כן, אם הקובץ לא מכיל בכתובתו משהו שונה ממה שהיה קודם, ואם השרת שהביא את הקובץ מנפק בHEADER תובנה של CACHE זה יעבוד.

אלא שמסתבר שלטלפונים סללולריים יש מגבלה נורא נמוכה של גודל, אם הרכיב שלכם גדול מ 25K אז לא יתבצע CACHE באייפון 3. 

עוד מסתבר שהחישוב הזה לא כולל דחיסה, דהיינו אם דחסתם (GZIP) המכשיר יפתח את הקובץ ורק לאחר מכן יחליט האם לשים אותו ב CACHE או לא.

להלן לינק וטבלה (למי שמתעצל לבדוק את הלינק)

אין תגובות:

ללא מילים וללא תמונות - איקונים בCSS

אני בכלל לא חושב שזה יעיל במיוחד או שתמונה טובה הייתה פותרת את העניין - אבל זה רזה מאד.

אייקונים ללא קובץ של תמונה וללא התערבות ווקטורית (כמו SVG  או CANVAS ) 
אז איך עושים את זה ? ובכן, CSS !!

מה? CSS זה הגדרות של עיצוב על אלמנטים קיימים !?! לא? 

ובכן, מומחי CSS הציחו לייצר מגוון של איקונים בעזרת CSS היתרון הוא שזה לא דורש תמונה וניתן בקלות לשנות את הגודל והצבע. 

החסרון הוא שזה לא עובד בדפדפנים המשתמשים אך ורק בCSS2 (לרוב תלוי מה זרקתם לCSS) 
דוגמא מצויינת: 


להלן דוגמא שאני יצרתי - הלוגו של אאוטברין
כדי לראות שגם אני יכול ! (עובד רק ב FF )


אין תגובות:

למה!!!???!?!?!?

האם אני האדם היחיד בעולם שמתעצבן על זה שFF שינתה את מיקום כפתור הRELOAD לצד ימין! 
מוסכמות זה בגלל שמסכימים על משהו. 

אין תגובות:

גובה מסמך ב JAVASCRIPT טהור

הכי קל זה להשמתמש ב jQuery  אך לעיתים כאשר לא משתמשים בשכאלה. להלן פונקציה שמצאתי ברשת שמגדירה גובה של מסמך

taken from 
http://james.padolsey.com/javascript/get-document-height-cross-browser/

by James Padolsey 
works great! 

 
function getDocHeight() {
    var D = document;
    return Math.max(
        Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
        Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
        Math.max(D.body.clientHeight, D.documentElement.clientHeight)
    );
}
אין תגובות:

דברים שמתכנת JS חייב לדעת

כאן אשתדל לרכז את הדברים שכל מתכנת שמשתמש ב JAVASCRIPT חייב לדעת או לעשות על מנת להקל על חייו.

אם אתה רוצה לבדוק סקריפט קטן יש לך כמה דרכים.
1. FIREBUG  אם אתה משתמש בJS ואינך משתמש בFIRE FOX - FIRE BUG אזי אינך מודע לכמה שאתה סובל.
תחת CONSOLE בצד ימין ינו לחצן אדום קטן שפותח לך אפשרות להכניס קוד ולהריץ בזמן אמת תוך שימוש בדף בו אתה נמצא.


אתר מדהים זה מכין מעין סביבת עבודה חד פעמית עם תמיכה בכל המסביב, דהיינו חלון ל JS תג שמכיל CSS קוד שמכיל HTML  אפשרות לטעינת jQuery   ושאר FRAMEWORKS 
לחיצה על Preview מובילה לצפיה ולחיצה על SAVE שומרת את השינויים ומכינה לינק עבור הדף הזה (והגרסה הספציפית) כך שבהמלך העבודה ניתן להתקדם ברסאות ולחזור אחורה במידת הצורך.

ממליץ בחום.
אין תגובות:

עז אין עז אאוט

היום אני כותב רכיב חדש לווידג'ט
זה יהיה נורא נחמד (נורא) לשלב בו תנועה בסגנון ease in - ease out בקיצור תנועה שמשנה את מהירותה לקראת הסוף

את הקוד הזה לקחתי מדף חמוד שמציג תנועתיות בג'אווה סקריפט

http://www.hesido.com/web.php?page=javascriptanimation
מאת הסידו
שפיתח את ה מולטי פופאפ הנחמד שניתן למצוא באתר שלו.

שאפו



function easeInOut(minValue,maxValue,totalSteps,actualStep,powr) {
  //Generic Animation Step Value Generator By www.hesido.com
  var delta = maxValue - minValue;
  var stepp = minValue+(Math.pow(((1 / totalSteps) * actualStep), powr) * delta);
  return Math.ceil(stepp)
}
אין תגובות:
הירשם ל- רשומות (Atom)