Type Slide-Provide you with the latest and most comprehensive Tutorials

Current location: Downcodes.com -> Academy -> Effects -> Page -> Type Slide

Recommend

HOT TOP10

Type Slide

Date: 2008-1-11 Author: Hit: View:[Large font Middle font Small font]

<html>
<style>a{color:#036;text-decoration:none;}a:hover{color:#ff3300;text-decoration:none;}</style>
<body style="margin:50px;">





<!--||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

                          Type Text - Structure and Links

                          Note: All required source code and setting are in this file.

||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||-->

<!--

          Tips & Tricks


             1: Each LI tag is a type effect item, the UL tag is the container.  Both may be customized
                using inline styles, custom scripts, etc...

             2: This sample uses some custom container divs to create the borders, background gradient,
                and arrow.  These divs are not part of the effect and are simply used to illustrate
                one of many different container possibilites that can be used with the effect.

             3: For simple maintenance add this section to an include when using the effect with multiple documents.

             4: Type effect tags may be dynamically generated by a database using a technique of your choosing.  All effect
                code is 100% client side and fully independent from the back end method by which the document is
                served.

             5: For 508 compliancy remove the 'display:none;' value from the opening UL tags inline style below.
                *NOTE: With the statement removed you may see a quick flicker as the page loads.

-->


<div style="color:#111;font-weight:bold;font-size:12px;font-family:Arial;float:left;margin:0px;padding-right:10px;padding-bottom:3px;padding-top:3px;background-image:url(background.gif);border-left:1px;border-top:1px;border-bottom:1px;border-right:0px;border-color:#666666;border-style:solid;padding-left:5px;">OpenCube Customers</div>

<div style="float:left;background-image:url(images/background.gif);border-width:1px;border-color:#666666;border-style:solid;padding-left:9px;padding-bottom:0px;width:140px;">
<div style="float:left;padding-top:5px;"><img src="images/arrow.gif" width=10 height=11></div>



<!--=-=-=-=-=-=-=-=-=Type Text Structure and Links=-=-=-=-=-=-=-=-=-=-=--->

	<ul id="typetext" style="display:none;">

		<li><a href="sample_link.html">3Com</a></li>
		<li><a href="sample_link.html">Adobe</a></li>
		<li><a href="sample_link.html">AMEX</a></li>

		<li><a href="sample_link.html">Aol</a></li>
		<li><a href="sample_link.html">Boeing</a></li>
		<li><a href="sample_link.html">Cisco</a></li>
		<li><a href="sample_link.html">Compaq</a></li>
		<li><a href="sample_link.html">Dell</a></li>
		<li><a href="sample_link.html">Disney</a></li>

		<li><a href="sample_link.html">Gateway</a></li>
		<li><a href="sample_link.html">Gillette</a></li>
		<li><a href="sample_link.html">Goodyear</a></li>
		<li><a href="sample_link.html">Honeywell</a></li>
		<li><a href="sample_link.html">Lucent</a></li>
		<li><a href="sample_link.html">Microsoft</a></li>

		<li><a href="sample_link.html">Nextel</a></li>
		<li><a href="sample_link.html">Nike</a></li>
		<li><a href="sample_link.html">Pepsi</a></li>
		<li><a href="sample_link.html">Pfizer</a></li>
		<li><a href="sample_link.html">Qwest</a></li>
		<li><a href="sample_link.html">UPS</a></li>

	</ul>

<!--=-=-=-=-=-=-=-=-End Type Text Structure and Links=-=-=-=-=-=-=-=-=-=-->


</div>
<div style="clear:left;"></div> <!-- resets left align -->

<!--||||||||||||||||||||||||||||||||End Type Text Structure and Links |||||||||||||||||||||||||||||||||||||||||||-->

<!--**********************************************************************************************************

                          Type Text - Parameter Settings

                          Note: Type Text structure and links are defined above with UL and LI tags.

************************************************************************************************************-->
<script language="JavaScript">


/*

          Tips & Tricks

             1: To specifically define settings for an individual item or container, apply classes or inline styles
                directly to the UL, LI, and A tags within the HTML which defines your effects structure and links above.

             2: The style settings below may contain any valid CSS settings. (This sample illustrates a few common CSS
                attributes which are typically employed)

*/




/*-------------------------------------------------
************* Parameter Settings ******************
---------------------------------------------------*/
unlock0 = '1214'
unlock1 = '1617'
function typetext_data()
{


    /*---------------------------------------------
    Delay Times (In Milliseconds (1/1000 s)
    ---------------------------------------------*/


	this.initial_delay = 500		//Delay before starting the effect upon first load.

	this.message_delay = 2000		//Delay between messages.
	this.type_delay = 75			//Delay between typed characters.
	this.scroll_delay = 10			//Delay between each scroll animation frame.

	this.mouseoff_delay = 1000		//Delay before switching to the next message after moving the mouse out.





    /*---------------------------------------------
    Dimensions and Styles
    ---------------------------------------------*/


	this.container_width = 115;		//Measured in Pixels
	this.margins = "3,1,3,0";		//Top,Right,Bottom,Left - In Pixels


	this.container_styles =           "border-width:0px;			\
                                           border-color:#0066bb;		\
                                           border-style:none;			\
                                           background-color:transparent;	"


	this.item_styles =                "text-decoration:none;		\
                                           font-weight:normal;			\
                                           font-family:Arial;			\
                                           font-size:12px;			\
                                           color:#333333;			\
                                           text-align:left;			"


	this.link_styles =                "text-decoration:none;		\
                                           font-weight:normal;			\
                                           font-family:Arial;			\
                                           font-size:12px;			\
                                           color:#333333;			\
                                           text-align:center;			"


	this.link_hover_styles =          "color:#ff3300;			\
                                           text-decoration:underline;		"

}



</script>
<!--********************************** End Parameter Settings **************************************-->



<!--================================================================================================================

     source Code - (Do Not Alter!)
     The source script block below should appear directly before your documents closing </BODY> tag.-->

<script language="JavaScript" src="typetext.js"></script>

<!--==============================================================================================================-->


</body>
</html>

sample: http://www.opencube.com/samples/we/sample7/sample2.html

(From: opencube)

Relative article:

Relative software: