contextmenu event – html right click

March 9, 2016

ראשית אסביר על איזה אירוע מדובר, מה הוא עושה, איך אתם יכולים להשתמש איתו, ולבסוף אראה דוגמה מעולה שנתקלתי בה היום לשימוש בו (למעשה היא הסיבה לכתיבת הפוסט הזה) אז מה זה? contextmenu הינו אירוע javascript שמופעל כאשר לוחצים עם העכבר לחיצה ימנית על אלמנט כלשהו בדפדפן. מה הוא עושה? כברירת מחדל הוא פשוט יפתח לכם את התפריט המוכר של הדפדפן, משהו כזה: כמובן שעבור כל אלמנט יפתח תפריט שהאפשרויות בו המותאמות אליו, למשל בצילום המסך למעלה, נפתח תפריט המותאם לאלמנט תמונה,  בנוסף האפשרויות בתפריט ישתנו מדפדפן לדפדפן כשגם העיצוב שלו מוכתב מראש ע"י הדפדפן ומערכת ההפעלה, בדוגמה...
2 תגובות

simple popup

January 26, 2016

המשימה שקיבלנו הפעם היא ליצור חלון קופץ מעוצב לאתר. אז למה זה טוב? חלון קופץ יכול לשמש ככלי חזק וידידותי מאוד לאינטראקציה עם המשתמש,  למשל תוכלו לבקש כתובת אימייל מכל מי שנכנס לאתר, לשלוח למשתמש הודעת תודה נחמדה לאחר ההרשמה, לבקש את אישור המשתמש להמשיך עם פעולה מסויימת, להוציא טופס מהדף לחלון קופץ (למשל כדי לשמור על דף "נקי" יותר), או להעביר כל מסר אותו תרצו להבליט. והנה יש לנו כאן פופאפ פשוט ונחמד שעליו נעבוד היום: בתמונה רואים פופאפ עם כפתור צהוב גדול איקס קטן  ויש גם כפתור  קטן שאינו חלק מהפופאפ אלא משמש אותי לפתיחתו,...
2 תגובות

custom checkbox – 2

January 4, 2016

לאחר פרסום הפוסט הקודם קיבלתי תגובה מחבר וקולגה בשם שלום פלס, בה סיפר שהוא טרח ואף הצליח להגיע בשני דרכים שונות לתוצאה זהה לשלי אך ללא שימוש בקוד, אף לא בשורה אחת. בפוסט זה אציג בפניכם את שני הדרכים ששלום כתב לי עליהם עם מעט שיפורים קלים. הדרך הראשונה והפשוטה יותר, משתמשת בשלוש תגיות html. השניה אמנם לא נזקקת ליותר מאשר תגית ה checkbox עצמה - אך דורשת הגדרות css מתקדמות יותר. שיטה ראשונה ה HTML: Code Snippet <body>    <label>        <input type="checkbox" name="option1" />        <span>option 1</span>    </label>    <label>        <input type="checkbox" name="option2" />        <span>option 2</span>    </label>    <label>       ...
3 תגובות

custom checkbox

December 20, 2015

הבעיה: הגרפיקאית החליטה שהתיבות סימון שמגיעים כברירת מחדל – לא נאים ואינם מוצאים חן בעיניה. עליהם להיות יותר מעוצבים ואלגנטים. לדוגמא, במקום שיראו כך:   שיראו כך: קצת css והמשימה מבוצעת, נכון? אז זהו שלא. מסתבר שבלתי אפשרי לשנות את העיצוב של ה checkbox. הפתרון: יש כמה פתרונות לבעיה זו. הפתרון הראשון שהייתם חושבים עליו הוא, לעצב את הקופסאות האלו ולשים אותם במקום, להוסיף לטופס את ה checkbox ולהסתיר אותו, ובכל לחיצה על המלבן, "ללחוץ" באמצעות קוד על ה checkbox המתאים, ולשנות את הרקע  של הקופסא שלכם. הפתרון הזה אמנם עובד, אבל ישנו פתרון טוב...
3 תגובות

תפריט צד נגלל

November 25, 2015

בפוסט זה נראה איך ליצור תפריט צד נגלל לאתר שלכם. התוצאה תראה כך סגור: ופתוח: לצורך הגלילה של התפריט אשתמש לשם הנוחות והקיצור גם ב – JQuery אך ניתן כמובן לבצע זאת באמצעות javascript בלבד (לצורך הרצת הקוד המצורף תצטרכו לייבא את ספריית JQuery כמובן) נתחיל מה – html: Code Snippet <input type="button" onclick="toggleSideMenu()" value="Click me!" /><div id="side-menu">    <ul>        <li>Dashboard</li>        <li>Media Library</li>        <li>Settings</li>        <li>Dashboard</li>        <li>Media Library</li>        <li>Settings</li>        <li>Dashboard</li>        <li>Media Library</li>        <li>Settings</li>        <li>Dashboard</li>        <li>Media Library</li>        <li>Settings</li>    </ul></div> הגדרנו כפתור שבלחיצה עליו מופעלת פונקציה בשם toggleSideMenu (שמיד נכתוב אותה), ומיד לאחריו את התפריט עצמו. התפריט מורכב...
3 תגובות