Miscellaneous Classroom Tips from Al Futrell

Random header image... Refresh for more!

Simple “Disjointed” Rollover Effect

The web is full of solutions for doing mouseovers or rollovers.  Used to be that you had to use Javascript to get the effect, but now you can get the job done with CSS.  Well, er, I suppose most people can.  I could not.  That is, I couldn’t get exactly what I wanted.  What I wanted was to be able to mouseover a link in column one of a web page and have a photograph appear in column three.  I am sure there is a way to do this with CSS but I just couldn’t conceptualize it.

So I resorted to javascript and got the job done.  It really is easy once you think for a second or two.

Here is the javascript function I am using:


function seeIt(id,switch) {
if (switch=="1"){
//the next two lines are in case user has an old browser
if (document.layers) document.layers[''+id+''].visibility = "show"
else if (document.all) document.all[''+id+''].style.visibility = "visible"
else if (document.getElementById) document.getElementById(''+id+'').style.visibility =
"visible"
}
else
if (switch=="0"){
//again, check for old browsers in the next two lines
if (document.layers) document.layers[''+id+''].visibility = "hide"
else if (document.all) document.all[''+id+''].style.visibility = "hidden"
else if (document.getElementById) document.getElementById(''+id+'').style.visibility =
"hidden"
}
}

The first part of the function checks to see whether the user has dragged the mouse over a link. It does so by checking the value of the parameter “switch”.  If switch is on (i.e., it equals 1), then the script will assign the “visibility” property to the html element with the proper “id”. The second half of the script checks to see if a mouseout (that is, the switch equals 0) has been executed, and if so then it hides the image again.

I use this script because it allows me to show the image in whatever element on the page that I choose. All I have to do is send the desired element’s “id” to the function as the “id” parameter. In the HTML below I use a “<div>” element inside of the column-three <div> element to accomplish this.


<div id = "column-one">
<h3>Column One Header</h3>  <a href="url" onMouseOver = "seeIt('myid',1)"; onMouseOut="seeIt('myid',0)">Go to Link</a>
</div>


<div id="column-two">
<h3>Column Two Header</h3>
<p>Some other text</p>
</div>

<div "column-three"">
<h3>Column Three Header</h3>
<div id="myid"><img = src="myimage.png" width="100" height="100" alt="My Image" /></div></div>

Now, in our <style> element we need the following declaration:

#myid { position:absolute;  visibility:hidden }

This declaration makes sure the initial state of the image is hidden.  The position must be absolute for this to work.

With the javascript in place, the html well-formed, and the style sheet all set we can render the page and then mouseover the “Go to Link” link and the myimage.png image will appear in column three where we want it.  Of course, we could do define a specific location on the screen to place it if we included “top: 100px; left: 300px” or any other coordinates of our choosing but this way I don’t have to worry about defining a specific space.  The image will always go into the 0,0 coordinates of the myid <div> element.

January 21, 2014   No Comments

Configure Userdir to Serve Web Pages with Fedora 17

