hilfdirselbst.ch
Facebook Twitter gamper-media
homeedition
Beiträge: 193
19. Nov 2013, 10:38
Beitrag #1 von 1
Bewertung:
(1975 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Probeme mit "overflow:hidden;" und "smoothScroll" in DIV-Box


Hallo,

ich möchte gerne zu bestimmten Webseiteninhalten ("Ankern"), in einer DIV-Box, per "smoothScroll" springen bzw. scrollen.
Da alle Seiteninhalte per include in die DIV-Box geladen werden möchte ich natürlich dass diese nur im Bereich der DIV-Box sichtbar sind und sozusagen alles ausserhalb der DIV-Box ausblenden.

MEIN PROBLEM:
Wenn ich per CSS der DIV-Box (#inhaltframe) "overflow:hidden;" hinzufüge wir die smoothScroll-Funktion deaktiviert.
Sobald ich aber "overflow:hidden;" wieder entferne funktioniert das smoothScroll wieder aber die geladenen Inhalte werden natürlich nicht ausgeblendet ausserhalb der DIV-Box.

Kann mir jemand sagen woran das liegt und wie man das richtig machen kann?

Nachfolgend mal mein Quellcode:

Code
<!DOCTYPE HTML> 
<html>
<head>

<meta charset="utf-8">
<title>meineseite</title>
<?php include ("includes/metatags.php");?>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.anchor.js" type="text/javascript"></script>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery-ui-1.8.18.custom.min.js"></script>
<script src="js/jquery.smooth-scroll.min.js"></script>
<script src="js/lightbox.js"></script>

<script>
jQuery(document).ready(function($) {
$('a').smoothScroll({
speed: 2100,
easing: 'easeInOutCubic'
});

$('.showOlderChanges').on('click', function(e){
$('.changelog .old').slideDown('slow');
$(this).fadeOut();
e.preventDefault();
})
});
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>

<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto:300,700,500' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=EB+Garamond' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/template.css" type="text/css" media="screen" />

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<style type="text/css">

a:link { color: #000; text-decoration: none;}
a:active { color: #000; text-decoration: none;}
a:visited { color: #000; text-decoration: none;}
a:hover { color: #000; text-decoration: none;}

#inhaltframe {
width:968px;
height:595px;
margin-right: auto;
margin-left: auto;
margin-top: 50px;
overflow:hidden;
}

#menu {
position:fixed;
width:636px;
height:73px;
z-index:80;
margin-right: auto;
margin-left: 330px;
margin-top: 490px;
}

#logo {
position:absolute;
width:258px;
height:73px;
z-index:22;
left: 378px;
top: 1px;
}
/* Horizontales Menü (id=navi) */

/* style the outer div to give it width */
.menu {
width:636px;
height:73px;
left: 20px;
position: relative;
}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin-top:0px;
list-style-type:none;
}

.menu ul ul {
width:auto;
}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {
float:left;
width:auto;
position:relative;
}
/* style the links for the top level */
.menu a, .menu a:visited {
display:block;
font-family: verdana;
border-right: 1px solid #000000;
font-size:0.8em;
font-weight: bold;
color:#000000;
height: 20px;
width:auto;
height:80px;
border:0px solid #fff;
border-width:0px 0px 0 0;
padding-left:5px;
padding-right:5px;
line-height:75px;
}
/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {
width:auto;
w\idth:auto;
}

/* style the second level background */
.menu ul ul a.drop, .menu ul ul a.drop:visited {
}
/* style the second level hover */
.menu ul ul a.drop:hover {
}
.menu ul ul :hover > a.drop {
}
/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {
}
/* style the third level hover */
.menu ul ul ul a:hover{
}
.menu ul ul ul :hover > a {
}

/* style the table so that it takes no part in the layout - required for IE to work */
.menu table {border-collapse:collapse; border:0; position:absolute; left:0; bottom:-1px;}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
bottom:10px;
left:0;
width:150px;
}
* html .menu ul ul {
bottom:30px;
}
/* position the third level flyout menu */
.menu ul ul ul{
left:150px;
bottom:0;
width:150px;
}
/* position the third level flyout menu for a left flyout */
.menu ul ul ul.left {
left:-150px;
}


/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
color:#000;
height:auto;
line-height:0.5em;
padding:5px 10px;
width:129px;
font-size:0.8em;
/* yet another hack for IE5.5 */
}
* html .menu ul ul a{
width:150px;
w\idth:129px;
}


/* style the top level hover */
.menu a:hover{
color:#fff;
}

.menu ul ul a:hover{
background-color: #ffffff;
}

.menu :hover > a, .menu ul ul :hover > a {
color:#000000;
}

/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul{
visibility:visible;
height:auto;
}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{
display:none;
}
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul{
display:none;
}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{
display:block;
bottom:0;
}
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul {
display:block;
bottom:0;
}
</style>
</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="menu">
<div class="menu">
<ul>
<li><a href="#stop3">Menupunkt1<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#stop4">Menupunkt2<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#stop5">Menupunkt3<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#stop6">Menupunkt4<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</div>
<div id="logo">
<p><a href="#stop1"><img src="images/meinlogo.png" alt="Logo_Zur Startseite" border="0"></a></p>
</div>
</div>
<div id="inhaltframe">
<?php include ("seite1.php");?>
<?php include ("seite2.php");?>
<?php include ("seite3.php");?>
<?php include ("seite4.php");?>
<?php include ("seite5.php");?>
<?php include ("seite6.php");?>
<?php include ("seite7.php");?>
</div>
</body>
</html>

Top
 
X