What is new in IE9 - Overlapping Tags

מה ההתנהגות לפי התקן כשתגים מקוננים אחד בתוך השני.

הדוגמא לקוחה מה - MSDN

מה קורה כשיש לנו את ה - html הבא

You should be aware of how <b>this <i>affects</b> script</i>.

כמובן שהמילים this affects יופיעו במודגש והמילים affects script יופיעו בהטייה.

אבל כשננסה לגשת אליהם בסקריפט, למשל הרצת הקוד הבא

var elms = document.getElementsByTagName("i");

ב - IE8 יוחזר אלמנט אחד שה - innerText שלו הוא: affects script

ואילו ב - IE9 יוחזרו שני אלמנטים (כל מילה היא אלמנט) מכיוון שהתג i מקונן ב - b.

(אם היו שואלים אותי - ההתנהגות של IE8 נראית לי יותר הגיונית, חבל שלא אני קובע את התקן)

הרצת הקוד הבא

function load() {
    var elms = document.getElementsByTagName("i");
    alert(elms.length);
    for (var i = 0; i < elms.length; i++) {
        var elm = elms[i];
        alert(elm.innerText);
        if (elm.parentNode.tagName.toLowerCase() == "b")
            elm.style.color = "red";
    }
}

ב - IE8 תצבע כמובן באדום את סוף המשפט ואילו ב - IE9 רק המילה affects תצבע באדום.

Posted: Aug 29 2010, 07:41 AM by Shlomo | with 1 comment(s)

תגים:DEV, CSS, html5, ie9, internet Explorer 9

הדלק זרקור / כבה זרקור - החשכת המסך עם שקיפות

כיצד לממש החשכת המסך עם שקיפות.

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

לאחר לחיצה על הלחצן, המסך מוחשך (אבל שקוף) ורק הנגן עדיין בפעולה.

כמו שכתבתי אנחנו עומדים לשחרר את Sela Collage Online לאוויר וכמובן רצינו את הפיצ'ר הנחמד הזה גם אצלנו.

בפוסט הנוכחי אני אדגים כיצד לממש את זה - להורדת הקוד המלא של הדוגמא.

נתחיל.

נניח שהמסך שלנו נראה כך:

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

יש לנו מקטע שהסרט מתנגן.

יש לנו מקטע של תוכן ותמונות. (תמונה מעניינת בחרתי - לא ?)

אנחנו רוצים שבזמן לחיצה על "הדלק/כבה זרקור" - הזרקור ידלק במידה והוא מכובה - והפוך.

נוסיף את האלמנט הבא: (היכן שהוא בעמוד)

<div class="zarkorOff" id="forZarkor">
    &nbsp;</div>

התפקיד של ה - div יהיה לכסות את כל המסך בזמן לחיצה, כמובן שבזמן טעינת העמוד הוא משוייך ל - class בשם zarkorOff

.zarkorOff
{
    display: none;
    width: 1px;
    height: 1px;
    top: -100px;
}

ברגע שנלחץ על "הדלק זרקור" נרצה לשנות את ה - div ל - class הבא

.zarkorOn
{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 2500px;
    background-color: rgb(69,69,69);
    z-index: 8000;
    display: inline;
    filter: alpha(opacity=60);
    background-color: rgba(69,69,69, 0.6);
}

נגדיר לו מיקום אבסולוטי (למי שלא מכיר את ההבדלים בין המאפיינים של position חשוב לקרוא את זה)

נצמיד אותו לצד ימין ולמעלה של המסך בעזרת top ו - left

נרחיב אותו לכל העמוד וניתן לו גובה שבטוח יכסה את העמוד שלנו

נגדיר צבע רקע מתאים בעזרת rgb

נגדיר z-index מספיק גדול שיעלה על כל האלמנטים האחרים.

ונגדיר שקיפות (עבור IE8 בעזרת filter ועבור דפדפנים אחרים בעזרת rgba (שיעבוד גם ב - IE9 כמו שכבר כתבתי))

