שלמה גולדברג (הרב דוטנט)

jQuery progress bar label

בקשו ממנו להשתמש ב – jquery progress bar ולהציג את האחוזים מתחת ל – progress bar צמוד לערך שלו, כלומר משהו כזה:   הדרך לעשות זאת היא פשוטה, בהינתן שיש לנו את ה – html הבא: Code Snippet < div class ="wrapper">     < div class ="progressbar" data-value ="20"></ div >     < div class ="value"> 20 </ div > </ div > < br /> < div class ="wrapper">     <...

שליחת חלק מה – html למייל.

בעבר כתבתי על שליחת דף html מצורף למייל, כשהטכנולוגיה השלטת הייתה asp.net web forms, היום העולם כמובן השתנה, ואנחנו עובדים הרבה בצד הלקוח. הדרישה הנוכחית הייתה לשלוח קטע html מסויים למייל ללקוח. במידה ומספיק לשלוח את ה – html, ללא עיצוב הכול יותר פשוט, נניח שיש לנו את ה – html שנותן את התוצאה הבאה:   בלחיצה על הלחצן נכתוב את הקוד הבא: (בהנחה שאתם מכירים jQuery) Code Snippet function sendMail() {     var str = escape($( '#myDiv' ).parent().html());     var...

משימה שלישית עם (3) knockout

בהמשך לפוסטים הקודמים על KO, נראה הפעם עבודה עם ולידציות. נכתוב את ה – html הבא: Code Snippet < table id ="tblContact">     < tr >         < td >שם : </ td >         < td >             < input type ="text" data-bind ="value: Name" /></ td >     </ tr >    ...

DateTime in JSON

אחד הדברים המעצבנים בעבודה עם ajax, זה הדרך שבה חוזר אובייקט DateTime. בהנחה שהאובייקט נראה כך: Code Snippet public class Person { public int MyProperty { get ; set ; } public DateTime Time { get ; set ; } } ויש לנו Action הנראה כך: Code Snippet [ HttpGet ] public JsonResult GetPerson() { return Json( new Person () { MyProperty = 2, Time = DateTime .Now }, JsonRequestBehavior .AllowGet); } כשנקרא ל – action בעזרת jQuery ajax: Code Snippet var personFromServer = null ; // Get data from server $.getJSON...

משימה שנייה עם (2) knockout

כתבתי כיצד מתחילים לעבוד עם knockout, בפעם הזאת נראה דוגמא קצת יותר מתקדמת. נגדיר את המשימה הבאה: דף שבו המשתמש יכול להכניס ID של משתמש, לקבל את השם והגיל, לעדכן אותם ולשלוח בחזרה לשרת. הדף יראה כך:   נחשוב לרגע על קוד רגיל שהיינו כותבים. היינו נרשמים לאירוע change של תיבת הטקסט הראשונה, שולחים את ה – Id לשרת, בצד השרת נחזיר אובייקט Person ללקוח, בצד הלקוח נעבור על המאפיינים, נדאג להכניס אותם לתיבות הטקסט, ולאחר מכן בזמן לחיצה על Update ניקח את הערכים מתוך תיבות הטקסט ונשלח אותם לשרת. (הקוד...

רינדור הרבה תוכן בצד הלקוח

לאחרונה אנחנו עדים לשינוי הקו בפיתוח אתרי ה - web (כשכמובן פיתוח ב - asp.net mvc מוביל לשם) שהרבה מבניית התוכן של הדף עובר לצד הלקוח, בעזרת jQuery או knockout וכדו'. אחת מהבעיות שפיתוח בסגנון זה יכול לגרום, שברגע שהרבה מה - html נבנה דינמית המשתמש יראה את הדף נבנה שלב אחרי שלב, מה שכמובן בכלל לא כזה נחמד. ידידי היקר תומר קיסר כתב פיתרון כל כך פשוט שהוא גאוני, יש להוסיף ל - body את המקטע הבא: body { visibility : hidden ; } בנוסף יש לכתוב בסוף ה - document.ready את הקוד הבא: $(document).ready(...

טבעת בלוגים – שלום עולם

רון קליין יצא במיזם שנקרא שלום עולם , מטרת המיזם היא לעזור לבלוגרים הכותבים בעברית לפרסם את הפוסטים שלהם. לקריאה ומידע נוסף – בבלוג של רון . מי ששם לב – בצד ימין ברשימת הלינקים הוספתי "טבעת בלוגים" המכיל לינקים לשני פוסטים מהקהילה. לבלוגרים הכותבים בעברית בפלטפורמת הבלוגים של מייקרוסופט, כך תוכלו להצטרף למיזם. גלשו לאתר הבלוגים, פתחו את ה – Control Panel, לחצו על My Blogs, כעת לכו כל Global Settings, ובסוף לחצו על Title Description and News. גללו באתר לסוף העמוד – שם יש מקטע בשם "Raw...

placeHolder jQuery plugin

הקדמה: אחד מהתכונות החדשות של html5 נקרא placeholder , מאפיין זה מאפשר להגדיר טקסט שיוצג (בדרך כלל באפור) על תיבת הטקסט כל עוד שהמשתמש לא כתב משהו אחר, וכמובן כשתיבת הטקסט לא נמצאת בפוקוס. לצערנו לא כל הדפדפנים תומכים כיום במאפיין זה, קיימים כמה וכמה plugins המאפשרים תמיכה בתכונה זו גם עבור דפדפנים שאינם תומכים, אבל החלטתי שאני רוצה לכתוב אחד לבד – לפחות כדי לכתוב jQuery plugin בעצמי.   ( להורדת הקוד המלא .) ראשית, נגדיר מה הם הדרישות ל – plugin שלנו. יאפשר להכניס לתיבת טקסט – טקסט ברירת מחדל...

הוספת CSS בעזרת jQuery

ב – jQuery קיימים הפונקציות addClass, removeClass המאפשרים להוסיף לאלמנטים css classes קיימים, כדי להוסיף css שלא קיים האופציה הבנויה ב – jQuery היא בעזרת css, כך:   $( 'selector' ).css( 'color' , 'red' );   במקרה מסוים הייתי צריך ליצור מחלקה ב – css בזמן ריצה ולא רק להוסיף מאפיינים, מצאתי את הפתרון כאן , בצורה הזאת: $( '<style>' ).text( '.placeHolderClass { color: red; }' ).appendTo( 'head' );

override alert function

בעבר כתבתי כיצד לדרוס את ההתנהגות הדפולטבית של parseInt, הפעם אני רוצה להראות איך קוד פשוט ישדרג את ה – alert הסטדנרטי של הדפדפן לשימוש ב – jquery ui dialog בדרך כלל הקוד הבא: < input type ="button" value ="Show" onclick ="alert('is jquery ui dialog ?')" /> לחיצה על הלחצן תציג את ההודעה הבאה: במידה ונכתוב את הקוד הבא: (בתחילת העמוד) < script src ="js/jquery-1.7.1.min.js" type ="text/javascript"></ script > < link href...

jquery ajax with async set to false and beforeSend registration

לאחרונה הגיעה אלי שאלה מעניינת, אני משתמשת הרבה בקריאות סינכרוניות מקליינט לWCF. לפני כל קריאה אני משנה את הcursor ל wait. הבעיה היא שהוא כל כך מהיר שעוד לפני שהוא מספיק להפוך את העכבר – הוא כבר מגיע אל ה WCF ומקפיא את המסך, באופן שהעכבר נשאר כשהיה , עד שהקריאה חוזרת חזרה (בקריאות א-סינכרוניות כמובן שזה לא קורה) פתרתי את הבעייה הזו באמצעות window.setTimeout(function () { CallWCF(); }, 10); ואז ה wait cursor מספיק להתבצע לפני שהקריאה נשלחת עקב ההשהייה. האם יש פתרון מוצלח יותר במקום למלא את הקוד ב...

חלוקת האתר לכמה חלקים וכיצד לעדכן את השרת מהיכן הגיעה הקריאה אליו

לא מזמן התבקשתי לעזור לתכנן אפליקציית אינטרנט בה המסך יכול להיות מחולק לכמה חלקים, והמשתמש יכול לגלוש באותה אפליקצייה מכל חלק - כך שהוא יוכל לראות כמה חלקים שונים של אותה אפליקצייה, באותו מסך. במידה שהיינו מתחילים לכתוב את האפליקצייה מאפס, כנראה שהיינו בוחרים ב - Single Applcation Page וכל האתר היה עובד ב - ajax, וכך לא היה שום בעיה לחלק את המסך לשניים או יותר חלקים. הבעייה שהאתר כבר היה כתוב :-) במקרה הזה לאחר חשיבה הגענו למסקנה שהשיטה הכי יעילה, היא לחלק את העמוד הראשי לכמה iframes שהמשתמש יוכל...

Introduction to ASP.NET MVC 3 - Part 3

בהמשך לפוסטים שיכניסו אתכם לעולם ה - Asp.net MVC, נמשיך לפתור תרגילים כדי ללמוד את הטכנולוגיה. תרגיל מספר 4 - הודעות שגיאה על ערכים בלתי תקינים. אמנם בפרק זה אין נגיעה ממשית ב - asp.net mvc, אך היות שסדרה זו מיועדת לנכנסים לעולם ה - web ללא רקע מוקדם, חלק מהתרגילים יגעו בעולמות שונים מעולם ה - web. תיאור התרגיל: הצגת הודעות שגיאה למשתמש בעזרת אנימצייה של הודעה (בסגנון ההודעות של Gmail). מטרת התרגיל: עבודה עם css, עבודה עם jQuery. עבודה עם timers. שלבים: הוסיפו לדף ה - Layout.cshtml אלמנט מסוג div...

החשכת המסך בזמן פניית ajax של jquery

(ושוב תודה ל חיים בריקמן - על השיתוף) לרוב כשאנו עושים פעולת ajax נרצה לתת למשתמש אינדקציה שמשהו קורה, בג'ימל אנו מקבלים הודעת Loading בצהוב בראש העמוד, כשעובדים עם Update Panel יש Control שעושה את העבודה בצורה אוטומטית. כאן נראה כיצד ניתן להחשיך את המסך ולהציג במרכזו אנימציה בזמן פניית ajax. ( כאן הדגמתי כיצד לעשות זאת ידנית - בזמן לחיצה על כפתור) בקובץ js מרכזי (שכל הדפים מכילים אותו) נכתוב את הקוד הבא: $.ajaxSetup({ beforeSend: function () { var $window = $(window); var $body = $( 'body'...

background-position RTL jQuery plugin

כיצד להגדיר background-position כשמדובר באתרים עם rtl ? התחלתי לעצב אתר כשקבלתי עיצוב מותאם לאנגלית והייתי צריך לשנות אותו לעברית, על ההתחלה נתקלתי בבעייה הבאה: נקח לדוגמא את ה - css הבא: body { background-image : url('Penguins.jpg') ; background-repeat : repeat-y ; background-position-x : 30px ; } css פשוט ביותר שיגרום לתמונה מסויימת להתחיל בשלושים פיקסל ימינה, מה יקרה עם נוסיף את השורה הבאה: direction : rtl ; האתר יעבור לצד ימין, כשתמונת הרקע נשארה תקועה בצד שמאל, בעוד שהכוונה כרגע שמצד...