Content property – CSS3

יום רביעי, ינואר 2, 2013

המאפיין content ב – css3 מאפשר לכתוב טקסטים בעזרת css. לכאורה זה נראה מוזר, למה צריך לכתוב טקסטים בעזרת css, בהמשך נראה שזה יכול לחסוך הרבה עבודה ב – JS, וגם לאפשר לעשות דברים שאי אפשר אחרת. ראשית נכיר חלק מהאופציות לכתיבה. המאפיין content יכול לבוא רק עם selctor של after או before, ה – selctor-ים הללו, מאפשרים לעצב מה יהיה לפני או אחרי האלמט, לדוגמא: ...
תגיות: , , , ,
2 תגובות

details and summary – html5

יום שבת, דצמבר 29, 2012

בעבר כתבתי על חלק מהאלמנטים החדשים של HTML5, אחד מהאלמנטים הינו details שמאפשר להגדיר חלק ב – UI שיהיה collapsable, כך:   <details>     <summary>This is a summary</summary>     <ul>         <li>Item 1</li>         <li>Item 2</li> ...
תגיות: , , , ,
אין תגובות

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

יום שני, יולי 30, 2012

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

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

יום ראשון, יוני 17, 2012

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

Dynamically loading or removing an external JavaScript or CSS file

יום שני, מאי 7, 2012

  המקור לקוד בפוסט זה מגיע מכאן   לא מזמן כתבתי אתר קטן, שהיה צריך לתמוך במעבר בין עברית לאנגלית, כמובן שזה תמיד כאב ראש ויש כל מיני שיטות לעשות זאת (בעיקר הבעייה עם שינוי הכיוון)     בפעם הזאת בחרתי להתמודד עם הבעייה בצורה הבאה:   כתבתי קובץ css ובו העיצוב משמאל לימין כמו שצריך להיות באנגלית.   כתבתי קובץ css נוסף שבו מופיעים כל השנויים מבחינת העיצוב עבור השפה העברית (align, padding, marging, background וכד')     כעת במעבר לעברית הפעלתי את הפונקציה הבאה:   function loadjscssfile(filename, filetype) {     if (filetype == "js") { //if filename is a external JavaScript file         var fileref = document.createElement('script')         fileref.setAttribute("type", "text/javascript")         fileref.setAttribute("src", filename)    ...
תגיות: , , , ,
אין תגובות

background-size in IE 8

יום שני, פברואר 13, 2012

  בפורום החדש של msdn על עולם ה - web, עלתה שאלה כיצד ניתן לאפשר שימוש ב -background-size גם בגרסאות ישנות של ie,   במידה וכל מה שרוצים הוא להתאים את התמונה לפקד שעוטף אותה - ניתן להשתמש ב - filter, בצורה הבאה:     filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='1.gif', sizingMethod='scale');   שורת הקוד הזאת תקטין את תמונת הרקע לפי גודל ה - div.   הבעייה אם אנחנו רוצים להגדיר רוחב וגובה של התמונה שלא תהיה באותו גודל של ה - div שעוטף אותה.   במקרה כזה בדפדפנים חדשים נוכל לכתוב   background-size: 90px 90px;     אחרי הרבה חיפושים הגעתי למסקנה שאי אפשר באמת ב - IE8 לתמוך בזה הצורה רגילה, לכן כתבתי את ה - handler עם הקוד...
אין תגובות

center elements in html

יום שלישי, ינואר 17, 2012

  כיצד למרכז אלמנטים בעזרת css.   סביר להניח שזה פשוט למי שכבר יודע - אבל למי שלא - הפוסט הזה יכול לחסוך שעות של נסיונות נואשים.     אז ככה. בעבר היה דרך (עובד גם היום רק שיצא מהתקן) לכתוב כך: <center>     ..... </center>   כל מה שיופיע בתוך התגיות ימורכז, הסיבה שזה יצא מהתקן היא מכיוון שאנחנו אמורים לכתוב ב - html את התוכן ולא את העיצוב.   מה שצריך לעשות זה כך:   .center {     margin-left: auto;     margin-right: auto;     text-align: center; }   אלמנט שיקבל את ה - class המתאים (center) ימורכז - כמובן שהוא צריך שיוגדר לו width כלשהו שקטן מגודל ה - container שלו.   כל זה יעבוד רק אם לא הגדרתם הגדרה מיוחדת ל -...
תגיות: , ,
2 תגובות

background-position RTL jQuery plugin

יום שלישי, אוקטובר 25, 2011

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

text-shadow CSS3

יום שני, אפריל 11, 2011

  כחלק מהתקן של CSS3 הגיע מאפיין חדש בשם text-shadow שמגדיר צל עבור טקסט.   div {     font-family: Arial;     font-size: 55px;     width: 250px;     height: 250px;     border: 1px solid black;     margin: 20px;     padding: 20px;     text-shadow: rgba(0,0,0,0.7) -1px -1px,                 rgba(0,0,0,0.5) -2px -2px,                 rgba(0,0,0,0.3) -3px -3px;     background-color: Yellow; }     <div>     Sela College Channel </div>      בדוגמא אפשר לראות שמוגדר כמה שבות של צל. התוצאה של הקוד הזה:       נכון להיום זה עדיין לא נתמך ב - IE, נקווה שהם יתמכו בזה בקרוב.
תגיות: , , , ,
אין תגובות

במצגת והקוד מההרצאה שלי בקבוצת המשתמשים

יום שלישי, ספטמבר 21, 2010

  ב - 19/09 העברתי הרצאה על פיתוח לפי בתקנים וכיצד IE8 ו - IE9 עובדים לפי התקן, ראינו גם קצת HTML5 ו - CSS3 ועוד הרבה דברים מעניינים. (מי שלא היה הפסיד)     לצערי עקב הזמן המוגבל לא הספקנו לראות איך מגדירים WebSlice, Search Providers, Accelerators (אולי בפעם הבאה).       אני מקווה שהקהל נהנה - אני נהניתי.     מצורף כאן הקוד והמצגת.       בקרוב כשנעלה את ה - Sela Collage Channel אני אעביר שוב את ההרצאה בשידור חי.
אין תגובות