Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,037

HOME > PHP > PHP Forum > ช่วยดู scrollbar ของ jquery หน่อยสิครับ ติดปัญหาตรงเลื่อน content ไม่ได้ พอดีลูกค้าเค้าไม่อยากได้แฟลชเลยต้องใช้ jquery ทำ



 

ช่วยดู scrollbar ของ jquery หน่อยสิครับ ติดปัญหาตรงเลื่อน content ไม่ได้ พอดีลูกค้าเค้าไม่อยากได้แฟลชเลยต้องใช้ jquery ทำ

 



Topic : 064878



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

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์
Twitter



ช่วยดู scrollbar ของ jquery หน่อยสิครับ
ติดปัญหาตรงเลื่อน content ไม่ได้ พอดีลูกค้าเค้าไม่อยากได้แฟลชเลยต้องใช้ jquery ทำ อะ
มันพลาดตรงไหนไม่รู้อะ



Tag : PHP, jQuery









ประวัติการแก้ไข
2011-08-17 16:06:57
Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2011-08-17 11:54:37 By : nottpoo View : 1564 Reply : 6
 

 

No. 1



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

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์


Code (PHP)
<!--scroll -->
<link href="http://www.portgoo.com/test/css/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script> <!-- จุดนี้ คุณปู แทรกเข้ามาผิดครับ ตัวไฟล์น่าจะอยู่อีกพาธหนึ่งมั้ง-->
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script> <!-- จุดนี้ คุณปู แทรกเข้ามาผิดครับ ตัวไฟล์น่าจะอยู่อีกพาธหนึ่งมั้ง -->
<script src="http://www.portgoo.com/test/css/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="http://www.portgoo.com/test/css/jquery.mousewheel.min.js" type="text/javascript"></script>
<!--Content -->

<div id="mcs4_container">
  <div class="customScrollBox">
    <div class="container">
      <div class="content">
        <p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. </p>
        <p>consectetur adipiscing elit. Nulla consectetur libero consectetur quam consequat nec tincidunt massa feugiat. Donec egestas mi turpis. Fusce adipiscing dui eu metus gravida vel facilisis ligula iaculis. Cras a rhoncus massa. Donec sed purus eget nunc placerat consequat. Nulla facilisi. Nam vel augue odio, dignissim mattis dolor. Nullam at mi aliquet quam interdum consectetur. Duis tempus mauris in lorem dictum eget euismod urna aliquet. In vestibulum tempor porta.</p>
        <p>Morbi porttitor rhoncus nisi, eget vehicula quam sodales at. Maecenas ipsum tellus, mollis quis faucibus id, feugiat molestie lacus. Sed nec quam purus, at condimentum quam. Integer imperdiet faucibus urna tempus consectetur. Nullam non purus ligula, et tincidunt nulla. Aenean tincidunt, dui at elementum egestas, sem turpis volutpat turpis, nec congue purus quam quis ligula. Nam dictum rutrum pulvinar. Aenean sed cursus purus. Curabitur non dui eu nibh fermentum interdum a id dui. Fusce iaculis blandit tellus, nec tincidunt massa adipiscing id. Aliquam dui massa, porttitor eget molestie at, semper eu libero. Suspendisse sit amet velit et elit viverra convallis vitae ut turpis. Maecenas vehicula blandit odio sollicitudin eleifend. Curabitur molestie porta neque ac imperdiet. Phasellus nec nisl non lectus pharetra porttitor sit amet tristique mi. Integer vehicula vestibulum sem vitae varius. Ut scelerisque semper posuere.</p>
        <img src="images/7.jpg" />
        <p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. Cras venenatis condimentum nibh a mollis. Duis id sapien nibh. Vivamus porttitor, felis quis blandit tincidunt, erat magna scelerisque urna, a faucibus erat nisl eget nisl. Aliquam consequat turpis id velit egestas a posuere orci semper. Mauris suscipit erat quis urna adipiscing ultricies. In hac habitasse platea dictumst. Nulla scelerisque lorem quis dui sagittis egestas. Etiam sed massa felis, aliquam pellentesque est. Quisque quis ante tortor, sed egestas risus. Maecenas varius adipiscing nulla, nec rhoncus est mattis id. Aenean blandit convallis nisi at fringilla. Nunc id massa eu sapien fringilla posuere.</p>
      </div>
    </div>
    <div class="dragger_container">
      <div class="dragger"></div>
    </div>
  </div>
  <!-- scroll buttons --> 
  <a class="scrollUpBtn" href="#"></a> <a class="scrollDownBtn" href="#"></a> </div>