הבעייה היא שכאשר נלחץ על הלינק זה יכסה את כל המסך - כולל את הלינק בעצמו ולא נוכל ללחוץ שוב כדי לכבות אותו.

ולכן נגדיר גם את ה - class הבא

.PassZarkor
{
    z-index: 9000;
    position: relative;
    background-color: Aqua;
}

וניתן אותו לאלמנט שעוטף את הוידיאו ואת הלינק.

שימו לב שה - z-index גדול מההגדרה של ה - class שהוגדר עבור ה - div

חשוב להגדיר את ה - position כ - relative היות שברירת המחדל היא static ואז הוא מתעלם מהגדרות של z-index

הנה הסקריפט

var on = false;
function change() {
 
    if (on) {
        document.getElementById('forZarkor').className = 'zarkorOff';
 
        var objects = document.getElementsByTagName("object");
        for (var i = 0; i < objects.length; i++) {
            objects[i].style.display = 'block';
        }
    }
    else {
        document.getElementById('forZarkor').className = 'zarkorOn';
 
        var objects = document.getElementsByTagName("object");
        for (var i = 0; i < objects.length; i++) {
            objects[i].style.display = 'none';
        }
    }
 
    on = !on;
 
}

כל מה שצריך לעשות זה - לשנות את ה - class של ה - div.

הסיבה לקוד שמסתיר את כל התגים מסוג object - היא מכיוון שבדרך כלל יש לנו גם אובייקטי flash (פירסומות) על המסך, ולא משנה איזה z-index תגדירו הם תמיד יעלו על האלמנטים שלנו, ולכן אנחנו מסתירים את כל האלמנטים מסוג object.

לאחר לחיצה על הלינק - נקבל את המסך הבא

Posted: Aug 27 2010, 01:45 AM by Shlomo | with 2 comment(s)

תגים:DEV, JavaScript, html, CSS, Sela, Sela College Channel

הרצה של כמה שאילתות שתלויות זה בזה

לפעמים רוצים להריץ כמה שאילתות של SQL אחד אחרי השני ברצף, עבור שאילתות שלא תלויים אחד בשני אפשר לעשות את זה עם ; למשל.

SELECT Id FROM Users;
 
UPDATE Links SET [Order] = 1 WHERE Id = 2;
 
UPDATE News SET [Name] = 'My Name' WHERE Id = 20;

אבל במידה והשאילתא השנייה תלוייה בראשונה, לדוגמא.

אתם רוצים להוסיף עמודה חדשה לטבלה קיימת שיש בה כבר שורות, אבל אתם רוצים שלא יוכלו להכניס בה ערכי NULL,

אתם לא יכולים לייצר אותה מראש בלי NULL מכיוון שכבר יש שורות, ולכן צריך להוסיף את העמודה, לעדכן את כל השורות ולעדכן את העמודה.

אם נריץ את השאילתה הבאה:

ALTER TABLE Users ADD [AllowQuestion] bit;
 
UPDATE Users SET AllowQuestion = 1;
 
ALTER TABLE Users ALTER COLUMN [AllowQuestion] bit not null;

תקבלו הודעת שגיאה - "Invalid column name AllowQuastion"

מכיוון שבהרצת השאילתא השנייה עדיין השאילתא הראשונה לא התבצעה/הסתיימה.

הפיתרן הוא להשתמש ב - BEGIN ו - END

GO
BEGIN
    ALTER TABLE Users ADD [AllowQuestion] bit;
END
 
GO
BEGIN
    UPDATE Users SET AllowQuestion = 1;
END
 
GO
BEGIN
    ALTER TABLE Users ALTER COLUMN [AllowQuestion] bit not null;
END

Posted: Aug 26 2010, 11:47 PM by Shlomo | with 5 comment(s)

תגים:DEV, SQL Server

