mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 19.04.2024 10:15 Benutzername: Passwort: Auto-Login

Thema: Scrollen animiert HElllppppp :( vom 03.07.2012


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> Scrollen animiert HElllppppp :(
Autor Nachricht
JoeMelRamos
Threadersteller

Dabei seit: 11.02.2012
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Di 03.07.2012 20:50
Titel

Scrollen animiert HElllppppp :(

Antworten mit Zitat Zum Seitenanfang

Hey Leutz!

Versuche seit genau 3 stunden diese Funktion. Klickt man oben auf dem Menü einen Link, so wird
automatisch runtergescrollt. Mache das mit jQuery (animate). Bin dankbar für jede Hilfe.

und hier meine Codes ^^

html
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=UTF-8" />
<title>Portfolio</title>
 <link rel="stylesheet" type="text/css" href="style.css" />
 <script type="text/javascript" src="jquery-1.7.1.min.js">
 </script>
 <script type="text/javascript" src="jQuery.js">
 </script>
</head>


<body>

 <div id="normal">
 <div id="navigation">
 <table width="100%" border="0" cellspacing="2" cellpadding="0">
  <tr>
    <td><a href="#haus">Haus</a></td>
    <td><a href="#person">Person</a></td>
    <td><a href="#arbeit">Arbeit</a></td>
    <td><a href="#treffen">Treffen</a></td>
    <td><a href="#recht">Recht</a></td>
  </tr>
</table>
</div>
 <div id="eltern">
 
 <div id="eins"></div>
 
 <div id="top"><a href=""><img src="links.gif" width="50" height="50" /></a></div>
 
  <div id="haus">HAUS</div>
 
  <div id="person">PERSON</div>
 
  <div id="arbeit">ARBEIT</div>
 
  <div id="treffen">TREFFEN</div>
 
  <div id="recht2">RECHT</div>
 
  <div id="recht"><table width="100%" border="0" cellspacing="2" cellpadding="0">
  <tr>
    <td>Impressum</td>
    <td>Kontakt</td>
    <td>Keine Ahnung</td>
  </tr>
</table>
</div>
 
  <div id="unten"></div>
 
 </div>

</div>

     
 <div id="bw-scaling-background">   
      <div>
      <table cellpadding="0" cellspacing="0">
         <tbody>
            <tr>
               <td>
                  <img src="kaffee.jpg">
               </td>
            </tr>
         </tbody>
   </table>
   </div>
   
</div>
</body>
</html>



css
Code:

* { margin: 0; padding: 0; }
html, body, #bw-scaling-background, #bw-scaling-background table, #bw-scaling-background td { height:100%; width:100%; overflow:hidden; }
#bw-scaling-background { z-index: 0;}
#bw-scaling-background div { height:200%; left:-50%; position:absolute; top:-50%; width:200%; }
#bw-scaling-background td { text-align:center; vertical-align:middle; }
#bw-scaling-background img { margin:0 auto; min-height:50%; min-width:50%; }

#normal{ position:absolute; top:0; left:0; z-index:70; overflow:auto; width:100%; height:100%}


#navigation{position:fixed;
top:0px;
width:100%;
height:60px;
color:white;
text-align:center;
padding:16px;
z-index:100;
font-family:Verdana, Geneva, sans-serif;}


#eltern{position:absolute;
width:100%;
height:5200px;
backgound-color: black;}


#eins{position:fixed;
width:100%;
height:60px;
background-color:#CC3333;
z-index:71;}

#haus{
   position:absolute;
   top:800px;
   width:100%;
   height:500px;
   background-color:#CC3333;
   font-family:Verdana, Geneva, sans-serif;
   font-size:20px;
   text-align:center;
   color:white;}
   
#person{position:absolute;
   top:1600px;
   width:100%;
   height:500px;
   background-color:#CC3333;
   font-family:Verdana, Geneva, sans-serif;
   font-size:20px;
   text-align:center;
   color:white;}
   
#arbeit{position:absolute;
   top:2400px;
   width:100%;
   height:500px;
   background-color:#CC3333;
   font-family:Verdana, Geneva, sans-serif;
   font-size:20px;
   text-align:center;
   color:white;}

#treffen{position:absolute;
   top:3200px;
   width:100%;
   height:500px;
   background-color:#CC3333;
   font-family:Verdana, Geneva, sans-serif;
   font-size:20px;
   text-align:center;
   color:white;}
   
#recht2{position:absolute;
   top:4000px;
   width:100%;
   height:500px;
   background-color:#CC3333;
   font-family:Verdana, Geneva, sans-serif;
   font-size:20px;
   text-align:center;
   color:white;}
   
