(Opgelost) Smarty in Javascript verwerken

[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}

[Jos]

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}

[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

[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?

[deactivated010521]

----------

[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?

[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

[deactivated010521]

----------

[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.

[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

[deactivated010521]

----------

[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!