majid_kiani

اسفند 92

حتما توی خیلی از سایت ها دیدید که وقتی به پایین وبسایت اسکرول می کنید دکمه ای برای بازگشت به بالای صفحه ظاهر میشه که با کلیک روی اون به بالای صفحه بر میگردید.

برای انجام اینکار کافیه که ابتدا کدهای زیر رو توی تگ head سایت قرار بدین :


<script type='text/javascript' src='js/jquery.min.js'></script>
<script type="text/javascript" src="js/scrollTop.js"></script>[/color]
[color=#000000]

دستورات CSS زیر رو هم به فایل css قالبتون اضافه کنید


div.scrollToTop{
    position: fixed;
    right: 20px;
    bottom:60px;
    display: none;
    width:70px;
    padding: 10px;
    background: #000;
    opacity: 0.5;
}

div.scrollToTop a{
    color: #fff;
    text-decoration: none;
}[/font][/color]
[color=#000000][font=Tahoma, Geneva, sans-serif]

کد زیر رو هم بعد از تگ <body> قرار بدین :


<div class="scrollToTop"><a href="#" onclick="return false;">بازگشت به بالا</a></div>

اسفند 92

تغییر اندازه فونت های صفحه سایت یکی از قابلیت هایی است که می توان با استفاده از جی کوئری به راحتی بر روی سایت پیاده کرد.

برای استفاده از این اسکریپت ابتدا ساختار HTML مون رو به صورت زیر قرار می دیم :

1

<p class="intro">مدرسه وب ایران ، آموزش های طراحی وب </p>


<p class="intro">وردپرس پارسی </p>

توجه داشته باشید که توی کد بالا مهم کلاسی هست که به المنت p مون می دیم. در واقع هر تگ p که با کلاس intro توی صفحه باشه فونتش تغییر خواهد کرد.

کدهای جی کوئری زیر رو هم داخل تگ head صفحه مون قرار می دیم.


<script type='text/javascript' src='http://demo.mihanlearn.com/base/js/jquery.min.js'></script>

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

    //min font size
    var min=9;

    //max font size
    var max=16;

    //grab the default font size
    var reset = $('p').css('fontSize');

    //font resize these elements
    var elm = $('p.intro');

    //set the default font size and remove px from the value
    var size = str_replace(reset, 'px', '');

    //Increase font size
    $('a.fontSizePlus').click(function() {

	    //if the font size is lower or equal than the max value
	    if (size<=max) {

		    //increase the size
		    size++;

		    //set the font size
		    elm.css({'fontSize' : size});
	    }

	    //cancel a click event
	    return false; 

    });

    $('a.fontSizeMinus').click(function() {

	    //if the font size is greater or equal than min value
	    if (size>=min) {

		    //decrease the size
		    size--;

		    //set the font size
		    elm.css({'fontSize' : size});
	    }

	    //cancel a click event
	    return false; 

    });

    //Reset the font size
    $('a.fontReset').click(function () {

	    //set the default font size
		 elm.css({'fontSize' : reset});
    });

});

