CSS: Under-utilized content property

#Batman {
background-color: black;
clear: both;
visibility: hidden;
content: “I’m Batman”; }  /* @CSSHumor */

Introduction:

In this post we’ll discuss about

• (The Theory) use and importance of CSS property – content
• (The Magic) creating printable links using CSS content and pseudo-elements
  

If you are not interested in ‘The Theory’ which is available in almost all CSS books and web tutorials like w3schools.com, you can start with ‘The Magic’, the feature which motivated me to write this blog post.

CSS ‘content’ Property:

The primary use of CSS is to describe the presentation semantics of an HTML documents but, we can also use CSS for content generation. With content property we can inject a piece of information to an existing document. We have to use content property along with pseudo-elements like :before, :after etc.

Example:

I feel, the best use of content property is to inject the URL of a hyperlink next to it’s text content.

a:after
{
   content: "(" attr(href) ")";
}

This will inject the URL mentioned within the href tag next to each link and will be decorated with a pair of parenthesis. For detailed list of content property values you may refer w3Schools.com.

Create Printable Links:

Before we start let’s have a look on the below paragraph of an HTML page-

“If you want to start learning web technologies then there is no better place than W3School to start with. For Microsoft technologies you can get comprehensive help from MSDN. My suggestion is to follow blogs like Technology Talks, Daily Dot Net Tips, Dot Net Tricks, Kunal Chowdhury, SQL Authority etc. ”

The HTML code for this is

Note that this HTML snippet has certain links to some other places. Now let someone wants to print the page containing the above paragraph. He/she will get the print copy as the above paragraph but

• What about the links?
• How can the user get the links for Technology Talks, Daily Dot Net Tips, Dot Net Tricks, Kunal Chowdhary, SQL Authority etc. from the print copies?
• Is there any way that we can show links on the print copy but not in the web page?

Solution

The easiest solution is to use content property of CSS along with pseudo-element :after. And as we want the URL to be injected next to it’s corresponding link only in the print page and not in the page that is rendered to the browser, we need to mention media type as ‘print’. So code view of the final document may look like

<style media="print">
    a:after {
      content: "(" attr(href) ")";
    }
</style>
<div>If you want to start learning web technologies then there is no better place than
 <a href="http://www.w3schools.com/">W3School</a> to start with.For Microsoft technologies
 you can get comprehensive help from <a href="http://msdn.microsoft.com/en-US/">MSDN</a>.
 My suggestion is to follow blogs like <a href="https://suvendugiri.wordpress.com/">
 Technology Talks</a>, <a href="http://dailydotnettips.com/">Daily Dot Net Tips</a>,
 <a href="http://www.abhisheksur.com/">Dot Net Tricks</a>, <a href="http://www.kunal-chowdhury.com/">
 Kunal Chowdhury</a>, <a href="http://blog.sqlauthority.com/">SQL Authority</a> etc.</div>

Live Demo

You can view the live demo here. To spot the difference just view the print preview.

Conclusion

Now, we are able to do the magic with which we can create better web pages with links for both kind of users i.e, online users and offline users (with printed material).

Hopefully, you have enjoyed reading this post.
I’ll love to read a feedback from you.
Thanks !

CodeProject

JQuery: Synchronize two ASP.Net text boxes

“The central concept behind jQuery is – find something, do something. More specifically, select DOM element(s) from an HTML document and then do something with them using jQuery methods. This is the big picture concept.” ___________________________Cody Lindley(jQuery Succinctly)

Introduction:

As the title suggests, this post is about interacting with two ASP.Net text boxes. If any change/interaction happens to one of the text boxes then we’ll try to do the same to the other text box, programmatically.

Live Demo & Code

Live demo here
Download code here

Designing the UI:

Let’s start with a new WebForm. The UI in this case requires only two multiline text boxes separated by some white spaces. To keep things simple we’ll concentrate on ‘how it works’ rather than ‘how it looks’. Now, the above quotation indicates that we need to find something and do something and thus it is a two step process. Here the ‘something’ is the text boxes and we can find them by their ids, class, tag, type etc. Particularly for this example we’ll employ the find by class trick. So, we need to mention same CssClass for both the text boxes and thing to notice is- this class may not exists at all.

<div>
     <asp:TextBox runat="server" ID="TextBox1" CssClass="sync" TextMode="MultiLine" Height="100px" />&amp;nbsp;&amp;nbsp;
     <asp:TextBox runat="server" ID="TextBox2" CssClass="sync" TextMode="MultiLine" Height="100px" />
</div>

Writing the Code:

In the script part, we’ll code for two things-

• Synchronizing the text typed in to one text box with the other
• Synchronizing the scrolling in both the text boxes

So, we will write two functions for these two specific actions. The first operation can be done on keyup event and the second with scroll event.

<script>
        $(document).ready(function () {
            $(".sync").keyup(function () {
                $(".sync").val($(this).val());
            });
            $(".sync").scroll(function () {
                $(".sync").scrollTop($(this).scrollTop());
            });
        });
</script>

Result:

As I already have said, we can demonstrate two operations

• Typing anything in to one of the text box will result in displaying same text in the other text box, simultaneously.
• Type few lines of code so that the scroll bar is visible. Now when we scroll any of the text boxes using either keyboard or mouse, other one will be scrolled automatically.

Explaination:

We have embedded our code inside $(document).ready() function as this function is executed after the DOM is loaded and before the page contents are rendered in to the browser. We can define a common function for both the textboxes with the use of CssClass name. The first action is defined inside the keyup event so that when we release the key the action will be performed. The action here is nothing but copying the content of the current text box to the other. The val() with no argument returns the value of the text box and when some argument is passed to it, sets the argument as value of that text box. I hope this made the thing very clear and further explanation is not required. Now consider about the second action. The scroll() event is fired when we try to scroll the content of text box either through key board or mouse. Again, scrollTop() with zero argument returns the current scroll position but, sets the scroll positions to a value same as the argument if called with an argument.

Conclusion:

Now we are able to develop a page with two text boxes which are synchronized upon typing text in to them or using the scroll bar. We can use more than two text boxes and it will still work as long as we use a common CssClass for them.

I hope you have enjoyed reading this post. Your feedback is very important to me.

CodeProject