Javaskript im Header

Lefdi

Hallo,

ich möchte in meinem Header ein kleines Zusatzbild einbauen was ja auch nicht das Problem ist.
Siehe http://www.rund-ums-rad.info (Bild "Wir sind Mountainbiker")

Nun habe ich im Netz ein Javaskript gefunden, wo nach 5 Sekunden das Bild ausgeblendet werden kann.
Wenn ich diesen Code aber in der header.php einbaue, klappt das Ganze nicht.

Hier mal der Code:

Code

<script src="P91Fadeout.js" type="text/javascript"></script>
<script type="text/javascript">
// Erläuterung:
// window.setTimeout("P91Fadeout('DIV-ID', GESCHWINDIGKEIT_MILISEK)", TIMER_MILISEK);
window.setTimeout("P91Fadeout('headerimg', 2000)", 5000);
</script>

So wie auf der Testseite http://html.rund-ums-rad.info/ sollte es dann klappen, tut es aber nicht.

Kann es sein, dass Javacode im Header ignoriert wird....???

Grüße

Lefdi

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

spickzettel

HTML

<script src="P91Fadeout.js" type="text/javascript"></script>

Der Pfad zur JS-Datei stimmt nicht. Am besten geht es mit absoluten Pfaden. Wenn die Datei im Themeverzeichnis liegt:

HTML

<script src="<?php bloginfo('stylesheet_directory'); ?>/P91Fadeout.js" type="text/javascript"></script>

mfitzen

EDIT: spickzettel war schneller.

Lefdi

oh man,

da hätte ich auch selber draufkommen müssen.....man sieht mal wieder den Wald vor lauter Bäumen nicht mehr.

Jungs, ihr seid einfach super....vielen Dank

Ergebnis hier: http://www.rund-ums-rad.info

Merci & Grüße

Lefdi

EDIT:
Muss doch nochmal einhacken.
Gibt es ne Möglichkeit, dass der Header nicht jedesmal neu geladen wird, wenn ich einen Artikel aufrufe....??
Jetzt wird das Bild dann immer wieder neu aufgerufen...ist ja eigentlich egal, aber wenn es auch anders geht, wäre das Klasse

Lefdi

mfitzen

Zitat von Lefdi

Gibt es ne Möglichkeit, dass der Header nicht jedesmal neu geladen wird, wenn ich einen Artikel aufrufe....??

Ich denke nicht, dass das ohne den Einsatz von Frames oder Flash möglich ist.

nepf

mit einer if (is_page("home")) Bedingung könntest Du immerhin schon mal dafür sorgen, dass Du den Effekt nur auf der Home und nicht auf allen anderen Seiten und Artikeln hast.

Wenn der Effekt auch auf der home nur beim allerersten Aufruf (pro Sitzung) angewendet werden soll, würde ich das über ein cookie lösen.

Lefdi

Hi nepf,

und wie funktioniert das mit der if is Abfrage...??

Grüße

Chaote

Hab mir mal das Script geladen und versucht dies mal zu implementieren.
Dabei scheiden sich irgendwann die Geister und ich hänge in der Luft und weiß leider nicht weiter.
Drum bitte ich um eure Hilfe.

Dieses gesamten Daten habe ich in mein Style geschoben und in der header.php dies eingetragen

PHP

<script src="<?php bloginfo('stylesheet_directory'); ?>/P91Fadeout.js" type="text/javascript"></script>
 <script type="text/javascript">
 // Erläuterung:
 // window.setTimeout("P91Fadeout('DIV-ID', GESCHWINDIGKEIT_MILISEK)", TIMER_MILISEK);
 window.setTimeout("P91Fadeout('headerimg', 2000)", 5000);
 </script>

ein weiterer Text so wie dies ungefähr

Code

<div id="header">
 <div id="headerimg">
 <span class="kampagne"><a title="Test"  href="http://www.media-rs.de" target="_blank"><img  src="http://darksilence.ath.cx/medi/wp-content/themes/Media_New_Style_1.0/images/banner_media-rs.jpg"  width="199px" height="299px" alt="" title="Media-RS / Die Agentur mit  Herz" /></a></span>
 </div>

gehört darunter in den body????

nun verschiebt sich mein komplettes Theme nach unten und das Bild wird nur in einem kleinen Teil, am linken Bildschirmrand angezeigt.

Aber ich möchte dies gerne so haben, wie es auf der Page vom Threadersteller ist.
Könntet Ihr mir da bitte weiter helfen?

"Läuft versuchsweise auf einer Testpage, bevor es in das orignal eingetragen wird"

Vielen Dank im Voraus

Gruß

Chaote

Lefdi

Hi Chaote,

zunächst brauchst du ja das Skript selber, also die .js Datei.
Das Skript kannst du hier runterladen http://www.pa-s.de/php/script-P91…sblenden-68.php

Dann kommt dieser Codeschnipsel in die header.php VOR </head>

PHP

<script src="<?php bloginfo('stylesheet_directory'); ?>/P91Fadeout.js" type="text/javascript"></script> 
<script type="text/javascript">
// Erläuterung:
// window.setTimeout("P91Fadeout('DIV-ID', GESCHWINDIGKEIT_MILISEK)", TIMER_MILISEK);
window.setTimeout("P91Fadeout('headerimg', 2000)", 10000);
</script>

Weiter kommt der folgende Codeschnipsel ebenfalls in die header.php aber NACH <body>

PHP

<div id="headerimg">


<span class="kampagne"><a title="Wir sind Mountainbiker" href="http://www.wir-sind-mountainbiker.de/" target="_blank"><img src="<?php bloginfo('template_directory'); ?>/kampagne/bild-3.gif" width="250px" height="157px" alt="" title="Wir sind Mountainbiker" /></a></span>
</div>

Du darfst aber nicht vergessen, dass class="kampagne" und id="headerimg" ja Angaben aus meiner style.css sind.

Probier es mal aus...falls es nicht klappt, einfach posten und am besten den Link zu deiner Testpage mit angeben.

Lefdi

Chaote

Hi

Die Daten habe ich geladen, tschuldigung etwas blöd formuliert von mir.

Yepp, dies habe ich aus deinem Quelltext genommen (schande über mein Haupt)

PHP

<div id="headerimg">  <span class="kampagne"><a title="Wir sind Mountainbiker" href="http://www.wir-sind-mountainbiker.de/" target="_blank"><img src="<?php bloginfo('template_directory'); ?>/kampagne/bild-3.gif" width="250px" height="157px" alt="" title="Wir sind Mountainbiker" /></a></span> </div>

dann habe ich eigentlich soweit alles richtig gemacht gehabt.

Zur Testpage gehts da lang, aber bitte nicht wundern, die schaut älter aus, als die Hauptpage

Lefdi

Servus,

ist doch kein Problem mit dem Code ;-)

Kurze Frage nur zu deiner Testpage.

Wo soll denn nun das Bild ausgeblendet werden....???

Lefdi

Chaote

Immerhin schaut es schonmal anderst aus, und es wird meine Page nicht mehr nach unten verschoben (header).

Ich hätte es gerne so gehabt, wie auf der Mountainbike Seite von euch.

Hab bloß mal einen Banner von mir genommen.

Gerne kann ich auch mal den alten Zusatnd wie ich es vorher hatte herstellen, dann schaut es verschoben aus, aber funktioniert zu 50%.

(Ich mach mal meinen alten Code mit rein)

Lefdi

Hast du in deiner style.css auch die class="kampagne" drin....????

Poste am besten mal deine header.php hier

Chaote

Ein Text in der header.php ist doppelt (alter Versuch und neuer Versuch)

PHP

