Joomla Templates Club 406,261 posts

[guru2085 Friend guru2085Join date: March 2008Posts: 50Downloads:0Uploads:1 Thanks: 9]

#127029

oka everybody i have setup the modules by adding a few codes in the index.php and the temp.css anyways check my site out http://www.xtrahype.com/main

-i am having issue with lining up the modules i want the user 1 and user 2 which is gossips and popular news to be side by side like a bookshelf, i have tried so many times. here is what i did to setup the file in the index.php

<?php if (mosCountModules(‘user1’) or mosCountModules(‘user2’)) : ?>
<div id=”ja-topmodules” class=”spacer<?php echo $topmod_width; ?>”>
<?php if (mosCountModules(‘user1’)) : ?>
<div class=”ja-topmodules”>
<?php mosLoadModules(‘user1’,-2); ?>
</div>
<?php endif; ?>
<?php if (mosCountModules(‘user2’)) : ?>
<div class=”ja-topmodules”>
<?php mosLoadModules(‘user2’,-2); ?>
</div>
<?php endif; ?>
</div>
<?php endif; ?>
</div>

i did this then went into the css to style it here is what is in the css

#ja-topmodules {
float: left;
clear: both;
display: block;
margin: 0px;
padding: 5px 0px;
width: 40%;
}

that part is the the ja-topmodules user1 and user2 mods.

anyonei need your assistant as it is urgent thanks in advance

[Menalto Friend MenaltoJoin date: May 2007Posts: 4736Downloads:0Uploads:43 Thanks: 2 Thanked: 531 times in 361 posts]

#243442

You can try the following and see if it helps out.
First add this in the css file.


#ja-topmodules {
width: 100%;
}
#ja-1{
overflow:hidden;
text-align:left;
float:left;
}
#ja-2{
text-align:left;
float:left;
overflow:hidden;
}

In the index.php:


<?php if (mosCountModules('user1') || mosCountModules('user2')) { ?>
<div id="ja-topmodules">
<?php if (mosCountModules('user1')) { ?>
<div id="ja-1" style="width:<?php echo $topwidth ?>;">
<?php mosLoadModules('user1',-2);?>
</div>
<?php } ?>
<?php if (mosCountModules('user2')) { ?>
<div id="ja-2" style="width:<?php echo $topwidth ?>;">
<?php mosLoadModules('user2',-2);?>
</div>
<?php } ?>
</div>
<?php } ?>

At the top of the index.php file you need to add this:


$top = 0;
if (mosCountModules('user1')) $top++;
if (mosCountModules('user2')) $top++;
if ( $top == 2 ) {
$topmod_width = '49.5%';
} else if ($top == 1) {
$topmod_width = '100%';
}

[guru2085 Friend guru2085Join date: March 2008Posts: 50Downloads:0Uploads:1 Thanks: 9]

#243526

i did this step but there not lining up how they suppose to

[guru2085 Friend guru2085Join date: March 2008Posts: 50Downloads:0Uploads:1 Thanks: 9]

#243630

i did this step but there still not lining up please i nned this to work it looks like the template needs to be wider for it to lineup, everytime i refresh the page u can see that it looks like it would be there but after refresh it falls right under the other modules

[guru2085 Friend guru2085Join date: March 2008Posts: 50Downloads:0Uploads:1 Thanks: 9]

#243632

i got it now to work, take a lok http://www.xtrahype.com/main

[Menalto Friend MenaltoJoin date: May 2007Posts: 4736Downloads:0Uploads:43 Thanks: 2 Thanked: 531 times in 361 posts]

#243639

One thing, remove the footer links that says “Designed by XtraHype.com” and ” Template by Xtra Hype Inc!”
This is against the Terms of use just so you know it

1 user says Thank You to Menalto for this useful post

1. guru2085

[guru2085 Friend guru2085Join date: March 2008Posts: 50Downloads:0Uploads:1 Thanks: 9]

#243653

<em>@Menalto 46423 wrote:</em><blockquote>One thing, remove the footer links that says “Designed by XtraHype.com” and ” Template by Xtra Hype Inc!”
This is against the Terms of use just so you know it</blockquote>
sorry bot that i was gonna changed it, thanks for reminding me tho…

