TOOL BELT… TOOL BAR (MENU)

THE JAVA SCRIPTS TESTED BELOW … THIS IS THE WORDPRESS INSTRUCTIONS INCLUDED
CALL THIS POST A SANDBOX , for the moment. AFTER THESE INSTRUCTIONS I WILL MERGE WHAT CONTEXTS FIT THIS POST(IN edit…):
SEARCH THIS SITE BY SERACH LINK FROM WITHIN THE MASTER.COM.CONTENT
MASTER.COM CONT EDITED IN FOR SEARCHING TEXT AND ADDING OPTOIN FOR
SEARCH BY RELEVANCE or By DATE
TRY SEARCH LINKED HERE: http://oldship.wordpress.master.com/texis/master/search/

Title:	Old Ole Ship | oLE_SHIP wORDpRESS BLOG | Page 2
Keywords:	-None-
Description:	oLE_SHIP wORDpRESS BLOG
Body:	Economist’s View: The Mental Strain from Being PoorSeptember 21, 2013Economist’s View: The Mental Strain from Being Poor. Posted in Uncategorized | Leave a Comment » Recent posts from Strategists on Typepad | Typepad September 21, 2013

Codex

Codex tools:

Using Javascript

Contents [hide] 1 JavaScript in Template Files 2 JavaScript in Posts 3 Creating a Multiple Script File 4 Using Multiple JavaScript Files Inside One Post or Page 5 Troubleshooting Javascript 6 Resources

JavaScript will work within WordPress. It can be used within WordPress template files in WordPress Themes or Child Themes. JavaScript cannot be added to post content without a special WordPress Plugin that removes the filters that prevent unwanted code within the post content area, for the protection of the user.

JavaScript in Template Files

The safe and recommended method of adding JavaScript to a WordPress generated page, and WordPress Theme or Plugin, is by using wp_enqueue_script(). This function includes the script if it hasn’t already been included, and safely handles dependencies.

To use JavaScript repeatedly within your site, you can either set the call for the JavaScript, or the script itself, in the head of your header.php template file, between the meta tags and the style sheet link, no differently than you would if you were using JavaScript in any HTML page. To “load” the JavaScript file into your site, in the head, add something like this:

<script type="text/javascript" src="/scripts/emailpage.js"></script>

If your custom JavaScript isn’t working after including the previous line of code in your header.php template file, use the following line of code.

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/pathto/yourscript.js"></script>

Include the leading forward slash “/”, even if your file is located in the root of your theme.

Be sure that you define the type correctly, as your site will not validate without it.

In the spot where you wish to use the JavaScript, set the call for the JavaScript. For example, you are using a JavaScript that sets a link for users to “email this page” to a friend, and you want it to be under the post title. It might look like this:

<h3 class="storytitle">
 <a href="<?php the_permalink() ?>" rel="bookmark">
 <?php the_title(); ?></a>
</h3>
<div class="emailpage">
 <script type="text/javascript"><!--//--><![CDATA[//><!--
 emailpage();
 //--><!]]></script>
</div>

JavaScript in Posts

To use JavaScript inside of posts in WordPress, you need to take a few more steps. Odds are that this usage is for one or only a few instances, so adding the script to the header would be unnecessary.

For the occasional or one time use of JavaScript, you need to put the script into a JavaScript file, and then call it out from within the post. Make sure that each script is defined by its function name, such as:

function updatepage(){var m="Page updated "+document.lastMo.......}

To include Javascript inside a post, you need to combine the call to the script file with the call to the JavaScript itself.

<script type="text/javascript" src="/scripts/updatepage.js"></script>
<script type="text/javascript">
<!--
updatepage();
//--></script>

If the src attribute of your JavaScript tag is being stripped out, you need to turn off the rich editor (from the dashboard, go to Users > Your Profile > Personal Options). If you are using the rich editor, the JavaScript tag’s src attribute may be stripped out even when manually editing in the HTML popup window.

Creating a Multiple Script File

You might have a collection of scripts that you call from time to time, like a script that calculates time zones or distance, or maybe scripts that create some effect or accent on your page. For recurring JavaScript, consider grouping them together into one file.

For this example, name the group JavaScript file scriptfile.js (choose whatever you want) and say it contains the updatepage, emailpage, and caltimezone scripts. As you copy each JavaScript into the file, make sure it has a unique function name such as with this condensed version:

