pr8ig styling « visit
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);
}
Syndicate
Categories
Statistics
There are 330 Sites with 745 Links of Interest in 18 Categories. The latest Site was added 4 months ago.
About
This is a project by Sebastian Senf, for his part jQuery user and lover too. Follow me.