Learn how to use jQuery at the Blog

pr8ig styling « visit

  • Added 6 months ago
  • 362 Lines of Code shown
  • 2 Links of Interest
http://pr8ig.nl
This is my Source Code and I don't want to show it here
View Source Code only (as overlay)
// That code snippet belongs to pr8ig styling - http://pr8ig.nl

//declare some globals
var loading_content;
var last_index = -1;
var console;

//start script
$(document).ready(function(){

	//do menu click of main buttons
	$("#menu > ul > li > a").click(function(e){
		e.preventDefault;
		//may we do this click?
		if(!loading_content && !$(this).hasClass('open')){
			loading_content = 1;
      
			//remember wich button clicked for anim function
			var index = $("#menu > ul > li > a").index(this);
			var obj = $(this);
			getContentData(obj,index,$(this).attr('href'));
		}
		//kill normal A HREF
		return false;
	});

	$("#menu > ul > li > ul > li > a").click(function(e){
		e.preventDefault;
		//may we do this click?
		if(!loading_content && !$(this).hasClass('open')){
			loading_content = 1;
			
			var subindex = $("#menu a").index($(this));
			var index = $("#menu > ul > li > a").index($(this).parents('li:eq(1)').find('a:eq(0)'));
			var obj = $(this).parents('li:eq(1)').find('a:eq(0)');
			getContentData(obj,index,$(this).attr('href'),subindex);
		}
		//kill normal A HREF
		return false;
	});

	//kill MS word stuff!
	$(".MsoNormal,.MsoNormal *").removeAttr('style');
	
	//load page from given URL...
	if($("#menu a").index($("#menu .current_buttonID a")) > 0)
		$("#menu .current_buttonID a").trigger('click');
});

//get content data and menu, used when clicking a menu button
getContentData = function(obj,index,url,subindex){
	$.get(url,{ajax:true},function(data){
		html = data;
 
		//close the content
		if($("#content").length){
			//move rest of to there normal place...
			if(last_index > 0 && $("#menu > ul > li:eq(" + (last_index) + ")").length){
				$("#menu > ul > li:eq(" + (last_index) + ")").animate({marginTop:0},'slow');
			}

			//close old content and remove from DOM...
			$("#html > div.data").slideUp('slow');
			$("#content").slideUp('slow',function(){
				$("#menu a.open").removeClass('open');
				$("#content").remove();
				//$(this).remove();
				//open new content
				openUpContentAnimation(obj,index,subindex);
			});
		}else{
			//no content found, open new content
			openUpContentAnimation(obj,index);
		}
		//remember last clicked
		last_index = index + 1;
	});	
}

//open up a clicked button or sub-button
var openUpContentAnimation = function(obj,index,subindex){
	//highlight current button
	obj.addClass('open');
	
	//get current menu height, we should be closed now...
	menu_total = $("#menu > ul").height();

	//animate all menu items we've got left...
	rest_height = 0;
	if($("#menu > ul > li:eq(" + (index + 1) + ")").length){
		//messure the lower rest of the options.
		r  = $("#menu > ul > li:eq(" + index + ")").nextAll('li').clone();
		o = $('<ul></ul>').hide().append(r).appendTo('#menu');
		rest_height = o.height();
		o.remove();

		//move rest of buttons up, or else they go out of the container...
		//FIXME: the extra -70 = extra bottom margin, should move this to main.css
		$("#menu > ul > li:eq(" + (index + 1) + ")").animate({marginTop:(rest_height * -1) - 70},'slow');
	}
	//calc content container height	
	h = $("#menu").height() - (menu_total - rest_height);
   
	//open up the content in new height
	obj.parents('li').append('<div id="content"></div>').find("#content").height(h).html(html).wrapInner('<div id="html" class="clear"><div class="data"></div></div>').find("#html").height(h);
	
	//check for submenu...
	submenu = obj.parents('li').children('ul:eq(0)')
	if(submenu.length){
		//parse submenu
		submenu.clone(true).prependTo('#html').css('display','block');
		if(subindex)
			$("#menu a:eq(" + subindex + ")").addClass('open');

		//make room for menu.
		if($.browser.msie){
			$('#html > div.data').css('margin-left','0px');
		}
	}

	//done show content...
	$("#content").slideDown("slow");
	openData($('#html > div.data').html());
}

//rebuild form to use ajax call
var makeAjaxForm = function(formObj){
	var u = formObj.attr('action');
	if(u){
		formObj.removeAttr('action').submit(function(e){
			e.preventDefault;
			$("#html > div.data").slideUp('slow',function(){
				post_vars = {};
				formObj.find(":input").each(function(){
					post_vars[$(this).attr('name')] = $(this).val();
				});
				if(u.indexOf('ajax=') < 0)
					u+= (u.indexOf('?') > -1 ? '&' : '?') + 'ajax=true';
				$.post(u,post_vars,function(data){
					openData(data);
				});
			});
			return false;
		});
	}	
}

//put in new content only
var alterContentent = function(){

	//check for onclicks...
	$("#html .data *").each(function(){
		if(($(this).attr('onclick') && $(this).attr('onclick').toString().indexOf('self.location.href') > -1) || ($(this).attr('href') && $(this).attr('href').substr(0,29) == 'javascript:self.location.href')){
			var u = $(this).attr('onclick') ? $(this).attr('onclick').toString() : $(this).attr('href').substr(11,$(this).attr('href').length);
			if($.browser.mozilla){
				u = u.substr(18,u.length).match(/[\"](.+)[\"]/)[1];
			}else{
				u = u.substr(18,u.length).match(/[\'](.+)[\']/)[1];
			}
			$(this).unbind('onclick','click').removeAttr('onclick').click(function(e){
				e.preventDefault();
				if(u.indexOf('ajax=') < 0){
					u+= (u.indexOf('?') > -1 ? '&' : '?') + 'ajax=true';
				}
				$.get(u,function(data){
					openData(data);
				});
				return false;
			});
		}
	});

	//remove extra breaks
	$("#html .data .module_contents").each(function(){
		if($(this).prev().is('br')){
			$(this).prev().remove();
		}
	});

	//alter albums
	if($('#html .data .photoalbum_module').length){
		$('#html .data .photoalbum_module div.preview a.previewClick').wrap('<div class="previewClick_reloader"><div class="previewClick_container old"></div></div>').remove();
		$('#html .data .photoalbum_module .previewClick_container.old').click(function(){
			popWindow($(this).attr('href'),$(this).attr('dimwidth'),$(this).attr('dimheight'));
		});
		getPhotoData();
	}
	
	//alter forms...
	if($('#html .data form').length){
		$('#html .data form').each(function(){
			makeAjaxForm($(this));			
		})
	}
	
	//alter color advise module
	if($('#html .data .style_request_module').length && !$('#html .data .style_request_module .login_module').length){
		var step = 0;
		$('#html .data .style_request_module input.submit').val('volgende').click(function(e){
			e.preventDefault();
			c = goNextStep(step);
			if(c){
				//hide current step.
				$('#html .data .style_request_module div.step_' + step).slideUp('normal',function(){
					step++;
					if(step < 4){
						//time to build the send button
						if(step == 1){
							$("#html .data .style_request_module form div.submit").append('<input type="button" id="sendForm" value="Verstuur formulier" style="display:none;" />');
							$("#sendForm").click(function(){
								if($("textarea[name='style_request[file][" + (step - 1) + "][description]']").val()){
									$(this).parents('form').trigger('submit');
								}else{
									alert('Geef eerst een korte omschrijving van de foto voordat u op volgende klikt.');
								}
							});
						}
						//hide send button
						$('#html .data .style_request_module input.submit,#sendForm').hide();

						//build upload button
						$('#step_' + step).html('').width(100).height(70);
						new AjaxUpload('#step_' + step, {
							action: '/domains/pr8ig.nl/modules/color_advise/upload.php?file_index='+ (step - 1),
							name: 'file',
							autoSubmit: true,
							responseType: 'json',
							onSubmit: function(file, extension) {
								$('#step_' + step).parent().addClass('progress');
							},
							onComplete: function(file, response) {
								$('#step_' + step).parent().removeClass('progress');
								$('#step_' + step).parent().css('background-image','url(' + response['thumb'] + ')');
								if(step != 3){
									$('#html .data .style_request_module input.submit').val('Nog een foto').fadeIn('normal');
								}
								$('#sendForm').fadeIn('normal');
								$('#step_' + step).parent().unbind('click').html('');
							}
						});

					}
					//display new step
					$('#html .data .style_request_module div.step_' + step).slideDown('normal');
				});
			}
			return false;
		});

		//check if we can go to the next step
		var goNextStep = function(step){
			if(step == 0){
				if($("textarea[name='style_request[description]']").val() && $("#html .data .style_request_module div.project:visible").length){
					return true;
				}else{
					alert('Geef eerst een korte omschrijving van het project voordat u op volgende klikt.');
				}
			}else if(step < 4){
				if($("textarea[name='style_request[file][" + (step - 1) + "][description]']").val()){
					return true;
				}else{
					alert('Geef eerst een korte omschrijving van de foto voordat u op volgende klikt.');
				}
			}
			return false;
		}
	}
}

//load new page data without the menu. Used for form posts and internal links.
var openData = function(data){
	loading_content = 1;
	if($("#html > div.data").is(':visible')){
		$("#html > div.data").slideUp('slow',function(){
			$(this).html(data);
			alterContentent();
			$(this).slideDown('slow',function(){
				loading_content = 0;
			});
		});
	}else{
		$("#html > div.data").html(data);
		alterContentent();
		$("#html > div.data").slideDown('slow',function(){
			loading_content = 0;
		});
	}	
}

//init photo album module
var getPhotoData = function(url){
	//get init url 
	if(!url){
		url = $('#html .data .photoalbum_module a.photo_next').attr('href').replace('index.php?','modules/photoalbums/index.php?json_photo_data=true&').replace(/&photoID=([0-9]+)/,'&photoID=0');
	}
	
	//get data
	$.getJSON(url,function(data){
		//parse back and forward buttons...
		if(data['prev']){
			buildAlbumNav('prev_but',url,data['prev']);
		}else{
			$('#html .data .photoalbum_module div.preview span.prev_but').hide();
		}
		if(data['next']){
			buildAlbumNav('next_but',url,data['next']);
		}else{
			$('#html .data .photoalbum_module div.preview span.next_but').hide();
		}

		$('#html .data .photoalbum_module .previewClick_container.old').append('<div class="previewClick_container new"></div>');
		$('#html .data .photoalbum_module .previewClick_container.new').css('background-image','url(' + data['photo']['path'] + ')').fadeIn('slow',function(){
			$('#html .data .photoalbum_module .previewClick_container.old').css('background-image','url(' + data['photo']['path'] + ')').attr('href',data['photo']['path'].replace('AlbumPreview.','')).attr('dimwidth',data['dimensions'][0]).attr('dimheight',data['dimensions'][1]);
			$('#html .photoalbum_module div.info').html(data['photo']['info']);	
			$(this).remove();
		});

	});
}

//build all events for the album.
var buildAlbumNav = function(cls,url,photoID){
	if(!$('#html .data .photoalbum_module div.preview span.' + cls).length){
		$('<span class="nav_button ' + cls + '" />').click(function(){
			getPhotoData($(this).attr('href'));
		}).insertAfter('#html .data .photoalbum_module div.preview div.previewClick_container');
	}
	$('#html .data .photoalbum_module div.preview span.' + cls).show().attr('href',url.replace(/&photoID=([0-9]+)/,'&photoID=' + photoID));
}


//emulate popup function...
var popWindow = function(u,w,h){
	e = u.substring(u.lastIndexOf('.')+1).toLowerCase();
	if(e == 'png' || e == 'gif' || e == 'jpg')
		popEl = $("<div class=\"popWindowDiv\" style=\"display:block;\"><img src=\""+ u +"\" width=\"" + w + "\" height=\"" + h + "\" border=\"0\" /></div>",{overlay:20});
	else
		popEl = $("<div class=\"popWindowDiv\" style=\"display:block;\"><iframe src=\""+ u +"\"  width=\"" + w + "\" height=\"" + h + "\" border=\"0\" frameborder=\"0\"></iframe></div>",{overlay:20});
	popEl.modal({
			onOpen: function (dialog) {
						dialog.data.addClass('alert');
						dialog.container.css('height','auto');
						dialog.overlay.fadeIn('normal', function () {
							dialog.container.show('normal', function () {
								dialog.data.slideDown('normal'); // See Other Notes below regarding
														   // data display property and
														   // iframe details
							});
						});
					},
			onClose: function (dialog) {
						dialog.data.slideUp('normal', function () {
						  dialog.container.hide('normal', function () {
							dialog.overlay.fadeOut('normal', function () {
							  $.modal.close(); // must call this to have SimpleModal
											   // re-insert the data correctly and
											   // clean up the dialog elements
							});
						  });
						});
					}
	});
	$("#modalContainer").css('width',w + 'px').css('margin-left',(w / 2) * -1); 
}