function updatepage() {var m="Page updated "+document.lastMo.......}
function emailpage() {mail_str = "mailto:?subject=....}
function caltimezone() {var timerID ; function tzone(tz, os, ds, cl) {this.ct =......} 

Place the script file of all the JavaScript in the head of the header.php template file between the meta tags and the style sheet link. It will just sit there, loaded into the browser’s memory, waiting for one of the scripts inside to be called.

<script type="text/javascript" src="/scripts/scriptfile.js"></script>

In the spot in your post where you would like to use the JavaScript, call it as follows:

<script type="text/javascript">
<!--
updatepage();
//--></script>

Using Multiple JavaScript Files Inside One Post or Page

When using functions laying in multiple JavaScript files, add all the JavaScript references in the header.php. If you really need to write the script reference in the body of the post or Page, ensure that the URL to the JavaScript file starts with the forward-slash (“/”), which is your webserver’s document root (the “htdocs” directory in the case of Apache webserver). This is called a fixed URL. If you do not specify the starting slash (“/”), it becomes a relative URL (“../../relative/path/to/javacripts/file.js”), and is calculated relative to the current location in the directory structure.

If you do this, you will almost surely need to maintain several versions of this reference because different parts of the displayed content are generated from different locations. For example, pages are created from .php template files in the WordPress root directory (note that this is not the webserver’s document root), while posts are created from .php template files in the chosen theme’s directory (“/path-to-wordpress-root/wp-content/themes/yourtheme/partofpost.php”). These are two different paths.

Troubleshooting Javascript

If you are having trouble with including JavaScript inside a post, use the Text Control Plugin, which allows you to control, on a global or per post basis, the ability to turn off WordPress’ automatic formatting features, which can quickly turn code into something readable instead of executable. Set the options on the post that you will be using the JavaScript on to have No Formatting or Markup or nl2br, and No Character Formatting. You may have to experiment to get it to work. As a reminder, when using the Text Control Plugin, you must first Save and Continue Editing the post in order to see the Text Control Plugin options.

If you choose No Formatting, your post’s text will run together, so you will have to add paragraph tags and other HTML tags in order to format your page, as WordPress normally does that for you.

If your JavaScript does not work, triple check that you have not made any errors during the cut and paste into a group or single file. Be sure you used a text editor, and not a word processing program, to create the JavaScript file. Check the name of the function in the script file, as well as on your site. Not all JavaScript may work, and could possibly conflict with your PHP commands, but this is very rare.

If you are having trouble with this, the WordPress Support Forum may be able to help.

Resources

• DigWP – Including jQuery in WordPress the Right Way
• DigWP – Use Google Hosted JavaScript Libraries – Still the Right Way
• Mozilla Developer JavaScript Resource
• PHP Resource Index
• PHP Scripts

Retrieved from “http://codex.wordpress.org/Using_Javascript“

Category: Advanced Topics

JavaScript Popup Boxes

« Previous

Next Chapter »

---

JavaScript has three kind of popup boxes: Alert box, Confirm box, and Prompt box.

---

Alert Box

An alert box is often used if you want to make sure information comes through to the user.

When an alert box pops up, the user will have to click “OK” to proceed.

Syntax

window.alert(“sometext“);

The window.alert method can be written without the window prefix.

Example

alert(“I am an alert box!”);

Try it Yourself »

 

---

Confirm Box

A confirm box is often used if you want the user to verify or accept something.

When a confirm box pops up, the user will have to click either “OK” or “Cancel” to proceed.

If the user clicks “OK”, the box returns true. If the user clicks “Cancel”, the box returns false.

Syntax

window.confirm(“sometext“);

The window.confirm() method can be written without the window prefix.

Example

var r=confirm(“Press a button”);
if (r==true)
{
x=”You pressed OK!”;
}
else
{
x=”You pressed Cancel!”;
}

Try it Yourself »

 

---

Prompt Box

A prompt box is often used if you want the user to input a value before entering a page.

When a prompt box pops up, the user will have to click either “OK” or “Cancel” to proceed after entering an input value.

If the user clicks “OK” the box returns the input value. If the user clicks “Cancel” the box returns null.

Syntax

window.prompt(“sometext“,”defaultText“);

The window.prompt() method can be written without the window prefix.

Example

var person=prompt(“Please enter your name”,”Harry Potter”);

if (person!=null)
{
x=”Hello ” + person + “! How are you today?”;
document.getElementById(“demo”).innerHTML=x;
}

Try it Yourself »

 

---

Line Breaks

To display line breaks inside a popup box, use a back-slash followed by the character n.

Example

alert(“Hello\nHow are you?”);

Try it Yourself »

<script type="text/javascript" src="http://services.webestools.com/menus-horizon/style-20.js?txt=Home%3Dhttp%253A%252F%252Fwww.webestools.com%252F%0AForum%3Dhttp%253A%252F%252Fwww.webestools.com%252Fforum-discussions.html%0AHelp%2520us%3Dhttp%253A%252F%252Fwww.webestools.com%252Fhelpus.html%0AContact%3Dhttp%253A%252F%252Fwww.webestools.com%252Fcontact.html%0A"></script>Code

demo.htm

  ,,,

1 2 3
4
5Sample for JavaScript menu bar
6
7 <styletype=”text/css”> 8 #menuBar {
9 margin: 0;
10 padding: 0;
11 display: table;
12 background-color: #333388;
13 }
14
15 #menuBar div {
16 margin: 0;
17 padding: 0;
18 list-style: none;
19 position: relative;
20 float: left;
21 border-right: 1px #AAAAAA solid;
22 }
23
24 #menuBar div a {
25 display: block;
26 margin: 0;
27 padding: 5px 15px;
28 color: #FFFFFA;
29 text-align: center;
30 text-decoration: none;
31 font-weight: bold;
32 }
33
34 #menuBar div a:hover {
35 background: #5555FF;
36 }
37
38 #menuBar span {
39 margin: 1px;
40 padding: 0;
41 position: absolute;
42 visibility: hidden;
43 white-space: nowrap;
44 display: table;
45 z-index: 3;
46 }
47
48 #menuBar span a {
49 margin: 0;
50 padding: 2px 10px;
51 background: #3333AA;
52 color: #FFFFFA;
53 font-size:90%;
54 text-align: left;
55 text-decoration: none;
56 font-weight: normal;
57 }
58
59 #menuBar span a:hover {
60 background: #5555FF;
61 }
62

63
64 <scripttype=”text/javascript”> 65 //<! [CDATA[ (non-xhtml? remove this line. xhtml? just remove the space between! and [) 66 104 //]]> (non-xhtml? remove this line) 105
106
107

108 109
110
111 <divid=”menuBar”> 112
113

114 <ahref=”http://alexapps.net&#8221; 115 onmouseover=”openMenu(‘menu1’)”onmouseout=”closeMenu()”>Home
116
117 <spanid=”menu1″onmouseover=”keepMenuOpen()”onmouseout=”closeMenu()”>
118
119

120
121

122 <ahref=”http://alexapps.net/Apple/iOS/Apps/MyApps&#8221; 123 onmouseover=”openMenu(‘menu2’)”onmouseout=”closeMenu()”>iPhone Apps
124
125 <spanid=”menu2″onmouseover=”keepMenuOpen()”onmouseout=”closeMenu()”>
126 <ahref=”http://alexapps.net/Apple/iOS/Apps/MyApps/BoxingiTimer”>Boxing iTimer
127

---

128 <ahref=”http://alexapps.net/Apple/iOS/Apps/MyApps/GPSAlarms”>GPSAlarms
129 <ahref=”http://alexapps.net/Apple/iOS/Apps/MyApps/GPSAlarmPlus”>GPSAlarm+
130
131

132
133

134 <ahref=”” 135 onmouseover=”openMenu(‘menu3’)”onmouseout=”closeMenu()”>Help
136
137 <spanid=”menu3″onmouseover=”keepMenuOpen()”onmouseout=”closeMenu()”>
138 <ahref=”http://alexapps.net”>About Us
139 <ahref=”http://alexapps.net/contact.xhtml”>Contact Us
140
141

142
143

144
145 <divstyle=”clear:both”>

146
147

Sample for JavaScript Menu Bar

148
149
150 <divid=”log”style=”font-size: xx-small”/> 151
152
153 http://alexapps.net/HowTo/JavaScript/MenuBar/index.xhtml

About HTML Dog | HTML Dog

About HTML Dog | HTML Dog.

Also it comes with a link for others!

Link to HTML Dog

If you find this web site useful, please link to it. It’s a karma kinda thang.

They don’t call this poetry …
… so, I’m calling it “inspiration” for the Tag category cloud.

They do say “It’s a kinda karma thang“.

And i dont think I will have more than one “thang”.
That’s enough though, from me, that I’ve “thung”.

“Press This” made it to bookmarks tool…

Still working on “Press Freshly”.

see also “Freshly Pressed”