Sorin

This user hasn't shared any biographical information

Homepage: http://point47.com/journal/

Jabber/GTalk: forapathy


Posts by Sorin

Quickly build a jQuery dropdown menu

Jul 6th

Posted by Sorin in jQuery

No comments

Full demo here: jQuery Drop Down Menu

jQuery

1
2
3
4
5
6
7
8
9
10
11
$(document).ready(function(){

    $('#navigation li').hover( function()
    {
        $(this).children('ul').not(':animated').slideDown('#navigation li ul');
    }, function()
    {
        $(this).children('ul').slideUp('#navigation li ul');
    });
   
});

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<ul id="navigation">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a>
       
            <ul>
                <li><a href="#">About us</a></li>
                <li><a href="#">More info about</a></li>
                <li><a href="#">Even more info</a></li>
            </ul>
       
        </li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>

    </ul>

CSS

1
2
3
4
5
6
7
#navigation {position: relative;float: left;display: inline;}
#navigation li {position: relative;float: left;display: inline;}
#navigation li a {float: left;display: inline;text-decoration: none;color: blue;padding: 4px 10px 4px 10px;}

#navigation li ul {position: absolute;top: 26px;left: 0px;margin: 0;padding: 0;background: #cccccc;display: none;width: 180px;}
#navigation li ul li {float: left;width: 100%;margin: 0;padding: 0;border-bottom: 1px dotted #959595;   }
#navigation li ul li  a {float: left;width: 100%}

Full demo here: jQuery Drop Down Menu

Enjoy!

Hey did you know about this?
wordpress themes, site templates

Popularity: 3% [?]

Post data from Actionscript 3 to PHP

Jun 25th

Posted by Sorin in ActionScript

No comments

If you need to send some data to a PHP script and don’t want to use services like Zend_AMF you can try posting that data directly to the PHP script.
With the code bellow I’ll actually send an email.

