Feb
8
2012
css // css3 // code // html5

CSS3 Target Trick

In my previous post regarding a CSS Hover Trick, I was challenged in the twitter universe to do something similar with images, but with the click event.  Could this be done without JavaScript?  But of course.  What makes this possible is use of two CSS3 selectors:not, :target. This will not work in older browsers, so check out how to do feature detection in this post on detecting CSS3 selectors.

The code found below will make images appear based on what anchor tag was clicked without using  any JavaScript!  Here are screen captures to demonstrate the desired behaviors:

csstarget00
No anchor tags have been clicked

 

csstarget01
First anchor tag clicked

 

csstarget02
Second anchor tag clicked

 

csstarget03
Third anchor tag clicked
Shameless self promotion

 

Here is the code to make it all work!  To reproduce in your own environment, simply replace the images with your own!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>CSS Target</title>
    <style>
        #csstarget ul { 
            margin:             0;
            padding:            0; 
        }        
        #csstarget li {
            list-style-type:    none;
            display:            inline;
            margin-right:       2em;  
        }
        img {
            width:              8em;
            height:             8em;
        }
        #images {
            padding:            3em;
        }
        
        /* hide unselected targets */
        #images img:not(:target) {
            display:            none;
        }
        /* display selected target */
        :target {
            display:            inherit;
        }
    </style>
</head>
<body>
    <article id="csstarget">
        <h1>CSS Target Trick</h1>
        <p>Click on any word to reveal an image...</p>
        <ul>
            <li><a href="#img01">CSS3</a></li>
            <li><a href="#img02">HTML5</a></li>
            <li><a href="#img03">Palermo4</a></li>
        </ul>
        <div id="images">  
            <img id="img01" src="images/css3logo.png" />
            <img id="img02" src="images/html5.png" />
            <img id="img03" src="images/palermo4_bw.png" />
        </div>

    </article>
</body>
</html>
    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Feb
8
2012
css // code // html5

CSS Hover Trick

In no way am I claiming this to be original.  But I can’t say I have seen this trick done anywhere else.  With the CSS :hover selector, you can create a nice “status message” appear in one location while hovering over particular items in a list (or menu).  Below are the screen captures of what the trick accomplishes, followed by the entire source code to make it possible.  Enjoy!

csshover00 
No mouse hover

 

csshover01
Mouse hover over first item

 

csshover02
Mouse hover over second item

 

csshover03
Mouse hover over third item

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>CSS Hover</title>
    <style>
        #csshover ul { 
            position:           relative;
            margin:             0;
            padding:            0; 
        }        
        #csshover li {
            list-style-type:    none;
            display:            inline-block;
            margin-right:       3em;  
            cursor:             pointer;   
        }
        #csshover li p {
            position:           absolute;
            top:                2em;   
            display:            none;
            left:               0em;
        }
        #csshover li:hover p {
            display:            inherit;
        }
    </style>
</head>
<body>
    <article id="csshover">
        <h1>CSS Hover Trick</h1>
        <p>Hover over each of the words below.  Look for status message below!</p>
        <ul>
            <li><div>CSS  </div><p>It's all about the style!</p></li>
            <li><div>Hover</div><p>When you wander above...</p></li>
            <li><div>Trick</div><p>Look Ma, no JavaScript!</p></li>
        </ul>
    </article>
</body>
</html>
    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Feb
6
2012
css // css3 // code // javascript

CSS3 Colors–HSLA to RGBA

In my previous post on CSS3 Colors – RGBA vs. HSLA, I provided a script to easily convert RGB to HSL using inputs/outputs friendly to CSS3.  In this post, I provide the reverse script – converting from HSL to RGB.  The trailing “A” means Alpha (scale of opacity), and requires no conversion.

// elsewhere in script use this way:
// var result = Palermozr.hslToRgb(0,0,100);
// result.R // Red
// result.G // Green
// result.B // Blue
var Palermozr = (function () {
    function hslToRgb(h, s, l) {
        h /= 360; s /= 100; l /= 100;
        var r, g, b;
        if (s == 0) {
            r = g = b = l;
        } else {
            var l2 = l < 0.5 ? l * (1 + s) : (l + s) - (s * l);
            var l1 = (2 * l) - l2;
            r = hueToRgb(l1, l2, (h + (1 / 3)));
            g = hueToRgb(l1, l2, h);
            b = hueToRgb(l1, l2, (h - (1 / 3)));
        }
        r = Math.round(255 * r);
        g = Math.round(255 * g);
        b = Math.round(255 * b);
        return { R: r, G: g, B: b };
    }
    // helper function used above
    function hueToRgb(l1, l2, h) {
        if (h < 0) h += 1;
        if (h > 1) h -= 1;
        if (h < 1 / 6) return (l1 + (l2 - l1) * 6 * h);
        if (h < 1 / 2) return l2;
        if (h < 2 / 3) return (l1 + (l2 - l1) * ((2 / 3) - h) * 6);
        return l1;
    }

    return {
        hslToRgb: hslToRgb
    };
})();
    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Feb
2
2012

Feature Detection Script for CSS3 Selectors

If you are a serious HTML5|CSS3 developer, you have undoubtedly come across the amazing resource known as Modernizr.  Modernizr is an amazing suite of script functions that enable feature detection to provide intelligent rendering across the multiple browsers that do or don’t support the desired feature.

Recently I was in need of a specific feature detection in CSS3 that I realized was not in the latest version of Modernizr – the ability to detect support for CSS3 Selectors.  Some examples of new CSS3 selectors include:  ::selection, :root, :target, :not, :checked, :empty … just to name a few. With necessity being the mother of invention, I took it upon myself to create the script needed to do the job. 

Here is the script, and I look forward to any feedback Smile

// elsewhere in script use this way:  
// var result = Palermozr.isSelectorSupported(":root");
var Palermozr = (function () {
    function isSelectorSupported(anySelector) {
        var newStyle = document.createElement("style"),
                cssRule = anySelector + "{}",
                isSupported = false,
                styles,
                rules,
                selectorText;
        newStyle.type = "text\/css";
        if (newStyle.styleSheet) {
            styles = newStyle.styleSheet;
            if (styles.cssText) {
                styles.cssText = cssRule;
                if (styles.rules) {
                    rules = styles.rules;
                    if (rules[0].selectorText) {
                        selectorText = rules[0].selectorText.toLowerCase();
                        isSupported = selectorText.indexOf("unknown") < 0;
                    }
                }
            }
        } else {
            newStyle.appendChild(document.createTextNode(cssRule));
            document.body.appendChild(newStyle);
            isSupported = !!newStyle.sheet.cssRules.length;
            document.body.removeChild(newStyle);
        }
        return isSupported;
    }
    return {
        isSelectorSupported: isSelectorSupported
    };
})();
    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Sep
20
2010

Interstellar Pong v4.0

splashScreenI am “working” this week at Interface Technical Training by attending the new Silverlight 4.0 class taught by Dan Wahlin.

While Dan was dazzling the attendees with his Silverlight prowess, I got inspired to convert a game I wrote in version 1.0 of Silverlight to the latest version.

While the game is upgraded to v4.0 of Silverlight, the game could use more revisions in terms of feature enhancements.  Nonetheless, I offer the humble code to anyone who would like to make improvements.

    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Jul
26
2010

How to Get jQuery 1.4.2 IntelliSense to Work in Visual Studio 2008

jQueryIsReady For those still using Visual Studio 2008 and developing using jQuery, you will no doubt desire the use of IntelliSense in your text editor to browse the jQuery objects.

To make sure you get this benefit, you must have SP1 for Visual Studio 2008 applied and run a patch which you can download here.

Download jQuery 1.4.2 and the –vsdoc.js for jQuery 1.4.1 and place them in the same folder in your web app.  Rename the –vsdoc.js file to “jquery-1.4.2.min-vsdoc.js”. 

Add a script tag to the top of your ASP.NET web form or master page:

 

You should now be able to see IntelliSense at work anywhere you reference jQuery.

    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Jul
23
2010

Getting the Event-Causing Control ID in ASP.NET Web Forms

Very early in the life of a web form in ASP.NET, you may need to know what control fired the event that caused the post-back to occur.  Perhaps you need to know what button was clicked before the click event handler is executed.  If that scenario is the one you find yourself in, then the following code can help!

If you include the following extension method in your code, you can get the ID of the event causing control from the HttpRequest instance:

public static string GetEventTargetId(this HttpRequest req)
{
    return GetOriginalControlId(req.Form["__EVENTTARGET"]);
}// extension method

The above code is dependent on a helper method to strip the ugly nonsense potentially added while the control was rendered (can now be avoided in ASP.NET 4.0).  The helper method is defined below:

public static string GetOriginalControlId(string renderedControlId)
{
    if (renderedControlId == null) return null;
    int indexOfSeparator = renderedControlId.LastIndexOf('$');
    if (indexOfSeparator >= 0)
    {
        renderedControlId = renderedControlId.Substring(indexOfSeparator + 1);
    }
    return renderedControlId;
}// method
    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Jul
9
2010

Is Your jQuery Ready?

For those that don’t know this, you can shorthand the following script:

$(document).ready(function () {
    alert("Giddyup!");
});

… and replace the above with the following equivalent:

$(function () {
    alert("Giddyup!");
});
    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Jul
8
2010

How to Get the Last Number of an Integer

When I teach my introduction to C# course, I typically provide a tough numeric challenge to stimulate thinking and use all the features of the language learned up to that point.  In a recent class, I was presented the challenge of determining the last number of any integer.  For example:

  • 12 == 2
  • 337 == 7
  • 1000 == 0
  • 987654 == 4

In each example above, I needed to simply return whatever was in the “singles” place – the last number of the number.

My first approach felt like I was cheating, but it worked:

public static int GetLastNumber(string stringifiedNumber)
{
    return Convert.ToInt32(stringifiedNumber[stringifiedNumber.Length -1].ToString());
}// method

After brooding over it, I decided to challenge myself to do this mathematically instead.  Here is the final code:

public static int GetLastNumber(dynamic anyNumber)
{
    double fractional = anyNumber * .1;
    double truncated = Math.Truncate(fractional);
    return (int)(Math.Round((fractional - truncated),1) * 10);
}// method

The use of the dynamic keyword above allows me to pass in any numeric data type.

Updated: Thanks to Nicki for identifying how I over-engineered this problem.  I simply needed to get the modulus of 10 to get what I wanted.  So in one simple statement I could write:

 anyNumber % 10;
    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).

Resources

Archives