Pages: 12

  2008-04-10 17:55:18

shakiro214
» FTalkGeek
FTalk Level: zero
1188
0
1969-12-31

[quote][b] :ninja: Hi there. Shakiro here. you can share your j@v@$cript tricks or C$$ tricks(not layouts) here your mysp@ce profile requires a linker for these tricks to work[/b][/quote] [align=cen

I don't know if I'd know how to make one. I'm using a cbox :lol: scratch that last remark :lol: I think I can do that for you, but I'll have to work on it =| [align=center][b][color=blue]code 5.1[/color] - addbox 1.0 - JS & CSS[/b][/align] [spoiler] this can be used to add a box on the left or right side. perhaps someone could improve it :ninja: or maybe make a better one becoz the boxes only append to the bottom of either side: [b]The JS[/b] <">[b]How to use it:[/b] TTL = your title cont = your content syde = either "left" or "right" -example- [quote]example="<center>this is the content</center>" addBox("My Title",example,"left");[/quote] [b]The CSS: [/b]just edit to your desired style <">[/spoiler] [align=center][b][color=blue]code 5.2[/color] - sexy sliding menu - JS & CSS[/b][/align] [spoiler][b]this trick has evolved just now:[/b] I've included some javascript to improve the positioning so that the sexy tab stays on the page even after you've scrolled down [b]Sexy profile in 5 steps[/b] :cool: :thumbsup: Works in IE, FF & Opera. [b]Screenshot:[/b] [img]http://h1.ripway.com/shakiro/images/sidebar.JPG[/img] [b]Preview: [url=http://www.myspace.com/shakiro214][sub]+rep me[/sub][/url][/b] [b]Step 1:[/b] Download this [url=http://www.andrewsellick.com/examples/sliding-side-bar/sliding-side-bar.rar]winrar file[/url] [quote][b]contents:[/b] * mootools.js * side-bar.js * index.html (the original example of the code) * some default images for the tab[/quote] [b]Step 2:[/b] upload [color=green][b]mootools.js[/b][/color] and [color=blue][b]side-bar.js[/b][/color] [b]Step 3:[/b] create a subfolder which you will call [b]images[/b], to hold the tab images & background You can upload and save these 3 images to replace the defaults found in the winrar file: [quote]:arrow: [img]http://h1.ripway.com/shakiro/images/background.gif[/img] [b]background.gif[/b] * this has a transparent left area, so that you won't see a white space below the tab :arrow: [img]http://h1.ripway.com/shakiro/images/slide-button.gif[/img] [b]slide-button.gif[/b] * inactive tab - dark grey and blue w/ transparent corners :arrow: [img]http://h1.ripway.com/shakiro/images/slide-button-active.gif[/img] [b]slide-button-active.gif[/b] * active tab - dark grey and blue w/ transparent corners [align=center]** save as the same names in bold[/align][/quote] [b]Step 4:[/b] copy & paste this code into your js <">[b]Now:[/b] Edit the paths to [color=green][b]mootools.js[/b][/color], [color=blue][b]side-bar.js[/b][/color], and [color=red][b]slide-button.gif[/b][/color] for the image in the [b]sexy[/b] var [b]Also:[/b] Edit the links and hrefs for your menu. They are in the [b]sexy[/b] variable :wow: [b]You can:[/b] add or remove as many links as you want. just follow the following format for each link: [quote]<li><a href="#">Link One</a></li>[/quote] [b]The 5th & Final Step:[/b] :arrow: The CSS * insert the following body style into your CSS: [quote]body { [b]position:relative; padding:0px;[/b] }[/quote] * but if you already have a body style in your CSS, just insert this part into it [quote][b]position:relative; padding:0px;[/b][/quote] * copy & insert this anywhere in your style sheet(CSS): <">[b]Btw:[/b] if your [b]background.gif[/b] is not in subfolder "images", then you will have to specify the complete url in the CSS by changing background-image:url([b]images/background.gif[/b]) :retard: [b]Also:[/b] if you want your links to have a different background color, change the [b]#33ccff[/b] too [b]That's it! You're done :cool: :thumbsup: Preview: [url=http://www.myspace.com/shakiro214][sub]+rep me[/sub][/url] credits: [url=http://www.andrewsellick.com/35/sexy-sliding-javascript-side-bar-menu-using-mootools]www.andrewsellick.com[/url] - for the script me - for profile integration [img]http://h1.ripway.com/shakiro/69.gif[/img][/b][/spoiler] [align=center][b][color=blue]code 5.3[/color] - warped number of friends[/b][/align] [b]the effect:[/b] your total no. of friends will appear to be increasing by 1 for every second that goes by. It's fake of course :eh: :thumbsup: but I like it. [b][color=red]7[/color][/b] is the default starting of the count ;) bcoz that's how many friends I have right now :wasted: To change the starting number, just edit the number for [b]warpit[/b] :cool: :thumbsup: <">

Last edited by shakiro214 (2008-04-11 04:14:56)

Pages: 12

Board footer

© 2024 F Talk

Current time is 14:37

[ 12 queries - 0.012 second ]
Privacy Policy