majid_kiani

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

1 پست در این موضوع قرار دارد

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

برای استفاده از این اسکریپت ابتدا ساختار 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]

0

به اشتراک گذاری این پست


لینک به پست
مهمان
این موضوع برای عدم ارسال قفل گردیده است.

  • مطالب مشابه

    • توسط koolfayfer
      سلام به همه
      دوستان من در پست های وب سایتم یه دکمه گذاشتم که وقتی روش کلیک میشه یه اینپوت تکست کنارش میاد و هیچ مشکلی در این بابت نیست
      اما وقتی پست داخل حلقه قرار میگیره و برای مثال تعدادش به 10 میرسه وقتی روی دکمه کلیک کنم قاطی میکنه چون که میخواد همه کلاس ها رو اینپوت ظاهر کنه
      چکار کنم که وقتی یه متن یا چیزی کلیک شد تنها اینپوت کنار اون ظاهر بشه نه همه!؟
    • توسط masoudch
      سلام
      به کمکتون نیاز دارم.
      به مشکل خوردم برای اضافه کردن یک فایل جاوا اسکریپت برای ایجاد اسلاید شو (owl-carousel) در تم وردپرس.
      این تم html بوده که درحال تبدیل اون به تم وردپرس هستم.
      کد جاوااسکریپت: این کد رو کجا باید قرار بدم که مشکل اسلایدشو حل بشه؟
      <script> // You can also use "$(window).load(function() {" $(function () { // Slideshow $("#slider").responsiveSlides({ auto: true, pager: false, nav: true, speed: 500, namespace: "callbacks", before: function () { $('.events').append("<li>before event fired.</li>"); }, after: function () { $('.events').append("<li>after event fired.</li>"); } }); }); </script> آدرس دهی در فانکشن وارد کردم: این درسته که میتونم کدهای جاوا اسکریپت و توی فوتر قرار بدم و بعد از طریق فانکشن یا حالا هر روش دیگه ای اونا رو فراخونی کنم که دیگه همچین مشکلی پیش نیاد؟
      <?php function insert_style() { wp_enqueue_style('zerogrid' , get_template_directory_uri().'/assets/css/zerogrid.css'); wp_enqueue_style('style' , get_template_directory_uri().'/assets/css/style.css'); wp_enqueue_style('responsiveslides' , get_template_directory_uri().'/assets/css/responsiveslides.css'); wp_enqueue_style('font-awesome-min' , get_template_directory_uri().'/assets/font-awesome/css/font-awesome.min.css'); wp_enqueue_style('owl-carousel' , get_template_directory_uri().'/assets/owl-carousel/owl.carousel.css'); wp_enqueue_style('owl-theme' , get_template_directory_uri().'/assets/owl-carousel/owl.theme.css'); wp_enqueue_style('menu' , get_template_directory_uri().'/assets/css/menu.css'); //add scripts wp_enqueue_script('jquery183-min' , get_template_directory_uri().'/assets/js/jquery183.min.js'); wp_enqueue_script('script' , get_template_directory_uri().'/assets/js/script.js'); wp_enqueue_script('jquery-latest-min' , get_template_directory_uri().'/assets/js/jquery-latest.min.js'); wp_enqueue_script('responsiveslides-min' , get_template_directory_uri().'/assets/js/responsiveslides-min.js'); wp_enqueue_script('owl-carousel-min' , get_template_directory_uri().'/assets/owl-carousel/owl.carousel.min.js'); } add_action('wp_enqueue_scripts' , 'insert_style'); ?> خطایی که با بررسی inspect element متوجه شدم اینه که اصلا فایل owl-carousel.js خونده نمیشه.
      ممنون.
       
    • توسط koolfayfer
      سلام به همه دوستان
      من اگه بخوام یه تگ آپلود فایل با یه باکس بزارم هنگامی که عکسی انتخاب میشه تو اون باکس نشون بده و دوباره روی تگ کلیک کنم و کنسل کنم که قاعدتا فایل انتخابی پاک میشه و باید در اون باکس هم پاک بشه
      ای چیزی که من میخوام چند خطی کد نیازه اما مورد مهمش اینه اگه بخوام از این کپی بگیرم و به 6 تا اضافه کنم نمی تونم به صورت داینامیک کدشو بزنم بلکه باید دوباره برای هر کدوم آیدی و کلس مجزا استفاده کنم از نو فراخونی کنم
       
      راهی هست که هر چند تا تگ فایل و باکس کپی بگیرم یا همون یه دستور اول ست در بیاد و نیاز نباشه چند بار کد های جی کوئری رو کپی کنم!؟
    • توسط koolfayfer
      سلام و وقت بخیر
      دوستان من شش آیتم تب دارم که روی هر کدومشون کلیک کنی باکس اون تب ظاهر شه و قبلی مخفی
      و هر تب اکتیو بود رنگ هاورش بمونه
      من قبلا به صورت غیراصولی می نوشتم که 6 باکس جداگانه صدا میزدم و هر وقتی فلان کلیک شد نمایش بده و هر 5 تا دیگه مخفی! حساب کن چی میشه کد ها!!!
      لطفا کد داینامیک رو ارائه بدید
      عکس هم گذاشتم که بهتر نشون بده توضیحاتمو
      سپاس

    • توسط koolfayfer
      سلام دوستان
      این کد منه:
      $(document).ready(function(e) { $(".box").hover( function(){ $(".image").animate({bottom: "0px"}); }, function(){ $(".image").animate({top: "0px"}); } ); });  
       
       
       
      یه باکس مربع در نظر بگیرید با کلس box
      و یه باکس با کلس image به پهنای کلس box و ارتفاع دوبرابر که داخل کلس box می باشد
      overflow تگ box مخفیه و در ابتدا نیمه بالایی تگ image رو می بینیم
      که با هاور روی box نیمه پایینی image اسکرول بشه که بتونیم ببینیم...
       
       
       
       
      بار اول هاور و آن هاور میشه اما دیگه این رویداد اتفاق نمی افته
      مشکل از کجاست؟