Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Apr 2010
    Posts
    40
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Give Draggable Box a single drag handle

    I currently am using a mootools popup on www.Hope1st.com

    to play his music videos.....and its working really well...only thing is on some computers (mac with firefox browser) when someone pauses the video ...the draggable box gets stuck on their mouse

    weird right? yea i know... so i thought of a solution...instead of the whole box being draggable

    why not just the black titlebar be draggable? i have absolutely no idea on how to do this....but i do have the entire JS code....are you ready?

    its a mouthful....a million thanks to whoever is talented enough to help me


    Code:
    var mooSimpleBox = new Class({
    	options: {
    		width: 		300,
    		height: 	200,
    		opacity:	'0.8',
    		btnTitle:	"Ok",
    		closeBtn:	null,
    		boxTitle:	"messageBox",
    		boxClass:	'mainBox',
    		id:			'myID',
    		fadeSpeed:	500,
    		box:		null,
    		addContentID:null,
    		addContent:  null,
    		boxTxtColor: '#000',
    		isVisible:	false,
    		isDrag:		true
    	},
    		
    	initialize: function(options){
    		this.isVisible = false;
    		if(options['isDrag']) this.isDrag = options['isDrag'];
    		if(options['width']) this.width = options['width'];
    		if(options['height']) this.height = options['height'];
    		if(options['opacity']) this.opacity = options['opacity'];
    		if(options['btnTitle']) this.btnTitle = options['btnTitle'];
    		if(options['boxTitle']) this.boxTitle = options['boxTitle'];
    		if(options['boxClass']) this.boxClass = options['boxClass'];
    		if(options['boxTxtColor']) this.boxTxtColor = options['boxTxtColor'];
    		if(options['fadeSpeed']) this.fadeSpeed = options['fadeSpeed'];
    		if(options['id']) this.id = options['id'];
    		if(options['closeBtn']) this.closeBtn = $(options['closeBtn']);
    		if(options['addContentID']) this.addContentID = options['addContentID'];
    		
    		if(options['addContentID']) {
    			this.addContent = $(this.addContentID).innerHTML;
    			$(this.addContentID).setStyle('visibility','hidden');
    			$(this.addContentID).remove();
    		}		
    		
    		this.createBox();	
    	},
    		
    	createBox: function(){
    		this.box = new Element('div');
    		this.box.addClass(this.boxClass);
    	},
    	
    	clickClose: function(){
    		$(this.box).effect('opacity',{ wait:true, duration:this.fadeSpeed, transition:Fx.Transitions.linear }).chain(function(){
    		}).start(this.opacity,0); this.box.setStyle('display','none');
    			this.isVisible = false;
    		},
    		
    		fadeOut: function(){
    			if(this.isVisible){
    				$(this.box).effect('opacity',{ wait:true, duration:this.fadeSpeed, transition:Fx.Transitions.linear }).chain(function(){
    			}).start(this.opacity,0);
    			this.isVisible = false;
    		}
    			
    	},
    		
    	fadeIn: function(){	
    		if (document.documentElement && document.documentElement.clientWidth) {
    			theWidth=document.documentElement.clientWidth;
    		}else if (document.body) {
    			theWidth=document.body.clientWidth;
    		}
    		if (window.innerHeight) {
    			theHeight=window.innerHeight;
    		}else if (document.documentElement && document.documentElement.clientHeight) {
    			theHeight=document.documentElement.clientHeight;
    		}else if (document.body) {
    			theHeight=document.body.clientHeight;
    		}
    		var top = window.getScrollTop();
    		var boxTop =  (theHeight - this.height) / 2 ;
            boxTop = (boxTop + top);
    		var boxLeft = (theWidth - this.width) / 2;			
    		this.box.setStyle('top',boxTop);
    		this.box.setStyle('left',boxLeft);
    		this.box.setStyle('position','absolute');
    		this.box.setStyle('width',this.width);
    		this.box.setStyle('height',this.height);
    		this.box.setStyle('opacity',this.opacity);
    		this.box.setStyle('cursor','move');
    		this.box.setStyle('z-index','999990000');
    		this.box.setAttribute('id', this.id);
    		this.box.setStyle('visibility','hidden');
    		this.box.injectInside(document.body);
    		if(this.isVisible == false){
    			this.box.effect('opacity',{ wait:true, duration: this.fadeSpeed, transition: Fx.Transitions.linear }).start(0,this.opacity);
    			this.addHT();
    			this.isVisible = true;
    		}
    	},
    		
    	addHT: function(){
    		this.closeBtn = new Element('button', {
    			styles: {
    				'border': 'none',
    				'background-image':'url(modules/mod_moopopup/moopopup/images/bg_button.gif)',
    				'color':'#fff',
    				'position':'absolute',
    				'bottom':'3px',
    				'right':'3px',
    				'width':'44px',
    				'height':'19px',
    				'font-size':'13px',
    				'font-weight':'bold',
    				'font-family':'arial',
    				'cursor':'pointer'
    			}				
    		})
    		
    	  var width = this.width.toInt() + 5;
    		if(window.ie){
    			var titleBar = new Element('div', {
    				styles: {
    					'width' : 				width,
    					'height': 				'auto',
    					'background-repeat':	'repeat-x',
    					'background-position':	'right top',
    					'line-height':			'20px',
    					'padding':				'5px 5px 5px 10px',
    					'position':				'absolute',
    					'clear':				'both',
    					'margin-bottom':		'10px',
    					'top':					'0px',
    					'left':					'0px',
    					'color':				'#eee'
    				}
    		  })
    		}else{
    			var titleBar = new Element('div', {
    				styles: {
    					'width' : 				width,
    					'height': 				'auto',
    					'background-repeat':	'repeat-x',
    					'background-position':	'right top',
    					'line-height':			'auto',
    					'padding':				'5px 5px 5px 10px',
    					'position':				'absolute',
    					'clear':				'both',
    					'margin-bottom':		'10px',
    					'top':					'0px',
    					'left':					'0px',
    					'color':				'#eee'
    				}
    			})
    		}
    		
      	$(titleBar).innerHTML = this.boxTitle;
    	
    		var insideDiv = new Element('div',{
    			styles: {
    				'padding':'10px'
    			}
    		});
    			
    		insideDiv.setAttribute('id','myContent');
    		this.box.innerHTML = "";
    		insideDiv.injectInside(this.box);
    	
    		insideDiv.innerHTML = this.addContent;	
    		this.closeBtn.innerHTML = this.btnTitle;	
    		$(this.closeBtn).addEvent('click',this.clickClose.bindWithEvent(this)); 			
    		titleBar.injectInside(this.box);
    		this.closeBtn.injectInside(this.box);
    			
    		if(this.isDrag == 'true'){
    			this.box.makeDraggable();
    		}
    	}
    });
    
    mooSimpleBox.implement(new Options, new Events);

  • #2
    New Coder
    Join Date
    Apr 2010
    Posts
    40
    Thanks
    1
    Thanked 0 Times in 0 Posts
    not one tip? any ideas? i figured someone would know about this one....am i posting in the wrong section?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •