عندما يعلق احد الاصدقاء علي موضوع لك ويظهر بالاسفل ان صديق لك علق علي حائط وتظهر لمدة ثواني ثم تختفي ..وهكذا باقي الاشعارات

عمل الاشعارات بالاسفل كما في الفايس بوك Notifications facebook in asp.net

سوف تتعلم كيفية صنع اشعارات لموقعك ومستخدمين موقعك كما يحدث في الفايس بوك

هنا سوف تجد المثال حي علي الانترنت من الموقع الرسمي

demo.geotitles.com/facebook_beeper_notification/

وهنا تحميل المثال بتقنية asp.net

Html Code

<html xmlns="https://www.w3.org/1999/xhtml">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title></title>
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
       <link rel="stylesheet" type="text/css" href="style.css" />
       <script src="notficationBeeper.js" type="text/javascript"></script>
   </head>
   <body>
   <form id="form1" runat="server">
      <div align="center" class="main">

         <p>
           اظهار الاشعار بالاسفل لمدة ثواني
         </p>
        <a href="#" class="control" id="control">اضغط هنا لاظهار الاشعار بالاسفل لمدة ثواني</a>
      </div>
      <div id="BeeperBox" class="UIBeeper">
         <div class="UIBeeper_Full">
            <div class="Beeps">
               <div class="UIBeep UIBeep_Top UIBeep_Bottom UIBeep_Selected" style="opacity: 1; ">
               
                  <a class="UIBeep_NonIntentional" href="#">
                     <div class="UIBeep_Icon">
                        <i class="beeper_icon image2"></i>
                     </div>
                     <span class="beeper_x"> </span>
                     <div class="UIBeep_Title">
                        <span class="blueName">قام هشام بكر</span> بالتعليق علي موضوعك <span class="blueName">تعلم البرمجة كما في شركات البرمجة </span>.
                     </div>
                  </a>
               </div>
            </div>
         </div>
      </div>
      </form>

   </body>
</html>

CSS ملف الاستايل يحتوي علي

@charset "utf-8";
body{
/* body*/
font-size: 11px;
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
color: #333;
line-height: 1.28;
text-align: left;
direction: ltr;
}
.main{
/* style for the div with control button*/
font-size:15px;
width:670px;
margin:30px auto;
height:80%;
padding:15px;
font-weight:normal;
/*border-radius*/
-webkit-border-radius:15px;
   -moz-border-radius:15px;
        border-radius:15px;
background:white;
border:1px solid #E5E5E5;
/*box-shadow*/
-webkit-box-shadow:rgba(200,200,200,0.7) 0 4px 10px -1px;
   -moz-box-shadow:rgba(200,200,200,0.7) 0 4px 10px -1px;
        box-shadow:rgba(200,200,200,0.7) 0 4px 10px -1px;
}
.control{
color:#666;
width:150px;
font:bold 75% arial,sans-serif;
text-decoration:none;
padding:10px 10px 10px 10px;
display:inline-block;
text-align:center;
/*Background*/
background:#f3f3f3;
background:-webkit-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
/*linear-gradient*/
background:-webkit-gradient(linear,left top,left bottom,from(from(#F5F5F5)),to(to(#F1F1F1)));
/*@@prefixmycss->No equivalent*/
background:-webkit-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
background:   -moz-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
background:     -o-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
background:        linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
border:solid 1px #dcdcdc;
/*border-radius*/
-webkit-border-radius:2px;
   -moz-border-radius:2px;
        border-radius:2px;
margin:25px auto;
}
.control:hover{
color:#333;
border-color:#999;
/*box-shadow*/
-webkit-box-shadow:0 2px 0 rgba(0,0,0,0.2) -webkit-box-shadow:0 2px 5px rgba(0,0,0,0.2);
   -moz-box-shadow:   0 2px 0 rgba(0,0,0,0.2) -moz-box-shadow:0 2px 5px rgba(0,0,0,0.2);
        box-shadow:        0 2px 0 rgba(0,0,0,0.2) box-shadow:0 2px 5px rgba(0,0,0,0.2);
}
.UIBeeper{
width:230px;
left:15px;
bottom:30px;
position:fixed;
z-index:99;
display:none;
}
.UIBeeper .UIBeeper_Full{
background-color:#E1E6EE;
border:1px solid #99A8C7;
/*border-radius*/
-webkit-border-radius:3px;
   -moz-border-radius:3px;
        border-radius:3px;
margin:0;
padding:3px;
}
.UIBeeper .UIBeeper_Full:hover{
/* change background color on mouseover */
background-color:#CAD1DE;
}
.UIBeeper .UIBeep_Bottom{
border-bottom:none;
}
.UIBeeper .UIBeep_Selected{
background:#CAD1DE;
}
.UIBeeper .UIBeep_Top{
padding-top:0;
}
.UIBeeper .UIBeep_Bottom{
padding-bottom:0;
}
.UIBeep{
background:#E1E6EE;
border-bottom:1px solid #BFCADE;
overflow:hidden;
padding:3px 0;
clear:right;
}
a, a:hover{
cursor:pointer;
color:#3B5998;
text-decoration:none;
}
.UIBeep .UIBeep_NonIntentional .UIBeep_Icon{
float:left;
width:20px;
height:20px;
text-align:center;
margin:5px 5px;
}
.UIBeep_Selected .UIBeep_Icon{
margin-right:2px;
}
.image2{
/* icon within the beeper */
background-image:url(images/like.png);
background-repeat:no-repeat;
display:inline-block;
height:16px;
width:16px;
}
.UIBeeper .UIBeep .UIBeep_NonIntentional .beeper_x{
/* close button */
float:right;
height:16px;
width:16px;
margin-top:6px;
background:url(images/close.gif) no-repeat;
visibility:hidden;
}
.UIBeep .beeper_x:hover{
/* close button on mouseover */
background:url(images/closehover.gif) no-repeat !important;
}
.UIBeep_Selected .beeper_x{
display:block !important;
visibility:visible !important;
margin-left:4px;
}
.UIBeep .UIBeep_NonIntentional .UIBeep_Title{
margin:0 20px 0 30px;
}
.UIBeep .UIBeep_Title{
padding:5px 0;
}

@charset "utf-8";

body{

/* body*/

font-size: 11px;

font-family: "lucida grande",tahoma,verdana,arial,sans-serif;

color: #333;

line-height: 1.28;

text-align: left;

direction: ltr;

}

.main{

/* style for the div with control button*/

font-size:15px;

width:670px;

margin:30px auto;

height:80%;

padding:15px;

font-weight:normal;

/*border-radius*/

-webkit-border-radius:15px;

-moz-border-radius:15px;

border-radius:15px;

background:white;

border:1px solid #E5E5E5;

/*box-shadow*/

-webkit-box-shadow:rgba(200,200,200,0.7) 0 4px 10px -1px;

-moz-box-shadow:rgba(200,200,200,0.7) 0 4px 10px -1px;

box-shadow:rgba(200,200,200,0.7) 0 4px 10px -1px;

}

.control{

color:#666;

width:150px;

font:bold 75% arial,sans-serif;

text-decoration:none;

padding:10px 10px 10px 10px;

display:inline-block;

text-align:center;

/*Background*/

background:#f3f3f3;

background:-webkit-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));

/*linear-gradient*/

background:-webkit-gradient(linear,left top,left bottom,from(from(#F5F5F5)),to(to(#F1F1F1)));

/*@@prefixmycss->No equivalent*/

background:-webkit-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));

background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));

background: -o-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));

