The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

A pop out box code

View previous topic View next topic Go down

A pop out box code

Post by udarsha45 on July 3rd 2012, 2:35 pm

http://thejadednetwork.com/

In the homepage you can find a section called "Featured Anime, Manga & Game Wallpapers", [the pictures] and in their when you direct your pointer, you could see a small box popping out and giving some information about the picture.

So how can i get that code?

udarsha45
Forumember

Male Posts : 432
Reputation : 2
Language : English
Location : Sri Lanka

http://bleach.5forum.net

Back to top Go down

Re: A pop out box code

Post by Mati on July 3rd 2012, 2:40 pm


Mati
Active Poster

Posts : 1873
Reputation : 281
Language : || HTML || CSS || jQuery ||
Location : At the Gym

http://elite-gaming.forumotion.net/

Back to top Go down

Re: A pop out box code

Post by MotorCookie on July 5th 2012, 4:37 am

Code:

<style type="text/css">
<!--

.tooltiptitle{COLOR: #FFFFFF; TEXT-DECORATION: none; CURSOR: Default; font-family: arial; font-weight: bold; font-size: 8pt}
.tooltipcontent{COLOR: #000000; TEXT-DECORATION: none; CURSOR: Default; font-family: arial; font-size: 8pt}

#ToolTip{position:absolute; width: 100px; top: 0px; left: 0px; z-index:4; visibility:hidden;}

-->
</style>
<script language = "javascript">
<!--



ContentInfo = "";

topColor = "#808080"
subColor = "#C0C0C0"








var mouse_X;
var mouse_Y;

var tip_active = 0;



function update_tip_pos(){

        document.getElementById('ToolTip').style.left = mouse_X + 20;
        document.getElementById('ToolTip').style.top  = mouse_Y;
}






var ie = document.all?true:false;
if (!ie) document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = getMouseXY;

function getMouseXY(e) {
if (ie) { // grab the x-y pos.s if browser is IE
mouse_X = event.clientX + document.body.scrollLeft;
mouse_Y = event.clientY + document.body.scrollTop;
}
else { // grab the x-y pos.s if browser is NS
mouse_X = e.pageX;
mouse_Y = e.pageY;
}
if (mouse_X < 0){mouse_X = 0;}
if (mouse_Y < 0){mouse_Y = 0;}

if(tip_active){update_tip_pos();}
}
















function EnterContent(TTitle, TContent){

ContentInfo = '<table border="0" width="100" cellspacing="0" cellpadding="0">'+
'<tr><td width="100%" bgcolor="#000000">'+

'<table border="0" width="100%" cellspacing="1" cellpadding="0">'+
'<tr><td width="100%" bgcolor='+topColor+'>'+

'<table border="0" width="90%" cellspacing="0" cellpadding="0" align="center">'+
'<tr><td width="100%">'+

'<font class="tooltiptitle"> '+TTitle+'</font>'+

'</td></tr>'+
'</table>'+

'</td></tr>'+

'<tr><td width="100%" bgcolor='+subColor+'>'+

'<table border="0" width="90%" cellpadding="0" cellspacing="1" align="center">'+

'<tr><td width="100%">'+

'<font class="tooltipcontent">'+TContent+'</font>'+

'</td></tr>'+
'</table>'+

'</td></tr>'+
'</table>'+

'</td></tr>'+
'</table>';

}








function tip_it(which, TTitle, TContent){

   
    if(which){
   
        update_tip_pos();
   
        tip_active = 1;
       
        document.getElementById('ToolTip').style.visibility = "visible";
       
        EnterContent(TTitle, TContent);
       
        document.getElementById('ToolTip').innerHTML = ContentInfo;
   
    }else{
   
        tip_active = 0;
   
        document.getElementById('ToolTip').style.visibility = "hidden";
    }

}








//-->
</script>

























MotorCookie
Forumember

Male Posts : 113
Reputation : 1
Language : English

Back to top Go down

Re: A pop out box code

Post by udarsha45 on July 5th 2012, 4:21 pm

Matti_7 wrote:Is called tooltip so have a look at here => http://csshelp.forumotion.net/t42-how-to-add-tooltips-on-your-forum

It isn't working.

@MotorCookie wrote:
Code:

<style type="text/css">
<!--

.tooltiptitle{COLOR: #FFFFFF; TEXT-DECORATION: none; CURSOR: Default; font-family: arial; font-weight: bold; font-size: 8pt}
.tooltipcontent{COLOR: #000000; TEXT-DECORATION: none; CURSOR: Default; font-family: arial; font-size: 8pt}

#ToolTip{position:absolute; width: 100px; top: 0px; left: 0px; z-index:4; visibility:hidden;}

-->
</style>
<script language = "javascript">
<!--



ContentInfo = "";

topColor = "#808080"
subColor = "#C0C0C0"








var mouse_X;
var mouse_Y;

var tip_active = 0;



function update_tip_pos(){

        document.getElementById('ToolTip').style.left = mouse_X + 20;
        document.getElementById('ToolTip').style.top  = mouse_Y;
}






var ie = document.all?true:false;
if (!ie) document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = getMouseXY;

function getMouseXY(e) {
if (ie) { // grab the x-y pos.s if browser is IE
mouse_X = event.clientX + document.body.scrollLeft;
mouse_Y = event.clientY + document.body.scrollTop;
}
else { // grab the x-y pos.s if browser is NS
mouse_X = e.pageX;
mouse_Y = e.pageY;
}
if (mouse_X < 0){mouse_X = 0;}
if (mouse_Y < 0){mouse_Y = 0;}

if(tip_active){update_tip_pos();}
}
















function EnterContent(TTitle, TContent){

ContentInfo = '<table border="0" width="100" cellspacing="0" cellpadding="0">'+
'<tr><td width="100%" bgcolor="#000000">'+

'<table border="0" width="100%" cellspacing="1" cellpadding="0">'+
'<tr><td width="100%" bgcolor='+topColor+'>'+

'<table border="0" width="90%" cellspacing="0" cellpadding="0" align="center">'+
'<tr><td width="100%">'+

'<font class="tooltiptitle"> '+TTitle+'</font>'+

'</td></tr>'+
'</table>'+

'</td></tr>'+

'<tr><td width="100%" bgcolor='+subColor+'>'+

'<table border="0" width="90%" cellpadding="0" cellspacing="1" align="center">'+

'<tr><td width="100%">'+

'<font class="tooltipcontent">'+TContent+'</font>'+

'</td></tr>'+
'</table>'+

'</td></tr>'+
'</table>'+

'</td></tr>'+
'</table>';

}








function tip_it(which, TTitle, TContent){

   
    if(which){
   
        update_tip_pos();
   
        tip_active = 1;
       
        document.getElementById('ToolTip').style.visibility = "visible";
       
        EnterContent(TTitle, TContent);
       
        document.getElementById('ToolTip').innerHTML = ContentInfo;
   
    }else{
   
        tip_active = 0;
   
        document.getElementById('ToolTip').style.visibility = "hidden";
    }

}








//-->
</script>

























where do you add that?

udarsha45
Forumember

Male Posts : 432
Reputation : 2
Language : English
Location : Sri Lanka

http://bleach.5forum.net

Back to top Go down

Re: A pop out box code

Post by MotorCookie on July 6th 2012, 4:47 am

Where do you want the tooltip to be?

MotorCookie
Forumember

Male Posts : 113
Reputation : 1
Language : English

Back to top Go down

Re: A pop out box code

Post by Mati on July 6th 2012, 7:28 am

@udarsha45 wrote:
Matti_7 wrote:Is called tooltip so have a look at here => http://csshelp.forumotion.net/t42-how-to-add-tooltips-on-your-forum

It isn't working.

Because you haven't add id/class for the elements.

Mati
Active Poster

Posts : 1873
Reputation : 281
Language : || HTML || CSS || jQuery ||
Location : At the Gym

http://elite-gaming.forumotion.net/

Back to top Go down

Re: A pop out box code

Post by udarsha45 on July 6th 2012, 7:49 am

@MotorCookie wrote:Where do you want the tooltip to be?

In an HTML page.

Matti_7 wrote:
@udarsha45 wrote:
Matti_7 wrote:Is called tooltip so have a look at here => http://csshelp.forumotion.net/t42-how-to-add-tooltips-on-your-forum

It isn't working.

Because you haven't add id/class for the elements.

Huh? What do you mean?

udarsha45
Forumember

Male Posts : 432
Reputation : 2
Language : English
Location : Sri Lanka

http://bleach.5forum.net

Back to top Go down

Re: A pop out box code

Post by MotorCookie on July 7th 2012, 1:17 am

If you add the code to a html page, it won't show anything.

MotorCookie
Forumember

Male Posts : 113
Reputation : 1
Language : English

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum