nieuw venster

Status
Niet open voor verdere reacties.

willem008

Gebruiker
Lid geworden
28 sep 2007
Berichten
792
Goede dag

Ik open een contactformulier op mijn site met de volgende code

<a href="http://service-netwerk.com/formulier.html" onclick="window.open(this.href,'popupnaam','width=500,height=500'); return false">
<img src="/image/bestel.png" width="82" height="20" alt="" style="border: 0; vertical-align: middle;">
</a>

Ik krijg dan een venster van 500x500
Maar hij wordt nog bij verschilende browser anders weergegeven , bij de een links in de hoek en bij een ander in het midden van het scherm,

mijn vraag kan ik dat nog sturen met bijv css
 
Met CSS kan dit in elk geval niet. Wat je hier probeert is de positie van een raam te veranderen, CSS heeft alleen effect binnen de browserramen. Het zou kunnen dat je dit met javascript wel kunt doen, maar ik vraag me af waarom je überhaupt een popup gebruikt. Even afgezien van de vraag of het gebruiksvriendelijk is, worden ze door veel browsers geblokkeerd. Je kunt denk ik beter in de richting van iets als lightbox (of colorbox, maakt niet uit eigenlijk) kijken. Daarmee heb je veel meer controle over het uiterlijk en voorkom je dat je contactformulier als ongewenste popup wordt geblokkeerd.
 
ik gebruik dit omdat het contactformulier dan over de pagina wordt weergegeven zodat de besteller het artiekel blijft zien.
Dat kan met colorbox (en soortgenoten) dus ook. Hier staan wat voorbeelden, de meeste met afbeeldingen maar onderaan ook een paar met HTML/iFrames.
 
Ok bedankt ga mijn daar eens rustig in verdiepen.

Nog een klein vraagje

Ik wil zoals het nu staat even zo laten tot dat ik wat nieuws heb gemaakt
mijn vraag in welke gevallen werkt dit niet.

ik had bij ie expl mijn popup uitgeschakkelt en toen werkte hij nog steeds.
 
Hangt af van de browser en de geïnstalleerde plugins, hoeveel gebruikers geen popup krijgen is dus moeilijk te zeggen. Maar, de link naar de pagina staat er ook dus ze kunnen altijd rechts klikken en dan gewoon de link openen. Ik denk niet dat je je veel zorgen hoeft te maken.
 
Ok

Maar ik heb thuis ook een computer met window's 8 en ik ben er net achter gekomen dat hij daar niet werkt.

Wat kan daar het probleem zijn , en is dat op te lossen

dat rechts klikken zal wel gaan maar een hoop mensen kunnen dat niet dat is het probleem.
 
Laatst bewerkt:
Even buiten het feit dat het niet de juiste oplossing is, met welke van de 3 code's heb ik het minste problemen.

<a href="http://service-netwerk.com/formulier.html" onclick="window.open('http://service-netwerk.com/formulier.html','mijnvenster',
'width=500,height=500,scrollbars=yes,toolbar=yes,location=yes'); return false"><img src="/image/bestel.png" width="82" height="20" alt="" style="border: 0; vertical-align: middle;">
</a>

of

<a href="http://service-netwerk.com/formulier.html" onclick="window.open(this.href,'popupnaam','width=500,height=500'); return false">
<img src="/image/bestel.png" width="82" height="20" alt="" style="border: 0; vertical-align: middle;">
</a>

of alleen met html


<a href="contrails2.jpg" onclick="venster('contrails2.jpg');return false;">Voorbeeld 2</A>
 
Laatst bewerkt:
Tussen die eerste twee maakt het weinig tot niets uit denk ik (pin me er niet op vast, ik ben geen JS expert). Wat je met die derde precies wilt bereiken begrijp ik niet helemaal. Het is ook niet puur HTML, dat onclick gedeelte is javascript.

