Kasper

Category: Frontend development (page 2 of 2)

iScout – Opening Ceremony 2.0

i, i, i all you hear is i. iPhone, iLife and now also iScout. iScout is a game for scouts where they have to solve puzzles and perform crazy exercises. Like last year we participated and I wanted to share one of the exercises we had to do.

The description was “Built a opening ceremony 2.0” and nerds as we are we immediately thought of a jQuery solution. So we started thinking and worked out a simple idea.

The HTML consists of just 2 div elements and 2 buttons, we could get the same result with one but for simplicity this was chosen.

<div id="mast"></div>
<div id="vlag"></div>
<button id="hijs">Hijs vlag!</button>
<button id="strijk">Strijk Vlag!</button>
​
									

The CSS, we used a gradient for the creation of a Dutch flag.

#mast {
    width: 10px;
    height: 200px;
    border:1px solid #000;
    border-radius: 5px;
}
#vlag {
    width: 100px;
    height: 50px;
    position: absolute;
    left: 10px;
    top: 150px;
    background: #ff0000; /* Old browsers */
    background: -moz-linear-gradient(top, #ff0000 0%, #ffffff 50%, #0000ff 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff0000), color-stop(50%,#ffffff), color-stop(100%,#0000ff)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ff0000 0%,#ffffff 50%,#0000ff 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ff0000 0%,#ffffff 50%,#0000ff 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #ff0000 0%,#ffffff 50%,#0000ff 100%); /* IE10+ */
    background: linear-gradient(top, #ff0000 0%,#ffffff 50%,#0000ff 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#0000ff',GradientType=0 ); /* IE6-9 */
}
​
									

And the jQuery for handling the required events.

$('#vlag').hide();
$('#strijk').hide();
$('#hijs').click(function() {
    $('#vlag').fadeIn().animate({
        "top": "5px"
    }, 3000);
    $('#hijs').fadeOut(function() {
        $('#strijk').fadeIn()
    });
});
$('#strijk').click(function() {
    $('#vlag').fadeIn().animate({
        "top": "150px"
    }, 3000).fadeOut();
    $('#strijk').fadeOut(function() {
        $('#hijs').fadeIn()
    });
});​
									

Check jsfiddle for the result.

Create string from jQuery object

Examine the following:

​<div class='item'>
    Here is some sample text.
    <a class='​​​​​​​​​​​​​​​​​​​​​​item-of-interest'​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ href='#'>add</a>
</div>
									

The “Here is some sample text” might be there but not always. What you then want to check is whether the inner html of $(‘.item’) is equal to the link item alone. Since .html() returns a string representation of the html and $(‘.item-of-interest’) returns a jQuery object, you will have to find a way to convert this object to a string representation. The easiest way to do this is by using the following code:

var html = $('<div>').append($('.item-of-interest').clone()).html();
									

You temporarily create an element to which you append the .item-of-interest, then you request the inner html of it.

How To: Make Firefox pass “browser checks”.

Ever tried to use a web application (ie. iCollege) but realized that you couldn’t because in the system check section recognized that firefox was running on linux which was not compatable. Well here is a quick tweak that will make web sites see your computer as running a Windows or Mac OS.

1. Open up firefox and in the search type in

about:config

2. You will be prompted to proceed, proceed.

3. Right click on any value and select New>String

4. A window will pop up, type in

general.useragent.override

5. Another window will pop up. If you are running firefox 3.6.10 type in

Mozilla/5.0 (Windows; U; Windows NT 6.1; ro; rv:1.9.2.10) Gecko/20100914 Firefox/3.6.10

If you are running another version go to: http://www.useragentstring.com/pages/Firefox/ and search for your version of firefox (you can find your version by going to Help>About Mozilla Firefox). Once you find your version, look for a the windows user agent (The title will contain something like Windows NT 6.1) then copy the user agent and paste it in the second window.

6. Save the configuration and restart firefox

Now, websites will recognize your computer as running Win7 and will pass you on the browser check.

This post was made by tekkidd on the Ubuntu forums.

Newerposts

Copyright © 2018 Kasper

Theme by Anders NorenUp ↑