Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,027

HOME > PHP > PHP Forum > ถามเรื่องการเเสดงข้อมูล ให้เเสดงรูปเเบบตามที่ต้องการหน่อยครับ

ถามเรื่องการเเสดงข้อมูล ให้เเสดงรูปเเบบตามที่ต้องการหน่อยครับ

เริ่มหัวข้อใหม่

Golff

โพสกระทู้ ( 43 )
บทความ ( 0 )

ผมอยากให้กดปุ่มเเล้วเเสดงข้อมูล ให้มันเรียงไปทางขวาครับเเล้วค่อยลงบรรทัดใหม่
ตอนนี้มันบรรทัดละตัวหมดเลย

Code (PHP)

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>


   <style type="text/css">
     
    #overlay {   
        position: absolute;  
        top: 0px;   
        left: 0px;  
        background: #ccc;   
        width: 100%;   
        height: 100%;   
        opacity: .75;   
        filter: alpha(opacity=75);   
        -moz-opacity: .75;  
        z-index: 999;  
        background: #fff url(http://i.imgur.com/KUJoe.gif) 50% 50% no-repeat;
        transition-delay: 10s;
    }   
    .main-contain{
        position: absolute;  
        top: 0px;   
        left: 0px;  
        width: 100%;   
        height: 100%;   
        overflow: hidden;
    }
    
    </style>
</head>
<body>
  <?php
$test =100; 
$test1 =50; 
 ?>
<button type="button" class="btn btn-success">Success</button>
<div class="container">
  <h2>Dynamic Tabs</h2>
  <ul class="nav nav-tabs">
    <li class="active"><a href="#home">Home</a></li>
    <li><a href="#menu1">Menu 1</a></li>
    <li><a href="#menu2">Menu 2</a></li>
    <li><a href="#menu3">Menu 3</a></li>
  </ul>




  <div class="tab-content">
    <div id="overlay"></div>  
    <div id="home" class="tab-pane fade in active ">

      <div class="container">
 <div class="row">
     <div class="card" style="width:150px;margin-top: 2%">
    <img class="card-img-top" src="img/02.jpg" alt="Card image" style="width:100%">
    <p>sad</p>
    <div class="card-body">
     <div class="progress-bar" style="width:<?php echo $test.'%'  ?>"><?php echo $test.'%'  ?></div>
    </div>
  </div>
  <br>
<div style="width: 2%; "></div>

 <div class="card" style="width:150px;margin-top: 2%">
    <img class="card-img-top" src="img/02.jpg" alt="Card image" style="width:100%">
    <p>sad</p>
    <div class="card-body">
     <div class="progress-bar" style="width:<?php echo $test1.'%'  ?>"><?php echo $test1.'%'  ?></div>
    </div>
  </div>
  <br>
<div style="width: 2%; "></div>
    </div><!-- row -->
    </div><!-- container -->

      </div><!-- home -->




    <div id="menu1" class="tab-pane fade active in ">
      <h3>Menu 1</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="menu2" class="tab-pane fade active in">
      <h3>Menu 2</h3>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>
    <div id="menu3" class="tab-pane fade active in">
      <h3>Menu 3</h3>
      <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    </div>



  </div><!-- tab-content -->
 </div><!-- container -->
<script>
$(document).ready(function(){
  $(".nav-tabs a").click(function(){
    $(this).tab('show');
  });
});

$("#home.tab-pane").removeClass("active in"); // เริ่มต้นไม่แสดง
 $("#menu1.tab-pane").removeClass("active in"); // เริ่มต้นไม่แสดง 
$("#menu2.tab-pane").removeClass("active in");
$("#menu3.tab-pane").removeClass("active in");
  var tabHome = null; // สร้างตัวแปร เก็บสถานะการคลิกที่ปุ่ม
