Archive for the ‘Javascript’ Category

[1.0] TextBox Moo.0 : Mootools TextBox and TextArea

Saturday, October 24th, 2009

Script action at http://www.mooforum.net/scripts12/textbox-moo-t2427.html

Hello Everyone,
This is my first release of an open source project ever so you’ll have to fill me in on what you need to clarify how to use TextBoxMoo.0

What is it?
TextBoxMoo.0 is a Class that replaces all text editing nodes, TextBox and TextArea-Less typing on a web page, type text using the DOM to create and style the text you are typing vs. a text box/text area browser controls.

How mature is it?
Not even a fetus yet, it’s actually more like an embryo waiting to be attacked by well.. (let’s not get weird) developers.

Demo?
Yes, http://www.portlandwebdev.com/charlen.php
Go there and just start typing. When you click save page, it will save to http://www.portlandwebdev.com/savepage.php
Check out your changes on that page.

Possibilities:
More powerful controls that are not reliant on inserting a perfectly styled and dimensioned text box only to let the user input some text and then take that value to insert it back… uuggghhH!!!!

Less complicated CMS’.

Less dependency on archaic text controls!

Posted in Javascript | No Comments »

Use CSS to make a dummy link for javascript

Wednesday, March 18th, 2009

When most people want to execute javascript from a piece of text they usually use the tag. But they dont want the link to go anywhere so they use a the number symbol # in the href attribute to specify that nothing happens when it’s clicked. That is what in some web applications you will notice the address bar contains a number symbol # at the end ie. portlandwebdev.com/here.php#. This is the improper use of the anchor functionality and if you have a page that scrolls vertically you will notice some unexpected scrolling or jumping when clicking on links that have number symbol # hrefs specified. Instead of trying to get a pointer using this buggy technique, just use css to force the cursor on mouseover.

  1.  
  2. .link:hover {
  3.       cursor:pointer;
  4. }
  5.  
  1.  
  2. <a class="link">link</a>
  3. <span class="link">link</span>
  4.  

Both of these elements will product the text “link” where the mouse pointer for links will appear.

Posted in Javascript, css | No Comments »

IE6 css display bug with javascript

Monday, October 27th, 2008

If you are trying to set an image to display = ‘block’; or display = ‘none’; in IE when the default setting is none (you set the element to not display when the page loads), you are not going to be able to make it visible again. Wait..? Visible?!  Actually, that’s the answer, use visibility = ‘hidden’; and visibility = ‘visible’; and you will almost always get the effect you were looking for with the display property.

With the name “display”, it is sort of misleading but what the display property is actually doing is specifying to your browser what type of element the selected element is.  There are different kinds of elements, inline, block, etc. and they all have different behaviors and can have different properties applied to them in your browser.  Display can be used to convert elements from one type to another.  An inline element such as a list item <span>, which cannot be absolutely positioned can be converted to a ‘block’ element and positioned as if it were a div though, this is hardly ever necessary unless you are working with javascript effects libraries such as mootools or jQuery.

Posted in Javascript, css | 2 Comments »

png transparency in ie6!

Friday, October 24th, 2008

For a long time I have been avoiding transparent PNGs because of one browser that is, sadly, still one of the most widely used (as of now, October 2008). Of course I am talking about IE6, the maverick.

Recent project requirements forced me to find an answer to this problem.  I must not have looked very hard before, because this solution was not hard to find. The solution is at ie7-js and the implementation is even more staggeringly easy:

  1.  
  2. <!–[if lt IE 8]>
  3.  
  4. <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
  5.  
  6. <![endif]–>

Wow! That’s easy! I, however, opted to download the ie8.js and blank.gif file directly to my client’s website for performance and reliability factors.  At any rate, it worked like a charm! That is, after I read a not-so-obvious part on the google-code page that says every picture you want changed needs to have a -trans suffix added to the filename in the img tag.

Other than that, I am very excited about the possibilities this advancement has brought to current and future projects. Enjoy!

Posted in Javascript, PNG | 1 Comment »

Our favorite javascript Slideshow class for MooTools

Thursday, October 23rd, 2008

http://www.efectorelativo.net/laboratory/viewer/

It’s very easy to install and edit. I had syncronize the fading of two elements simultaniously.  All I did was add property to the class like so:

  1.  
  2. var viewer2 = new Class({
  3.  
  4.         mode: ‘rand’,
  5.         modes: [‘top’,‘right’,‘bottom’,‘left’,‘alpha’],
  6.         sizes: {w:480,h:240},
  7.         fxOptions: {duration:3000},
  8.         interval: 5000,
  9.         otherEl: null,
  10.  
  11.         initialize: function(items,options){
  12.                 if(options) for(var o in options) this[o]=options[o];
  13.                 //
  14.                 if(this.buttons){
  15.                         this.buttons.previous.addEvent(‘click’,this.previous.bind(this,[true]));
  16.                         this.buttons.next.addEvent(‘click’,this.next.bind(this,[true]));
  17.                 }
  18.                 this._current = 0;
  19.                 this._previous = null;
  20.                 this.items = items.setStyle(‘display’,‘none’);
  21.                 this.items[this._current].setStyle(‘display’,‘block’);
  22.                 this.disabled = false;
  23.                 this.attrs = {
  24.                         left: [‘left’,-this.sizes.w,0,‘px’],
  25.                         top: [‘top’,-this.sizes.h,0,‘px’],
  26.                         right: [‘left’,this.sizes.w,0,‘px’],
  27.                         bottom: [‘top’,this.sizes.h,0,‘px’],
  28.                         alpha: [‘opacity’,0,1,”]
  29.                 };
  30.                 this.rand = this.mode==‘rand’;
  31.                 this.sequence = typeof(this.mode)==‘object’ ? this.mode : false;
  32.                 this.curseq = 0;
  33.                 this.timer = null;
  34.         },
  35.  
  36.         walk: function(n,manual){
  37.                 if(this._current!==n &amp;&amp; !this.disabled){
  38.                         this.disabled = true;
  39.                         if(manual){
  40.                                 this.stop();
  41.                         }
  42.                         if(this.rand){
  43.                                 this.mode = this.modes.getRandom();
  44.                         }else if(this.sequence){
  45.                                 this.mode = this.sequence[this.curseq];
  46.                                 this.curseq += this.curseq+1
  47. <this.sequence.length>}
  48.                         this._previous = this._current;
  49.                         this._current = n;
  50.                         var a = this.attrs[this.mode].associate([‘p’,‘f’,‘t’,‘u’]);
  51.                         for(var i=0;i
  52. <this.items.length;i++){>if(this._current===i){
  53.                                         this.items[i].setStyles($extend({‘display’:‘block’,‘z-index’:‘5′},JSON.decode(‘{"’+a.p+‘":"’+a.f+a.u+‘"}’)));
  54.                                 }else if(this._previous===i){
  55.                                         this.items[i].setStyles({‘z-index’:‘4′});
  56.                                 }else{
  57.                                         this.items[i].setStyles({‘display’:‘none’,‘z-index’:‘3′});
  58.                                 }
  59.                         }
  60.                         this.items[n].set(‘tween’,{onComplete:this.onComplete.bind(this),duration:5000}).tween(a.p,a.f,a.t);
  61.                 }
  62.         },
  63.  
  64.         play: function(wait){
  65.                 this.stop();
  66.                 if(!wait){
  67.                         this.next();
  68.                 }
  69.                 this.timer = this.next.periodical(this.interval,this,[false]);
  70.         },
  71.  
  72.         stop: function(){
  73.                 $clear(this.timer);
  74.         },
  75.  
  76.         next: function(manual){
  77.  
  78.                 this.otherEl.walk(this.otherEl._current+1<this.otherEl.items.length ? this.otherEl._current+1 : 0,manual);
  79.                 this.walk(this._current+1<this.items.length ? this._current+1 : 0,manual);
  80.         },
  81.  
  82.         previous: function(manual){
  83.                 this.otherEl.walk(this.otherEl._current>0 ? this.otherEl._current-1 : this.otherEl.items.length-1,manual);
  84.                 this.walk(this._current>0 ? this._current-1 : this.items.length-1,manual);
  85.         },
  86.  
  87.         onComplete: function(){
  88.                 this.disabled = false;
  89.                 this.items[this._previous].setStyle(‘display’,‘none’);
  90.                 if(this.onWalk) this.onWalk(this._current);
  91.         }
  92. });
  93.  </this.items.length;i++){></this.sequence.length>

Implementation looked something like this:

  1.  
  2. if($$(‘.box2 img’).length >0) {
  3.  
  4.                 var V2 = new viewer($$(‘.box2 .Photo’),{
  5.                 mode: ‘alpha’,
  6.                 interval: 1000,
  7.                 duration: 10000
  8.                 });
  9.                 var V3 = new viewer2($$(‘.brownboxtext’),{
  10.                 mode: ‘alpha’,
  11.                 interval: 1000,
  12.                 duration: 10000,
  13.                 otherEl: V2
  14.                 });
  15.                 $$(‘.brownbox’).set(‘opacity’,‘.9′);
  16.  
  17.      }

Pretty easy!

Posted in Javascript | No Comments »

watch free movies online download movies online free movies online