iframe-tutorial: Templates

HERE YOU Can Find Free FACEBOOK Pages Templates
facebook page templates
&
HERE YOU Can Find Free HTML Templates For IFRAMEs
quackit
& The following two simple FBML Templates and new templates will be posted soon.

1)

THE FIRST TEMPLATE:

<style>

h3 {
    margin-bottom: 10px;
    margin-top: 20px;
  }
  
  .accordion {
    
  }
  
  .accordion .header {
    border: 1px solid #444;
    background-color: #333;
    color: #fff;
    font-weight: bold;
    padding: 5px 10px;
    font-size: 12px;
    cursor: pointer;
  }
  
  .accordion .expanded {
    border: 1px solid #777;
    background-color: #555;
  }
  
  .accordion .section {
    border: 1px solid #777;
    background-color: #fdffbd;
    overflow: hidden;
  }
  
  .accordion .section p {
    padding: 10px;
    font-family: Arial;
    font-size: 12px;
    text-align: justify;
    margin: 0;
  }
  
  .slider {
    width: 480px;
  }
  
  .slider a.sliderNext, 
  .slider a.sliderPrev 
  {
    border: none;
    text-decoration: none;
    float: left;
    display: block;
    height: 25px;
    width: 14px;
  }
  
  .slider a.sliderNext {
    margin-top: 24px;
    margin-left: 5px;
    background: url(http://weavora.com/blog/fx-images/next.png) 
no-repeat 0 0;
  }
  
  .slider a.sliderPrev {
    margin-top: 25px;
    margin-right: 5px;
    background: url(http://weavora.com/blog/fx-images/prev.png) 
no-repeat 0 0;
  }
  
  .slider a.sliderNext.inactive {
    background: url(http://weavora.com/blog/fx-images/next_inactive.png)
 no-repeat 0 0;
  }
  
  .slider a.sliderPrev.inactive {
    background: url(http://weavora.com/blog/fx-images/prev_inactive.png)
 no-repeat 0 0;
  }
  
  .slider .clear {
    float: none;
    clear: both;
  }
  
  .slider .sliderImage {
    border: 2px solid #ccc;
    float: left;
    margin: 0 3px 0 3px;
    line-height: 0;
  }
  
  .slider .sliderImage:hover,
  .slider .sliderImageCurrent
  {
    border-color: #519dd0;
  }
  
  .slider .sliderImage img{
    border: none;
  }
  
  .sliderWindow {
    overflow: hidden;
    width: 440px;
    float: left;
  }
  
  .slider .sliderImagesContainer {
    width: 10000px;
  }
  
  .bigImage {
    width: 480px;
    text-align: center;
  }
</style>
<div id="app" onclick="appObserver.init();" 
onkeypress="appObserver.init();"  
onmousedown="appObserver.init();">

<div class="accordion" id="accordion">
  <div class="header expanded">Home</div>
  <div class="section">
    <p>FBML codes Page.</p>
  </div>
  
  <div class="header">Codes</div>
  <div class="section" style="display: none">
    <p>YOu can find it some essential 
codes</p>
    
  </div>
  
  <div class="header">Tutorials</div>
  <div class="section" style="display: none">
    <p>And some tutorials.</p>
    
  </div>
</div>

function fx(element) {
  // make this instance visible in private functions
  var self = this;
  
  this.element = element;
  
  // set default slide direction
  this.direction = fx.VERTICAL;

/**
   * Slide down
   *
   * @param duration integer slide down duration
   * @param callback function callback for slide down ending 
   * @return fx
   */
  this.slideDown = function(duration, callback) {
    slide('down', duration, callback);
    return this;    
  };
  
  /**
   * Slide up
   *
   * @param duration integer slide up duration
   * @param callback function callback for slide up ending 
   * @return fx
   */
  this.slideUp = function(duration, callback) {
    slide('up', duration, callback);
    return this;    
  };
  
  /**
   * Slide toggle
   *
   * @param duration integer slide up duration
   * @param callback function callback for slide up ending 
   * @return fx
   */
  this.slideToggle = function(duration, callback) {
    if (this.element.getStyle('display') == 'none' || 
this.element.getClientHeight() == 0 || this.element.getClientWidth() == 
0)
      return this.slideDown(duration, callback);
    else
      return this.slideUp(duration, callback);
  };
  
  /**
   * Fade in
   *
   * @param duration integer slide down duration
   * @param callback function callback for slide down ending 
   * @return fx
   */
  this.fadeIn = function(duration, callback) {
    fade('in', duration, callback);
    return this;    
  };
  
  /**
   * Fade out
   *
   * @param duration integer slide up duration
   * @param callback function callback for slide up ending 
   * @return fx
   */
  this.fadeOut = function(duration, callback) {
    fade('out', duration, callback);
    return this;    
  };
  
  /**
   * Fade toggle
   *
   * @param duration integer slide up duration
   * @param callback function callback for slide up ending 
   * @return fx
   */
  this.fadeToggle = function(duration, callback) {
    if (this.element.getStyle('display') == 'none' || 
this.element.getClientHeight() == 0 || this.element.getClientWidth() == 
0)
      return this.fadeOut(duration, callback);
    else
      return this.fadeIn(duration, callback);
  };
  
  /** 
   * Set slide direction
   * 
   * @param direction fx.HORIZONTAL, fx.VERTICAL  or fx.DIAGONAL
   * @return fx
   */
  this.direction = function(direction) {
    if (direction == fx.HORIZONTAL || direction == fx.VERTICAL  || 
direction == fx.DIAGONAL)
      this.direction = direction;
    return this;
  };

this.accordion = function(params) {
    // extend default options
    var options = {
      header: 'header',
      section: 'section',
      expanded: 'expanded'
    };
    
    if (params)
      for(var key in params)
        options[key] = params[key];
        
    // find all headers and section
    var headers = utils.findByClass(options.header, this.element);
    var sections = utils.findByClass(options.section, this.element);

// now we should walk through header and bind click action to them
    var index = 0;
    for(var i = 0; i < headers.length; i++) {
      headers[i].addEventListener('click', function(event){  
        var targetSection = event.target.getTabIndex();
        // hide open section
        for(var index = 0; index < sections.length; index++) {
          if (index != targetSection) {
            (new fx(sections[index])).slideUp();
            utils.removeClass(headers[index], options.expanded);
          }
        }
        
        // open target section
        (new fx(sections[targetSection])).slideToggle(function(a, b){
          if (!utils.hasClass(headers[targetSection], options.expanded))
            utils.addClass(headers[targetSection], options.expanded);
          else
            utils.removeClass(headers[targetSection], options.expanded);
        });
        
        
      });
      
      headers[i].setTabIndex(i);
      sections[i].setTabIndex(i);
    }
  };
  
  this.slider = function(params) {
    // extend default options
    var options = {
      prev: 'sliderPrev',
      next: 'sliderNext',
      image: 'sliderImage',
      imageContainer: 'sliderImagesContainer',
      imageCurrent: 'sliderImageCurrent',
      inactive: 'inactive',
      imageLeftMargin: 6,
      onclick: null
    };
    
    if (params)
      for(var key in params)
        options[key] = params[key];
    
    var imageContainer = utils.findByClass(options.imageContainer, 
this.element)[0];
    
    // find all images
    var images = utils.findByClass(options.image, imageContainer);
    
    // set up default position
    var currentPosition = 0;
    
    // calculate positions' offsets
    var positionOffsets = [];
    for(var position = 0; position < images.length; position++) {
      if (position == 0) {
        positionOffsets[position] = 0;
      } else {
        positionOffsets[position] = positionOffsets[position - 1];
        positionOffsets[position] -= images[position].getOffsetWidth();
        positionOffsets[position] -= options.imageLeftMargin;
      }
    }

// find next and prev buttons
    var next = utils.findByClass(options.next, this.element);
    var prev = utils.findByClass(options.prev, this.element);

// bind next navigation
    if (next.length) {
      next[0].addEventListener('click', function(event){  
        if (currentPosition < images.length - 4) {
          currentPosition++;
          (new 
fx(imageContainer)).move(positionOffsets[currentPosition]);
        }
        
        if (currentPosition == 0) {
          utils.addClass(prev[0], options.inactive);
        } else {
          utils.removeClass(prev[0], options.inactive);
        }
        
        if (currentPosition >= images.length - 4) {
          utils.addClass(next[0], options.inactive);
        } else {
          utils.removeClass(next[0], options.inactive);
        }
      });
    }
    
    // bind previous navigation
    if (prev.length) {
      prev[0].addEventListener('click', function(event){  
        if (currentPosition > 0) {
          currentPosition--;
          (new 
fx(imageContainer)).move(positionOffsets[currentPosition]);
        }
        
        if (currentPosition == 0) {
          utils.addClass(prev[0], options.inactive);
        } else {
          utils.removeClass(prev[0], options.inactive);
        }
        
        if (currentPosition >= images.length - 4) {
          utils.addClass(next[0], options.inactive);
        } else {
          utils.removeClass(next[0], options.inactive);
        }
      });
    }

// bind item onclick callback
    for(var i = 0; i < images.length; i++) {
      images[i].setTabIndex(i).addEventListener('click', 
function(event){  
        var currentImage = utils.findByClass(options.imageCurrent, 
self.element)[0];
        utils.removeClass(currentImage, options.imageCurrent);
        
        var target = (utils.removeClass(event.target, options.image)) ? 
event.target : event.target.getParentNode();
        utils.addClass(target, options.imageCurrent);
        
        if (options.onclick)
          options.onclick.apply(target, [target.getTabIndex(), 
currentImage.getTabIndex()]);
      });
    }
  };
  
  this.move = function(step, duration, callback) {
    if (!duration) {
      duration = fx.NORMAL; // set default duration
    } else if (typeof duration == "function") {
      callback = duration;
      duration = fx.NORMAL; // set default duration
    } else if (duration != parseInt(duration) || 
Math.abs(parseInt(duration)) == Math.NaN || parseInt(duration) <=
 0) {
      duration = fx.NORMAL; // set default duration
    } else {
      duration = Math.abs(parseInt(duration));
    }
    
    var animationObject = Animation(self.element);
    
    animationObject.duration(duration);
    
    animationObject.to('marginLeft', step);
    
    // set slide ending callback
    if (typeof callback == "function")
      animationObject
        .checkpoint(1, callback);
        
    animationObject.ease().blind().go();
  };
  
  
  /**
  * Slide animation
  *
  * @private
  *
  * @param type could by up or down
  * @param duration integer slide up duration
  * @param callback function callback for slide up ending 
  *
  */
  function slide(type, duration, callback) {
    // check duration and callback 
    if (!duration) {
      duration = fx.NORMAL; // set default duration
    } else if (typeof duration == "function") {
      callback = duration;
      duration = fx.NORMAL; // set default duration
    } else if (duration != parseInt(duration) || 
Math.abs(parseInt(duration)) == Math.NaN || parseInt(duration) <=
 0) {
      duration = fx.NORMAL; // set default duration
    } else {
      duration = Math.abs(parseInt(duration));
    }
    
    var animationObject = Animation(self.element);
    
    // first of all we need to show or hide element
    if (type == 'down')
      animationObject.show();
    else
      animationObject.hide();
    
    // set slide direction
    if (self.direction == fx.DIAGONAL) 
      animationObject
        .to('width', (type == 'down') ? 'auto': 0)
        .to('height', (type == 'down') ? 'auto': 0);
    else if (self.direction == fx.HORIZONTAL)
      animationObject
        .to('width', (type == 'down') ? 'auto': 0);
    else
      animationObject
        .to('height', (type == 'down') ? 'auto': 0);
        
    if (type == 'down')
    {
      if (self.direction == fx.DIAGONAL) 
        animationObject
          .from('width', 0)
          .from('height', 0);
      else if (self.direction == fx.HORIZONTAL)
        animationObject
          .from('width', 0);
      else
        animationObject
          .from('height', 0);
    }
        
    animationObject.duration(duration);
    
    // set slide ending callback
    if (typeof callback == "function")
      animationObject
        .checkpoint(1, callback);
        
    animationObject.blind().go();
  }
  
  /**
  * Fade animation
  *
  * @private
  *
  * @param type could by in or out
  * @param duration integer slide up duration
  * @param callback function callback for slide up ending 
  *
  */
  function fade(type, duration, callback) {
    // check duration and callback 
    if (!duration) {
      duration = fx.NORMAL; // set default duration
    } else if (typeof duration == "function") {
      callback = duration;
      duration = fx.NORMAL; // set default duration
    } else if (duration != parseInt(duration) || 
Math.abs(parseInt(duration)) == Math.NaN || parseInt(duration) <=
 0) {
      duration = fx.NORMAL; // set default duration
    } else {
      duration = Math.abs(parseInt(duration));
    }
    
    var animationObject = Animation(self.element);
    
    // first of all we need to show or hide element
    // and set initial opacity
    if (type == 'out') {
      animationObject.show().from('opacity', 0);
    } else {
      animationObject.hide().from('opacity', 1);
    }
    
    // set fade animation
    animationObject
      .to('opacity', (type == 'out') ? 1 : 0);
        
    animationObject.duration(duration);
    
    // set slide ending callback
    if (typeof callback == "function")
      animationObject
        .checkpoint(1, callback);
        
    animationObject.blind().go();
  }
  
  this._debug = function(msg) {
    (new Dialog()).showMessage('Debug', msg, 'Close');    
  }
};

// duration constants
fx.SLOW = 800;
fx.NORMAL = 500; // default
fx.FAST = 200;

// direction constants
fx.HORIZONTAL = 'horizontal'; 
fx.VERTICAL = 'vertical'; // default
fx.DIAGONAL = 'diagonal';
</script>

2)THE SECOND TEMPLATE:

<div style="display:none"> <fb:tabs> <fb:tab_item href="#" title="#" /> </fb:tabs> </div> <div class="tabs clearfix"><center> <div class="left_tabs"> <ul class="toggle_tabs clearfix" id="toggle_tabs_unused"> <li class="first"> <a href="#" class="" clicktohide="2,3,4" clicktoshow="1" title="Home"> Home </a></li><li class="middle"><a href="#" class="" clicktohide="1,3,4" clicktoshow="2" title="Contact"> Contact </a></li><li class="middle"><a href="#" class="" clicktohide="1,2,4" clicktoshow="3" title="Codes"> Codes </a></li><li class="last"><a href="#" class="" clicktohide="1,2,3" clicktoshow="4" title="Tutorials"> Tutorials </a></li></ul></div></center></div> <div id="1" style=""> <br><br> <font size="3" color="red">PUT WHAT YOU WANT TEXT PICS. </div></font> <div id="2" style="display:none"> <br><br> <font size="3" color="blue">CONTACT TAB PUT WHAT YOU WANT. </div></font> <div id="3" style="display:none"> <br><br> <font size="3" color="pink">PUT ANY CONTENT. </div></font> <div id="4" style="display:none"> <br><br> <font size="3">PUT ANY THING. </div></font>

iframe-tutorial

Pages

Templates

About Me

Followers