scriptaculous code

DIV instead SELECT tag

Unable to use CSS for select tag?
Simple changes approve it.

Use prototype framework

<html>
   <head>
     <script type='text/javascript' src='js/prototype.js'></script>
     <script type='text/javascript'>
        function change_country(type, value) {
           $('country_type').value=type;
           $('country_value').value=value;
        }
     </script>
     <style type="text/css">		
        #select_countries {
           border: 1px solid #333;
           margin-top: 5px;
           height: 200px;
           width: 200px;
           overflow: auto;
        }
     </style>
   </head>
<body>
<form action="" method="post">
   <fieldset>
      <legend>Countries</legend>
      <input type="text" name="country_value" id="country_value" value="United States" />
      <input type="hidden" name="country_type" id="country_type" value="us" />
      <a href="#" onclick="Element.show('select_countries'); return false;">Click to change</a><br />
      <div id="select_countries" style="display: none;">
         <div id="close" onclick="Element.hide('select_countries'); return false;">Close</div>
         <div onclick="change_country('us', 'United states')"><img src="images/flags/us.gif" alt="us" /> United states</div>
         <div onclick="change_country('ru', 'Russia')"><img src="images/flags/ru.gif" alt="us" /> Russia</div>
         <div onclick="change_country('es', 'Spain')"><img src="images/flags/es.gif" alt="us" /> Spain</div>
         <div onclick="change_country('ca', 'Canada')"><img src="images/flags/ca.gif" alt="ca" /> Canada</div>
      </div>
   </fieldset>
</form>
</body>
</html>

to html javascript prototype scriptaculous by timka on Dec 24, 2007

Javascript Dialog box based on Prototype and Scriptaculous

This makes it super simple to create a modal dialog box. The page will be dimmed into the background and the dialog box popped up over top of it. The overlay can be clicked to close out of the box.

Use it thusly:
new Dialog.box([element ID]);
$([element ID]).show();
$([element ID]).hide();

Simple right?

var Dialog = {};
Dialog.Box = Class.create();
Object.extend(Dialog.Box.prototype, {
  initialize: function(id) {
    this.createOverlay();

    this.dialog_box = $(id);
    this.dialog_box.show = this.show.bind(this);
    this.dialog_box.hide = this.hide.bind(this);

    this.parent_element = this.dialog_box.parentNode;

    var e_dims = Element.getDimensions(this.dialog_box);
    var b_dims = Element.getDimensions(this.overlay);
    this.dialog_box.style.left = ((b_dims.width/2) - (e_dims.width/2)) + 'px';
    this.dialog_box.style.top = '12px';
  },

  createOverlay: function() {
    if($('dialog_overlay')) {
      this.overlay = $('dialog_overlay');
    } else {
      this.overlay = document.createElement('div');
      this.overlay.id = 'dialog_overlay';
      Object.extend(this.overlay.style, {
      	position: 'absolute',
      	top: 0,
      	left: 0,
      	zIndex: 90,
      	width: '100%',
      	backgroundColor: '#000',
      	display: 'none'
      });
      document.body.insertBefore(this.overlay, document.body.childNodes[0]);
    }
  },

  moveDialogBox: function(where) {
    Element.remove(this.dialog_box);
    if(where == 'back')
      this.dialog_box = this.parent_element.appendChild(this.dialog_box);
    else
      this.dialog_box = this.overlay.parentNode.insertBefore(this.dialog_box, this.overlay);
  },

  show: function() {
    this.overlay.style.height = $('body').getHeight()+'px';
    this.moveDialogBox('out');
    this.overlay.onclick = this.hide.bind(this);
    this.selectBoxes('hide');
    new Effect.Appear(this.overlay, {duration: 0.1, from: 0.0, to: 0.3});
    this.dialog_box.style.display = ''
  },

  hide: function() {
    this.selectBoxes('show');
    new Effect.Fade(this.overlay, {duration: 0.1});
    this.dialog_box.style.display = 'none';
    this.moveDialogBox('back');
    $A(this.dialog_box.getElementsByTagName('input')).each(function(e){if(e.type!='submit')e.value=''});
  },

  selectBoxes: function(what) {
    $A(document.getElementsByTagName('select')).each(function(select) {
      Element[what](select);
    });

    if(what == 'hide')
      $A(this.dialog_box.getElementsByTagName('select')).each(function(select){Element.show(select)})
  }
});

to javascript prototype scriptaculous by sprsquish on Feb 04, 2007 9 Comments

Translucent Dropdowns

// description of your code here


// the javascript Bit

    '#contactUs': function(e) {
      e.onclick = function() {
          if(Element.hasClassName('container-popdown', 'up')) {
          new Effect.BlindDown('container-popdown', {queue: 'end', duration: .3})
          Element.removeClassName('container-popdown', 'up')
        } else {
          new Effect.BlindUp('container-popdown', {queue: 'end', duration: .3})
          Element.addClassName('container-popdown', 'up')
        }
      }
    }

// the HTML Bit

<span id='container-popdown' class='up' style='display:none'>
  <span id='translucentBack'></span>
  <span id='opaqueFore'>
    <b>cycletowork@gmail.com </b><br><br>		
    <a href='http://nikhile.livejournal.com/'>Nikhil</a> - nikhil.eldurkar@gmail.com <br>
    <a href='http://rohan-kini.livejournal.com/'>ROhan</a> - rohan.kini@gmail.com <br>
  </span>
</span>


// the CSS bit

.up {
}

#container-popdown {
  position: absolute;
  left: 1050px;
  top: 30px;
}

#translucentBack {
  background: #333;
  width: 220px;
  height: 100px;
  position: absolute;
  filter:alpha(opacity=10);
  -moz-opacity:0.1;
  opacity: 0.1;  
}

#opaqueFore {
  width: 220px;
  height: 100px;
  z-index: 1;
  filter:alpha(opacity=100);
  -moz-opacity:1;
  opacity: 1;  
  font-size: 80%;
}

to html javascript css scriptaculous TranslucentDropDowns by rohan_kini on Mar 25, 2006 1 Comments

Scriptaculous JavaScript slideshow

Found this amazing code by obie at http://blog.caboo.se/articles/2006/01/19/easy-scriptaculous-slideshow:

var album = { 
  startup: function() { 
    new PeriodicalExecuter(album.cycle, 5) // change image every 5 seconds 
  }, 
  cycle: function() { 
    new Effect.Fade('image', { // the id of the <DIV> containing the photos 
      duration: 1, 
      fps: 50, 
      afterFinish: function() { 
        new Ajax.Updater('image','/album/next', { // URL for next <IMG> tag 
          asynchronous: true, 
          onSuccess: function() { 
            new Effect.Appear('image', {
              duration: 1,
              fps: 50,
              queue:'end'
            })
          } 
        }) 
      } 
    }) 
  } 
} 
 
window.onload = album.startup

I want to tweak it so that an earlier event precaches the next image instead.

to javascript prototype scriptaculous effects slideshow by peter on Jan 31, 2006

Miniature slideshow for DIVs using Scriptaculous

<div id="slideshow1" class="slide"><div>frame 1</div></div>
<div id="slideshow2" class="slide" style="display: none"><div>frame 2</div></div>
<div id="slideshow3" class="slide" style="display: none"><div>frame 3</div></div>
<div id="slideshow4" class="slide" style="display: none"><div>frame 4</div></div>

<script type="text/javascript">
    
    start_slideshow(1, 4, 2000);
    
    function start_slideshow(start_frame, end_frame, delay) {
        setTimeout(switch_slides(start_frame,start_frame,end_frame, delay), delay);
    }
                            
    function switch_slides(frame, start_frame, end_frame, delay) {
        return (function() {
            Effect.Fade('slideshow' + frame);
            if (frame == end_frame) { frame = start_frame; } else { frame = frame + 1; }
            setTimeout("Effect.Appear('slideshow" + frame + "');", 850);
            setTimeout(switch_slides(frame, start_frame, end_frame, delay), delay + 850);
        })
    }

</script>

to javascript ajax scriptaculous effects slideshow by peter on Jan 05, 2006 5 Comments

Rake task to update (scriptaculous) javascripts directly from svn trunk

Replaces default rails update_javascripts task to update all your scriptaculous javascripts directly from the svn trunk


desc "Update your scriptaculous javascripts directly from svn trunk."
task :update_javascripts do
  SCRIPTACULOUS_HEAD='/tmp/sciptaculous_head'
  rm_rf SCRIPTACULOUS_HEAD
  system "svn co http://dev.rubyonrails.org/svn/rails/spinoffs/scriptaculous #{SCRIPTACULOUS_HEAD}" rescue nil
  unless !$?.nil? && $?.success?
    $stderr.puts "ERROR: Must have subversion (svn) available in the PATH to update to scriptaculous trunk"
    exit 1
  end
  FileUtils.cp(Dir[SCRIPTACULOUS_HEAD + '/lib/*.js'], RAILS_ROOT + '/public/javascripts/')
  FileUtils.cp(Dir[SCRIPTACULOUS_HEAD + '/src/*.js'], RAILS_ROOT + '/public/javascripts/')
end

to rails rake javascripts scriptaculous by saimon on Dec 14, 2005

Popular @ dzone.com

Related Tags