Changes

• Maintain an empty element with a short discription and an empty value in your html page and the class will  not remove this one while you change the parent select box
• Set the value of the first select box to the empty option after page reload
• Comments added for developers and curious people
• Updated the example
• Removed some overhead in the class

Go the the original page of the cvLinkSelect class!

View example Download file

Changes

• Multiple GET variables in the request url.
• After a page refresh the script checks if the first linked selectbox option is not empty. If it isn’t empty the first request fires.
• If the request is empty it’s the last item in the linked selectboxes range. In this case we have to fire the isLast function.

Read more about the usage on the original post for the cvLinkSelect class!

Enjoy!

This class links the select boxes to each other. When you change the first select element the options for the following select boxes are loaded. Simple as that.

View example Download file Download Zip

The html

Note that only the first select element has some options in it. These can be static html or generated by php.

-- Select the category --
Car
Bicycle


-- Select the type --


-- Select the function --

The css

These css is only for the style of the form elements. Nothing special.

Do you need a neat little loading gif? Just go to Ajaxload and download your own!

.loading{
	background: url(images/loading.gif) 170px center no-repeat;
	}

.inputbox {
	width: 220px;
	padding: 5px;
	border:1px solid #EEE;
	font: 12px "Courier New", Courier, monospace;
	color: #333;
	}

select.inputbox {
	width: 232px;
	}

The javascript

This is where the magic happens. Two variables are very important to make this class work.

• value: This is the name of the object that is the value in the future option element
• option: This is the name of the object that is the visual value of in the option element

window.addEvent('domready', function() {
	var l = new cvLinkSelect({
        select_class: '.linked', //the class for the linked select boxes
		url: 'yourajaxurl.php', //pad to ajax file
		multiple_var: true, //use multiple get variables or only one
		loadClass: 'loading', //the css class that is added when a request is made
		isLast: function(){
			alert('Last dynamic selectbox!');
		},
		hasnoSub: function(){
			alert('This option has no depending options. Lets hide the next elements!');

			l.select.each(function(s){
				if(l.select.indexOf(s) >= l.select.indexOf(l.current)){ //if the select depends on the parent
					s.hide();
				}
			});
		},
		hasSub: function(){
			l.select.each(function(s){
				if(l.select.indexOf(s) >= l.select.indexOf(l.current)){ //if the select depends on the parent
					s.show();
				}
			});
		}
	});
});

The JSON format

You have to make sure that the AJAX request returns a JSON format that is formatted like the example below.

NOTE
Be sure that the json always contains a value and a html object. See the demo for a example.

[{"value":"wheels","html":"Wheels"},
{"value":"body","html":"Body"},
{"value":"exaust","html":"Exaust"}]

The php

The php file has to return a JSON formatted string depending on the selected value. You can use if-statements or use a switch method to print the exact output but the basics are just this:

if(isset($_GET['category'])){
	echo '[{"value":"wheels","html":"Wheels"},{"value":"body","html":"Body"}]';
}elseif(isset($_GET['type'])){
	echo '[{"value":15,"html":"15 inch"},{"value":17,"html":"17 inch"}]';
}

When your website is dynamic you probably prefer to use a flexible way of presenting the JSON variable. Read more about this in another article I’ve wrote. I think it’s very useful so read it and don’t reinvent the wheel.

Multiple GET variables

In the old version we had only request with this kind of urls:

ajax.php?category=var

But in my opinion this wasn’t sufficient for the main goal: Get the right data in the select boxes and make programming easier. So that’s why I’ve made an update to the class so you can get this kind of requests:

ajax.php?category=var&type=var2

These urls can be activated via the multiple_var option in the class. Before you use them: please make sure that your php script has the correct architecture. A very basic example:

if(!empty($_GET['category'])){
	if($_GET['category'] == 'car'){
		if(!empty($_GET['type'])){
			if($_GET['type'] == 'wheels'){
				/* return the wheels JSON variabele */
			}
		}else{
			/* return the car JSON variable */
		}
	}
}

I hope you enjoy this class and if you have any questions or suggestions; please leave a comment!

Changelog

