script Google zoeken werkt niet meer.

Status
Niet open voor verdere reacties.
J

jorieke

Gebruiker
Lid geworden
7 okt 2010
Berichten
85
Hallo,

onderstaand script is gewijzigd, maar werkt nu niet meer.
Wie weet hoe ik dit weer aan het werken krijg.



<script language="JavaScript">
function SubmitGoogleSearch()
{
var q = document.getElementById("q");
if(q && q.value.length > 0)
{
var newPage = document.getElementById("newPage");
if(newPage)
{
var url = "http://www.google.com/search?q=" + q.value;
if(newPage.checked)
window.open(url);
else
document.location.href(url);
}
}
else
{
alert("Please enter one or more search words.");
}
}
</script>
<div onkeydown="JavaScript:if(event.keyCode==13) SubmitGoogleSearch();" nowrap><a href="http://www.google.com" target="_blank"><IMG SRC="/logo/google%20logo.gif" border="0" align="top" alt="Google Search"></a>
<br>
<INPUT id="q" size="24" maxlength="254">
<input type="submit" value="zoeken" /></td></tr>
 
Een toegankelijk zoekvenster!

Hoi Jorieke,
Zo te zien zitten er een paar gaten in het javascript.
  • In plaats van <script language="JavaScript"> moet het zijn: <script type="text/javascript">.
  • Het script doet het niet, want er staat in:
    document.location.href(url);
    Dat moet zijn:
    document.location.href=url;
  • Verder mikt het script op het kiezen tussen "openen op dezelfde pagina" en "openen in nieuw venster / nieuwe tab".
  • Het Google-resultaat komt met de huidige code altijd op dezelfde pagina (wat op zich prima is). Maar als een keuze de bedoeling is, moet er een checkbox toegevoegd worden die aangevinkt kan worden. Die is er niet in de html.
  • Maar als javascript uit staat, werkt dat niet. Bv. pure tekst-browsers (voor slechtzienden) en voorleesbrowsers (blinden) kennen geen javascript. Daarmee is het zoekvenster voor een deel van het publiek ontoegankelijk / onbruikbaar.
  • De submit-knop zit niet in een <form> dat vertelt wat er na het submitten moet gebeuren, en dan gebeurt er niets als je er op klikt.
Kortom, ook bij reparatie lijkt me dit script nogal onhandig.
Waar bezoekers waarschijnlijk meer aan hebben, is een zoekvenster dat gaat zoeken naar het opgegeven trefwoord in de site waar je op zit. Al of niet met de keus om op het hele web te gaan zoeken.
Dat kan zo:
Er wordt voldaan aan de voorwaarden om het zoekvenster ook toegankelijk ("accessible") te maken voor blinden, slechtzienden en mensen met minder motorische vaardigheden (zie bv. deze riedel). Wat het ook voor anderen gebruiksvriendelijker maakt!
  • Bv. het hele regeltje van de radio-buttons ("Zoek op deze site" / "Zoek op internet") is aanklikbaar, en niet alleen het minimale knopje zelf. Dat muist en klikt voor iedereen een stuk makkelijker en sneller.
  • Ook: als de bezoeker een groter lettertype heeft ingesteld, worden de letters in het zoekvenster-gebied ook groter (bij zoekvenstertjes zijn die vaak ten onrechte vastgeprikt op een altijd klein letterformaat).
  • In de html-volgorde staan de zinnetjes "Zoek op deze site" en "Zoek op internet" vóór de radio-buttons. Mensen met voorleesbrowsers weten dan wat de radio-button betekent die gaat volgen (anders moeten ze wel/niet ergens op klikken waar ze de betekenis niet van weten! - of eerst luisteren, en dan weer terugspoelen om te klikken).
    Maar op scherm staan de radio-buttons wel voorop: spelen met CSS!
  • Aan o.a. alle richtlijnen van de WCAG ("Web Content Accessibility Guidelines"; zowel prioriteit 1,2,3) is voldaan.
Als javascript uit staat, is er verder geen man/vrouw overboord: het javascript wordt hier alleen gebruikt om het zoekvakje te legen als je er iets op wilt gaan invullen (er staat voor de toegankelijkheid standaard in: "Geef zoekwoord...").
Voor javascript-bezoekers: service van de zaak! :)

