‏إظهار الرسائل ذات التسميات Css. إظهار كافة الرسائل
‏إظهار الرسائل ذات التسميات Css. إظهار كافة الرسائل

الأحد، 9 أكتوبر 2016

موقع عربي جديد يوفر لك أنتروهات رهيبة و إحترافية بالمجان | إكتشفه الأن !

بسم الله الرحمن الرحيم

يبحث العديد من أصحاب القنوات على اليوتيوب على مصادر من أجل جلب أنتروهات إحترافية متنوعة من أجل التميز بين باقي القنوات الأخرى خصوصا المصادر المجانية بحيث اليوم سوف أقدم لكم موقع عربي يوفر لك قوالب أنتروهات إحترافية بالمجان بل و أكثر من ذلك فستجد كل يوم تقريبا أنترو جديد بإمكانك تحميله و التعديل عليه بالمجان.
موقع عربي جديد يوفر لك أنتروهات رهيبة و إحترافية بالمجان | إكتشفه الأن !
موقع " Intro ar " يقدم لك فرصة الحصول على أنتروهات إحترافية جاهزة و يتم تحديثها و وضع أنتروهات جديدة بشكل دوري يمكنك التعديل على هذه الأنتروهات و وضع اللوجو الخاص بقناتك أو مشروعك الخاص بإستعمال برنامج الأفتر إفيكت بطبيعة الحال ، بالنسبة لطريقة تحميل الأنترو فهي بسيطة جدا كل ما عليك هو الولوج إلى الموقع ثم تختار الأنترو الذي تود تحميله بحيث سوف تجد Preview و مثال لكل أنترو ثم تنقر على تحميل الأنترو ليتم تحميل ملف هذا الأخير.
سوف يتسائل البعض كيف لي أن أعدل على ملف الأنترو و كيف أضيف اللوجو الخاص بي إلخ .. صديقي الطريقة تختلف من كل أنترو إلى أخر و ما يمكن أن أنصحك به و بكل بساطة هو أن تبحث في ملف الأنترو عن " Your logo is here " و تقوم بإستبداله باللوجو الخاص بك و تبحث عن ملف " Text " إن كان الأنترو يحتاج ذلك ، بحيث هنا أكون قد شرحت جميع النقاط من طريقة التحميل إلى طريقة التعديل على الملف و إستخراج الأنترو كذلك و كإشارة من المستحب البحث في يوتيوب على طريقة إستخراج الفيديو من على الأفتر إفيكت بخصوص ما يصطلح عليه بالـ" Render " .. أي تساؤل أتركوه في التعليقات و سوف أجيب على الأسئلة بإذن الله.
رابط الموقع : Intro ar
مرسلة بواسطة في
التسميات: , , , , , , , , , ,

الأربعاء، 11 مايو 2016

12 قائمة افقية علوية بشكل جميل

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


تحميل القوائم
مرسلة بواسطة في
التسميات:

مجموعة ازرار بتدرجات رائعة جدا

بسم الله الرحمن الرحيم
اليوم نقدم لكم مجموعة ازرار بتدرجات رائعة جدا وبتقنيات مختلفة جدا

يمكنك التعديل على الزر بمايناسبك
الازرار كلها بالوان مختلفة عدل واختار ما تشاء



تحميل ازرار بتدرجات رائعة
مرسلة بواسطة في
التسميات:

انشاء فورم تسجيل الدخول بشكل جميل

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


يتوافق هذا الفورم مع

  1. أحدث إصدار فايرفوكس
  2. أحدث إصدار Chrome
  3. أحدث إصدار من Opera
  4. غير متوافق - اكسبلورر
  5. جوجل كروم 5.0.375
  6. سفاري 5.0.1
  7. معايير W3C للـ HTML
  8. معايير W3C للـ XHTML
  9. متوافق مع متصفحات الهواتف الذكية
تحميل فورم تسجيل الدخول 
مرسلة بواسطة في
التسميات:

عدة اشكال من Tooltip التي يبحث عنها الجميع

بسم الله الرحمن الرحيم

Tooltip هي ميزة رائعة جدا تستخدم في المواقع حيث عند مرور الماوس على العنصر تظهر جميلة تحددها انت وتظهر بشكل جميل جدا

مرسلة بواسطة في
التسميات:

مجموعة خطوط ويب عربية

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

هذه المجموعة تتكون من 11 خط عربي مرفق معها جميع ما يخصها


تحميل هذه المجموعة
مرسلة بواسطة في
التسميات:

الاثنين، 9 مايو 2016

البحث في قاعدة البيانات بدون تحديث الصفحة

بسم الله الرحمن الرحيم
كثير منا يرى في المواقع العالمية والمواقع الكبيرة انه عند ادخال البيانات في حقل البحث  يتم البحث بدون تحديث الصفحة  باستخدام اما تقنية jquery او ajax اليوم ساقوم بشرح كيفية ذلك طبعا كثيرا نجد عدة مواقع تقوم بشرح ذلك على طريقتها الخاصة وكل يشرح حسب فهمه للموضوع
الموضوع سهل جدا وغير معقد ولكن يحتاج الى فهم وتركيز عالي

طبعا سنستخدم تقنية ajax في ذلك


<code>
<html>
<head>
<script>
function showResult(str) {
  if (str.length==0) { 
    document.getElementById("livesearch").innerHTML="";
    document.getElementById("livesearch").style.border="0px";
    return;
  }
  if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  } else {  // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
      document.getElementById("livesearch").innerHTML=xmlhttp.responseText;
      document.getElementById("livesearch").style.border="1px solid #A5ACB2";
    }
  }
  xmlhttp.open("GET","livesearch.php?q="+str,true);
  xmlhttp.send();
}
</script>
</head>
<body>

<form>
<input type="text" size="30" onkeyup="showResult(this.value)">
<div id="livesearch"></div>
</form>

</body>
</html>
</code>


<code>
<?php
$xmlDoc=new DOMDocument();
$xmlDoc->load("links.xml");

$x=$xmlDoc->getElementsByTagName('link');

//get the q parameter from URL
$q=$_GET["q"];

//lookup all links from the xml file if length of q>0
if (strlen($q)>0) {
  $hint="";
  for($i=0; $i<($x->length); $i++) {
    $y=$x->item($i)->getElementsByTagName('title');
    $z=$x->item($i)->getElementsByTagName('url');
    if ($y->item(0)->nodeType==1) {
      //find a link matching the search text
      if (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q)) {
        if ($hint=="") {
          $hint="<a href='" . 
          $z->item(0)->childNodes->item(0)->nodeValue . 
          "' target='_blank'>" . 
          $y->item(0)->childNodes->item(0)->nodeValue . "</a>";
        } else {
          $hint=$hint . "<br /><a href='" . 
          $z->item(0)->childNodes->item(0)->nodeValue . 
          "' target='_blank'>" . 
          $y->item(0)->childNodes->item(0)->nodeValue . "</a>";
        }
      }
    }
  }
}

// Set output to "no suggestion" if no hint was found
// or to the correct values
if ($hint=="") {
  $response="no suggestion";
} else {
  $response=$hint;
}

//output the response
echo $response;
?>


</code>

مرسلة بواسطة في
التسميات: , , , , ,

انشاء صفحة منبثقة بالجيكويري

بسم الله الرحمن الرحيم
كثير منا يرى في المواقع العالمية والمواقع الكبيرة انه عند ادخال البيانات من الحقول عند الضغط على زر الادخال يتم اظهار صفحة منبثقة لادخال البيانات بدون تحيث الصفحة باستخدام اما تقنية jquery او ajax اليوم ساقوم بشرح كيفية ذلك طبعا كثيرا نجد عدة مواقع تقوم بشرح ذلك على طريقتها الخاصة وكل يشرح حسب فهمه للموضوع
الموضوع سهل جدا وغير معقد ولكن يحتاج الى فهم وتركيز عالي

طبعا سنستخدم تقنية ajax في ذلك



مرسلة بواسطة في
التسميات: , , ,

الخميس، 5 مايو 2016

تمدد حقل البحث عن الضغط عليه

بسم الله الرحمن الرحيم
كثير منا شاهد في المواقع العالمية انه عند الضغط على حقل البحث فانه يتمدد ليعطي شكل جميل وجذاب طبعا الكثير منا يريد معرفة كيف يتم ذلك
هذه التقنية يستعمل فيها الjquery  و css3 طبعا يوجد في jquery خاصية تسمي انيميشن
animated هذه الخاصية هي من تقوم بالتمدد حسب المعطيات
للاعلى , للاسفل , لليمين , لليسار
الشرح سيكون مفصلا  مع وجود الكود وتحميله







.sb-search {
 position: relative;
 margin-top: 10px;
 width: 0%;
 min-width: 60px;
 height: 60px;
 float: right;
 overflow: hidden;

 -webkit-transition: width 0.3s;
 -moz-transition: width 0.3s;
 transition: width 0.3s;

 -webkit-backface-visibility: hidden;
}
.sb-search-input {
 position: absolute;
 top: 0;
 right: 0;
 border: none;
 outline: none;
 background: #fff;
 width: 100%;
 height: 60px;
 margin: 0;
 z-index: 10;
 padding: 20px 65px 20px 20px;
 font-family: inherit;
 font-size: 20px;
 color: #2c3e50;
}

input[type="search"].sb-search-input {
 -webkit-appearance: none;
 -webkit-border-radius: 0px;
}

.sb-search-input::-webkit-input-placeholder {
 color: #efb480;
}

.sb-search-input:-moz-placeholder {
 color: #efb480;
}

.sb-search-input::-moz-placeholder {
 color: #efb480;
}

.sb-search-input:-ms-input-placeholder {
 color: #efb480;
}

.sb-icon-search,
.sb-search-submit  {
 width: 60px;
 height: 60px;
 display: block;
 position: absolute;
 right: 0;
 top: 0;
 padding: 0;
 margin: 0;
 line-height: 60px;
 text-align: center;
 cursor: pointer;
}



.sb-search-submit {
 background: #fff; /* IE needs this */
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 8 */
    filter: alpha(opacity=0); /* IE 5-7 */
    opacity: 0;
 color: transparent;
 border: none;
 outline: none;
 z-index: -1;
}


.sb-icon-search {
 color: #fff;
 background: #e67e22;
 z-index: 90;
 font-size: 22px;
 font-family: 'icomoon';
 speak: none;
 font-style: normal;
 font-weight: normal;
 font-variant: normal;
 text-transform: none;
 -webkit-font-smoothing: antialiased;
}

.sb-icon-search:before {
 content: "\e000";
}

/* Search icon by IcoMoon, made with http://icomoon.io/app/ */
@font-face {
 font-family: 'icomoon';
 src:url('../fonts/icomoon/icomoon.eot');
 src:url('../fonts/icomoon/icomoon.eot?#iefix') format('embedded-opentype'),
  url('../fonts/icomoon/icomoon.woff') format('woff'),
  url('../fonts/icomoon/icomoon.ttf') format('truetype'),
  url('../fonts/icomoon/icomoon.svg#icomoon') format('svg');
 font-weight: normal;
 font-style: normal;
}

.sb-search.sb-search-open,
.no-js .sb-search {
 width: 100%;
}

.sb-search.sb-search-open .sb-icon-search,
.no-js .sb-search .sb-icon-search {
 background: #da6d0d;
 color: #fff;
 z-index: 11;
}
.sb-search.sb-search-open .sb-search-submit,
.no-js .sb-search .sb-search-submit {
 z-index: 90;
}





