iBlog random » mootools http://blog.zurka.us Just another WordPress weblog Tue, 28 May 2013 20:28:47 +0000 en-US hourly 1 http://wordpress.org/?v=3.6 Change the location of your external links with MooTools http://blog.zurka.us/change-location-your-external-links-mootools/ http://blog.zurka.us/change-location-your-external-links-mootools/#comments Fri, 11 Dec 2009 18:02:52 +0000 nasal http://blog.zurka.us/?p=1050

So a thing I was trying to do for quite some time now but using php and rexep, which I hate and don’t understand at all, was trying to change the location (href) of all the external links on my page to something else so I could easily track the clicks. Or maybe display some kind of toolbar on top of the page, something like I guess digg does.

Today I remembered that MooTools is my friend and I could use it to accomplish this.. and after 2 minutes and 5 lines of code I did it!

I’m guessing you already have MooTools up and running. Let’s take a look at the code.

$$('a').each(function(link) {
    if(link.hostname != window.location.host) {
        var loc = link.get('href');
        link.set('href', './out.php?' + loc);
    }
});

So we create an array of all the links on our site and check if their hostname is the same as the hostname of our site. If it is different we read the value of href (the link) and change it to our php script that is going to track the click (or whatever) and add the previous link, so it knows where it should be redirected.

This is it! Easy peasy!

Oh and have a happy December!

]]> http://blog.zurka.us/change-location-your-external-links-mootools/feed/ 0 Create A Sliding AD Showing Up From The Bottom *upd 15.06.2009* http://blog.zurka.us/create-sliding-ad-showing-from-bottom/ http://blog.zurka.us/create-sliding-ad-showing-from-bottom/#comments Wed, 15 Apr 2009 19:57:31 +0000 nasal http://blog.zurka.us/?p=896

Did you ever want to do something like this? An ad showing from the bottom of the screen?

Well, today I’m going to show you how to do it, without the need to spend $47 :D Yay!

We are going to do reproduce this by using mootools and some styling. Again, it’s an easy thing to make.

Let’s start by including mootools in our document and writing a little script that will basically do all the job that need to be done. This goes into the <head> of our html file.

<script src="inc/mootools-1.2.1-core.js" type="text/javascript"></script>
<script>
    window.addEvent('domready', function() {
        slideUp = new Fx.Tween('footerad', { property: 'height', duration: 1000 });
        (function(){ slideUp.start(0, 90) }).delay('1000');
        $('closead').addEvent('click', function() {
            $('footerad').tween('height', 0);
        });
});
</script>

Let’s analyse the script:

  1. When the DOM is ready, execute the following function:
  2. slideUp is the variable in which we ‘store’ the motion of our sliding div. We give a tween effect to our element with ‘footerad’ as ID
  3. Next, we make the function execute after 1 second (1000ms) and make it raise the height from 0px to 90px. This is going to be the height of our slider on the bottom
  4. Now, we add a button that will close the ad if clicked. We could do something more complicated here by adding some code that would write a cookie so the ad doesn’t show up again if the user reloads the page but we don’t need it, we want to bug the user, right?

Now that’s it with the script. All we need to do now is create or DIV element (if you go check out the page at the top of this post you will see they use an IFRAME.. I’m not going to use it).

Now, I think that if you don’t understand how DIV’s work you won’t understand a shit here. Feel free to ask for further explanation in the comments. Oh and I will style the divs directly here, without a css file, so we see how it works.

<div id="footerad" style="display: block; position: fixed; bottom: 0; left: 0; width: 100%; height: 0;">
    <div style="position: relative; left: 0; bottom: 0;" id="positioned_relatively">
        <div style="background: #002949; border-top: solid 3px #3b8ccb; position: absolute; top: 15px; left: 0; width: 100%; height: 75px; color: white;" id="background_color">
            <img src="http://server.zurka.us/images/RSS-Blue.png" style="position: absolute; left: 20px; top: -15px;" id="RSS_icon" />
            <div style="margin: 10px 0 5px 105px;" id="text_div">
                <div style="font-size: 15px; margin-bottom: 7px; font-family: 'trebuchet ms', arial, sans-serif;">This is a test, the form is not working!</div>
                <div style="font-size: 12px;">Name: <input type="text" name="name" style="margin-right: 10px;" /> Email: <input type="text" name="email" style="margin-right: 10px;" /> <input type="submit" value="Subscribe!" /></div>
            </div>
        </div>
        <div style="position: absolute; right: 5px; top: 0; font-size: 11px;" id="close_button">
            <a href="#" id="closead">[close]</a>
        </div>
    </div>