var tabmenu1 = null;
var tabmenu2 = null;
var tabmenu3 = null;
  $(".btn-success").click(function(){
    tabHome = true; // เปลี่ยนสถานะเมื่อคลิก
tabmenu1 = true;
tabmenu2 = true;
tabmenu3 = true;
  });

  $('.nav-tabs a').on('shown.bs.tab', function (e) { // เมื่อแสดงข้อมูลในแท็บแล้ว

    if($(e.target).attr("href")=="#home"){ // ถ้าเป็นของปุ่ม แรก
        //console.log("Home click");

      if(tabHome == true){ // เมื่อมีกาารคลิกที่ปุ่ม success
    
      }else{ // ยังไม่คลิก
        $("#home.tab-pane").removeClass("active in"); // ยังไม่แสดง
      }      
    }

if($(e.target).attr("href")=="#menu1"){ // ถ้าเป็นของปุ่ม แรก
        //console.log("menu1 click");

      if(tabmenu1 == true){ // เมื่อมีกาารคลิกที่ปุ่ม success
   
      }else{ // ยังไม่คลิก
        $("#menu1.tab-pane").removeClass("active in"); // ยังไม่แสดง
      }      
    }

if($(e.target).attr("href")=="#menu2"){ // ถ้าเป็นของปุ่ม แรก
        //console.log("menu1 click");

      if(tabmenu2 == true){ // เมื่อมีกาารคลิกที่ปุ่ม success
   
      }else{ // ยังไม่คลิก
        $("#menu2.tab-pane").removeClass("active in"); // ยังไม่แสดง
      }      
    }

if($(e.target).attr("href")=="#menu3"){ // ถ้าเป็นของปุ่ม แรก
        //console.log("menu1 click");

      if(tabmenu3 == true){ // เมื่อมีกาารคลิกที่ปุ่ม success
   
      }else{ // ยังไม่คลิก
        $("#menu3.tab-pane").removeClass("active in"); // ยังไม่แสดง
      }      
    }

  });  

$(".btn-success").click(function(){
  tabHome = true; // เปลี่ยนสถานะเมื่อคลิก
tabmenu1 = true;
tabmenu2 = true;
tabmenu3 = true;


$("#overlay").show().fadeOut(500,function(){


  if($("a[href='#home']").parent("li").hasClass("active")){ // ก้าถูกซ่อนอยู่

    $("#home.tab-pane").addClass("active in"); // ให้แสดงข้อมูล
      //console.log("home click");

   tabmenu1 = null;
    tabmenu2= null;
    tabmenu3= null;
$( "#home" ).load(window.location.href + " #home"  );
  }


if($("a[href='#menu1']").parent("li").hasClass("active")){ // ก้าถูกซ่อนอยู่
  $("#overlay").show().fadeOut("slow",function(){
    });
    $("#menu1.tab-pane").addClass("active in"); // ให้แสดงข้อมูล
   tabHome = null;
  tabmenu2= null;
  tabmenu3= null;
$( "#menu1" ).load(window.location.href + " #menu1" );
  }

if($("a[href='#menu2']").parent("li").hasClass("active")){ // ก้าถูกซ่อนอยู่
  $("#overlay").show().fadeOut("slow",function(){
    });
    $("#menu2.tab-pane").addClass("active in"); // ให้แสดงข้อมูล
   tabHome = null;
  tabmenu1 = null;
  tabmenu3 = null;
$( "#menu2" ).load(window.location.href + " #menu2" );
  }

if($("a[href='#menu3']").parent("li").hasClass("active")){ // ก้าถูกซ่อนอยู่
  $("#overlay").show().fadeOut("slow",function(){
    });
    $("#menu3.tab-pane").addClass("active in"); // ให้แสดงข้อมูล
   tabHome = null;
  tabmenu2 = null;
  tabmenu1= null;
$( "#menu3" ).load(window.location.href + " #menu3" );
  }

});
    });


$(function(){

$("#overlay").fadeOut();
    $(".main-contain").removeClass("main-contain");
});
</script>