• v1.4 30 mrt 2010
  • Fixed the weird Elements bug in Mootools 1.2.4
  • Upgraded the speed with document.createDocumentFragment()
• V1.3 26 feb 2010
  • It’s possible to disable the select elements when no options are available. This is great feedback
• V1.2.2 – 21 feb 2010
  • Fixed the reset bug. It will be resetting all the select elements if an empty value is set.
• V1.2.1 – 20 feb 2010
  • Reset the depending select elements if when a user changes the upper select element
• V1.2 – 26 nov 2009
  • Maintain an empty element with a short discription and an empty value in your html page and the class will  not remove this one while you change the parent select box
  • Set the value of the first select box to the empty option after page reload
  • Comments added for developers and curious people
  • Updated the example
  • Removed some overhead in the class
• V1.1 – 2 nov 2009
  • Multiple GET variables in the request url.
  • If the request is empty it’s the last item in the linked selectboxes range. In this case we have to fire the isLast function.
• V1.0 – 1 nov 2009
  • First release of the link select class

View example Download file

I even added a onComplete function which you can customize yourself!

The html

The css

#appear li {
	float: left;
	list-style-type: none;
	display: block;
	width: 150px;
	height: 150px;
	margin: 10px;
	}

#appear img {
	border: none;
	}

The javascript

window.addEvent('domready', function() {

	var ap = new cvElementAppear('appear',{
		elements: 'img',
		endwidth: 150,
		endheight: 150,
		duration: 1000,
		transition: Fx.Transitions.Sine.easeIn,
		onComplete: function(){
			alert('Finish!');
		}
	});
});

View example Download file

Download now!

The html

The css

.newsticker {
	height: 300px;
	width: 500px;
	display: block;
	overflow: hidden;
	position: relative;
	}

.images {
	height: 270px;
	width: 270px;
	}

img {
	border: none;
	}

.newsticker ul li {
	/*float: left; add the float: left when you prefer a horizontal news ticker*/
	display: block;
	width: 480px;
	padding: 10px;
	font: .8em Georgia, "Times New Roman", Times, serif;
	}

.tickertitle {
	display: block;
	font: bold .9em Georgia, "Times New Roman", Times, serif;
	}

.tickerimg {
	float:left;
	margin: 0px 15px 15px 0px;
	}

The javascript

window.addEvent('domready', function() {
	var news = new cvNewsTicker('tickerimages',{speed:500,delay:5000,direction:'horizontal'});
});

Changelog

• V1.0.1 – 7 dec 2009
  • Added a delay when the page is loaded
    
• V1.0 – 17 apr 2009
  • First release of the news ticker class

This class is so powerful that I’ve used it also on this website!

View example Download file

The html

The html in this example is very basic

Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

/* and so on and so on...*/

RelativeTop!

The css

Please take note of the margin-top variable in the col div.

#text {
	float: left;
	width: 500px;
	padding: 10px;
	background-color: #EEE;
	}

#col {
	margin-top: 0px; /*if this one is not defined the class will not work properly*/
	float: left;
	padding: 10px;
	width: 270px;
	height: 503px;
	background: url(images/rcol_example.jpg) no-repeat;
	}

The javascript

Just slides the relative div with an animation.

window.addEvent('domready', function() {
    var relative = new cvRelativeTop('col',{duration: 200, between: [250,1000] });
});

Advanced example with custom function onTransition

You can add a custom function in the onTransition parameter in case you would like more control over the class and it’s behaviour.

window.addEvent('domready', function() {
    var relative = new cvRelativeTop('col',{
        duration: 200,
        between: [250,1000],
        transition: transition: Fx.Transitions.Bounce.easeIn,
        onTransition: function(){
            var margintop = $('col').getStyle('margin-top').toInt();
            if(margintop > 500 && margintop < 550){
                alert('margin-top > 500px!');
            }
        }
    });
});

View example Download file

The html

input:focus {
    border: 1px #CC0000 solid;
}

This Mootool gives more style because it animates the on focus handle.

View example

The html

The html is partly the exact html that I used on the previous article about forms: The right way to style a form.

Profile info

Username


Password


Subscribe to newsletter

The Mootool

The mootools javascript uses the morph transition. Read more about this at the Mootools docs.