</div>
  1. We give the first DIV the ID ‘footerad’, since that’s the id we told the script to show when the dom is ready. We style it so it will cover 100% of the width, will be 0px high (the script is going to increase the height with a nice movement) and we make it stay fixed at the bottom of the page. The background of this element is not set, so it will be transparent.
  2. The second DIV stays there only because we need a relatively positioned element so we can absolute position other elements inside it.
  3. The third div we give a background color and a border on the top, we position absolutely, 0px from the left so it sticks left and 15px from the top so we have some transparent background on top of it (the RSS or whatever icon will look like it’s coming out of the slider)
  4. Now it’s time to position our rss icon. We position it absolutely and move it 20px from the left and -15px from the top (this is why we positioned the third div 15px from the top).
  5. We make a fifth div with the text and our form. We could position it absolutely but I decided to position it using margins. So we move it 10px from the top and 105px from the left of the screen (because there’s the icon)
  6. We close this div and make a new one, positioned absolutely, 5px from the right and 0px from the top, this will be out close button. We make a link and give it the ID ‘closead’
  7. We close every div tag. It’s done

Now, as I said, I maybe made a complete confusion writing this. If you don’t understand how this works ask and I will help you out. If you don’t care how this works just copy/paste the code and play a bit with the styling. It’s not hard to understand even if you don’t read my messy writing.

What’s different from this is, that they use a wider image on the left and everything seems more centered. You could do the same by positioning the icon further from the left and then giving your text div a bigger margin on the left.

Have a nice day and go drink some beer with the $47 you just saved!

Live example

As IE does NOT support the use of the CSS position: fixed; property, I found a workaround that works in all browsers but which I didn’t test with other content on the page. The demo is still using the old code, displaying well in all the browsers except IE. This code will work there as well.

<body style="margin: 0; padding: 0;">
    <div style="position: relative; width: 100%; height: 100%;">
        <div id="footerad" style="display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 0;">
            <div style="position: relative; left: 0; bottom: 0;">
                <div style="position: absolute; background: #002949; border-top: solid 3px #3b8ccb; top: 15px; left: 0; width: 100%; height: 75px; color: white;">
                    <img src="http://server.zurka.us/images/RSS-Blue.png" style="position: absolute; left: 20px; top: -15px;" />
                    <div style="margin: 10px 0 5px 105px;">
                        <div style="font-size: 15px; margin-bottom: 7px; font-family: 'trebuchet ms', arial, sans-serif;">This is a test, the form is not working!</div>
                        <div style="font-size: 12px;">Name: <input type="text" name="name" style="margin-right: 10px;" /> Email: <input type="text" name="email" style="margin-right: 10px;" /> <input type="submit" value="Subscribe!" /></div>
                    </div>
                </div>
                <div style="position: absolute; right: 5px; top: 0; font-size: 11px;">
                    <a href="#" id="closead">[close]</a>
                </div>
            </div>
        </div>
    </div>
</body>

All that changes is that we create a dummy div with a 100% height and position the ad absolutely on it’s bottom. Should work well with all the content as well, but as I said, I didn’t test it.

However, I suggest you using this with caution and parse it only if the useragent shows up to be an IE. Create two different CSS files and use something like this:

<style type='text/css'>@import 'all.css';</style>
<!--[if IE]>
<link
 href='ie_win.css'
 type='text/css'
 media='screen'>
<![endif]-->

Have swing!

]]> http://blog.zurka.us/create-sliding-ad-showing-from-bottom/feed/ 5 MooTools http://blog.zurka.us/mootools/ http://blog.zurka.us/mootools/#comments Wed, 08 Apr 2009 13:41:35 +0000 nasal http://blog.zurka.us/?p=871

I started reading some tutorials and books about this very nice and simple javascript framework, with which you can do supercool things in the browser.

It’s actually pretty simple to use for simple effects and gets complex as you try to do magic with it.

After reading a chapter about it’s Tween function, I decided to make a simple menu with a simple fade animation. It’s really something for beginners, since this is what I am, a beginner.

We are going to do a menu with some links that change their position and color with a simple animation when we hover them. Easy peasy. Check the result here.

First: we start the document as always, with a doctype (I still use the transitional xhtml) and include the framework.

<!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="sl" lang="sl">
    <head>
        <title>MooTools</title>
        <meta http-equiv="Content-Type" content="text/html;charset=windows-1250" />
        <script src="inc/mootools-1.2.1-core.js"></script>

Second: we add an event to our window element which is going to start as soon as the DOM (Document Object Model – the browser) is ready (it won’t wait all the other elements to load [big, fat images, advertisments etc]).

<script type="text/javascript" language="javascript">
            window.addEvent('domready', function() {

             });
</script>

Third: when the DOM will be ready we want it to get all the links with a specified class (I made it this way, you could easily make all the links in a specified UL or any other element behave the same way) and apply a special behaviour to them.

                $$('a.click').addEvents({

                    'mouseover': function() {
                        this.morph({
                            'padding-left': '20',
                            'color': ['#1E0CB5', '#94BB06']
                        })
                    },

                    'mouseout': function() {
                        this.morph({
                          'padding-left': '10',
                          'color': ['#94BB06', '#1E0CB5']
                        })
                    }

                });

As you can see, MooTools is very simple and easily understandable. Using $$(‘a.click’) we create an array of all the links in our page with the class=”click” attribute.

Next, we tell the function to Morph the link when the mouse hovers the link and when the mouse leaves the link. We add 10px of padding on the left and change the color to green when the mouse passes over the link and restore the default values when it leaves. Easy.

Still in the head we apply some styles to our menu.

        <style>
            a { color: #1E0CB5; }

            #menu { list-style: none; margin: 0; padding: 0; }
            #menu li { width: 150px; background: #eee; }
            #menu li a { padding: 4px 10px; display: block; }
        </style>

And now we complete our simple page.

    </head>
    <body>
        <h3>Something nice</h3>
        <ul id="menu">
            <li><a class="click" href="#">link</a></li>
            <li><a class="click" href="#">link</a></li>
            <li><a class="click" href="#">link</a></li>
            <li><a class="click" href="#">link</a></li>
        </ul>
    </body>
</html>

That’s it, a nice animated menu to use on your website! If you want to see the whole code in one piece, check the source of the live example.

Hope I was clear enough.

I’ll write again with a new example of what I’ve learnt!

]]> http://blog.zurka.us/mootools/feed/ 0 Mootools image gallery scripts http://blog.zurka.us/mootools-image-gallery/ http://blog.zurka.us/mootools-image-gallery/#comments Sun, 19 Oct 2008 23:23:20 +0000 nasal http://blog.zurka.us/?p=616

(E)2 Photo Gallery
(E)2 Photo Gallery is a open source gallery built with Mootools Javascript Library the compact, modular, Object-Oriented javascript framework. Designed to allow you to upload your photos to a desired folder, tell the (E)2 Photo Gallery what folder to look at and it will automatically load the images using PHP.

noobSlide
Lightweight class written for mootools you can use to create nice slides.

SmoothGallery
Using mootools v1.11, this javascript gallery and slideshow system allows you to have simple and smooth (cross-fading…) image galleries, slideshows, showcases and other cool stuff on your website…

MooFlow
Some of the features:
autosetup graps all images inside a element,
autoresize on changes of window dimensions,
fullscreen option,
scrolling with mouse wheel..

Thumbnoo

iCasousel
iCarousel is an open source (free) javascript tool for creating carousel like widgets.

MooPix
Uh oh, another Javascript slideshow using a popular framework! Fear not — MooPix isn’t a slideshow, it’s a way for you to access your public Flickr photos without doing PHP, Ruby, or Python situps. What you do with it is your perrogative.

Slideshow 2
Slideshow 2! is a javascript class for Mootools 1.2 to stream and animate the presentation of images on your website. This page features some examples of how Slideshow might be used to enhance the presentation of images on your website. Please view the source of this page for usage information.

Slimbox
Slimbox is a 4kb visual clone of the popular Lightbox JS v2.0 by Lokesh Dhakar, written using the ultra compact mootools framework. It was designed to be small, efficient, more convenient and 100% compatible with the original Lightbox v2.

]]> http://blog.zurka.us/mootools-image-gallery/feed/ 0