شوّيت: شبكة كرة قدم اجتماعية




العودة   سوالف سوفت > سوالف برمجة المواقع وتطويرها > البرمجية القياسية Ajax +XML+ CSS+ JavaScript وغيرها
التسجيل المدوّنات البحث مشاركات اليوم جعل الأقسام مقروءة

الرد على الموضوع
 
LinkBack أدوات الموضوع
عضو نشيط جدا
#1  
كلاس hints بالـ CSS فقط ؟

السلام عليكم،

هل هناك كلاس hint بالـ CSS فقط لاستعمالها على حقول النماذج ؟

مثلاً :

كود:
 
<textarea></textarea><span class="hint">Your message here !</span>
شكراً.






apitos is offline   قديم 18-01-2009, 09:16 PM
الرد مع إقتباس
عضو نشيط
#2  

لا يوجد اي كلاس في CSS بهذا الاسم، ولا يوجد أصلا كلاسات جاهزة في CSS
وضح ماذا تريد بالضبط






__________________
cssguru
cssguru is offline   قديم 19-01-2009, 05:56 PM
الرد مع إقتباس
عضو نشيط جدا
#3  

لم أقصد كلاس جاهزة.

وانما لأحد يفيدنا بها ان كانت على النت او احد المواقع.

المهم ما اريده هو كيف يتم اظهار نافذة جانبية عندما نؤشر بالفارة داخل حقل input لإعطاء تفسير أو مساعدة المستعمل لما يجب عليه ان يدخله من معلومات في حقل input ؟

شكراً.






apitos is offline   قديم 19-01-2009, 10:30 PM
الرد مع إقتباس
عضو سوبر نشيط
#4  

هل هذا ما تريده ؟
كود HTML:
<html dir="rtl"> <head> <script type="text/javascript">
var show=function(name){
	if(document.getElementById(name).style.display == "none"){
	document.getElementById(name).style.display="";
	}else{
	document.getElementById(name).style.display="none";
	};
}
</script> <style type="text/css")>
.hint{
padding:25px;
border: 1px solid #E8A722;
color:#FF6100;
background: #FFE294;
}
</style> </head> <body> <div id="mydiv"> <form> <p> <label>الاسم</label><br /> <input type="text" name="name" onFocus="show('name');" onBlur="show('name');"> <span style="display:none" id="name" class="hint">فضلا اكتب اسمك</span> </p> <p> <label>الاميل</label><br /> <input type="text" name="email" onFocus="show('email');" onBlur="show('email');"> <span style="display:none" id="email" class="hint">فضلا اكتب بريد اليكتروني صحيح</span> </p> </form> </div> </body> </html>






__________________
للتواصل: في اجازة
عبد الواحد البشيري is offline   قديم 19-01-2009, 11:25 PM
الرد مع إقتباس
عضو نشيط جدا
#5  

اهلا اخي البشيري،

نعم الكود يأتي على هاته الشاكلة (رغم اني أبحث عن واحد بدون جافا سكريبت )

وقد جربته على متصفح IE6 ولكن لم يظهر أي شيء

كود:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="XHTML namespace">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
var show=function(name){
 if(document.getElementById(name).style.display == "none"){
 document.getElementById(name).style.display="";
 }else{
 document.getElementById(name).style.display="none";
 };
}
</script>
<style type="text/css")>
#mydiv .hint{
padding:25px;
border: 1px solid #E8A722;
color:#FF6100;
background: #FFE294;
}
</style>
</head>
<body>
<div id="mydiv">
  <form>
    <p>
      <label>الاسم</label>
      <br />
      <input type="text" name="name" onFocus="show('name');" onBlur="show('name');">
      <span style="display:none" id="name" class="hint">فضلا اكتب اسمك</span> </p>
    <p>
      <label>الاميل</label>
      <br />
      <input type="text" name="email" onFocus="show('email');" onBlur="show('email');">
      <span style="display:none" id="email" class="hint">فضلا اكتب بريد اليكتروني صحيح</span> </p>
  </form>
</div>
</body>
</html>
شكراً.






apitos is offline   قديم 20-01-2009, 02:17 AM
الرد مع إقتباس
عضو نشيط
#6  

وضح المطلوب
هل بمجرد وضع الفأرة في حقل textarea تريد ان تظهر رسالة توضيحية ؟






__________________
cssguru
cssguru is offline   قديم 20-01-2009, 02:58 PM
الرد مع إقتباس
عضو نشيط جدا
#7  

نعم هو كذلك






