Explore Posterous

symSlider PortFolio and Solo Scroller Stacks

Wow a busy week and we have two new stacks to launch today,

symSlider PortFolio: a beautiful image scroller that auto generates thumbnails and gives you a funky fade and scroller effect for your photos/images. Once again we have added our signature automation to these to make your job easier to produce great looking websites.

Learn more by watching our video or visting our store

symSolo Navaigation Scroller: Well we could not resist but take the scroller a little bit further and add in some anchor tags and make a great little navigation stack that you can link to external sites or internal RapidWeaver Pages:

Learn more by watching our video or visting our store

 

symSlider - Slider and Automation together

symSlider is a brand new stack from SymfoniP. Utilising the power of the ‘Stacks’ Image Stack that is already built in to the Stacks Plugin and  jQuery code to create an automated Image Slider.

That’s right this is all jQuery , not Flash, so your iPhone will thank you too.

Like with all our stacks, we like to automate as much as possible to leave you ,the designer, to just get on and build great sites quickly without thinking about integrating any additional code.

Learn more about by symSlider by watching it in action below.

symSlider is available for a limited time at only $9.95 at our online store so get it fast before we put the price up to our recommended $12.95.

enjoy :)

Risingstar 4 in 1 - Business & Portfolio Theme

Pandora (WordPress) - Business & Portfolio

Unique Portfolio Business Gallery Wordpress

FolioThemes: Portfolio

Apple-like scrollable showcase

I had a good JS session yesterday, building a widget for the marketing page of our freshly launched (Estonia only, right now) app Printfolder. Inspired by the the products browser at http://www.apple.com/mac/, we decided to try with something similar, but having panes with entirely different contents instead of displaying loads of coherent items. I named the class Scrollcase (of course it's powered by MooTools >= 1.2).

Live result (at the bottom of the page): http://www.printfolder.ee/

I wanted to keep the usage quite simple by not having strict rules about how the HTML should be structured in order to use Scrollcase, so the class generates as much elements as possible. Basically, something like this should be perfectly enough (with the complementary scrollcase.css file):

The container element does have to have a width defined, as the script relies on that all children have the same width, which is calculated from the container width.

If you like it, dig deeper into the sources at GitHub.

(Gadget) Prosthetic slider to replace turtle's legs

Skinning the Scrubber and VolumeSlider

First about the slider and where it is used.
The slider is the base class for the Scrubber and the VolumeSlider controls. Each extends it and in theory each could support a vertical orientation.

The original idea behind the skinning started from the button logic where the size of the button would be determined by the background size of the skin. The confusing part is knowing which skins are going to change the the layout of your component. Here’s how they map:

• Vertical Volume Slider Background = VerticalVolumeSkin
• Volume Slider Background = VolumeSkin 
• Scrubber Background Skin = BackgroundSkin
  

A final note about sizing.
Once the component loads the skin it sets it’s size BUT this can be overridden by the component if the size changes. This only happens in the Scrubber if the control rack changes size ( for now ) and it’s constrained by the orientation of the slider. So the the height of the component will be set by the skin but if a button is removed from the control rack the Scrubber will extend to fill the space.

About the other skin layers.
The component has other skin layers (track, progress, thumb) that is uses to compose the UI. These are aligned in the center of the component vertically in the default horizontal slider and horizontally in the vertical slider. They often have a clear bounding box around them to provide a larger hit area for the user and sometimes to align on the pixel. This pixel alignment can get tricky and sometime adding an extra pixel in the clear hit area will help it snap so you get a crisp edge.

How to make a useful slider in 30 lines of javascript

I was looking a bit at yui slider packet, and it seems todo way too much. I am one of these crasy people that like to know how my code works and after look at yui code base, I decided it was too much for just a simple little slider.
 
Naturally js-frames are perfect if you just want something quick and dont think its fun to deal with cross browser issues. As I have come to know javascript better, I prefer to avoid all these frameworks.
I just want something that is easy to change/maintain/simple and doesnt have to many dependency.
 
So I decide to spend a little hour to create a simple slider that does what i want. It ended up just below 30 lines of javascript.
 
The HTML :

<div id="volumeBar" class="volumeBar">
<div id="volumeSlider" class="volumeSlider">

The Javascript: 
 
   
  var volumeBar = document.getElementById('volumeBar'); 
 
     var slider = document.getElementById('volumeSlider'); 
 
     var getPosition = function(el) { 
       var curLeft = curTop = 0; 
       while(el) { 
         curLeft += el.offsetLeft; 
         curTop += el.offsetTop; 
         el = el.offsetParent; 
       } 
       return {left : curLeft, top : curTop}; 
     } 
 
     volumeBar.onmouseup = function(e) { 
       volumeBar.onmousemove = null; 
       var event = e || window.event; 
       var volLeft = getPosition(volumeBar).left; 
       var width = volumeBar.offsetWidth; 
       slider.style.width = (event.clientX - volLeft)/width * 100 + 'px'; 
     }; 
 
     volumeBar.onmousedown = function() { 
       var volLeft = getPosition(volumeBar).left; 
       var width = volumeBar.offsetWidth; 
       document.onmouseup = function() { 
         document.onmouseup = null; 
         volumeBar.onmousemove = null; 
       }; 
       volumeBar.onmousemove = function(e) { 
         var event = e || window.event; 
         slider.style.width = (event.clientX - volLeft)/width * 100 + 'px'; 
       }; 
       return false; 
     };




	
	

	
Filed under:
	
	slider



		

			   
			  
				  
					Loading   
					mentions  
				  
			  
			Retweet
			
		

		
			Comment (0) »