www.netsi.dk

"The internet is just a layer on the real world" (don't forget that!)

Extend Object with method that handles CSS values in javascript

If you are working with and need to for instance add or subtract a value to a value like “15px” or “3em” this method “()” will come in handy.

Simply add the code somewhere in the top to extend the “Object” object.

 

The method is used as follows:

"10px".getCSSValueAndUnit();

which will return an object:

{ 'value':10, 'unit':'px' }

Simple but very usefull!

 

Object.prototype.getCSSValueAndUnit = function() {
  var oReUnit = new RegExp('[0123456789\.-]', 'ig');
  var sOriginal = this.toString();
  var sUnitRaw = sOriginal.replace(oReUnit, '')
  var sUnit = sUnitRaw.replace(new RegExp(' ', 'ig'), '');
  var vValue = parseFloat(sOriginal.replace(sUnitRaw,''));
  return {'value':vValue, 'unit':sUnit};
}
Share

Speeding up you CSS in Visual Studio using Web Essentials plug-in

Mads Kristensen (@mkristensen) is the name of the person bringing speed and hope for the part of Microsoft Visual Studio. He is adding new life the the rather dead part of Visual Studio. He is doing so through his free for Visual Studio: Web Essentials.

The features

In general Web Essentials makes working with CSS in Visual Studio more nice, adding features like colour and font preview, change of values using Ctrl+Arrows (up=add, down=subtract as you know it from for instance Firebug and Google Chrome), option to base64 encode images and speed typing. I can only recommend this plug-in, and also the fact that Mads listens to you request given to him for instance through twitter makes me a happy user! Well done Mads, and keep up the good job! Smiley

Amoung other features: Embed image as base64 encoded image

Links
Share

Printing HTML pages, make screen and print appear the same.

When using external stylesheets on a webpage you can specify which “media” it should apply to. For instance see these lines:

<link rel="" href="Blueprint/screen." type="text/css" media="screen, projection" />
<link rel="stylesheet" href="Blueprint/.css" type="text/css" media="print" />

As you might allready have guessed the screen.css will be choosen for screen (read: browser) and projection mode. When printing the print.css will be choosen if you print the webpage. So far so good.

Some times you will have a specific page for print, which say will render only a stripped down version of your content and prompt the user with a print dialogue (using a window.print() line of code). But when you see the page in the browser you are in “screen” media, and the style shown will be as defined in the screen.css. You may confuse the user as he gets a screen version ready for print – and printing it wil result in a version based on the print.css. I have made a jQuery based fix for this situation.

The page before and after the fix

The jQuery fix

The fix will disable any external stylesheets related to screen and make the print.css work on media types “all”. It is coded so that it will check for a “#print” added to the URL. So you should simply make the URL of the printversion have a “#print” in it. Here is the fix:

   1:  <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.6.2.min.js"></script>
   2:  <script type="text/javascript">
   3:  /* STH: 2011-07-07 Make any stylesheets target for "print" media active on "all" media types (including screen)
   4:      Also disable any layouts for screen
   5:  */
   6:  jQuery(function() {
   7:    var bPrint = (window.location.toString().indexOf('#print')!=-1);  
   8:    if (bPrint) {
   9:      // The user wants to print this page
  10:      jQuery('link[media*="print"]').attr('media', 'all'); // Enable the print styling for all media types, including screen.
  11:      jQuery('link[media*="screen"]').remove(); // remove any styling related to screen
  12:    }
  13:  })
  14:  </script>

 

The fix above has a link to jQuery, you do not have to include it if you allready have jQuery on your webpage.

Share

Work-arounds for 9 MSIE bugs…

If you implement on the web, chances are that you have to make som work-arounds from time to time. The page “9 Most Common IE Bugs and How to Fix Them” is a great resource for avoiding such bugs to mess up your layout.

Here is an example from the website:

The output you’d expect:

Tutorial Image

But what IE actually gives you:

Tutorial Image

This is mainly due to IE6 in quirks mode and below not recognizing the auto value we set to the margin property. Fortunately, this is easily fixed.

Share

Getting the right contents when using Dynamicweb CMS templates

In the CMS system I work with – Dynamicweb CMS – content is build around various , each containing a output from the system. The output is generated using and each bit of content is represented in a “tag”. For instance if you want the name of the user which has logged on the page you enter

<!—@Global:Extranet.Name-->

Such templates are based on , it is: You create static parts of HTML and insert tags where you want the system to insert dynamic content.

You might want to do something like this:

...<div>Hi <!—@Global:Extranet.Name-->!</div>...

So far so good! But what if the user has not logged in? You will need to do one of three things:

The soloution

Put shortly: Using javascript to control which content is shown is basically not a good idea. But today almost anyone browsing the net has javascript turned on, and the trend (IMHO) goes towards very powerfull javascript parts. Another discussion is that: “Why give a visitor contents if you allready before you start sending information (HTML) that the content is not really relevant?”. Well, another article about that.. :-) Here goes:

...<script type="text/javascript">
if ('<!—@Global:Extranet.Name-->'!='') {
document.write('<div>Hi <!—@Global:Extranet.Name-->!');
}
</script>...

The soloution

This is actually not a way which I would say always works! But the theory is that you put CSS classes  on HTML tags that are build around a classname-prefix (“customerNumber” for instance) and then add the dynamic value from CMS as postfix. So if a user has logged in a classname would be for instance “customerNumber342” for a customer with the number 342. A customer who has not yet logged in would give a classname “customerNumber”. So if we by default hide the classname “customerNumber” any other classnames would be displayed! :-) Cute right? But the problem can rise when sometime certain Dynamicweb template tags are not replaced, even if it has no value. That way you might end up with

“customerNumber<!--@Global:Extranet.CustomerNumber-->”

That would even be invalid HTML! :-( Anyway here is how a CSS based soloution could be.

<head>.. <style type="text/css">
.customerNumber {display: none;}
</style>
..
</head><body>
...
<div class="customerNumber<!--@Global:Extranet.CustomerNumber-->">
Hi <!—@Global:Extranet.Name-->!
</div>

The If Defined soloution

Dynamicweb CMS offers a way to check if a tag has content, and only pass the  content within the IF-ENDIF if a tag has content.

<!--@If Defined(Global:Extranet.Name)-->
<div>Hi <!—@Global:Extranet.Name-->!</div>
<!--@EndIf(Global:Extranet.Name)-->
...<div>Hi <!—@Global:Extranet.Name-->!</div>...

These are just 3 ways of making workaround in Dynamicweb CMS, you could ofcause come up with more! For instance combining the javascript and CSS soloution.

Templates comes to our rescue – well almost!

Imagine that you build your content using XSLT: Dynamicweb CMS will build a XML document containing all the “template tag values” in a structured way. A tiny bit of this XML document might be:

...<Global.Extranet.Name>342</Global.Extranet.Name>...

So this way you decide if it is relevant to produce output based on “real” values! You can use the power of XSLT/XPATH to decide what to do. An example:

<xsl:if test="Global.Extranet.Name!=''">
<div>Hi <xsl:value-of select="Global.Extranet.Name" />!</div>
</xsl:if>

All this is done before the content has been send to the client (in Dynamicweb ). It is a clean powerfull way to produce exactly what is needed for the page to render as wished.

Nothing is perfect…

When all this is said, I must warn you: The XSLT templates path is – I am sad to say – not always perfect in Dynamciweb CMS. The XML document does not always have all tags. I have some workarounds which I will write about in a later article.

You can see all template tags at templates.dynamicweb.dk.

Share