OVerigens, het is beter om code op het forum tussen [*code][*/code] of [*html][*/html] (zonder *) tags te zetten, dat maakt het leesbaarder.
HTML:
<a href="http://service-netwerk.com/formulier.html" onclick="window.open('http://service-netwerk.com/formulier.html','mijnvenster',
 'width=500,height=500,scrollbars=yes,toolbar=yes,location=yes'); return false">
<img src="/image/bestel.png" width="82" height="20" alt="" style="border: 0; vertical-align: middle;">
 </a>
 
ok

Wat ik namelijk het belangrijkse vindt dat hij in zoveel mogelijk gevallen werkt.

als je soms een beter altanatief heb hou ik me aanbevolen.

Het is bij mijn belangrijk dat de formulier over de pagina heen komt en wel in een klein venster
 
Hoi Willem,
Wat je ook zou kunnen doen:
  • Het formulier gewoon onderaan de pagina-content er bij doen, maar met {display:none} onzichtbaar maken.
  • Vervolgens kan je met een onclick op de Bestellen-knop het formulier zichtbaar laten maken met een javascriptje.
kabelschijf-form.png
(klik voor vergroting)

Op deze manier heb je geen echte popup in een nieuw window, en kunnen browsers en popup-verhinderaars er niets tegen doen.
En het formulier komt altijd onder de aanbieding, dus er hoeft niet gesleept te worden (hooguit een beetje scrollen).

Met vriendelijke groet,
CSShunter
 
ja ok daar zit denk het probleem

het is een oscomerce systeem met allemaal php pagina's die elkaar aanroepen dus ik heb niet echt een pagina waar ik content aan kan toevoegen.

ik denk dat dit nog niet meevalt ,maar ik sta open voor ideen.


Het hele verhaal achter deze vraag is,

Als iemand op "bestel nu" klikt wil ik dat hij op de pagina met het artikel blijft en een formulier te zien krijgt wat hij in kan vullen, zodat hij de gegevens van het
product kan zien.
 
Ja, ik snap de bedoeling. Dan hoef je niet heen en weer te bladeren voor het artikelnummer, en kan je je ook niet zo gauw daarin vergissen.

Kan je van dit:
HTML:
<a href="http://service-netwerk.com/formulier.html" 
	onclick="window.open(this.href,'popupnaam','width=500,height=500'); return false">
    <img src="/image/bestel.png" width="82" height="20" alt="" style="border: 0; vertical-align: middle;">
</a>
... dit maken:
HTML:
<a href="#" onclick="document.getElementById('bestelformulier').style.display='block'; return false">
    <img src="/image/bestel.png" width="82" height="20" alt="" style="border: 0; vertical-align: middle;">
</a>
En bij dit:
HTML:
...
</div>
</form>
</div> <!-- bodyContent //-->
Dit ertussen zetten:
HTML:
</div>
</form>

<div id="bestelformulier" style="margin: 30px; border: 1px solid #A6C9E2; padding: 15px; display: none; ">
	<iframe src="http://service-netwerk.com/formulier.html" frameborder="0" width="100%" height="530"></iframe>
</div><!-- bestelformulier //-->

</div> <!-- bodyContent //-->
?
Als dat gaat, dan wordt het bestelformulier onderaan zo'n aanbiedingenpagina gezet bij een klik op "Bestel nu", zonder dat je iets met de ingewikkelde php-toestanden van oscommerce te maken hebt.

Alleen het zinnetje "!! Dit venster is met de muis te verschuiven. <-- -->" moet dan nog even uit de formulier.html pagina gehaald worden.

Met vriendelijke groet,
CSShunter
 
ok ik heb nu dit

in html

<a href="http://service-netwerk.com/formulier.html" onclick="document.getElementById('bestelformulier').style.display='block'; return false">
<img src="/image/bestel.png" width="82" height="20" alt="" style="border: 0; vertical-align: middle;">
</a>

jij schreef <a href="#"....... maar dan werkt het niet dan wordt ik naar service-netwerk.com/catalog/# gestuurd

dit staat nu in mijn formulier pagina

</table>
</form>