[Menalto Friend MenaltoJoin date: May 2007Posts: 4736Downloads:0Uploads:43 Thanks: 2 Thanked: 531 times in 361 posts]

#243656

You still didnt manage to get the rockflow thingy working?

[guru2085 Friend guru2085Join date: March 2008Posts: 50Downloads:0Uploads:1 Thanks: 9]

#243675

<em>@Menalto 46443 wrote:</em><blockquote>You still didnt manage to get the rockflow thingy working?</blockquote>

am still working on it here, i didn’t get it up correctly still trying to figure out why the mootools.js and rokflow. js is not flowing the flyers. i was wondering if the rokflow flyering would be better with another script, but it doesn’t make any difference. i have the template with the latest mootools in it,… still trying, i will let u guys know what i did to make it work when i do… i hope u guys can implement it in your next templates,… if you go to this link http://www.xtrahype.com/xhype. you can see it flowing on that template, i get busy at times, and am readin line by line in that template so i can convert it into joomlart template..if u find anything on it let me know

the site has three erros in it, i have fire bug here are the errors..

Class is not defined
[Break on this error] var RokFlow = new Class({

unexpected end of XML source
[Break on this error]
Itemid,1 (line 46)

Fx.Flow is not a constructor
initialize(“rokflow”, undefined)rokflow.js (line 37)
Class()mootools-release-… (line 16)
(no name)()Itemid,1 (line 288)
[Break on this error] RokZoom: this.options.RokZoom

i cleaned up the other errors the only error am having now is
Fx.Flow is not a constructor
initialize(“rokflow”, undefined)rokflow.js (line 37)
Class()mootools-release-… (line 16)
(no name)()Itemid,1 (line 308)
[Break on this error] RokZoom: this.options.RokZoom
i have jxcore plugin installed so the site is now mootools based.. i have to get the rokflow to see the mootools script

[guru2085 Friend guru2085Join date: March 2008Posts: 50Downloads:0Uploads:1 Thanks: 9]

#243683

here is the rokflow.js script

/*
Script: RokFlow.js

Author:
Olmo Maldonado, <http://olmo-maldonado.com/&gt;

License:
MIT
*/

var RokFlow = new Class({

options: {
show: 5,
mouseAcceleration: Fx.Transitions.Cubic.easeIn,
constantAt: 0,
rate: 50,
arrows: false,
loader: ‘loader’,
RokZoom: true,
flow: {
shrink: 0.25,
spacing: 25,
duration: 1000
}
},

initialize: function(holder, options) {
this.setOptions(options);

if(this.options.loader) $(this.options.loader).remove();
this.holder = $(holder).setStyle(‘background-image’, ‘none’);

this.build();

this.flow = new Fx.Flow(this.container.getFirst(), $merge(this.options.flow, {
RokZoom: this.options.RokZoom
})).moveTo(1, this.options.show);

this.setEvents();
},

build: function() {
this.middle = this.holder.getCoordinates().left + this.holder.offsetWidth / 2;
this.max = this.compute(this.options.constantAt);
this.options.rate *= (window.webkit) ? 0.5 : 1;

var children = this.holder.getChildren();
var trash;
children.each(function(el) {
trash = new Element(‘h3’).setHTML(el.getElement(‘img’).title || ‘ ‘).injectTop(el);
});

this.container = new Element(‘div’).setStyles({
‘width’: this.holder.offsetWidth,
‘height’: this.holder.offsetHeight,
‘overflow’: ‘hidden’
}).adopt(new Element(‘div’).adopt(children)).inject(this.holder);

this.holder.setStyles({
‘overflow’: ‘hidden’,
‘cursor’: ‘default’
});

this.buildArrows();
},

setEvents: function() {
this.moveEvents = {
mousemove: function(e) {
e = new Event(e);
this.flow.move(((e.client.x < this.middle) ? 1 : -1) * (this.options.rate * this.compute(e.client.x).limit(0, this.max)) | 0);

if(this.delay) $clear(this.delay);
this.delay = (function() {
this.container.fireEvent(‘mousemove’, [e]);
}).delay(30, this);
}.bind(this),

mouseleave: function() {
$clear(this.delay);
}.bind(this)
};

this.container.addEvents(this.moveEvents);

if(this.options.arrows) {
this.larrow.addEvents({
‘click’: this.flow.moveLeft.bind(this.flow),
‘mouseenter’: function() {
if(!this.hasClass(‘hover’)) this.addClass(‘hover’);
},
‘mouseleave’: function() {
if(this.hasClass(‘hover’)) this.removeClass(‘hover’);
}
});

this.rarrow.addEvents({
‘click’: this.flow.moveRight.bind(this.flow),
‘mouseenter’: function() {
if(!this.hasClass(‘hover’)) this.addClass(‘hover’);
},
‘mouseleave’: function() {
if(this.hasClass(‘hover’)) this.removeClass(‘hover’);
}
});
}

if(this.options.flow.RokZoom && RokZoom) {
RokZoom.addEvents({
‘onClick’: function() {
this.container.removeEvent(‘mousemove’, this.moveEvents.mousemove);
}.bind(this),

‘onClose’: function() {
this.container.addEvent(‘mousemove’, this.moveEvents.mousemove);
}.bind(this)
});
}
},

compute: function(pos) {
return this.options.mouseAcceleration(Math.abs(pos – this.middle) / this.middle);
},

buildArrows: function() {
if(this.options.arrows) {
this.larrow = new Element(‘div’, {
‘class’: ‘arrow left’
}).adopt(
new Element(‘a’, {
‘href’: ‘#’
}).setHTML(‘&larr’)
).injectTop(this.holder);

this.rarrow = this.larrow.clone().set({ ‘class’: ‘arrow right’ }).inject(this.holder);
this.holder.adopt(new Element(‘div’, { styles: { clear: ‘both’ }}));
this.rarrow.getElement(‘a’).setHTML(‘→’);
this.container.setStyles({
‘width’: this.holder.offsetWidth – 2 * this.larrow.offsetWidth
});
}
}

});

RokFlow.implement(new Options, new Events);

Fx.Flow = Fx.Elements.extend({

options: {
RokZoom: false,
shrink: 0.50,
offset: 60,
axis: 0.5,
spacing: 25,
transition: Fx.Transitions.linear,
wait: false
},

initialize: function(el, options) {
this.options = $merge(this.options, options);

this.container = el.getParent();
this.count = el.childNodes.length;

this.setup(el, options);

this.lefts = [];
this.elements.each(function(el, i) {
this.lefts = (this.elements[1].getLast().offsetLeft + this.elements[1].getLast().offsetWidth) * (i – 1);
el.set({
id: ‘flow-‘ + i,
styles :{
‘position’: ‘absolute’,
‘left’: this.lefts
}
});
}, this);

this.middle = this.container.offsetWidth / 2;
this.right = this.container.offsetLeft + this.container.offsetWidth;
this.move(0);

this.current = [1,0];
},

setup: function(el, options) {
this.min = [];
this.diff = [];
this.imgs = el.getElements(‘img’);
this.imgWidth = this.imgs[0].offsetWidth;

this.imgs.each(function(img, i) {
var max = {
‘width’: img.offsetWidth,
‘height’: img.offsetHeight
};

this.min = {
width: max.width * this.options.shrink,
height: max.height * this.options.shrink
};

this.diff = {
width: max.width – this.min.width,
height: max.height – this.min.height
};
img.setStyles(this.min);
}, this);

this.divs = el.getChildren();
this.count = this.divs.length;

this.divs.each(function(child, i) {
child.setStyles({
‘position’: ‘absolute’,
‘left’: child.offsetWidth * i,
‘top’: this.container.offsetHeight * this.options.axis – child.offsetHeight / 2 + 0.5 * this.options.offset
});
}, this);

this.elements = ;
this.container.adopt(this.elements[1], this.elements[2]);
this.parent(this.elements, options);
this.spacing();

this.imgs.each(function(img, i) {
this.min.left = img.offsetLeft;
this.min.top = el.childNodes.offsetTop;
}, this);

if(this.options.RokZoom && RokZoom) {
this.container.getElements(‘a’).each(function(a) {
a.rel = ‘rokzoom’;
});

RokZoom.getLinks();
}
},

moveTo: function(index, to) {
var that = this,
parsed = {},
divs = this.elements.childNodes,
by = this.middle – (this.elements.offsetLeft + divs.offsetLeft + 0.5 * (this.diff.width + this.min.width));

(3).times(function(i) {
parsed = {
left: [ that.elements.offsetLeft, that.elements.offsetLeft + by]
};
});

this.start(parsed);
this.current = ;

return this;
},

moveLeft: function() {
this.current[1]–;
if(this.current[1] < 0) {
this.current[1] += this.count;

}

return this.moveTo.apply(this, this.current);
},

moveRight: function() {
this.current[1]++;
if(this.current[1] >= this.count) {
this.current[1] -= this.count;

}

return this.moveTo.apply(this, this.current);
},

move: function(by) {
var parsed = {},
that = this;

(3).times(function(i) {
parsed = {
left: that.elements.offsetLeft + (isNaN(by) ? 0 : by)
};
});

this.set(parsed);
},

reset: function() {
var parsed = {},
that = this;

(3).times(function(i) {
parsed = {
left: that.lefts
};
});

this.set(parsed);
},

increase: function() {
this.parent();

this.carousel();
this.grow();
this.spacing();
},

carousel: function() {
var div,
left = 1.5 * this.elements[0].offsetLeft + 0.5 * (this.elements[0].getLast().offsetLeft + this.elements[0].getLast().offsetWidth),
right = 1.5 * this.elements[2].offsetLeft + 0.5 * (this.elements[2].getLast().offsetLeft + this.elements[2].getLast().offsetWidth);

if(left > this.container.offsetLeft) {
div = this.elements.pop();
div.setStyle(‘left’, this.elements[0].offsetLeft – div.getLast().offsetLeft + div.getLast().offsetWidth);
this.elements = .concat(this.elements);

} else if(right < this.right) {
div = this.elements.shift();
div.setStyle(‘left’, this.elements[1].offsetLeft + length);
this.elements.push(div);
}
},

grow: function() {
var growth,
changeX,
changeY,
divs,
curPos,
off = (this.elements[1].offsetLeft < 0) ? 1 : 0,
that = this;

(2).times(function(i) {
i += off;
divs = that.elements.childNodes;

that.elements.getElements(‘img’).each(function(img, j) {
curPos = that.elements.offsetLeft + divs[j].offsetLeft + img.offsetWidth / 2;

if(curPos > 0 && curPos < that.right) {
growth = that.growth(curPos);
changeX = that.diff[j].width * growth;
changeY = that.diff[j].height * growth;

img.setStyles({
‘width’: that.min[j].width + changeX,
‘height’: that.min[j].height + changeY
});

divs[j].setStyles({
‘left’: that.min[j].left – changeX / 2,
‘top’: that.min[j].top – changeY / 2
});

divs[j].getElement(‘h3’).setStyles({
‘width’: that.min[j].width + changeX
});

}
});
});
},

spacing: function() {
var divs,
that = this;
var B, A, D;
(3).times(function (i) {
divs = that.elements.childNodes;
that.elements.getElements(‘img’).each(function(img, j) {
A = divs[j];

if(j > 0) {
B = divs[j – 1];
B.setStyles({
‘left’: A.offsetLeft – (that.options.spacing + B.offsetWidth)
});
}

if(j < that.count – 1) {
D = divs[j + 1];
D.setStyles({
‘left’: that.options.spacing + A.offsetLeft + A.offsetWidth
});
}
});
});

B = this.elements[0];
A = this.elements[1];
D = this.elements[2];

B.setStyles({
‘left’: A.offsetLeft – (2 * that.options.spacing + B.getLast().offsetLeft + B.getLast().offsetWidth)
});

D.setStyles({
‘left’: A.offsetLeft + 2 * that.options.spacing + A.getLast().offsetLeft + A.getLast().offsetWidth
});

},

growth: function(pos) {
return ((pos < this.middle) ?
this.options.transition(pos / this.middle) :
1 – this.options.transition((pos – this.middle) / this.middle)).limit(0, Infinity);
}

});

[Author]

Posts