Padding list

[saynogo9999]

I have been looking at this (http://demos111.mootools.net/Fx.Styles) and i can't get it working. So i was wondering if some of you could help me get it working or see if there is a better way to create a bar like that.

[Snookerman]

You could achieve the same effect with jQuery (http://jquery.com/) but if you want help with the MooTools one:

Please post a link to the page on your site that contains the problematic script or attach your code so we can check it out.

[saynogo9999]

Yes, i need for my blog http://fluzzh.blogspot.com/. And i need it to be placed in the sidebar. Currently ive deleted it.

[Snookerman]

Add this to your the head section of your page:

<script type="text/javascript" src="http://demos111.mootools.net/demos/mootools.svn.js">
</script>
<script type="text/javascript">
window.addEvent('domready', function(){
var list = $$('#idList li');
list.each(function(element){
var fx = new Fx.Styles(element, {
duration: 200,
wait: false
});
element.addEvent('mouseenter', function(){
fx.start({
'margin-left': 5,
'background-color': '#666',
color: '#ff8'
});
});
element.addEvent('mouseleave', function(){
fx.start({
'margin-left': 0,
'background-color': '#333',
'color': '#888'
});
});
});
});
</script>
<style type="text/css">
#idList {
margin: 0;
padding: 0;
} #idList li {
display: block;
margin: 0;
padding: 4px;
width: 120px;
background: #333;
color: #888;
}
</style>
and this to the body section where you want the menu to appear:

<ul id="idList">
<li>
option 1
</li>
<li>
option 2
</li>
<li>
option 3
</li>
<li>
option 4
</li>
<li>
option 5
</li>
<li>
option 6
</li>
<li>
option 7
</li>
<li>
option 8
</li>
<li>
option 9
</li>
<li>
option A
</li>
<li>
option B
</li>
<li>
option C
</li>
<li>
option D
</li>
<li>
option E
</li>
<li>
option F
</li>
</ul>
Good luck!

[saynogo9999]

Thanks! :)

[Snookerman]

You're welcome and good luck with your site! You can go to your first post in this thread, click http://www.dynamicdrive.com/forums/images/buttons/edit.gif then Go Advanced and add the Resolved prefix to the thread title. This will let other users know the problem has been solved.

[saynogo9999]

Could i do this with a tab menu so the background image fades in??
Like:


<script src='http://demos111.mootools.net/demos/mootools.svn.js' type='text/javascript'/>
<script type='text/javascript'>
window.addEvent('domready', function(){
var list = $$('#foxmenu li');
list.each(function(element){
var fx = new Fx.Styles(element, {
duration: 200,
wait: false
});
element.addEvent('mouseenter', function(){
fx.start({
'margin-left': 0,
'background': 'url(http://www.saynogo.com/images/tabs.jpg) no-repeat top left',
});
});
element.addEvent('mouseleave', function(){
fx.start({
'margin-left': 0,
'background': 'url(http://www.saynogo.com/images/tabs.jpg) no-repeat top right',
});
});
});
});
</script>

[Snookerman]

I'm not really sure since I don't usually use MooTools. Try it out and see what happens. Just one thing that might cause you problems, don't put a comma after the last "item". So in your example, remove the highlighted:

fx.start({
'margin-left': 0,
'background': 'url(http://www.saynogo.com/images/tabs.jpg) no-repeat top right',
});

[saynogo9999]

Nope.. Can't get that working, properly something with the mootools script.. But thanks anyway :)

[Snookerman]

If you used the code you posted, you won't see any difference since you have the exact same values in both places.

[saynogo9999]

There are a difference:


element.addEvent('mouseleave', function(){
fx.start({
'margin-left': 0,
'background': 'url(http://www.saynogo.com/images/tabs.jpg) no-repeat top left',
});



element.addEvent('mouseleave', function(){
fx.start({
'margin-left': 0,
'background': 'url(http://www.saynogo.com/images/tabs.jpg) no-repeat top right',
});

http://www.saynogo.com/images/tabs.jpg

[Snookerman]

If that is all you want to do, you can accomplish that with css:

#idList {
margin: 0;
padding: 0;
} #idList li {
display: block;
margin: 0;
padding: 4px;
width: 120px;
background: #333;
color: #888;
background: url(http://www.saynogo.com/images/tabs.jpg) right;
} #idList li:hover {
background-position: left;
}

[saynogo9999]

Yes that's what i want :) but i wolud like to add the fade effect on hover.

[Snookerman]

I don't think MooTools can do that, you might have to find a plugin. Google "mootools plugings (http://www.google.com/search?hl=en&q=mootools+plugins&btnG=Google+Search&aq=0&oq=mootools+plug)", here are a few sites I found:
http://www.katodivaihe.com/index.php/mootools-plugins/ (http://www.katodivaihe.com/index.php/mootools-plugins/)
http://www.visual-blast.com/javascript/mootools-plugins-accordion-menu-rounded-corners-slideshow/ (http://www.visual-blast.com/javascript/mootools-plugins-accordion-menu-rounded-corners-slideshow/)