Permisi buat moderator untuk sharing Sebenarnya saya cuma modifikasi dari thread [url=http://theftalk.com/t21022-floating-objects-left-side-%28JS%29.html]floating objectnya[/url] Shakiro Disini
You are viewing a post by strezzpc. View all 56 posts in Permisi buat moderator untuk sharing Sebenarnya saya cuma modifikasi dari thread [url=http://theftalk.com/t21022-floating-objects-left-side-%28JS%29.html]floating objectnya[/url] Shakiro Disini.
2008-08-19 13:32:17
- strezzpc
- » FTalkFreak
1691
0
1969-12-31
Permisi buat moderator untuk sharing Sebenarnya saya cuma modifikasi dari thread [url=http://theftalk.com/t21022-floating-objects-left-side-%28JS%29.html]floating objectnya[/url] Shakiro Disini
Permisi buat moderator untuk sharing
Sebenarnya saya cuma modifikasi dari thread [url=http://theftalk.com/t21022-floating-objects-left-side-%28JS%29.html]floating objectnya[/url] Shakiro
Disini saya pake untuk floating accordion menu
Screenshoot :
[spoiler][img]http://img80.imageshack.us/img80/3825/accordiontu3.jpg[/img][/spoiler]
[url=http://profiles.friendster.com/12851239]Live preview[/url]
[url=http://www.freewebtown.com/strezzpc/preview/preview_acdmenu.html]HTML preview[/url]
Credit : [url=http://profiles.friendster.com/shakiroShakiro]Shakiro[/url]
[url=http://www.dynamicdrive.com/]dynamicdrive[/url]
Langkah pertama :
Buat file js baru, dengan nama terserah kamu. contoh : [b]accordcontent.js [/b]
Yg berisi
<">Lalu injectkan kedalam JS utama kamu, letakkan di bagian A (sesuai [url=http://theftalk.com/t15339-%7BTUTORIAL%7D-Kombinasi-JS-dan-WVM-%2B-Addbox-%28UPDATE-08-03-08%29.html]tutorial bang Kanal[/url])
[quote]//ACCORDIONT CONTENT
var myjs = document.createElement("script");
myjs.type = "text/javascript";
myjs.src = "[color=green]URL_ACCORDCONTENT_KAMU[/color]";
document.getElementsByTagName("head")[0].appendChild(myjs);[/quote]
[color=green]URL_ACCORDCONTENT_KAMU[/color] adalah url dari file [b]accordcontent.js[/b] yg baru kamu buat
Langkah berikutnya, masukkan script ini di bagian C (sesuai [url=http://theftalk.com/t15339-%7BTUTORIAL%7D-Kombinasi-JS-dan-WVM-%2B-Addbox-%28UPDATE-08-03-08%29.html]tutorial bang Kanal[/url])
[spoiler]//FLOATING ACCORDION MENU
floataccord="<div id='divStayTopLeft' style='position:absolute;z-index:50;'><div class='glossymenu'>"+
"<a class='menuitem' href='http://www.friendster.com/'>Home</a>"+
"<a class='menuitem submenuheader' href='http://www.friendster.com/user.php' >My Profile</a>"+
"<div class='submenu'>"+
"<ul><li><a href='http://www.friendster.com/editprofile.php'>Edit Profile</a></li>"+
"<li><a href='http://www.friendster.com/friends.php/ID_FS_KAMU'>My Friends</a></li>"+
"<li><a href='http://www.friendster.com/photos/ID_FS_KAMU'>My Photos</a></li>"+
"<li><a href='http://www.friendster.com/messages.php'>Messages</a></li>"+
"<li><a href='http://www.friendster.com/editaccount.php'>Settings</a></li>"+
"<li><a href='http://www.friendster.com/gallery.php'>Search</a></li>"+
"<li><a href='http://www.friendster.com/widget_myapps.php'>Applications</a></li></ul>"+
"</div>"+
"<a class='menuitem submenuheader' href='http://www.friendster.com/friends.php'>My Connections</a>"+
"<div class='submenu'>"+
"<ul><li><a href='http://www.friendster.com/friends.php'>Friends</a></li>"+
"<li><a href='http://www.friendster.com/schools.php'>Schools</a></li>"+
"<li><a href='http://www.friendster.com/bookmarks.php'>Bookmarks</a></li>"+
"<li><a href='http://www.friendster.com/group/mygroup.php'>Groups</a></li>"+
"</div>"+
"<a class='menuitem submenuheader' href='http://www.friendster.com/explore.php'>Explore</a>"+
"<div class='submenu'>"+
"<ul><li><a href='http://www.friendster.com/userlist.php?list=newusers'>People</a></li>"+
"<li><a href='http://www.friendster.com/photolist.php?list=mostrecent'>Photos</a></li>"+
"<li><a href='http://www.friendster.com/video.php'>Videos</a></li>"+
"</div>"+
"<a class='menuitem submenuheader' href='http://theftalk.com'>My Credits</a>"+
"<div class='submenu'>"+
"<ul><li><a href='http://theftalk.com' target='_blank'>Friendstertalk.com</a></li>"+
"<li><a href='http://ripway.com/' target='_blank'>Ripway.com</a></li>"+
"<li><a href='http://www.myflashfetish.com/' target='_blank'>Myflashfetish.com</a></li>"+
"<li><a href='http://dynamicdrive.com/' target='_blank'>Dynamicdrive.com</a></li>"+
"<li><a href='http://www.slide.com/' target='_blank'>Slide.com</a></li>"+
"<li><a href='http://www.photobucket.com/' target='_blank'>Photobucket.com</a></li>"+
"<li><a href='http://www.cbox.ws/' target='_blank'>Cbox.ws</a></li>"+
"</div>"+
"<a class='menuitem' href='http://www.friendster.com/logout.php' style='border-bottom-width: 0'>Log Out</a>"+
"</div></div>";
flow=document.getElementById('flo_wrapper');
river=document.createElement("div");
river.innerHTML=floataccord;
flow.parentNode.insertBefore(river,flow);
//in this part you can change it into "frombottom" or "fromtop"
var verticalpos="fromtop"
function BoyantDiv()
{
var startX = 20;
var startY = 170;
function ml(id)
{
if (document.getElementById)
{
var wek=document.getElementById(id);
}
else if (document.all)
{
var wek=document.all[id];
}
else
{
var wek=document.layers[id];
}
if(document.layers)
{
wek.style=wek;
}
wek.sP = function(x,y) {shino(x,y);};
function shino(x,y)
{
wek.style.left=x;
wek.style.top=y;
}
wek.x = startX;
if (verticalpos=="fromtop")
{
wek.y = startY;
}
else{
if (navigator.appName.indexOf("Netscape") != -1)
{
wek.y = pageYOffset + innerHeight;
}
else
{
wek.y = document.body.scrollTop + document.body.clientHeight;
}
wek.y -= startY;
}
return wek;
}
window.stayTopLeft = function () {boyant();};
function boyant()
{
if (verticalpos=="fromtop"){
if (navigator.appName.indexOf("Netscape") != -1)
{
var tenten = pageYOffset;
}
else
{
var tenten = document.body.scrollTop;
}
ftlObj.y += (tenten + startY - ftlObj.y)/8;
}
else{
if (navigator.appName.indexOf("Netscape") != -1)
{
var tenten = pageYOffset + innerHeight;
}
else
{
var tenten = document.body.scrollTop + document.body.clientHeight;
}
ftlObj.y += (tenten - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
wakoko=setTimeout("stayTopLeft()", 50);
}
ftlObj = ml("divStayTopLeft");
stayTopLeft();
}
BoyantDiv();[/spoiler]
Edit ID_FS_KAMU dengan ID FS kamu sendiri
Langkah terakhir masukkan code ini kedalam css kamu :
[spoiler]/* fLoating accordiont styLe */
.glossymenu{
margin: 5px 0;
padding: 0;
width: 170px; /*width of menu*/
border: 1px solid #9A9A9A;
border-bottom-width: 0;
}
.glossymenu a.menuitem{
background: black url([i]http://i264.photobucket.com/albums/ii200/strezzpc/glossyback.gif[/i]) repeat-x bottom left;
font: bold 14px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: white; text-align:left;
display: block;
position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
width: auto;
padding: 4px 0;
padding-left: 10px;
text-decoration: none;
}
.glossymenu a.menuitem:visited, .glossymenu .menuitem:active{
color: white;
}
.glossymenu a.menuitem .statusicon{ /*CSS for icon image that gets dynamically added to headers*/
position: absolute;
top: 5px;
right: 5px;
border: none;
}
.glossymenu a.menuitem:hover{
background-image: url([i]http://i264.photobucket.com/albums/ii200/strezzpc/glossyback2.gif[/i]);
}
.glossymenu div.submenu{ /*DIV that contains each sub menu*/
background: white;
}
.glossymenu div.submenu ul{ /*UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0;
}
.glossymenu div.submenu ul li{
border-bottom: 1px solid blue;
}
.glossymenu div.submenu ul li a{
display: block;
font: normal 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: black; text-align:left;
text-decoration: none;
padding: 2px 0;
padding-left: 10px;
}
.glossymenu div.submenu ul li a:hover{
background: #E2EDFA;
colorz: white;
}[/spoiler]
[i]
[u]Keterangan :[/u][/i]
[li]Untuk merubah image header, rubah di cssnya bagian [/li]
[quote].glossymenu a.menuitem{
background: black url([color=red]http://i264.photobucket.com/albums/ii200/strezzpc/glossyback.gif[/color]) repeat-x bottom left;
font: bold 14px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: white; text-align:left;
display: block;
position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
width: auto;
padding: 4px 0;
padding-left: 10px;
text-decoration: none;
}[/quote]
dan
[quote].glossymenu a.menuitem:hover{
background-image: url([color=red]http://i264.photobucket.com/albums/ii200/strezzpc/glossyback2.gif[/color]);
}[/quote]
[li]Untuk merubah image plus dan minus, cari di file [b]accordcontent.js[/b] bagian yg ini :[/li]
[quote]togglehtml: ["suffix", "<img src='[color=blue]http://i264.photobucket.com/albums/ii200/strezzpc/plusplus.gif[/color]' class='statusicon' />", "<img src='[color=blue]http://i264.photobucket.com/albums/ii200/strezzpc/minus.gif[/color]' class='statusicon' />"], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)[/quote]
[li]Untuk menambahkan menu, sisipkan bagian ini :[/li]
[quote]<a class='menuitem submenuheader' href='URL_YG DITUJU'>JUDUL_MENU</a>"+
"<div class='submenu'>"+
"<ul><li><a href='URL_YG DITUJU'>JUDUL_SUB_MENU</a></li>"+
"<li><a href='URL_YG DITUJU'>JUDUL_SUB_MENU</a></li>"+
"<li><a href='URL_YG DITUJU'>JUDUL_SUB_MENU</a></li>"+
"</div>[/quote]
Semoga bisa dimengerti, silahkan untuk berkreasi sendiri dan selamat mencoba
[hr]
Ini tambahan buat [color=red]image headernya[/color] :
[spoiler][img]http://i264.photobucket.com/albums/ii200/strezzpc/header/glossyback.gif[/img] [img]http://i264.photobucket.com/albums/ii200/strezzpc/header/glossyback2.gif[/img]
[img]http://i264.photobucket.com/albums/ii200/strezzpc/header/glossybackblack.gif[/img] [img]http://i264.photobucket.com/albums/ii200/strezzpc/header/glossybackblack2.gif[/img]
[img]http://i264.photobucket.com/albums/ii200/strezzpc/header/glossybackred.gif[/img] [img]http://i264.photobucket.com/albums/ii200/strezzpc/header/glossybackred2.gif[/img][/spoiler]
Untuk icon [color=blue]plus minus[/color]
[img]http://i264.photobucket.com/albums/ii200/strezzpc/plusplus.gif[/img] [img]http://i264.photobucket.com/albums/ii200/strezzpc/minus.gif[/img]
[url=http://profiles.friendster.com/12851239]Live preview[/url]
[url=http://www.freewebtown.com/strezzpc/preview/preview_acdmenu.html]HTML preview[/url]
Credit : [url=http://profiles.friendster.com/shakiroShakiro]Shakiro[/url]
[url=http://www.dynamicdrive.com/]dynamicdrive[/url]
Langkah pertama :
Buat file js baru, dengan nama terserah kamu. contoh : [b]accordcontent.js [/b]
Yg berisi
<">Lalu injectkan kedalam JS utama kamu, letakkan di bagian A (sesuai [url=http://theftalk.com/t15339-%7BTUTORIAL%7D-Kombinasi-JS-dan-WVM-%2B-Addbox-%28UPDATE-08-03-08%29.html]tutorial bang Kanal[/url])
[quote]//ACCORDIONT CONTENT
var myjs = document.createElement("script");
myjs.type = "text/javascript";
myjs.src = "[color=green]URL_ACCORDCONTENT_KAMU[/color]";
document.getElementsByTagName("head")[0].appendChild(myjs);[/quote]
[color=green]URL_ACCORDCONTENT_KAMU[/color] adalah url dari file [b]accordcontent.js[/b] yg baru kamu buat
Langkah berikutnya, masukkan script ini di bagian C (sesuai [url=http://theftalk.com/t15339-%7BTUTORIAL%7D-Kombinasi-JS-dan-WVM-%2B-Addbox-%28UPDATE-08-03-08%29.html]tutorial bang Kanal[/url])
[spoiler]//FLOATING ACCORDION MENU
floataccord="<div id='divStayTopLeft' style='position:absolute;z-index:50;'><div class='glossymenu'>"+
"<a class='menuitem' href='http://www.friendster.com/'>Home</a>"+
"<a class='menuitem submenuheader' href='http://www.friendster.com/user.php' >My Profile</a>"+
"<div class='submenu'>"+
"<ul><li><a href='http://www.friendster.com/editprofile.php'>Edit Profile</a></li>"+
"<li><a href='http://www.friendster.com/friends.php/ID_FS_KAMU'>My Friends</a></li>"+
"<li><a href='http://www.friendster.com/photos/ID_FS_KAMU'>My Photos</a></li>"+
"<li><a href='http://www.friendster.com/messages.php'>Messages</a></li>"+
"<li><a href='http://www.friendster.com/editaccount.php'>Settings</a></li>"+
"<li><a href='http://www.friendster.com/gallery.php'>Search</a></li>"+
"<li><a href='http://www.friendster.com/widget_myapps.php'>Applications</a></li></ul>"+
"</div>"+
"<a class='menuitem submenuheader' href='http://www.friendster.com/friends.php'>My Connections</a>"+
"<div class='submenu'>"+
"<ul><li><a href='http://www.friendster.com/friends.php'>Friends</a></li>"+
"<li><a href='http://www.friendster.com/schools.php'>Schools</a></li>"+
"<li><a href='http://www.friendster.com/bookmarks.php'>Bookmarks</a></li>"+
"<li><a href='http://www.friendster.com/group/mygroup.php'>Groups</a></li>"+
"</div>"+
"<a class='menuitem submenuheader' href='http://www.friendster.com/explore.php'>Explore</a>"+
"<div class='submenu'>"+
"<ul><li><a href='http://www.friendster.com/userlist.php?list=newusers'>People</a></li>"+
"<li><a href='http://www.friendster.com/photolist.php?list=mostrecent'>Photos</a></li>"+
"<li><a href='http://www.friendster.com/video.php'>Videos</a></li>"+
"</div>"+
"<a class='menuitem submenuheader' href='http://theftalk.com'>My Credits</a>"+
"<div class='submenu'>"+
"<ul><li><a href='http://theftalk.com' target='_blank'>Friendstertalk.com</a></li>"+
"<li><a href='http://ripway.com/' target='_blank'>Ripway.com</a></li>"+
"<li><a href='http://www.myflashfetish.com/' target='_blank'>Myflashfetish.com</a></li>"+
"<li><a href='http://dynamicdrive.com/' target='_blank'>Dynamicdrive.com</a></li>"+
"<li><a href='http://www.slide.com/' target='_blank'>Slide.com</a></li>"+
"<li><a href='http://www.photobucket.com/' target='_blank'>Photobucket.com</a></li>"+
"<li><a href='http://www.cbox.ws/' target='_blank'>Cbox.ws</a></li>"+
"</div>"+
"<a class='menuitem' href='http://www.friendster.com/logout.php' style='border-bottom-width: 0'>Log Out</a>"+
"</div></div>";
flow=document.getElementById('flo_wrapper');
river=document.createElement("div");
river.innerHTML=floataccord;
flow.parentNode.insertBefore(river,flow);
//in this part you can change it into "frombottom" or "fromtop"
var verticalpos="fromtop"
function BoyantDiv()
{
var startX = 20;
var startY = 170;
function ml(id)
{
if (document.getElementById)
{
var wek=document.getElementById(id);
}
else if (document.all)
{
var wek=document.all[id];
}
else
{
var wek=document.layers[id];
}
if(document.layers)
{
wek.style=wek;
}
wek.sP = function(x,y) {shino(x,y);};
function shino(x,y)
{
wek.style.left=x;
wek.style.top=y;
}
wek.x = startX;
if (verticalpos=="fromtop")
{
wek.y = startY;
}
else{
if (navigator.appName.indexOf("Netscape") != -1)
{
wek.y = pageYOffset + innerHeight;
}
else
{
wek.y = document.body.scrollTop + document.body.clientHeight;
}
wek.y -= startY;
}
return wek;
}
window.stayTopLeft = function () {boyant();};
function boyant()
{
if (verticalpos=="fromtop"){
if (navigator.appName.indexOf("Netscape") != -1)
{
var tenten = pageYOffset;
}
else
{
var tenten = document.body.scrollTop;
}
ftlObj.y += (tenten + startY - ftlObj.y)/8;
}
else{
if (navigator.appName.indexOf("Netscape") != -1)
{
var tenten = pageYOffset + innerHeight;
}
else
{
var tenten = document.body.scrollTop + document.body.clientHeight;
}
ftlObj.y += (tenten - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
wakoko=setTimeout("stayTopLeft()", 50);
}
ftlObj = ml("divStayTopLeft");
stayTopLeft();
}
BoyantDiv();[/spoiler]
Edit ID_FS_KAMU dengan ID FS kamu sendiri
Langkah terakhir masukkan code ini kedalam css kamu :
[spoiler]/* fLoating accordiont styLe */
.glossymenu{
margin: 5px 0;
padding: 0;
width: 170px; /*width of menu*/
border: 1px solid #9A9A9A;
border-bottom-width: 0;
}
.glossymenu a.menuitem{
background: black url([i]http://i264.photobucket.com/albums/ii200/strezzpc/glossyback.gif[/i]) repeat-x bottom left;
font: bold 14px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: white; text-align:left;
display: block;
position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
width: auto;
padding: 4px 0;
padding-left: 10px;
text-decoration: none;
}
.glossymenu a.menuitem:visited, .glossymenu .menuitem:active{
color: white;
}
.glossymenu a.menuitem .statusicon{ /*CSS for icon image that gets dynamically added to headers*/
position: absolute;
top: 5px;
right: 5px;
border: none;
}
.glossymenu a.menuitem:hover{
background-image: url([i]http://i264.photobucket.com/albums/ii200/strezzpc/glossyback2.gif[/i]);
}
.glossymenu div.submenu{ /*DIV that contains each sub menu*/
background: white;
}
.glossymenu div.submenu ul{ /*UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0;
}
.glossymenu div.submenu ul li{
border-bottom: 1px solid blue;
}
.glossymenu div.submenu ul li a{
display: block;
font: normal 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: black; text-align:left;
text-decoration: none;
padding: 2px 0;
padding-left: 10px;
}
.glossymenu div.submenu ul li a:hover{
background: #E2EDFA;
colorz: white;
}[/spoiler]
[i]
[u]Keterangan :[/u][/i]
[li]Untuk merubah image header, rubah di cssnya bagian [/li]
[quote].glossymenu a.menuitem{
background: black url([color=red]http://i264.photobucket.com/albums/ii200/strezzpc/glossyback.gif[/color]) repeat-x bottom left;
font: bold 14px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: white; text-align:left;
display: block;
position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
width: auto;
padding: 4px 0;
padding-left: 10px;
text-decoration: none;
}[/quote]
dan
[quote].glossymenu a.menuitem:hover{
background-image: url([color=red]http://i264.photobucket.com/albums/ii200/strezzpc/glossyback2.gif[/color]);
}[/quote]
[li]Untuk merubah image plus dan minus, cari di file [b]accordcontent.js[/b] bagian yg ini :[/li]
[quote]togglehtml: ["suffix", "<img src='[color=blue]http://i264.photobucket.com/albums/ii200/strezzpc/plusplus.gif[/color]' class='statusicon' />", "<img src='[color=blue]http://i264.photobucket.com/albums/ii200/strezzpc/minus.gif[/color]' class='statusicon' />"], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)[/quote]
[li]Untuk menambahkan menu, sisipkan bagian ini :[/li]
[quote]<a class='menuitem submenuheader' href='URL_YG DITUJU'>JUDUL_MENU</a>"+
"<div class='submenu'>"+
"<ul><li><a href='URL_YG DITUJU'>JUDUL_SUB_MENU</a></li>"+
"<li><a href='URL_YG DITUJU'>JUDUL_SUB_MENU</a></li>"+
"<li><a href='URL_YG DITUJU'>JUDUL_SUB_MENU</a></li>"+
"</div>[/quote]
Semoga bisa dimengerti, silahkan untuk berkreasi sendiri dan selamat mencoba
[hr]
Ini tambahan buat [color=red]image headernya[/color] :
[spoiler][img]http://i264.photobucket.com/albums/ii200/strezzpc/header/glossyback.gif[/img] [img]http://i264.photobucket.com/albums/ii200/strezzpc/header/glossyback2.gif[/img]
[img]http://i264.photobucket.com/albums/ii200/strezzpc/header/glossybackblack.gif[/img] [img]http://i264.photobucket.com/albums/ii200/strezzpc/header/glossybackblack2.gif[/img]
[img]http://i264.photobucket.com/albums/ii200/strezzpc/header/glossybackred.gif[/img] [img]http://i264.photobucket.com/albums/ii200/strezzpc/header/glossybackred2.gif[/img][/spoiler]
Untuk icon [color=blue]plus minus[/color]
[img]http://i264.photobucket.com/albums/ii200/strezzpc/plusplus.gif[/img] [img]http://i264.photobucket.com/albums/ii200/strezzpc/minus.gif[/img]
Last edited by strezzpc (2009-02-05 07:31:26)
 |