Request is not available in this context - Application_Start

למה פתאום התחלנו לקבל את השגיאה Request is not available in this context אם ניגשים אליו מתוך ה - Application_Start.

במידה ואתם ניגשים ל - HttpContext.Current.Request בתוך ה - Applicatipon_Start בגרסאות IIS7.X האפליקצייה תתחיל להתרסק (מה שלא יקרה כמובן בזמן פיתוח היות שעובדים על השרת הפנימי של visual studio)

קצת חיפושים בגוגל - והגעתי לכאן, מסתבר שבגרסאות קודמות של IIS היה מוד אחד בלבד של עבודה שנקרא classic ובו אפשר לגשת לאובייקט request גם ב - application_start לעומת זאת בגרסאות החדשות של IIS יש מוד חדש שנקרא Integrated ולא ניתן לבצע זאת.

ההחלטה מה המוד של האפליקציה מוגדרת ב - application pool - כלומר לכל application pool מוגדר באיזה מוד הוא עובד

לעצם הבעייה - לא מומלץ לעבוד עם classic מכיון שזה יאט את הביצועים ועדיף פשוט לא להשתמש עם אובייקט ה - request בזמן עליית האפליקציה.

במידה ואתם צריכים לדעת את הנתיב של האפליקציה תוכלו להשתמש ב - HttpRuntime.AppDomainAppVirtualPath.

להסבר טכני על ההבדל בין המודים.

לרשימת ההבדלים בין המודים (חשוב מאוד לקרוא)

Posted: Aug 26 2010, 11:52 AM by Shlomo | with no comments

תגים:DEV, ITPRO, IIS, Windows7, iis7

What is new in IE9 - Generic Element

מה השתנה בהתנהגות של IE ל - Generic Element לפי התקן.

בהמשך לפוסטים על IE9 הפעם נדבר על ההתאמה לתקן בנושא Generic Element

בגרסאות קודמות של IE במידה והיינו רוצים להגדיר אלמנטים חדשים משלנו, למשל:

myDiv
{
    color: blue;
    font-weight: bold;
    background-color: Silver;
}

(שימו לב - זה לא הגדרה של class אלא הגדרה של אלמנט)

כדי ש - IE יציג את העיצוב על אלמנטים מסוג myDiv היה צריך להשתמש ב - createElement ואילו מה שהוגדר ב - html לא השפיע. למשל הקוד הבא:

<!-- Dont work in IE8, Work in IE9 -->
<p>
    I am using a
    <myDiv id="a">generic element</myDiv>
    in this sentence.
</p>
 
<!-- Work in IE8, Work in IE9 -->
<input type="button" value="Add Element" onclick="add();" />
 
function add() {
    var genericElement = document.createElement('myDiv');
    genericElement.innerHTML = ' hello ';
    document.body.appendChild(genericElement);
}

בגרסאות קודמות - מה שהוגדר ב - html (כלומר - אלמנט שהוגדר כ - myDiv ב - html) לא היה מוצג בעיצוב הנכון

ואילו במידה והיינו מפעילים את הסקריפט זה היה עובד,

לעומת זאת ב - IE9 גם הגדרה ב - html מתרגמת את האלמנט ל - Generic Element והיעצוב מוצג כמו שצריך

Posted: Aug 26 2010, 09:58 AM by Shlomo | with no comments

תגים:DEV, CSS, html5, ie9, internet Explorer 9

Sela College Channel

ערוץ מכללת סלע יוצא לדרך.

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

כמפתח בעצמי הרבה שנים היה חסר לי מקום שירכז הרצאות (וידיאו) ומצגות בתחום התכנות כמובן שקיימים מספר אתרים שיש בהם מספר קטן יחסית של Web Casts אבל הם בדרך כלל מתרכזים בנושא או בטכנולוגיה אחת ובדרך כלל הם סרטונים קצרים.

לכן החלטנו בסלע להרים את הכפפה ולייצר את "ערוץ מכללת סלע"
ערוץ מכללת סלע ייתן מענה לבעיה שכתבתי עליה.

כמכללה וכמבצעי Web Casts שונים בארץ ובעולם יש לנו מגוון עצום של הרצאות ומצגות באורך מלא, המון סרטים שמציגים נושאים מהתחלה ועד הסוף, ו"ערוץ מכללת סלע" יחשוף אותם לטובת הקהילה, הצפייה בסרטים תהיה חינמית וכל אחד יוכל לצפות בהרצאות שבערוץ אפילו מבלי להירשם.

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

עדיין לא הכול – מי שירשם לאתר יפתחו בפניו הרבה אופציות באתר, כמו העלאה של סרטים משלכם, כן, אם יש לכם מצגת שהקלטתם ואין לכם להיכן להעלות אותה בצורה איכותית ובחינם, נשמח שתעלו את ההרצאה אלינו, כמובן שמי שירשם יוכל לשמור מועדפים ולצפות בהיסטוריה שלו ולהירשם לתוכניות לימוד מומלצות של צוות האתר (כלומר – מי שירצה ללמוד ASP.NET נוכל להמליץ על מספר מצגות שכדאי להקשיב להם לפי סדר מסוים) ועוד הרבה תוספות.

תוכלו לצפות בדף הבית של ה – Sela College Channel כאן. (כמובן שכרגע זה רק תמונה – אבל ממש בקרוב האתר יעלה לאוויר)

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

Posted: Aug 25 2010, 10:46 AM by Shlomo | with 4 comment(s)

תגים:DEV, Sela, video, Sela College Channel, SCC

What is new in IE9 - audio element

איך לנגן קבצי אודיו בדפי אינטרנט

בהמשך לפוסטים על IE9 נראה הפעם את המימוש של התקן להשמעת קבצי אודיו

כדי לנגן נוכל לכתוב את הקוד הבא

<audio src="a.mp3" 
        autoplay 
        controls
        loop>
       This content appears if the video tag or the codec is not supported. 
</audio>

נקבל את הפקד הבא

כרגע נתמכים הפורמטים MP3 ו - AAC

Posted: Aug 25 2010, 09:38 AM by Shlomo | with no comments

תגים:DEV, CSS, html5, ie9, internet Explorer 9

Add Flag and Remove Flag for enums

הדרך הקלה לשימוש ב - Enums שמוגדרים עם Flags

כשקראתי את הפוסט של עידו על הפונקצייה החדשה של Enum בשם HasFlag לא הבנתי למה הם לא הוסיפו גם Add ו - Remove.

חיפוש קצר בגוגל הביא אותי לכאן והנה לנו שני Extensions חדשים לעבודה עם Enum.

namespace System
{
    public static class EnumExtension
    {
        public static T AddFlag<T>(this Enum type, T value)
        {
            return (T)(object)(((int)(object)type | (int)(object)value));
        }
 
        public static T RemoveFlag<T>(this Enum type, T value)
        {
            return (T)(object)(((int)(object)type & ~(int)(object)value));
        }
    }
}

והשימוש פשוט ביותר

[Flags]
enum MyEnum
{
    A = 1,
    B = 2,
    C = 4
}
 
 
MyEnum my = MyEnum.A;
 
my = my.AddFlag<MyEnum>(MyEnum.C);
my = my.RemoveFlag<MyEnum>(MyEnum.A);
 
// From microsoft
bool b = my.HasFlag(MyEnum.B);

Posted: Aug 24 2010, 03:57 PM by Shlomo | with 3 comment(s)

תגים:DEV, Extension Method, C# 4.0

תיבת טקסט המאפשרת להכניס רק מספרים

איך אפשר לייצר תיבת טקסט ב - html המאפשרת להכניס רק מספרים.

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

