Archive

Posts Tagged ‘css’

Patu Digua – JavaScript/HTML/CSS Obfuscator/Compressor

September 6, 2009 1 comment

I finally managed to get a first version done for a web obfuscator and compressor.
First of all, why to use such a program. Some may say to hide your HTML/JavaScript/CSS code. Right. This could be one option. And it is powerful enough to do so. But I would personally use it to reduce the size of the code. I tested on a few projects and the code gets reduced up to 60-70% from the initial size. It’s not like a zip but quite good if you take into account that you’re dealing only with scripts.
It is very good practice to comment and indent your code, but this doesn’t have any value at all for the end user, it only eats up his/her bandwidth.
The application has a very nice and intuitive interface (check out the screenshots), it is very customizable and it can be run on both UI and command line mode. A nice feature in the graphical interface is the drop zone, where you can drag and drop files or folders and they are automatically processed. Just switch first to the drop zone mode.
If you want to play with it you can download it from SourceForge or check out its home page.
I would gladly want to hear your opinion or how do you use it.

Categories: Software, Web Tags: , ,

Behavior helping cross browser transparency

February 16, 2009 1 comment

One of the things that I hate the most when developing DHTML applications is that I have to write code for at least 3 browsers. And nowadays the differences between them are not so big, but 5 years ago …
If you write some DHTML code you have to consider at least Firefox (>=2), Internet Explorer (>=6) and Safari. These are the most common web browsers. Google Chrome is gaining lately some popularity, but you can assimilate it with Firefox. Opera and other browsers have such a low percentage usage that you can safely ignore them.
Every time you will see some JavaScript code that shows you how to do some tricks, you will probably see a notice that is cross-browser. And if you dig deep inside the code, you will probably see lots of code that does nothing else but testing for the browser and then applying specific code for it.
It would be so nice if all the browsers will implement the standard(W3C) and only the standard. Then you will have an environment by default cross-browser.
A compromise are the existing cross-browser frameworks. But … you have to learn a new framework and you’re stuck with that framework, as your code will not work without it. And, if in the future browsers will become more and more compliant (it’s not a joke, IE8 seems to make small steps in that direction), you are still stuck with that framework.
Nice will be a framework that will ensure the cross-browser thingy in a transparent way.
Let’s be more practical. Some time ago I wrote an article about how you can make HTML elements transparent in a cross-browser way. But you actually had to write code for three browsers. Safari follows the standards here, Firefox >= 1.x as well (we can ignore FF 0.x – nobody is probably using it anymore). So I will focus on a workaround to help you write

element.style.opacity = 0.7;

and to have the desired result even in IE. Let’s admit, IE has always been the “rebel kid”, but also the most used.
The idea is simple. Every time I modify the “opacity” property of an element style in IE, I will run some code to do the necessary translation and ensure the cross-browser in a transparent way.
Now, for this we will use behaviors, an IE specific feature. Which in this case is good, as the code will be ignored by other browsers.
First of all attach a behavior, described in cb-opacity.htc, to all the elements, through CSS code (put it in a STYLE tag or a separate .css file):

* { behavior: url(cb-opacity.htc);}

.
And now the most interesting part – cb-opacity.htc

<PUBLIC:COMPONENT lightWeight="true"> 

<PUBLIC:ATTACH event="onpropertychange" handler="doOnPropertyChange"/>
<PUBLIC:ATTACH event="oncontentready" handler="doOnContentReady"/>

<SCRIPT>
function doOnContentReady() {
    // when this behavior is attached to an element, then check if the opacity was not already set
    // most likely through CSS code
    if (element.currentStyle.opacity != null) {
        element.style.filter = 'alpha(opacity=' + (element.currentStyle.opacity * 100) + ')';
    } else if (element.style.opacity != null) {
        element.style.filter = 'alpha(opacity=' + (element.style.opacity * 100) + ')';
    }    
}

function doOnPropertyChange() {
    // every time the style opacity is changed through JavaScript, then modify the CSS filter too
    if (window.event.propertyName == "style.opacity") {
        element.style.filter = 'alpha(opacity=' + (element.style.opacity * 100) + ')';
    }
}
</SCRIPT>
</PUBLIC:COMPONENT>

And now IE has support for style.opacity. Pretty nice, isn’t it?

Later edit: The same can be applied to cssFloat and styleFloat.

Categories: Web Tags: , ,

Mobile web

January 10, 2009 3 comments

Mobile web is a new trend and a website for mobile devices is more like a must have these days. It is more likely that your company has a web site, but if you access it with a mobile device, the user experience could be unpleasant.

It is not easy to create a site for mobile devices and it is definitely hard to maintain. And not only because of the huge amount of mobile devices, but also because you have to keep it in sync with the normal one. Following I’ll give you a few pointers.

But first you have to clearly define your mobile web presence. Sometimes it doesn’t even make sense to invest time and effort into it. Let’s say that your solely company product is an FTP server. Definitely you won’t expect to sell it to mobile users. So your entire mobile website can consist of a page stating the company name and logo, product name and description, the link where you can find out more information by browsing with a non-mobile web browser. The best part is that you don’t have to update it and it could remain like this for many years. And that could be the case with many other products for which the target user is an enterprise one, with required access from a non-mobile web browser, like a SDK, online 3D highly graphical game etc.

On the other side of the coin, is when your company product is an exclusively mobile product, like a game for mobile devices, ring tones etc. Then you can simply have only a mobile web site. Of course the desktop users won’t an experience up to their device capabilities, but they aren’t actually your target and your site is not of any real use to them.

And there is the case where your presence has to be strong in both worlds. Following I will concentrate more on this, but most of the below pointers apply to the above cases as well.

  1. CSS. First of all, your web site has to be CSS-based. Forget about tables, use DIVs. Move all CSS rules into external files. Keep the HTML as clean, simple and free of layout settings as possible. Then supporting a mobile device will be as simply as defining a CSS file.
    You can include a CSS in a page and have it active only for mobile devices using the handheld value for the media attribute of the link tag. Even tough this is very convenient, I wouldn’t recommend to be the only thing to rely on. I would define a series of CSS files for each device or set of devices. So, you would include in your HTML the following lines:

    <link rel='stylesheet' type='text/css' href='desktop.css' media='screen'/>
    <link rel='stylesheet' type='text/css' href='[mobile].css' media='handheld'/>
    <link rel='stylesheet' type='text/css' href='print.css' media='print'/>
    

    [mobile] should be dynamically generated and it should point to a file corresponding to the user mobile device. Notice also that I didn’t forget about the printable version :). The CSS media target can be specified also with

    <style type='text/css' href='[mobile].css' media='handheld'>
    </style>
    

    or directly in the CSS

    @media handheld {
        /* mobile specific CSS rules */
    }
    

    If you want to split the devices and optimize for groups, one important criteria could be the screen resolution.

    Even tough this is a very clean approach, as I already said, I would not recommend this to be the only one, especially for very large and complex websites. The mobile website should be a stripped down version, both in terms of layout (most important) and content.

  2. XHTML. Use XHTML instead of HTML. It is better structured and much easier to maintain and to automatically transform.
  3. Dynamically generated content. Even after using CSS for layout, you still have to have different HTML code, then consider generating automatically on the server the specific parts inside the page. For performance purposes you should have in mind using some kind of cache for those automatically generated parts.
    If your entire website is automatically generated, like a portal or an e-commerce website, then you could have different layouts. But don’t fall into having too many device specific code. That should be maintained as well.
  4. Transcoded content. It is the case when you already have a website, specifically a larger one, more likely on the non-mobile web, and you want to reach the mobile users as well. You should consider implementing an automatic translation tool between the two layouts. Of course, here a CSS based website will make your life much more easier. XHTML too.
    As a translation tool, I would recommend XSLT. If your code is HTML, then you have to convert it first to XHTML.
    Don’t forget to resize the images too. Many devices supports images only up to a certain file size, width or height.
    This is a fast and cheap solution, but probably not the best one. Also take into account here the size of your website, otherwise the translation tool could become more expensive then recreating your entire website. And remember that it comes to a cost in performance.
  5. Real life testing. Consider using for testing real mobile devices, not emulators. Use mobile devices with different screen resolution, operating systems, browsers. Don’t forget about touch screens either.
  6. Performance. Test for performance here too, but be careful how you define it. The bandwidth here is different: smaller pages, smaller images, different number of users etc.

