PDA

View Full Version : مشکل با لیست کشویی



hassan68
سه شنبه 03 تیر 1393, 17:22 عصر
با سلام
من دکمه رادیویی دارم که وقتی روش کلیک میشه به وسیله کد post آژاکس یک فایل دیکه فراخوانی میشه که داخلش یک لیست کشویی روباز میکنه از طریق این منوی کشویی دوباره با همان کد post آژاکس یک یک متنی چاپ میشه خوب
توی اون لیست کشویی ما از 1 تا 10 داریم که رو هرکدومش کلیک بشه یک متنی رو با آژاکس برامون باز میکنه من مشکلی که دارم نمیدونم چرا وقتی مثلا عدد 5 کلیک می کنیم متن مربوط به عدد5 میاد ولی اتومات عدد لیست کشویی میاد رو 1 قرار میگیره چرا؟

<SCRIPT type="text/javascript">
$(document).ready(function(){


$("#option4").click(function() {


var usr = $("#option4").val();


if(usr.length >= 1)
{
$("#shopinload").html('<img src="loader.gif" align="absmiddle">&nbsp;در حال بررسی ...');


$.ajax({
type: "POST",
url: "check.php",
data: "username="+ usr,
success: function(msg){

$("#shopinload").ajaxComplete(function(event, request, settings){


if(msg == 'OK')
{
$("#option4").removeClass('object_error'); // if necessary
$("#option4").addClass("object_ok");
$(this).html('&nbsp;<img src="tick.gif" align="absmiddle">');
}
else
{
$("#option4").removeClass('object_ok'); // if necessary
$("#option4").addClass("object_error");
$(this).html(msg);
}

});


}

});


}
else
{
$("#shopinload").html('<font color="red">لطفا یک موقیعت را برای آگهی خود انتخاب کنید.</font>');
$("#option4").removeClass('object_ok'); // if necessary
$("#option4").addClass("object_error");
}


});


});
</script>



با این فایل post ها راانجام میدم و با فایل check.php متنو echo میزنم

greenkit
یک شنبه 18 مرداد 1394, 00:32 صبح
با سلام
چطور میتونم لیست کشویی شبیه به این برا مطالبم درست کنم؟
http://farsi-nopcommerce.ir/%D8%A7%D...86%D8%A7%D8%AA (http://farsi-nopcommerce.ir/%D8%A7%D9%85%DA%A9%D8%A7%D9%86%D8%A7%D8%AA)

sinoser
یک شنبه 18 مرداد 1394, 09:58 صبح
با سلام
من دکمه رادیویی دارم که وقتی روش کلیک میشه به وسیله کد post آژاکس یک فایل دیکه فراخوانی میشه که داخلش یک لیست کشویی روباز میکنه از طریق این منوی کشویی دوباره با همان کد post آژاکس یک یک متنی چاپ میشه خوب

با این فایل post ها راانجام میدم و با فایل check.php متنو echo میزنم

این جور مشکلا رو توی https://jsfiddle.net بزن و بزار لینکشو بزار . چون هم نیازه ساختار معلوم باشه معلوم نیست این id ها چی هستن از طرفی کسایی که پاسخ میدن راحت می تونن حداسشونو بررسی کنم و جلوه سوالتم ترسناک نمیشه که همه بگین بیخیال کی حال داره :لبخند:

sinoser
یک شنبه 18 مرداد 1394, 10:01 صبح
با سلام
چطور میتونم لیست کشویی شبیه به این برا مطالبم درست کنم؟
http://farsi-nopcommerce.ir/%D8%A7%D...86%D8%A7%D8%AA (http://farsi-nopcommerce.ir/%D8%A7%D9%85%DA%A9%D8%A7%D9%86%D8%A7%D8%AA)

اینجا چندتا پلاگین با دمو و اموزش هست
http://www.htmldrive.net/search?q=Accordion&yt1.x=0&yt1.y=0&yt1=submit

البته اگر از jQuery UI تو پروژت استفاده می کنی می تونی از داخل اون استفاده کنی
https://jqueryui.com/accordion/

mehrvarzan
یک شنبه 18 مرداد 1394, 13:19 عصر
جواب سوالتون خیلی راحته. البته اگه درست متوجه سوالتون شده باشم

کافیه دستور زیر روی در صورت تایید وارد کنید

$('selectid').val('valid');

greenkit
یک شنبه 18 مرداد 1394, 17:11 عصر
خیلی ممنون
سپاسگذارم

greenkit
یک شنبه 18 مرداد 1394, 22:07 عصر
اینجا چندتا پلاگین با دمو و اموزش هست
http://www.htmldrive.net/search?q=Accordion&yt1.x=0&yt1.y=0&yt1=submit

البته اگر از jQuery UI تو پروژت استفاده می کنی می تونی از داخل اون استفاده کنی
https://jqueryui.com/accordion/

میشه بگید برا اجرا این http://www.htmldrive.net/items/demo/99/jQuery-Horizontal-Accordion در صفحم باید چکار کنم ؟
یسری فایل برا دانلود گذاشته که سر در نمیارم

sinoser
یک شنبه 18 مرداد 1394, 22:43 عصر
میشه بگید برا اجرا این http://www.htmldrive.net/items/demo/99/jQuery-Horizontal-Accordion در صفحم باید چکار کنم ؟
یسری فایل برا دانلود گذاشته که سر در نمیارم
این یک پلاگین جی کوئری هست پس اولین کار باید به دو چیز دقت کنید که عمومیه واس این بحث.
1- وجود کتابخانه jQuery و همخوانیش با نسخه مد نظر پلاگین (این پلاگین قدیمی هست و نسخه 1.4 جی کوئری رو می خواد)
2- ضمیمه فایل های اسکریپت این پلاگین

حالا باید
کد های html و css رو در سندتون بزارید
و حالا هم نوبت درج اسکریپت های اجرای پلاگین هست
به این موارد م توند از طریق inspect element مرورگرتون دسترسی داشته باشید چون مستند درست حسابی ای واسش ننوشته طرف.


پیشنهاد می کنم بگردین و یک پلاگین بهتر پیدا کنید این مشکلاتی دراه.

greenkit
یک شنبه 18 مرداد 1394, 23:06 عصر
این یک پلاگین جی کوئری هست پس اولین کار باید به دو چیز دقت کنید که عمومیه واس این بحث.
کد های html و css رو در سندتون بزارید
و حالا هم نوبت درج اسکریپت های اجرای پلاگین هست
به این موارد م توند از طریق inspect element مرورگرتون دسترسی داشته باشید چون مستند درست حسابی ای واسش ننوشته طرف.


پیشنهاد می کنم بگردین و یک پلاگین بهتر پیدا کنید این مشکلاتی دراه.

شبیه این سایت http://jqueryui.com/ بازم سراغ دارید؟
چون برا من کار با اون راحت تره، خیلی ساده ی کد رو در سند گذاشتم و اجرا شد

