پرش به


تصویر

کنترل و تغییر اندازه فونت fullstory با جاوا اسکریپت (توسط کاربر)


  • لطفا وارد حساب کاربری خود شوید تا بتوانید پاسخ دهید
10 پاسخ برای این موضوع

#1 guitar-on-fire

guitar-on-fire

    عضو سایت

  • عضو سایت
  • ستارهستاره
  • 59 ارسال
  • محل سکونت: borujen
  • مهارت ها: HTML, CSS

ارسالی 1394/12/28 ساعت 15:29

با سلام

فرارسیدن سال نو را به همه کاربران دیتالایف تبریک میگم

 

من با استفاده از جاوا اسکریپت میخواستم امکان کنترل سایز فونت در قسمت ادامه مطلب به کاربران بدم که از کد زیر استفاده کردم :

<script type="text/javascript">
//<![CDATA[
var minsize=8;
var maxsize=18;
function increaseFontSize(){
 var p = document.getElementsByTagName('p');
 for(i=0;i<p.length;i++) {
 if(p[i].style.fontSize) {
 var s = parseInt(p[i].style.fontSize.replace("px",""));
 } else {
 var s = 12;
 }
 if(s!=maxsize) {
 s += 1;
 }
 p[i].style.fontSize = s+"px"
 }
}
function decreaseFontSize() {
 var p = document.getElementsByTagName('p');
 for(i=0;i<p.length;i++) {
 if(p[i].style.fontSize) {
 var s = parseInt(p[i].style.fontSize.replace("px",""));
 } else {
 var s = 12;
 }
 if(s!=minsize) {
 s -= 1;
 }
 p[i].style.fontSize = s+"px"
 }
}
function defultFontSize() {
 var p = document.getElementsByTagName('p');
 for(i=0;i<p.length;i++) {
 if(p[i].style.fontSize) {
 var s = parseInt(p[i].style.fontSize.replace("px",""));
 } else {
 var s = 12;
 }
 if(s!=12) {
 s = 12;
 }
 p[i].style.fontSize = s+"px"
 }
}
//]]>
</script>
<a href="javascript:decreaseFontSize();">کاهش اندازه فونت</a>
<a href="javascript:increaseFontSize();">افزایش اندازه فونت</a>
<a href="javascript:defultFontSize();">اندازه فونت پیش فرض</a>

که با قرار دادن در تگ <p> پاراگراف متن مورد نظر را میتوان کنترل کرد ولی در قسمت fullstory.tpl بر روی مطالب تاثیری ندارد

ممنون میشم دوستان  راهنمایی کنن

 fullstory.tpl:

<script type="text/javascript">
//<![CDATA[
var minsize=8;
var maxsize=18;
function increaseFontSize(){
 var p = document.getElementsByTagName('p');
 for(i=0;i<p.length;i++) {
 if(p[i].style.fontSize) {
 var s = parseInt(p[i].style.fontSize.replace("px",""));
 } else {
 var s = 12;
 }
 if(s!=maxsize) {
 s += 1;
 }
 p[i].style.fontSize = s+"px"
 }
}
function decreaseFontSize() {
 var p = document.getElementsByTagName('p');
 for(i=0;i<p.length;i++) {
 if(p[i].style.fontSize) {
 var s = parseInt(p[i].style.fontSize.replace("px",""));
 } else {
 var s = 12;
 }
 if(s!=minsize) {
 s -= 1;
 }
 p[i].style.fontSize = s+"px"
 }
}
function defultFontSize() {
 var p = document.getElementsByTagName('p');
 for(i=0;i<p.length;i++) {
 if(p[i].style.fontSize) {
 var s = parseInt(p[i].style.fontSize.replace("px",""));
 } else {
 var s = 12;
 }
 if(s!=12) {
 s = 12;
 }
 p[i].style.fontSize = s+"px"
 }
}
//]]>
</script>
<script type="text/javascript">
    $(document).ready(function() {
        $('.fullgallery').find('br').remove();
    }
                     );
</script>

