 Willkommen auf dem Portal für Mediengestalter
|
|
|
| Autor |
Nachricht |
Townboy
Threadersteller
Dabei seit: 07.10.2008
Ort: Kelkheim
Alter: -
Geschlecht: 
|
Verfasst So 10.05.2009 08:01
Titel JS Scrolleffekt in CSS DIV einbinden |
  |
|
Hallo Zusammen,
vielleicht könnt Ihr mir helfen. Ich habe gerade gelesen, dass CSS Fragen hier nichts zu suchen haben, aber ich denke meine Anfrage ist fortgeschrittener Art, daher stelle ich sie mal hier ansonsten bitte verschieben.
Ich habe eine DIV Box mit dem Wert: overflow: auto;. In dieser Box sollen verschiedene Inhalte per Ankernavigation aufgerufen werden. Auf der Basis HTML und CSS funktioniert das einwandfrei. Der Effekt, dass die Inhalte einfach zum nächsten Anker springen gefällt mir jedoch nicht.
Ich hätte gerne folgenden Effekt wie hier auf dieser Webseite: mallorcaincentive.com . Wenn Ich einen Link betätige, soll die Seite auf den nächsten Anker flüssig scrollen. Dazu habe ich versuchsweise den Link zu Mootools:
<script type="text/JavaScript" src="js/site.js"></script> eingebunden.
Wenn ich bei mir den Effekt normal (als einzelne Seite) aufrufe, funktioniert es einwandfrei. Sobald ich jedoch die DIV Box mit overflow: auto; belege ist der Effekt weg.
Leider habe ich von JS noch keinen Plan, von daher wäre ich dankbar für einen Tip wie ich das realisieren kann.
Hier ist mein Code für die Seite:
| Code: |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="css/style-V7.css" rel="stylesheet" type="text/css" />
<script type="text/JavaScript" src="js/mootools.v1.11.js"></script>
<script type="text/JavaScript" src="js/site.js"></script>
</head>
<body>
<!-- Header start -->
<div id="header">
<div id="sidebar">
<p><a href="#"><img src="images/load-img/logo.jpg" alt="Logo" name="Logo" width="278" height="77" border="0" id="Logo"></a></p>
<ul>
<li><a href="#">Referenzen</a> </li>
<li><a href="#">Über Uns</a></li>
<li><a href="#">Leistungen</a></li>
<li><a href="#">Kontakt</a></li>
<li><a href="#">Impressum</a></li>
</ul>
<p> </p>
</div>
<a name="top" id="top"></a>
<div id="Navigation"><a href="#Anzeige1">Anzeige1</a> | <a href="#Anzeige2">Anzeige2</a> | <a href="#Anzeige3">Anzeige3</a> | <a href="#Anzeige4">Anzeige4</a></div>
<div id="load">
<div class="slide-container" id="Anzeige1">
<div class="load-img"><img src="images/load-img/background.jpg" alt="background" width="1024" height="300"></div>
<div class="load-text">
<h2>Load Text1</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc. <a href="#top">»» --TOP--</a></p>
</div>
</div>
<div class="slide-container" id="Anzeige2">
<div class="load-img"><img src="images/load-img/background.jpg" alt="background" width="1024" height="300"></div>
<div class="load-text">
<h2>Load Text2</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc. <a href="#top">»» --TOP--</a></p>
</div>
</div>
<div class="slide-container" id="Anzeige3">
<div class="load-img"><img src="images/load-img/background.jpg" alt="background" width="1024" height="300"></div>
<div class="load-text">
<h2>Load Text3</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc. <a href="#top">»» --TOP--</a></p>
</div>
</div>
<div class="slide-container" id="Anzeige4">
<div class="load-img"><img src="images/load-img/background.jpg" alt="background" width="1024" height="300"></div>
<div class="load-text">
<h2>Load Text4</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc. <a href="#top">»» --TOP--</a></p>
</div>
</div>
</div>
<div id="footer">
FOOTER
</div>
<!-- Header end -->
</div>
</body>
</html>
|
und hier der CSS Style
| Code: | body { font-family: Arial, Helvetica, sans-serif; font-size: 0.8em; color: #312c2c; background-color: #FFFFFF; margin: 0px; }
#header {
margin: 0px;
min-width: 960px;
}
#sidebar {
border-right: 1px dashed #ccc;
float: left;
width: 270px;
height: 500px;
margin-left: 0px;
margin-top: 0px;
text-align: left;
vertical-align: top;
}
img {margin-top:0;}
#footer {
border: 1px dashed #ccc;
width: 99%;
height: 50px;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
}
/* :::::::::::::::::::::::::::::::::::::::::::::::::::: Navigation */
#Navigation {
position: absolute;
width: 600px;
border: 1px sol #0000FF;
top: 0px;
left: 280px;
background-color: #ccc;
}
#sidebar a {
font-size: 1.4em;
letter-spacing: -0.05em;
color: #312c2c;
text-decoration: none;
line-height: 30px;
text-transform: uppercase;
font-variant: small-caps;
font-weight: bold;
}
#sidebar a:hover {
color: #FF6600;
}
/* :::::::::::::::::::::::::::::::::::::::::::::::::::: Load Content */
#load {
width: auto;
min-width: 680px;
height: 500px;
margin-left: 280px;
margin-top: 0px;
overflow: hidden;
}
.slide-container {
border: 1px dashed #ff0000;
height: 500px;
margin-bottom: 100px;
}
.load-img {
border: none;
height: 300px;
overflow: hidden;
}
.load-text {
margin-top: 10px;
height: 150px;
}
.load-text p{
margin-top: 5px;
}
/* :::::::::::::::::::::::::::::::::::::::::::::::::::: HTML */
ul { list-style:none;}
h2 {margin:0px; padding: 0px;font-size: 1.4em; letter-spacing: -0.05em;}
p {margin:0px; padding: 0px;}
|
|
|
| |
  |
 |