background: linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));

border:solid 1px #dcdcdc;

/*border-radius*/

-webkit-border-radius:2px;

-moz-border-radius:2px;

border-radius:2px;

margin:25px auto;

}

.control:hover{

color:#333;

border-color:#999;

/*box-shadow*/

-webkit-box-shadow:0 2px 0 rgba(0,0,0,0.2) -webkit-box-shadow:0 2px 5px rgba(0,0,0,0.2);

-moz-box-shadow: 0 2px 0 rgba(0,0,0,0.2) -moz-box-shadow:0 2px 5px rgba(0,0,0,0.2);

box-shadow: 0 2px 0 rgba(0,0,0,0.2) box-shadow:0 2px 5px rgba(0,0,0,0.2);

}

.UIBeeper{

width:230px;

left:15px;

bottom:30px;

position:fixed;

z-index:99;

display:none;

}

.UIBeeper .UIBeeper_Full{

background-color:#E1E6EE;

border:1px solid #99A8C7;

/*border-radius*/

-webkit-border-radius:3px;

-moz-border-radius:3px;

border-radius:3px;

margin:0;

padding:3px;

}

.UIBeeper .UIBeeper_Full:hover{

/* change background color on mouseover */

background-color:#CAD1DE;

}

.UIBeeper .UIBeep_Bottom{

border-bottom:none;

}

.UIBeeper .UIBeep_Selected{

background:#CAD1DE;

}

.UIBeeper .UIBeep_Top{

padding-top:0;

}

.UIBeeper .UIBeep_Bottom{

padding-bottom:0;

}

.UIBeep{

background:#E1E6EE;

border-bottom:1px solid #BFCADE;

overflow:hidden;

padding:3px 0;

clear:right;

}

a, a:hover{

cursor:pointer;

color:#3B5998;

text-decoration:none;

}

.UIBeep .UIBeep_NonIntentional .UIBeep_Icon{

float:left;

width:20px;

height:20px;

text-align:center;

margin:5px 5px;

}

.UIBeep_Selected .UIBeep_Icon{

margin-right:2px;

}

.image2{

/* icon within the beeper */

background-image:url(images/like.png);

background-repeat:no-repeat;

display:inline-block;

height:16px;

width:16px;

}

.UIBeeper .UIBeep .UIBeep_NonIntentional .beeper_x{

/* close button */

float:right;

height:16px;

width:16px;

margin-top:6px;

background:url(images/close.gif) no-repeat;

visibility:hidden;

}

.UIBeep .beeper_x:hover{

/* close button on mouseover */

background:url(images/closehover.gif) no-repeat !important;

}

.UIBeep_Selected .beeper_x{

display:block !important;

visibility:visible !important;

margin-left:4px;

}

.UIBeep .UIBeep_NonIntentional .UIBeep_Title{

margin:0 20px 0 30px;

}

.UIBeep .UIBeep_Title{

padding:5px 0;

}

وبالنسبة لملف الجافا سكربت او ملف الجاكويري فيحتوي علي عدد الثواني التي سوف يظهر فيها الاشعار

delay = 5000;

عمل الاشعارات بالاسفل كما في الفايس بوك Notifications facebook in asp.net

كلمات بحث

نشكرك علي المشاركة

تعلم البرمجة كما في شركات البرمجة