Tuesday, April 1, 2014

Secret HTML TIPS & Tricks

Secret-HTML-TIPS-&-Tricks


All these tips are implemented by placing the code in an HTML object in your Lectora title.

  • How to Close a Popup Window Automatically

As soon as the user clicks on any window other than the popup, the popup closes.
  1. Create an HTML object from the Insert toolbar.
  2. Then select: Object Type: Other
<body onBlur=top.cSlose()>

Limitations: You cannot have any clickable item on the popup page. If you do, the popup closes
as soon as the user clicks on the item – button, hyperlink, Table of Contents, Menu.
 
  • How to Disable Right Mouse Click, Double Clicking, and Dragging
  1. Create an HTML object from the Insert toolbar.
  2. Then select: Object Type: Other
  3. Insert:

<body oncontextmenu="return false" onselectstart="return false" ondragstart="return false">

in the Custom HTML field.
  • How to Keep the Background Image from Repeating
It appears that the easiest way to keep it from repeating is to make it the same size as the page specified in the title. If it is different, frequently it will repeat. If you want to stop that, create an HTML object at the title level so it will be on all pages. You can shrink it down so it does not get in the way of your design. It is only a place holder.

In the Custom HTML box enter this:

<style text="text/css">
  body { background-repeat:no-repeat; }
</style>

  • How to Suppress IE Mouse-over Image Toolbar
IE 6 sometimes displays an annoying image bar when the mouse is rolling over an image.

This can be removed by placing an External HTML Object at the title level and choose "Other" as its type. Place the following line in the custom html field:

<META HTTP-EQUIV="imagetoolbar" CONTENT="no">
  • How to Right Justify an Entry Field
To make the entry field right adjusted as you would for entering numbers in a Form Entry field or
a Fill in the Blank question, create an HTML object containing:

<style> input { text-align: right;} </style>

  • How to Suppress Entry Field Borders
To suppress the borders on an either a Form Entry field or a Fill in the Blank question, create an HTML object containing:

<style>input {border: none;}</style>
This works only when published to HTML.

This will apply to all input boxes on the page. If you want it to apply to just one, then add the HTML name after the input like this:

<style> input.entry368{border: none;} </style>

  • How to Control the Color of Hyperlinks
The styles Lectora uses by default do prevent the link visited colors from changing. It can be overwritten using a style sheet. If you want to change the link colors try adding a CSS similar to this. Create an HTML object with the default Properties. Insert this:

<style>
a span, a:visited span {color: red }
a span, a:hover span {color: purple }
or
A:link {text-decoration: none; color:#c29b80;}
A:visited {text-decoration: none; color:#c29b80;}
A:active {text-decoration: none; color:#c29b80;}
A:hover {text-decoration: underline; color: rgb(255,0,0);}
</style>
  • How to Use the F1 Key w/o Browser Help Popping Up
If you want to code an On Key action that uses F1, normally the browser’s help function appears. To get around this, code the following in an HTML object with the Object type set to Header Scripting.

document.onhelp = new Function("return false;");
window.onhelp = new Function("return false;");

  • How to Change the Web 2.0 Display Font
Web 2.0 displays currently use Times Roman font. This code, while not JavaScript, allows you to change it to whatever you like.

<style>
.DLG_content{
     overflow:none;
     position:relative;
     border:none;
     font-family: verdana;
}
</style>

  • How to Disable the Horizontal Scroll Bar for Fly Left
<style type="text/css">
<!--
.html, body {
overflow-x:hidden;
}
-->
</style>

No comments:

Post a Comment