+- پارس جوم :: انجمن های تخصصی جوملا (https://forums.parsjoom.ir)
+-- انجمن: پشتیبانی (/forum-70.html)
+--- انجمن: مباحث و مشکلات عمومی (/forum-33.html)
+--- موضوع: تنظیم ارتفاع تب ساز گاویک (/thread-5352.html)
صفحهها: 1 2
تنظیم ارتفاع تب ساز گاویک - 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 تا بصورت اتوماتیک ارتفاع رو تنظیم کنه ولی مشکلی که پیش میاد اینه که با جاوا قاطی میکنه و ماژولهای توی تب رو نمایش نمیده
RE: تنظیم ارتفاع تب ساز گاویک - ابوالفضل حیدری - ۱۴-۱-۱۳۹۱ ۰۳:۴۳ عصر
درود
این کدها رو کلاً با کدهای فایل این مسیر جایگزین کن که ماژولت راست چین بشه:
کد:
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;
}RE: تنظیم ارتفاع تب ساز گاویک - Pourdaryaei - ۱۴-۱-۱۳۹۱ ۱۰:۱۰ عصر
مرسی بابت css راست چین ، ولی اینجا همون چپ چین نیاز دارم ، مشکل اصلیم ارتفاع ماژول تب ساز هست ؛ که یا باید باهاش بسازم یا از یه تب ساز دیگه استفاده کنم .
توی قسمت تنظیمات پیشرفته ماژول استفاده از اسکریپت رو غیرفعال کردم ، ولی فرقی نداره باز همون اتوماتیک رو که میگذاری صفحه بعد یه لحظه ناپدید میشه .
این مشکل رو از خیلی وقت داره ، قرار بود توی نسخه 1.5 این قابلیت اضافه بشه که الان 1.7 هست و هنوز مشکل رو حل نکردند ...
RE: تنظیم ارتفاع تب ساز گاویک - ehsansabet - ۱۴-۱-۱۳۹۱ ۱۱:۳۷ عصر
سلام!
جناب پوردریائی ، واسم بفرستین تا ببینم میشه درستش کرد یا نه.
RE: تنظیم ارتفاع تب ساز گاویک - Pourdaryaei - ۱۵-۱-۱۳۹۱ ۰۱:۲۶ صبح
مرسی از لطفتون ؛ ماژول رو پیوست ارسال میکنم
RE: تنظیم ارتفاع تب ساز گاویک - 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"]);
}
});
});
کدهارو صددرصد تست کردم، ولی حتما قبلش از هردو فایل بکآپ بگیر. اگر آنلاین ست کنی بهتره که اگه مشکلی داشت سریع برطرف بشه.
-یاعلی
RE: تنظیم ارتفاع تب ساز گاویک - Pourdaryaei - ۱۵-۱-۱۳۹۱ ۰۷:۲۵ صبح
مرسی بابت زحمتی که کشیدید .
من این کارو انجام دادم ، ولی الان یه فاصله خالی بیشتری ایجاد شد .
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
تست میکنم باز نتیجه اش رو میگم
ممنونم
متاسفانه جواب نداد ، حتی فایل helper رو هم ویرایش کردم ولی نتیجه ش فرقی نمیکنه ؛ فقط الان کانفلیکت ماژول درست شده ولی قاط میزنه ؛ یه وقت صفحه زیرش فاصله میوفته یه وقت خالیه ...
میشه ماژولی رو که تست زدید پیوست کنید و گزینه هاش رو هم بگید چطور تنظیم کردید /
با تشکر
RE: تنظیم ارتفاع تب ساز گاویک - ehsansabet - ۱۵-۱-۱۳۹۱ ۰۵:۱۴ عصر
سلام!
ماژول رو پیوست کردم، تنظیماتش هم پیشفرض ست کردم ، فقط تنها تفاوت اینه که محتویات تب ها رو داخل تگ div با مشخصات زیر گذاشتم:
کد:
<div style="height:500px;min-height:500px;"
محتویات تب
</div>[attachment=3827]
RE: تنظیم ارتفاع تب ساز گاویک - Pourdaryaei - ۱۵-۱-۱۳۹۱ ۱۰:۱۹ عصر
مرسی من این قسمت تگش رو متوجه نشدم دقیق ؛ منظورتون اینه که دوبار باید ارتفاع بدم ؟ مثلا بجای 200px بزارم 1000px,300px یا چیز دیگه ؟
میشه بیشتر توضیح بدید ، الان گیچ زدم
RE: تنظیم ارتفاع تب ساز گاویک - ehsansabet - ۱۵-۱-۱۳۹۱ ۱۰:۲۵ عصر
وقتی داری محتویات تب رو مینویسی که محتویات شما فکر کنم جدول باشه ، به این شکل عمل میکنید :
کد:
<div style="height:900px;min-height:900px;"
محتویات تب اول که همون جداول و ... است بین این تگ دایو وارد کنید
</div>کد:
<div style="height:400px;min-height:400px;"
محتویات تب دوم که همون جداول و ... است بین این تگ دایو وارد کنید
</div>