</body>
</html>

Tag : PHP, JavaScript

ประวัติการแก้ไข
2020-03-30 23:50:47

Date : 2020-03-30 23:50:04

By : 1768876979829526

View : 1114

Reply : 6

No. 1

Chaidhanan

โพสกระทู้ ( 9,559 )
บทความ ( 2 )

https://www.quora.com/What-is-the-difference-between-float-left-and-display-inline-block-in-CSS3

Date : 2020-03-31 05:28:35

By : Chaidhanan

No. 2

พระยาเทพ

โพสกระทู้ ( 1,458 )
บทความ ( 0 )

มี Bootstrap ในโค้ด ทำไมไม่ใช้ครับ

Bootstrap 3 - ใช้ Grid Markup
https://www.w3schools.com/code/tryit.asp?filename=GDD6DEZG755V (กด Change Orientation ก่อน run)

Bootstrap 4 - ใช้ Card Deck
https://www.tutlane.com/example/bootstrap/bootstrap-card-decks-example

ประวัติการแก้ไข
2020-03-31 14:51:40

Date : 2020-03-31 14:50:14

By : PhrayaDev

No. 3

Golff

โพสกระทู้ ( 43 )
บทความ ( 0 )

ตอบความคิดเห็นที่ : 1 เขียนโดย : Chaidhanan เมื่อวันที่ 2020-03-31 05:28:35

รายละเอียดของการตอบ ::

ขอบคุณครับ

ตอบความคิดเห็นที่ : 2 เขียนโดย : PhrayaDev เมื่อวันที่ 2020-03-31 14:50:14

รายละเอียดของการตอบ ::

ขอบคุณครับ

ถามอีกอย่างครับถ้าหลอดมัน 100% เเล้วผมอยากให้มันขยับได้ หรือมีเเสงออก ทั้งกรอบรูปเลยต้องทำยังไงครับ
ขอคำเเนะนำหน่อยครับ

Code (PHP)

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Card Decks Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <style>
        .bcontent {
            margin-top: 10px;
        }
    </style>
</head>
<body>
	<?php
$test =100; 
$test1 =40;
 ?>
    <div class="container-fluid bcontent">
        <h2>Bootstrap Card Decks</h2>
        <hr />
        <div class="card-deck">
        	<div class="col-sm-3" >
            <div class="card">
                <img class="card-img-top" src="https://i.ytimg.com/vi/fczSjmhIYnk/maxresdefault.jpg" alt="Suresh Dasari Card">
                <div class="card-body">
                    <h5 class="card-title">Suresh Dasari</h5>
                    <p class="card-text">Suresh Dasari is a founder and technical lead developer in tutlane.</p>
                </div>
                <div class="card-footer">
                    <small class="text-muted"><div class="progress-bar" style="width:<?php echo $test.'%'  ?>"><?php echo $test.'%'  ?></div></small>
                </div>
            </div>

             </div>
           
           <div class="col-sm-3" >
            <div class="card">
                <img class="card-img-top" src="https://i.ytimg.com/vi/fczSjmhIYnk/maxresdefault.jpg" alt="Suresh Dasari Card">
                <div class="card-body">
                    <h5 class="card-title">Suresh Dasari</h5>
                    <p class="card-text">Suresh Dasari is a founder and technical lead developer in tutlane.</p>
                </div>
                <div class="card-footer">
                    <small class="text-muted"><div class="progress-bar" style="width:<?php echo $test1.'%'  ?>"><?php echo $test1.'%'  ?></div></small>
                </div>
            </div>
            
             </div>

        </div>
    </div>
</body>
</html>

ประวัติการแก้ไข
2020-03-31 16:17:18

Date : 2020-03-31 16:16:43

By : 1768876979829526

No. 4

พระยาเทพ

โพสกระทู้ ( 1,458 )
บทความ ( 0 )

จาก
Code (PHP)

<div class="card">

เป็น
Code (PHP)

