Page 1 of 1
(Opgelost) Smarty in Javascript verwerken
Posted: Thu Feb 14, 2013 10:48 am
by pasmaskas
Ik ben wat aan het oefenen met responsive/adaptive dingetjes en nu heb ik het voorelkaar gekregen dat alles netjes werkt aleen de ipad heeft een apparte css nodig. Via de platte html werkt het goed alleen ik wil graag deze code {cms_stylesheet name="960px"} verwerken in het javascript hier onder. Als ik hem er zo in plak werkt hij niet en vervangt hij de code niet naar de juiste url waar de css staat. Is er een manier om {cms_stylesheet name="960px"} te verwerken in een javascript?
Gr Pascal
URL naar de test website:
http://www.testingwebsite.nl
Code: Select all
{literal}<__script__ type="text/javascript">
if((navigator.userAgent.match(/iPad/i))) {
document.write("<link type=\"text\/css\" rel=\"stylesheet\" media=\"all\" href=\"{cms_stylesheet name="960px"}\" charset=\"utf-8\" \>");
document.write("<meta name=\"viewport\" content=\"width=device-width\" \>");
}
</__script>{/literal}
Re: Smarty in Javascript verwerken
Posted: Thu Feb 14, 2013 11:26 am
by Jos
pasmaskas wrote:Als ik hem er zo in plak werkt hij niet en vervangt hij de code niet naar de juiste url
Vrij logisch, want je had juist afgedwongen dat Smarty niets mocht doen binnen de
{literal} tags.
Vervang
{cms_stylesheet name="960px"} daarom door
{/literal}{cms_stylesheet name="960px"}{literal}
Re: Smarty in Javascript verwerken
Posted: Thu Feb 14, 2013 11:39 am
by pasmaskas
Thnx Jos!
Aleen ik krijg nu dit
Code: Select all
<__script__ type="text/javascript">
if((navigator.userAgent.match(/iPad/i))) {
document.write("<link type=\"text\/css\" rel=\"stylesheet\" media=\"all\" href=\"<link rel="stylesheet" type="text/css" href="http://testingwebsite.nl/tmp/cache/stylesheet_combined_f71faf7a524633b28798db7242ea74ea.css" media="screen" />
\" charset=\"utf-8\" \>");
document.write("<meta name=\"viewport\" content=\"width=device-width\" \>");
}
</__script>
Ik moet allen de url naar de css hebben niet de hele tag zal maar zegen hoe doe je dat dan?
gr Pascal
Re: Smarty in Javascript verwerken
Posted: Thu Feb 14, 2013 12:03 pm
by pasmaskas
Denk dat ik het gevonde heb
{cms_stylesheet name="960px" nolinks="960px"}
Klopt dat?
als ik {cms_stylesheet nolinks="960px"} gebruik dan laat hij alle css urls zien en dat is niet de bedoeling en als ik het zo als bove doe niet maar kan/ mag dat samen?
Re: Smarty in Javascript verwerken
Posted: Thu Feb 14, 2013 12:41 pm
by deactivated010521
----------
Re: Smarty in Javascript verwerken
Posted: Thu Feb 14, 2013 1:21 pm
by pasmaskas
Bedankt Arnoud ik heb het gelijk anagepast. Alleen er is nu iets heel vaags.
Ik heb het script getest op verschillende devices via deze url:
http://pmkmedia.nl/responsive/html5v4/
Hier werkt het java script naar behoren op een ipad en laad netjes de goede css in.
Nu heb ik alles in CMSMS geplaatst en denk alles goed te hebben aleen het script laat niet op een ipad wat doe ik verkeert?
het script ziet er als volgt uit in CMSMS:
Code: Select all
{literal}<__script__ type="text/javascript">
if((navigator.userAgent.match(/iPad/i))) {
document.write("<link type=\"text\/css\" rel=\"stylesheet\" media=\"all\" href=\"{/literal}{cms_stylesheet name='960px' nolinks='1'}{literal}\" charset=\"utf-8\" \>");
document.write("<meta name=\"viewport\" content=\"width=device-width\" \>");
}
</__script>{/literal}
Als je dan de website bekijkt in de broncode
http://testingwebsite.nl lijkt alles oke. Alleen de ipad reageert er gewoon niet op. Wat heb ik verkeert gedaan?
Re: Smarty in Javascript verwerken
Posted: Thu Feb 14, 2013 2:19 pm
by pasmaskas
@Arnoud
Het is geen afzonderlijke stylesheet het is de "pc" stylesheet de ipad wil niet de goede stylesheet laden (die van 960px breed) hij laad de verkeerde in. Vandaar een soort script die de ipad dwingt de css van 960px te gebruiken.
Maar tot nu toe doet het script helemaal niets
Hoe zet je de stylesheet tages om naar html5? ze sluiten allemaal met /> maar dat moet > zijn
Re: Smarty in Javascript verwerken
Posted: Thu Feb 14, 2013 2:29 pm
by deactivated010521
----------
Re: Smarty in Javascript verwerken
Posted: Fri Feb 15, 2013 9:41 am
by pasmaskas
Bedankt voor de hulp Arnoud het was inderdaad het script dat op de verkeerde plek stond nu werkt het goed.
Het javascript gebruik ik omdat de ipad anders de verkeerde css gebruikt. Ik had het eerst met een aparte css regel voor de ipad geprobeerd zodat apparaten met een resolutie van 1024x768 de 960px css pakt maar hier reageerde andere apparaten ook op en dat wil ik niet.
Als ik de viewport globaal maak op deze testwebsite dan schaalt hij niet op een mobiel je krijgt dan een mini strookje.
Ik heb alle informatie van deze website:
http://www.seabreezecomputers.com/tips/mobile-css.htm
Hier staat ook een alternatieve manier zo als ze het noemen met de media-query alleen dat werkte toen niet zo als ik het wou en de manier met aparte css bestanden wel.
Ik ga nog eens stoeie met media-query in een volgende project/testwebsite daar zal de link die jij stuurde goed aanpas komen.
Re: Smarty in Javascript verwerken
Posted: Fri Feb 15, 2013 10:14 am
by pasmaskas
Oke ik heb het mij zelf veelste moeilijk gemaakt ik heb ik heb de viewport aangepast naar
<meta name="viewport" content="width=device-width">
En het javascript is nu zo
{literal}<__script__ type="text/javascript">
if((navigator.userAgent.match(/iPad/i))) {
document.write("<link rel=\"stylesheet\" type=\"text\/css\" href=\"{/literal}{cms_stylesheet name='960px' nolinks='1'}{literal}\" media=\"all\" \>");
}
</__script>{/literal}
Nu werkt alles perfect en schaalt alles 100% aleen is er ene manier om het zonder javascritp te doen?
gr Pascal
Re: Smarty in Javascript verwerken
Posted: Fri Feb 15, 2013 1:34 pm
by deactivated010521
----------
Re: Smarty in Javascript verwerken
Posted: Fri Feb 15, 2013 3:19 pm
by pasmaskas
Top! Ik heb de module geinstaleert en de UDT aangemaakt
Ik ehb het volgende in de template geplaatst:
Code: Select all
{check_platform}
{if $is_ipad == '1'}
{cms_stylesheet name='960px'}
{/if}
Als je in de broncode kijkt via firefox zie je de code er niet tussen staan maar op de ipad pakt hij de goed css.
Thx Arnoud!