Entries Tagged 'User Interface (UI)' ↓
August 5th, 2007 — AJAX, User Interface (UI)
AJAX is a very nice tool. It allows us to build web pages that can retrieve bits of information with having to reload the entire page. But some developers can take this to an extreme. These developers want to possibly load the whole site’s content through AJAX. After the user clicks a few links, the user sees new data and finds something of interest. The user may want to “Bookmark” the page. If the user tries to bookmark the current data, they will not be able to. The URL still has the original landing page location.
This is similar to users wanting to bookmark “Framed Pages”, the URL of a Framed site always stays at the www.domainname.com. This is not “Good” for the users, if they go back to the “bookmark” they have to search for that page again(if they remember why they bookmarked it in the first place). If they can’t find the data they were after or couldn’t remember why they had that site, it will probably get deleted from the users bookmarks.
My Theory for the User:
- Create bookmarkable page sections.
- Update Data or Change Data that belongs on that page and will be there (or similar data) in the future.
- Unrelated or more complex changes/updates to the page deserve their own page.
- Don’t make the user “Learn” how to use your site.
Well that seems pretty basic and painless if followed.
July 10th, 2007 — JavaScript, User Interface (UI)
Here is a generic script to show/hide a DIV or other element via “nextSibling” of the DOM. This example script uses a IMG as the click object within an “H?” tag as its Parent Object. The “CLICK” of the image activates the script passing “this” to the function. The function then with the DOM gets that image “Parent” object. Next is identifying the “nextSibling” of that parent object.
With the “nextSibling” we check to see if the “display” of the element is “none”. If it is “none” we set “vSibling.style.display = ‘block’;” to enable the element to be visible. If it is not “none” then we set it to “vSibling.style.display = ‘none’;”
Images needed:
Show/Hide Example
<H4> <!– Parent of trigger element (img) –>
<img src=”img/expand.gif” alt=”Show Div” border=”0″ style=”cursor:pointer;” onclick=”showHide(this);” />
Title #1 with H tag and DIV
</h4>
<div style=”display:none;”> <!– Effected Element (sibling of H4) – “display:none;” needs to be inline –>
<p> This is the content of the #1 div</p>
</div>
Here is the HTML and Javascript
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SHOW/HIDE Div with Javascript</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<script type="text/javascript">
function showContent(vThis)
{
// http://www.javascriptjunkie.com
// alert(vSibling.className + " " + vDef_Key);
vParent = vThis.parentNode;
vSibling = vParent.nextSibling;
while (vSibling.nodeType==3) { // Fix for Mozilla/FireFox Empty Space becomes a TextNode or Something
vSibling = vSibling.nextSibling;
};
if(vSibling.style.display == "none")
{
vThis.src="/img/collapse.gif";
vThis.alt = "Hide Div";
vSibling.style.display = "block";
} else {
vSibling.style.display = "none";
vThis.src="/img/expand.gif";
vThis.alt = "Show Div";
}
return;
}
</script>
<body>
<h3>Show/Hide Div Example</h3>
<div style="margin-top:5px;">
<h4><img src="/img/expand.gif" alt="Show Div" border="0" style="margin-right:6px; margin-top:3px; margin-bottom:-3px; cursor:pointer;" onclick="showContent(this);" />Title #1</h4>
<div style="margin-top:5px; display:none; border:1px solid red;">
<p> THis is the content of the #1 div</p>
</div>
<h4><img src="/img/expand.gif" alt="Show Div" border="0" style="margin-right:6px; margin-top:3px; margin-bottom:-3px; cursor:pointer;" onclick="showContent(this);" />Title #2</h4>
<div style="margin-top:5px; display:none; border:1px solid red;">
<p> THis is the content of the #2 div</p>
</div>
</div>
</body>
</html>
June 22nd, 2007 — JavaScript, User Interface (UI)
Here is a simple javascript click and drag example. It contains a “Drag Handle” and gets the parentNode as the whole object to drag. So the “handle” could be an image in a div to click and drag around the window.
I used global variables and really the main criteria to use the script is to have your “drag handle” defined class=”dragHandle” as the global event handler “mousedown” does the rest.
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<style type="text/css">
<!--
.regular {
background-color: #0099FF;
border: 2px solid #000066;
}
.drag {
background-color: #0099FF;
border: 2px solid #000066;
filter:alpha(opacity=40);
-moz-opacity:.40;
opacity:.40;
z-index:100;
}
.dragHandle {
cursor:move;
background-color:#003399;
color:#FFFFFF;
display:block;
padding:2px 0;
width:150px;
text-align:center;
}
-->
</style>
<script type="text/javascript">
document.onmousemove=getMouseMove
document.onmousedown=getMouseDown
document.onmouseup=getMouseUp
var clicked = false;
var x;
var y;
var element;
var clickX;
var clickY;
reg = new RegExp("([0-9]*)px", "i");
function getMouseDown()
{
clickItem = event.srcElement;
if(clickItem.className && clickItem.className == "dragHandle")
{
clicked = true;
element = clickItem.parentNode;
if(event.offsetX || event.offsetY) {
clickX=event.offsetX;
clickY=event.offsetY;
}
else {
clickX=event.pageX;
clickY=event.pageY;
}
element.className = 'drag';
}
}
function getMouseMove() {
if(clicked == true) {
elementX = parseInt(reg.exec(element.style.left)[1]);
elementY = parseInt(reg.exec(element.style.top)[1]);
if(event.offsetX || event.offsetY) // IE
{
document.getElementById("x").innerHTML = event.offsetX;
document.getElementById("y").innerHTML = event.offsetY;
x=elementX + (event.offsetX - clickX);
y=elementY + (event.offsetY - clickY);
if(x < 0){x=0;event.pageX = clickX;}
if(y < 0){y=0;event.pageY = clickY;}
} else { // Netscape or FireFox
document.getElementById("x").innerHTML = event.offsetX;
document.getElementById("y").innerHTML = event.offsetY ;
x=elementX + (event.pageX - clickX);
y=elementY + (event.pageY - clickY);
if(x < 0) x=0;
if(y < 0) y=0;
}
element.style.left = x +'px';
element.style.top = y +'px';
document.getElementById('xval').innerHTML = x;
document.getElementById('yval').innerHTML = y;
}
return;
}
function getMouseUp() {
if(clicked == true)
{
clicked = false;
element.className = 'regular';
element = null;
}
}
</script>
</head>
<body>
<div id="dragContainer" class="regular" style="position:absolute; top: 34px; left: 135px; height: 200px; width: 150px;" >
<div class="dragHandle">
Drag Title
</div>
<div id="content">
Here is some text in a box being draged. <a href="#" >Link goes here</a>
</div>
</div>
<div id="dragContainer2" class="regular" style="position:absolute; top: 34px; left: 467px; height: 200px; width: 150px;" >
<div class="dragHandle">
Drag Title
</div>
<div id="content">
Here is some text in a box being draged. <a href="#" >Link goes here</a>
</div>
</div>
<div id="dragContainer3" class="regular" style="position:absolute; top: 148px; left: 303px; height: 200px; width: 150px;" >
<div class="dragHandle">
Drag Title
</div>
<div id="content">
Here is some text in a box being draged. <a href="#" >Link goes here</a>
</div>
</div>
<div id="data">
<br>X: <span id="xval"></span>
<br>Y: <span id="yval"></span>
<br>
<br>Xtop: <span id="xtopval"></span>
<br>Ytop: <span id="ytopval"></span>
<br>
<br>x: <span id="x"></span>
<br>y: <span id="y"></span>
</div>
<body>
</body>
</html>
June 14th, 2007 — JavaScript, User Interface (UI)
IE Select Box Bug: this is when you have a dropdown <select> box and you need to place an element over it temporarily like a pop up navigation menu similar to the ypslideout menu or any other <div> element. I mention the ypslideoutmenu because I was just using it because of it being “Search Engine Friendly” and needed to make one of the menus longer to add an additional page, but it went into a select box that I used for filtering data on multiple but similar pages.
I did not want to modify all the pages and place the select’s in a “less user friendly” location, nor did I want to change the menu system that users were comfortable with. With a fair amount of researching the issue, I found a potential solution. That was the “Iframe Select Box Hack and Bug Fix”. Here is a version using JavaScript to create the Iframe and get ride of it when you don’t need it here is the Javascirpt Iframe link.
Below is my static version that I got to work for my needs. The object is to create an IFrame (which actually can cover the select box) and then place your other code and text in front of the Iframe. You don’t actually load anything in the Iframe. I found that the Iframe could not be “visibility:hidden;” or “display:none;” and still cover the select item, so I turned the “alpha(opacity=0)” so that it is invisible to the user.
<div id="menu4Container" style="">
<!--IFRAME IE HACK to cover SELECT dropdown list boxes. Iframe needs to be resized for menu height and width. -->
<iframe id="menu4iframe" src="javascript:'';" marginwidth="0" marginheight="0" align="bottom" scrolling="no" frameborder="0" style="position:absolute; left:0; top:0px; display:block; filter:alpha(opacity=0);" ></iframe>
<div id="menu4Content" class="menu">
<div class="navlist" >
<ul>
<li><a href="#">test 1</a></li>
<li><a href="#">test 2</a></li>
<li><a href="#">test 3</a></li>
<li><a href="#">test 4</a></li>
</ul>
</div>
</div>
<br> </div>