In one of my former posts 'Microblogging with Twitter' I ended the post with the statement that it didn't work in Internet explorer. So true, but I have a workaround for this now which make multiple user tweets display the same way no matter which browser is used.

Use the same approach described in the former post for Firefox, Safari etc. For Internet Explorer the solution is to use iframes. Since there seems to be a problem displaying several user tweets in the same window instead we will display several windows, where each one contains tweets for only one user,

Create an html-file (referred to as 'tweetsNW.html' below) for each user which have the following syntax:

<link rel="stylesheet" type="text/css" href="css/style.css" /> <a href="http://twitter.com/nickwick76" title="Follow Nic on Twitter" target="_blank"><img src="http://www.wohill.com/images/wo_nick.jpg" style="margin:3px 0 0 0" /></a> <div id="twitterNW" align="left" style="margin:0 0 0 15px"> <p>Please wait while my tweets load <br /><img src="http://www.wohill.com/images/wo_ajax_loader.gif" /></p> <p><a href="http://twitter.com/nickwick76" target="_blank">If you can't wait - check out what I've been twittering</a></p> </div> <script src="http://www.wohill.com/js/twitter.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> <!-- Get twitters --> getTwitters('twitterNW', { id: 5549092, count: 2, enableLinks: true, ignoreReplies: true, prefix: '<span style=\"color:#0000FF\">Nic said </span>', clearContents: true }); </script>

In the file where you want to display the tweets, use conditional statements for html to decide which code to run depending on if the browser is IE or not.

For Internet Explorer use:

<!--[If IE]> HTML CODE TO RUN <![endif]-->

For non-Internet Explorer use:

<!--[if !IE]>--> HTML CODE TO RUN (i.e. the code we used in the former post) <!--<![endif]-->

So if the browser is Internet Explorer use a script block like this for each user:

<script type=\"text/javascript\"> <!-- who = \"NW\" inwidth = 180; //--> </script> <script src=\"http://www.wohill.com/js/tweetsplugin.js\" type=\"text/javascript\"> </script>

What happens here is that two variables are set; 'who' and 'inwidth'. The 'who'-variable is specific to the user which we can see in the js plugin-file below. The variable 'inwidth' specifies the width of the iframe, which will be rendered by the script below. Depending on the value of the 'who'-variable different source files are set for the iframe and also different iframe id's:

function show_presence() { if (who == "RG") { var iframeId = "myframe1"; var tlink = " src=\"http://www.wohill.com/include/tweetsRG.html\""; } if (who == "NW") { var iframeId = "myframe2"; var tlink = " src=\"http://www.wohill.com/include/tweetsNW.html\""; } document.write("<ifr" + "ame" + " id=\"" + iframeId + "\"" + " name=\"tweetsIframe\"" + " width=\"" + inwidth + "\"" + " frameborder=\"0\"" + tlink + " marginwidth=\"1\"" + " marginheight=\"0\"" + " vspace=\"0\"" + " hspace=\"0\"" + " allowtransparency=\"true\"" + " scrolling=\"no\"" + " style=\"overflow:visible; display:none\">"); document.write("</ifr" + "ame>"); } show_presence();

So this is what we need to make it look the same way no matter what browser you use. One thing you might think of if you implement this is that, even though you haven't specified a height for the iframe there is still some overflow. There is a way to get passed this and to get dynamic iframe height as well. Just include some JavaScript code in the header of the main file and you're done. Have a look at this page, where I found it, for further instructions.

Here is a tip on how to use css on web pages.
As you develop your website you define your css-file and often uses its classes explicitly on the web page. Sometimes there is a need to use behaviour from different classes and you end up with creating a new redundant one for a particular situation.

Here is how you can do to use existing classes by cascading them for extended behaviour for an element on a web page when explicitly declaring them .

The css-structure looks like this:

