My name is Juri Strumpflohner and this is my technical blog. I'm a software architect, .Net, Android, Web and Java dev, TDD and best practices promoter and martial arts practitioner.

Recent Posts Subscribe

Dear reader of Juri's TechBlog,
I moved my blog to a new domain and a new hosting solution as well. I'm now blogging on juristr.com.

Dynamically modifying CSS class name attributes

CSS allows you to not only define the style attributes directly like

<span id="mySpan" style="font-weight:bold; color:blue;">
some text within the span container...
</span>
but to define separate classes which is what is actually done in order to separate the design from the layout:
Example of two CSS classes
  .blueText{    
     color:blue;
  }
  .boldText{
    font-weight:bold;
    font-size:12pt;
  }
In order to apply those styles you would then do something like the following
<span id="mySpan" class="blueText boldText">
   some text within the span container...
</span>
As you see, you can assign both classes by separating them with a blank in between. But lets come to the point of this post. Assume now that you have to modify those class names dynamically depending on some user interaction (i.e. when the user changes the content of a text field or drop down list or whatever :) )
I've written some pieces of JavaScript for solving this problem. The script is written in a way that it is reusable.
Script
/*
* Adds the given CSS class dynamically to the passed DOM element
*/
function addClassName(element, classname){
 if(element == null)
  throw('Passed DOM element was null');
 
 //see whether there is already a className present
 if(element.className)
  //append it
  element.className += ' ' + classname;
 else
  element.className = classname;
}

/*
* Removes the given CSS class dynamically from the passed DOM element
*/
function removeClassName(element, classname){
 if(element == null)
  throw('Passed DOM element was null');
  
 //see whether the classname to remove is really present
 var regexMatch = element.className.match(' '+classname)?' '+classname:classname;
 if(regexMatch != null){
  element.className = element.className.replace(regexMatch,'');
 }
}
Usage
function addBoldCSSClass(){
 var span = document.getElementById('mySpan');
 addClassName(span, 'b');
}

function removeBoldCSSClass(){
 var span = document.getElementById('mySpan');
 removeClassName(span, 'b');
}
Here's a very simple live demo.

2 Comments

Google about to add offline support to Gmail and GCalendar

I did already wonder how long it will take for Google to extend their mission of teaching web-apps to work offline on its remaining major services after adding it to Google Reader and Google Docs.
Now some notices appeared that Google is about to add offline support to Gmail and Google Calendar.

0 Comments

Extending JavaScript objects with custom functions

It is nice how JavaScript objects can be extended with additional custom functions. Today for instance I needed a "contains" function (as it exists already on Java String objects). This can be achieved very nicely as the example below demonstrates:

<html>
<head>
 <script type="text/javascript">
  String.prototype.contains = function(someString){
   return (this.indexOf(someString) >= 0) ? true : false;
  }
 
  function test(){
   var stringA = new String('Hallo');
   var stringB = 'llo';
   alert(stringA.contains(stringB));
  }
 </script>
</head>
<body>
 <a href="#" onClick="javascript:test();">Click me!</a>
</body>
</html>

2 Comments

GMap script being reused

It is always nice to see people adapt and use your work. Today I made a quick look to my blog access statistics and found the following webpage using a Google map script which I made (description) about more than a year ago. The script is really simple and still I found many people reusing it on their webpages (i.e. Study-board.de where the map is however no more visible to the public recently). Probably because the script is reusable in terms that it retrieves its data - which is going to be displayed - from a simple XML file. Both pages, which are forums, used the script for displaying the locations of their members by modifying it s.t. the XML output is produced by a dynamic page on the server (such as a php page).Seeing this, I could think of optimizing the script since it is not really performance optimized when there are a lot of entries inside the XML. I've already something in mind of how a reusable component could be created. The problem - as always - is just having the time for doing so. I'll think about it...In case you're interested just follow my blog. I'll publish a possible newer version of the script here. Related projects: Newsmapper

0 Comments

Lively - Google's answer to Second Live

Originally I wanted to finish a post I'm currently writing, but then I came across one mentioning Google's newest product. There have already been some rumors about a secret project at Google and now it's out. Lively is the newest addition to the Google Labs directory, a new way of communicating with people in 3D. Niniane Wang, Engineering Manager at Google told that she started it as 20% project. Impressive what comes out of these experimental projects. I just started to create a room to test Lively: My little island :) Nice is that it directly integrates into the browser. However one immediately sees that it is still in the experimental phase: it crashed 4 times in the hour I was trying it out. Anyway it's quite cool and it will be interesting to see how it evolves.

0 Comments

Subscribe to: Posts (Atom)