This great (and is really great, trust me!) editor has a new version released which have a brand new bundle editor and a lots of minor bugs fixed:

• All new bundle editor! You can now edit the bundle items directly in the editor with all basic features available (syntax highlighting, snippets, undo history, etc..).
• Hold down shift when selecting an item from the bundle menu and it will open directly in the editor.
• From the context menu in the bundle pane you can now export full bundles and individual items for easy sharing.
• Added syntax for MSDOS batch files (.bat).
• Lots of minor bugfixes.

The latest release can be downloaded at:
http://e-texteditor.com/download/e_setup.exe

I hope only will be stable as previous version (.26) and not like .21-.25 version

As i said before, i will show you some more nice tricks on that carousel. Today i will show you how can you put a fully automated pagination.

How it works?

A page have five items. So we need to scroll five items with one click. We take the full width of carousel items wrapper (UL) and divide to carousel width (div.carousel). To be sure we will have an integer number, we will round up the number (using Math.ceil()). After that, we will insert a link for each page between previous and next link. So, here how I did it: (to avoid confusion, i will use italics for previous/next links - which actually is the carousel control)
(more…)

If you ever used jQuery UI Accordion before, you probably notice that sometimes you have an annoyng bug when you change between accordion items: the bottom of the accordion jumps few pixels. Why is that? That’s why because Dimension plugins (which is included on last version of jquery, by the way) doesn’t know to compute very well the dimensions if you have padding/border attributes.

So, what can I do, perhaps you ask yourself?

• Don’t use padding and borders anymore. Uh… Not too reliable, isn’t?
• Use extra markup. Well… Is not too elegant, but is the best (and also the simplest) way to get rid of headaches! So the only thing you must do is to wrap all accordion item content into a div :

(more…)

Ok, as ai said you before, i want to make a tutorial about a more advanced carousel than previous was.

I won’t explain HTML and CSS code (is very simple and intutive):

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

<div class="carousel">
	<div class="ctrls">
		<a href="#" class="prev">Previous</a>
		<a href="#" class="next">Next</a>
	</div>
<ul class="clearfix">
	<li><img src="http://farm4.static.flickr.com/3164/2719962411_77cf9e1699_t.jpg" alt="" /></li>
	<li><img src="http://farm4.static.flickr.com/3159/2720786298_d33f97bfcd_t.jpg" alt="" /></li>
	<li><img src="http://farm4.static.flickr.com/3280/2719962373_f49bb3e2a2_t.jpg" alt="" /></li>
	<li><img src="http://farm4.static.flickr.com/3001/2720787742_d2f263372c_t.jpg" alt="" /></li>
	<li><img src="http://farm4.static.flickr.com/3046/2720787680_8f358f938e_t.jpg" alt="" /></li>
	<li><img src="http://farm4.static.flickr.com/3108/2719963843_f2e963af8f_t.jpg" alt="" /></li>
	<li><img src="http://farm4.static.flickr.com/3141/2719965289_83902cf96c_t.jpg" alt="" /></li>
 
	<li><img src="http://farm4.static.flickr.com/3164/2719962411_77cf9e1699_t.jpg" alt="" /></li>
	<li><img src="http://farm4.static.flickr.com/3159/2720786298_d33f97bfcd_t.jpg" alt="" /></li>
	<li><img src="http://farm4.static.flickr.com/3280/2719962373_f49bb3e2a2_t.jpg" alt="" /></li>
	<li><img src="http://farm4.static.flickr.com/3001/2720787742_d2f263372c_t.jpg" alt="" /></li>
	<li><img src="http://farm4.static.flickr.com/3046/2720787680_8f358f938e_t.jpg" alt="" /></li>
	<li><img src="http://farm4.static.flickr.com/3108/2719963843_f2e963af8f_t.jpg" alt="" /></li>
	<li><img src="http://farm4.static.flickr.com/3141/2719965289_83902cf96c_t.jpg" alt="" /></li>
</ul>
 
 
</div>

CSS file:

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
29
30
31

* {margin:0;padding:0;}
 
.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix {display:inline-block}
/* Hide from IE Mac \*/
.clearfix {display:block}
/* End hide from IE Mac */
* html .clearfix {height:1px}
.carousel {
	position: relative;
	overflow:hidden;
	height:500px;
	width:540px;
	margin:50px auto
}
	.carousel .ctrls {
		margin:10px
	}
	.carousel ul {
		position: absolute;
		width:8000px;
	}
		.carousel li {
			float:left;
			width:98px;
			height:98px;
			border: 1px solid #fff;
			list-style:none;
			margin-right:10px;
			text-align: center;
		}

The good part of this carousel is that you can have as many as you want in your page. You can have both fixed and fluid width and will work with no problem. Or at least no problem: on fluid layout, some images can be cutted. So, the best use is fixed width. Also, you can have autoscroll (with timers, i will say more later), but is not recommended because you may encounter some performance troubles.

After we include last version of jQuery, we have to do these things:

1) Iterate trough all .carousel containers (if you want to pick another name, this is the place and this is also the time!) and set the width.

1
2
3
4
5

$('.carousel').each(function(){
	var _this=this;
	var elWidth = $(_this).find('li:eq(0)').width()+12;
	$(_this).find('ul').width(elWidth*$(_this).find('li').length).css('left', 0);
});

We assume that all LI have same width, 10px margin and a border. So we adjust the width with 12 px (2px from border). If you have a wider margin (or none) change it, otherwise you will have some serious problems

The previous/next buttons we will control with a separate function, because we don’t have double scroll on double click, right? We put the function INSIDE of the each loop:

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
29
30

function carouselCtrls () {
	$(_this).find('a.prev').unbind().click(function(){
		$(this).unbind();
		if(parseInt($(_this).find('ul').css('left'))<0) {
			$(_this).find('ul').animate({
				left: '+='+elWidth
			}, function(){
				carouselCtrls();
			});
		}
		return false;
	});
	$(_this).find('a.next').unbind().click(function(){
		$(this).unbind();
		var maxWidth = (parseInt($(_this).find('ul').width())-$(_this).width()-10)-(-parseInt($(_this).find('ul').css('left')));
		if(maxWidth>0){
 
		$(_this).find('ul').animate({
			left: '-='+elWidth
		}, function(){
				carouselCtrls();
			});
		}else {
			$(_this).find('ul').animate({left:0},function(){
				carouselCtrls();
			});
		}
		return false;
	});
	};