 Willkommen auf dem Portal für Mediengestalter
|
|
|
| Autor |
Nachricht |
house baby
Threadersteller
Dabei seit: 18.12.2008
Ort: bei Forchheim
Alter: 36
Geschlecht: 
|
Verfasst Mo 08.06.2009 12:07
Titel Probleme beim Einbetten von Java Script in HTML-Datei |
  |
|
Im Voraus möchte ich gleich sagen, dass ich hoffe, das der Beitrag hier richtig ist. Ich war mir nicht sicher, ob ich ihn auch bei "Programmierung" mit reinschreiben kann, aber ich bleib jetzt einfach mal hier.
ALSO,
ich hab mal einen kleines Problem mit einem Javascript. Ich habe den Auftrag bekommen, für die Internetseite, die ich geschrieben habe, ein JS zu suchen, welche die Navigation mitscollen lässt. Damit sich quasi beim scrollen auf der Seite die Navigation immer mitbewegt. Dazu hab ich hier: http://www.jtricks.com/javascript/navigation/floating.html das passende Script gefunden. Ich habe diesen Code so eingefügt, wie ich es verstanden hatte. (Ich hab noch nie vorher mit Java Script gearbeitet).
Allerdings passiert nach dem zusammen bauen überhaupt nichts. Ich hab auch in allen möglichen Browsern geschaut, aber es geht weder im FF noch im IE noch im Safari, Opera oder Chrome.
Es ist durchaus möglich, dass ich irgendwas falsch verstanden habe, aber ich weiß nicht wo der Fehler liegen könnte, geschweige denn wo ich Fehler suchen sollte, da ich wie gesagt noch nie was mit Java Script gemacht habe.
Ich werde folgend mal den HTML-Code, das passende CSS und das JS hochladen (ich hab alles in externen Dateien geschrieben) und die passenden Bilder dazu hochladen.
Falls ihr Lust habt, einfach mal zusammen basteln und mir dann sagen, warum es nicht funzt.
Vielen vielen Dank im Voraus!!!
PS: Auch wenn euch Fehler im HTML oder CSS auffallen, einfach schreiben, ich bin blutiger Anfänger und gerne offen für Verbesserungsvorschläge!
HTML-Code:
| 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" />
<link rel="stylesheet" type="text/css" a href="test.css" />
<title>Zahntechnik Blank</title>
<script type="text/javascript" src="test.js"> </script>
</head>
<body>
<div id="area_01">
<div id="floatdiv">
<div id="area_11">
<div id="area_21">
<img src="logo.jpg" />
</div>
<div id="area_31">
<ul>
<li> <a href="file:///C|/Users/bk3/Desktop/index.html">Startseite</a> </li>
<li><a href="file:///C|/Users/bk3/Desktop/index.html">Seite 2</a></li>
<li><a href="file:///C|/Users/bk3/Desktop/index.html" class="active">Seite 3</a>
<ul>
<li><a href="#">Seite 3.1</a></li>
<li><a href="#" class="active_02">Seite 3.2</a></li>
</ul>
</li>
<li><a href="file:///C|/Users/bk3/Desktop/index.html">Seite 4</a></li>
<li><a href="file:///C|/Users/bk3/Desktop/index.html">Seite 5</a></li>
<li><a href="file:///C|/Users/bk3/Desktop/index.html">Seite 6</a></li>
</ul>
</div>
<div id="area_41">
<div class="top"><img src="file:///C|/Users/bk3/00_img/top.jpg" /></div>
<a href="mailto:kontakt@internet.de">E-Mail an uns</a>
<p>Tel. 09182 / 73 64-5</p>
</div>
</div>
</div>
<div id="area_51">
<div id="area_61">
<h1>Hier steht die erste Überschrift</h1>
<p>Sie erinnern sich. Der Blindtext-Fall im vorigen Jahr. Nun will
Karl noch nach Canossa. Und Claudia heiratet zur Busse
Copperfield. Jeden Morgen entzünden sie eine Kerze.
Jeden Nachmittag ist eine Runde Rosen fällig . Zur Heiligen
Marie. Weil Karl mit dem Zopf der Claudia mit dem Smile
optisch nette Koran-Typo aufs Mieder stickt.</p>
<a href="file:///C|/Users/bk3/Desktop/index.html">Weiterführender Link</a>
<h2>Dies ist die zweite Überschrift - möglichst zweizeilig</h2>
<p>Sie erinnern sich. Der Blindtext-Fall im vorigen Jahr. Nun will
Karl noch nach Canossa. Und Claudia heiratet zur Busse
Copperfield. Jeden Morgen entzünden sie eine Kerze.
Jeden Nachmittag ist eine Runde Rosen fällig. Zur Heiligen
Marie. Weil Karl mit dem Zopf der Claudia mit dem Smile
optisch nette Koran-Typo aufs Mieder stickt. Sie erinnern sich.
Der Blindtext-Fall im vorigen Jahr. Nun will Karl noch nach
Canossa. Und Claudia heiratet zur Busse Copperfield. Jeden
Morgen entzünden sie eine Kerze. </p>
<p>Jeden Nachmittag ist eine Runde Rosen fällig. Zur Heiligen
Marie. Weil Karl mit dem Zopf der Claudia mit dem Smile
optisch nette Koran-Typo aufs Mieder stickt. </p>
<a href="file:///C|/Users/bk3/Desktop/index.html">Lesen Sie hier mehr dazu</a>
<h2>Das wird die dritte Überschrift sein</h2>
<p>Sie erinnern sich. Der Blindtext-Fall im vorigen Jahr. Nun will
Karl noch nach Canossa. Und Claudia heiratet zur Busse
Copperfield. Jeden Morgen entzünden sie eine Kerze.
Jeden Nachmittag ist eine Runde Rosen fällig. Zur Heiligen
Marie. Weil Karl mit dem Zopf der Claudia mit dem Smile
optisch nette Koran-Typo aufs Mieder stickt.</p>
<a href="file:///C|/Users/bk3/Desktop/index.html">Weiterführender Link</a>
<h2>Auch die vierte Überschrift darf nicht fehlen</h2>
<p>Sie erinnern sich. Der Blindtext-Fall im vorigen Jahr. Nun will
Karl noch nach Canossa. Und Claudia heiratet zur Busse
Copperfield. Jeden Morgen entzünden sie eine Kerze.
Jeden Nachmittag ist eine Runde Rosen fällig. Zur Heiligen
Marie. Weil Karl mit dem Zopf der Claudia mit dem Smile
optisch nette Koran-Typo aufs Mieder stickt. Sie erinnern sich.
Der Blindtext-Fall im vorigen Jahr. Nun will Karl noch nach
Canossa. Und Claudia heiratet zur Busse Copperfield. Jeden
Morgen entzünden sie eine Kerze. </p>
<p>Jeden Nachmittag ist eine Runde Rosen fällig. Zur Heiligen
Marie. Weil Karl mit dem Zopf der Claudia mit dem Smile
optisch nette Koran-Typo aufs Mieder stickt. </p>
<a href="file:///C|/Users/bk3/Desktop/index.html">Lesen Sie hier mehr dazu</a>
<h2>Langsam wirds langweilig - mit Nummer fünf</h2>
<p>Sie erinnern sich. Der Blindtext-Fall im vorigen Jahr. Nun will
Karl noch nach Canossa. Und Claudia heiratet zur Busse
Copperfield. Jeden Morgen entzünden sie eine Kerze.
Jeden Nachmittag ist eine Runde Rosen fällig. Zur Heiligen
Marie. Weil Karl mit dem Zopf der Claudia mit dem Smile
optisch nette Koran-Typo aufs Mieder stickt.</p>
<a href="file:///C|/Users/bk3/Desktop/index.html">Weiterführender Link</a>
<h2>Aber mit der 6 ist es geschafft!</h2>
<p>Sie erinnern sich. Der Blindtext-Fall im vorigen Jahr. Nun will
Karl noch nach Canossa. Und Claudia heiratet zur Busse
Copperfield. Jeden Morgen entzünden sie eine Kerze.
Jeden Nachmittag ist eine Runde Rosen fällig. Zur Heiligen
Marie. Weil Karl mit dem Zopf der Claudia mit dem Smile
optisch nette Koran-Typo aufs Mieder stickt. Sie erinnern sich.
Der Blindtext-Fall im vorigen Jahr. Nun will Karl noch nach
Canossa. Und Claudia heiratet zur Busse Copperfield. Jeden
Morgen entzünden sie eine Kerze. </p>
<p>Jeden Nachmittag ist eine Runde Rosen fällig. Zur Heiligen
Marie. Weil Karl mit dem Zopf der Claudia mit dem Smile
optisch nette Koran-Typo aufs Mieder stickt. </p>
<a href="file:///C|/Users/bk3/Desktop/index.html">Lesen Sie hier mehr dazu</a>
</div>
<div id="area_71">
<div class="images"><img src="beispielbild_03.jpg"/></div>
<div class="images"><img src="beispielbild_03.jpg" /></div>
<p>Bildunterschrift zum Bild, eine kurze<br/> hilfreiche Beschreibung der Abbildung </p>
<div class="images"><img src="beispielbild_03.jpg" /></div>
<a href="file:///C|/Users/bk3/Desktop/index.html">weiterführender Link</a>
<div class="images"><img src="beispielbild_03.jpg" /></div>
<p>Bildunterschrift zum Bild, eine kurze<br/> hilfreiche Beschreibung der Abbildung </p>
</div>
</div>
</div>
</body>
</html> |
CSS:
| Code: | @charset "utf-8";
/* CSS Document */
/*Start Allg. Definitionen*/
* {
margin:0;
padding:0;
}
body {
background-image:url(../00_img/hintergrund_neu.jpg);
background-attachment:fixed;
background-position:center;
background-position:top;
}
h1 {
font-family:"Georgia", Times New Roman, Times, serif;
font-size:24px;
color:#000;
margin-top:30px;
}
h2 {
font-family:"Georgia", Times New Roman, Times, serif;
font-size:18px;
color:#025496;
margin-top:15px;
}
p {
font-family:"Arial", Helvetica, sans-serif;
font-size:12px;
color:#000;
line-height:18px;
margin-top:10px;
margin-bottom:10px;
}
a:link {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
line-height:18px;
color:#000;
}
a:hover {
color:#000;
}
a:visited {
color:#000;
}
/*Ende Allg. Definitionen*/
/*Start DIV-Container*/
#area_01 {
position:relative;
width:900px;
margin-left:auto;
margin-right:auto;
}
#floatdiv {
position:absolute;
width:285px;height:580px;
border:2px solid #2266AA;
}
#area_11 {
position:relative;
width:285px;
float:left;
}
#area_21 {
position:relative;
width:230px;
background-image:url(Testreich/logo.jpg);
}
/*Start Navigation*/
#area_31 {
position:relative;
width:190px;
}
#area_31 ul {
list-style:none;
}
#area_31 ul li {
background-image:url(navi.jpg);
line-height:26px;
heigth:26px;
font-family:"Arial", Helvetica, sans-serif;
text-align:right;
}
#area_31 ul li a {
text-decoration:none;
padding-left:20px;
font-size:16px;
}
#area_31 ul li a:link {
color:#000;
}
#area_31 ul li a:hover {
color:#025496;
}
#area_31 ul li a:focus {
color:#025496;
}
#area_31 .active {
color:#025496;
}
#area_31 ul li ul li {
font-size:16px;
background-image:url(navi_02.jpg);
background-repeat:repeat-y;
line-height:27px;
height:27px;
}
#area_31 ul li ul li a:link {
text-decoration:none;
color:#a3a3a3;
}
#area_31 ul li ul li a:hover {
color:#025496;
}
#area_31 .active_02 {
color:#025496;
}
/*Ende Navigation*/
/*Start Schnellkontakt*/
#area_41 {
position:relative;
width:190px;
height:50px;
background-image:url(kontakt.jpg);
background-repeat:repeat-y;
margin-top:15px;
font-family:"Arial", Helvetica, sans-serif;
text-align:left;
list-style:none;
}
#area_41 .top {
position:absolute;
float:right;
margin-left:260px;
}
#area_41 a {
text-decoration:none;
font-size:16px;
padding-left:92px;
}
#area_41 a:link {
color:#025496;
}
#area_41 a:hover {
color:#000;
}
#area_41 p {
font-family:"Arial", Helvetica, sans-serif;
text-align:left;
padding-left:48px;
font-size:16px;
color:#025496;
}
/*Ende Schnellkontakt*/
#area_51 {
position:relative;
width:615px;
float:right;
}
#area_51 a {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
line-height:18px;
color:#7a391d;
}
#area_51 a:hover {
color:#000;
}
#area_61 {
position:relative;
float:left;
width:300px;
margin-left:15px;
}
#area_71 {
position:relative;
float:right;
margin-right:12px;
}
.images {
margin-top:30px;
margin-bottom:10px;
}
#area_71 p {
font-size:10px;
color:#818181;
line-height:13px;
}
/*Ende DIV-Container*/
|
Java Script:
| Code: |
// JavaScript Document
<script type="text/javascript"><!--
/* Script by: www.jtricks.com
* Version: 20071127
* Latest version:
* www.jtricks.com/javascript/navigation/fixed_menu.html
*/
fixedMenuId = 'floatdiv';
var fixedMenu =
{
hasInner: typeof(window.innerWidth) == 'number',
hasElement: document.documentElement != null
&& document.documentElement.clientWidth,
menu: document.getElementById
? document.getElementById(fixedMenuId)
: document.all
? document.all[fixedMenuId]
: document.layers[fixedMenuId]
};
fixedMenu.computeShifts = function()
{
fixedMenu.shiftX = fixedMenu.hasInner
? pageXOffset
: fixedMenu.hasElement
? document.documentElement.scrollLeft
: document.body.scrollLeft;
if (fixedMenu.targetLeft > 0)
fixedMenu.shiftX += fixedMenu.targetLeft;
else
{
fixedMenu.shiftX +=
(fixedMenu.hasElement
? document.documentElement.clientWidth
: fixedMenu.hasInner
? window.innerWidth - 20
: document.body.clientWidth)
- fixedMenu.targetRight
- fixedMenu.menu.offsetWidth;
}
fixedMenu.shiftY = fixedMenu.hasInner
? pageYOffset
: fixedMenu.hasElement
? document.documentElement.scrollTop
: document.body.scrollTop;
if (fixedMenu.targetTop > 0)
fixedMenu.shiftY += fixedMenu.targetTop;
else
{
fixedMenu.shiftY +=
(fixedMenu.hasElement
? document.documentElement.clientHeight
: fixedMenu.hasInner
? window.innerHeight - 20
: document.body.clientHeight)
- fixedMenu.targetBottom
- fixedMenu.menu.offsetHeight;
}
};
fixedMenu.moveMenu = function()
{
fixedMenu.computeShifts();
if (fixedMenu.currentX != fixedMenu.shiftX
|| fixedMenu.currentY != fixedMenu.shiftY)
{
fixedMenu.currentX = fixedMenu.shiftX;
fixedMenu.currentY = fixedMenu.shiftY;
if (document.layers)
{
fixedMenu.menu.left = fixedMenu.currentX;
fixedMenu.menu.top = fixedMenu.currentY;
}
else
{
fixedMenu.menu.style.left = fixedMenu.currentX + 'px';
fixedMenu.menu.style.top = fixedMenu.currentY + 'px';
}
}
fixedMenu.menu.style.right = '';
fixedMenu.menu.style.bottom = '';
};
fixedMenu.floatMenu = function()
{
fixedMenu.moveMenu();
setTimeout('fixedMenu.floatMenu()', 20);
};
// addEvent designed by Aaron Moore
fixedMenu.addEvent = function(element, listener, handler)
{
if(typeof element[listener] != 'function' ||
typeof element[listener + '_num'] == 'undefined')
{
element[listener + '_num'] = 0;
if (typeof element[listener] == 'function')
{
element[listener + 0] = element[listener];
element[listener + '_num']++;
}
element[listener] = function(e)
{
var r = true;
e = (e) ? e : window.event;
for(var i = 0; i < element[listener + '_num']; i++)
if(element[listener + i](e) === false)
r = false;
return r;
}
}
//if handler is not already stored, assign it
for(var i = 0; i < element[listener + '_num']; i++)
if(element[listener + i] == handler)
return;
element[listener + element[listener + '_num']] = handler;
element[listener + '_num']++;
};
fixedMenu.supportsFixed = function()
{
var testDiv = document.createElement("div");
testDiv.id = "testingPositionFixed";
testDiv.style.position = "fixed";
testDiv.style.top = "0px";
testDiv.style.right = "0px";
document.body.appendChild(testDiv);
var offset = 1;
if (typeof testDiv.offsetTop == "number"
&& testDiv.offsetTop != null
&& testDiv.offsetTop != "undefined")
{
offset = parseInt(testDiv.offsetTop);
}
if (offset == 0)
{
return true;
}
return false;
};
fixedMenu.init = function()
{
if (fixedMenu.supportsFixed())
fixedMenu.menu.style.position = "fixed";
else
{
var ob =
document.layers
? fixedMenu.menu
: fixedMenu.menu.style;
fixedMenu.targetLeft = parseInt(ob.left);
fixedMenu.targetTop = parseInt(ob.top);
fixedMenu.targetRight = parseInt(ob.right);
fixedMenu.targetBottom = parseInt(ob.bottom);
if (document.layers)
{
menu.left = 0;
menu.top = 0;
}
fixedMenu.addEvent(window, 'onscroll', fixedMenu.moveMenu);
fixedMenu.floatMenu();
}
};
fixedMenu.addEvent(window, 'onload', fixedMenu.init);
//--></script> |
Zuletzt bearbeitet von house baby am Mo 08.06.2009 12:09, insgesamt 1-mal bearbeitet
|
|
| |
  |
 |
