Home / Recent Stuff - exscale.se
You're really missing out coming here with JS disabled. If you had "ajax-mode" enabled click here to disable it.
Skip to Navigation
Skip to Content
Skip to Sub Content
exscale.se
Hijaxed Web Development in jQuery, XHTML, CSS, PHP and MySQL
Navigation
Home
Archives
About
Styles
AndreasLagerkvist.com is Live!
Unless you're looking for something you know is on exscale.se I think you might wanna check out my new blog instead. Exscale is officially closed although I will keep it live at least a little longer.
The Latest
You've reached exscale.se, it's a site about web standards, CSS, JavaScript, some PHP and MySQL and occasionally i post a 3D-image. Below you'll find the 8 most recent articles, but check out the archives for old school programming stuff, funny youtube clips and more!
Bye, bye exscale!
Saturday, July 18, 2009
It's a bit overdue but I thought I'd write an quot;official quot; final post on exscale.se.
As you've probably noticed AndreasLagerkvist.com is live so when I have spare time I put stuff on there instead.
I've quit my job and will be moving to Thailand in a few months. Once I'm there and have chilled out for at least 2 months I thought I'd take some time to finally work on my own projects again :)
I've got a massive todo-list and prolly won't finish half of it, but here's some:
-Brush-up all the old exscale-styles and go live with them (even the horrible ones) (just for fun :)-
Fix quite a few annoying bugs with andreaslagerkvist.com
Finish aFramework's admin and debug modes as well as the drag-n-drop page-builder and the installer
Build:
aWiki
aWebShop
aForum
aGallery
Fine-tune every site's every module, give them all hijaxed admins etc
Create a site for aFramework, make sure everything from download to install to finished site runs smoothly on most systems and browsers and write good documentation
Do something fun with the 3d-engine.. been thinking about a quot;guide quot; for aFramework-sites.. kindof like Dustin Diaz's mosquito (click quot;Tour quot;) only I'd do something with the 3d-engine... we'll see what happens here :)
Brush up some of the jquery plugins (color picker, image viewer, pixastic editor)
Also I've started playing around with a little more advanced coding (than html/css at least :) again. Really interested in getting into 3D and games again.
Depending on what I feel like in January I may skip the previous todo-list entirely and focus on this one:
Create an Arkanoid-type game from scratch in Java and OpenGL
Create a Pacman-clone in the same
Get a 3D-object and a flat ground rendered on the screen that can be moved with an input-device
After that we'll see. If I'm lucky I might have time to do all of it and still come home with a tan :)
Those are the plans. In the future; check out AndreasLagerkvist.com instead, that's where it's all happening ;)
Adieu!
Update
All the old styles have been added again. Most could do with some brushing up though...
Comments (0)
Filed under
Site News
Kukk3D - Javascript 3D Engine
Thursday, April 30, 2009
I had so much fun playing around with canvas when I built the Pixastic Editor that I decided to port my really old 3D-engine, Kukk3D, to JS.
Click the image to view a demo
At the moment it's really basic even though it has support for faces (something that the old one never had) as well as lines and vectors.
You can add any type of object you like to the scene, move it around and re-render it. To animate you'd wanna do this X times per second, usually through a setTimeout.
A basic example:
span
lt;canvas id="kukk3d" gt; lt;/canvas gt;br /br / lt;script type="text/javascript" gt;br /// Initiate the engine, pass in the canvas-ID and set width and heightbr /Kukk3D.init('kukk3d', 640, 480);br /br /// Create an objectbr /// You can create any object you like or use one of the presets in objectSkeletonsbr /var cube = Kukk3D.addObject(Kukk3D.objectSkeletons.cube());br /br /// Now that the scene contains something, let's render itbr /// You can pass in a color-object as the only argument to renderbr /// in order to fill the scene with a background-colorbr /Kukk3D.render({r: 0, g: 0, b: 0, a: 1});br /br /// To animate we simply move about the object and re-renderbr /// the scene in a setInterval that runs every 50 msbr /setInterval(function () {br / cube.rotation.y += 2;br / cube.rotation.z += 1;br / Kukk3D.render();br /}, 50); // 50 ms = 20 fpsbr / lt;/script gt;span
What you reckon?
Comments are off
Filed under
Development, Javascript, Old School
jQuery Pixastic Editor
Friday, April 17, 2009
I started playing around with the Pixastic JS Library a few days ago and thought it was really cool.
For those that don't know it's a JS library that allows you to apply different effects to images using the canvas)-element.
So, naturally I had to create a jQuery plug-in that wraps all this cool functionality in a neat little package :)
The jQuery Pixastic Editor can be applied to any image in your document and inserts a completely stylable toolbar next to the image in question.
Have a look at an example
As usual I've set up a simple example-page, please have a look at the source for how to implement it. It requires a few other jQ-plugs and the options-form works best if you have the UI slider installed as well.
Without some sort of server-side script it's not possible to save the altered image as a new file, but the plug-in allows the user to click the modified canvas to open its dataURL in a new tab which allows him to then use the browser's save-functionality to save the image to their local machine.
It's dynamic like hell :)
The toolbar is automatically generated from all the actions currently in Pixastic.Actions. This means that your can download your own build of Pixastic and the plug-in will automatically adapt to whatever effects you've chosen.
Most of the effects require the you to set certain options, to avoid hard-coding each of the options for every effect I wrote a little PHP-script that parses the Pixastic website for information about each effect. When a new effect is added I run the script again and get the latest updates.
This means, however, that the options-form isn't exactly tailor made. Some of the options could very well be converted to drop-downs for usability, but it'll have to wait till next release.
I do look for certain things in the description of the option though like for example if anything like quot;X to|and Y quot; occurrs in the text I interpret that as min and max values for the option.
Any option with a min and max-value will get a jQuery UI Slider inserted beneath it (but only if the user of the plug-in has UI Slider installed).
Also, if the string quot;defaults to Z quot; occurrs I set Z to the default-value for that option.
I could (and will) probably solve the drop-down issue by looking for something like quot;one of quot;foo quot;, quot;bar quot; and quot;baz quot; quot; as that is how the author of Pixastic most commonly describes options with several possible values.
Finally
There are a few more features I haven't mentioned like different styles etc also it's highly in beta and a lot could be added but do have a look and let me know what you think.
Oh and I've only tested it in FF3.
Laters!
Comments are off
Filed under
jQuery
jQuery Drag to Select Plug-in
Monday, April 06, 2009
Use this plug-in to allow your visitors to select certain elements by dragging and dropping a quot;select box quot;.
It works very similar to how most OS:es allow you to select files and folders.
I've set up a simple demo, please check the source-code for the different options. It's still in semi-beta.
All my plug-ins will be re-released on andreaslagerkvist.com once it's finished (right now I'm pretty much just waiting for PHP5.3 to be released).
Comments are off
Filed under
Javascript, jQuery
Now with Ads!
Thursday, March 19, 2009
As you can see, unless you've got adblock installed, which you probably do.. :P, exscale.se has now got ads!
Most of the styles look like shit with the ad because it's too wide, but kubrick and aframework look fine.
AndreasLagerkvist.com is almost finished (although I don't think it'll be live for another few months) so I'm preparing to lay exscale to rest and the ads are one step in my plan towards becoming a millionaire without doing shit.
Comments are off
Filed under
Other, Site News
More than one draggable scroll container in jQuery UI
Thursday, March 12, 2009
jQuery UI's draggable plug-in has a scroll-setting which, if set to true, automatically scrolls the container of a draggable object.
The plug-in looks for the first parent-element with overflow set to either auto or scroll of the draggable element if the scroll-option is set to true.
But if you have one area with elements that you can drag onto another area you might want both the draggable and the droppable area to scroll when dragging occurrs.
Thus, I've made a few small changes to the scroll-function of the draggable plug-in which allows for the scroll-option to be a comma-separated list of CSS-selectors which will act as scroll container(s).
What I basically had to do was just wrap the whole functionality in a loop and store more than one overflow-object in an array.
The stuff you want to change to allow this starts with:
span
$.ui.plugin.add("draggable", "scroll", {span
And you want to change it into (I've commented by changes)
span
$.ui.plugin.add("draggable", "scroll", {br / start: function(e, ui) {br / var o = ui.options;br / var i = $(this).data("draggable");br / var j = 0; // Added this for loopingbr /br / o.scrollSensitivity = o.scrollSensitivity || 20;br / o.scrollSpeed = o.scrollSpeed || 20;br / i.overflows = []; // Added this to hold all the overflow elementsbr /br / // If the scroll-option is a stringbr / if (typeof(o.scroll) == 'string') {br / // Break out all the selectors and store the elements in the overflows-arraybr / var selectors = o.scroll.split(',');br /br / for (j = 0; selectors[j]; j++) {br / i.overflows.push({br / overflowY: $(selectors[j]), br / overflowX: $(selectors[j])br / });br / }br / } else {br / // This is the same as before except I put it all in the first element of the overflows-arraybr / i.overflows[0] = {br / overflowY: function(el) {br / do { if(/auto|scroll/.test(el.css('overflow')) || (/auto|scroll/).test(el.css('overflow-y'))) return el; el = el.parent(); } while (el[0].parentNode);br / return $(document);br / }(this), br / overflowX: function(el) {br / do { if(/auto|scroll/.test(el.css('overflow')) || (/auto|scroll/).test(el.css('overflow-x'))) return el; el = el.parent(); } while (el[0].parentNode);br / return $(document);br / }(this)br / };br / }br /br / // Added the loop so that this happens to all overflow-elementsbr / for (j = 0; i.overflows[j]; j++) { br / if(i.overflows[j].overflowY[0] != document amp; amp; i.overflows[j].overflowY[0].tagName != 'HTML') i.overflows[j].overflowYOffset = i.overflows[j].overflowY.offset();br / if(i.overflows[j].overflowX[0] != document amp; amp; i.overflows[j].overflowX[0].tagName != 'HTML') i.overflows[j].overflowXOffset = i.overflows[j].overflowX.offset();br / }br / br / },br / drag: function(e, ui) {br / var o = ui.options;br / var i = $(this).data("draggable");br / var j = 0; // Added this for loopingbr /br / // Added this for-loop as well as put everything in the overflows-arraybr / for (j = 0; i.overflows[j]; j++) { br / if(i.overflows[j].overflowY[0] != document amp; amp; i.overflows[j].overflowY[0].tagName != 'HTML') {br / if((i.overflows[j].overflowYOffset.top + i.overflows[j].overflowY[0].offsetHeight) - e.pageY lt; o.scrollSensitivity)br / i.overflows[j].overflowY[0].scrollTop = i.overflows[j].overflowY[0].scrollTop + o.scrollSpeed;br / if(e.pageY - i.overflows[j].overflowYOffset.top lt; o.scrollSensitivity)br / i.overflows[j].overflowY[0].scrollTop = i.overflows[j].overflowY[0].scrollTop - o.scrollSpeed;br / } else {br / if(e.pageY - $(document).scrollTop() lt; o.scrollSensitivity)br / $(document).scrollTop($(document).scrollTop() - o.scrollSpeed);br / if($(window).height() - (e.pageY - $(document).scrollTop()) lt; o.scrollSensitivity)br / $(document).scrollTop($(document).scrollTop() + o.scrollSpeed);br / }br /br / if(i.overflows[j].overflowX[0] != document amp; amp; i.overflows[j].overflowX[0].tagName != 'HTML') {br / if((i.overflows[j].overflowXOffset.left + i.overflows[j].overflowX[0].offsetWidth) - e.pageX lt; o.scrollSensitivity)br / i.overflows[j].overflowX[0].scrollLeft = i.overflows[j].overflowX[0].scrollLeft + o.scrollSpeed;br / if(e.pageX - i.overflows[j].overflowXOffset.left lt; o.scrollSensitivity)br / i.overflows[j].overflowX[0].scrollLeft = i.overflows[j].overflowX[0].scrollLeft - o.scrollSpeed;br / } else {br / if(e.pageX - $(document).scrollLeft() lt; o.scrollSensitivity)br / $(document).scrollLeft($(document).scrollLeft() - o.scrollSpeed);br / if($(window).width() - (e.pageX - $(document).scrollLeft()) lt; o.scrollSensitivity)br / $(document).scrollLeft($(document).scrollLeft() + o.scrollSpeed);br / }br / }br / }br /});span
So to use more than one scroll container simply specify the scroll options like so:
$('li').draggable({scroll: '#drop-area, #drag-area', refreshPositions: true});
I'm also setting refreshPositions to true so that the droppable's positions are recalculated when user drags (you can try it without to see the problem otherwise).
jQuery.com has this to say about refreshPositions: quot;Caution: This solves issues on highly dynamic pages, but dramatically decreases performance. quot; so use with care.
Note that this is for version 1.5.3, not sure if this is fixed or if it looks even remotely similar in latest version.
Comments are off
Filed under
Development, jQuery
A follow-up to quot;An alternative to div overlays quot;
Friday, February 13, 2009
quot;Cancel Bubble quot; pointed out in my previous post one thing that I hadn't thought of; users can still interact with the page behind when you don't use an actual element to cover it.
So, to solve this, but still use the same .dimmed-class on body, I simply added an empty div-element to body using JS:
span
.... code ...br / lt;script type="text/javascript" gt;br /var div = document.createElement('div');br /div.id = 'body-overlay';br /document.body.appendChild(div);br / lt;/script gt;br / lt;/body gt;span
And styled it, too, under body.dimmed:
span
#body-overlay {br / background: #000;br / opacity: .8;br / z-index: 1;br /br / position: fixed;br / left: 0;br / top: 0;br /br / display: none;br / width: 100%;br / height: 100%;br /}br /br /body.dimmed #body-overlay {br / display: block;br /}span
Together with the .dialog-styling I still only need to switch body's class to display a centered, modal dialog on top of a (now) non-interactive, dimmed page.
IE6 won't understand position: fixed; but I'm one of those that no longer care about IE6.
Comments are off
Filed under
CSS, Javascript
An alternative to DIV overlays
Tuesday, February 10, 2009
When displaying a modal dialog it's pretty common to dim the rest of the page to focus the user's attention on the dialog in question.
A common way to solve the dimming is to overlay the entire page with a 100% wide, 100% high div-element with a little opacity and then display the dialog on top of the overlay.
Recently at work I tried a different aproach for solving the dim and it worked out quite nicely.
Instead of overlaying a semi-transparent div on top of the page I instead made the actual page semi-transparent and simply changed body's background to something a little darker.
The semi-transparent #wrapper and darker body are both styled under body.dimmed so whenever I need to dim out the page I simply give body a class of quot;dimmed quot;.
The benefit here is that you don't need to play around with JS to create a div that always covers the entire viewport in every browser but instead you simply toggle a class-name on body.
Benefit number 2 is that since everything on your page (including the dialog) are contained within the body-element they too can be styled differently when body is dimmed and when it's not.
So the simple CSS turns out something like this:
span
/* Normal styling */br /body {br / background: #369;br /}br /br /#wrapper {br / background: #fff;br / width: 960px;br / margin: 0 auto;br /}br /br /div.dialog {br / background: #fff;br /br / display: none;br /br / position: absolute;br / left: 50%;br / top: 15%;br /br / width: 400px;br / margin: 0 0 0 -200px;br /}br /br //* Dimmed styling */br /body.dimmed {br / background: #111;br /}br /br /body.dimmed #wrapper {br / opacity: .1;br /}br /br /body.dimmed div.dialog {br / display: block;br /}span
As you can see all you need to do now to display a centered dialog on top of a dimmed page is to give body a class of quot;dimmed quot;. With jQuery it couldn't be easier:
span
$(' lt;a href="#" gt;toggle dialog lt;/a gt;').appendTo('#content').click(function() {br / $(document.body).addClass('dimmed');br /});span
Happy coding!
Laters
Comments are off
Filed under
CSS, Javascript, jQuery
Search
Post It
From June 02 to April 23
Mogrify is what you're looking for if you want to convert multiple images to multiple other images in ImageMagick
Tommorrow, finally, the inFamous demo will be friggin availble on PSN!! Suweeeeeeeeet
Fuck canvas is cool, I've started playing around with old 3D-shit again :)
Newer
Older
February 2011
S
M
T
W
T
F
S
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
Previous
Next
Recent Articles
Bye, bye exscale!
Kukk3D - Javascript 3D Engine
jQuery Pixastic Editor
jQuery Drag to Select Plug-in
Now with Ads!
More than one draggable scroll container in jQuery UI
A follow-up to quot;An alternative to div overlays quot;
An alternative to DIV overlays
Newer
Older
Recent Comments
Vlad on A follow-up to "An alternative to div overlays":I'll try this.....
Steve on jQuery Live Ajax Search Plug-in:This is a great script but I've got...
Frank on jQuery Live Ajax Search Plug-in:Hey, sounds like a great plugin! I ...
Andreas on jQuery Drag to Select Plug-in:@Paul - I didn't take into account ...
Newer
Older
Style Switcher
The style switcher allows you to change the look and feel of exscale.se.Only CSS and JavaScript are changed. The XHTML stays the same.
Select a Style
quot;Pattes quot;
aBlog Default
AdminStyle
aFrameWork
BlackNWhite
Blobby
Dark
Gearwheels
Green Twigs
GreenNGray
High Contrast (Black)
High Contrast (White)
IceCream
It's All Modules!
JoshuaInk Flowery Version
Jungle Box
Leaf
Mosquito
Mosquito 2
Mosquito 3
NeverUsed
NeverUsed2
Numero Uno
One Page
P900
Planet 3D
Round
Rounded Edge
SixtiesHeader
SoBasic
Three Column
Three Column 2
Tutorials on the Web
Very Gradient
WordPress Default 1.6
For more information about the styles, check the styles page.
Categories
(X)HTML (13)
3D Work (28)
Accessibility (5)
aFramework (6)
Ajax (6)
CSS (19)
Design (30)
Development (8)
Funny Stuff (11)
Javascript (23)
jQuery (22)
Old School (8)
Other (15)
PHP (17)
Progressive Enhancement (14)
Semantics (11)
Site News (71)
Usability (3)
Web Standards (13)
Web Work (11)
Random Quote
This left does not terminates in first floor - Lift sign
Random Images
Top Rated Articles
Silver Ball
O'Sullivan's Ameezing 147
Head Tracking using the Wii Remote
Lamp amp; Mates
CSS Boxar Med Rundade H ouml;rn, Toning Och Skugga
Handy CSS Constants
Kukk3D - Javascript 3D Engine
Ricky Gervais is a Genius!
Higher rated
Lower rated
Most Popular Articles
Simple Guestbook script
Skillnaden p aring; quot;de quot; och quot;dem quot;
jQuery Image Zoom Plug-in
Submit form using ajax jQuery plug-in
jQuery Image Viewer Plugin
Completely Unobtrusive jQuery Tabs
jQuery Full Width Navigation Plug-in
jQuery Imgbox Plug-In
More popular
Less popular
Answer This!
Do you find the quot;scroll-pagination quot; annoying? (If you don't know what it is, scroll to the bottom of the first-page)
Yes
No
I still don't get it
Previous
Next
Blog Roll
HTMLDogBrilliant (X)HTML and CSS guide
Robert's TalkRobert Nyman
Wait till I ComeChris Heilmann
LachyLachlan Hunt
Top
Contact
Search
RSS
Firefox
XHTML
CSS
Copyright copy; 1996-2011 Andreas Lagerkvist