تغییر مختصات یک المان absolute توسط jQuery

[سعید شعبانی 2047]

دوستان سلام

من یک المان را absolute کردم و با left موقعیتش را می خواهم تغییر بدم ولی نمی خواهم این کار به صورت ثابت انجام بشه. یعنی می خواهم مانند اسکرول بار ها باشه به این صورت که یک المان دیگر در صفحه ایجاد کنم و با حرکت دادن اون المان, left المان دیگر تغییر کند. به این صورت هم باشه که عرض المانی که absolute شده را شناسایی کنه و بعد به همون اندازه از left صفر شروع بشه تا left ی برابر با عرض المان absolute شده.

ببخشید یکم بد توضیح دادم

[imanfakhar 26231]

<style type="text/css">
div {
display:block;
position:absolute;
}
</style>;
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
var width = $("div").width();
$("div").animate({
"left" : width
  },300);
  })
})
</script>
<button>button</button>
<div></div>

تست کنید

[سعید شعبانی 2047]

خیلی متشکرم فقط چندتا سوال

div اولی داخل js برای چی هست؟ دومی برای چی؟

بعد این div که در آخر باز و بسته کردید برای چی هست؟

<div></div>

[imanfakhar 26231]

div عنصریست که قرار است حرکت کند و button کلیدی که قرار است دستور حرکت را صادر کند

مفهوم کدهای js :

$(document).ready(function()

یعنی بعد از خواندن سند کد را اجرا کن

$("button").click(function() {

هر وقت عنصری با نام button (می تواند آی دی یا کلاس باشد) کلیک شد

var width = $("div").width();

به کلمه width مقداری برار عرض عنصر div بده

$("div").animate({
"left" : width
  },300);

عنصر div را به صورت انیمیشن به به اندازه مقدار width و ظرف 300 میلی ثانیه (یک سوم ثانیه) به سمت چپ ببر

[سعید شعبانی 2047]

جناب فخار خیلی متشکرم الان اینجا را ببینید مشکل چیه؟

[imanfakhar 26231]

شما وقتی در html از table استفاده نکردی چرا در js به tr و td افکت دادی؟

فکر کنم هدفتون این باشه

http://jsfiddle.net/jaRTu/

[سعید شعبانی 2047]

شما وقتی در html از table استفاده نکردی چرا در js به tr و td افکت دادی؟

فکر کنم هدفتون این باشه

http://jsfiddle.net/jaRTu/

بله تقریبا همچین چیزی می خواهم ولی یک مشکل هست : عرض را باید به صورت دستی برای کلاس block وارد کنم (به دلیل اینکه بعدا این عرض کم یا زیاد میشه می خواهم تا عرض را خودش زیاد کنه به طوری که همه اطلاعات در یک خط قرار بگیرند).

وقتی که از table استفاده کنیم عرض صفحه خود به خود زیاد میشه و لازم نیست تا به صورت دستی عرض بهش بدیم. من با استفاده از این آموزش اومدم و با js یک جدول مجازی درست کردم که فقط مرورگر اون را می بینه ولی موتور های جستجو اون را نمی بینند به خاطر همین هم از tr , td داخل js استفاده کرده بودم.

[imanfakhar 26231]

در div هم می تونه همینطور باشه ولی بهتره به div اصلی که بلوک را حفظ می کنه اندازه ای مشخص بدید که در همه نمایشگرها درست دیده بشه و بجای ساخت جدول js خاصیتش رو تعریف کنید مثل:

.block {
display:table-row;
width:3500px;
}
.post{
width:auto;
min-width:100px;
height:36px;
overflow:hidden;
display:table-cell
}

اینکه جدول استفاده کنید یا نه خیلی تفاوتی نداره ولی حتما جدول را با html بسازید چون جدول js بجز سنگین کردن صفحه و درگیر کردنش با یک سری اسکریپت کمکی نمی کنه

موتور جستجو جدول را ببینه یا نبینه چه فرقی می کنه؟

با مرورگر فایر فاکس جدولتان را سلکت کنید و راست کنید و سورس قسمت سلکت شده را بخوانید

جاوا اسکریپت همون کار html را می کنه ولی بعد از لود صفحه و به همین خاطر در سورس کد تغییر ظاهری ایجاد نمی شه و الا وقتی اسکریپت شما می تونه tr را بخونه موتور جستجو هم می تونه