</div>
</div>
<noscript>
<style type="text/css">
        #mcs_container .customScrollBox{overflow:auto;}
        #mcs_container .dragger_container{display:none;}
    </style>
</noscript>
<script>
$(window).load(function() {
	mCustomScrollbars();
}); 
</script> 
<script src="js/jquery.mCustomScrollbar.js"type="text/javascript"></script>  <!-- จุดนี้ คุณปู แทรกเข้ามาผิดครับ ตัวนี้ผมโหลดมาไว้ที่เครื่องผมครับ -->
<script>
function mCustomScrollbars(){
	/* 
	malihu custom scrollbar function parameters: 
	1) scroll type (values: "vertical" or "horizontal")
	2) scroll easing amount (0 for no easing) 
	3) scroll easing type 
	4) extra bottom scrolling space for vertical scroll type only (minimum value: 1)
	5) scrollbar height/width adjustment (values: "auto" or "fixed")
	6) mouse-wheel support (values: "yes" or "no")
	7) scrolling via buttons support (values: "yes" or "no")
	8) buttons scrolling speed (values: 1-20, 1 being the slowest)
	*/
	$("#mcs4_container").mCustomScrollbar("vertical",900,"easeOutCirc",1.05,"auto","yes","no",0); 
}
/* function to fix the -10000 pixel limit of jquery.animate */
$.fx.prototype.cur = function(){
    if ( this.elem[this.prop] != null && (!this.elem.style || this.elem.style[this.prop] == null) ) {
      return this.elem[ this.prop ];
    }
    var r = parseFloat( jQuery.css( this.elem, this.prop ) );
    return typeof r == 'undefined' ? 0 : r;
}
</script>
</body></html>


ตามคอมเม้นแต่ละจุดเลยครับคุณปู น่าจะได้หน่ะ






แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2011-08-17 13:30:26 By : ไวยวิทย์
 


 

No. 2



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

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์
Twitter

ทำไมยังไม่เห็นได้เลยอะ โหลดทุกอย่างมาไว้ที่เครื่องตัวเองหมดแล้วนะครับ วิทย์ทำมันเลื่อนได้มั้ยอะ อัพให้ดูหน่อยดิ

ไฟล์ top.inc.php
Code (PHP)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--control -->
<link href="css/style.css" rel="stylesheet" type="text/css" />
<!--menu -->
<link href="css/menu.css" rel="stylesheet" type="text/css" />
<!--scroll -->
<link href="css/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="js/jquery.mousewheel.min.js" type="text/javascript"></script> 
<title>To Design & Develop</title>
</head>
<body>



ไฟล์ scrollbar.php
Code (PHP)
<? require("top.inc.php"); ?>
<!--Content -->
<div id="mcs4_container">
<div class="customScrollBox">
<div class="container">
<div class="content">
<p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. </p>
      <p>consectetur adipiscing elit. Nulla consectetur libero consectetur quam consequat nec tincidunt massa feugiat. Donec egestas mi turpis. Fusce adipiscing dui eu metus gravida vel facilisis ligula iaculis. Cras a rhoncus massa. Donec sed purus eget nunc placerat consequat. Nulla facilisi. Nam vel augue odio, dignissim mattis dolor. Nullam at mi aliquet quam interdum consectetur. Duis tempus mauris in lorem dictum eget euismod urna aliquet. In vestibulum tempor porta.</p>
      <p>Morbi porttitor rhoncus nisi, eget vehicula quam sodales at. Maecenas ipsum tellus, mollis quis faucibus id, feugiat molestie lacus. Sed nec quam purus, at condimentum quam. Integer imperdiet faucibus urna tempus consectetur. Nullam non purus ligula, et tincidunt nulla. Aenean tincidunt, dui at elementum egestas, sem turpis volutpat turpis, nec congue purus quam quis ligula. Nam dictum rutrum pulvinar. Aenean sed cursus purus. Curabitur non dui eu nibh fermentum interdum a id dui. Fusce iaculis blandit tellus, nec tincidunt massa adipiscing id. Aliquam dui massa, porttitor eget molestie at, semper eu libero. Suspendisse sit amet velit et elit viverra convallis vitae ut turpis. Maecenas vehicula blandit odio sollicitudin eleifend. Curabitur molestie porta neque ac imperdiet. Phasellus nec nisl non lectus pharetra porttitor sit amet tristique mi. Integer vehicula vestibulum sem vitae varius. Ut scelerisque semper posuere.</p>
        <img src="images/7.jpg" />
        <p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. Cras venenatis condimentum nibh a mollis. Duis id sapien nibh. Vivamus porttitor, felis quis blandit tincidunt, erat magna scelerisque urna, a faucibus erat nisl eget nisl. Aliquam consequat turpis id velit egestas a posuere orci semper. Mauris suscipit erat quis urna adipiscing ultricies. In hac habitasse platea dictumst. Nulla scelerisque lorem quis dui sagittis egestas. Etiam sed massa felis, aliquam pellentesque est. Quisque quis ante tortor, sed egestas risus. Maecenas varius adipiscing nulla, nec rhoncus est mattis id. Aenean blandit convallis nisi at fringilla. Nunc id massa eu sapien fringilla posuere.</p></div>
</div>
<div class="dragger_container"><div class="dragger"></div></div>
</div>
<!-- scroll buttons -->
<a class="scrollUpBtn" href="#"></a> <a class="scrollDownBtn" href="#"></a>
</div>
</div></div>
<noscript>
    <style type="text/css">
        #mcs_container .customScrollBox{overflow:auto;}
        #mcs_container .dragger_container{display:none;}
    </style>
</noscript>
<script>
$(window).load(function() {
    $("#mcs_container").mCustomScrollbar("vertical",400,"easeOutCirc",1.05,"auto","yes","yes",10);
});
</script>

<script src="js/jquery.mCustomScrollbar.js" type="text/javascript"></script>

<script>
function mCustomScrollbars(){
	/* 
	malihu custom scrollbar function parameters: 
	1) scroll type (values: "vertical" or "horizontal")
	2) scroll easing amount (0 for no easing) 
	3) scroll easing type 
	4) extra bottom scrolling space for vertical scroll type only (minimum value: 1)
	5) scrollbar height/width adjustment (values: "auto" or "fixed")
	6) mouse-wheel support (values: "yes" or "no")
	7) scrolling via buttons support (values: "yes" or "no")
	8) buttons scrolling speed (values: 1-20, 1 being the slowest)
	*/
	$("#mcs3_container").mCustomScrollbar("vertical",900,"easeOutCirc",1.05,"auto","yes","no",0); 
}
/* function to fix the -10000 pixel limit of jquery.animate */
$.fx.prototype.cur = function(){
    if ( this.elem[this.prop] != null && (!this.elem.style || this.elem.style[this.prop] == null) ) {
      return this.elem[ this.prop ];
    }
    var r = parseFloat( jQuery.css( this.elem, this.prop ) );
    return typeof r == 'undefined' ? 0 : r;
}
</script>
</body>
</html>



ประวัติการแก้ไข
2011-08-17 14:55:02
2011-08-17 14:58:45
2011-08-17 16:07:12
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2011-08-17 14:53:55 By : nottpoo
 

 

No. 3



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

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์


ส่งลิงค์ไปให้ลองคลิกแล้วหน่ะ ครับ คุณปู
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2011-08-17 15:27:15 By : ไวยวิทย์
 


 

No. 4



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

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์


26.$(window).load(function() {
27.$("#mcs_container").mCustomScrollbar("vertical",400,"easeOutCirc",1.05,"auto","yes","yes",10);
28.});

เปลี่ยนเป็น

$(window).load(function() {
mCustomScrollbars();
});

ครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2011-08-17 15:31:09 By : ไวยวิทย์
 


 

No. 5



โพสกระทู้ ( 5,149 )
บทความ ( 26 )

สมาชิกที่ใส่เสื้อไทยครีเอท Hall of Fame 2012

สถานะออฟไลน์


http://baijs.nl/tinyscrollbar/

พี่เดี่ยวแนะนำตัวนี้ครับ ใช้งานง่าย ไม่ซับไม่ซ้อน
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2011-08-17 17:25:42 By : deawx
 


 

No. 6

Guest


ตอบความคิดเห็นที่ : 5 เขียนโดย : deawx เมื่อวันที่ 2011-08-17 17:25:42
รายละเอียดของการตอบ ::
ขอบคุณมากๆๆๆๆๆๆๆๆๆๆครับ

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2011-11-15 01:41:13 By : pop
 

   

ค้นหาข้อมูล


   
 

แสดงความคิดเห็น
Re : ช่วยดู scrollbar ของ jquery หน่อยสิครับ ติดปัญหาตรงเลื่อน content ไม่ได้ พอดีลูกค้าเค้าไม่อยากได้แฟลชเลยต้องใช้ jquery ทำ
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

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

Notice

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

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 04
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่