zweitaccount
Dabei seit: 25.01.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mo 08.06.2009 12:55
Titel
|
|
|
Das Script unterstützt auch Browser von annodazumal.
Wenn Dir die älteren Browser inkl. dem IE6 aber wurscht
wären, könntest Du einfach schreiben:
| Code: | #floatdiv {
position:fixed;
width:285px;height:580px;
border:2px solid #2266AA;
} |
also position:fixed; anstatt position:absolute. Damit hätte
es sich schon. Für IE6-User noch zusätzlichen aufwand
zu treiben, damit sie nicht merken mit welchenem Drecks-
browser sie unterwegs sind, ist ja quasi kontraproduktiv. 
Falls es Dir nicht wursch ist, gehört das fixedMenu.menu
erst beim init gefüllt, weil das div ja vorher noch gar nicht
da ist. Also oben raus:
| Code: | var fixedMenu =
{
hasInner: typeof(window.innerWidth) == 'number',
hasElement: document.documentElement != null
&& document.documentElement.clientWidth,
menu: null
}; |
und unten rein:
| Code: | fixedMenu.init = function()
{
fixedMenu.menu = document.getElementById ? document.getElementById(fixedMenuId) : document.all ? document.all[fixedMenuId] : document.layers[fixedMenuId];
... weiter wie gehabt ....
|
Wenn Du dein Javascript via <script type="text/javascript" src="test.js"></script>
lädst, dann hat das hier am Anfang: | Code: | | <script type="text/javascript"><!-- |
und das hier am Ende:
nichts darin zu suchen.
|
|
| |
|
|
|
Anzeige
|
|
|
house baby
Threadersteller
Dabei seit: 18.12.2008
Ort: bei Forchheim
Alter: 36
Geschlecht:
|
Verfasst Mo 08.06.2009 13:56
Titel
|
|
|
ahhh danke schön. hätte nicht gedacht, das es doch nur an so einer kleinigkeit lag. vielen vielen dank!!!  und zum thema IE6 -> wayne, also leute, die den noch benutzen, auf die kann ich echt keine rücksicht nehmen, ich bin schon genug damit beschäftigt, dass alles andere funzt.
also danke nochmal!
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Java Script in HTML einbinden.
Probleme mit Java Script
html-befehl bzw. java-script gesucht
JAVA SCRIPT bild über ne html seite erscheinen lassen?
HTML in Javascript Datei einbetten
[java-script]rollover
|
|
|
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.
|
|