function JustNumbersKeyPress() {
 
    var charCode = (event.which) ? event.which : event.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }
    return true;
}
 
function JustNumbersPaste(txt) {
    event.returnValue = false;
    var checkText = window.clipboardData.getData('Text');
    if (checkText.length > 9) {
        return;
    }
    for (i = 0; i < checkText.length; i++) {
        if (checkText.charAt(i) != 0 &&
                    checkText.charAt(i) != 1 &&
                    checkText.charAt(i) != 2 &&
                    checkText.charAt(i) != 3 &&
                    checkText.charAt(i) != 4 &&
                    checkText.charAt(i) != 5 &&
                    checkText.charAt(i) != 6 &&
                    checkText.charAt(i) != 7 &&
                    checkText.charAt(i) != 8 &&
                    checkText.charAt(i) != 9)
            return;
    }
    txt.value = txt.value + checkText;
}
 
<input type="text" id="txt1" 
        onkeypress="return JustNumbersKeyPress();" 
        onpaste="return JustNumbersPaste(this);" />

מה שיקרה הוא שבזמן כתיבה בתיבת הטקסט נפעיל את הפונקציה JustNumbersKeyPress שתבדוק מהו התו שנכנס ובמידה וזה לא מספר נחזיר false.

הקוד של הדבקה הוא טיפה יותר מסובך, מה שעושים הוא, ראשית לבטל את האירוע של ההדבקה, שנית לקחת את הערך מתוך ה - clipborad ושלישית לבדוק האם זה מספר.

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

Posted: Aug 24 2010, 12:43 PM by Shlomo | with 2 comment(s)

תגים:DEV, Web, JavaScript, html

הוספת Mime Types ב - IIS 7.5 וב - IIS 6

מה זה Mime Type ואיך להוסיף אותם בגרסאות השונות של IIS

Mime Type מגדיר מהו סוג הקובץ שאנחנו מדברים עליו, התרגום שלו במקור היה למיילים ולכן הראשי תיבות שלו הם Multipurpose Internet Mail Extensions הם נקראים גם Internet media type וזה משמש גם ב - header של HTTP (שם זה נקרא Content-Type)

ב - IIS אפשר למצוא את ההגדרות של ה - Mime Types שהוא מכיר ויודע מה לעשות איתם.

נניח שיש לכם קובץ מסוג mp4 ואתם רוצים לאפשר לגלוש אליו ולהוריד אותו, ב - IIS 6 תקבלו 404 (The page cannot be found) ובגרסאות מתקדמות יותר תקבלו 404.3 (הודעת הגיאה הבאה)

HTTP Error 404.3 - Not Found
The page you are requesting cannot be served because of the extension configuration. If the page is a script, add a handler. If the file should be downloaded, add a MIME map

כדי לפתור את זה אנחנו צריכים להוסיף Mime Type מתאים.

ב - IIS 7 ומעלה עושים את זה בצורה הבאה:

1. הכנסו לניהול ה - IIS (בעזרת הרצה של inetmgr)

2. תחת הקטגוריה של IIS תבחרו ב - Mime Type

לחצו double click עליו

במסך שתקבלו מצד ימין בחרו באופצייה של Add

תקבלו את המסך הבא

הוסיפו את סיומת הקובץ החדשה (במקרה שלנו mp4.)

הוסיפו את ה - MIME type (במקרה שלנו video/x-msvideo)

(אפשר גם לעשות את מ - CommandLine - לקריאה בנושא)

וכעת כשנגלוש לקובץ נקבל אפשרות להורדה של הקובץ.

ב - IIS 6 זה אותו רעיון חוץ מהעובדה שהמסכים שונים במקצת.

פתחו את הניהול של IIS (בעזרת inetmgr)

לחיצה ימנית על ה - WebSite ובחירה ב - Properties.

עברו לטאב של HTTP Headers

לחצו על Mime Types ואז על New

הגדירו את ה - Mime type שלכם, והכול יעבוד כמו שצריך.

