Archive for the ‘Web Development’ Category

Simple “Disjointed” Rollover Effect

Tuesday, January 21st, 2014

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.

Configure Userdir to Serve Web Pages with Fedora 17

Wednesday, August 8th, 2012

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

Python Version Mismatch

Thursday, July 8th, 2010

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.

Develop on Your Laptop First

Sunday, April 18th, 2010

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.