sinoser
دوشنبه 19 مرداد 1394, 07:20 صبح
شبیه این سایت http://jqueryui.com/ بازم سراغ دارید؟
چون برا من کار با اون راحت تره، خیلی ساده ی کد رو در سند گذاشتم و اجرا شد

واسه این اجرا شده چون http://jqueryui.com یک ضمیمه UI استاندارد برای jQuery هست و طراح قالب این فایل ها رو قبلا ضمیمه کرده.
متاسفانه به این مدل که بزاری کار کنه اوووم نه :)
ولی اونایی که هستم راحته.
فقط باید علاوه بر html و css فایل js اونو رو در صورت وجود بعد jQuery ضمیمه کنی و بعد هم داخل یک تگ script دستور راه اندازیشو در صورت وجود بزاری. تمام

greenkit
دوشنبه 19 مرداد 1394, 15:00 عصر
[QUOTE=sinoser;2250660]واسه این اجرا شده چون http://jqueryui.com یک ضمیمه UI استاندارد برای jQuery هست و طراح قالب این فایل ها رو قبلا ضمیمه کرده.
متاسفانه به این مدل که بزاری کار کنه اوووم نه :)
ولی اونایی که هستم راحته.
فقط باید علاوه بر html و css فایل js اونو رو در صورت وجود بعد jQuery ضمیمه کنی و بعد هم داخل یک تگ script دستور راه اندازیشو در صورت وجود بزاری. تمام[/QUOTE
ببخشید میشه این مدل http://www.htmldrive.net/items/demo/...ntal-Accordion (http://www.htmldrive.net/items/demo/99/jQuery-Horizontal-Accordion) رو کاری کنید که اجرا بشه؟

sinoser
دوشنبه 19 مرداد 1394, 16:22 عصر
[QUOTE=sinoser;2250660]واسه این اجرا شده چون http://jqueryui.com یک ضمیمه UI استاندارد برای jQuery هست و طراح قالب این فایل ها رو قبلا ضمیمه کرده.
متاسفانه به این مدل که بزاری کار کنه اوووم نه :)
ولی اونایی که هستم راحته.
فقط باید علاوه بر html و css فایل js اونو رو در صورت وجود بعد jQuery ضمیمه کنی و بعد هم داخل یک تگ script دستور راه اندازیشو در صورت وجود بزاری. تمام[/QUOTE
ببخشید میشه این مدل http://www.htmldrive.net/items/demo/...ntal-Accordion (http://www.htmldrive.net/items/demo/99/jQuery-Horizontal-Accordion) رو کاری کنید که اجرا بشه؟

من که نمی تونم کاری کنم شما باید بکنید :لبخند: سورس پیش شماست من فقط راهنمایی میدم.
اگر گذاشتی کد و اسکریپت هاشو ولی کار نمی کنه نسخه جی کوئریت بش نمی خوره. جی کوئری این قدمیه. یه راه اینه بعد از فایل هسته جی کوئریت , جی کوئری میگریت رو که تو ادرس زیر هست ضمیه کنی این مشکل نا همگونی جی کوئری های قدیمی رو حل می کنه چون توش همون متد های حذف شده جی کوئری قرار داره.
http://code.jquery.com/jquery-migrate-1.2.1.min.js

اگرم کلا نمی دونی چطوری این کارو میشه کرد م تونی بسپری به یکی که بلده واست بکنه و هزینه زیادی هم نداره.

greenkit
سه شنبه 20 مرداد 1394, 16:48 عصر
[QUOTE=greenkit;2250845]

من که نمی تونم کاری کنم شما باید بکنید :لبخند: سورس پیش شماست من فقط راهنمایی میدم.
اگر گذاشتی کد و اسکریپت هاشو ولی کار نمی کنه نسخه جی کوئریت بش نمی خوره. جی کوئری این قدمیه. یه راه اینه بعد از فایل هسته جی کوئریت , جی کوئری میگریت رو که تو ادرس زیر هست ضمیه کنی این مشکل نا همگونی جی کوئری های قدیمی رو حل می کنه چون توش همون متد های حذف شده جی کوئری قرار داره.
http://code.jquery.com/jquery-migrate-1.2.1.min.js

اگرم کلا نمی دونی چطوری این کارو میشه کرد م تونی بسپری به یکی که بلده واست بکنه و هزینه زیادی هم نداره.
نمیدونم شاید علتش اینه که وقتی فایل های js و css رو به سایت انتقال میدم و کدهای داخل index را صفحه مورد نظر کپی و ذخیره میکنم یسری از کد ها خود بخود پاک میشه ، مخصوصا کد های فراخوانی css و یسری چیزای دیگه

من این کد هارو از طریق مدیریت پنل وارد میکنم
در ابتدا وقتی وارد میکنم اینه

<textarea dir="rtl" style="height: 200px;width: 500px"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" type="text/css" href="css/jquery.hrzAccordion.defaults.css">
<link rel="stylesheet" type="text/css" href="css/jquery.hrzAccordion.examples.css">
<script type="text/javascript" src="lib/jquery-1.3.2.js"></script>
<script type="text/javascript" src="lib/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="lib/jquery.hrzAccordion.js"></script>
<script type="text/javascript" src="lib/jquery.hrzAccordion.examples.js"></script>
<title>jQuery - Horizontal Accordion 2.00</title>
</head>
<body>
<h2>jQuery - Horizontal Accordion 2.00</h2>


Currrently testing with IE, Firefox, Safari<br />More script and css style
: <a href="http://www.htmldrive.net/" title="HTML DRIVE - Free DHMTL Scripts,Jquery plugins,Javascript,CSS,CSS3,Html5 Library">www.htmldrive.net </a><br />
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="4579481">
<input type="image" src="https://www.paypal.com/en_US/DE/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>


<h2>Example 1</h2>
<ul>
<li>handle aligned to the left</li>
<li>animation is opening and closing content at the same time</li>
<li>event trigger is mouse over</li>
<li>cycling every 10 seconds from 1 to 4 and than from 4 to 1</li>
<li>new event will only be allowed, once the first animation completed</li>
</ul>
<button onclick="$('#testHandle0').trigger('mouseover')">Open Content 1</button> | <button onclick="$('#testHandle1').trigger('mouseover')">Open Content 2</button> |
<button onclick="$('#testHandle2').trigger('mouseover')">Open Content 3</button> | <button onclick="$('#testHandle3').trigger('mouseover')">Open Content 4</button><br /><br />
<ul class="test">
<li><div class="handle"><img src='images/title1.png'></div><img src='images/image_test.gif' align='left'>
<h3>Content 1</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vestibulum metus sed massa. Pellentesque pharetra felis a enim. Aliquam sapien nisl, iaculis ac, hendrerit placerat, iaculis congue, augue. Quisque eget mi quis purus vestibulum eleifend. Maecenas condimentum eros vel eros. Ut facilisis leo id mi. Suspendisse nisl magna, consequat quis, pretium eget, laoreet vel, orci.<br>
<br>
Mauris sed mauris. Praesent imperdiet, nunc ut sollicitudin hendrerit, nisi tellus mollis leo, blandit pharetra nulla orci id eros. Nullam ut nunc. Praesent lacus lacus, tempor a, dignissim eu, tristique ac, tortor. Sed faucibus. Integer eleifend lacus ac neque. Fusce tempus. In hac habitasse platea dictumst. Nulla arcu neque, gravida at, rhoncus id, pharetra vitae, tortor. Aenean vestibulum consequat augue.</p>
</li>
<li><div class="handle"><img src='images/title2.png'></div><img src='images/image_test.gif' align='left'>
<h3>Content 2</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vestibulum metus sed massa. Pellentesque pharetra felis a enim. Aliquam sapien nisl, iaculis ac, hendrerit placerat, iaculis congue, augue. Quisque eget mi quis purus vestibulum eleifend. Maecenas condimentum eros vel eros. Ut facilisis leo id mi. Suspendisse nisl magna, consequat quis, pretium eget, laoreet vel, orci.<br>
<br>
Mauris sed mauris. Praesent imperdiet, nunc ut sollicitudin hendrerit, nisi tellus mollis leo, blandit pharetra nulla orci id eros. Nullam ut nunc. Praesent lacus lacus, tempor a, dignissim eu, tristique ac, tortor. Sed faucibus. Integer eleifend lacus ac neque. Fusce tempus. In hac habitasse platea dictumst. Nulla arcu neque, gravida at, rhoncus id, pharetra vitae, tortor. Aenean vestibulum consequat augue.</p>
</li>
<li><div class="handle"><img src='images/title3.png'></div><img src='images/image_test.gif' align='left'>
<h3>Content 3</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vestibulum metus sed massa. Pellentesque pharetra felis a enim. Aliquam sapien nisl, iaculis ac, hendrerit placerat, iaculis congue, augue. Quisque eget mi quis purus vestibulum eleifend. Maecenas condimentum eros vel eros. Ut facilisis leo id mi. Suspendisse nisl magna, consequat quis, pretium eget, laoreet vel, orci.<br>
<br>
Mauris sed mauris. Praesent imperdiet, nunc ut sollicitudin hendrerit, nisi tellus mollis leo, blandit pharetra nulla orci id eros. Nullam ut nunc. Praesent lacus lacus, tempor a, dignissim eu, tristique ac, tortor. Sed faucibus. Integer eleifend lacus ac neque. Fusce tempus. In hac habitasse platea dictumst. Nulla arcu neque, gravida at, rhoncus id, pharetra vitae, tortor. Aenean vestibulum consequat augue.</p>
</li>
<li><div class="handle"><img src='images/title4.png'></div><img src='images/image_test.gif' align='left'>
<h3>Content 4</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vestibulum metus sed massa. Pellentesque pharetra felis a enim. Aliquam sapien nisl, iaculis ac, hendrerit placerat, iaculis congue, augue. Quisque eget mi quis purus vestibulum eleifend. Maecenas condimentum eros vel eros. Ut facilisis leo id mi. Suspendisse nisl magna, consequat quis, pretium eget, laoreet vel, orci.<br>
<br>
Mauris sed mauris. Praesent imperdiet, nunc ut sollicitudin hendrerit, nisi tellus mollis leo, blandit pharetra nulla orci id eros. Nullam ut nunc. Praesent lacus lacus, tempor a, dignissim eu, tristique ac, tortor. Sed faucibus. Integer eleifend lacus ac neque. Fusce tempus. In hac habitasse platea dictumst. Nulla arcu neque, gravida at, rhoncus id, pharetra vitae, tortor. Aenean vestibulum consequat augue.</p>
</li>

</ul>
<br />
<br />
<div style="clear:both;"></div><br />
<h2>Example 2</h2>
<ul>
<li>handles aligned to the left and right</li>
<li>animation is opening and closing content at the same time</li>
<li>event trigger is mouse over</li>
</ul>
<button onclick="$('#test4Handle0').trigger('mouseover')">Open Content 1</button> | <button onclick="$('#test4Handle1').trigger('mouseover')">Open Content 2</button> |
<button onclick="$('#test4Handle2').trigger('mouseover')">Open Content 3</button> | <button onclick="$('#test4Handle3').trigger('mouseover')">Open Content 4</button><br /><br />
<ul class="test4">
<li><div class="handle">1</div><img src='images/image_test.gif' align='left'>
<h3>Content 1</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vestibulum metus sed massa. Pellentesque pharetra felis a enim. Aliquam sapien nisl, iaculis ac, hendrerit placerat, iaculis congue, augue. Quisque eget mi quis purus vestibulum eleifend. Maecenas condimentum eros vel eros. Ut facilisis leo id mi. Suspendisse nisl magna, consequat quis, pretium eget, laoreet vel, orci.<br>
<br>
Mauris sed mauris. Praesent imperdiet, nunc ut sollicitudin hendrerit, nisi tellus mollis leo, blandit pharetra nulla orci id eros. Nullam ut nunc. Praesent lacus lacus, tempor a, dignissim eu, tristique ac, tortor. Sed faucibus. Integer eleifend lacus ac neque. Fusce tempus. In hac habitasse platea dictumst. Nulla arcu neque, gravida at, rhoncus id, pharetra vitae, tortor. Aenean vestibulum consequat augue.</p>
</li>
<li><div class="handle">2</div><img src='images/image_test.gif' align='left'>
<h3>Content 2</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vestibulum metus sed massa. Pellentesque pharetra felis a enim. Aliquam sapien nisl, iaculis ac, hendrerit placerat, iaculis congue, augue. Quisque eget mi quis purus vestibulum eleifend. Maecenas condimentum eros vel eros. Ut facilisis leo id mi. Suspendisse nisl magna, consequat quis, pretium eget, laoreet vel, orci.<br>
<br>
Mauris sed mauris. Praesent imperdiet, nunc ut sollicitudin hendrerit, nisi tellus mollis leo, blandit pharetra nulla orci id eros. Nullam ut nunc. Praesent lacus lacus, tempor a, dignissim eu, tristique ac, tortor. Sed faucibus. Integer eleifend lacus ac neque. Fusce tempus. In hac habitasse platea dictumst. Nulla arcu neque, gravida at, rhoncus id, pharetra vitae, tortor. Aenean vestibulum consequat augue.</p>
</li>
<li><div class="handle">3</div><img src='images/image_test.gif' align='left'>
<h3>Content 3</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vestibulum metus sed massa. Pellentesque pharetra felis a enim. Aliquam sapien nisl, iaculis ac, hendrerit placerat, iaculis congue, augue. Quisque eget mi quis purus vestibulum eleifend. Maecenas condimentum eros vel eros. Ut facilisis leo id mi. Suspendisse nisl magna, consequat quis, pretium eget, laoreet vel, orci.<br>
<br>
Mauris sed mauris. Praesent imperdiet, nunc ut sollicitudin hendrerit, nisi tellus mollis leo, blandit pharetra nulla orci id eros. Nullam ut nunc. Praesent lacus lacus, tempor a, dignissim eu, tristique ac, tortor. Sed faucibus. Integer eleifend lacus ac neque. Fusce tempus. In hac habitasse platea dictumst. Nulla arcu neque, gravida at, rhoncus id, pharetra vitae, tortor. Aenean vestibulum consequat augue.</p>
</li>
<li><div class="handle">4</div><img src='images/image_test.gif' align='left'>
<h3>Content 4</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vestibulum metus sed massa. Pellentesque pharetra felis a enim. Aliquam sapien nisl, iaculis ac, hendrerit placerat, iaculis congue, augue. Quisque eget mi quis purus vestibulum eleifend. Maecenas condimentum eros vel eros. Ut facilisis leo id mi. Suspendisse nisl magna, consequat quis, pretium eget, laoreet vel, orci.<br>
<br>
Mauris sed mauris. Praesent imperdiet, nunc ut sollicitudin hendrerit, nisi tellus mollis leo, blandit pharetra nulla orci id eros. Nullam ut nunc. Praesent lacus lacus, tempor a, dignissim eu, tristique ac, tortor. Sed faucibus. Integer eleifend lacus ac neque. Fusce tempus. In hac habitasse platea dictumst. Nulla arcu neque, gravida at, rhoncus id, pharetra vitae, tortor. Aenean vestibulum consequat augue.</p>
</li>

</ul>
<br />
<br />
<div style="clear:both;"></div><br />
<h2>Example 3</h2>
<ul>
<li>handle aligned to the right</li>
<li>animation is closing content first before opening again</li>
<li>event trigger is mouse click</li>
</ul>


<button onclick="$('#test2Handle0').click()">Open Content 1</button> | <button onclick="$('#test2Handle1').click()">Open Content 2</button> |
<button onclick="$('#test2Handle2').click()">Open Content 3</button> | <button onclick="$('#test2Handle3').click()">Open Content 4</button> | <button onclick="$('#test2Handle4').click()">Open Content 5</button><br /><br />
<ul class="test2">
<li><img src='images/image_test.gif' align='left'>
<h3>Content 1</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vestibulum metus sed massa. Pellentesque pharetra felis a enim. Aliquam sapien nisl, iaculis ac, hendrerit placerat, iaculis congue, augue. Quisque eget mi quis purus vestibulum eleifend. Maecenas condimentum eros vel eros. Ut facilisis leo id mi. Suspendisse nisl magna, consequat quis, pretium eget, laoreet vel, orci.<br>
<br>
Mauris sed mauris. Praesent imperdiet, nunc ut sollicitudin hendrerit, nisi tellus mollis leo, blandit pharetra nulla orci id eros. Nullam ut nunc. Praesent lacus lacus, tempor a, dignissim eu, tristique ac, tortor. Sed faucibus. Integer eleifend lacus ac neque. Fusce tempus. In hac habitasse platea dictumst. Nulla arcu neque, gravida at, rhoncus id, pharetra vitae, tortor. Aenean vestibulum consequat augue.</p>
</li>
<li><img src='images/image_test.gif' align='left'>
<h3>Content 2</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vestibulum metus sed massa. Pellentesque pharetra felis a enim. Aliquam sapien nisl, iaculis ac, hendrerit placerat, iaculis congue, augue. Quisque eget mi quis purus vestibulum eleifend. Maecenas condimentum eros vel eros. Ut facilisis leo id mi. Suspendisse nisl magna, consequat quis, pretium eget, laoreet vel, orci.<br>
<br>
Mauris sed mauris. Praesent imperdiet, nunc ut sollicitudin hendrerit, nisi tellus mollis leo, blandit pharetra nulla orci id eros. Nullam ut nunc. Praesent lacus lacus, tempor a, dignissim eu, tristique ac, tortor. Sed faucibus. Integer eleifend lacus ac neque. Fusce tempus. In hac habitasse platea dictumst. Nulla arcu neque, gravida at, rhoncus id, pharetra vitae, tortor. Aenean vestibulum consequat augue.</p>
</li>
<li><img src='images/image_test.gif' align='left'>
<h3>Content 3</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vestibulum metus sed massa. Pellentesque pharetra felis a enim. Aliquam sapien nisl, iaculis ac, hendrerit placerat, iaculis congue, augue. Quisque eget mi quis purus vestibulum eleifend. Maecenas condimentum eros vel eros. Ut facilisis leo id mi. Suspendisse nisl magna, consequat quis, pretium eget, laoreet vel, orci.<br>
<br>
Mauris sed mauris. Praesent imperdiet, nunc ut sollicitudin hendrerit, nisi tellus mollis leo, blandit pharetra nulla orci id eros. Nullam ut nunc. Praesent lacus lacus, tempor a, dignissim eu, tristique ac, tortor. Sed faucibus. Integer eleifend lacus ac neque. Fusce tempus. In hac habitasse platea dictumst. Nulla arcu neque, gravida at, rhoncus id, pharetra vitae, tortor. Aenean vestibulum consequat augue.</p>
</li>
<li><img src='images/image_test.gif' align='left'>
<h3>Content 4</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vestibulum metus sed massa. Pellentesque pharetra felis a enim. Aliquam sapien nisl, iaculis ac, hendrerit placerat, iaculis congue, augue. Quisque eget mi quis purus vestibulum eleifend. Maecenas condimentum eros vel eros. Ut facilisis leo id mi. Suspendisse nisl magna, consequat quis, pretium eget, laoreet vel, orci.<br>
<br>
Mauris sed mauris. Praesent imperdiet, nunc ut sollicitudin hendrerit, nisi tellus mollis leo, blandit pharetra nulla orci id eros. Nullam ut nunc. Praesent lacus lacus, tempor a, dignissim eu, tristique ac, tortor. Sed faucibus. Integer eleifend lacus ac neque. Fusce tempus. In hac habitasse platea dictumst. Nulla arcu neque, gravida at, rhoncus id, pharetra vitae, tortor. Aenean vestibulum consequat augue.</p>
</li>
<li><img src='images/image_test.gif' align='left'>
<h3>Content 5</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vestibulum metus sed massa. Pellentesque pharetra felis a enim. Aliquam sapien nisl, iaculis ac, hendrerit placerat, iaculis congue, augue. Quisque eget mi quis purus vestibulum eleifend. Maecenas condimentum eros vel eros. Ut facilisis leo id mi. Suspendisse nisl magna, consequat quis, pretium eget, laoreet vel, orci.<br>
<br>
Mauris sed mauris. Praesent imperdiet, nunc ut sollicitudin hendrerit, nisi tellus mollis leo, blandit pharetra nulla orci id eros. Nullam ut nunc. Praesent lacus lacus, tempor a, dignissim eu, tristique ac, tortor. Sed faucibus. Integer eleifend lacus ac neque. Fusce tempus. In hac habitasse platea dictumst. Nulla arcu neque, gravida at, rhoncus id, pharetra vitae, tortor. Aenean vestibulum consequat augue.</p>
</li>
</ul><div style="clear:both;"></div><br />




<h2>Example 4</h2>
<ul>
<li>custom content images</li>
<li>handle aligned to the right</li>
<li>event trigger is mouse click</li>
</ul>


<button onclick="$('#test3Handle0').click()">Open Content 1</button> | <button onclick="$('#test3Handle1').click()">Open Content 2</button> |
<button onclick="$('#test3Handle2').click()">Open Content 3</button> | <button onclick="$('#test3Handle3').click()">Open Content 4</button> | <button onclick="$('#test3Handle4').click()">Open Content 5</button><br /><br />
<ul class="test3">
<li><div class="handle3"><img src='images/com_01.gif'></div>
<h3>Content 1</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vestibulum metus sed massa. Pellentesque pharetra felis a enim. Aliquam sapien nisl, iaculis ac, hendrerit placerat, iaculis congue, augue. Quisque eget mi quis purus vestibulum eleifend. Maecenas condimentum eros vel eros. Ut facilisis leo id mi. Suspendisse nisl magna, consequat quis, pretium eget, laoreet vel, orci.<br>
<br>
Mauris sed mauris. Praesent imperdiet, nunc ut sollicitudin hendrerit, nisi tellus mollis leo, blandit pharetra nulla orci id eros. Nullam ut nunc. Praesent lacus lacus, tempor a, dignissim eu, tristique ac, tortor. Sed faucibus. Integer eleifend lacus ac neque. Fusce tempus. In hac habitasse platea dictumst. Nulla arcu neque, gravida at, rhoncus id, pharetra vitae, tortor. Aenean vestibulum consequat augue.</p>
</li>
<li><div class="handle3"><img src='images/com_02.gif'></div>
<h3>Content 2</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vestibulum metus sed massa. Pellentesque pharetra felis a enim. Aliquam sapien nisl, iaculis ac, hendrerit placerat, iaculis congue, augue. Quisque eget mi quis purus vestibulum eleifend. Maecenas condimentum eros vel eros. Ut facilisis leo id mi. Suspendisse nisl magna, consequat quis, pretium eget, laoreet vel, orci.<br>
<br>
Mauris sed mauris. Praesent imperdiet, nunc ut sollicitudin hendrerit, nisi tellus mollis leo, blandit pharetra nulla orci id eros. Nullam ut nunc. Praesent lacus lacus, tempor a, dignissim eu, tristique ac, tortor. Sed faucibus. Integer eleifend lacus ac neque. Fusce tempus. In hac habitasse platea dictumst. Nulla arcu neque, gravida at, rhoncus id, pharetra vitae, tortor. Aenean vestibulum consequat augue.</p>
</li>
<li><div class="handle3"><img src='images/com_03.gif'></div>
<h3>Content 3</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vestibulum metus sed massa. Pellentesque pharetra felis a enim. Aliquam sapien nisl, iaculis ac, hendrerit placerat, iaculis congue, augue. Quisque eget mi quis purus vestibulum eleifend. Maecenas condimentum eros vel eros. Ut facilisis leo id mi. Suspendisse nisl magna, consequat quis, pretium eget, laoreet vel, orci.<br>
<br>
Mauris sed mauris. Praesent imperdiet, nunc ut sollicitudin hendrerit, nisi tellus mollis leo, blandit pharetra nulla orci id eros. Nullam ut nunc. Praesent lacus lacus, tempor a, dignissim eu, tristique ac, tortor. Sed faucibus. Integer eleifend lacus ac neque. Fusce tempus. In hac habitasse platea dictumst. Nulla arcu neque, gravida at, rhoncus id, pharetra vitae, tortor. Aenean vestibulum consequat augue.</p>
</li>
<li><div class="handle3"><img src='images/com_04.gif'></div>
<h3>Content 4</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vestibulum metus sed massa. Pellentesque pharetra felis a enim. Aliquam sapien nisl, iaculis ac, hendrerit placerat, iaculis congue, augue. Quisque eget mi quis purus vestibulum eleifend. Maecenas condimentum eros vel eros. Ut facilisis leo id mi. Suspendisse nisl magna, consequat quis, pretium eget, laoreet vel, orci.<br>
<br>
Mauris sed mauris. Praesent imperdiet, nunc ut sollicitudin hendrerit, nisi tellus mollis leo, blandit pharetra nulla orci id eros. Nullam ut nunc. Praesent lacus lacus, tempor a, dignissim eu, tristique ac, tortor. Sed faucibus. Integer eleifend lacus ac neque. Fusce tempus. In hac habitasse platea dictumst. Nulla arcu neque, gravida at, rhoncus id, pharetra vitae, tortor. Aenean vestibulum consequat augue.</p>
</li>
<li><div class="handle3"><img src='images/com_05.gif'></div>
<h3>Content 5</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vestibulum metus sed massa. Pellentesque pharetra felis a enim. Aliquam sapien nisl, iaculis ac, hendrerit placerat, iaculis congue, augue. Quisque eget mi quis purus vestibulum eleifend. Maecenas condimentum eros vel eros. Ut facilisis leo id mi. Suspendisse nisl magna, consequat quis, pretium eget, laoreet vel, orci.<br>
<br>
Mauris sed mauris. Praesent imperdiet, nunc ut sollicitudin hendrerit, nisi tellus mollis leo, blandit pharetra nulla orci id eros. Nullam ut nunc. Praesent lacus lacus, tempor a, dignissim eu, tristique ac, tortor. Sed faucibus. Integer eleifend lacus ac neque. Fusce tempus. In hac habitasse platea dictumst. Nulla arcu neque, gravida at, rhoncus id, pharetra vitae, tortor. Aenean vestibulum consequat augue.</p>
</li>
</ul><div style="clear:both;"></div><br /><br /><br /><br />
</body>

</html></textarea>

greenkit
سه شنبه 20 مرداد 1394, 16:49 عصر
ولی پس از ذخیره این میشه

<textarea dir="rtl" style="height: 300px;width: 500px"><p></p><p> </p>
<p>
<script src="lib/jquery-1.3.2.js"></script>
<script src="lib/jquery.easing.1.3.js"></script>
<script src="lib/jquery.hrzAccordion.js"></script>
<script src="lib/jquery.hrzAccordion.examples.js"></script>
jQuery - Horizontal Accordion 2.00</p>
<h2>jQuery - Horizontal Accordion 2.00</h2>
<p>Currrently testing with IE, Firefox, Safari<br />More script and css style : <a title="HTML DRIVE - Free DHMTL Scripts,Jquery plugins,Javascript,CSS,CSS3,Html5 Library" href="http://www.htmldrive.net/">www.htmldrive.net </a></p>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post"><input name="cmd" type="hidden" value="_s-xclick" /> <input name="hosted_button_id" type="hidden" value="4579481" /> <input alt="PayPal - The safer, easier way to pay online!" name="submit" src="https://www.paypal.com/en_US/DE/i/btn/btn_donateCC_LG.gif" type="image" /> <img src="https://www.paypal.com/en_US/i/scr/pixel.gif" alt="" width="1" height="1" border="0" /></form>
<h2>Example 1</h2>
<ul>
<li>handle aligned to the left</li>
<li>animation is opening and closing content at the same time</li>
<li>event trigger is mouse over</li>
<li>cycling every 10 seconds from 1 to 4 and than from 4 to 1</li>
<li>new event will only be allowed, once the first animation completed</li>
</ul>
<p><button>Open Content 1</button> | <button>Open Content 2</button> | <button>Open Content 3</button> | <button>Open Content 4</button><br /><br /></p>
<ul class="test">
<li>
<div class="handle"><img src="images/title1.png" alt="" /></div>
<img src="images/image_test.gif" alt="" align="left" />
<h3>Content 1</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vestibulum metus sed massa. Pellentesque pharetra felis a enim. Aliquam sapien nisl, iaculis ac, hendrerit placerat, iaculis congue, augue. Quisque eget mi quis purus vestibulum eleifend. Maecenas condimentum eros vel eros. Ut facilisis leo id mi. Suspendisse nisl magna, consequat quis, pretium eget, laoreet vel, orci.<br /> <br /> Mauris sed mauris. Praesent imperdiet, nunc ut sollicitudin hendrerit, nisi tellus mollis leo, blandit pharetra nulla orci id eros. Nullam ut nunc. Praesent lacus lacus, tempor a, dignissim eu, tristique ac, tortor. Sed faucibus. Integer eleifend lacus ac neque. Fusce tempus. In hac habitasse platea dictumst. Nulla arcu neque, gravida at, rhoncus id, pharetra vitae, tortor. Aenean vestibulum consequat augue.</p>
</li>
<li>
<div class="handle"><img src="images/title2.png" alt="" /></div>
<img src="images/image_test.gif" alt="" align="left" />
<h3>Content 2</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vestibulum metus sed massa. Pellentesque pharetra felis a enim. Aliquam sapien nisl, iaculis ac, hendrerit placerat, iaculis congue, augue. Quisque eget mi quis purus vestibulum eleifend. Maecenas condimentum eros vel eros. Ut facilisis leo id mi. Suspendisse nisl magna, consequat quis, pretium eget, laoreet vel, orci.<br /> <br /> Mauris sed mauris. Praesent imperdiet, nunc ut sollicitudin hendrerit, nisi tellus mollis leo, blandit pharetra nulla orci id eros. Nullam ut nunc. Praesent lacus lacus, tempor a, dignissim eu, tristique ac, tortor. Sed faucibus. Integer eleifend lacus ac neque. Fusce tempus. In hac habitasse platea dictumst. Nulla arcu neque, gravida at, rhoncus id, pharetra vitae, tortor. Aenean vestibulum consequat augue.</p>
</li>
<li>
<div class="handle"><img src="images/title3.png" alt="" /></div>
<img src="images/image_test.gif" alt="" align="left" />
<h3>Content 3</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vestibulum metus sed massa. Pellentesque pharetra felis a enim. Aliquam sapien nisl, iaculis ac, hendrerit placerat, iaculis congue, augue. Quisque eget mi quis purus vestibulum eleifend. Maecenas condimentum eros vel eros. Ut facilisis leo id mi. Suspendisse nisl magna, consequat quis, pretium eget, laoreet vel, orci.<br /> <br /> Mauris sed mauris. Praesent imperdiet, nunc ut sollicitudin hendrerit, nisi tellus mollis leo, blandit pharetra nulla orci id eros. Nullam ut nunc. Praesent lacus lacus, tempor a, dignissim eu, tristique ac, tortor. Sed faucibus. Integer eleifend lacus ac neque. Fusce tempus. In hac habitasse platea dictumst. Nulla arcu neque, gravida at, rhoncus id, pharetra vitae, tortor. Aenean vestibulum consequat augue.</p>
</li>
<li>
<div class="handle"><img src="images/title4.png" alt="" /></div>
<img src="images/image_test.gif" alt="" align="left" />
<h3>Content 4</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vestibulum metus sed massa. Pellentesque pharetra felis a enim. Aliquam sapien nisl, iaculis ac, hendrerit placerat, iaculis congue, augue. Quisque eget mi quis purus vestibulum eleifend. Maecenas condimentum eros vel eros. Ut facilisis leo id mi. Suspendisse nisl magna, consequat quis, pretium eget, laoreet vel, orci.<br /> <br /> Mauris sed mauris. Praesent imperdiet, nunc ut sollicitudin hendrerit, nisi tellus mollis leo, blandit pharetra nulla orci id eros. Nullam ut nunc. Praesent lacus lacus, tempor a, dignissim eu, tristique ac, tortor. Sed faucibus. Integer eleifend lacus ac neque. Fusce tempus. In hac habitasse platea dictumst. Nulla arcu neque, gravida at, rhoncus id, pharetra vitae, tortor. Aenean vestibulum consequat augue.</p>
</li>
</ul>
<p><br /> </p>
<div style="clear: both;">&nbsp;</div>
<p>&nbsp;</p>
<h2>Example 2</h2>
<ul>
<li>handles aligned to the left and right</li>
<li>animation is opening and closing content at the same time</li>
<li>event trigger is mouse over</li>
</ul>
<p><button>Open Content 1</button> | <button>Open Content 2</button> | <button>Open Content 3</button> | <button>Open Content 4</button><br /><br /></p>
<ul class="test4">
<li>
<div class="handle">1</div>
<img src="images/image_test.gif" alt="" align="left" />
<h3>Content 1</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vestibulum metus sed massa. Pellentesque pharetra felis a enim. Aliquam sapien nisl, iaculis ac, hendrerit placerat, iaculis congue, augue. Quisque eget mi quis purus vestibulum eleifend. Maecenas condimentum eros vel eros. Ut facilisis leo id mi. Suspendisse nisl magna, consequat quis, pretium eget, laoreet vel, orci.<br /> <br /> Mauris sed mauris. Praesent imperdiet, nunc ut sollicitudin hendrerit, nisi tellus mollis leo, blandit pharetra nulla orci id eros. Nullam ut nunc. Praesent lacus lacus, tempor a, dignissim eu, tristique ac, tortor. Sed faucibus. Integer eleifend lacus ac neque. Fusce tempus. In hac habitasse platea dictumst. Nulla arcu neque, gravida at, rhoncus id, pharetra vitae, tortor. Aenean vestibulum consequat augue.</p>
</li>
<li>
<div class="handle">2</div>
<img src="images/image_test.gif" alt="" align="left" />
<h3>Content 2</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vestibulum metus sed massa. Pellentesque pharetra felis a enim. Aliquam sapien nisl, iaculis ac, hendrerit placerat, iaculis congue, augue. Quisque eget mi quis purus vestibulum eleifend. Maecenas condimentum eros vel eros. Ut facilisis leo id mi. Suspendisse nisl magna, consequat quis, pretium eget, laoreet vel, orci.<br /> <br /> Mauris sed mauris. Praesent imperdiet, nunc ut sollicitudin hendrerit, nisi tellus mollis leo, blandit pharetra nulla orci id eros. Nullam ut nunc. Praesent lacus lacus, tempor a, dignissim eu, tristique ac, tortor. Sed faucibus. Integer eleifend lacus ac neque. Fusce tempus. In hac habitasse platea dictumst. Nulla arcu neque, gravida at, rhoncus id, pharetra vitae, tortor. Aenean vestibulum consequat augue.</p>
</li>
<li>
<div class="handle">3</div>
<img src="images/image_test.gif" alt="" align="left" />
<h3>Content 3</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vestibulum metus sed massa. Pellentesque pharetra felis a enim. Aliquam sapien nisl, iaculis ac, hendrerit placerat, iaculis congue, augue. Quisque eget mi quis purus vestibulum eleifend. Maecenas condimentum eros vel eros. Ut facilisis leo id mi. Suspendisse nisl magna, consequat quis, pretium eget, laoreet vel, orci.<br /> <br /> Mauris sed mauris. Praesent imperdiet, nunc ut sollicitudin hendrerit, nisi tellus mollis leo, blandit pharetra nulla orci id eros. Nullam ut nunc. Praesent lacus lacus, tempor a, dignissim eu, tristique ac, tortor. Sed faucibus. Integer eleifend lacus ac neque. Fusce tempus. In hac habitasse platea dictumst. Nulla arcu neque, gravida at, rhoncus id, pharetra vitae, tortor. Aenean vestibulum consequat augue.</p>
</li>
<li>
<div class="handle">4</div>
<img src="images/image_test.gif" alt="" align="left" />
<h3>Content 4</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vestibulum metus sed massa. Pellentesque pharetra felis a enim. Aliquam sapien nisl, iaculis ac, hendrerit placerat, iaculis congue, augue. Quisque eget mi quis purus vestibulum eleifend. Maecenas condimentum eros vel eros. Ut facilisis leo id mi. Suspendisse nisl magna, consequat quis, pretium eget, laoreet vel, orci.<br /> <br /> Mauris sed mauris. Praesent imperdiet, nunc ut sollicitudin hendrerit, nisi tellus mollis leo, blandit pharetra nulla orci id eros. Nullam ut nunc. Praesent lacus lacus, tempor a, dignissim eu, tristique ac, tortor. Sed faucibus. Integer eleifend lacus ac neque. Fusce tempus. In hac habitasse platea dictumst. Nulla arcu neque, gravida at, rhoncus id, pharetra vitae, tortor. Aenean vestibulum consequat augue.</p>
</li>
</ul>
<p><br /> </p>
<div style="clear: both;">&nbsp;</div>
<p>&nbsp;</p>
<h2>Example 3</h2>
<ul>
<li>handle aligned to the right</li>
<li>animation is closing content first before opening again</li>
<li>event trigger is mouse click</li>
</ul>
<p><button>Open Content 1</button> | <button>Open Content 2</button> | <button>Open Content 3</button> | <button>Open Content 4</button> | <button>Open Content 5</button><br /><br /></p>
<ul class="test2">
<li><img src="images/image_test.gif" alt="" align="left" />
<h3>Content 1</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vestibulum metus sed massa. Pellentesque pharetra felis a enim. Aliquam sapien nisl, iaculis ac, hendrerit placerat, iaculis congue, augue. Quisque eget mi quis purus vestibulum eleifend. Maecenas condimentum eros vel eros. Ut facilisis leo id mi. Suspendisse nisl magna, consequat quis, pretium eget, laoreet vel, orci.<br /> <br /> Mauris sed mauris. Praesent imperdiet, nunc ut sollicitudin hendrerit, nisi tellus mollis leo, blandit pharetra nulla orci id eros. Nullam ut nunc. Praesent lacus lacus, tempor a, dignissim eu, tristique ac, tortor. Sed faucibus. Integer eleifend lacus ac neque. Fusce tempus. In hac habitasse platea dictumst. Nulla arcu neque, gravida at, rhoncus id, pharetra vitae, tortor. Aenean vestibulum consequat augue.</p>
</li>
<li><img src="images/image_test.gif" alt="" align="left" />
<h3>Content 2</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vestibulum metus sed massa. Pellentesque pharetra felis a enim. Aliquam sapien nisl, iaculis ac, hendrerit placerat, iaculis congue, augue. Quisque eget mi quis purus vestibulum eleifend. Maecenas condimentum eros vel eros. Ut facilisis leo id mi. Suspendisse nisl magna, consequat quis, pretium eget, laoreet vel, orci.<br /> <br /> Mauris sed mauris. Praesent imperdiet, nunc ut sollicitudin hendrerit, nisi tellus mollis leo, blandit pharetra nulla orci id eros. Nullam ut nunc. Praesent lacus lacus, tempor a, dignissim eu, tristique ac, tortor. Sed faucibus. Integer eleifend lacus ac neque. Fusce tempus. In hac habitasse platea dictumst. Nulla arcu neque, gravida at, rhoncus id, pharetra vitae, tortor. Aenean vestibulum consequat augue.</p>
</li>
<li><img src="images/image_test.gif" alt="" align="left" />
<h3>Content 3</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vestibulum metus sed massa. Pellentesque pharetra felis a enim. Aliquam sapien nisl, iaculis ac, hendrerit placerat, iaculis congue, augue. Quisque eget mi quis purus vestibulum eleifend. Maecenas condimentum eros vel eros. Ut facilisis leo id mi. Suspendisse nisl magna, consequat quis, pretium eget, laoreet vel, orci.<br /> <br /> Mauris sed mauris. Praesent imperdiet, nunc ut sollicitudin hendrerit, nisi tellus mollis leo, blandit pharetra nulla orci id eros. Nullam ut nunc. Praesent lacus lacus, tempor a, dignissim eu, tristique ac, tortor. Sed faucibus. Integer eleifend lacus ac neque. Fusce tempus. In hac habitasse platea dictumst. Nulla arcu neque, gravida at, rhoncus id, pharetra vitae, tortor. Aenean vestibulum consequat augue.</p>
</li>
<li><img src="images/image_test.gif" alt="" align="left" />
<h3>Content 4</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vestibulum metus sed massa. Pellentesque pharetra felis a enim. Aliquam sapien nisl, iaculis ac, hendrerit placerat, iaculis congue, augue. Quisque eget mi quis purus vestibulum eleifend. Maecenas condimentum eros vel eros. Ut facilisis leo id mi. Suspendisse nisl magna, consequat quis, pretium eget, laoreet vel, orci.<br /> <br /> Mauris sed mauris. Praesent imperdiet, nunc ut sollicitudin hendrerit, nisi tellus mollis leo, blandit pharetra nulla orci id eros. Nullam ut nunc. Praesent lacus lacus, tempor a, dignissim eu, tristique ac, tortor. Sed faucibus. Integer eleifend lacus ac neque. Fusce tempus. In hac habitasse platea dictumst. Nulla arcu neque, gravida at, rhoncus id, pharetra vitae, tortor. Aenean vestibulum consequat augue.</p>
</li>
<li><img src="images/image_test.gif" alt="" align="left" />
<h3>Content 5</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vestibulum metus sed massa. Pellentesque pharetra felis a enim. Aliquam sapien nisl, iaculis ac, hendrerit placerat, iaculis congue, augue. Quisque eget mi quis purus vestibulum eleifend. Maecenas condimentum eros vel eros. Ut facilisis leo id mi. Suspendisse nisl magna, consequat quis, pretium eget, laoreet vel, orci.<br /> <br /> Mauris sed mauris. Praesent imperdiet, nunc ut sollicitudin hendrerit, nisi tellus mollis leo, blandit pharetra nulla orci id eros. Nullam ut nunc. Praesent lacus lacus, tempor a, dignissim eu, tristique ac, tortor. Sed faucibus. Integer eleifend lacus ac neque. Fusce tempus. In hac habitasse platea dictumst. Nulla arcu neque, gravida at, rhoncus id, pharetra vitae, tortor. Aenean vestibulum consequat augue.</p>
</li>
</ul>
<div style="clear: both;">&nbsp;</div>
<p>&nbsp;</p>
<h2>Example 4</h2>
<ul>
<li>custom content images</li>
<li>handle aligned to the right</li>
<li>event trigger is mouse click</li>
</ul>
<p><button>Open Content 1</button> | <button>Open Content 2</button> | <button>Open Content 3</button> | <button>Open Content 4</button> | <button>Open Content 5</button><br /><br /></p>
<ul class="test3">
<li>
<div class="handle3"><img src="images/com_01.gif" alt="" /></div>
<h3>Content 1</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vestibulum metus sed massa. Pellentesque pharetra felis a enim. Aliquam sapien nisl, iaculis ac, hendrerit placerat, iaculis congue, augue. Quisque eget mi quis purus vestibulum eleifend. Maecenas condimentum eros vel eros. Ut facilisis leo id mi. Suspendisse nisl magna, consequat quis, pretium eget, laoreet vel, orci.<br /> <br /> Mauris sed mauris. Praesent imperdiet, nunc ut sollicitudin hendrerit, nisi tellus mollis leo, blandit pharetra nulla orci id eros. Nullam ut nunc. Praesent lacus lacus, tempor a, dignissim eu, tristique ac, tortor. Sed faucibus. Integer eleifend lacus ac neque. Fusce tempus. In hac habitasse platea dictumst. Nulla arcu neque, gravida at, rhoncus id, pharetra vitae, tortor. Aenean vestibulum consequat augue.</p>
</li>
<li>
<div class="handle3"><img src="images/com_02.gif" alt="" /></div>
<h3>Content 2</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vestibulum metus sed massa. Pellentesque pharetra felis a enim. Aliquam sapien nisl, iaculis ac, hendrerit placerat, iaculis congue, augue. Quisque eget mi quis purus vestibulum eleifend. Maecenas condimentum eros vel eros. Ut facilisis leo id mi. Suspendisse nisl magna, consequat quis, pretium eget, laoreet vel, orci.<br /> <br /> Mauris sed mauris. Praesent imperdiet, nunc ut sollicitudin hendrerit, nisi tellus mollis leo, blandit pharetra nulla orci id eros. Nullam ut nunc. Praesent lacus lacus, tempor a, dignissim eu, tristique ac, tortor. Sed faucibus. Integer eleifend lacus ac neque. Fusce tempus. In hac habitasse platea dictumst. Nulla arcu neque, gravida at, rhoncus id, pharetra vitae, tortor. Aenean vestibulum consequat augue.</p>
</li>
<li>
<div class="handle3"><img src="images/com_03.gif" alt="" /></div>
<h3>Content 3</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vestibulum metus sed massa. Pellentesque pharetra felis a enim. Aliquam sapien nisl, iaculis ac, hendrerit placerat, iaculis congue, augue. Quisque eget mi quis purus vestibulum eleifend. Maecenas condimentum eros vel eros. Ut facilisis leo id mi. Suspendisse nisl magna, consequat quis, pretium eget, laoreet vel, orci.<br /> <br /> Mauris sed mauris. Praesent imperdiet, nunc ut sollicitudin hendrerit, nisi tellus mollis leo, blandit pharetra nulla orci id eros. Nullam ut nunc. Praesent lacus lacus, tempor a, dignissim eu, tristique ac, tortor. Sed faucibus. Integer eleifend lacus ac neque. Fusce tempus. In hac habitasse platea dictumst. Nulla arcu neque, gravida at, rhoncus id, pharetra vitae, tortor. Aenean vestibulum consequat augue.</p>
</li>
<li>
<div class="handle3"><img src="images/com_04.gif" alt="" /></div>
<h3>Content 4</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vestibulum metus sed massa. Pellentesque pharetra felis a enim. Aliquam sapien nisl, iaculis ac, hendrerit placerat, iaculis congue, augue. Quisque eget mi quis purus vestibulum eleifend. Maecenas condimentum eros vel eros. Ut facilisis leo id mi. Suspendisse nisl magna, consequat quis, pretium eget, laoreet vel, orci.<br /> <br /> Mauris sed mauris. Praesent imperdiet, nunc ut sollicitudin hendrerit, nisi tellus mollis leo, blandit pharetra nulla orci id eros. Nullam ut nunc. Praesent lacus lacus, tempor a, dignissim eu, tristique ac, tortor. Sed faucibus. Integer eleifend lacus ac neque. Fusce tempus. In hac habitasse platea dictumst. Nulla arcu neque, gravida at, rhoncus id, pharetra vitae, tortor. Aenean vestibulum consequat augue.</p>
</li>
<li>
<div class="handle3"><img src="images/com_05.gif" alt="" /></div>
<h3>Content 5</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vestibulum metus sed massa. Pellentesque pharetra felis a enim. Aliquam sapien nisl, iaculis ac, hendrerit placerat, iaculis congue, augue. Quisque eget mi quis purus vestibulum eleifend. Maecenas condimentum eros vel eros. Ut facilisis leo id mi. Suspendisse nisl magna, consequat quis, pretium eget, laoreet vel, orci.<br /> <br /> Mauris sed mauris. Praesent imperdiet, nunc ut sollicitudin hendrerit, nisi tellus mollis leo, blandit pharetra nulla orci id eros. Nullam ut nunc. Praesent lacus lacus, tempor a, dignissim eu, tristique ac, tortor. Sed faucibus. Integer eleifend lacus ac neque. Fusce tempus. In hac habitasse platea dictumst. Nulla arcu neque, gravida at, rhoncus id, pharetra vitae, tortor. Aenean vestibulum consequat augue.</p>
</li>
</ul>
<div style="clear: both;">&nbsp;</div>

<p><br /><br /><br /><br /></p></textarea>

همونطور که دیدید یسری کدها حذف شده
ممکنه این علت اجرا نشدنش باشه؟

greenkit
سه شنبه 20 مرداد 1394, 16:51 عصر
<textarea dir="rtl" style="height: 300px ; width: 500px"> </textarea>
کد فوق رو اضافی کپی کردم ندید بگیرید

greenkit
سه شنبه 20 مرداد 1394, 16:52 عصر
111111111111111111111111111111