<article class="section" id="fullnews">
    <div class="sar_bolet">
    </div>
    <div style="background: #F2F2F2;">
        <div class="left">
            <span>
                تاریخ: 
                <strong>
                    {date}
                </strong>
            </span>
        </div>
        <br>
        <div class="left">
            <span>
                کد خبر: 
                <strong>
                    {news-id}-{date=ymd}
                </strong>
            </span>
        </div>
        [xfgiven_rutitr] [xfvalue_rutitr] [/xfgiven_rutitr]؛
        <h2>
            {title}
        </h2>
        <div class="right">
            دسته بندی: {link-category}
        </div>
        
        <br>
        
    </div>
    
    <br>
    <p>
    <a href="javascript:decreaseFontSize();">کاهش اندازه فونت</a>
	<a href="javascript:increaseFontSize();">افزایش اندازه فونت</a>
	<a href="javascript:defultFontSize();">اندازه فونت پیش فرض</a>
    {short-story}
    <br>
    {full-story}
    </p>
    [xfgiven_fullgallery]
    <br style="clear:both"/>
    <div class="fullgallery" >
        [xfvalue_fullgallery]
    </div>
    <br style="clear:both"/>
    [/xfgiven_fullgallery]
    
    <footer class="section-footer news-footer">
        
        
        <div class="left">
            <span>
                بازدیدها: 
                <strong>
                    {views}
                </strong>
            </span>
            <span>
                نظرات: 
                <strong>
                    {comments-num}
                </strong>
            </span>
            <span>
                نویسنده: {author}
            </span>
        </div>
        
    </footer>
    
</article>

{comments}
{navigation}
{addcomments}

  • 0

#2 ParsDle

ParsDle

    عضو سایت

  • عضو سایت
  • ستارهستاره
  • 127 ارسال
  • مهارت ها: HTML, CSS

ارسالی 1394/12/28 ساعت 20:59

سلام ، سال نو شما هم پیشاپیش مبارک

من زیاد جیکوئری بلد نیستم و در چنین مواردی بندرت کسی پیدا میشه که کمک و راهنمایی بکنه!

بیشتر مشکلاتم رو با جستجو در نت و آزمون و خطا رفع میکنم

 

بنابراین در اینجا ابتدا بنظر من تست کنید که آیا کدها عمل میکنند یا نه

اینجا بین :

</p><p>

به جای تگ های خلاصه و ادامه مطلب یک جمله برای تست تایپ و امتحان کنید تا مطمئن بشید که کدها کار میکنند یا خیر و اگر کار می کنند وارد مرحله بعد بشیم!


  • 1
[url="http://parsdle.ir"]پارس دیتالایف | قالب دیتالایف[/url]
مرجع نفیس ترین قالب های دیتالایف پارسی

#3 amin_blog

amin_blog

    کاربر فعال انجمن

  • عضو سایت
  • ستارهستارهستاره
  • 272 ارسال
  • محل سکونت: اهواز
  • مهارت ها: HTML, CSS, js, SQL, PHP

ارسالی 1394/12/28 ساعت 22:25

fullstory شمارو بصورت بهینه و با جی کوئری اصلاح کردم و تست کردم، کافیه فقط جایگزین کنید:

<script type="text/javascript">
  $(document).ready(function() {
    $('#incfont').click(function(){
      curSize= parseInt($('#content').css('font-size')) + 1;
      if(curSize<=18)
        $('#content').css('font-size', curSize);
    });
    $('#decfont').click(function(){
      curSize= parseInt($('#content').css('font-size')) - 1;
      if(curSize>=8)
        $('#content').css('font-size', curSize);
    });

    $('#resfont').click(function(){
      curSize=14;

      $('#content').css('font-size', curSize);
    });
  });
</script>

<article class="section" id="fullnews">
  <div class="sar_bolet">
  </div>
  <div style="background: #F2F2F2;">
    <div class="left">
            <span>
                تاریخ:
                <strong>
                  {date}
                </strong>
            </span>
    </div>
    <br>
    <div class="left">
            <span>
                کد خبر:
                <strong>
                  {news-id}-{date=ymd}
                </strong>
            </span>
    </div>
    [xfgiven_rutitr] [xfvalue_rutitr] [/xfgiven_rutitr]؛
    <h2>
      {title}
    </h2>
    <div class="right">
      دسته بندی: {link-category}
    </div>

    <br>

  </div>

  <br>

  <p id="content">
    <a href="#" id="incfont">افزایش</a>
    <a href="#" id="resfont">پیشفرض</a>
    <a href="#" id="decfont">کاهش</a>
    {short-story}
    <br>
    {full-story}
  </p>
  [xfgiven_fullgallery]
  <br style="clear:both"/>
  <div class="fullgallery" >
    [xfvalue_fullgallery]
  </div>
  <br style="clear:both"/>
  [/xfgiven_fullgallery]

  <footer class="section-footer news-footer">


    <div class="left">
            <span>
                بازدیدها:
                <strong>
                  {views}
                </strong>
            </span>
            <span>
                نظرات:
                <strong>
                  {comments-num}
                </strong>
            </span>
            <span>
                نویسنده: {author}
            </span>
    </div>

  </footer>

</article>

{comments}
{navigation}
{addcomments}

  • 2

این روزها همه طراح وب اند، شما چطور؟؟؟


#4 guitar-on-fire

guitar-on-fire

    عضو سایت

  • عضو سایت
  • ستارهستاره
  • 59 ارسال
  • محل سکونت: borujen
  • مهارت ها: HTML, CSS