apitos is offline   قديم 20-01-2009, 03:12 PM
الرد مع إقتباس
عضو نشيط
#8  

اذن تستطيع الحصول على ما تريد ب jquery






__________________
cssguru
cssguru is offline   قديم 20-01-2009, 05:01 PM
الرد مع إقتباس
عضو نشيط جدا
#9  

إقتباس:
المشاركة الأصلية بواسطة cssguru مشاهدة مشاركة
اذن تستطيع الحصول على ما تريد ب jquery
اسمع به ولا اعرف عنه شيئاً ....

هل من مساعدة في هذا المجال لحل مشكلتي ؟

شكراً.






apitos is offline   قديم 21-01-2009, 12:32 AM
الرد مع إقتباس
عضو نشيط
#10  

مع اني لم افهم طلبك جيدا ومع ان الحلول ب jquery عديدة
ارفق مثالا لشيئ رايته في موقع ما






__________________
cssguru
cssguru is offline   قديم 21-01-2009, 02:41 PM
الرد مع إقتباس
عضو نشيط جدا
#11  

هناك العديد من الأمثلة ولكن بما انها "ممزوجة" بالـ CSS والـ Javascript وانا لم افهم جيدا الجافا ارتأيت البحث عن حل بالـ CSS الخالص.

وأنت الآن تقترح علي التوجه نحو الـ JQuery لحل المشكلة

نحو هذا المثال.








آخر تعديل بواسطة apitos في 21-01-2009 الساعة 02:56 PM.
apitos is offline   قديم 21-01-2009, 02:55 PM
الرد مع إقتباس
عضو نشيط
#12  

بعد اذن الأخ cssguru

هذه محاولة بسيطة باستخدام JQuery ومجرب في IE6 و IE7 و Opera و Safari و Mozilla ...

كود:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="jquery.js"></script>
  
  <script>
  $(document).ready(function(){
    
    $("input").focus(function () {
         $(this).next("span").addClass('tooltips');
    });
    
	$("input").blur(function () {
         $(this).next("span").removeClass('tooltips')
    });


  });
  </script>
  <style>
   span {display:none;}
   
   .tooltips{ 
     display:inline;
	 background-color:gray;
   }   
  </style>
</head>
<body>
  <p>User Name<br><input type="text" /> <span>Enter User Name</span></p>
  <p>Password<br><input type="password" /> <span>Enter Password</span></p>
</body>
</html>






soma is offline   قديم 21-01-2009, 03:29 PM
الرد مع إقتباس
عضو نشيط جدا
#13  

أخي soma.

شكرا على المثال.

ولكن اردت البحث عن كلاس tooltips في ملف jquery-1.3.min.js لم أجدها !!!!

كيف ذلك ؟






apitos is offline   قديم 21-01-2009, 05:40 PM
الرد مع إقتباس
عضو نشيط
#14  

tooltips هو عبارة عن CSS Class لتنسيق عبارة الـ Span موجود داخل الوسم Style .






soma is offline   قديم 21-01-2009, 06:03 PM
الرد مع إقتباس
عضو نشيط جدا
#15  

آه نعم .. عذرا لم أره.

ولكن هناك مشكلة :

فحتى الأزرار و checkbox و radio button سوف يحدث معها نفس الحدث لأنها كلها input !!!

ولن يحدث هذا الأمر في textarea.

فما الحل ؟

شكراً.






apitos is offline   قديم 21-01-2009, 08:13 PM
الرد مع إقتباس
عضو نشيط
#16  

بالنسبة لو لديك textarea عدل الكود في الجزئيتين
كود:
$("textarea,input").focus(function () {
         $(this).next("span").addClass('tooltips');
    });
    
	$("textarea,input").blur(function () {
         $(this).next("span").removeClass('tooltips')
    });






soma is offline   قديم 21-01-2009, 10:25 PM
الرد مع إقتباس
عضو نشيط جدا
#17  

شكرا لك أخي soma.






apitos is offline   قديم 22-01-2009, 04:16 AM
الرد مع إقتباس
عضو نشيط جدا
#18  

لكي لا أعمم نوافذ الـ hint على جميع وسوم span الموجودة في ملف الـ HTML

قمت باضافة السطر التالي في ملف الـ CSS :

كود:
form1 span#
مع تسمية النموذج :

كود:
<form id="form1" name="form">
ولكن الـ hint لم يعمل معي !!؟

فجربت التالي :

كود:
span .hint
وفي ملف الـ html اضفت الى الـ span

