اذهب إلى المحتوى

Ilyas Lyes

الأعضاء
  • المساهمات

    18
  • تاريخ الانضمام

  • تاريخ آخر زيارة

أجوبة بواسطة Ilyas Lyes

  1. اخواني الكرام عندما ادخل المعلومات المستخرجة من قيمة input text الى قاعدة البيانات تظهر بعض الرموز كــ "é" عبارة عن علامة استفهام؟

    كما هو مبين في الصور 
     

    bbt.PNG

     

    يس.PNG

     

     

    vf.PNG

     

    ممكن جزاكم الله خيرا طريقة ادخالها بترميز UTF-8 وشكراا

  2. بتاريخ 31 دقائق مضت قال hassenzouari98:

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

    
    .carousel-inner .active {
      top: 0;
    }
    .carousel-inner .item {
      -webkit-transition: 0.6s ease-in-out top;
         -moz-transition: 0.6s ease-in-out top;
          -ms-transition: 0.6s ease-in-out top;
           -o-transition: 0.6s ease-in-out top;
              transition: 0.6s ease-in-out top;
    }
    .carousel-inner .next {
      top: 500px;
    }
    .carousel-inner .prev {
      top: -500px;
    }

    اما بالنسبة لطريقة اضافة الصورة فيمكنك اضافتها بكل بساطة في div ولكن فقط يجب ان لاتنسى ان تقوم بتعديل بعض الخصائص لتظهر الصورة بشكل جميل مثل no-repeat ... ولكني لاأنصحك باستخدام هذه الطريقة حيث ستحتاج ام لاستعمال css preprocessor لتنظيم روابط لصور او لاعطاء class لكل div ستضيف فيه صورة وبالتالي ستتعقد الامور أكثر لذلك انصحك بابقائها كما هيا الان (اي عن طريق وسم img) وهذا أفضل حل ...

    المزيد حول css transitions

     

    اريد استعمال هذه الطريقة لكي لا يتشوه شكل الصورة عند تصغير الشاشة 

  3. بتاريخ 10 ساعات قال hassenzouari98:

    يمكنك صنع سلايدر  مثل هذا السلايدر الموجود في الصورة ، والذي يعرض صورة واحدة فقط وبها فقرة وأزرار تنقل عمودية بالاعتماد على html و bootstrap و jquery وذلك لتسهيل الامر والسرعة في انجازها حيث سيكون الكود كما هو التالي :

    هذه هي صفحة html التي ستحتوي على الصور والنصوص والازرار ... 

    
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>jQuery &amp; Bootstrap Carousel Demo</title>
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <link href="style.css" rel="stylesheet" type="text/css">
    </head>
    
    <body>
    <div id="myCarousel" class="carousel slide" data-ride="carousel"> 
      <div class="carousel-inner">
        <div class="item active"> <img src="http://lorempixel.com/1200/400/sports" style="width:100%" alt="First slide">
          <div class="container">
            <div class="carousel-caption">
              <div>
    		  <div class="likes"> 
    		  <div>5k</div>
    		  <span class="glyphicon glyphicon-heart"></span>
    		  </div>
    		  <div class="comments"> 
    		  <div>5k</div>
    		  <span class="glyphicon glyphicon-comment"></span>
    		  </div>
    		  </div>
              <p>Aenean a rutrum nulla. Vestibulum a arcu at nisi tristique pretium.</p>
              <!--<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>-->
            </div>
          </div>
        </div>
        <div class="item"> <img src="http://lorempixel.com/1200/400/people" style="width:100%" data-src="" alt="Second    slide">
          <div class="container">
            <div class="carousel-caption">
              <div>
    		  <div class="likes"> 
    		  <div>5k</div>
    		  <span class="glyphicon glyphicon-heart"></span>
    		  </div>
    		  <div class="comments"> 
    		  <div>5k</div>
    		  <span class="glyphicon glyphicon-comment"></span>
    		  </div>
    		  </div>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae egestas purus. </p>
              <!--<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>-->
            </div>
          </div>
        </div>
        <div class="item"> <img src="http://lorempixel.com/1200/400/abstract" style="width:100%" data-src="" alt="Third slide">
          <div class="container">
            <div class="carousel-caption">
              <div>
    		  <div class="likes"> 
    		  <div>5k</div>
    		  <span class="glyphicon glyphicon-heart"></span>
    		  </div>
    		  <div class="comments"> 
    		  <div>5k</div>
    		  <span class="glyphicon glyphicon-comment"></span>
    		  </div>
    		  </div>
              <p>Donec sit amet mi imperdiet mauris viverra accumsan ut at libero.</p>
              <!--<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>-->
            </div>
          </div>
        </div>
      </div>
      <div class="carousel-control-group">
      <a class="carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-up"></span></a>
      <a class="marg-nt carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-down"></span></a> 
      </div>
      </div>
    </body>
    </html>

    وهذه صفحة الcss التي ستحتوي على الستايل اي كيفية تنسيق الصفحة .. 

    
    #jquery-script-menu {
    position: fixed;
    height: 90px;
    width: 100%;
    top: 0;
    left: 0;
    border-top: 5px solid #316594;
    background: #fff;
    -moz-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
    -webkit-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
    box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
    z-index: 999999;
    padding: 10px 0;
    -webkit-box-sizing:content-box;
    -moz-box-sizing:content-box;
    box-sizing:content-box;
    }
    
    .jquery-script-center {
    width: 960px;
    margin: 0 auto;
    }
    .jquery-script-center ul {
    width: 212px;
    float:left;
    line-height:45px;
    margin:0;
    padding:0;
    list-style:none;
    }
    .jquery-script-center a {
    	text-decoration:none;
    }
    .jquery-script-ads {
    width: 728px;
    height:90px;
    float:right;
    }
    .jquery-script-clear {
    clear:both;
    height:0;
    }
    .carousel-control {
    	color: #607D8B;
        height: 25px;
        width: 25px;
        background-color: #fff;
    }
    .carousel-control:hover {
    	color: #607D8B;
    }
    .carousel-control-group {
        position: absolute;
        top: 40%;
        left: 5%;
        transform: translate(-50%, -50%);
    }
    .marg-nt {
    	margin-top: 40px;
    }
    .likes , .comments {
    	display:inline-block;
    	font-size:20px;
    }
    .likes {
    	padding-right:10px;
    }

    يجدر الذكر بانه يمكنك استخدام هذا الكود في انظمة المحتوى كما هو الحال بالنسبة للبرمجة الخاصة ... 

    ملاجظة اخيرة : لاتنسى القيام باستدعاء المكتابات المستعملة في هذا الكود عند القيام بدمجه بالكود الخاص بك ..

    وهذه صورة تبين الحالة التي سيكون عليها السلايدر بعد الانتهاء من تركيبه https://i.suar.me/81X2

    شكراا اخي على اجابتك انا ايضا اريده بالبوتستراب

     

    اخي اريد ان استفسرك 

    هل من طريقة للحصول على نفس النتيجة لكن هذه المرة باستعمال background-image بدلا من وضع صور

    واتجاه الحركة تكون عمودية وشكراا جزيلا

  4. أريد معرفة الطريقة التي يتم الاعتماد عليها لبرمجة مثل هذه الاحصائيات (انظر الصورة المرفقة) باستعمال PHP و html5/css3 وبيانات مخزنة في قاعدة بيانات mysql.

    مثلًا أريد عمل إحصائيات لعدد المسجلين في الموقع كل شهر

    Capture.PNG

  5. بتاريخ 2 ساعات قال hassenzouari98:

    اهلا اخي ، 
    باختصار طريقة رفع الصور بphp في اغلب السكريبتات (لكي لااقول كل السكريبتات) .. 
    هي حفظ الصورة في مجلد images وحفظ اسم الصورة في قاعدة البيانات .. 
    ومن ثم ينادونها في src التابع لوسم img كالتالي :

    
    <img src="المسار الذي ينقلنا الى اسم المجلد/اسم الصورة">

    مثال (حيث ان $image هو اسم الصورة من جدول قاعدة البيانات) :

    
    <img src='directory/images/<?php echo $image ?>'>

    اتمنى ان يكون كل شئ واضح ،
    تحياتي

    يعني الطريقة الاخرى غالبا لا تستعمل ؟؟

  6. أريد معرفة ما هي الطرق التي تعتمد في أغلب السكربتات المبرمجة باستخدام php والتي تعتمد على رفع الصور، هل يتم تخزين الصور كــ binary data في قاعدة البيانات، أم يتم تخزينها في ملف images مثلا.

    ما هي أفضل طريقة من حيث الخفة والأرشفة وان أمكن شرح لكل طريقة وشكرًا جزيلًا.

×
×
  • أضف...