Tag Archive for Css

Dealing with IE bugs if you keep all styles in one file

2011/08/15 Compatibility, Css No comments

IE6:

* html .input {
    margin-top:1px;
}

IE7:

*:first-child+html .input_box {
    margin-top:1px;
}

IE8:

@media \0screen {
  .color {color: #F00;}
}

Modernizr

2011/07/07 Css, Javascript, Tools No comments

Use it if you need to detect browser features or add conditional script loading.
http://www.modernizr.com/

Gradient Scanner

2011/07/07 Css, Tools No comments

This is a website-tool that analyzes the image file searching gradients and creates css rule for it.
http://gradient-scanner.com/

Drag & Drop in few lines of code

2011/07/06 Javascript No comments

Implementing possiblity of moving elements on website seems to be hard for person with little experience with Javascript. Only thought is “i need to use some library”, it’s realy good idea… ? when we want add only one feature ? Probably not… I’ll show You 30 lines of code which does it.

Download files

View Example

Please open Your favourite text editor or other tool which You are using to write Your code and type:

Primary content of HTML file

<!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" xml:lang="pl" lang="pl">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Drag &amp; Drop</title>
    </head>
    <body>
 
    </body>
</html>

Between of BODY tags add DIV element (with its drag indicator) which will be moved.

<div>
    <div class="drag_indicator"></div>
</div>

In next order we are connecting style sheet and javascript file:

<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="dragdrop.js"></script>

Body of .css file:

div.drag_indicator {
    width            : 100px;
    height           : 20px;
    background-color : yellow;
}
 
#block1 {
    width            : 100px;
    height           : 100px;
    background-color : red;
    position         : absolute;
}

In this way we defined red block of 100×100 pixels dimension with absolute position relative to browser window and yellow block of 100×20 pixels dimension.

In file with .js extension we are writing code which catch 3 actions in document object:

  • onmousedown – when user press mouse button
  • onmousemove – when user move mouse cursor
  • onmouseup – when user release mouse button

Please look, mouse movement will be supported only when mouse button is pressed, that’s why onmousemove event is captured in onmousedown event.

document.onmousedown = function(e) {
    e = (e || event);
 
    document.onmousemove = function(e) {
        e = (e || event);          
    }
};
 
document.onmouseup = function(e) {
};

Code which supports events in Internet Explorer browser

e = (e || event);

When mouse button is pressed “onmousedown” event is activated. In first order we catch clicked object:

var target = e.target || e.srcElement;

If it is a HTML element, we break a code because this is highest embed element.

if (target.tagName == 'HTML')
        return;

In next step, we are looking for “drag_indicator” class in clicked element. If it haven’t, we are checking its parent nodes as long as we’ll found it or we came to the top of elements tree.

while (target != document.body && (target.className || "").indexOf("drag_indicator") == -1) {
    target = target.parentNode || target.parentElement;
}

If correct element haven’t been found, we break a script

if ((target.className || "").indexOf("drag_indicator") == -1)
        return;

When correct element has been clicked (div with block_indicator css class) script will go further. Because we wants to move entire block, not only a indicator we needs to find out its object. block_indicator is a child of block, so we needs to get it as follow:

target = target.parentNode;

In nexts lines we credit cursor position at the moment of click to sx and sy variables. In dx and dy we’ll keeping alteration (default is 0) and in l and t current position of block element.

 var sx = e.clientX, sy = e.clientY,
      dx = 0, dy = 0,
      l = target.offsetLeft,
      t = target.offsetTop;

In Firefox browser we encount a inconvenience of moving block. We can solve this problem using that condition:

if (e.preventDefault) {
    e.preventDefault();
}

In this moment we have all initial values. Now time has come for implementing dragging.

When block is moving, this function is called

document.onmousemove = function(e) {
}

To change a block position we need to read mouse cursor current position (e.clientX, e.clientY) and subtract it from initial values simultaneously saving it to dx i dy.

dx = e.clientX - sx;
dy = e.clientY - sy;

Finaly, we need to set current position (last position + alteration) to block element.

target.style.left = (l + dx) + "px";
target.style.top  = (t + dy) + "px";

When mouse button will be release, following code will be ran:

document.onmouseup = function(e) {
    document.onmousemove = null;
};

In this way, we created cross-browser compatible code that is smaller than 1kB.