Als variant het zoekvenstertje ronde hoekjes gegeven (voor de browsers die dat ondersteunen):
Met vriendelijke groet,
CSShunter
_________
PS: Eventueel zou er ook nog een optie voor openen op een nieuwe pagina aan vast geknoopt kunnen worden, maar dat is dan weer javascript-afhankelijk.
 
Laatst bewerkt:
Beste CSShunter,

Bedankt voor je antwoord.
Ik zal even iets meer info geven.
De zoekfunctie staat op een sharepoint- intranetsite en hoeft alleen te zoeken via google, dus niet op de eigen site zoeken.

Dit script heeft altijd gewerkt, maar onderin, is iets gewijzigd.
Inderdaad met de button of je op een nieuwe pagina wil zoeken.

Gr. Jorieke
 
Zoekvenster met optie voor openen in nieuw browservenster

Hoi Jorieke,
Aha, in dat geval moet het iets anders aangepakt worden:
  • Oude script & html opkalefateren.
  • Voor crossbrowser-gebruik "even" de css regelen.
  • Service-functie "vakje legen" toevoegen.
  • Toegankelijkheid in orde maken.
  • Aankruisvakje verbergen als javascript uit staat, want dan werkt het niet.
Naast de eerder genoemde makkes van het script kwam ik er al doende achter dat dit tegen een pop-up blokkade kan oplopen, als je na het aanvinken van "nieuw venster" en het dan intikken van een zoekwoord op de Enter-toets klikt (bij de submit-knop heb je er geen last van):

enter-pop-up-blokkade.png

Dat betekent:
  1. de gebruiker moet een extra handeling verrichten om de "pop-up" te zien,
  2. de gebruiker weet niet dat deze "pop-up" alleen het Google-resultaat is dat in een nieuw venster geopend wordt!
In mijn geval was het de automatische Firefox pup-up blokker, maar het kan ook in andere browsers gebeuren (afhankelijk van de settings), of het kan tegengehouden worden door een antivirus- of ander beveiligingsprogramma.
  • Eigenlijk heel logisch dat dit gebeurt: browsers en beveiligingsprogramma's zijn tegenwoordig zo wijs dat ze het signaal "er gaat een pop-up geopend worden als je een bepaalde toets indrukt" herkennen. Daarvan is door spammers en "kwaadwillenden" veelvuldig misbruik gemaakt: "onder" een doodnormale toetshandeling (kan bv. ook de pijltjesknop zijn) zet je een javascriptje dat op deze manier ongevraagd een nieuwe pagina gaat openen.
  • Nu is het zo, dat het herkennen van de toetsaanslag "Enter", die in het script gebruikt wordt, niet echt nodig is: als je in een zoekvenstertje op Enter klikt, gebeurt er hetzelfde als wanneer je op de submit-knop klikt.
  • En bij de submit-knop gaat het om één knop die doelbewust aangeklikt moet worden, zodat daar op dit moment geen pop-up alarm voor wordt afgegeven (kan in de toekomst anders komen te liggen!).
  • Afijn, het checken van de Enter-aanslag om het zoeken in gang te zetten is dus niet nodig, en kan uit het script geschrapt worden!
  • Maar helaas ... :confused:
  • Firefox trapt daar niet in, en behandelt de Enter toch als toetshandeling die geblokkeerd moet worden.
  • Dan zit er maar één ding op: de Enter-toets herkennen, en het via javascript juist onmogelijk maken dat deze hetzelfde doet als de submit-kop. Dan ben je er van af.
Dat is dus iets minder gebruiksgemak, maar gebruikers zullen gauw genoeg doorhebben dat ze op de Zoek-knop moeten klikken om het resultaat te zien (veel mensen weten trouwens niet eens dat het normaal gesproken ook met Enter kan).

=====

Met een extra javascript-functie toonOpenOptie() kan je het aanvink-vakje alleen laten zien als javascript aan staat. Het is een soort document.write(), maar dan beter; voor de toegankelijkheid zou je anders een <noscript>-regel moeten opnemen.

=====

