Psst.. new poll here.
Psst.. new forums here.
Microsoft is blocking us again (TY IP Reputation!) so just use oauth login instead. :)
Paste
Pasted as HTML by fdgf ( 13 years ago )
<!DOCTYPE html>
<html lang="en">
<head>
<title>Culmyca - 2k13</title>
<meta charset=utf-8>
<style type="text/css" media="screen">
#nav-list-example
{
top:20%;
bottom:20%;
left:10%;
right:6.8%;
position:absolute;
}
#nav-list-example li
{
width: 30%;
height: 100%;
float: left;
margin-right: 3%;
position: relative;
background:inherit;
}
#nav-list-example li div {
width: 100%;
height: 100%;
overflow: hidden;
background: white;
position: absolute;
top: 1px;
left: 1px;
}
#nav-list-example li div.back {
left: -999em;
background: #999;
}
</style>
[removed][removed]
[removed][removed]
[removed][removed]
[removed][removed]
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:regular,bold" rel="stylesheet" type="text/css" />
<!--
[removed]
$(document).ready(function(){
$(".nav").hover(function(){
$(this).css("font-size",'20px');
},function(){
$(this).css("font-size",'10px');
});
});
[removed]-->
[removed]
$(document).ready(function(){
//$(".content_r").css("padding-top",((window.innerHeight/2 - 225) + "px"));
$('.fancybox_ev').fancybox({
'padding' :0,
'height' :500,
'width' :1100,
'type' :'iframe'
});
var save='b1';
});
[removed]
</head>
<body>
<div id="fb-root"></div>
<!-- The JavaScript -->
<!-- FancyBox -->
[removed][removed]
<link rel="stylesheet" type="text/css" href="fancybox/source/jquery.fancybox.css" media="screen" />
<!-- End FancyBox -->
<!-- [removed][removed]
-->
[removed][removed]
[removed]
$(document).ready(function(){
$("div.holder").hide();
$("#bk").show();
}
);
function showSponsor(entity){
height = window.innerHeight*0.8;
$("div.content#"+entity).css("height",height.toString()+"px");
$("div.holder#"+entity).show(100);
}
function closeSponsor(){
$("div.holder").hide(100);
}
$(function() {
var $ac_background = $('#ac_background'),
$ac_bgimage = $ac_background.find('.ac_bgimage'),
$ac_loading = $ac_background.find('.ac_loading'),
$ac_content = $('#ac_content'),
$title = $ac_content.find('h1'),
$menu = $ac_content.find('.ac_menu'),
$mainNav = $menu.find('ul:first'),
$menuItems = $mainNav.children('li'),
totalItems = $menuItems.length,
$ItemImages = new Array();
/*
for this menu, we will preload all the images.
let's add all the image sources to an array,
including the bg image
*/
$menuItems.each(function(i) {
$ItemImages.push($(this).children('a:first').attr('href'));
});
$ItemImages.push($ac_bgimage.attr('src'));
var Menu=(function(){
var init=function() {
loadPage();
initWindowEvent();
},
loadPage= function() {
/*
1- loads the bg image and all the item images;
2- shows the bg image;
3- shows / slides out the menu;
4- shows the menu items;
5- initializes the menu items events
*/
$ac_loading.show();//show loading status image
$.when(loadImages()).done(function(){
$.when(showBGImage()).done(function(){
//hide the loading status image
$ac_loading.hide();
$.when(slideOutMenu()).done(function(){
$.when(toggleMenuItems('up')).done(function(){
initEventsSubMenu();
});
});
});
});
},
showBGImage = function() {
return $.Deferred(
function(dfd) {
//adjusts the dimensions of the image to fit the screen
adjustImageSize($ac_bgimage);
$ac_bgimage.fadeIn(1000, dfd.resolve);
}
).promise();
},
slideOutMenu= function() {
/* calculate new width for the menu */
var new_w = $(window).width() - $title.outerWidth(true);
return $.Deferred(
function(dfd) {
//slides out the menu
$menu.stop()
.animate({
width : new_w + 'px'
}, 700, dfd.resolve);
}
).promise();
},
/* shows / hides the menu items */
toggleMenuItems = function(dir) {
return $.Deferred(
function(dfd) {
/*
slides in / out the items.
different animation time for each one.
*/
$menuItems.each(function(i) {
var $el_title = $(this).children('a:first'),
marginTop, opacity, easing;
if(dir === 'up'){
marginTop = '0px';
opacity = 1;
easing = 'easeOutBack';
}
else if(dir === 'down'){
marginTop = '60px';
opacity = 0;
easing = 'easeInBack';
}
$el_title.stop()
.animate({
marginTop : marginTop,
opacity : opacity
}, 200 + i * 200 , easing, function(){
if(i === totalItems - 1)
dfd.resolve();
});
});
}
).promise();
},
initEventsSubMenu = function() {
$menuItems.each(function(i) {
var $item = $(this), // the <li>
$el_title = $item.children('a:first'),
el_image = $el_title.attr('href'),
$sub_menu = $item.find('.ac_subitem'),
$ac_close = $sub_menu.find('.ac_close');
/* user clicks one item : appetizers | main course | desserts | wines | specials */
$el_title.bind('click.Menu', function(e) {
$.when(toggleMenuItems('down')).done(function(){
openSubMenu($item, $sub_menu, el_image);
});
return false;
});
/* closes the submenu */
$ac_close.bind('click.Menu', function(e) {
closeSubMenu($sub_menu);
return false;
});
});
},
openSubMenu = function($item, $sub_menu, el_image) {
$sub_menu.stop()
.animate({
height :'600px',
marginTop : '-300px'
}, 400, function() {
//the bg image changes
showItemImage(el_image);
});
},
/* changes the background image */
showItemImage = function(source) {
//if its the current one return
if($ac_bgimage.attr('src') === source)
return false;
var $itemImage = $('<img src="'+source+'" alt="Background" class="ac_bgimage"/>');
$itemImage.insertBefore($ac_bgimage);
adjustImageSize($itemImage);
$ac_bgimage.fadeOut(1500, function() {
$(this).remove();
$ac_bgimage = $itemImage;
});
$itemImage.fadeIn(1500);
},
closeSubMenu = function($sub_menu) {
$sub_menu.stop()
.animate({
height : '0px',
marginTop : '0px'
}, 400, function() {
//show items
toggleMenuItems('up');
});
},
/*
on window resize, ajust the bg image dimentions,
and recalculate the menus width
*/
initWindowEvent = function() {
/* on window resize set the width for the menu */
$(window).bind('resize.Menu' , function(e) {
adjustImageSize($ac_bgimage);
/* calculate new width for the menu */
var new_w = $(window).width() - $title.outerWidth(true);
$menu.css('width', new_w + 'px');
});
},
/* makes an image "fullscreen" and centered */
adjustImageSize = function($img) {
var w_w = $(window).width(),
w_h = $(window).height(),
r_w = w_h / w_w,
i_w = $img.width(),
i_h = $img.height(),
r_i = i_h / i_w,
new_w,new_h,
new_left,new_top;
if(r_w > r_i){
new_h = w_h;
new_w = w_h / r_i;
}
else{
new_h = w_w * r_i;
new_w = w_w;
}
$img.css({
width : new_w + 'px',
height : new_h + 'px',
left : (w_w - new_w) / 2 + 'px',
top : (w_h - new_h) / 2 + 'px'
});
},
/* preloads a set of images */
loadImages = function() {
return $.Deferred(
function(dfd) {
var total_images = $ItemImages.length,
loaded = 0;
for(var i = 0; i < total_images; ++i){
$('<img/>').load(function() {
++loaded;
if(loaded === total_images)
dfd.resolve();
}).attr('src' , $ItemImages[i]);
}
}
).promise();
};
return {
init : init
};
})();
/*
call the init method of Menu
*/
Menu.init();
});
[removed]
<div id="ac_background" class="ac_background">
<img class="ac_bgimage" src="images/DSC_0050_048.jpg" alt="Background"/>
<div class="ac_overlay"></div>
<div class="ac_loading"></div>
</div>
<div id="ac_content" class="ac_content">
<h1><span>YMCA UST Presents</span>Culmyca'13:</h1>
<div class="ac_menu">
<ul>
<li class="nav">
<a class='link aa' id="b1" href="images/DSC_0050_048.jpg">Khoj</a>
<div class="ac_subitem">
<span class="ac_close"></span>
<h2>Khoj</h2>
<ul>
<li>Details about fest</li>
<!--<li> 65 Countries </li>
<li> 5000+ Participants </li>
<li> 50+ Events </li>
<li> 3 Days : 2nd week of February</li>
-->
</ul>
</div>
</li>
<li>
<a class="aa" id="b2" href="images/DSC_0091.jpg">Manan</a>
<hr />
<div id="manan" class="ac_subitem">
<span class="ac_close"></span>
<img src="images/Logos/man.png" id="gp_logo"/>
<img src="images/Logos/khoj_icon.png" id="khoj_logo"/>
<div id="tit">MANAN</div>
<div id="description">
</div>
[removed]
$(document).ready(function(){
$("#evnt").mouseover(function(){
$("this").fadeOut(500);
$("#evnt_show").fadeIn(1000);
});
$("#evnt_show").mouseout(function(){
$("#evnt_show").fadeOut(500);
$("#evnt").fadeIn(1000);
});
});
[removed]
<img id="evnt" src="images/Logos/events_side_up.png" />
<a href="events/index.htm" class="fancybox_ev">
<img id="evnt_show" src="images/Logos/events_up.png" /></a>
</div>
</li>
<li>
<a class="aa" id="b3" href="images/DSC_0190.jpg">Microbird</a>
<hr />
<div class="ac_subitem">
<span class="ac_close"></span>
<div id="gp_logo"></div>
<div id="khoj_logo"></div>
<div id="tit">Microbird</div>
<div id="description">
<a href="events/index.htm" class="fancybox_ev "><img id="evnt" src="images/event2.png" /></a>
<a href="contact/index.htm" class="fancybox_ev "><img id="cont" src="images/contact_me.png" /></a>
</div>
</li>
<li>
<a class="aa" id="b4" href="images/DSC_001.jpg">Samarpan</a>
<div class="ac_subitem">
<span class="ac_close"></span>
<div id="gp_logo"></div>
<div id="khoj_logo"></div>
<div id="tit">Samarpan</div>
<div id="description">
<a href="events/index.htm" class="fancybox_ev "><img id="evnt" src="images/event2.png" /></a>
<a href="contact/index.htm" class="fancybox_ev "><img id="cont" src="images/contact_me.png" /></a>
</div>
</li>
<li>
<a class="aa" id="b5" href="images/GLO_3874.jpg">Mechnext</a>
<div class="ac_subitem">
<span class="ac_close"></span>
<div id="gp_logo"><a href="#" red;" title="this">hello</a></div>
<div id="khoj_logo"></div>
<div id="tit">Mechnext</div>
<div id="description">
<a href="events/index.htm" class="fancybox_ev "><img id="evnt" src="images/event2.png" /></a>
<a href="contact/index.htm" class="fancybox_ev "><img id="cont" src="images/contact_me.png" /></a>
</div>
</li>
<li>
<a id="b6" href="images/GLO_3874.jpg">Gallery</a>
<div class="ac_subitem">
<span class="ac_close"></span>
<h2>Gallery</h2>
</div>
</li>
<li>[removed]
$(document).ready(function () {
$('#nav-list-example li div.back').hide().css('left', 0);
function mySideChange(front) {
if (front) {
$(this).parent().find('div.front').show();
$(this).parent().find('div.back').hide();
} else {
$(this).parent().find('div.front').hide();
$(this).parent().find('div.back').show();
}
}
$('#nav-list-example li').hover(
function () {
$(this).find('div').stop().rotate3Di('flip', 250, {direction: 'clockwise', sideChange: mySideChange});
},
function () {
$(this).find('div').stop().rotate3Di('unflip', 500, {sideChange: mySideChange});
}
);
});
[removed]
<a id="b7" href="images/GLO_3874.jpg">Schedule</a>
<div class="ac_subitem" >
<ul id="nav-list-example" >
<li >
<div class="front" ><img src="images/DSC_0091.jpg" height="100%" width="100%"/></div>
<a href="events/index.htm" class="fancybox_ev ">
<div class="back" ><img src="images/DSC_0190.jpg" height="100%" width="100%" /></div></a>
</li>
<li>
<div class="front"><img src="images/DSC_0091.jpg" height="100%" width="100%"/></div>
<a href="events/index.htm" class="fancybox_ev ">
<div class="back"><img src="images/DSC_0190.jpg" height="100%" width="100%" /></div></a>
</li>
<li>
<div class="front"><img src="images/GLO_3874.jpg" height="100%" width="100%"/></div>
<a href="events/index.htm" class="fancybox_ev ">
<div class="back"><img src="images/DSC_00911.jpg" height="100%" width="100%" /></div></a>
</li>
</ul> <!--<span class="ac_close"></span>
<h2>Schedule</h2>
<div id="day1">
</div>-->
</div>
</li>
<li>
<a id="b8" href="images/DSC_0190.jpg">Contact Us</a>
<div class="ac_subitem">
<span class="ac_close"></span>
<h2>Contact Us</h2>
</div>
</li>
</ul>
</div>
</div>
<div class="ac_footer">
<span> ©Culmyca, YMCA UST. All rights reserved. </span>
</div>
</body>
</html>
Revise this Paste