<div class="card <?php echo $test1 == 100 ? ' card-100' : ''  ?>">

ตัวอย่าง CSS

<style>
        .card-100 {
            -webkit-animation: alert 2s linear 0s infinite normal;
            -moz-animation: alert 2s linear 0s infinite normal;
            -ms-animation: alert 2s linear 0s infinite normal;
            animation: alert 2s linear 0s infinite normal;
        }
        
        @-webkit-keyframes alert {
            0% {
                -webkit-transform: translateX(0);
                transform: translateX(0);
            }
            5% {
                -webkit-transform: translateX(-10px);
                transform: translateX(-10px);
            }
            10% {
                -webkit-transform: translateX(10px);
                transform: translateX(10px);
            }
            15% {
                -webkit-transform: translateX(-10px);
                transform: translateX(-10px);
            }
            20% {
                -webkit-transform: translateX(10px);
                transform: translateX(10px);
            }
            25% {
                -webkit-transform: translateX(-10px);
                transform: translateX(-10px);
            }
            30% {
                -webkit-transform: translateX(10px);
                transform: translateX(10px);
            }
            35% {
                -webkit-transform: translateX(-10px);
                transform: translateX(-10px);
            }
            40% {
                -webkit-transform: translateX(10px);
                transform: translateX(10px);
            }
            45% {
                -webkit-transform: translateX(-10px);
                transform: translateX(-10px);
            }
            50% {
                -webkit-transform: translateX(0);
                transform: translateX(0);
            }
        }
        
        @keyframes alert {
            0% {
                -ms-transform: translateX(0);
                transform: translateX(0);
            }
            5% {
                -ms-transform: translateX(-10px);
                transform: translateX(-10px);
            }
            10% {
                -ms-transform: translateX(10px);
                transform: translateX(10px);
            }
            15% {
                -ms-transform: translateX(-10px);
                transform: translateX(-10px);
            }
            20% {
                -ms-transform: translateX(10px);
                transform: translateX(10px);
            }
            25% {
                -ms-transform: translateX(-10px);
                transform: translateX(-10px);
            }
            30% {
                -ms-transform: translateX(10px);
                transform: translateX(10px);
            }
            35% {
                -ms-transform: translateX(-10px);
                transform: translateX(-10px);
            }
            40% {
                -ms-transform: translateX(10px);
                transform: translateX(10px);
            }
            45% {
                -ms-transform: translateX(-10px);
                transform: translateX(-10px);
            }
            50% {
                -ms-transform: translateX(0);
                transform: translateX(0);
            }
        }
    </style>

Date : 2020-03-31 18:56:11

By : PhrayaDev

No. 5

Golff

โพสกระทู้ ( 43 )
บทความ ( 0 )

ตอบความคิดเห็นที่ : 4 เขียนโดย : PhrayaDev เมื่อวันที่ 2020-03-31 18:56:11

รายละเอียดของการตอบ ::

ขอบคุณครับ

การทำเเบบนี้เรียกว่าอะไรหรอครับ
อยากหาตัวอย่างอีกครับ

ประวัติการแก้ไข
2020-03-31 19:28:21
2020-03-31 19:44:46
2020-03-31 19:45:16

Date : 2020-03-31 19:27:41

By : 1768876979829526

No. 6

พระยาเทพ

โพสกระทู้ ( 1,458 )
บทความ ( 0 )

CSS Animations ครับ
https://www.w3schools.com/css/css3_animations.asp

หรือ ลองค้นด้วยคำว่า "css animation generator"
ศึกษาเรื่อง keyframe แล้วนำมาประยุกต์ใช้ครับ

Date : 2020-03-31 20:04:17

By : PhrayaDev

ค้นหาข้อมูล

แสดงความคิดเห็น

Re : ถามเรื่องการเเสดงข้อมูล ให้เเสดงรูปเเบบตามที่ต้องการหน่อยครับ

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก