circleart.

„The source code is my canvas.“

Hi, I'm Chrishe.
Frontend Developer, jQuery and Open Source Lover ...

logo jQuerylogo TYPO3logo HTML5logo PHPlogo MySQL

about me.

Christoph Bolze *83

2000
College student Yorkschule Mittelschule Chemnitz

2000 - 2003
Vocational Training Centre for Economics II

2003 - 2005
Education Design Technical Assistant

2005 - 2006
University student main focus Graphics / Media

2006 - 2007
Community Service at Klinikum Chemnitz gGmbH

portfolio.

2004 till now.

Get an insight into my work.

„DigiArt Design“

Programmed and designed for a great customer.

  • completed on 17/01/2013
  • written in php, JavaScript, MySQL

„EURO2012 Tippspiel“

Programmed for my friends and buddies and for the improvement of my own abilities.

  • completed on 08/06/2012
  • written in php, JavaScript, MySQL
  • about 40 hours effort
  • 10 participants
  • 608 game tips
  • ironically, I even won ;P

„Superhirn BETA“

Mastermind is a tribute to the legendary mastermind game.

  • Not really finished.
  • Sometime I improve the scoring system.
  • written in JavaScript, php, MySQL
  • 3 difficulty levels
  • score system & time ranking

„Budgetary“

Budgetary is a private project for the management of expenditure and revenue.

  • This project was launched in 2011
  • permanent under construction

„WM2010 Tippspiel“

Every two years I got a crisis. Why is there no horny open source World Cup prediction game. So fo, I build my own game.

  • completed on 11/06/2010
  • written in php, javascript, mysql
  • about 40 hours effort
  • 14 participants
  • 2010, I had no luck

„Brainstorm“

„Brennessel“

„Frauenrücken“

„Kroatien noch eine Eidechse“

„Leitsystem“

„Portrait 1“

„Portrait 2“

„Portrait 3“

„Portrait 4“

„Selbstportrait schreiend“

„Selbstportrait“

code.

Snippets and PlugIns.

Over the years collected code snippets and useful plugins.

$(document).ready(function() {
	$(".slider").wrapInner('<div class="slidercontent" />');
	$(".slider").prepend('<div class="scrollbar"></div>');
	var sliderHeight = 100;
	var sliderContentHeight = $(".slidercontent").height()-sliderHeight;
	$(".slider").css({'height':sliderHeight+'px','overflow':'hidden'})
	$(".scrollbar").slider({
		orientation: "vertical",
		range: "max",
		min: 0,
		max: sliderContentHeight,
		value: sliderContentHeight,
		slide: function( event, ui ) {
			$( ".slidercontent" ).css({
				"top":ui.value-sliderContentHeight,
				"position":"relative"
			});
		}
	}).css({
		"height":sliderHeight-20+"px",
		"margin-top":"10px",
		"float":"right",
		"margin":"10px 5px"
	});
});

jQuery – slider – scrollbar – scrolling overflow

The jQuery UI provides for easy use an abundance of features. In this small example, I want to briefly draw attention to the use of the. Slider () widgets. It is quite simple possible to create a customizable scrollbar for text overflow.

(function($) {
$.fn.hoverIntent = function(f,g) {
	// default configuration options
	var cfg = {
		sensitivity: 7,
		interval: 100,
		timeout: 0
	};
	// override configuration options with user supplied object
	cfg = $.extend(cfg, g ? { over: f, out: g } : f );

	// instantiate variables
	// cX, cY = current X and Y position of mouse, updated by mousemove event
	// pX, pY = previous X and Y position of mouse, set by mouseover and polling interval
	var cX, cY, pX, pY;
	
	// A private function for getting mouse position
	var track = function(ev) {
	cX = ev.pageX;
	cY = ev.pageY;
};

// A private function for comparing current and previous mouse position
var compare = function(ev,ob) {
	ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t);
	// compare mouse positions to see if they've crossed the threshold
	if ( ( Math.abs(pX-cX) + Math.abs(pY-cY) ) < cfg.sensitivity ) {
		$(ob).unbind("mousemove",track);
		// set hoverIntent state to true (so mouseOut can be called)
		ob.hoverIntent_s = 1;
		return cfg.over.apply(ob,[ev]);
	} else {
		// set previous coordinates for next time
		pX = cX; pY = cY;
		// use self-calling timeout, guarantees intervals are spaced out properly (avoids JavaScript timer bugs)
		ob.hoverIntent_t = setTimeout( function(){compare(ev, ob);} , cfg.interval );
	}
};

// A private function for delaying the mouseOut function
var delay = function(ev,ob) {
	ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t);
ob.hoverIntent_s = 0;
return cfg.out.apply(ob,[ev]);
};

// A private function for handling mouse 'hovering'
var handleHover = function(e) {
// copy objects to be passed into t (required for event object to be passed in IE)
var ev = jQuery.extend({},e);
var ob = this;

// cancel hoverIntent timer if it exists
if (ob.hoverIntent_t) { ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t); }

// if e.type == "mouseenter"
if (e.type == "mouseenter") {
// set "previous" X and Y position based on initial entry point
pX = ev.pageX; pY = ev.pageY;
// update "current" X and Y position based on mousemove
$(ob).bind("mousemove",track);
// start polling interval (self-calling timeout) to compare mouse coordinates over time
if (ob.hoverIntent_s != 1) { ob.hoverIntent_t = setTimeout( function(){compare(ev,ob);} , cfg.interval );}

// else e.type == "mouseleave"
} else {
// unbind expensive mousemove event
$(ob).unbind("mousemove",track);
// if hoverIntent state is true, then call the mouseOut function after the specified delay
if (ob.hoverIntent_s == 1) { ob.hoverIntent_t = setTimeout( function(){delay(ev,ob);} , cfg.timeout );}
}
};

// bind the function to the two event listeners
return this.bind('mouseenter',handleHover).bind('mouseleave',handleHover);
};
})(jQuery);

jQuery – hoverIntent

hoverIntent is similar to jQuery's built-in "hover" function except that instead of firing the onMouseOver event immediately, hoverIntent checks to see if the user's mouse has slowed down (beneath the sensitivity threshold) before firing the onMouseOver event.

$(document).ready(function() {
	$("a.anchorLink").anchorAnimate()
});
jQuery.fn.anchorAnimate = function(settings) {
	settings = jQuery.extend({
	speed : 800
}, settings);
return this.each(function() {
	var caller = this
	$(caller).click(function(event) {
		event.preventDefault();
		var locationHref = window.location.href
		var elementClick = $(caller).attr("href")
		var destination = $(elementClick).offset().top;
		$("html:not(:animated),body:not(:animated)").animate({
			scrollTop : destination
		}, settings.speed, function() {
			window.location.hash = elementClick;
		});
		return false;
		});
	});
}

jQuery – AnchorAnimation

on the run.

An Native App build with PhoneGap, HTML5 and JavaScript.

On The Run is a native application for my smartphone (HTC One X - Android 4.1.1 Jelly Bean).
With this app, my mobile photos are loaded directly on my web space and displayed here.


11

50.8622244,12.9115855
50.8232192,12.9189516
50.8315653,12.9225665
50.8453149,12.9244554
50.8366083,12.9386137
50.8527027,12.9440028
50.852854,12.9440125
50.8512962,12.9424108
50.8528087,12.9439677
50.8340915,12.9207835
50.8528143,12.9439768

contact.

Feel free to contact me.

imprint.

Christoph Bolze
circleart.de
Orthstraße 4
09131 Chemnitz
info (at) circleart.de

Disclaimer

The contents of this website are created with utmost care. The provider does not warrant the accuracy, completeness or timeliness of the content.