كود:
<span class="hint">
وغيرت في سطر الـAJAX ليصبح كالتلي :

كود:
 
<script language="JavaScript" type="text/javascript">
$(document).ready(function(){
 
$("input, textarea, select").focus(function () {
$(this).next("span .hint").addClass('notice');
});
 
$("input, textarea, select").blur(function () {
$(this).next("span .hint").removeClass('notice')
});
});
</script>
ولكن الأمر كذلك لم يشتغل معي !!!؟

ما الأمر يا ترى ؟

شكراَ.






apitos is offline   قديم 25-01-2009, 08:29 PM
الرد مع إقتباس
عضو نشيط
#19  

ممكن تضع كودك كاملاً ....






soma is offline   قديم 25-01-2009, 09:03 PM
الرد مع إقتباس
عضو نشيط جدا
#20  

ها هو :

كود:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script language="JavaScript" type="text/javascript" src="js/jquery-1.3.min.js"></script>
<script>
  $(document).ready(function(){
    
    $("input, textarea, select").focus(function () {
         $(this).next("span .hint").addClass('tooltips');
    });
    
 $("input, textarea, select").blur(function () {
         $(this).next("span .hint").removeClass('tooltips')
    });

  });
  </script>
<style>
   span.hint {
    padding:5px 5px 5px 40px;
 width:120px;
 position:absolute;
 margin: 2px 0 0 14px;
    display:none;
 }
   
   .tooltips{ 
     display:inline;
  background-color:gray;
   }   
  </style>
</head>
<body>
<p>User Name<br>
  <input type="text" />
  <span class="hint">Enter User Name</span></p>
<p>Password<br>
  <input type="password" />
  <span class="hint">Enter Password</span></p>
</body>
</html>






apitos is offline   قديم 26-01-2009, 12:41 AM
الرد مع إقتباس
عضو نشيط
#21  

كود:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script language="JavaScript" type="text/javascript" src="jquery.js"></script>
<script>
  $(document).ready(function(){
    
    $("input, textarea,select").focus(function () {
         $(this).next("span .hint").addClass('tooltips');
    });
    
 $("input, textarea,select").blur(function () {
         $(this).next("span .hint").removeClass('tooltips')
    });

  });
  </script>
<style>
   .hint {
    padding:5px 5px 5px 40px;
 width:120px;
 position:absolute;
 margin: 2px 0 0 14px;
    display:none;
 }
   
   .tooltips{ 
     display:inline;
  background-color:gray;
   }   
  </style>
</head>
<body>
<p>User Name<br>
  <input type="text" />
  <span class="hint">Enter User Name</span></p>
<p>Password<br>
  <input type="password" />
  <span class="hint">Enter Password</span></p>
</body>
</html>






soma is offline   قديم 26-01-2009, 11:42 PM
الرد مع إقتباس
عضو نشيط جدا
#22  

أخي soma،

أين الفرف بين الكودين ؟






apitos is offline   قديم 27-01-2009, 12:10 AM
الرد مع إقتباس
الرد على الموضوع


 

أدوات الموضوع

قوانين المشاركات
لا يمكنك كتابة مواضيع جديدة
لا يمكنك إضافة ردود
لا يمكنك إرسال مرفقات
لا يمكنك تعديل مشاركاتك

كود vB متاح
كود [IMG] متاح
كود HTML غير متاح
Trackbacks are متاح
Pingbacks are متاح
Refbacks are متاح


المواضيع المشابهه
الموضوع كاتب الموضوع القسم الردود آخر مشاركة
10 تصاميم جداول بالـ CSS مع الأكواد! وائل الغامدي البرمجية القياسية Ajax +XML+ CSS+ JavaScript وغيرها 9 05-10-2008 09:14 PM
[سؤال] أريد توسيط الموقع بالـ CSS أبواب البرمجية القياسية Ajax +XML+ CSS+ JavaScript وغيرها 27 02-10-2007 06:57 AM
بناء موقع بالـ Css الجزء الاول Dreamweaver x_yousef_x إنشاء وصيانة المواقع للمبتدئين 20 01-09-2007 12:01 PM
قوائم بالـ CSS Zizwar البرمجية القياسية Ajax +XML+ CSS+ JavaScript وغيرها 5 23-10-2006 10:49 PM
للمهتمين بالـ CSS الرفيع الويب والويب 2.0 والـ Semantic Web 5 21-05-2005 06:52 PM


جميع الأوقات بتوقيت غرينتش +3. الوقت الآن هو 01:21 PM.