מדריך jQuery – הוספת HTML, מאפיינים ואנימציות

לאחר שבפרק הקודם למדנו ללכוד את האלמנטים הרצויים באמצעות פונקציות הניווט בDOM של jQuery – בפרק הזה נדבר על החלת פונקציות שונות על האלמנט/ים שלכדנו. הפונקציות בקטגוריה הזו מתחלקות לכמה תתי קטגוריות הוספת קוד לפני/אחרי/בתוך/מחוץ האלמנט קבלת/שינוי מאפיינים ברמות שונות של האלמנט אנימציות כדרכנו, נעבור אחד אחרי השני: 1. הוספת קוד לפני/אחרי/בתוך/מחוץ האלמנט ניתן להשתמש … להמשך קריאהמדריך jQuery – הוספת HTML, מאפיינים ואנימציות

מדריך jQuery – פונקציות עבור ניווט בDOM

בפוסט הזה נדבר על הפונקציות החשובות ביותר בספריה jQuery – ניווט בעץ הHTML של האתר שלנו – הDOM. נלמד איך "לתפוס" אלמנט אחד או יותר על מנת להחיל עליהם פקודות שונות. הפונקציות בפרק הזה עדיין לא תבצענה שינויים על הDOM אלא תתנה לכם את כל הכלים להגיע לכל אלמנט מבוקש בHTML. נניח שיש לנו את … להמשך קריאהמדריך jQuery – פונקציות עבור ניווט בDOM

מדריך jQuery – מבוא

בפרק הזה נדבר על jQuery מהבסיס, מהי הספריה, איך משתמשים בה, סוגי פונקציות ודוגמאות לפונקציות שימושיות עבור כל אחד מהסוגים. מהי jQuery? jQuery זו ספריה שפותחה על שפת javaScript. היא איננה שפה נפרדת, אלא יודעת לתרגם פונקציות קצרות לקוד javaScript מורכב וארוך יותר. כך היא מקלה על המפתח וחוסכת שורות קוד ארוכות ומסובכות בצורה די פשוטה. מאחר וכאמור … להמשך קריאהמדריך jQuery – מבוא

יצירת משולש באמצעות CSS

לא רבים יודעים, אבל ניתן לייצר צורת משולש באמצעות CSS בלבד, ללא שימוש בתמונה או סקריפט. נשמע מדהים? שימו לב לדבר הבא: ועוד אחד – למה שנשתמש בזה? קודם כל – תמיד עדיף להשתמש בCSS כשאפשר, כדי לחסוך טעינת תמונה נוספת מהשרת. עניין של מהירות טעינה. וכשיש הרבה חיצים בעמוד והשרת איטי – זה עשוי … להמשך קריאהיצירת משולש באמצעות CSS

כך תבנו פופאפ בעצמכם וללא פלאגינים!

בניית פופאפ רספונסיבי ומונגש נראית מסובכת מנשוא, אבל לאחר שתקראו את הפוסט הזה – גם אתם תוכלו לבנות אחד כזה משלכם בלי בעיה. ראשית נפרק את התהליך לשלבים: יצירת הHTML הוספת CSS פתיחת הפופאפ בסקריפט התאמת CSS לפופאפ הפתוח סקריפט סגירת הפופאפ הוספת מעברים חלקים (transition) הוספת מאפיינים וסקריפטים לצורך הנגשת הפופאפ ונתחיל מההתחלה 1. … להמשך קריאהכך תבנו פופאפ בעצמכם וללא פלאגינים!

פרק ראשון במעברים חלקים – Transition

את הנושא של transition – המעברים החלקים בין שתי מצבים, נתחיל בכמה כללים בסיסיים. מהו transition? כשיש לנו אלמנט כלשהו, שיש לו שתי מצבים או יותר, ניתן לתת לו מעבר חלק בין המצבים. דוגמאות: כפתור או קישור שמקבל אפקט מעבר עכבר ופוקוס כפתור שיש לו מצב פעיל (active) איזור שמתארך למשל במעבר עכבר, כדי להציג … להמשך קריאהפרק ראשון במעברים חלקים – Transition

display – המדריך המלא להגדרה

במאמר הזה נסביר בעז"ה על סוגי הערכים שניתן לתת תחת ההגדרה של display. ומה המשמעות של כל הגדרה לעומת ההגדרות האחרות ובכלל. display: none נתחיל מהפשוטה ביותר – האלמנט כאילו לא קיים. הוא לא נראה, הוא לא תופס מקום, פוקוס לא מגיע אליו. display: block המשמעות שלו היא כשמו: בלוק. בהיעדר הגדרות ייעודיות יורד שורה אחרי … להמשך קריאהdisplay – המדריך המלא להגדרה

Position בCSS

נכון לCSS 3 יש מספר ערכי position, כל אחד עם מאפייניו ושיגיונותיו. position: static נתחיל בהגדרה הדיפולטיבית. האלמנט מתחשב באלמנטים אחרים על המסך ואלמנטים אחרים על המסך מתחשבים בו לא ניתן לתת לו הגדרות מיקום אבסולוטיות (הרחבה בפוסט אחר בעז"ה) במידה ונרצה לדרוס הגדרת position בהגדרת הדיפולט – זו ההגדרה הדרושה לנו. בנוסף –  הגדרת הstatic … להמשך קריאהPosition בCSS

יישור אנכי לאלמנטים

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