#recht{position:absolute;
bottom:0px;
width:97%;
color:white;
text-align:center;
padding:16px;
z-index:80;
font-family:Verdana, Geneva, sans-serif;}

#top{position:absolute;
bottom:70px;
right:0px;}
   
#unten{position:absolute;
bottom:0px;
width:100%;
height:50px;
background-color:#CC3333;}


jQuery
Code:

$(function(){
   $(document).ready(function() {
   $('a[href*=#]').bind("click", function(event) {
      event.preventDefault();
      var ziel = $(this).attr("href");

      $('html,#normal').animate({
         scrollTop: $(ziel).offset().top
      }, 2000 , function (){location.hash = ziel;});
});
return false;
});

});




DANKE * Mal bisschen die Nase pudern... *


Zuletzt bearbeitet von choise am Di 03.07.2012 21:28, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Karlarsch

Dabei seit: 05.02.2007
Ort: -
Alter: 58
Geschlecht: Männlich
Verfasst Mi 04.07.2012 08:55
Titel

Antworten mit Zitat Zum Seitenanfang

Warum das Rad neu erfinden?

Gruß
Karl
  View user's profile Private Nachricht senden
Anzeige
Anzeige
eden1983

Dabei seit: 02.03.2012
Ort: Berlin
Alter: -
Geschlecht: Weiblich
Verfasst Mi 04.07.2012 09:04
Titel

Antworten mit Zitat Zum Seitenanfang

Habe diese Funktion verwendet: ( Leider habe ich den Autor dafür nicht mehr zur Hand - war aber zur Nutzung freigegeben *zum Glück* * Ich bin unwürdig * )

Diese Funktion sollte greifen, wenn du auf einen Anker verweist.

$(document).ready(function() {
function filterPath(string) {
return string
.replace(/^\//,'')
.replace(/(index|default).[a-zA-Z]{3,4}$/,'')
.replace(/\/$/,'');
}
var locationPath = filterPath(location.pathname);
var scrollElem = scrollableElement('html', 'body');

$('a[href*=#]').each(function() {
var thisPath = filterPath(this.pathname) || locationPath;
if ( locationPath == thisPath
&& (location.hostname == this.hostname || !this.hostname)
&& this.hash.replace(/#/,'') ) {
var $target = $(this.hash), target = this.hash;
if (target) {
var targetOffset = $target.offset().top;
$(this).click(function(event) {
event.preventDefault();
$(scrollElem).animate({scrollTop: targetOffset}, 2000, function() {
location.hash = target;
});
});
}
}
});

// use the first element that is "scrollable"
function scrollableElement(els) {
for (var i = 0, argLength = arguments.length; i <argLength; i++) {
var el = arguments[i],
$scrollElement = $(el);
if ($scrollElement.scrollTop()> 0) {
return el;
} else {
$scrollElement.scrollTop(1);
var isScrollable = $scrollElement.scrollTop()> 0;
$scrollElement.scrollTop(0);
if (isScrollable) {
return el;
}
}
}
return [];
}

});


Bin aber selbst noch nicht soweit, dass ich da etwas umschreiben könnte. ( >bringe mir gerade selbst die Materie bei * Such, Fiffi, such! * ).

Vielleicht hilft es dir * Ich bin müde... *
  View user's profile Private Nachricht senden
Alex

Dabei seit: 29.11.2005
Ort: Dortmund
Alter: 37
Geschlecht: Männlich
Verfasst Mi 04.07.2012 09:56
Titel

Antworten mit Zitat Zum Seitenanfang

http://demos.flesler.com/jquery/scrollTo/

Anschauen - Einbauen - Glücklich sein!
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
fyll

Dabei seit: 20.09.2003
Ort: Augsburg
Alter: 39
Geschlecht: Männlich
Verfasst Mi 04.07.2012 14:41
Titel

Re: Scrollen animiert HElllppppp :(

Antworten mit Zitat Zum Seitenanfang

JoeMelRamos hat geschrieben:
...
Versuche seit genau 3 stunden diese Funktion. Klickt man oben auf dem Menü einen Link, so wird
automatisch runtergescrollt. Mache das mit jQuery (animate). Bin dankbar für jede Hilfe.
...
nimm mal lieber position().top ^^
  View user's profile Private Nachricht senden
 
Ähnliche Themen [Suche] Countdownzähler -animiert-
eigener Bildschirmschoner, animiert
(Flash) animiert-wechelnde Bilder
PDF animiert blättern? Und pflegeleicht/einpflegbar?
CSS - DIV scrollen
CSS scrollen im div tag
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Programmierung


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.