Skip to main content
Code Review

Return to Question

Rollback to Revision 5
Source Link
Joshua M
  • 145
  • 1
  • 10
(function($) {
 $.fn.extend({
 divFlipjFlip: function(options) {
 var defaults = {
 trigF: '.flipDiv',
 trigB: '.flipDivBack',
 duration: 500
 };
 var o = $.extend({}, defaults, options);
 return this.each(function() {
 var $flipDivf = $(this'.front');
 $front = $flipDiv.find('[data-face=front]:first');
  $backb = $flipDiv.find$('[data-face=back]:first''.back');
 margin = $frontf.width() / 2;
 width = $frontf.width();
 height = $frontf.height();
 $backb.hide().css({
 width: '0px',
 height: '' + height + 'px',
 marginLeft: '' + margin + 'px',
 opacity: '0'
 });
 $(o.trigF).on('click', function() {
 $frontvar $this = $(this);
 $this.parents().closest(f).animate({
 width: '0px',
 height: '' + height + 'px',
 marginLeft: '' + margin + 'px',
 opacity: '0'
 }, {
 duration: o.duration500
 });
 window.setTimeout(function() {
 $back$this.parents().next(b).animate({
 width: '' + width + 'px',
 height: '' + height + 'px',
 marginLeft: '0px',
 opacity: '1'
 }, {
 duration: o.duration500
 });
 }, o.duration500);
 });
 var $button = $(o.trigB);
 $button$(o.trigB).on('click', function() {
 $back$(this).parents().closest(b).animate({
 width: '0px',
 height: '' + height + 'px',
 marginLeft: margin'' +margin + 'px',
 opacity: '0',
 display: 'none'
 }, {
 duration: o.duration500
 });
 var $this = $(this).parents().siblings(f);
 window.setTimeout(function() {
 $front$this.stop().animate({
 width: '' + width + 'px',
 height: '' + height + 'px',
 marginLeft: '0px',
 opacity: '1'
 }, {
 duration: o.duration500
 });
 }, o.duration500);
 });
 });
 }
 });
})(jQuery);

The div structure is this:

<div class="widgetBox">
 <div data-face="front" <div class="front">
 <p>Front of the div</p>
 <button class="flipDiv">Flip</button>
 </div>
 <div data-face="back" <div class="back">
 <p>Back of the div</p>
 <button class="flipDivBack">Flip Back</button>
 </div>
</div>

​

And this is the initiation:

You can see a jFiddlejsFiddle of this in action here here.

(function($) {
 $.fn.extend({
 divFlip: function(options) {
 var defaults = {
 trigF: '.flipDiv',
 trigB: '.flipDivBack',
 duration: 500
 };
 var o = $.extend({}, defaults, options);
 return this.each(function() {
 var $flipDiv = $(this);
 $front = $flipDiv.find('[data-face=front]:first');
  $back = $flipDiv.find('[data-face=back]:first');
 margin = $front.width() / 2;
 width = $front.width();
 height = $front.height();
 $back.css({
 width: '0px',
 height: height,
 marginLeft: margin,
 opacity: '0'
 });
 $(o.trigF).on('click', function() {
 $front.animate({
 width: '0px',
 height: height,
 marginLeft: margin,
 opacity: '0'
 }, {
 duration: o.duration
 });
 window.setTimeout(function() {
 $back.animate({
 width: width,
 height: height,
 marginLeft: '0px',
 opacity: '1'
 }, {
 duration: o.duration
 });
 }, o.duration);
 });
 var $button = $(o.trigB);
 $button.on('click', function() {
 $back.animate({
 width: '0px',
 height: height,
 marginLeft: margin,
 opacity: '0'
 }, {
 duration: o.duration
 });
 window.setTimeout(function() {
 $front.animate({
 width: width,
 height: height,
 marginLeft: '0px',
 opacity: '1'
 }, {
 duration: o.duration
 });
 }, o.duration);
 });
 });
 }
 });
})(jQuery);

The div structure is this

<div class="widgetBox">
 <div data-face="front" class="front">
 <p>Front of the div</p>
 <button class="flipDiv">Flip</button>
 </div>
 <div data-face="back" class="back">
 <p>Back of the div</p>
 <button class="flipDivBack">Flip Back</button>
 </div>
</div>

​

And this is the initiation

You can see a jFiddle of this in action here.

(function($) {
 $.fn.extend({
 jFlip: function(options) {
 var defaults = {
 trigF: '.flipDiv',
 trigB: '.flipDivBack'
 };
 var o = $.extend({}, defaults, options);
 return this.each(function() {
 var f = $('.front');
 b = $('.back');
 margin = f.width() / 2;
 width = f.width();
 height = f.height();
 b.hide().css({
 width: '0px',
 height: '' + height + 'px',
 marginLeft: '' + margin + 'px',
 opacity: '0'
 });
 $(o.trigF).on('click', function() {
 var $this = $(this);
 $this.parents().closest(f).animate({
 width: '0px',
 height: '' + height + 'px',
 marginLeft: '' + margin + 'px',
 opacity: '0'
 }, {
 duration: 500
 });
 window.setTimeout(function() {
 $this.parents().next(b).animate({
 width: '' + width + 'px',
 height: '' + height + 'px',
 marginLeft: '0px',
 opacity: '1'
 }, {
 duration: 500
 });
 }, 500);
 });
 
 $(o.trigB).on('click', function() {
 $(this).parents().closest(b).animate({
 width: '0px',
 height: '' + height + 'px',
 marginLeft: '' +margin + 'px',
 opacity: '0',
 display: 'none'
 }, {
 duration: 500
 });
 var $this = $(this).parents().siblings(f);
 window.setTimeout(function() {
 $this.stop().animate({
 width: '' + width + 'px',
 height: '' + height + 'px',
 marginLeft: '0px',
 opacity: '1'
 }, {
 duration: 500
 });
 }, 500);
 });
 });
 }
 });
})(jQuery);

The div structure is this:

<div class="widgetBox">
  <div class="front">
 <p>Front of the div</p>
 <button class="flipDiv">Flip</button>
 </div>
 <div class="back">
 <p>Back of the div</p>
 <button class="flipDivBack">Flip Back</button>
 </div>
</div>

And this is the initiation:

You can see a jsFiddle of this in action here.

Post a comment with changes and do not update the original question if you believe changes/enhancements should be made, as changing the original question doesn't allow discussion. Changes were made to the initiation to target a class not a data- attribute which was covered in the accepted answer.
Source Link
Joshua M
  • 145
  • 1
  • 10

Review my jQuery 'flip' plugin

e: I have updated the code thanks to the comments from edan, however still feel like there is more I can do with this code.

The divdiv structure is this

At the moment, however, you can stillThe only have one instanceoptions as of the codeyet however are trigF and I would love if someone could help me out on having multiple instances of the code. If you look here trigB, which allows you will seeto specify the problemname of multiple divs using this code!

I am also working on using CSS3 to detect whether or not I can use if inyour buttons which will flip the browser, and if not, falling back to this, as from what I have seen, scripts doing this do not currently have CSS3 with a jQuery fallbackdiv.

Review my jQuery 'flip' plugin

e: I have updated the code thanks to the comments from edan, however still feel like there is more I can do with this code.

The div structure is this

At the moment, however, you can still only have one instance of the code and I would love if someone could help me out on having multiple instances of the code. If you look here you will see the problem of multiple divs using this code!

I am also working on using CSS3 to detect whether or not I can use if in the browser, and if not, falling back to this, as from what I have seen, scripts doing this do not currently have CSS3 with a jQuery fallback.

jQuery 'flip' plugin

The div structure is this

The only options as of yet however are trigF and trigB, which allows you to specify the name of your buttons which will flip the div.

Rollback to Revision 3
Source Link
Joshua M
  • 145
  • 1
  • 10

Review my jQuery 'flip' plugin

e: I have updated the code thanks to the comments from edan, however still feel like there is more I can do with this code.

