The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

A pop out box code

3 posters

Go down

A pop out box code Empty A pop out box code

Post by udarsha45 July 3rd 2012, 15:35

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
udarsha45
Forumember

Male Posts : 626
Reputation : 9
Language : English
Location : Sri Lanka

http://bleach.5forum.net

Back to top Go down

A pop out box code Empty Re: A pop out box code

Post by Mati July 3rd 2012, 15:40

Mati
Mati
Hyperactive

Posts : 2020
Reputation : 330
Language : HTML, CSS & JavaScript
Location : Forum Services

https://forumservice.forumotion.com/

Back to top Go down

A pop out box code Empty Re: A pop out box code

Post by MotorCookie July 5th 2012, 05:37

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
MotorCookie
Forumember

Male Posts : 113
Reputation : 1
Language : English

Back to top Go down

A pop out box code Empty Re: A pop out box code

Post by udarsha45 July 5th 2012, 17:21

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
udarsha45
Forumember

Male Posts : 626
Reputation : 9
Language : English
Location : Sri Lanka

http://bleach.5forum.net

Back to top Go down

A pop out box code Empty Re: A pop out box code

Post by MotorCookie July 6th 2012, 05:47

Where do you want the tooltip to be?
MotorCookie
MotorCookie
Forumember

Male Posts : 113
Reputation : 1
Language : English

Back to top Go down

A pop out box code Empty Re: A pop out box code

Post by Mati July 6th 2012, 08:28

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
Mati
Hyperactive

Posts : 2020
Reputation : 330
Language : HTML, CSS & JavaScript
Location : Forum Services

https://forumservice.forumotion.com/

Back to top Go down

A pop out box code Empty Re: A pop out box code

Post by udarsha45 July 6th 2012, 08:49

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
udarsha45
Forumember

Male Posts : 626
Reputation : 9
Language : English
Location : Sri Lanka

http://bleach.5forum.net

Back to top Go down

A pop out box code Empty Re: A pop out box code

Post by MotorCookie July 7th 2012, 02:17

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

Male Posts : 113
Reputation : 1
Language : English

Back to top Go down

Back to top

- Similar topics

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