.ce1 { color:#FF0000; font-size: 16px } .ce2 { color:#0000FF; }

The common way to explicitly use a css-class in an element is like this, i.e. refer to one css-class element:

<div class="ce1">Some text</div>

To use more than one classes do it like this:

<div class="ce1 ce2">Some text</div>

and it will render this way:

It doesn't matter which order the css-elements has in the div class argument - i.e. class="c1 c2" is the same as class="c2 c1".
This way you get the properties of both classes. If the same properties are specified in both classes , the precedence lies in which order the css-classes are declared in the css-structure. Should be the opposite in my opinion.

So if you declare the css-structure like this:

.ce4 { color:#0000FF; } .ce3 { color:#FF0000; font-size: 16px }

the same code :

<div class="ce3 ce4">Some text</div>

will render this way:

We are using drag boxes at Wohill to put information that can be easily accessed to save space.

An example is the wallpaper section to the left. The three latest creations are visible directly as links. To see all the others you can click on the fourth option "more..." which opens up a mini-window containing all wallpapers links.

This mini-window is really a so-called div, an HTML-element, that is there all the time but gets visible when clicking on "more...", This saves some space but another advantage with this solution is that you can click and drag and drop this little box or window all over the webpage.

Look at this dummy box:

If you place the marker on the orange bar that says "Drag-and-drop" and click and hold, you can drag it all over the web page. And it will still function the same way and still have the same content.

You can easily implement this on your own and tweak it for your own purposes.
What you need is a stylesheet with the following elements:

<style type="text/css"> .aBox { background-color: #FFFFFF; border: 1px solid #000000; color: #000000; padding: 0px; margin:0px; position: relative; }. aBar { background-color: #E1771E; color: #ffffff; cursor: move; font-weight: bold; font-size:12px; padding: 2px 1em 2px 1em; } .aContent { padding: 10px; } </style>

You need to add the actual HTML-code for the div somewhere:

<div id="boxToDrag" class="aBox" style="width: 200px;"> <div class="aBar" onmousedown="dragStart(event, 'boxToDrag')">Drag-and-drop</div> <div class="aContent" style="width: 100%;">This is the text that can also be a <a href="http://www.w3schools.com/" class="comments" target="_blank">link</a></div> </div>

And you need some JavaScript. Put it in the "head"-section or where you have your JavaScript:

<script type="text/javascript"> function Browser() { var ua, s, i; this.isIE = false; this.isNS = false; this.version = null; ua = navigator.userAgent; s = "MSIE"; if ((i = ua.indexOf(s)) >= 0) { this.isIE = true; this.version = parseFloat(ua.substr(i + s.length)); return; } s = "Netscape6/"; if ((i = ua.indexOf(s)) >= 0) { this.isNS = true; this.version = parseFloat(ua.substr(i + s.length)); return; } // Treat any other "Gecko" browser as NS 6.1. s = "Gecko"; if ((i = ua.indexOf(s)) >= 0) { this.isNS = true; this.version = 6.1; return; } } var browser = new Browser(); // Global object to hold drag information. var dragObj = new Object(); dragObj.zIndex = 0; function dragStart(event, id) { var el; var x, y; // If an element id was given, find it. Otherwise use the element being // clicked on. if (id) dragObj.elNode = document.getElementById(id); else { if (browser.isIE) dragObj.elNode = window.event.srcElement; if (browser.isNS) dragObj.elNode = event.target; // If this is a text node, use its parent element. if (dragObj.elNode.nodeType == 3) dragObj.elNode = dragObj.elNode.parentNode; } // Get cursor position with respect to the page. if (browser.isIE) { x = window.event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft; y = window.event.clientY + document.documentElement.scrollTop + document.body.scrollTop; } if (browser.isNS) { x = event.clientX + window.scrollX; y = event.clientY + window.scrollY; } // Save starting positions of cursor and element. dragObj.cursorStartX = x; dragObj.cursorStartY = y; dragObj.elStartLeft = parseInt(dragObj.elNode.style.left, 10); dragObj.elStartTop = parseInt(dragObj.elNode.style.top, 10); if (isNaN(dragObj.elStartLeft)) dragObj.elStartLeft = 0; if (isNaN(dragObj.elStartTop)) dragObj.elStartTop = 0; // Update element's z-index. dragObj.elNode.style.zIndex = ++dragObj.zIndex; // Capture mousemove and mouseup events on the page. if (browser.isIE) { document.attachEvent("onmousemove", dragGo); document.attachEvent("onmouseup", dragStop); window.event.cancelBubble = true; window.event.returnValue = false; } if (browser.isNS) { document.addEventListener("mousemove", dragGo, true); document.addEventListener("mouseup", dragStop, true); event.preventDefault(); } } function dragGo(event) { var x, y; // Get cursor position with respect to the page. if (browser.isIE) { x = window.event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft; y = window.event.clientY + document.documentElement.scrollTop + document.body.scrollTop; } if (browser.isNS) { x = event.clientX + window.scrollX; y = event.clientY + window.scrollY; } // Move drag element by the same amount the cursor has moved. dragObj.elNode.style.left = (dragObj.elStartLeft + x - dragObj.cursorStartX) + "px"; dragObj.elNode.style.top = (dragObj.elStartTop + y - dragObj.cursorStartY) + "px"; if (browser.isIE) { window.event.cancelBubble = true; window.event.returnValue = false; } if (browser.isNS) event.preventDefault(); } function dragStop(event) { // Stop capturing mousemove and mouseup events. if (browser.isIE) { document.detachEvent("onmousemove", dragGo); document.detachEvent("onmouseup", dragStop); } if (browser.isNS) { document.removeEventListener("mousemove", dragGo, true); document.removeEventListener("mouseup", dragStop, true); } } </script>

I got the code and idea from Notessidan, which in turn got it from BrainJar.com.

This drag-and-drop functionality can pretty easy be accomplished using Dojo as well as I will explain and give examples to later on.

One obvious extra-feature that should be added that I can think of is to "remember" the drag box settings for each user. This should be quite easily done using cookies. I will implement this sometime soon and let you know here as usual.