Bij de vormgeving van zo'n in principe heel eenvoudig zoekvenstertje met een aanvink-optie en een Zoek-knop moeten er weer eens halsbrekende toeren uitgehaald worden om de opmaak in Internet Explorer er goed uit te laten zien:
  • IE kan niet goed omgaan met een float die geen opgegeven breedte heeft, alle andere browsers wel.
  • Deze float, voor het aanvink-vakje en de bijbehorende tekst, is nodig om een toegankelijke volgorde in de html te krijgen.
  • Maar gelukkig komt het aanvink-vakje er alleen als javascript aan staat, dus kan het probleem met javascript verholpen worden.
  • Er moet weer een functie bij komen: determineFloatingWidth(). Deze berekent (bij alle letterformaten) de echte grootte in pixels van de tekst, voegt daar de breedte van het vakje bij en nog 5px tussenruimte, en wijst de uitgevonden breedte toe aan het drijvende element.
  • Voor IE nog even een kleine correctie voor de positie van het invulvakje, en dan staat in alle browsers het invulvakje precies onder de linkerkant van het textveld.
Pff! Even uitblazen. :cool:

=====

Al met al is het nu deze geworden:
De argeloze gebruiker zal niet vermoeden wat er allemaal onder de motorkap moet zitten bij zoiets kleins. ;)

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Hallo,

Ik krijg de volgende melding als ik jouw code gebruik:

<FORM>-codes worden niet ondersteund de HTML die is opgegeven in de eigenschap Inhoud of de eigenschap Koppeling naar inhoud. Verwijder de <FORM>-code of gebruik het webonderdeel Paginaviewer, dat de HTML-code <FORM> ondersteunt. De eigenschap Inhoud kan worden gewijzigd in een RTF-editor of broneditor. Meer informatie over het webonderdeel Paginaviewer
 
Zo! Dat betekent dat het geen gewone webpagina is, met gewone html-code, waar het zoekvenster in moet komen. :shocked:

De zoekfunctie staat op een sharepoint-intranetsite
Klik om te vergroten...
Dat blijkt dus essentiële informatie te zijn voor de beantwoording van de vraag!
Met Sharepoint heb ik geen ervaring, maar daar zal het wel aan liggen. De interne server van Sharepoint zal anders in elkaar zitten dan een gewone externe webserver.
En dan moeten de reglementen van Sharepoint worden opgevolgd, anders komen er van die meldingen als je aangaf.

Vraag is: waar zitten die reglementen? Ik heb even geGoogled op "sharepoint google search form", en het blijkt redelijk ingewikkeld in elkaar te zitten: :eek:
Op de laatste staat ook een plaatje van het invoegbare standaard Google zoekvenster (dat het standaard Sharepoint-zoekvenster vervangt), met de keuze tussen site/internet:

sharepoint-google-a.png

Ik heb ook het begin-stukje van de oorspronkelijke code bij Google opgevraagd:
Op de laatste staat ook een plaatje van het invoegbare aangepaste Google zoekvenster, met de keuze tussen zelfde/nieuw venster:

sharepoint-google-b.png

En die lijkt toch wel heel erg veel op mijn fabrikaat:

sharepoint-google-c.png

Misschien kan je hier iets verder mee komen?
Zo niet, dan kan je misschien de vraag nog eens stellen in de sectie CMS van dit forum.
Hopelijk meldt zich daar iemand met verstand van het Sharepoint-systeem.

Met vriendelijke groet,
CSShunter

PS 1
In de code wordt aangehaakt bij google.com, de internationale Google. Is het niet handiger om aan te haken bij google.nl, dat als "plaatselijk knooppunt" sneller zal werken?

PS 2
Als de code in een eerdere versie wel werkte, hangt er dan niet ergens op het systeem een backup uit, waar je 'm terug kunt vinden?
 
Als <form> niet mag, zou je ook de gok kunnen wagen om dat weg te laten, en er een gewone div van te maken:
HTML: 
<form id="zoekvenster" method="get" action="http://www.google.nl/search">
...
</form>
wordt dan:
HTML: 
<div id="zoekvenster">
...
</div>
  • google-zoek-in-nieuw-venster-of-niet-div.php

  • Werkt normaal gesproken ook, maar alleen als javascript aan staat.
  • Voor de toegankelijkheid zou je dan het hele zoekvenster moeten weglaten als javascript uit staat, en vervangen door een directe link naar Google (al/niet in nieuw venster).
Kansje dat ie het zo in Sharepoint ook doet: wie niet waagt ... ;)
 
Bedankt,

Ik heb nog een vraag:
Ik heb nu dit script en dit werkt, maar alles staat achter elkaar.
Hoe krijg ik dit een beetje netjes??

<script language="JavaScript">
function SubmitGoogleSearch()
{
var q = document.getElementById("q");
if(q && q.value.length > 0)
{
var newPage = document.getElementById("newPage");
if(newPage)
{
var url = "http://www.google.com/search?q=" + q.value;
if(newPage.checked)
window.open(url);
else
document.location.href(url);
}
}
else
{
alert("Please enter one or more search words.");
}
}
</script>
<div onkeydown="JavaScript:if(event.keyCode==13) SubmitGoogleSearch();" nowrap><a href="http://www.google.com" target="_blank"><IMG SRC="http://www.google.com/nav_first.gif" border="0" align="top" alt="Google Search"></a>
<INPUT id="q" size="24" maxlength="254"><IMG SRC="/_layouts/images/icongo01.gif" border="0" align="absmiddle" style="cursor: hand" onclick="JavaScript:SubmitGoogleSearch();" accesskey="s" alt="Zoeken"
ONMOUSEOVER="this.src='/_layouts/images/icongo02.gif'" ONMOUSEOUT="this.src='/_layouts/images/icongo01.gif'"
ONMOUSEDOWN="this.src='/_layouts/images/icongo03.gif'" ONMOUSEUP="this.src='/_layouts/images/icongo02.gif'"><input id="newPage" type="checkbox" CHECKED>In nieuwe pagina</div>
 
Hoi Jorieke,
Ik heb nu dit script en dit werkt, maar alles staat achter elkaar.
Klik om te vergroten...
Tja, het werkt, maar vraag niet hoe... :confused:
=====
Heb je de oplossing google-zoek-in-nieuw-venster-of-niet-div.php uitgeprobeerd met het Sharepoint-javascript?
  • D.w.z. deze google-zoek-in-nieuw-venster-of-niet-sharepoint.php ?
  • Die is in ieder geval valid html & css, en toegankelijk en gebruiksvriendelijk voor gebruikers met browsers die javascript ondersteunen.
  • En als gezegd: voor de toegankelijkheid zou je dan het hele zoekvenster moeten weglaten als javascript uit staat, en vervangen door een directe link naar Google (al/niet in nieuw venster). - Dat is te doen.
Want ik kan me toch niet voorstellen dat het 't beleid van de instelling of het bedrijf is, om mensen met een beperking uit te sluiten van een soepel gebruik van het intranet, terwijl dat met een adequate codering helemaal niet hoeft.
  • Terzijde: breek me de bek niet open over ontoegankelijke en/of gebruikersonvriendelijke websites, die bewust of onbewust alleen jonge en beperkingloze bezoekers bedienen.
    Op deze manier wordt het hele groepen onmogelijk gemaakt om internet op te kunnen, zowel beroepsmatig als privé. Want het gebeurt systematisch, helaas.
    Zie de uitgangspunten en de Fabels en feiten van de Webrichtlijnen, en bv. ook dit artikel over het gebruik van Ajax.
=====
De vormgeving.
... alles staat achter elkaar. Hoe krijg ik dit een beetje netjes??
Klik om te vergroten...
Met css! :)
In mijn voorbeelden is met css het zoekvenstertje en de rest onder elkaar gezet, zonder aan de toegankelijkheid afbreuk te doen.
Maar het hangt er helemaal van af:
  1. wat jij onder "netjes" verstaat, en
  2. hoe de vormgeving van de pagina's er voor de rest uit ziet (zag ik in mijn ooghoeken onderaan in de eerste post een tabel-opmaak?).
Om daar verder iets over te kunnen zeggen, is een linkje naar de site wel nodig. O nee, dat gaat niet, het is een intranet. :D - Een screenshotje dan.

Maar eerst zou ik me richten op valid code en toegankelijkheid/gebruiksvriendelijkheid. Pas als de code daarvoor in orde is, kan de opmaak ter hand genomen worden (omgekeerd gaat niet).

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan