We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 7231
    • 4,205 Posts
    The transparency is accomplished with a transparent png I think. If that is what you are talking about.
      [font=Verdana]Shane Sponagle | [wiki] Snippet Call Anatomy | MODx Developer Blog | [nettuts] Working With a Content Management Framework: MODx

      Something is happening here, but you don't know what it is.
      Do you, Mr. Jones? - [bob dylan]
      • 23562
      • 57 Posts
      oh yeah embarrassed when I see things like that, first that I think is "oh, what javascript library it is?"
      silly me embarrassed now that ’am using almost just png and jpeg I forgot how animated gif can be very powerfull
      thanks Jesse R for remainder thanks alot
        • 23562
        • 57 Posts
        just checked it again, there’s no gif there for that blue shade fx, it must be javascript then, but nonetheless
        it could be done with gif and css grin
        thanks again Jesse R.
          • 29774
          • 386 Posts
          @ Jesse R
          The animated gif could work, but you’d need a different one for each color background since animated gifs don’t support alpha transparency. Also, I’ve found that a lot of IE6 installs have gif animations turned off or blocked. The method below allows for alpha transparency so you can overlay it over any background image or colour.

          @plavet
          The tween on the main nav buttons is done with javascript. The script uses a timer to alter the opacity of a div inside the anchor on mouseover and mouseout. The div itself is inserted onload. If you view the page with Firefox with the web developer extension, and choose to ’view generated source’ you will see what I mean. The script makes use of a number of functions from my DOM library (/_assets/js/domLib.js). As you have found, it doesn’t require you to add extraneous tags to the markup and it degrades nicely with js turned off.

          /* ====================================================================
             ObjFader class
             Author: Mark Croxton - www.hallmark-design.co.uk
             Updated: 20.09.2007
             ==================================================================== */
          
          // constructor
          var ObjFader = function () {	
          	
          	// private vars
          	var self = this; // get the scope of the instantiated object
          	var	links = new Array();
          		
          	// public instance variables
          	this.CSSselector = '#masthead ul li a'; // anchor to which fade behaviour is to be applied
          	
          	this.attachLinkBehavior = function () {
          		// Opera <9 does not support opacity, but despite that obj.style.opacity returns true...
          		// Mac Firefox >1.5 (and Camino) does support opacity, but it can trigger a Gheko rendering bug where Flash content disappears or flickers
          		if (!window.opera && !detect_macFF()) {
          			self.links = document.getElementsBySelector(self.CSSselector);
          			var i;
          			for (i=0;i<self.links.length;i++) {
          				addEvent(self.links[i],"mouseover",self.doOver_features(i),false);	
          				addEvent(self.links[i],'mouseout',self.doOut_features(i),false);
          				addEvent(self.links[i],'click',self.doClick_features(i),false);
          
          				self.links[i].innerHTML += '<div></div>';
          				// DOM
          				//eDIV = document.createElement("div");
          				//self.links[i].appendChild(eDIV);
          			
          				// set initial opacity
          				var obj = self.links[i];
          				var fadeDiv = obj.childNodes[obj.childNodes.length-1];
          				alphaControl.fade(fadeDiv,0,0,5);
          			}
          		}
          	}
          	
          	this.doOver_features = function (myId) {
            		return function(e) { 
              		self.doOver(e, myId);
            		}
          	}
          	
          	this.doOut_features = function (myId) {
            		return function(e) { 
              		self.doOut(e, myId);
            		}
          	}
          	
          	this.doClick_features = function (myId) {
            		return function(e) { 
              		self.doClick(e, myId);
            		}
          	}
          	
          	this.doOver = function(e, objIndex) {
          		var obj = self.links[objIndex];
          		var fadeDiv = obj.childNodes[obj.childNodes.length-1];		
          		alphaControl.fade(fadeDiv,40,0,4);
          	}
          	
          	this.doOut = function(e, objIndex) {
          		var obj = self.links[objIndex];
          		var fadeDiv = obj.childNodes[obj.childNodes.length-1];
          		alphaControl.fade(fadeDiv,0,0,0);
          	}
          	// onClick is required by IE or it won't follow the link.
          	this.doClick = function(e, objIndex) {
          		window.location.href = self.links[objIndex];
          	}	
          }
          //init
          var myFader = new ObjFader();
          addEvent(window, 'load', myFader.attachLinkBehavior, false);
          
            Snippets: GoogleMap | FileDetails | Related Plugin: SSL
            • 29774
            • 386 Posts

            very nice work here. I like your quicklinks very much !
            im a bit surprise you didn’t use mootools for all these funnies.

            I usually write my own stuff where I can, it makes it far easier to maintain smiley I do like the emerging js libraries though, and occasionally I’ll use jquery or moo.fx.
              Snippets: GoogleMap | FileDetails | Related Plugin: SSL
              • 23562
              • 57 Posts
              @therebechips you’re wright,
              with gif is a bit tricky, been playing with it last night cool, if you dont need alpha then it works like a charm,didnt know about that ie6 thing though,thanks for the tip wink and big thanks for the js. will try it later to see how it works rolleyes great code thank you very much grin
                • 7231
                • 4,205 Posts
                Sorry guys, I do not see any tweening on the nav buttons, it is simple on/off (or transparent/solid) state for me. Humm, I wonder why I don’t see it. I see it in Safari but not in FF on OSX. Wait let me restart my browser...

                ...no not after restarting either (I had turned JS off earlier and thought it could have caused problems).
                  [font=Verdana]Shane Sponagle | [wiki] Snippet Call Anatomy | MODx Developer Blog | [nettuts] Working With a Content Management Framework: MODx

                  Something is happening here, but you don&#39;t know what it is.
                  Do you, Mr. Jones? - [bob dylan]
                  • 29774
                  • 386 Posts
                  @dev_cw

                  There’s an annoying Gecko rendering bug which is triggered when setting the opacity of any object that shares the page with an embedded flash movie - the flash movie will either flicker or disappear. This only affects the Mac version of Firefox (and Camino). As this website uses sIFR for text replacement, I had to disable the effect for Mac Firefox users. You can safely enable it for pages without Flash content.
                    Snippets: GoogleMap | FileDetails | Related Plugin: SSL
                    • 7231
                    • 4,205 Posts
                    OK. I was concerned that I had a bug in my FF. It is a really nice effect now that I have seen it.
                      [font=Verdana]Shane Sponagle | [wiki] Snippet Call Anatomy | MODx Developer Blog | [nettuts] Working With a Content Management Framework: MODx

                      Something is happening here, but you don&#39;t know what it is.
                      Do you, Mr. Jones? - [bob dylan]
                      • 33337
                      • 3,975 Posts
                      A stunning piece of work, its great addition to the "Powered by MODx" library. Hats off!

                      Thanks for sharing with us.

                      best regards.
                        Zaigham R - MODX Professional | Skype | Email | Twitter

                        Digging the interwebs for #MODX gems and bringing it to you. modx.link