<!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" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<title>Media - RS</title>
<meta name="description" content="Der Markt f?r Produkte - Dienstleistungen wird immer dichter, deshalb wird es immer schwieriger sich von Mitbewerbern abzuheben. Sich klar abzuheben, ist f?r Unternehmer und Jungunternehmer wichtig - um Aufmerksamkeit zu erlangen. Neben Ihrer guten Gesch?ftsidee ist dabei die visuelle Wahrnehmung Ihres Unternehmens von entscheidender Bedeutung. Eine klare und ansprechende Gestaltung, Ihrer Unternehmenskommmunikation ?berzeugt - schafft Vertrauen - Wiedererkennungswert und Seri?sit?t.">
<meta name="keywords" content="koenigsbrunn, augsburg, bayern, werbung, wordpress, joomla, logo, handel, individuell, industrie, werbemittel, druck, flyer, visitenkarte, visitenkarten, einzigartig, einmalig, streuartikel, wurfzettel, werbemittel, werbung, promotion, banner, zuarbeit, plakat, plakate, briefpapier, gesch?ftsausstattung, preise, preise, hohes niveau, pr?zise, arbeit, leistung, dienstleistung, schnelligkeit, kunden orientiert ">
<meta name="page-type" content="Dienstleistung">
<meta name="page-topic" content="Media-RS / Die Werbeagentur mit Herz und Verstand">
<meta http-equiv="robots" content="follow, all">
<meta name="siteinfo" content="http://www.media-rs.de/robots.txt">
<meta name="author" content="Webmaster / Media - RS">
<meta name="publisher" content="Media-RS">
<meta name="copyright" content="Media-RS">
<meta name="language" content="german,deutsch,DE,AT,CH,US">
<meta http-equiv="content-language" content="de"/>
<meta name="audience" content="Alle">
<meta name="revisit-after" content="3 days">
<meta http-equiv="expire" content="0">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">


<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title><?php if (is_home () ) { bloginfo('name'); } elseif ( is_category() ) { single_cat_title(); echo ' - ' ; bloginfo('name'); }
 elseif (is_single() ) { single_post_title(); }
 elseif (is_page() ) { bloginfo('name'); echo ': '; single_post_title(); }
 else { wp_title('',true); } ?></title>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/script.js"></script>
<link rel="shortcut icon" href="http://media-rs.de/wp-content/themes/Media_New_Style_1.0/animated_favicon1.gif" type="image/gif" /> 
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<!--[if IE 6]><link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.ie6.css" type="text/css" media="screen" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.ie7.css" type="text/css" media="screen" /><![endif]-->
<link rel="alternate" type="application/rss+xml" title="<?php printf(__('%s RSS Feed', 'kubrick'), get_bloginfo('name')); ?>" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="<?php printf(__('%s Atom Feed', 'kubrick'), get_bloginfo('name')); ?>" href="<?php bloginfo('atom_url'); ?>" /> 
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_head(); ?>
<script src="<?php bloginfo('stylesheet_directory'); ?>/P91Fadeout.js" type="text/javascript"></script>
<script type="text/javascript">
// Erläuterung:
// window.setTimeout("P91Fadeout('DIV-ID', GESCHWINDIGKEIT_MILISEK)", TIMER_MILISEK);
window.setTimeout("P91Fadeout('headerimg', 2000)", 5000);
</script>
</head>
<body>
<div id="header">
<div id="headerimg">
<span class="kampagne"><a title="Wir sind Tester" href="http://www.media-rs.de" target="_blank"><img src="http://darksilence.ath.cx/medi/wp-content/themes/Media_New_Style_1.0/images/banner_media-rs.jpg" width="199px" height="299px" alt="" title="Banner Media-RS" /></a></span>
</div>


<div id="headerimg">


<span class="kampagne"><a title="Wir sind Tester" href="http://www.media-rs.de/" target="_blank"><img src="<?php bloginfo('template_directory'); ?>http://darksilence.ath.cx/medi/wp-content/themes/Media_New_Style_1.0/images/banner_media-rs.jpg" width="199px" height="299px" alt="" title="Media-RS" /></a></span>
</div>


<div id="art-page-background-simple-gradient">
</div>
<div id="art-main">
<div class="art-Sheet">
    <div class="art-Sheet-tl"></div>
    <div class="art-Sheet-tr"></div>
    <div class="art-Sheet-bl"></div>
    <div class="art-Sheet-br"></div>
    <div class="art-Sheet-tc"></div>
    <div class="art-Sheet-bc"></div>
    <div class="art-Sheet-cl"></div>
    <div class="art-Sheet-cr"></div>
    <div class="art-Sheet-cc"></div>
    <div class="art-Sheet-body">
