Jump to content

lasse48

Members
  • Posts

    32
  • Joined

  • Last visited

    Never

Profile Information

  • Gender
    Not Telling

lasse48's Achievements

Member

Member (2/5)

0

Reputation

  1. hi. I started to play around with a JQ box slider, but the box keeps the content over my right div which is the border, have tried a little with z-index and position, but not helped. thanks in advance. lasse index.php http://www.lassejensenbang.dk/frame_multi_windows/ <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Legeplads18</title> <meta name="copyright" content="Copyright (C) www.legeplads18.dk, 2011. All rights reserved."> <meta name="author" content="www.legeplads18.dk"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="PRAGMA" content="no-cache"> <link rel="shortcut icon" href="favicon.ico" > <!-- JAVASCRIPT --> <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ //Initialize //Set the selector in the first tab $(".container .TabMenu span:first").addClass("selector"); //Basic hover action $(".container .TabMenu span").mouseover(function(){ $(this).addClass("hovering"); }); $(".container .TabMenu span").mouseout(function(){ $(this).removeClass("hovering"); }); //Add click action to tab menu $(".container .TabMenu span").click(function(){ //Remove the exist selector $(".selector").removeClass("selector"); //Add the selector class to the sender $(this).addClass("selector"); //Find the width of a tab var TabWidth = $(".TabContent:first").width(); if(parseInt($(".TabContent:first").css("margin-left")) > 0) TabWidth += parseInt($(".TabContent:first").css("margin-left")); if(parseInt($(".TabContent:first").css("margin-right")) >0) TabWidth += parseInt($(".TabContent:first").css("margin-right")); //But wait, how far we slide to? Let find out var newLeft = -1* $("span").index(this) * TabWidth; //Ok, now slide $(".AllTabs").animate({ left: + newLeft + "px" },1000); }); }); </script> <!-- JAVASCRIPT --> <!-- CSS --> <style type="text/css"> body, html { margin:0; padding:0; width:100%; height:100%; z-index: 1; } html, body, .container { height: 100%; min-height: 100%; width:100%; overflow:hidden; top:0px; left:0px; background: #222; } .selector { background: url(img/selector.png); } .hovering { background: url(img/selector.png); opacity: 0.5; } .container .TabMenu { position: relative; top: 0px; left: 0px; z-index: 10; } .container .TabMenu span { display: inline-block; height: 77px; margin: 0px; padding:0px; } .container .ContentFrame { width: 800px; left: 0px; overflow:hidden; color: #fff; float:left; } .container .ContentFrame .AllTabs { position: relative; left:0px; width: 2500px; overflow:hidden; z-index: 2; } .container .ContentFrame .AllTabs .TabContent { width:800px; margin-right:20px; text-align: justify; float:left; overflow:hidden; } .TabMenu { background: url(img/slideTabbg_middel.png); background-repeat:repeat-x; } .TabMenu_top_left { background: url(img/slideTabbg_left.png); background-repeat:no-repeat; width: 7px; height:77px; float:left; } .TabMenu_top_right { background: url(img/slideTabbg_right.png); background-repeat:no-repeat; width: 7px; height:77px; float:right; } .Content_middel_left { background: url(img/Content_middel_left.png); background-repeat:no-repeat; background-size: 100%; width: 7px; height:100%; float:left; } .Content_middel_right { background: url(img/Content_middel_left.png); background-repeat:no-repeat; background-size: 100%; width: 7px; height:100%; float:right; z-index: 5; } .TabMenu_footer { bottom: 0px; left: 0px; z-index: 10; width: 100%; height:9px; float:left; background: url(img/slideTabbg_middel_footer.png); background-repeat:repeat-x; position: fixed; } .TabMenu_footer_left { background: url(img/slideTabbg_middel_footer_left.png); background-repeat:no-repeat; height:9px; width: 6px; float:left; } .TabMenu_footer_right { background: url(img/slideTabbg_middel_footer_right.png); background-repeat:no-repeat; width: 6px; height:9px; float:right; } img#bg { width:7px; height:100%; } .Contentcenter{ position: relative; width: 800px; overflow:hidden; align:center;margin:0 auto; } </style> <link href="css/site_1.css" rel="stylesheet" type="text/css"> <!-- CSS --> </head> <body> <div class="container"> <div class="TabMenu"> <div class="TabMenu_top_left"></div> <span> <img src="img/contact.png" /> </span> <span> <img src="img/ipod.png" /> </span> <span> <img src="img/drive.png" /> </span> <div class="TabMenu_top_right"></div> </div> <div class="Content_middel_left"><img src="img/Content_middel_left.png" alt="" border="0" id="bg" /></div> <div class="Contentcenter"> <div class="ContentFrame"> <div class="AllTabs"> <div class="TabContent"> <p> <?php include("site_1.php"); ?> </p> </div> <div class="TabContent"> <p> Videos! Site! Test! </p> </div> <div class="TabContent"> <p> Webcams! Site! Test!<br/> <img src="img/UNDER_CONSTRUCTION.png" height="248" width="327" alt="" border="0"/> </p> </div> </div> </div> </div> <div class="Content_middel_right"><img src="img/Content_middel_left.png" alt="" border="0" id="bg" /></div> <div class="TabMenu_footer"> <div class="TabMenu_footer_left"></div><div class="TabMenu_footer_right"></div> </div> </div> </body> </html>
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.