(function($) {
 $.fn.extend({
 jFlipdivFlip: function(options) {
 var defaults = {
 trigF: '.flipDiv',
 trigB: '.flipDivBack',
 duration: 500
 };
 var o = $.extend({}, defaults, options);
 return this.each(function() {
 var f$flipDiv = $('.front'this);
 $front = $flipDiv.find('[data-face=front]:first');
 b$back = $('$flipDiv.back'find('[data-face=back]:first');
 margin = f$front.width() / 2;
 width = f$front.width();
 height = f$front.height();
 b.hide()
 $back.css({
 width: '0px',
 height: '' + height + 'px',
 marginLeft: '' + margin + 'px',
 opacity: '0'
 });
 $(o.trigF).on('click', function() {
 var $this = $(this);
 $this.parents().closest(f)$front.animate({
 width: '0px',
 height: '' + height + 'px',
 marginLeft: '' + margin + 'px',
 opacity: '0'
 }, {
 duration: 500o.duration
 });
 window.setTimeout(function() {
 $this.parents().next(b)$back.animate({
 width: '' + width + 'px',
 height: '' + height + 'px',
 marginLeft: '0px',
 opacity: '1'
 }, {
 duration: 500o.duration
 });
 }, 500o.duration);
 });
 var $button = $(o.trigB);
 $(o.trigB)$button.on('click', function() {
 $(this).parents().closest(b)$back.animate({
 width: '0px',
 height: '' + height + 'px',
 marginLeft: '' +margin + 'px'margin,
 opacity: '0',
 display: 'none'
 }, {
 duration: 500o.duration
 });
 var $this = $(this).parents().siblings(f);
 window.setTimeout(function() {
 $this.stop()$front.animate({
 width: '' + width + 'px',
 height: '' + height + 'px',
 marginLeft: '0px',
 opacity: '1'
 }, {
 duration: 500o.duration
 });
 }, 500o.duration);
 });
 });
 }
 });
})(jQuery);

The divdiv structure is this:

<div class="widgetBox">
 <div data-face="front" class="front">
 <p>Front of the div</p>
 <button class="flipDiv">Flip</button>
 </div>
 <div data-face="back" class="back">
 <p>Back of the div</p>
 <button class="flipDivBack">Flip Back</button>
 </div>
</div>

​

And this is the initiation:

The only options as of yetAt the moment, however are trigF and trigB, which allows you to specifycan still only have one instance of the namecode and I would love if someone could help me out on having multiple instances of your buttons whichthe code. If you look here you will flipsee the divproblem of multiple divs using this code!

I am also working on using CSS3 to detect whether or not I can use if in the browser, and if not, falling back to this, as from what I have seen, scripts doing this do not currently have CSS3 with a jQuery fallback.

You can see a jsFiddlejFiddle of this in action here here.

jQuery 'flip' plugin

(function($) {
 $.fn.extend({
 jFlip: function(options) {
 var defaults = {
 trigF: '.flipDiv',
 trigB: '.flipDivBack'
 };
 var o = $.extend({}, defaults, options);
 return this.each(function() {
 var f = $('.front');
 b = $('.back');
 margin = f.width() / 2;
 width = f.width();
 height = f.height();
 b.hide().css({
 width: '0px',
 height: '' + height + 'px',
 marginLeft: '' + margin + 'px',
 opacity: '0'
 });
 $(o.trigF).on('click', function() {
 var $this = $(this);
 $this.parents().closest(f).animate({
 width: '0px',
 height: '' + height + 'px',
 marginLeft: '' + margin + 'px',
 opacity: '0'
 }, {
 duration: 500
 });
 window.setTimeout(function() {
 $this.parents().next(b).animate({
 width: '' + width + 'px',
 height: '' + height + 'px',
 marginLeft: '0px',
 opacity: '1'
 }, {
 duration: 500
 });
 }, 500);
 });
 
 $(o.trigB).on('click', function() {
 $(this).parents().closest(b).animate({
 width: '0px',
 height: '' + height + 'px',
 marginLeft: '' +margin + 'px',
 opacity: '0',
 display: 'none'
 }, {
 duration: 500
 });
 var $this = $(this).parents().siblings(f);
 window.setTimeout(function() {
 $this.stop().animate({
 width: '' + width + 'px',
 height: '' + height + 'px',
 marginLeft: '0px',
 opacity: '1'
 }, {
 duration: 500
 });
 }, 500);
 });
 });
 }
 });
})(jQuery);

The div structure is this:

<div class="widgetBox">
 <div class="front">
 <p>Front of the div</p>
 <button class="flipDiv">Flip</button>
 </div>
 <div class="back">
 <p>Back of the div</p>
 <button class="flipDivBack">Flip Back</button>
 </div>
</div>

And this is the initiation:

The only options as of yet however are trigF and trigB, which allows you to specify the name of your buttons which will flip the div.

You can see a jsFiddle of this in action here.

Review my jQuery 'flip' plugin

e: I have updated the code thanks to the comments from edan, however still feel like there is more I can do with this code.

(function($) {
 $.fn.extend({
 divFlip: function(options) {
 var defaults = {
 trigF: '.flipDiv',
 trigB: '.flipDivBack',
 duration: 500
 };
 var o = $.extend({}, defaults, options);
 return this.each(function() {
 var $flipDiv = $(this);
 $front = $flipDiv.find('[data-face=front]:first');
 $back = $flipDiv.find('[data-face=back]:first');
 margin = $front.width() / 2;
 width = $front.width();
 height = $front.height();
 
 $back.css({
 width: '0px',
 height: height,
 marginLeft: margin,
 opacity: '0'
 });
 $(o.trigF).on('click', function() {
 $front.animate({
 width: '0px',
 height: height,
 marginLeft: margin,
 opacity: '0'
 }, {
 duration: o.duration
 });
 window.setTimeout(function() {
 $back.animate({
 width: width,
 height: height,
 marginLeft: '0px',
 opacity: '1'
 }, {
 duration: o.duration
 });
 }, o.duration);
 });
 var $button = $(o.trigB);
 $button.on('click', function() {
 $back.animate({
 width: '0px',
 height: height,
 marginLeft: margin,
 opacity: '0'
 }, {
 duration: o.duration
 });
 window.setTimeout(function() {
 $front.animate({
 width: width,
 height: height,
 marginLeft: '0px',
 opacity: '1'
 }, {
 duration: o.duration
 });
 }, o.duration);
 });
 });
 }
 });
})(jQuery);

The div structure is this

<div class="widgetBox">
 <div data-face="front" class="front">
 <p>Front of the div</p>
 <button class="flipDiv">Flip</button>
 </div>
 <div data-face="back" class="back">
 <p>Back of the div</p>
 <button class="flipDivBack">Flip Back</button>
 </div>
</div>

​

And this is the initiation

At the moment, however, you can still only have one instance of the code and I would love if someone could help me out on having multiple instances of the code. If you look here you will see the problem of multiple divs using this code!

I am also working on using CSS3 to detect whether or not I can use if in the browser, and if not, falling back to this, as from what I have seen, scripts doing this do not currently have CSS3 with a jQuery fallback.

You can see a jFiddle of this in action here.

added 5 characters in body; edited tags; edited title
Source Link
Jamal
  • 35.2k
  • 13
  • 134
  • 238
Loading
Rollback to Revision 2
Source Link
Jamal
  • 35.2k
  • 13
  • 134
  • 238
Loading
Notice removed Draw attention by Joshua M
Bounty Ended with Baylor Rae''s answer chosen by Joshua M
Notice added Draw attention by Joshua M
Bounty Started worth 100 reputation by Joshua M
added 439 characters in body
Source Link
Joshua M
  • 145
  • 1
  • 10
Loading
deleted 8 characters in body
Source Link
Joshua M
  • 145
  • 1
  • 10
Loading
Tweeted twitter.com/#!/StackCodeReview/status/198777860322902016
Source Link
Joshua M
  • 145
  • 1
  • 10
Loading
default

AltStyle によって変換されたページ (->オリジナル) /