window.addEvent('domready', function(){
    var list = $$('form .inputbox');

    list.each(function(e) {
        var highlighter = new Fx.Tween(e);

        e.addEvent('focus', function(){
            highlighter.start(
                'background-color', '#666'
                'border', '#EEE'
            );
        });

        e.addEvent('blur', function(){
            highlighter.start(
                'background-color', '#FFF',
                'border', '#EEE'
            );
        });
    });
});

View full example

form

Everyone who surfs on the internet uses forms. Sending emails, register on web-pages, they can be used for countless purposes. Read more about forms.

Required parameters

• action required- The url of the file where the form is pointing to

//your form elements

fieldset

The fieldset adds a border to your form. I recommend to add always a fieldset in your html. You can hide the border with a css file. You can add multiple fieldsets to one form to make some categories for more structure.

//your form elements

legend

The legend is placed in line with the fieldset. The combination of these two elements .

The title

label

Labels are very useful to add more functionality tor your form. When a user clicks on the label the input it highlights the input element with a corresponding id. Read more about labels

Required parameters

• for – Boe

Username

input

There are a lot of input types you can use to build your form.
Required parameters

• name – When a user clicks on the label the input it highlights the input element with a corresponding id

The html

Profile info

Username


Password


Subscribe to newsletter



Personal info

Gender
 Male
 Female
                        

Date of birth

2009
2010
2011


About

I'm building websites for

Profession
Hobby
Both
Other


 

The css

The following css is used in the example:

fieldset {
	width: 450px;
	border:1px solid #EEE;
	border-bottom: none;
	padding: 10px;
	}

fieldset p {
	margin: 0px 0px 3px 0px;
	}

legend {
	font: bold 0.9em Georgia, "Times New Roman", Times, serif;
	color: #f8991d;
	}

label {
	width: 220px;
	padding: 5px 0px;
	float: left;
	display: block;
	font: bold 0.8em Verdana, Arial, Helvetica, sans-serif;
	color: #333;
	}

.inputbox {
	width: 200px;
	padding: 5px;
	border:1px solid #EEE;
	font: 12px "Courier New", Courier, monospace;
	color: #333;
	}

select.inputbox {
	width: 212px;
	}

.radio {
	float: left;
	display: block;
	width: 200px;
	margin-bottom: 3px;
	}

View example

Additional info

See the demo Download file

The css

.index_button {
	width: 30px;
	height: 126px;
	float: left;
	cursor: pointer;
	}

.prev {
	background: #FFF url(images/index_prev.jpg) center right no-repeat;
	margin-right: 10px;
	}

.prev_hover {
	background: #FFF url(images/index_prev_h.jpg) center right no-repeat;
	}

.next {
	background: #FFF url(images/index_next.jpg) center left no-repeat;
	margin-left: 10px;
	}

.next_hover {
	background: #FFF url(images/index_next_h.jpg) center left no-repeat;
	}

#portfolio_index, #portfolio_index2 {
	padding-top: 10px;
	width: 700px;
	height: 115px;
	float: left;
	overflow: hidden;
	}

#portfolio_index3 {
	width: 140px;
	height: 105px;
	float: left;
	overflow: hidden;
	}

#portfolio_index ul li, #portfolio_index2 ul li, #portfolio_index3 ul li {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	float: left;
	cursor: pointer;
	}

.item_hover {
	border: 1px #CCC solid;
	}

.loading {
	background:url(images/ajax-loader.gif) center center no-repeat;
	}

.active {
	border: 1px #F8991D solid;
	}

The html

The usage

See the example for the usage of the visited items using a Cookie.

window.addEvent('domready', function() {
	var slider = new cvStepSlider({
		wrapper: 'portfolio_index',
		list: 'items',
		items: '#portfolio_index ul li img',
		itemWidth: 140,
		itemHeight: 105,
		startSlide: 1,
		type: 'horizontal',
		step: 'item',
		nextbutton: 'next',
		prevbutton: 'prev',
		log: true,
		result: 'res',
		preloadImages: ['images/index_next_h.jpg','images/index_next.jpg','images/index_prev_h.jpg','images/index_prev.jpg']
	});
});