;( function( window ) {
 
 function UISearch( el, options ) { 
  this.el = el;
  this.inputEl = el.querySelector( 'form > input.sb-search-input' );
  this._initEvents();
 }

 UISearch.prototype = {
  _initEvents : function() {
   var self = this,
    initSearchFn = function( ev ) {
     if( !classie.has( self.el, 'sb-search-open' ) ) { // open it
      ev.preventDefault();
      self.open();
     }
     else if( classie.has( self.el, 'sb-search-open' ) && /^\s*$/.test( self.inputEl.value ) ) { // close it
      self.close();
     }
    }

   this.el.addEventListener( 'click', initSearchFn );
   this.inputEl.addEventListener( 'click', function( ev ) { ev.stopPropagation(); });
  },
  open : function() {
   classie.add( this.el, 'sb-search-open' );
  },
  close : function() {
   classie.remove( this.el, 'sb-search-open' );
  }
 }

 // add to global namespace
 window.UISearch = UISearch;

} )( window );
;( function( window ) {
 
 function UISearch( el, options ) { 
  this.el = el;
  this.inputEl = el.querySelector( 'form > input.sb-search-input' );
  this._initEvents();
 }

 UISearch.prototype = {
  _initEvents : function() {
   var self = this,
    initSearchFn = function( ev ) {
     ev.stopPropagation();
     
     if( !classie.has( self.el, 'sb-search-open' ) ) { // open it
      ev.preventDefault();
      self.open();
     }
     else if( classie.has( self.el, 'sb-search-open' ) && /^\s*$/.test( self.inputEl.value ) ) { // close it
      self.close();
     }
    }

   this.el.addEventListener( 'click', initSearchFn );
   this.inputEl.addEventListener( 'click', function( ev ) { ev.stopPropagation(); });
  },
  open : function() {
   var self = this;
   classie.add( this.el, 'sb-search-open' );
   // close the search input if body is clicked
   var bodyFn = function( ev ) {
    self.close();
    this.removeEventListener( 'click', bodyFn );
   };
   document.addEventListener( 'click', bodyFn );
  },
  close : function() {
   classie.remove( this.el, 'sb-search-open' );
  }
 }

 // add to global namespace
 window.UISearch = UISearch;

} )( window );
;( function( window ) {

 // http://stackoverflow.com/a/11381730/989439
 function mobilecheck() {
  var check = false;
  (function(a){if(/(android|ipad|playbook|silk|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera);
  return check;
 }

 // http://www.jonathantneal.com/blog/polyfills-and-prototypes/
 !String.prototype.trim && (String.prototype.trim = function() {
  return this.replace(/^\s+|\s+$/g, '');
 });
 
 function UISearch( el, options ) { 
  this.el = el;
  this.inputEl = el.querySelector( 'form > input.sb-search-input' );
  this._initEvents();
 }

 UISearch.prototype = {
  _initEvents : function() {
   var self = this,
    initSearchFn = function( ev ) {
     ev.stopPropagation();
     // trim its value
     self.inputEl.value = self.inputEl.value.trim();
     
     if( !classie.has( self.el, 'sb-search-open' ) ) { // open it
      ev.preventDefault();
      self.open();
     }
     else if( classie.has( self.el, 'sb-search-open' ) && /^\s*$/.test( self.inputEl.value ) ) { // close it
      self.close();
     }
    }

   this.el.addEventListener( 'click', initSearchFn );
   this.inputEl.addEventListener( 'click', function( ev ) { ev.stopPropagation(); });
  },
  open : function() {
   var self = this;
   classie.add( this.el, 'sb-search-open' );
   // focus the input
   if( !mobilecheck() ) {
    this.inputEl.focus();
   }
   // close the search input if body is clicked
   var bodyFn = function( ev ) {
    self.close();
    this.removeEventListener( 'click', bodyFn );
   };
   document.addEventListener( 'click', bodyFn );
  },
  close : function() {
   this.inputEl.blur();
   classie.remove( this.el, 'sb-search-open' );
  }
 }

 // add to global namespace
 window.UISearch = UISearch;

} )( window );
;( function( window ) {
 
 // http://stackoverflow.com/a/11381730/989439
 function mobilecheck() {
  var check = false;
  (function(a){if(/(android|ipad|playbook|silk|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera);
  return check;
 }
 
 // http://www.jonathantneal.com/blog/polyfills-and-prototypes/
 !String.prototype.trim && (String.prototype.trim = function() {
  return this.replace(/^\s+|\s+$/g, '');
 });

 function UISearch( el, options ) { 
  this.el = el;
  this.inputEl = el.querySelector( 'form > input.sb-search-input' );
  this._initEvents();
 }

 UISearch.prototype = {
  _initEvents : function() {
   var self = this,
    initSearchFn = function( ev ) {
     ev.stopPropagation();
     // trim its value
     self.inputEl.value = self.inputEl.value.trim();
     
     if( !classie.has( self.el, 'sb-search-open' ) ) { // open it
      ev.preventDefault();
      self.open();
     }
     else if( classie.has( self.el, 'sb-search-open' ) && /^\s*$/.test( self.inputEl.value ) ) { // close it
      ev.preventDefault();
      self.close();
     }
    }

   this.el.addEventListener( 'click', initSearchFn );
   this.el.addEventListener( 'touchstart', initSearchFn );
   this.inputEl.addEventListener( 'click', function( ev ) { ev.stopPropagation(); });
   this.inputEl.addEventListener( 'touchstart', function( ev ) { ev.stopPropagation(); } );
  },
  open : function() {
   var self = this;
   classie.add( this.el, 'sb-search-open' );
   // focus the input
   if( !mobilecheck() ) {
    this.inputEl.focus();
   }
   // close the search input if body is clicked
   var bodyFn = function( ev ) {
    self.close();
    this.removeEventListener( 'click', bodyFn );
    this.removeEventListener( 'touchstart', bodyFn );
   };
   document.addEventListener( 'click', bodyFn );
   document.addEventListener( 'touchstart', bodyFn );
  },
  close : function() {
   this.inputEl.blur();
   classie.remove( this.el, 'sb-search-open' );
  }
 }

 // add to global namespace
 window.UISearch = UISearch;

} )( window );
Finally, for browsers that don’t support the addEventListener and removeEventListener we use Jonathan Neal’s EventListener polyfill.
// EventListener | @jon_neal | //github.com/jonathantneal/EventListener
!window.addEventListener && window.Element && (function () {
 function addToPrototype(name, method) {
  Window.prototype[name] = HTMLDocument.prototype[name] = Element.prototype[name] = method;
 }

 var registry = [];

 addToPrototype("addEventListener", function (type, listener) {
  var target = this;

  registry.unshift({
   __listener: function (event) {
    event.currentTarget = target;
    event.pageX = event.clientX + document.documentElement.scrollLeft;
    event.pageY = event.clientY + document.documentElement.scrollTop;
    event.preventDefault = function () { event.returnValue = false };
    event.relatedTarget = event.fromElement || null;
    event.stopPropagation = function () { event.cancelBubble = true };
    event.relatedTarget = event.fromElement || null;
    event.target = event.srcElement || target;
    event.timeStamp = +new Date;

    listener.call(target, event);
   },
   listener: listener,
   target: target,
   type: type
  });

  this.attachEvent("on" + type, registry[0].__listener);
 });

 addToPrototype("removeEventListener", function (type, listener) {
  for (var index = 0, length = registry.length; index < length; ++index) {
   if (registry[index].target == this && registry[index].type == type && registry[index].listener == listener) {
    return this.detachEvent("on" + type, registry.splice(index, 1)[0].__listener);
   }
  }
 });

 addToPrototype("dispatchEvent", function (eventObject) {
  try {
   return this.fireEvent("on" + eventObject.type, eventObject);
  } catch (error) {
   for (var index = 0, length = registry.length; index < length; ++index) {
    if (registry[index].target == this && registry[index].type == eventObject.type) {
     registry[index].call(this, eventObject);
    }
   }
  }
 });
})();
Expanding Search Bar Deconstructed
Previous Demo Back to the Codrops Article

Expanding Search Bar Deconstructed A click-to-expand search input

The search bar can be opened on click, it has a fluid width and it's mobile-friendly.

Read the tutorial
معاينة || تحميل
مرسلة بواسطة في
التسميات: , , ,
الاشتراك في: الرسائل (Atom)