Posted: Aug 24 2010, 10:52 AM by Shlomo | with 1 comment(s)

תגים:ITPRO, Windows, IIS, Windows7

What is new in IE9 - video element

איך להציג וידיאו בדפי אינטרנט.

בהמשך לפוסטים על התכונות של IE9 נדבר הפעם על הטמעה של קבצי וידיאו באתר

(רוב המידע בפוסטים שלי על IE9 מגיע מהאתר של מייקרוסופט)

בעבר כדי להציג וידיאו היינו צריכים להשתמש ב - active-x שונים, היום בעזרת התמיכה ב - HTML5 נוכל להטמיע קבצי וידיאו בפשטות

<video width="400" 
        height="300" 
        src="a.mp4" 
        poster="frame.jpg" 
        autoplay 
        controls
        loop>
       This content appears if the video tag or the codec is not supported. 
</video>

בקוד הזה אנו מגדירים אלמנט מסוג וידיאו ברוחב 400 ובגובה 300

הקובץ שיתנגן הוא a.mp4

בזמן טעינת הוידיאו תוצג התמונה poster.jpg

הוידיאו יתחיל להתנגן בצורה אוטומטית

יהיה למשתמש שליטה על הוידיאו

והוידיאו יתנגן בלולאה.

במידה והטעינה תכשל יופיע הטקסט המצורף.

בשלב הנוכחי Internet Explorer Platform Preview תומכת בפורמטים הבאים

MP4 container, H.264 video, all profiles
audio in AAC or MP3

במידה ותנסו לעשות את זה אצלכם במחשב על קבצים לוקליים, אתם צריכים להוסיף Mime Type כדי שה - IIS ידע איך לטפל בקבצים מסוג mp4.

ה - Mime Type צריך להיות video/x-msvideo (אני אדגים איך עושים את זה בפוסט הבא)

Posted: Aug 24 2010, 10:05 AM by Shlomo | with no comments

תגים:DEV, CSS, html5, ie9, internet Explorer 9

What is new in IE9 - Media Queries

בהמשך לפוסטים על IE9 נראה את ההטמעה של ה - Media Queries כפי שהוגדר בתקן

בעבר במידה ורצינו להציג את הדף לפי הרזולוצייה או לפי רוחב המסך היינו צריכים לכתוב javascript שיעשה את העבודה. לא עוד מהיום נוכל לתשאל בעזרת Media Query הגדרות שונות של סביבת העבודה.

למשל - הקוד הבא

div
{
    border: solid 1px black;
}
@media screen and (max-width:400px)
{
    div
    {
        border: none;
    }
}

מגדיר שבמידה ורוחב המסך קטן מ - 400px המסגרות של ה - div-ים יעלמו.

(זה ממש נחמד לראות את המסגרות נעלמים ברגע שמקטינים את המסך)

אפשר לתשאל בעוד הרבה דברים.

גובה,

רוחב,

גובה ורוחב של mobile,

האם הרוחב גדול מהגובה,

מה היחס בין הרוחב לגובה (1280/720 או 2560/1440 ועוד)

כמה צבעים המסך תומך

מה הרזולוצייה של המסך

ועוד.

לקריאה מלאה אפשר לקרוא בהגדרה של התקן וכמובן אפשר לקרוא על כל הפיצ'רים שאני כותב עליהם באתר של מיקרוסופט

Posted: Aug 22 2010, 09:49 AM by Shlomo | with no comments

תגים:DEV, CSS, html5, ie9, internet Explorer 9

What is new in IE9 - color property (Transparent)

שימוש בשקיפות של צבע טקסט.

בהמשך לפוסטים היומיים אודות IE9 הפעם נראה שהמאפיין color קבל את האופצייה לערך Transparent.

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

לדוגמא

<div class="c">
    הזז את העכבר על האלמנט כדי להעלים את הטקסט ולראות את המסגרת