//A string replace function
function str_replace(haystack, needle, replacement) {
    var temp = haystack.split(needle);
    return temp.join(replacement);
}
</script>[/color][/font][/color]
[color=#000000]

اسفند 92

اسلایدر ها بخش مهمی از اکثریت وبسایت های امروزی رو تشکیل میدن که به پویا تر شدن اونها کمک شایانی میکنه. مطمئنا اگر به درستی از قدرت نهان اسلایدر ها استفاده کنید علاوه بر این که وبسایت شما جلوه ای پویا تر میگیره موجب جذب مخاطب بیشتری هم برای وبسایت شما خواهد شد. معمولا اسلایدر ها قدرت گرفته از جی کوئری و یک سری کد های جاوا هستن ، اما تمرکز ما در این مطلب روی ساخت یک اسلایدر کامل قدرت گرفته فقط از CSS3 هست. شاید نتیجه کار مثل بعضی از بهترین و کاملترین اسلایدر هایی که امروز ها میبینیم نباشه ، اما بصورت تمام و کمال کار میکنه


<div id="content">

    <div id="content-inner-1">
    <div id="content-inner-2">
    <div id="content-inner-3">
    <div id="content-inner-4">
    <div id="content-inner-5">
    <div id="content-inner-6">

    <div id="content-inner">
	    <div class="page" id="page1">
	    <img src="images/test1.jpg" alt="test1" title="test1">
	    <div class="page-info" id="info1">
		    <h2>Page 1</h2>
		    <div class="page-text">Lorem ipsum dolor sit amet.</div>
	    </div>
	    </div>
	    <div class="page" id="page2">
	    <img src="images/test2.jpg" alt="test2" title="test2">
	    <div class="page-info" id="info2">
		    <h2>Page 2</h2>
		    <div class="page-text">Lorem ipsum dolor sit amet.</div>
	    </div>
	    </div>
	    <div class="page" id="page3">
	    <img src="images/test3.jpg" alt="test3" title="test3">
	    <div class="page-info" id="info3">
		    <h2>Page 3</h2>
		    <div class="page-text">Lorem ipsum dolor sit amet.</div>
	    </div>
	    </div>
	    <div class="page" id="page4">
	    <img src="images/test4.jpg" alt="test4" title="test4">
	    <div class="page-info" id="info4">
		    <h2>Page 4</h2>
		    <div class="page-text">Lorem ipsum dolor sit amet.</div>
	    </div>
	    </div>
	    <div class="page" id="page5">
	    <img src="images/test5.jpg" alt="test5" title="test5">
	    <div class="page-info" id="info5">
		    <h2>Page 5</h2>
		    <div class="page-text">Lorem ipsum dolor sit amet.</div>
	    </div>
	    </div>
	    <div class="page" id="page6">
	    <img src="images/test6.jpg" alt="test6" title="test6">
	    <div class="page-info" id="info6">
		    <h2>Page 6</h2>
		    <div class="page-text">Lorem ipsum dolor sit amet.</div>
	    </div>
	    </div>
    </div>	  

</div>
</div>
</div>
</div>
</div>
</div>

</div>

<ul id="nav">
    <li class="button" id="button1"><a href="#content-inner-1"></a></li>
    <li class="button" id="button2"><a href="#content-inner-2"></a></li>
    <li class="button" id="button3"><a href="#content-inner-3"></a></li>
    <li class="button" id="button4"><a href="#content-inner-4"></a></li>
    <li class="button" id="button5"><a href="#content-inner-5"></a></li>
    <li class="button" id="button6"><a href="#content-inner-6"></a></li>
</ul>

احتمالا از دیدن کُد های بالا هیچ چیز متوجه نشدید ، شاید این پروژه کمی متفاوت تر از پروژه های قبلی باشه که تا حالا کار کردید ، اما خُب در آخر متوجه نکات مهمی خواهید شد.

در کد بالا ما “content-slider” رو داریم که تمامی محتوا رو در خودش جا میده که ما “margin: 0 auto” میکنیمش و دیگه بهش دست نمیزنیم.

بعد ۲ بخش داریم : “content” و “nav”.

بخش Content صفحات ( اسلایدر هامون ) رو در خودش داره ، و بخش nav هم کنترلر ، که اسلایدر ها رو باهاش عوض میکنیم.

حالا در توی content متوجه میشید که content-inner-1 داریم تا content-inner-6. تمام اسلایدر به این ۶ تا Div بستگی داره و باهاش کار میکنه که در بعد توضیح میدم.


#content-slider {
font-family: arial;
width: 640px;
margin: 0 auto;
margin-top: 100px;
}

#content {
overflow: hidden;
width: 640px;
height: 480px;
-webkit-box-shadow: 0px 0px 50px 10px #c9c9c9;
-moz-box-shadow: 0px 0px 50px 10px #c9c9c9;
box-shadow: 0px 0px 50px 10px #c9c9c9;
}

#content-inner {
width:10000px;
height: 480px;
}

.page {
width: 640px;
height: 480px;
float: left;
}

کاری که الان کردیم این بود که اسلایدر رو به میانه صفحه آوردیم و ۱۰۰ پیکسل از بالای صفحه بهش فاصله دادیم.

استایل دیو “content” خیلی مهم هست ، مقدار “overflow” رو روی “hidden” گزاشتیم ، اینکار باعث میشه هر اسلاید/صفحه تنها زمانی باز بشه که انتخاب میشه.

دیو “content-inner” شامل تمام اسلاید ها (صفحات) ما میشه به همین دلیل عرضش رو روی ۱۰,۰۰۰ پیکسل تنظیم کردیم. در اسلایدر های دیگه معمولا جاوا اسکریپت عرض رو تنظیم میکرد ، اما توی این مطلب ما فقط از CSS3 استفاده میکنیم.


.page-info {
height: 90px;
background-color: rgba(99, 99, 99, 0.6);
position: relative;
margin-top: 0px;
bottom: 103px;
color: #dedede;
padding-left: 20px;
padding-top: 10px;
}

.page-info h2 {
font-size: 21px;
margin-bottom: 10px;
margin-top: 0px;
color: #fafafa;
}

.page-text {
font-size: 15px;
}[/color][/font][/color]
[color=#000000]


.button {
float: left;
background: #bababa;
width: 16px;
height: 16px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
margin-left: 5px;
margin-right: 5px;
}

.button:hover {
-webkit-box-shadow: inset 0px 0px 2px 2px #d4d4d4;
-moz-box-shadow: inset 0px 0px 2px 2px #d4d4d4;
box-shadow: inset 0px 0px 2px 2px #d4d4d4;
}

.button:active {
-webkit-box-shadow: inset 0px 0px 2px 2px #7a7a7a;
-moz-box-shadow: inset 0px 0px 2px 2px #7a7a7a;
box-shadow: inset 0px 0px 2px 2px #7a7a7a;
}

.button a {
display: block;
width: 16px;
height: 16px;
}[/color]
[color=#000000]

به کد بالا دقت کنید ، به عنوان مثال اگر ما الان در آدرس “http://www.example.com/index.html#example” باشیم ، قسمت دوم کد یعنی “:target” عمل میکنه. که در این مبحث دیو “example” نمایش داده میشه.

حالا ما از “:target” استفاده میکنیم تا اسلایدر رو به کار بندازیم. وقتی یک کاربر روی یکی از ۶ دکمه اسلایدر کلیک کنه قسمت “content-inner” باز میشه ، درست مثل جاوا اسکریپت.

این هم از کد :


#content-inner-1:target #content-inner {
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease;
margin-left: 0px;
}

#content-inner-2:target #content-inner {
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease;
margin-left: -640px;
}

#content-inner-3:target #content-inner {
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease;
margin-left: -1280px;
}

#content-inner-4:target #content-inner {
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease;
margin-left: -1920px;
}

#content-inner-5:target #content-inner {
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease;
margin-left: -2560px;
}

#content-inner-6:target #content-inner {
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease;
margin-left: -3200px;
}[/color]
[color=#000000]

اسفند 92

با سلام در این تایپک قصد دارم پی اچ پی رو از پایه شروع کنیم به آموزش .

فقط تشکر یادتون نره

:P

ورود

majid_kiani

تعداد ارسال‌ها

تاریخ عضویت

آخرین بازدید

نوع محتوا

نمایه ها

تالارهای گفتگو

نوشته‌ها ارسال شده توسط majid_kiani

کد جی کوئری بازگشت به بالا صفحه

تغییر اندازه فونت ها با استفاده از جی کوئری

پروژه ساخت اسلایدر با استفاده از CSS3

آموزش جامع php

فهرست بخش ها

فعالیت ها