需要幫助修改從網站的JavaScript

Question

我下載了一個html5模板，並試圖定製它，但我在我的頭。 我想要的網站非常簡單。你可以在這裏看到演示： Demo Website

正如你可以看到當菜單被點擊時，有幻燈片的內容出現在右邊。 所以我希望能得到兩條建議：

1.）我想修改這個內容的寬度和高度，不知道怎麼做。

這是我認爲的JavaScript負責它：

$(window).load(function() { 
var act=''; 

$('#content > ul > li').css({position:'absolute', display:'none'}); 
$('#content > ul > li').find('.box1').css({height:'0'}) 

$('#menu > li > a span').css({opacity:'0'}) 

$('#menu > li > a').hover(function(){ 
    $(this).find(' > span').stop().animate({opacity:'1'},600);       
}, function(){ 
    if (!$(this).hasClass('active')) { 
     $(this).find(' > span').stop().animate({opacity:'0'},600);       
    } 
}) 

$('#menu > li').each(function(num){ 
    $(this).data({num:num}) 
}) 
if (location.hash.slice(0,3)=='#!/') { 
    page=location.hash.slice(3); 
    open_page('#'+page); 
} 
if ((location.hash=='#')||(location.hash=='')) { 
    open_page(''); 
} 
$('#menu a').click(function(){ 
    $('#menu a').removeClass('active').find(' > span').stop().animate({opacity:'0'},600); 
    Cufon.replace('#menu a', { fontFamily: 'Questrial', hover:true }); 
    $(this).addClass('active').find(' > span').stop().animate({opacity:'1'},600); 
}) 
$('a').click(function(){ 
    if ($(this).attr('href').slice(0,3)=='#!/') { 
     page=$(this).attr('href').slice(3); 
     open_page('#'+page); 
     return false; 
    } 
    if ($(this).attr('data-type')=='close') { 
     close_page()  
    } 
}) 
function open_page(page){ 
    location.hash='#!/'+page.slice(1); 
    if (act!='') { 
     $(act).find('.box1').stop().animate({height:'0'},700,'easeOutCirc', function(){ 
      $(act).css({display:'none'}); 
      $(page).css({display:'block'}).find('.box1').stop().animate({height:'100%'},700, 'easeOutCirc', function(){ 
       act=page;   
      }); 
     }) 
    } else { 
     $(page).css({display:'block'}).find('.box1').stop().animate({height:'100%'},700, 'easeOutCirc', function(){ 
      act=page;   
     });  
    } 
} 
function close_page(page){ 
    $('#menu a').removeClass('active').find(' > span').stop().animate({opacity:'0'},600); 
    Cufon.replace('#menu a', { fontFamily: 'Questrial', hover:true }); 
    location.hash='#'; 
    $(act).find('.box1').stop().animate({height:'0'},700,'easeOutCirc', function(){ 
     $(act).css({display:'none'}); 
     act=''; 
    }); 
    return false; 
} 

}）

2）我想給slide-中打開另一個頁面（不是託管在同一臺服務器上）在內容空間中，就像一個jQuery的彈出窗口，但嵌入在幻燈片窗口中。目前，所有的內容都寫在index.html

我應該這樣做的iframe？我還沒有嘗試過，因爲我需要先找出步驟1。

像這樣：

<li id="page_Teachers"> 
        <div class="box1"> 
         <div class="inner"> 
          <a href="#" class="close" data-type="close"><span></span></a> 
          <div class="wrapper"> 
           <h2>Our Staff</h2> 
           <div class="wrapper pad_bot2"> 
            <figure class="left marg_right1"><img src="images/page2_img1.jpg" alt=""></figure> 
            <p class="pad_bot2"><strong>Helen Williams</strong></p> 
            <p class="pad_bot1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inciddunt ut labore et dolore magna aliqua nostrud exercitation.</p> 
            <p class="pad_bot2"><a href="#!/page_More" class="link1">Read More</a></p> 
           </div> 
           <div class="wrapper pad_bot2"> 
            <figure class="left marg_right1"><img src="images/page2_img2.jpg" alt=""></figure> 
            <p class="pad_bot2"><strong>Jessy Hamper</strong></p> 
            <p class="pad_bot1">Ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolorreprehenderit in voluptate velit esse cillum dolore.</p> 
            <p class="pad_bot2"><a href="#!/page_More" class="link1">Read More</a></p> 
           </div> 
           <div class="wrapper pad_bot2"> 
            <figure class="left marg_right1"><img src="images/page2_img3.jpg" alt=""></figure> 
            <p class="pad_bot2"><strong>Chester Hamper</strong></p> 
            <p class="pad_bot1">Cupidatat non proident sunt culpa officia deserunt mollit anim idst laborum. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.</p> 
            <p class="pad_bot2"><a href="#!/page_More" class="link1">Read More</a></p> 
           </div> 
          </div> 
         </div> 
        </div> 
       </li> 

Answer 1

的CSS id選擇那些容器：

page_about, page_teachers, page_schedule, page_prices, page_more。正如在這裏看到：

<li id="page_About" style="position: absolute; display: block;height: 400px;width: 600px;"> 
<li id="page_Teachers" style="position: absolute; display: none;"> 
<li id="page_Schedule" style="position: absolute; display: none;"> 
... 

所以，你需要一些CSS width和height添加到他們。例如：

#page_about, #page_teachers, #page_schedules, #page_prices, #page_more { 
    height: 200px; 
    width: 300px; 
}