Zum Inhalt

Kategorie: JQuery

My JQuery ideas and implementations

SCCM – SQL Query for Computer Information (statistics)

I am developing an administrative webgui to give our admins access to different services to manage their users and computers in our new Active Directory environment. We came across that this is the best solution to automate so many things like creating home folder, creating profile folder, creating terminalserver profile folder, set ACL to folders, create and publish printers to the AD, set quota for different kind of folders, distribute software via SCCM by AD groups and so on. It is necessary that every admin can only see objects that belong to his department. After developing all these base functionality we came to the conclusion that the information that is stored in the SCCM database is really informative for the admins, so we created some selects for the database to get the information about computerobjects, softwarestatus, hardwareinformation, etc…

Additional we thought it would be a great idea to build some kind of dashboard to get an overview over our environment and whats going on there, so we played around with the SQL Adminstudio and got some good looking SQL queries, implemented these and display the information in some pie charts (highcharts.com).
Weiterlesen SCCM – SQL Query for Computer Information (statistics)

YDRjRectangle – JQuery rectangle selection – new version

After some weeks of dealing with jquery and the rectangle function i released earlier i wrote a new and cleaner version, renamed it to YDRjRectangle and put it into a plugin like shape, so everyone can implement further functionality for selecting objects or do other customizing to fit its needs.

If you want to use a technique like click & drag/mouse move you should get the disabletextselect plugin from jdempster, to get rid of unwanted text selection while drawing your div rectangle.

Weiterlesen YDRjRectangle – JQuery rectangle selection – new version

Galleriffic and Colorbox – Quick Fix

I wrote a small web gallery application and used the galleriffic template as my base layout. I liked the image preloading and the image swap effect and didn’t want any other template for my gallery script, so I modified all the links to get a „german gallery“.
The only thing that I didn’t like was the „Show Original“ link beneath the image on the right side so I decided to use colorbox to spice it up a bit.

First of all you have to add the Colorbox javascript code to your webserver and add a link to the javascript file

Normally, if you click on the „Show Original“ link you get the image in the top left corner of your browser without any css/html styling and it looks some kind of rough to me for such a great layout, so I added all files of colorbox to my server, added the needed sourcecode and added a „rel=’cbviewer'“ tag to the „Show Original“ link and after some minutes of testing I recognized, that this link is finally broken and nothing happend, when clicking on it. Nothing comes up, no nice colorbox popup, no image in an empty browser window, nothing.

The first thing that I checked was the errorconsole of firefox and found an entry of colorbox that indicates some incompatibilities between the galleriffic javascript and colorbox.
I googled a bit and found a lot of fixes for this problem and the more i found they become bigger and more complex so I started to find a fix for this on my own. I wanted a small solution, 5 lines of code, or something to get colorbox working.

I had two ideas. The first one was a small fix to get the colorbox popup if I click the „Show Original“ link, without the ‚previous‘ and ’next‘ links in colorbox. The second idea I had was a link beside the „start slideshow“ to start a colorbox slideshow in fullscreen mode with the start position at the current gallery image. I started with the small fix for colorbox and will add a small tutorial for the fullscreen slideshow later.

Weiterlesen Galleriffic and Colorbox – Quick Fix

JQuery dynamic event handler

I came to the conclusion that dynamic event handlers can make my life much more easier, so I can write more cleaner and maintainable code. My idea was to add different class names to an element to bind different event handlers to it. This way, I could get rid of some global variables and switch case loops that i needed to manage my functions. The second advantage is, that you can chain event handlers to do things one after another.

Here is a small example that adds classnames to a button and binds dynamic event handlers to the class attribute. Depending on the class attribute an event handler fires an alert box that indicates which classname was added to the button.

Weiterlesen JQuery dynamic event handler

JQuery rectangle selection

New Version here -> YDRjRectangle – JQuery rectangle selection – new version

Do you know the rectangle selection tool in photoshop to select different pixels of an image? I want to have something similar on my website for different scenarios, like cropping parts out of an image or select a couple of elements inside a table or something like that. I found some plugins that could do this job, but they are using a image as „frame“ where you can select some pixels and crop the image and thats it. I needed something similar to select any kind of dom object within a defined area so I started to develop a small implementation for this idea. (next version).

The first thing I wanted to do was drawing an image to get a animated, dashed rectangle, that looks like the one in photoshop, but it was a bit too oversized for my project so I started playing around with a div element, that has a dynamic width and height and fetches to the cursor and gives the user a known selecting experience.

What I did was creating a „frame“ object where the selection can take place and added a hidden div object within this frame. I used an opacity of 40% and a thin 2px white border for the selection div to get a nice looking selection object.

The next step was writing some small functions for resizing the selection div element to imitate the selection behaviour. The whole resizing is done by mouse eventhandler on the initial selection frame.

Weiterlesen JQuery rectangle selection