suchfeld im (onclick) header

schugga

hallöle,
ich habe mein suchfeld oben rechts im headerbild, was bisher gut funktionierte.
seit kurzem habe ich den header mit onclick befehl bestückt um eine einfachere navigation (zurück zur startseite) zu gewährleisten.
leider ist das suchfeld ja nun im klick-bereich und funzt nicht mehr.

ist es möglich einen teilbereich um das suchfeld herum nicht-klick-sensitiv zu machen?
habe schon per css einiges probiert, es aber bisher nicht geschafft.
würde das suchfeld nämlich gerne da oben lassen...
hat jemand ne idee?

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

telekommander

Zitat von schugga

ist es möglich einen teilbereich um das suchfeld herum nicht-klick-sensitiv zu machen?

Ist mir so nicht bekannt.
Allerdings funktioniert das schon, nur muss wirklich der Cursor exakt platziert werden, zumindest macht mein MOZ. dann kein reload deiner Seite.

Zitat von schugga

hat jemand ne idee?

Nicht wirklich, aber probier doch mal onclick gegen onfocus auszutauschen.
Könnte evtl. so funktionieren.
Also einfach mal antesten.

schugga

Zitat von telekommander

probier doch mal onclick gegen onfocus auszutauschen.
Könnte evtl. so funktionieren.
Also einfach mal antesten.

danke für den tipp, habe ich getestet. es lässt sich etwas ins suchfeld tippen und man gelangt auf die "suchergebnis seite".

allerdings ist der header nicht mehr aktiv anklickbar. es erscheint zwar die hand, aber es wird nicht zur startseite verlinkt (wie vorher).

war schon nah dran ;)
haste noch ne idee?

telekommander

Zitat von schugga

allerdings ist der header nicht mehr aktiv anklickbar. ( ... )

Stimmt. Schon merkwürdig. Offenbar können Moz. Browser mit einem onfocus-Event auf Elemente nix anfangen. Während ein IE das ohne zu zucken akzeptiert.

... gehe weiter grübeln.

schugga

hey du, ich habe auch schon den ganzen tag gegrübelt und sogar mein java script buch gelesen...naja versucht, das zu verstehen *lach*

habe nun das suchfeld einfach in die sidebar gepackt, unter dem kalender passt es ja auch ganz gut. alles andere war einfach zu kompliziert.
danke für's kopf zerbrechen.

falls du (oder jmd. anderes) doch noch ne lösung hat, immer her damit!

:)

telekommander

Zitat von schugga

falls du (oder jmd. anderes) doch noch ne lösung hat, immer her damit!

'Ne Lösung gäbe es schon. Nur wird die, wie du schon sagtest, etwas kompliziert.
Nach dem ich Google extrem vergewaltigt habe, war das einer der besten Treffer: http://www.ajax-scripting.de/artikel/das-event-modell
Punkt 3 ist da ganz interessant, und erklärt warum das so ist wie es ist.
Das heisst, das unterste Element mit einem onclick-Event hat oberste Priorität.
Alle anderen Elemente mit onclick-Event innerhalb dieses Elementes stehen hinten an.
Soweit alles klar ?

Als simple Lösung hätte ich noch den ondblclick-Event.
Nur, wie willst du deinen Besuchern klar machen das da ein Doppelklick gefordert ist ?!

spickzettel

Das Suchfeld muss ja nicht unbedingt im Header sein, um innerhalb des Headers angezeigt zu werden. Das folgende Beispiel funktioniert im neuesten Firefox, in Opera 8.52 und IE 6.0:

HTML

<div id="header" onclick="alert('Test');">
Headergrafik...</div>
<div id="suche">
      <form id="searchform" method="get" action="http://127.0.0.1/#">
    <p><input type="text" value="" name="s" id="s" size="15" alt="Suche" />
    <input type="submit" value="Suchen" id="submitbutton" /></p>
    </form>
</div>


<div id="main">
Haupttext...
</div>

Alles anzeigen

und folgende CSS-Datei:

Code

#header {width:100%;height:200px;background:yellow;}
#suche {position:absolute;top:50px;left:500px;padding:25px;background:red;}

schugga

telekommander: puhh, obwohl ich zwar etwas programmieren kann, ist mir das momentan (auch aus zeitgründen) doch zu viel ;)
Aber ich werde mich da noch mal reinlesen! Vielen Dank für den Link!!

Ja, das mit dem ondblclick-event hatte ich gestern auch in meinem schlauen Büchlein entdeckt, aber wie Du schon sagtest...wie soll ich meinen Besuchern das ver-klickern. Das wäre einfach zu benutzer-un-freundlich, denke ich.

spickzettel: danke für Deine Hilfe. Ich habe Deinen code ausprobiert, obwohl mein suchfeld code so aussah:

HTML

<div id="search">
	<form action="<?php bloginfo('url');?>/"  id="searchform" method="get">
		<div>
		<input type="text" size="15" class="searchfield" value="search" name="s" alt="search" onblur="if(this.value==' ')this.value='search';" 


onfocus="if(this.value=='search')this.value=' ';" />
		</div>
	</form>
	</div>

Ich möchte ja keinen extra Button "search" oder "go" haben, sondern das Wort "search" soll in dem Suchfeld bereits drinstehen und beim reinklicken verschwinden.
Ich weiß nicht, ob es an meinem search-code liegt, aber leider funzt auch diese Variante nicht (hab auch 'nur' IE 6.0, FF 1.5.0.6).
Wenn ich in das Suchfeld klicke, verhält es sich wie vorher: meine Seite lädt neu, um auf die Home page zurückzugehen.
Das mit Deinem alert-code-Schnipsel habe ich nicht verstanden, dennoch habe ich es ausprobiert. Leider öffnete sich nur eine Alertbox, aber es wurde nichts weiter ausgeführt. :confused:

Sehe auch, dass mein search code zwei Fehler bei der xhtml strict 1.0 validation macht...hat das evtl. was damit zu tun?
Bzw. wie beseitige ich die Fehler? Habe schon alles mögliche versucht...:|

telekommander

Zitat

Sehe auch, dass mein search code zwei Fehler bei der xhtml strict 1.0 validation macht...hat das evtl. was damit zu tun? (...)

Hm, kann da nix weltbewegendes entdecken, evtl. schon behoben ?

Zitat

Das mit Deinem alert-code-Schnipsel habe ich nicht verstanden (...)

Macht nüschtz. Spickzettel wollte bestimmt lediglich die Funktion testen bzw. zeigen.

Spickzettel's Codeschnipsel ist schon der richtige weg, allerdings gibt es garantiert Stress mit absoluter Positionierung. Ich denke da an deine Besucher die mit "Monster"-Auflösungen daherkommen. Also muss die Suchbox irgendwie anders dem Header untergejubelt werden.
Und so funktionierts:

HTML

<div id="masthead" onclick="location.href='http://blog.sugarbytes.de'" style="cursor:pointer;">
 <div class="description">
 </div>
</div>
<form action="<?php bloginfo('url');?>/" id="searchform" method="get">
  <p>
   <input style="padding: 1px;" type="text" size="18" class="searchfield" value="search" name="s" onblur="if(this.value==' ')this.value='search';" onfocus="if(this.value=='search')this.value=' ';" />
  </p>
</form>

etwas CSS:

Code

#searchform {
  position: absolute;
  margin-left: 550px;
  margin-top: -50px;
  padding: 10px;
}

Müsste direkt passen, vielleicht die Input(such)box aus der Sidebar vorher rausnehmen.
Jedenfalls ist so ein 10px (padding) nichtklicksensitiver Bereich um die Inputbox innerhalb des Headers entstanden. Evtl. die Margin-Werte noch exakt anpassen.

schugga

total happy jedoch weitere probleme

telekommander: Deine Lösung - die war's!!! :grin: Fantastisch!! Super lieben Dank :wink:

Habe es eben mal reingebastelt, allerdings die Werte etwas abgeändert, damit es oben rechts sitzt. Hat alles prima geklappt.

Leider habe ich gerade mein blog zerstört, indem ich versucht habe, den immer noch nicht xhtml 1.0 strict validen code valide zu machen. Es ist der verfixte code im header, ich bekomms einfach nicht hin. Von angefangen zwei Fehlern (den alten Fehlern) habe ich nun 4. Leider wird von meinem blog auch momentan nur der head angezeigt wenn man die seite lädt...:shock:
Ich sehe ja die Fehler, aber ich hatte ja vorher gar nichts verändert und weiß gar nicht woher die auf einmal kommen...

Hilfe...wie bekomm ich denn mein blog wieder zu sehen? :oops:

telekommander

Zitat von schugga

( ... ) wie bekomm ich denn mein blog wieder zu sehen? ( ... )

Hm, schwierig, wenn man so gar nix sieht.

Bei dem momentan sichtbaren wird lediglich ein fehlender Abschlusstag angemeckert. </div>
Wenn ich diesen Einfüge und denn leider fehlenden </body> + </html> Abschlusstag, ist auch im Validator als bestens.

Scheinbar fehlt aber weitaus mehr als "nur'n" Abschlusstag.
Eventuell 'n Backup vorhanden ?
Oder ein kpl. Theme wäre hilfreich. Irgendwo zufinden ?

schugga

abschlussworte

Besser spät als nie:

Mein Problem hat sich (längst) gelöst. Hatte ganz vergessen hier 'n feedback zu hinterlassen. Gehört sich ja so ;)
Der Dank gilt dem Herrn telekommander, der sich sehr nett und hilfsbereit einen halben Abend Zeit nahm, mein blog wieder in den Normalzustand zu bringen.

Vielen vielen Dank noch mal!!!!

P.S.: telekommander: falls Du es hier liest, ich habe nur noch 1 xhtml 1.0 strict Fehler, juchuu *g*

Willkommen! Melden Sie sich an oder registrieren Sie sich.

suchfeld im (onclick) header

Jetzt mitmachen!