<div class="art-Header">
    <div class="art-Header-png"></div>
    <div class="art-Header-jpeg"></div>


</div>

Alles anzeigen

Jetzt weiß ich evtl. noch, durch deinen Denkanstoß, was ich vergessen habe. Habe nichts in der style.css angepasst.

Lefdi

Du hast da Einträge doppelt drin:

PHP

<div id="header">
<div id="headerimg">
<span class="kampagne"><a title="Wir sind Tester" href="http://www.media-rs.de" target="_blank"><img src="http://darksilence.ath.cx/medi/wp-content/themes/Media_New_Style_1.0/images/banner_media-rs.jpg" width="199px" height="299px" alt="" title="Banner Media-RS" /></a></span>
</div>


<div id="headerimg">


<span class="kampagne"><a title="Wir sind Tester" href="http://www.media-rs.de/" target="_blank"><img src="<?php bloginfo('template_directory'); ?>http://darksilence.ath.cx/medi/wp-content/themes/Media_New_Style_1.0/images/banner_media-rs.jpg" width="199px" height="299px" alt="" title="Media-RS" /></a></span>
</div>

Alles anzeigen

Dann solltest du noch prüfen, ob die folgenden Angaben auch in deiner style.css drin stehen:

id="header"
id="headerimg"
class="kampagne"

Ich denke mal id="header" müsstest du haben, da dies glaub nahezu bei jedem Theme drin ist.
"headerimg" müsste auch drin sein, weil sich das auf das Hintergrundbild bezieht.
Lediglich "kampagne" dürftest du nicht haben, da ich das selber in der style.css angelegt habe.

Mach mal die doppelten Einträge raus und entferne mal die <span class="kampagne">

Chaote

Die doppelten Einträge hatte ich mit absicht drin gelassen, damit man dies sehen kann auf der Testpage

Hört sich irgendwie blöd an, aber hab diese Einträge nicht.

id="header"
id="headerimg"
class="kampagne"

Kann Sie auch gerne von Hand eintragen, in der Hoffnung das es dann funktioniert ;)

Lefdi

Hm,

im Prinzip ist das ja bei meinem Theme so.

id="header" definiert bei mir die Größe des Headerbereiches
Darauf folgt die id="headerimg" in welcher das Bild hinterlegt ist.

Die span class="kampagne" liegt nun über dem "headerimg" also AUF dem Headerbild drauf.

Im Prinzip musst du nur bei deinem Template schauen, wo dein Headerbild definiert wird.
Hast du das gefunden, kommt gleich darauf der Eintrag für das Bild das verschwinden soll.

Ich poste dir hier mal die class="kampagne" die kannst ja mal in deine style.css übernehmen und anpassen

PHP

#headerimg .kampagne {


  float: right;


  position: absolute;


  right:950px;


  top:100px;


  z-index:1;


}

Alles anzeigen

Chaote

siehe da es funktioniert

verschwindet zwar abruppt, aber das kann man uach noch irgendwie hintüfteln

Bei mir wird das Header Bild so ausgegeben

PHP

div.art-Header-png
{
    position: absolute;
    z-index:-2;
    top: 0;
    left: 0;
    width: 988px;
    height: 250px;
    background-image: url('images/Header.png');
    background-repeat: no-repeat;
    background-position: left top;

Alles anzeigen

Schau es dir mal bitte an!

Wenn dies dann kpl. fertig ist, kommt auch ein anderes Bild zur Ansicht (dies ist nur Test)

Lefdi

Na prima....jetzt musst du es nur noch ausrichten....stell doch einfach mal an den Werten der Milisek rum.....denke du musste die Geschwindigkeit_Milisek etwas abändern...dann dürfte es passen :-)

Chaote

Ich sag mal Vielen Dank für deine Hilfe.

Meinen Fehler mit der style.css das ich diese anpassen muss, hatte ich total vergessen. Dazu habe ich auch wieder gelernt, das die id=header usw. doch bei jedem anderst ist.

Nochmals Vielen Dank für deine schnelle Hilfe.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Javaskript im Header

Jetzt mitmachen!