ارسالی 1394/12/28 ساعت 23:30

 

fullstory شمارو بصورت بهینه و با جی کوئری اصلاح کردم و تست کردم، کافیه فقط جایگزین کنید:

<script type="text/javascript">
  $(document).ready(function() {
    $('#incfont').click(function(){
      curSize= parseInt($('#content').css('font-size')) + 1;
      if(curSize<=18)
        $('#content').css('font-size', curSize);
    });
    $('#decfont').click(function(){
      curSize= parseInt($('#content').css('font-size')) - 1;
      if(curSize>=8)
        $('#content').css('font-size', curSize);
    });

    $('#resfont').click(function(){
      curSize=14;

      $('#content').css('font-size', curSize);
    });
  });
</script>

<article class="section" id="fullnews">
  <div class="sar_bolet">
  </div>
  <div style="background: #F2F2F2;">
    <div class="left">
            <span>
                تاریخ:
                <strong>
                  {date}
                </strong>
            </span>
    </div>
    <br>
    <div class="left">
            <span>
                کد خبر:
                <strong>
                  {news-id}-{date=ymd}
                </strong>
            </span>
    </div>
    [xfgiven_rutitr] [xfvalue_rutitr] [/xfgiven_rutitr]؛
    <h2>
      {title}
    </h2>
    <div class="right">
      دسته بندی: {link-category}
    </div>

    <br>

  </div>

  <br>

  <p id="content">
    <a href="#" id="incfont">افزایش</a>
    <a href="#" id="resfont">پیشفرض</a>
    <a href="#" id="decfont">کاهش</a>
    {short-story}
    <br>
    {full-story}
  </p>
  [xfgiven_fullgallery]
  <br style="clear:both"/>
  <div class="fullgallery" >
    [xfvalue_fullgallery]
  </div>
  <br style="clear:both"/>
  [/xfgiven_fullgallery]

  <footer class="section-footer news-footer">


    <div class="left">
            <span>
                بازدیدها:
                <strong>
                  {views}
                </strong>
            </span>
            <span>
                نظرات:
                <strong>
                  {comments-num}
                </strong>
            </span>
            <span>
                نویسنده: {author}
            </span>
    </div>

  </footer>

</article>

{comments}
{navigation}
{addcomments}

ممنون ، ولی همچنان تاثیری نداره


  • 0

#5 guitar-on-fire

guitar-on-fire

    عضو سایت

  • عضو سایت
  • ستارهستاره
  • 59 ارسال
  • محل سکونت: borujen
  • مهارت ها: HTML, CSS

ارسالی 1394/12/28 ساعت 23:34

سلام ، سال نو شما هم پیشاپیش مبارک

من زیاد جیکوئری بلد نیستم و در چنین مواردی بندرت کسی پیدا میشه که کمک و راهنمایی بکنه!

بیشتر مشکلاتم رو با جستجو در نت و آزمون و خطا رفع میکنم

 

بنابراین در اینجا ابتدا بنظر من تست کنید که آیا کدها عمل میکنند یا نه

اینجا بین :

</p><p>

به جای تگ های خلاصه و ادامه مطلب یک جمله برای تست تایپ و امتحان کنید تا مطمئن بشید که کدها کار میکنند یا خیر و اگر کار می کنند وارد مرحله بعد بشیم!

ممنون از شما

بله ، عملکرد برای هر متنی به جز تگ های فول استوری و شورت استوری صحیح  ولی برای این دو تگ عمل نمی کنه

کلیه سایز های تعریف شده برای متن body و سایر قسمت ها را هم پاک کردم با این حال عملکرد صحیح نیست


  • 0

#6 iraya

iraya

    عضو سایت

  • عضو سایت
  • ستارهستاره
  • 151 ارسال
  • محل سکونت: ارومیه
  • مهارت ها: HTML, CSS, js

ارسالی 1394/12/29 ساعت 00:21

ممنون ، ولی همچنان تاثیری نداره

کدی که دوستمون قرار دادن کاملا درسته و به خوبی عمل میکنه

 

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

مثلا دنبال #content بگردید توی فایل های استایل مطلبتون


  • 0

---------------------------------------------------------

http://www.iraya.ir


#7 jamaldanlod

jamaldanlod

    مدیر بخش قالب ها

  • مدیر
  • 161 ارسال
  • محل سکونت: Iran
  • مهارت ها: HTML, CSS, js, SQL

ارسالی 1394/12/29 ساعت 12:13

سلام

به جای قسمت پایین:

<p>
    <a href="javascript:decreaseFontSize();">کاهش اندازه فونت</a>
	<a href="javascript:increaseFontSize();">افزایش اندازه فونت</a>
	<a href="javascript:defultFontSize();">اندازه فونت پیش فرض</a>
    {short-story}
    <br>
    {full-story}
</p>

این رو جایگزین کن:

<div class="fchange">
    <a href="javascript:decreaseFontSize();">کاهش اندازه فونت</a>
	<a href="javascript:increaseFontSize();">افزایش اندازه فونت</a>
	<a href="javascript:defultFontSize();">اندازه فونت پیش فرض</a>
    {short-story}
    <br>
    {full-story}
</div>

داخل کد جاوا هم دنبال کد زیر بگرد(چند بار هم تکرار شده، همه رو جایگزین کنید):

document.getElementsByTagName('p')

این کد رو جایگزینش کن:

document.getElementsByClassName("fchange")

  • 4

#8 guitar-on-fire

guitar-on-fire

    عضو سایت

  • عضو سایت
  • ستارهستاره
  • 59 ارسال
  • محل سکونت: borujen
  • مهارت ها: HTML, CSS

ارسالی 1394/12/29 ساعت 13:36

 

سلام

به جای قسمت پایین:

<p>
    <a href="javascript:decreaseFontSize();">کاهش اندازه فونت</a>
	<a href="javascript:increaseFontSize();">افزایش اندازه فونت</a>
	<a href="javascript:defultFontSize();">اندازه فونت پیش فرض</a>
    {short-story}
    <br>
    {full-story}
</p>

این رو جایگزین کن:

<div class="fchange">
    <a href="javascript:decreaseFontSize();">کاهش اندازه فونت</a>
	<a href="javascript:increaseFontSize();">افزایش اندازه فونت</a>
	<a href="javascript:defultFontSize();">اندازه فونت پیش فرض</a>
    {short-story}
    <br>
    {full-story}
</div>

داخل کد جاوا هم دنبال کد زیر بگرد(چند بار هم تکرار شده، همه رو جایگزین کنید):

document.getElementsByTagName('p')

این کد رو جایگزینش کن:

document.getElementsByClassName("fchange")

ممنون از شما جناب یارعلی عزیز ، واقعا لطف کردید

شما یکی از بهترین  طراحان دیتالایف هستید ، همیشه نکات ریزی که توی مباحث مختلف بهم کمک کردید و قالب هایی که برام طراحی کردید بی نقص بوده

هر جا هستید سالم و سلامت و شاداب باشید


  • 0

#9 Eh3an

Eh3an

    مدیر بخش ماژول ها

  • مدیر
  • 1,742 ارسال
  • محل سکونت: ایران - اردبیل
  • مهارت ها: HTML, CSS, js, SQL, PHP, SEO

ارسالی 1394/12/29 ساعت 23:00

ممنون از شما جناب یارعلی عزیز ، واقعا لطف کردید

شما یکی از بهترین  طراحان دیتالایف هستید ، همیشه نکات ریزی که توی مباحث مختلف بهم کمک کردید و قالب هایی که برام طراحی کردید بی نقص بوده

هر جا هستید سالم و سلامت و شاداب باشید

آقا یکی ما رو هم تعریف کنه  :(  :(  :(  :(  B)  B)

دلیلش اینه که خود دیتالایف تگ هایی رو تو fullnews تولید می کنه ( کلی p و ... ) که شما با تعریف div برای {full-story} میتونین کنترلش کنین! :D   :wub:


  • 1

#10 guitar-on-fire

guitar-on-fire

    عضو سایت

  • عضو سایت
  • ستارهستاره
  • 59 ارسال
  • محل سکونت: borujen
  • مهارت ها: HTML, CSS

ارسالی 1395/01/01 ساعت 00:42

آقا یکی ما رو هم تعریف کنه  :(  :(  :(  :(  B)  B)

دلیلش اینه که خود دیتالایف تگ هایی رو تو fullnews تولید می کنه ( کلی p و ... ) که شما با تعریف div برای {full-story} میتونین کنترلش کنین! :D   :wub:

سید جان شما که تاج سری :wub:

این قالب سایتمو ریسپانسو کنی 10 صفحه در وصفت می نویسم :D


  • 0

#11 Eh3an

Eh3an

    مدیر بخش ماژول ها

  • مدیر
  • 1,742 ارسال
  • محل سکونت: ایران - اردبیل
  • مهارت ها: HTML, CSS, js, SQL, PHP, SEO

ارسالی 1395/01/01 ساعت 09:23

سید جان شما که تاج سری :wub:

این قالب سایتمو ریسپانسو کنی 10 صفحه در وصفت می نویسم :D

قالبت کدوم قالب هست مگه ؟! لازم شد فرار کنم  :P  :P  :P


  • 0


0 کاربر در حال خواندن این موضوع است

0 کاربر، 0 مهمان و 0 عضو مخفی