If you’re interested in recognizing user’s mobile device on the server side, see my other article: Mobile device recognition.

I hope these will help you in outlining your mobile web personality, but as I said before, first take a step back and think of what exactly you need, want and invest in this.
The mobile web is for sure a different, but thrilling experience.

Categories: Web Tags: , , ,

Fixing IE: CSS fixed position

November 14, 2008 2 comments

I will start a series of articles about how you can fix some IE bugs. We all agree that IE is very buggy, but instead of whining, let’s see what we can do about it. So I will present you the problem, the fix, explain the fix and how you can EASILY INTEGRATE it.

Before, I will explain you a few things that I will use in these fixes. There are few different things in IE when it comes to CSS.

If you prefix a CSS property with _, IE will still recognize it. If you think this can be very useful. You can specify values for CSS properties only for IE. Let’s take an example.

color: green;
_color: red;

The font color will be green in all the browsers, except IE, where it will be red.
Instead of _, you can also use *, + and some other special signs.

The CSS value supports in IE a special value: expression([expr]). The [expr] is a JavaScript expression, which is evaluated and the CSS value is assigned to it. Again an example:

_height: expression((1 + 1) + 'px');

The CSS height in the above example is actually 2 pixels in IE. In the expression we can even use this to refer to the element for which the CSS value is applied.

Now let’s get back to the current issue. If you specify the fixed value for the position property, the element should be absolutely positioned, but relatively to the viewport, instead of the document. For more detailed info, please see the CSS specification. Not surprisingly, this works in most of the browsers, except IE.
And now, the fix. Which is actually very simple. We will use absolute positioning but we will calculate the coordinates dynamically relative to the viewport.
So the CSS code

position: fixed;
top: 10px;
left: 20px;

will have the following IE equivalent

_position: absolute;
_top: expression(((ignoreMe
= document.documentElement.scrollTop
? document.documentElement.scrollTop
: document.body.scrollTop ) + 10) + 'px' );
_left: expression(((ignoreMe
= document.documentElement.scrollLeft
? document.documentElement.scrollLeft
: document.body.scrollLeft ) + 20) + 'px' );

.
Don’t remove the ignoreMe variable as this will force the expression to be evaluated not only the first time the page is loaded, but always.

In the end, a live example. And if you complain that in Mozilla the things are smoother, then simply switch to Mozilla :).

Categories: Web Tags: , , ,

Web progress bar

September 16, 2008 4 comments

Would you like something like this in your web page?
web progress bar
Then I will show you how to do it.
The basic idea is pretty simple: implement it using 3 DIVs – one for the progress bar background, one for the completed part and one for the label (indicating the completed value or percent). They are stacked on top of each other in the specified order, from bottom to top.

We will have a main DIV, the actual progress bar, and inside it a completed one that will take as much space from its parent as the task is completed and a label to indicate that percentage.

On the main DIV we specify a border that will enclose the entire progress bar and a background that will indicate the remaining part. We also specify a different background on the completed DIV to indicate the completed part of the task. As for the label we specify only a font color and the background should remain transparent, so the label just sits on the progress bar.

Both children DIVs of the progress bar are floated to left and the label one has a negative margin to allow to be displayed at the same coordinates as the completed one.

  • HTML code

    <div id='progressbar' class='progressbar'>
        <div id='completed' class='completed'></div>
        <div id='label' class='label'>0%</div>
    </div>
    

  • CSS

    .progressbar {
        /* only for better layout :) */
        background-color: white;
        border: solid 1px black;
        width: 100px;
        height: 10px;
        font-family: arial;
        font-size: 10px;
    }
    
    .progressbar .completed {
        /* mandatory */
        width: 0%; 
        height: 100%; 
        z-index: 1; 
        float: left;
    
        /* only for better layout :) */
        background-color: navy;
    }
    
    .label {
        /* mandatory */
        width: 100%;
        height: 100%;
        z-index: 2;
        float: left;
    
        /* only for better layout :) */
        text-align: center;
        vertical-align: middle;
        color: yellow;
    }
    

    As you can see some of the CSS properties are mandatory for the component to render as a progress bar, as some of the properties are used only for a visually appealing layout.

  • JavaScript

    function setPercent(percent) {
        document.getElementById("label").innerHTML = percent + "%";
        document.getElementById("label").style.marginLeft = "-" + percent + "%";
        document.getElementById("completed").style.width = percent + "%";
    }
    

Next step will be to wrap all these into a nice component (JavaScript class). But this depends only on your architectural skills, as now you have the basic technique.

And in the end you can see a full working example, tested on IE6, FF3 and Safari 3. If you get rid of the hassle of implementing this yourself and you want a ready to use and easy to integrate progress bar component for your web pages you should see the MyUI JavaScript library. A demo is also available.

Just a side note, a throbber (or indeterminate progress bar) is easier to implement, that one being only a simple animated image.

Web Modal Dialogs

March 2, 2008 1 comment

As I highlighted in a previous post, nowadays transparency plays an important role in web pages. And you can do a lot with it, especially regarding visual aspect on web interactive applications. How you can make an element transparent, and more importantly do it cross-browser, I described in my previous post, so please refer to it,as I will not insist on that one anymore.
I will tell you a little trick that will help you improve the look and feel of your web site. If you want a modal dialog in your desktop applications is pretty simple. You will probably think that the things are getting complicated with web pages, but it isn’t so. And this is what I’ll show you how.
First of all, let’s start by simply displaying a dialog. We will simply use for this an absolute positioned DIV, which is much better experience than a browser dialog window (using window.open()).

<DIV id="aDialog">Put whatever content you want in here</DIV>


and the CSS will look like

#aDialog {
    position: absolute;
    z-index: 10;
    width: 400px;
    height: 300px;
    top: 150;
    left: 200;

    background-color: white;
}


This DIV can shown/hidden using JavaScript

document.getElementById("aDialog").style.display = "block" / "none";


But this is not modal as you can still interact with the rest of the page, so let’s make it modal. Much simpler than you think. Just put a div all over the page.

<DIV id="allover"></DIV>


and the CSS …

#allover{
    position: absolute;
    z-index: 5;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

    background-color: black;
}


So now, everything will be black except your previously created dialog. But probably you won’t exactly like this, but rather everything blurred except your dialog. So the new CSS will be

#allover{
    position: absolute;
    z-index: 5;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

    background-color: black;
    opacity: 0.5;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
    -moz-opacity: 0.5;
}


For more interesting effects you can choose also another background color or even an image. The z-index of the allover DIV should be bigger than the one of the document, but smaller than the one of the dialog. The allover DIV can shown/hidden in the same way as the dialog.
One more thing, before ending this. If you probably tried or just wondering why we need two different DIVs and not simply using only one, the answer is quite simple. If a DIV is transparent, then all its child DIVs are transparent, even tough you modify accordingly the CSS properties.
Hope this trick is useful for you and good luck in creating nice web applications.
And just to see everything working here is an example.

Categories: Web Tags: , ,

Cross-browser custom CSS cursors

January 8, 2008 102 comments

I saw sometime ago the funny drawing below.
Time breakdown of modern web design

You can see that big portion is for making the design work in Internet Explorer.
First you laugh, but if you developed rich web sites/user interfaces you actually realize that this is only underevaluated. I would also extend it and say “make the design cross-browser”.

The tip that I’ll present you next it’s actually a small workaround and it will help you reduce that big pie slice.

Let’s say that you want to change the cursor for a page, for links or for some other specific elements. How? Using CSS. Then we should first go at W3C and read how to do it.
So the cursor property is the answer.
As good web developers we will separate the CSS from HTML and create the following structure

  /
  +-- cursor.html
  |-- cursor
      +-- cursor.css
      |-- cursor.cur    
  • cursor.html
    <html>
      <head>
        <link rel="stylesheet" type="text/css" href="cursor/cursor.css">
      </head>
      <body>
        Hello world!
        Look at me, I have a new cool cursor! 
      </body>
    </html>
    
  • cursor.css
    BODY {
        cursor: url(cursor.cur);
    }
    

Now everything should be set, so let’s give it a spin. Of course, we want everything to be cross-browser. For the sake of testing open cursor.html in Internet Explorer, Firefox and (for those Mac lovers) Safari. Surprise, the cursor is the default one in IE and Mozilla, but it’s the desired one in Safari. Frustrating isn’t it? You write W3C compliant code and it doesn’t work in the first two major browsers. The “best” part is that this is happening for different reasons.

Let’s first take care of Mozilla. Remember from CSS2 specification that cursor property holds a list of possible cursors and the browser should use the first found one or the default one if none is found.
Add to this list default and modify the cursor property from

cursor: url(cursor.cur);

to

cursor: url(cursor.cur),default;

And now refresh the page in Firefox. Even tough it doesn’t make sense at all, it will work and you will see your nice cursor.

And now IE comes next (as it still doesn’t work). As you noticed in cursor.css, we used for the cursor property relative URIs. To quote from there: For CSS style sheets, the base URI is that of the style sheet, not that of the source document. But if you modify the cursor property to

cursor: url(cursor/cursor.cur),default;

this will actually work. This is because in IE, for style sheets, the base URI is that of the source element, not that of the style sheet. Totally opposite to W3C specifications, but, yeah … that’s MSIE.

And if we want to still work in Firefox and Safari we have to keep the property value as below:

cursor: url(cursor.cur),url(cursor/cursor.cur),default;

. So everytime you want to define a crossbrowser CSS cursor you should define it as a list containing the url relative to the source element, the url relative to the style sheet and the default value.

The above examples were tested on IE 6.0.2900.2180, IE 7.0.5730, Firefox 2.0.0.11, Firefox 3.0.1, Safari 3.0.4, all under Windows XP SP2. I also tested in Opera 9.25, but it seems that it doesn’t support custom cursors.

Later edit – Jan 28, 2009:
The above examples were also tested under Firefox 3.0.5, Internet Explorer 8 beta 2 (inside IETester), Internet Explorer 8 RC1 (version 8.0.6001.18372CO), Safari 3.2.1 (525.27.1), Google Chrome 1.0.154.43 under Windows Vista.
I also tested with IE 5.5 (inside IETester), but it doesn’t support custom cursors.
There is also an example.

Later edit – Feb 10th, 2010:
If you want a custom cursor for an image (IMG) or link (A), then you need to attach the CSS to that tag, not to an enclosing container (e.g. DIV).

Tips’n’tricks: CSS float in JavaScript

December 13, 2007 2 comments

The CSS float property it is often used (if you don’t layout your pages with evil pages). It is pretty easy to setup using CSS code:

float: left;

.

If you want to setup a CSS property from JavaScript it is usually done using the syntax:

element.style.property = value;

and - signs are replaced with camel case (e.g. backgroundColor instead of background-color).
This won’t work for float too. float is a reserved JavaScript word, so you should use cssFloat instead. As usual ;), Internet Explorer is special and you should use styleFloat instead.

That’s it. Short small tip, but very useful if you want to dynamically modify the flow of elements.

Categories: Web Tags: , ,

Web transparency

November 26, 2007 2 comments

If a few years back, transparency was the cool kid in user interfaces, nowadays it’s a must if you want to have a user interface that is not dull and lives in the present.
And I’m talking here not only about desktop graphical interfaces, but also about web interfaces. With all the comotion about Web2.0 and web applications, transparency is something that you should definately see ;) in your web site.

But how to do it? The browsers wars will definately be a battle to take and win here. But to keep it simple, I’ll tell that there are three ways to do it: W3C, Internet Explorer and Mozilla.

  • W3C. If we will go to their site http://www.w3.org/TR/css3-color/#opacity we will see that the CSS property handling this is called opacity. The possible values are floats between 0 and 1, with 0 totally transparent and 1 totally opaque. The intermediate values represent different levels of transparency.

    But you probably noticed that this is a CSS version 3 property and unfortunately very few browsers supports it currently. Latest versions of Firefox do support this (I tested it with version 2.0.0.8).
  • Mozilla. In Mozilla the things are the same, but the name of the CSS property is different: -moz-opacity. As this is an obsolete way, you should prefer the CSS3 property and use this only for backward compatibility.
  • Internet Explorer. Here things are a little bit more complicated. You should use the filter property and the Alpha. As I said, a little bit more complicated, that’s why here’s below a code sample:

    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);

    The opacity argument can have integer values between 0 and 100, with 0 totally transparent and 100 totally opaque.

And this is for CSS. But what if you want, e. g. to create a fade in/fade out effect and to dinamically modify the transparency? Then you should simply use JavaScript and I think the best way to explain how it is through code samples.

  • W3C method:

    element.style.opacity = opacity;

  • Mozilla method:

    element.style.MozOpacity = opacity;

  • Internet Explorer method:

    element.style.filter = 'alpha(opacity=' + (opacity * 100) + ')';

In these samples, the opacity parameter value has the same semantic as in the CSS3 case. Please note that in the IE code sample this value is multiplied by 100.
And now if we put all these together we have cross browser methods for getting and setting the transparency of an HTML element:

function getOpacity(element) {
    var v = element.style.opacity;
    return ((v == null || isNaN(v)) 
            ? 1 : element.style.opacity);
}

function setOpacity(element, opacity) {
    if (opacity < 0)
        opacity = 0;
    if (opacity > 1)
        opacity = 1;
    element.style.opacity = opacity;
    
    if (document.getElementById("ie").checked 
            && (element.style.filter != undefined))
        element.style.filter = 'alpha(opacity=' 
                + (opacity * 100) + ')';

    if (document.getElementById("moz").checked 
            && (element.style.filter == undefined))
        element.style.MozOpacity = opacity;
}

You can see these samples working here.

AJAX vs DHTML

July 23, 2007 5 comments

AJAX is gaining a lot of adopters these days and it seems to be like the new cool kid in town. If you’re in the web development area, you must use AJAX, otherwise you’re not cool at all.

But more than this, AJAX became a buzzword. And I definitely don’t like buzzwords. Because amateurs would try to use that word for everything that is related to that area.

We have to clearly see the difference between AJAX and DHTML. AJAX stands for Asynchronous JavaScript and XML and it is simply a way to communicate with a web server without making a new request in the browser. And this will happen more likely without user really feeling it. DHTML stands for Dynamic HTML and it is a set of technologies used for dynamically modifying a web page, usually incorporating JavaScript and CSS.

AJAX and DHTML are not excluding each other, but working together. With DHTML you can dynamically modify a site using client-side code. But sometimes you cannot simply have everything on the client side (or it could be too expensive to have it) and you should interact in some way with the server-side code. And then AJAX comes into stage, just to simply create a connection between some JavaScript client-side code (on an DHTML site) and a web server. Before this, you could have used signed Java applets or Flash, but this offers the opportunity of a pure JavaScript solution.

Actually you could even say that AJAX is a small part from DHTML, but people are using it the other way around. I have to admit that even the name was chosen to fit a new upcoming buzzword. With AJAX (Asynchronous JavaScript and XML) you can even do synchronous requests and handle HTML or plain text, even tough the initial intent and good practice is not to do it.
I know that it is cool to use all these new buzzwords, but it will be much more correct to use the right term.

For a good AJAX reference you can use Wikipedia. Read also the articles referenced at the end, I would especially recommend the ones from IBM developerWorks.

Categories: Web Tags: , , , , ,
Follow

Get every new post delivered to your Inbox.