// ActionScript 3 Code
// PostToPHP.as

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
package
{
        import flash.events.Event;
    import flash.events.HTTPStatusEvent;
        import flash.net.URLLoader;
    import flash.net.URLLoaderDataFormat;
    import flash.net.URLRequest;
    import flash.net.URLRequestMethod;
    import flash.net.URLVariables;

    public class PostToPHP
    {
        // url to post
        private var postToURL:String = "http://www.yourdomain.tld/post_receiver.php";

        public function PostToPHP()
        {
            // create request
            var request:URLRequest = new URLRequest( postToURL );

        // set post variables
            var requestVars:URLVariables = new URLVariables();
            requestVars.emailTo      = 'email.address@mailservice.tld';
            requestVars.subject      = 'This is a test email';
            requestVars.message = 'An this is the content of the message.';
       
            // assign variables to the request and set request method type 
            request.data     = requestVars;
            request.method = URLRequestMethod.POST;
   
            // load the request and listen for a response from the PHP script
            var urlLoader:URLLoader = new URLLoader();
            urlLoader.dataFormat = "text";
            urlLoader.addEventListener(Event.COMPLETE, urlLoader_handler, false, 0, true);
            urlLoader.load(request);
    }
       
    private function urlLoader_handler(e:Object):void
    {
           // the response given from the PHP script will be traced here
       trace(e.target.data);
    }

// PHP code
// post_receiver.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// assign POST variables and clean them
// filter_var() is available from PHP 5.2.0
$emailTo    = filter_var($_POST['emailTo'], FILTER_SANITIZE_EMAIL);
$subject    = filter_var($_POST['subject'], FILTER_SANITIZE_STRING);
$message   = filter_var($_POST['message'], FILTER_SANITIZE_STRING);

// send mail and remember function response
// boolean response
$mailSent = mail($emailTo, $subject, $message);

// the echoed response will be traced in actionscript
if($mailSent == true)
{
    echo 'mail sent';
}
else
{
    echo 'mail NOT sent';
}

Simple.

Popularity: 4% [?]

Modal box on page load with jquery fancy box and cookie plugin

Jun 24th

Posted by Sorin in jQuery

6 comments

What I want to do?
I want to show a message or an image on the first visit on my website.

What I need to do this?
- FancyBox jQuery plugin that you can get from here: http://fancybox.net/.
I use this plugin as a better alternative to the old LightBox plugin because it resizes the loaded image to the current page size.
- jQuery Cookie plugin that you can get from here: http://plugins.jquery.com/project/cookie
This one I will use to remember if the modal box was already shown. I want to show the modal box only on the first visit on the site. No on every page load :P .
- oh and of course the jQuery library: http://jquery.com/

How I do this?
Put this in the head section of the html code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
// load all the libraries
// i like to put them in a folder called "public" then "js"
<link rel="stylesheet" type="text/css" href="public/js/fancybox/jquery.fancybox-1.3.1.css" media="screen" />
<script type="text/javascript" src="public/js/jquery.min.js"></script>
<script type="text/javascript" src="public/js/fancybox/jquery.mousewheel-3.0.2.pack.js"></script>
<script type="text/javascript" src="public/js/fancybox/jquery.fancybox-1.3.1.js"></script>
<script type="text/javascript" src="public/js/jquery.cookie.js"></script>

$(document).ready(function(){

/**
      *  MODAL BOX
      */
    // if the requested cookie does not have the value I am looking for show the modal box
    if($.cookie("modal") != 'true')
    {
        var _message_to_show = '<h2>Hi!</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis mi eu elit tempor facilisis id et neque</p> <br /><br /><a href="#" id="modal_close">ENTER</a> <a href="http://www.google.com" id="modal_exit">EXIT</a><br /><br />';
       
        // on page load show the modal box
        // more info about the options you can find on the fancybox site
        $.fancybox(
            _message_to_show,
            {
                'width'             : 350,
                'height'            : 300,
                'transitionIn'      : 'none',
                'transitionOut'     : 'elastic',
                'centerOnScroll'    : 'true',
                'overlayOpacity'    : 0.9,
                'overlayColor'      : '#000',
                'modal'             : 'true'
            }
        );
       
        // in the message is a link with the id "modal_close"
        // when you click on that link the modal will close and the cookie is set to "true"
        // path "/" means it's active for the entire root site.. if you set it to "/admin" will be active on the "admin" folder
        // expires in 7 days
        // "modal" is the name i gave the cookie.. you can name it anything you want
        $('#modal_close').live('click', function(e) {
            e.preventDefault();
            $.cookie("modal", "true", { path: '/', expires: 7 });    
            $.fancybox.close()
        });
    }    
   
});

Oh the live demo is HERE!

And that’s it! Enjoy!

Hey did you know about this?
wordpress themes, site templates

Popularity: 16% [?]

Tips about writing CSS

Apr 8th

Posted by Sorin in CSS

No comments

Here are some random tips that I think can be useful to anyone who starts playing with CSS or already is doing that.

1. Reset HTML elements for all browsers.

The first thing I do is reset the default styles that the browsers set on elements. I consider this the most important thing to do before starting writing the actual CSS styles for the layout. For example Internet Explorer sets bigger margin values for elements like “input”, “textarea” and so on, than Firefox or Chrome.
To reset the styles I prefer to use Yahoo Reset or you could try writing your own.

2. Centering elements with CSS

To center elements with CSS first you need to set the elements “width” and then setting their margins.
So.. we want to center the design/layout of our site in the browser.
We have this HTML

1
2
3
<body>
<div id="layoutWrapper">site content</div>
</body>

and the CSS to center the layoutWrapper div is:

1
2
3
4
5
#layoutWrapper
{
    width: 960px;
    margin: 0px auto;
}

Now the layoutWrapper div is centered with a top margin of 0 and the other margins are set to auto.

3. Quick fix for the double margin bug in Internet Explorer 6

The problem is that if you set margin or padding on a floated element those values are doubled in IE6 and get a f*ucked up layout.
To solve this problem there are a lot of tricks but the most easiest and straight forward is to set also “display:inline” on the floated elements.
This code will get you a margin left of 40px in Internet Explorer 6.

1
2
3
4
5
6
.element
{
   float:left;
   width: 200px
   margin-left: 20px;
}

By adding display:inline now margin-left is also 20px in IE6

1
2
3
4
5
6
7
.element
{
   display:inline;
   float:left;
   width: 200px;
   margin-left: 20px;
}

4. Font size in EM or PX?

For a period of time I used em’s to size the fonts because in IE6 you can’t re-size the font if it’s in pixels.
So if a title was 21px in font size.. in IE6 it will remain in 21px if you select text size to be larger. If it was in em’s for example
that title will get larger.
A trick that I used to easier set sizes in em’s is I was setting the body font size to 62.5%.

1
body { font-size: 62.5%; }

So now if you set a font size of 2.1em it will be the same as 21px.

1
2
h1{font-size: 2.1em;}
h2{font-size: 21px;}

The sizes of the H1 and H2 will be the same 21px.
For some time now I don’t care so much for IE6 users because there are 9 years since it was released and there are 4 years since version 7 was released.
So if it’s not plain stupidity I really believe it’s plain ignorance.

5. ID’s or Classes? When to use?

Simple. Use id’s to target single elements or classes to target elements that are repeating in the page.
More complex would be that elements with and id should be unique or else you cannot validate your HTML document.
By using classes on elements you can use the same class to target multiple elements or also you can use multiple classes to target the same element.

6. The equal columns trick

This is a trick that I use rarely because it’s kind of an hack and hacks are never a good idea :P .
More info for this trick you can find here.
There are also a lot of variations but I find this one the easiest to implement.

7. Containers and children widths

I usually set width only to container elements and for the children I set margins and padding or width of 100%.
So if I need to change the width of the container the children automatically change their size also.

8. IE6 PNG transparency problem (isn’t really a CSS related but like.. who cares)

Everybody loves PNG’s. And how can you not? Full quality, transparency support, smaller size files on graphics (jpeg’s are still better for big images).
But IE6 doesn’t like them at all. So we must use some tricks.. and there are a lot.
From that “a lot” I prefer one: DD_belatedPNG by Drew Diller
This one is the best I could find out there. And I tested a lot of them bad scripts :P

Popularity: 5% [?]

Virtual URL – link shorten service

Feb 20th

Posted by Sorin in Bulk

No comments

VUS.me is a new and very simple link shorten service made with simplicity and quick access in mind.
Looks very promising so give it a try.. or more :D .

http://vus.me

Popularity: 6% [?]

123»