я пытался бросить сюда кусок кода, но очень много было. А так вот блоки самого кода без лишних заморочек:
var i = 0;
$(document).ready(function(){
int = setInterval("BoxLoad(i)",500);
$(".big").one("click",
function () {
id = $(this).attr("id");
loader(id);
}
);
$("#blog_c").click(
function () {
$("#blog").trigger("click");
}
);
$("#ask").toggle(
function () {
$("#ask_form").show();
},function () {
$("#ask_form").hide();
}
);
});
function loader(id){
blogstatus = $("#blog_page").hasClass("active");
if($("#"+id).hasClass("active")){
close(id);
}else{
$("#"+id).addClass("active");
window.location.hash = id;
if(id != "blog"){
if(blogstatus == "true" || blogstatus == true){
$("#blog").removeClass("active");
$("#blog_page").removeClass("active");
$("#blog_c").delay(200).fadeOut(500);
$("#blog_page").delay(200).animate({ marginRight: "-=540px",}, 1000,
function (){
$("#blog_page").hide();
}
);
$("#blog .description").html("blog");
}
$("#"+id).siblings().fadeOut(500);
if(id == "global"){
left = "-=50px";
up = "-=240px";
}else if (id == "technologies"){
left = "-=157px";
up = "-=240px";
}else if (id == "solutions"){
left = "-=264px";
up = "-=240px";
}
$("#"+id).animate({ marginLeft: left,}, 1000 ).delay(300).animate({ marginTop: up,}, 1000,
function(){
$("#"+id+"_page").delay(200).fadeIn(500);
$("#"+id+"_d").html("back");
$("#"+id+"_c").delay(200).fadeIn(500);
$("#"+id).css("position","fixed");
$("#"+id).one("click",
function () {
loader(id);
}
);
}
);
}else{
$("#blog_page").show().addClass("active");
$("#blog_page").delay(200).animate({ marginRight: "+=540px",}, 1000,
function (){
$("#blog .description").html("close");
$("#blog_c").delay(200).fadeIn(500);
$("#blog").one("click",
function () {
loader("blog");
}
);
}
);
}
}
}
function close(id){
if(id != "blog"){
if(id == "global"){
left = "+=50px";
up = "+=240px";
}else if (id == "technologies"){
left = "+=157px";
up = "+=240px";
}
else if (id == "solutions"){
left = "+=264px";
up = "+=240px";
}
$("#"+id+"_page").delay(200).fadeOut(500,
function(){
$("#"+id+"_c").delay(200).fadeOut(500);
$("#"+id).animate({ marginLeft: left,}, 1000 ).delay(300).animate({ marginTop: up,}, 1000,
function(){
$("#"+id).css("position","");
$("#"+id+"_d").html(id);
$("#boxes div").fadeIn(500);
}
);
$("#"+id).one("click",
function () {
loader(id);
}
);
}
);
}else{
$("#blog_c").delay(200).fadeOut(500);
$("#blog_page").delay(200).animate({ marginRight: "-=540px",}, 1000,
function (){
$("#blog_page").hide();
}
);
$("#"+id).one("click",
function () {
loader(id);
}
);
$("#blog .description").html("blog");
}
$("#"+id).removeClass("active");
$("#blog_page").removeClass("active");
window.location.hash = "";
}
function displayImages(data) {
var iStart = Math.floor(Math.random()*(11));
var iCount = 0;
var htmlString = "<ul>";
$.each(data.items, function(i,item){
if (15 > iCount) {
var sourceSquare = (item.media.m).replace("_m.html", "_s.html");
htmlString += '<li><a href="' + item.link + '" target="_blank">';
htmlString += '<img src="' + sourceSquare + '" alt="' + item.title + '" title="' + item.title + '"/>';
htmlString += '</a></li>';
}
iCount++;
});
$('#flickr').html(htmlString + "</ul>");
}
function BoxLoad() {
var box = $('#boxes div').length;
if (i >= box) {
var hash = window.location.hash.substr(1);
if(hash != ""){
$("#"+hash).trigger("click");
$("#hider").hide();
}else{
$("#hider").hide();
}
clearInterval(int);
}
$('#boxes div:hidden').eq(0).fadeIn(500);
i++;
}
Код самой кнопки:
<div class="box big" id="blog" style="background-color:#38509e;width:50px;height:20px;display:none; margin-left:330px;margin-top:20px">
<a title="solutions">
<span class="description" id="blog_d">contacts</span>
</a>
</div>
<div class="box big" id="blog" style="background-color:#38509e;width:50px;height:20px;display:none; margin-left:330px;margin-top:70px">
<a title="solutions">
<span class="description" id="blog_d">why?</span>
</a>
</div>
Содержимое и действие после нажатия кнопки:
<div id="solutions_page" style="display:none; overflow:auto; height:auto;" class="page" >
dfsdfsdfsdf
</div>