<div id="bestelformulier" style="margin: 30px; border: 1px solid #A6C9E2; padding: 15px; display: none; ">
<iframe src="http://service-netwerk.com/formulier.html" frameborder="0" width="100%" height="530"></iframe>
</div><!-- bestelformulier //-->

</div> <!-- bodyContent //-->

</body>
</html>


Dit is de pagina waar ik het uitgeprobeerd heb hij opent wel het formulier alleen helemaal open.

http://service-netwerk.com/catalog/product_info.php/cPath/47/products_id/213


Ik denk dat het toch wel een beetje moeilijk in elkaar zit want ik heb eigelijk niet een html pagina,
maar namelijk voor elk product een apart veld waar ik tekst en dus ook bijv een link kan invoegen.

zoals ik nu gedaan heb,
alleen de vraag hoe wordt ik goed doorgestuurt naar het formulier
 
Ah, ik zie wat er gebeurd is.
Je hebt de code:
HTML:
</div>
</form>
 
<div id="bestelformulier" style="margin: 30px; border: 1px solid #A6C9E2; padding: 15px; display: none; ">
    <iframe src="http://service-netwerk.com/formulier.html" frameborder="0" width="100%" height="530"></iframe>
</div><!-- bestelformulier //-->
 
</div> <!-- bodyContent //-->
... in de formulier.html pagina zelf gezet, en dan kan het niet werken.

De bedoeling was om dit stukje code in te plakken in de product-pagina's, waar de popup-toestand getoond moet worden.
Dus zo:
HTML:
<strong>Tijdelijke aanbieding</strong><br /><br />

<a href="http://service-netwerk.com/formulier.html" onclick="document.getElementById('bestelformulier').style.display='block'; return false">
    <img src="/image/bestel.png" width="82" height="20" alt="" style="border: 0; vertical-align: middle;">
</a>

<br /><br /><br />
<a href="http://service-netwerk.com/catalog/contact_us.php" title="prijs aanvragen">
    <img src="/image/vraag.png" width="82" height="20" alt="" style="border: 0; vertical-align: middle;">
</a><br /><br />

    <div style="clear: both;"></div>
</div>

<div class="buttonSet">
    <span class="buttonAction"><input type="hidden" name="products_id" value="260" /><span class="tdbLink"><button id="tdb4" type="submit"></button></span><script type="text/javascript">$("#tdb4").button({icons:{primary:"ui-icon-cart"},text:false}).addClass("ui-priority-primary").parent().removeClass("tdbLink");</script></span>

    <span class="tdbLink"><a id="tdb5" href="http://service-netwerk.com/catalog/product_reviews.php/cPath/31/products_id/260">
	Beoordelingen</a></span><script type="text/javascript">$("#tdb5").button({icons:{primary:"ui-icon-comment"}}).addClass("ui-priority-secondary").parent().removeClass("tdbLink");</script>  </div>

</div>
</form>

<div id="bestelformulier" style="margin: 30px; border: 1px solid #A6C9E2; padding: 15px; display: none; ">
	<iframe src="http://service-netwerk.com/formulier.html" frameborder="0" width="100%" height="530"></iframe>
</div><!-- bestelformulier //-->

</div> <!-- bodyContent //-->
In plaats van het hekje href="#" in de link kan je inderdaad ook href="http://service-netwerk.com/formulier.html" zetten.
  • Als javascript bij de bezoeker aan staat, maakt het niet uit; dan komt het formulier onder de aanbieding te staan.
  • Als javascript bij de bezoeker uit staat (ik geloof bij ca. 3% van de surfers), dan komt het formulier op een losse pagina - dan kunnen ze toch invullen.
Zo beter?

Met vriendelijke groet,
CSShunter
 
Ja we worden warm maar ik denk dat hij te breed is ,hij gooit de pagina in de war.
ik heb de breed van het formulier al op 80% gezet maar dat maakt niet uit

ik heb nu dit

<a href="http://service-netwerk.com/formulier.html" onclick="document.getElementById('bestelformulier').style.display='block'; return false">
<img src="/image/bestel.png" width="82" height="20" alt="" style="border: 0; vertical-align: middle;">
</a>

<br /><br /><br />
<a href="http://service-netwerk.com/catalog/contact_us.php" title="prijs aanvragen">
<img src="/image/vraag.png" width="82" height="20" alt="" style="border: 0; vertical-align: middle;">
</a><br /><br />

<div style="clear: both;"></div>
</div>

<div class="buttonSet">
<span class="buttonAction"><input type="hidden" name="products_id" value="260" /><span class="tdbLink"><button id="tdb4" type="submit"></button></span><script type="text/javascript">$("#tdb4").button({icons:{primary:"ui-icon-cart"},text:false}).addClass("ui-priority-primary").parent().removeClass("tdbLink");</script></span>

<span class="tdbLink"><a id="tdb5" href="http://service-netwerk.com/catalog/product_reviews.php/cPath/31/products_id/260">
Beoordelingen</a></span><script type="text/javascript">$("#tdb5").button({icons:{primary:"ui-icon-comment"}}).addClass("ui-priority-secondary").parent().removeClass("tdbLink");</script> </div>

</div>
</form>

<div id="bestelformulier" style="margin: 30px; border: 1px solid #A6C9E2; padding: 15px; display: none; ">
<iframe src="http://service-netwerk.com/formulier.html" frameborder="0" width="80%" height="530"></iframe>
</div><!-- bestelformulier //-->

</div> <!-- bodyContent //-->

Ik heb de condeslang even gedaan ( de onderste)_

http://service-netwerk.com/catalog/index.php/cPath/47
 
Hé, de Condensafvoerbak (service-netwerk.com/catalog/product_info.php/cPath/47/products_id/214) doet het wel goed! :)

Bij de Condensafvoerslang 13.3mm (service-netwerk.com/catalog/product_info.php/cPath/47/products_id/213) lijkt iets anders aan de hand:

  • Daar zitten de #columnLeft en #columnRight en nog wat dingen buiten de #bodyWrapper > dan komen ze er onder te staan.
  • Ook zit er een extra losse <div class="buttonSet"> in, die al ergens anders staat, en weggelaten kan worden.
Met vriendelijke groet,
CSShunter
 
Ja klop ben hier nu net mee klaar ,ben hele avond bezig geweest maar dat maak niet uit.

Ik heb nu nog even een product gemaakt even om te proberen.
deze:

http://service-netwerk.com/catalog/product_info.php/cPath/31/products_id/71

heb ik gemaakt het de volgende code, wil eerst weten of hij zo goed is voor ik verder ga hij werkt wel in ieder geval.
wat ik niet snap is in die laatste <span clas staat een url pad href="http://service-netwerk.com/catalog/product_reviews.php/cPath/31/products_id/260"
kan ik dat vervangen door iets algemeen's


<strong>Bestel hieronder:</strong><br /><br />
<a href="http://service-netwerk.com/formulier.html" onclick="document.getElementById('bestelformulier').style.display='block'; return false">
<img src="/image/Bestelknop.png" width="82" height="20" alt="" style="border: 0; vertical-align: middle;">
</a><br /><br />

<a href="http://service-netwerk.com/catalog/contact_us.php" title="prijs aanvragen">
<img src="/image/vraag.png" width="82" height="20" alt="" style="border: 0; vertical-align: middle;">
</a><br /><br /><br /><br />

<span class="tdbLink"><a id="tdb5" href="http://service-netwerk.com/catalog/product_reviews.php/cPath/31/products_id/260">
</a></span><script type="text/javascript">$("#tdb5").button({icons:{primary:"ui-icon-comment"}}).addClass("ui-priority-secondary").parent().removeClass("tdbLink");</script> </div>
</form>

<div id="bestelformulier" style="margin: 30px; border: 1px solid #ffffff; padding: 15px; display: none; ">
<iframe src="http://service-netwerk.com/formulier.html" frameborder="0" width="100%" height="530"></iframe><br /><br />
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan