تنظیم ارتفاع تب ساز گاویک

[Pourdaryaei]

سلام

من از تب ساز گاویک توی یک قسمت از سایت استفاده میکنم ؛ توی تنظیمات تب ساز قسمتی برای مشخص کردن ارتفاع داره که پیش فرض روی 200 پیکس هست و هرچی دوست داری میشه تنظیمش کنی ؛ میخواستم بدونم این ارتفاع چطوی میشه اتوماتیک باشه ؟ یعنی اندازه محتوای داخل اون تب باشه بطور خودکار ... الان من دوتا تب دارم که ارتفاع رو دستی تنظیم کردم برای تب اول که بلند هست ولی تب دوم که کوچیکتره یک فضای بیخود خالی ایجاد شده ...
چطور میشه این مشکل رو حل کرد

لینک : دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.

---

خب خودم پیداش کردم ولی مشکل حل نشد ...

ماژول رو باز میکنی فایل helper.php خط 96 کد زیر رو پیدا میکنی .

کد: (انتخاب همه)

$document->addStyleDeclaration('#'.$this->config['module_id'].' .gkTabContainer0, #'.$this->config['module_id'].' .gkTabContainer1, #'.$this->config['module_id'].' .gkTabContainer2 { height: '.$this->config['module_height'].'px; }');

و جای اون کد زیر رو میگذاری

کد: (انتخاب همه)

if($this->config['module_height']=="auto"){
         $document->addStyleDeclaration('#'.$this->config['module_id'].' .gkTabContainer0, #'.$this->config['module_id'].' .gkTabContainer1, #'.$this->config['module_id'].' .gkTabContainer2 { height: '.$this->config['module_height'].'; }');
      }else{
         $document->addStyleDeclaration('#'.$this->config['module_id'].' .gkTabContainer0, #'.$this->config['module_id'].' .gkTabContainer1, #'.$this->config['module_id'].' .gkTabContainer2 { height: '.$this->config['module_height'].'px; }');
      }

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

[ابوالفضل حیدری]

درود
این کدها رو کلاً با کدهای فایل این مسیر جایگزین کن که ماژولت راست چین بشه:

کد: (انتخاب همه)

http://britney-fans.com/modules/mod_tabs_gk4/styles/style1.css

کد: (انتخاب همه)

.gkTab {
    position: relative;
}
.gkTabWrap {
    margin-bottom: auto;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
}
ul.gkTabs {
    -moz-border-bottom-colors: none !important;
    -moz-border-image: none !important;
    -moz-border-left-colors: none !important;
    -moz-border-right-colors: none !important;
    -moz-border-top-colors: none !important;
    background-attachment: scroll !important;
    background-clip: border-box !important;
    background-color: transparent !important;
    background-image: url("../images/style1/bg.png") !important;
    background-origin: padding-box !important;
    background-position: 0 0 !important;
    background-repeat: repeat-x !important;
    background-size: auto auto !important;
    border-bottom-color: #E1E1E1 !important;
    border-bottom-style: solid !important;
    border-bottom-width: 1px !important;
    border-left-color-ltr-source: physical !important;
    border-left-color-rtl-source: physical !important;
    border-left-color-value: #E8E8E8 !important;
    border-left-style-ltr-source: physical !important;
    border-left-style-rtl-source: physical !important;
    border-left-style-value: solid !important;
    border-left-width-ltr-source: physical !important;
    border-left-width-rtl-source: physical !important;
    border-left-width-value: 1px !important;
    border-right-color-ltr-source: physical !important;
    border-right-color-rtl-source: physical !important;
    border-right-color-value: #E8E8E8 !important;
    border-right-style-ltr-source: physical !important;
    border-right-style-rtl-source: physical !important;
    border-right-style-value: solid !important;
    border-right-width-ltr-source: physical !important;
    border-right-width-rtl-source: physical !important;
    border-right-width-value: 1px !important;
    border-top-color: #E8E8E8 !important;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-top-style: solid !important;
    border-top-width: 1px !important;
    height: 42px;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
}
ul.gkTabs li {
    -moz-border-bottom-colors: none !important;
    -moz-border-image: none !important;
    -moz-border-left-colors: none !important;
    -moz-border-right-colors: none !important;
    -moz-border-top-colors: none !important;
    background-attachment: scroll !important;
    background-clip: border-box !important;
    background-color: transparent !important;
    background-image: none !important;
    background-origin: padding-box !important;
    background-position: 0 0 !important;
    background-repeat: repeat !important;
    background-size: auto auto !important;
    border-bottom-color: -moz-use-text-color !important;
    border-bottom-style: none !important;
    border-bottom-width: medium !important;
    border-left-color-ltr-source: physical !important;
    border-left-color-rtl-source: physical !important;
    border-left-color-value: -moz-use-text-color !important;
    border-left-style-ltr-source: physical !important;
    border-left-style-rtl-source: physical !important;
    border-left-style-value: none !important;
    border-left-width-ltr-source: physical !important;
    border-left-width-rtl-source: physical !important;
    border-left-width-value: medium !important;
    border-right-color-ltr-source: physical !important;
    border-right-color-rtl-source: physical !important;
    border-right-color-value: #E3E3E3 !important;
    border-right-style-ltr-source: physical !important;
    border-right-style-rtl-source: physical !important;
    border-right-style-value: solid !important;
    border-right-width-ltr-source: physical !important;
    border-right-width-rtl-source: physical !important;
    border-right-width-value: 1px !important;
    border-top-color: -moz-use-text-color !important;
    border-top-style: none !important;
    border-top-width: medium !important;
    color: #666666;
    cursor: pointer;
    float: right;
    font-weight: bold;
    line-height: 42px !important;
    list-style-type: none;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 0 !important;
    position: relative;
}
ul.gkTabs li:hover, ul.gkTabs li.active {
    background-attachment: scroll !important;
    background-clip: border-box !important;
    background-color: #FFFFFF !important;
    background-image: none !important;
    background-origin: padding-box !important;
    background-position: 0 0 !important;
    background-repeat: repeat !important;
    background-size: auto auto !important;
    border-bottom-color: #FFFFFF !important;
    border-bottom-style: solid !important;
    border-bottom-width: 1px !important;
    color: #5581B2 !important;
}
ul.gkTabs li:hover:first-child, ul.gkTabs li.active:first-child {
    border-top-left-radius: 4px;
}
.gkTabContainer0 {
    clear: both;
}
.gkTabContainer1 {
    overflow-x: hidden;
    overflow-y: hidden;
}
.gkTabItem {
    float: right;
    overflow-x: hidden;
    overflow-y: hidden;
    padding-bottom: 26px;
    padding-left: 0;
    padding-right: 0;
    padding-top: 26px;
}
.gkTabButtonNext, .gkTabButtonPrev {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("../images/style1/b_next.png");
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: auto auto;
    cursor: pointer;
    height: 18px;
    position: absolute;
    right: 0;
    text-indent: -999em;
    top: 43%;
    width: 18px;
}
.gkTabButtonPrev {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("../images/style1/b_prev.png");
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: auto auto;
    left: 0;
    right: inherit;
}
.gkTabButtonNext:hover, .gkTabButtonPrev:hover {
    background-position: 100% 0;
}
.gkTabContainer0, .gkTabContainer1, .gkTabContainer2 {
    position: relative;
}
.gkTabItem {
    left: -999em;
    position: relative;
    top: 0;
    width: 100%;
}
.gkTabItem.active {
    left: 0;
    position: static;
}

واسه اون مشکل که گفتی هم یه بار از تنظیمات ماژول ببین گزینه استفاده از جی کوئری یا جاوا یا لایبرری جوملا آپشناله یا نه

[Pourdaryaei]

مرسی بابت css راست چین ، ولی اینجا همون چپ چین نیاز دارم ، مشکل اصلیم ارتفاع ماژول تب ساز هست ؛ که یا باید باهاش بسازم یا از یه تب ساز دیگه استفاده کنم .

توی قسمت تنظیمات پیشرفته ماژول استفاده از اسکریپت رو غیرفعال کردم ، ولی فرقی نداره باز همون اتوماتیک رو که میگذاری صفحه بعد یه لحظه ناپدید میشه .

این مشکل رو از خیلی وقت داره ، قرار بود توی نسخه 1.5 این قابلیت اضافه بشه که الان 1.7 هست و هنوز مشکل رو حل نکردند ...

[ehsansabet]

سلام!
جناب پوردریائی ، واسم بفرستین تا ببینم میشه درستش کرد یا نه.

[Pourdaryaei]

مرسی از لطفتون ؛ ماژول رو پیوست ارسال میکنم

[ehsansabet]

سلام!
خیلی ماژول باحالیه ، از همه فایل ها استایل دهی میشه.
حالا این کارها رو انجام بده ، ببین درست میشه ؟! من رو لوکال تست کردم ست شد.
اول: در فایل style1.css کدهاش رو پاک کن،و اینا رو جایگزین کن.

کد: (انتخاب همه)

/**
* GK Tab - style 1
* @package Joomla!
* @Copyright (C) 2009-2011 Gavick.com
* @ All rights reserved
* @ Joomla! is Free Software
* @ Released under GNU/GPL License : http://www.gnu.org/copyleft/gpl.html
* @version $Revision: GK4 1.0 $
**/

.gkTab { position: relative; }
.gkTabWrap { margin: 0 auto; }
ul.gkTabs { margin:0!important; padding: 0!important; background: url('../images/style1/bg.png') repeat-x 0 0 !important; height:42px; border: 1px solid #e8e8e8!important; border-bottom-color: #e1e1e1 !important; -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 4px; -webkit-border-radius-topleft: 4px; -webkit-border-radius-topright: 4px; border-radius-topright: 4px; }
ul.gkTabs li { list-style-type: none; position: relative; line-height: 42px !important; margin: 0 !important; padding: 0 20px!important; border: none !important; border-right: 1px solid #e3e3e3!important; background: none!important; float: left; cursor: pointer; font-weight: bold; color: #666 }
ul.gkTabs li:hover,
ul.gkTabs li.active { background: #fff !important; color: #5581b2 !important; border-bottom: 1px solid #fff !important }
ul.gkTabs li:hover:first-child,
ul.gkTabs li.active:first-child { -moz-border-radius-topleft: 4px; -webkit-border-radius-topleft: 4px; border-radius-topright: 4px; }
.gkTabContainer0 { clear: both; }
/*.gkTabContainer1 { overflow: hidden; }*/
.gkTabItem { float: left; overflow: hidden; padding: 26px 0; }
.gkTabButtonNext,
.gkTabButtonPrev { width: 18px; height: 18px; background: url('../images/style1/b_next.png') no-repeat 0 0; cursor: pointer; position: absolute; top: 43%; right: 0; text-indent:-999em; }
.gkTabButtonPrev { background: url('../images/style1/b_prev.png') no-repeat 0 0; left: 0; right:inherit; }
.gkTabButtonNext:hover,
.gkTabButtonPrev:hover { background-position: 100% 0; }
.gkTabContainer0,
.gkTabContainer1,
.gkTabContainer2 { position:relative; }
.gkTabItem { left: -999em; top: 0; width: 100%; }
.gkTabItem.active { position: static; left: 0; }

دوم : در فایل :

کد: (انتخاب همه)

modules\mod_tabs_gk4\scripts\engine.js

بجای کدهای داخلش اینا رو جایگزین کن:

کد php: (انتخاب همه)

window.addEvent('load', function(){
    $$('.gkTab').each(function(el,i){
        var module_id = el.getProperty('id');
        var $G = $Gavick['gktab-'+module_id]; 
        var tabs = el.getElements('.gkTabItem');
        var items = el.getElements('.gkTabs li');
        var animation = ($G['animation'] == 0) ? true : false;
        var currentTab = $G['active_tab'] - 1;
        var eventActivator = $G['activator'];
        var amount = tabs.length;
        var timer = false;
        var blank = false;
        var falsy_click = false;
        var animation_type = $G['animation_type'];
        var opacityFx = [];
        // prepare scroll effect
        var scrollFx = null; 
        if(animation_type == 'slider') {
            scrollFx = new Fx.Scroll(el.getElement(".gkTabContainer1"), {duration: $G['animation_speed'], wait: 'ignore', wheelStops:false, transition: $G['animation_function']});

            var sum = 0;
            
            el.getElement('.gkTabContainer0').setStyle('width', el.getElement('.gkTabContainer2 .active').getSize().x + 'px');
            
            tabs.each(function(tab, i){ 
                var size = el.getElement('.gkTabContainer2 .active').getSize().x;
                sum += size; 
                tab.setStyles({
                    'position' : 'absolute',
                    'left' : i * size + 'px',
                    'width' : size + 'px'
                });
            });
            
            el.getElement('.gkTabContainer2').setStyle('width', sum + 'px');
        }
        // initial settings for opacity animation
        if(animation_type == 'opacity') {
            tabs.each(function(tab, i){ 
                tab.setStyles({
                    'left' : 0,
                    
                    'opacity' : tab.hasClass('active') ? 1 : 0
                });
                opacityFx[i] = new Fx.Tween(tab, {property: 'opacity', duration: $G['animation_speed'], wait: 'ignore'});
            });
            // hide unnecessary tabs (with delay for the NSP module
            (function() {
                tabs.setStyle('display', 'none');
                tabs[0].setStyle('display', 'block');
            }).delay(el.getElement('.gkTabContainer2').getElement('.nspMain') ? 2000 : 0);
        }
        // add events to tabs
        items.each(function(item, i){
            
            item.addEvent(eventActivator, function(){
                if(i != currentTab) {
                    // specific operations for selected type of the animation
                    if(animation_type == 'slider') {
                        scrollFx.toElement(tabs[i]);
                    } else {
                        opacityFx[currentTab].start(0);
                        opacityFx[i].start(1);
                        // anim
                        tabs[i].setStyle('display', 'block');
                        //
                        (function(){
                            tabs.setStyle('display', 'none');
                            tabs[i].setStyle('display', 'block');    
                        }).delay($G['animation_speed']);
                    }
                    // external trigger
                    if(typeof gkTabEventTrigger !== 'undefined') {
                        gkTabEventTrigger(i, currentTab, module_id);
                    }
                    // common operations for both types of animation
                    currentTab = i;
                    if(!falsy_click) blank = true;
                    else falsy_click = false;
                    items.removeClass('active');
                    item.addClass('active');
                    if($G['cookie_save'] == 1) Cookie.write('gktab-' + module_id, i + 1, { domain: '/', duration: 256 });
                }
            });
        });
        // add events to buttons
        if(el.getElement('.gkTabButtonNext')) {
            el.getElement('.gkTabButtonNext').addEvent('click', function() {
                if(currentTab < amount - 1) items[currentTab + 1].fireEvent(eventActivator);    
                else items[0].fireEvent(eventActivator);
            });
            
            el.getElement('.gkTabButtonPrev').addEvent('click', function() {
                if(currentTab > 0) items[currentTab - 1].fireEvent(eventActivator);    
                else items[amount - 1].fireEvent(eventActivator);
            });
        }
        
        if($G["animation"] == 1){
            timer = (function(){
                if(!blank) {
                    falsy_click = true;
                    if(currentTab < amount - 1) items[currentTab + 1].fireEvent(eventActivator);    
                    else items[0].fireEvent(eventActivator);
                } else {
                    blank = false;
                }
            }).periodical($G["animation_interval"]);
        }
    });
}); 


کدهارو صددرصد تست کردم، ولی حتما قبلش از هردو فایل بکآپ بگیر. اگر آنلاین ست کنی بهتره که اگه مشکلی داشت سریع برطرف بشه.
-یاعلی

[Pourdaryaei]

مرسی بابت زحمتی که کشیدید .

من این کارو انجام دادم ، ولی الان یه فاصله خالی بیشتری ایجاد شد .
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.


تست میکنم باز نتیجه اش رو میگم
ممنونم

---

متاسفانه جواب نداد ، حتی فایل helper رو هم ویرایش کردم ولی نتیجه ش فرقی نمیکنه ؛ فقط الان کانفلیکت ماژول درست شده ولی قاط میزنه ؛ یه وقت صفحه زیرش فاصله میوفته یه وقت خالیه ...
میشه ماژولی رو که تست زدید پیوست کنید و گزینه هاش رو هم بگید چطور تنظیم کردید /

با تشکر

[ehsansabet]

سلام!
ماژول رو پیوست کردم، تنظیماتش هم پیشفرض ست کردم ، فقط تنها تفاوت اینه که محتویات تب ها رو داخل تگ div با مشخصات زیر گذاشتم:

کد: (انتخاب همه)

<div style="height:500px;min-height:500px;"
محتویات تب
</div>

فقط مقدار هر دو height رو با توجه با ارتفاع محتویاتت تنظیم کن

mod_tabs_gk4.zip
نوع فایل
دفعات دانلود	4
اندازه	47.24 کیلوبایت

[Pourdaryaei]

مرسی من این قسمت تگش رو متوجه نشدم دقیق ؛ منظورتون اینه که دوبار باید ارتفاع بدم ؟ مثلا بجای 200px بزارم 1000px,300px یا چیز دیگه ؟

میشه بیشتر توضیح بدید ، الان گیچ زدم

[ehsansabet]

وقتی داری محتویات تب رو مینویسی که محتویات شما فکر کنم جدول باشه ، به این شکل عمل میکنید :

کد: (انتخاب همه)

<div style="height:900px;min-height:900px;"
محتویات تب  اول که همون جداول و ... است بین این تگ دایو وارد کنید
</div>

و برای تب دوم که کوچیکتره :

کد: (انتخاب همه)

<div style="height:400px;min-height:400px;"
محتویات تب  دوم که همون جداول و ... است بین این تگ دایو وارد کنید
</div>