Setting up a server running Fedora is a pain. One must do so many little things to please SElinux. A crucial task is enabling the user directories to have web access. Here is a sequence that worked on Fedora 17. It allows Apache to access the users’ home directories (by default ~/public_html/).

  1. Load /etc/httpd/conf/httpd.conf into an editor
  2. Change ‘UserDir disabled’ to ‘UserDir enabled’
  3. Uncomment the ‘UserDir public_html’ line
  4. Uncomment the ‘<Directory /home/*/public_html>’ directive.
  5. Save /etc/httpd/conf/httpd.conf
  6. Apply the proper permissions:
      # chmod 711 ~<username> for all usernames you want to enable.
      # chmod 755 -R ~<username>/public_html/> for all the usernames you want “enabled”

Run the following commands to please SELinux:

# setsebool -P httpd_enable_homedirs true
# chcon -R -t httpd_sys_content_t ~/public_html

Finally, reload Apache
  # service httpd restart

August 8, 2012   No Comments

Python Version Mismatch

A small problem that probably doesn’t matter, but it generates an error message in the httpd log files, so it is bothersome.  The error is something like "Python version mismatch, expected '2.6' found '2.6.4'.  The last version number doesn’t matter.  It will likely be something other than 2.6.4.  The important thing is that it is different from 2.6, which is the version of Python compiled with Fedora 13.  So how do we get rid of the pesky error?  Well, here is one way.

Replace the mod_python that comes with Fedora with a “rebuilt” version.  The commands are listed below, but if you are like me you may have to download some dependencies first. 

yumdownloader --source mod_python
rpmbuild --rebuild mod_python-3.3.1-11.src.rpm
rpm -e mod_python
rpm-Uvh mod_python-3.3.1-11.src.rpm

What we are doing her is compiling another version of mod_python from the sourcerpm and then putting it in place of the one that is generating the error.

July 8, 2010   No Comments

Rotating Images in a WordPress Theme

Sometimes you want to add a little pizazz to your page and having images rotate each time someone visits your site is an easy way to do that. How can we get this done with the greatest ease?

Let’s say you have a place on your sidebar where you want to have an image appear. Then let’s say you have five different images that you would like to choose from each time the page is loaded. Then let’s say even further that you want the images to appear randomly.

So cutting to the quick, here is the code we can use to get this done:


<?php
$r_num = rand(1,5);
$selected_image = "image_" . $r_num . ".jpg";

/*
the second number above
is the number of images
you want to rotate
*/
?>

<img src="<?php bloginfo('template_url'); ?>
/images/<?php echo $selected_image; ?>"
alt="Random image...hit refresh to change!" />

For this to work properly the theme you are using must have a directory named “images” and that directory must contain your five files.  Those files must be named image_1.jpg, image_2.jpg, image_3.jpg, image_4.jpg and image_5.jpg.

Figuring out where to put the code might be a little confusing,  so you may have to experiment with it.  But if you wanted the image to appear at the top of the sidebar, then paste the code on the first few lines of the sidebar.php file.  If you want the image to appear in the header, then paste the code in the header.php file somewhere after the <body> element.  Play with it a little until you get the images to come up where you want them.

April 19, 2010   No Comments

Page Order in WordPress

Yes, a frustrating thing about using WordPress, especially when you are not a very experienced user, is trying to get the Pages to show up in a list in the order that you want, just as in a menu. If you read the documentation pages over at WordPress.org you can learn how to do it, but it might be a tab bit confusing. The easy way is to get the My Page Order plugin. You can find it at http://wordpress.org/extend/plugins/my-page-order/. It allows you to put your Pages (not your Posts, but your “Pages”) in the order you would like. Just download, install, and activate it. Be sure to get the latest version because it has some extras on it that earlier versions did not have.

While you are at it, you may as well grab the My Links Order plugin as well at http://wordpress.org/extend/plugins/my-link-order/. It does the same thing for your links and links categories. Must easier than reading the documentation.

April 19, 2010   No Comments

Develop on Your Laptop First

When attempting to create a website using software, such as WordPress, or creating an HTML or PHP site from scratch, it is often helpful to develop the site first on your laptop (or your desktop if you still live in the stone age…like me) and then transfer it when you get it ready for production. Using this approach cuts down on ftp time and waiting for network glitches. It also enables you to develop wherever you are even if no wi-fi is handy. No matter what OS you use you can grab a copy of xampp and make life much easier for yourself. One place to get it is at the http://www.apachefriends.org/en/xampp.html web site. If is free and all the apps on it are open source, which is the way things were meant to be.

April 18, 2010   No Comments

Clarity Trumps all Else

When we study pedagogy we look at many different variables that contribute to creating the type of classroom that will be conducive to leaning. We look at credibility, immediacy, climate, humor, and so on, but clarity emerges as the most important feature for a teacher to possess. If students do not understand what you are saying, then forgetaboutit.

April 18, 2010   No Comments

WordPress Plugin that Enables Linking to Places Other than your Blog

Let’s say that you want to create a link that will “go off” your WordPress site.  For example, you want a link to the University of Louisville main page, which is http://louisville.edu but your Word Press blog is located at http://www.yoursite.com.  This type of linking can sometimes be a little tricky with most themes, so get the plugin named Page Links To. It is very easy to install and use and it allows you to create off-site links.

April 18, 2010   No Comments