</div>
 
.c
{
    color: Red;
    border: solid 2px white;
    background-color: Lime;
    width: 200px;
    height: 200px;
    direction: rtl;
    text-align: center;
    padding: 10px;
    border-color: Transparent;
}
.c:hover
{
    color: Transparent;
    border: solid 2px black;
}

כשהעכבר יהיה מחוץ לאלמנט נראה את התמונה הבאה.

כהשעכבר יהיה בתוך המסגרת נקבל:

Posted: Aug 20 2010, 12:09 PM by Shlomo | with no comments

תגים:DEV, CSS, html5, ie9, internet Explorer 9

What is new in IE9 - opacity

כיצד להגדיר שקיפות לאלמנטים ב - IE9.

בהמשך לפוסטים על IE9 נכיר את האלמנט החדש של CSS 3 שנקרא opacity.

בכדי לתת שקיפות לאלמנטים ב - html נוכל להשתמש ב - opacity, למשל:

<p style="background-color:Red; width:200px; text-align:center">
    <input type="button" value="Click Me" style="opacity: 0.7;" />
</p>

בדפדפנים ישנים נראה את זה:

ואילו בדפדפנים חדשים

או אפשר לדוגמא להציג מגוון של צבעים בעזרת הקוד הבא:

<table class="opacity_sample" cellspacing="0">
    <tr>
        <td style="opacity: 0.0;">
        </td>
        <td style="opacity: 0.05;">
        </td>
        <td style="opacity: 0.1;">
        </td>
        <td style="opacity: 0.15;">
        </td>
        <td style="opacity: 0.2;">
        </td>
        <td style="opacity: 0.25;">
        </td>
        <td style="opacity: 0.3;">
        </td>
        <td style="opacity: 0.35;">
        </td>
        <td style="opacity: 0.4;">
        </td>
        <td style="opacity: 0.45;">
        </td>
        <td style="opacity: 0.5;">
        </td>
        <td style="opacity: 0.55;">
        </td>
        <td style="opacity: 0.6;">
        </td>
        <td style="opacity: 0.65;">
        </td>
        <td style="opacity: 0.7;">
        </td>
        <td style="opacity: 0.75;">
        </td>
        <td style="opacity: 0.8;">
        </td>
        <td style="opacity: 0.85;">
        </td>
        <td style="opacity: 0.9;">
        </td>
        <td style="opacity: 0.95;">
        </td>
        <td style="opacity: 1.0;">
        </td>
        <td style="opacity: 1.0;">
        </td>
        <td style="opacity: 0.95;">
        </td>
        <td style="opacity: 0.9;">
        </td>
        <td style="opacity: 0.85;">
        </td>
        <td style="opacity: 0.8;">
        </td>
        <td style="opacity: 0.75;">
        </td>
        <td style="opacity: 0.7;">
        </td>
        <td style="opacity: 0.65;">
        </td>
        <td style="opacity: 0.6;">
        </td>
        <td style="opacity: 0.55;">
        </td>
        <td style="opacity: 0.5;">
        </td>
        <td style="opacity: 0.45;">
        </td>
        <td style="opacity: 0.4;">
        </td>
        <td style="opacity: 0.35;">
        </td>
        <td style="opacity: 0.3;">
        </td>
        <td style="opacity: 0.25;">
        </td>
        <td style="opacity: 0.2;">
        </td>
        <td style="opacity: 0.15;">
        </td>
        <td style="opacity: 0.1;">
        </td>
        <td style="opacity: 0.05;">
        </td>
        <td style="opacity: 0.0;">
        </td>
    </tr>
</table>
 
.opacity_sample
{
    width: 300px;
    height: 250px;
    border: solid 1px black;
}
td
{
    width: 41px;
    height: 250px;
    background-color: Navy;
}
div
{
    opacity: 0.5;
    position: absolute;
    text-align: center;
    color: rgba(255,0,0,0.5);
    font-weight: bold;
    background-color: Silver;
    width: 200px;
    top: 89px;
    left: 41px;
}

בדפדפנים ישנים.

ואילו בדפדפנים חדשים

Posted: Aug 19 2010, 02:55 PM by Shlomo | with no comments

תגים:DEV, CSS, html5, ie9, internet Explorer 9

What is new in IE9 - background-color (rgba)

כיצד להגדיר צבעים עם שקיפות ב - IE9

בהמשך לפוסטים שלי על IE9 נראה היום את האפשרות להגדיר צבעים עם שקיפות.

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

עד היום יכולנו להגדיר צבע בעזרת

background-color: rgb(255,0,0);

היום אפשר גם להגדיר שקיפות לצבע בעזרת

background-color: rgba(255,0,0,0.5);

כשמידת השקיפות היא בין 0.0 לבין 1.0

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

<div style="position: absolute; top: 43px; left: 634px;">
    shlomo goldberg
    <br />
    <br />
    shlomo goldberg<br />
    <br />
    <br />
    shlomo goldberg
    <br />
    shlomo goldberg
    <br />
    shlomo goldberg
    <br />
    shlomo goldberg
    <br />
    shlomo goldberg
    <br />
</div>
<br />
<p>
    aaaaaaaaaaaaaaaaaaaaaaa
</p>

אמור לגרום שה - div יהיה על ה - p.

במידה ונכתוב את ה - style הבא

div
{
    background-color: #ff7f7f;
    background-color: rgba(255,0,0,0.5);
}

הצבע שמוגדר בשורה הראשונה הינו אותו צבע שיוצא כתוצאה מהשקיפות של ה - rgba. (בשביל דפדפנים ישנים).

התוצאה ב - IE8 תהיה

ואילו בדפדפנים חדשים

ואכן אפשר לראות שהצבע קיבל שקיפות ואפשר לראות את מה שכתוב מאחורי ה - div

Posted: Aug 18 2010, 11:17 AM by Shlomo | with no comments

תגים:DEV, CSS, html5, ie9, internet Explorer 9

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

פוסטים אחרונים

תגיות

ניווט

ארכיון

August 2010 - Posts

What is new in IE9 - Overlapping Tags

מה ההתנהגות לפי התקן כשתגים מקוננים אחד בתוך השני.

הדלק זרקור / כבה זרקור - החשכת המסך עם שקיפות

כיצד לממש החשכת המסך עם שקיפות.

הרצה של כמה שאילתות שתלויות זה בזה

Request is not available in this context - Application_Start

למה פתאום התחלנו לקבל את השגיאה Request is not available in this context אם ניגשים אליו מתוך ה - Application_Start.

What is new in IE9 - Generic Element

מה השתנה בהתנהגות של IE ל - Generic Element לפי התקן.

Sela College Channel

ערוץ מכללת סלע יוצא לדרך.

What is new in IE9 - audio element

איך לנגן קבצי אודיו בדפי אינטרנט

Add Flag and Remove Flag for enums

הדרך הקלה לשימוש ב - Enums שמוגדרים עם Flags

תיבת טקסט המאפשרת להכניס רק מספרים

איך אפשר לייצר תיבת טקסט ב - html המאפשרת להכניס רק מספרים.

הוספת Mime Types ב - IIS 7.5 וב - IIS 6

מה זה Mime Type ואיך להוסיף אותם בגרסאות השונות של IIS

What is new in IE9 - video element

איך להציג וידיאו בדפי אינטרנט.

What is new in IE9 - Media Queries

What is new in IE9 - color property (Transparent)

שימוש בשקיפות של צבע טקסט.

What is new in IE9 - opacity

כיצד להגדיר שקיפות לאלמנטים ב - IE9.

What is new in IE9 - background-color (rgba)

כיצד להגדיר צבעים עם שקיפות ב - IE9