pixelpapst303
Dabei seit: 06.07.2006
Ort: hamburg
Alter: 50
Geschlecht:
|
|
| |
 |
|
|
Anzeige
|
|
|
Townboy
Threadersteller
Dabei seit: 07.10.2008
Ort: Kelkheim
Alter: -
Geschlecht:
|
Verfasst Di 12.05.2009 04:55
Titel
|
|
|
Hallo pixelpapst303,
danke für Deine schnelle Antwort. Sry ich kam noch nicht früher zum antworten.
Ich kann Deine Vorlage zwar für meine Zwecke kopieren, leider verstehe ich nicht ganz den Aufbau um es für meinen Code umzuwandeln.
Kannst Du mir diesen vielleicht kurz erläutern?
Du hast einen Container <div id="scrollContainer" style="position: relative"> und <div id="innerScrollContainer" style="position: absolute">. Kann es sein, dass die Funktion nur mit {Position: absolute;} funktioniert?
Kannst Du mir bitte die Funktion erklären? Leider habe ich von JS noch keinen Plan. (Ich lehrs aber noch bestimmt 
| Code: | <script type="text/javascript">
var lastScroll = 0;
function divScrollTo(headlineID) {
var actHeadline = $('#'+headlineID).offset();
var container = $('#scrollContainer').offset();
var containerTop = container.top;
var scrollNow = actHeadline.top-container.top+lastScroll;
$('#innerScrollContainer').animate( { top: -scrollNow+'px' } , 1000 );
lastScroll = scrollNow;
}
</script> |
EDIT:
Bei einem Test ist mir gerade aufgefallen, dass ich Deinen Code nicht bei mir ausführen kann. Woran liegt das? Ich habe Deinen Quelltext 1zu1 kopiert, jedoch kann ich Ihn weder lokal noch auf dem Space ausführen.
Ich habe den <link rel="stylesheet" type="text/css" href="lib/styles.css" />. Jedoch finde ich die lib/styles.css nicht. Ist diese Lib ein Teil zur zur jquery?
Man,  ich komme mir vor wie ein Anfänger.
Zuletzt bearbeitet von Townboy am Di 12.05.2009 05:34, insgesamt 2-mal bearbeitet
|
|
| |
|
|
Smooth-Graphics
Dabei seit: 22.05.2006
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 12.05.2009 07:14
Titel
|
|
|
| Townboy hat geschrieben: | Ich habe den <link rel="stylesheet" type="text/css" href="lib/styles.css" />. Jedoch finde ich die lib/styles.css nicht. Ist diese Lib ein Teil zur zur jquery?
Man, ich komme mir vor wie ein Anfänger. |
 http://docs.jquery.com/Downloading_jQuery#Download_jQuery
Das solltest du schon runterladen und dann einbinden entsprechend (Pfad abändern).
|
|
| |
|
|
pixelpapst303
Dabei seit: 06.07.2006
Ort: hamburg
Alter: 50
Geschlecht:
|
Verfasst Di 12.05.2009 08:48
Titel
|
|
|
| Townboy hat geschrieben: |
Du hast einen Container <div id="scrollContainer" style="position: relative"> und <div id="innerScrollContainer" style="position: absolute">. Kann es sein, dass die Funktion nur mit {Position: absolute;} funktioniert?
...
Ich habe den <link rel="stylesheet" type="text/css" href="lib/styles.css" />. Jedoch finde ich die lib/styles.css nicht. Ist diese Lib ein Teil zur zur jquery? |
1. ja, der innere container muss absolute sein. der äußere ist relative. somit kannst du ihn überall auf deiner seite einbinden, denn "absolute" verhält sich "relative" zum letzten absoluten oder relativen element
2. das eingebundene style-sheet lösch einfach. das ist ne altlast durch copy-paste. dieses style-sheet existiert nicht mal und wird somit auch nicht benötigt. dass du jquery aber runterladen und einbinden musst ist natürlich ausschlaggebend. dann sollte es auch klappen
Zuletzt bearbeitet von pixelpapst303 am Di 12.05.2009 08:49, insgesamt 1-mal bearbeitet
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
PDF Einbinden?
[css] map in background-img einbinden
Flash in PDF einbinden
Einbinden von CuteNews
Flash einbinden
Schriften einbinden in CSS
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|
