Issue
I have this inside my application.html file:
<head>
...
</head>
<body>
{{> nav2}}
{{> home}}
{{> footer}}
</body>
And this is my nav2.html:
<template name="nav2">
...
<div id="top_nav_sub_menus"></div>
...
</template>
I try to load 2 different nav items inside my nav2 targeting the top_nav_sub_menus element. One is for desktop, one is for mobile.
desktop_nav.html
<template name="desktop_nav">
<li>
<a href="#" id="benefits">X</a>
<ul class="menu vertical benefits_children">
<li><a href="#">X</a></li>
<li><a href="#">X</a></li>
<li><a href="#">X</a></li>
</ul>
</li>
<li><a href="#">X</a></li>
<li><a href="#">X</a></li>
<li><a href="#">X</a></li>
</template>
mobile_nav.html
<template name="mobile_nav">
<li><a href="#" id="benefits">X</a></li>
<li><a href="#">X</a></li>
<li><a href="#">X</a></li>
<li><a href="#">X</a></li>
<li><a href="#">X</a></li>
<li><a href="#">X</a></li>
<li><a href="#">X</a></li>
</template>
Since I'm using detectmobilebrowser.js, I try to do it like this inside my application.js:
if (Meteor.isClient) {
$(function(){
if ($.browser.mobile) {
$("#top_nav_sub_menus").html(Meteor.render(mobile_nav));
} else {
$("#top_nav_sub_menus").html(Meteor.render(desktop_nav));
}
})
}
But it doesn't work.
What I've tried and doesn't work:
1 - Blaze.render(mobile_nav, "#top_nav_sub_menus")
2 - Using jquery-meteor-blaze with this syntax:
if (Meteor.isClient) {
Template.home.onRendered(function () {
if($.browser.mobile) {
$("#top_nav_sub_menus")
.blaze(template['mobile_nav'])
.render();
}
});
$(function(){
...
})
}
What am I missing here?
Note:
This is my tree view of my directory:
├── application.css.scss
├── application.html
├── application.js
├── client
│ ├── javascripts
│ │ ├── detectmobilebrowser.js
│ │ └── jquery-meteor-blaze.js
│ ├── stylesheets
│ │ ├── base.css.scss
│ │ ├── footer.css.scss
│ │ ├── home.css.scss
│ │ ├── nav.css.scss
│ └── views
│ ├── home.html
│ └── layouts
│ ├── desktop_nav.html
│ ├── footer.html
│ ├── mobile_nav.html
│ ├── nav.html
│ └── nav2.html
└── public
├── fonts
│ └── ...
└── images
└── ...
Solution
Ok, I managed to do it.
I put this in my application.js file:
Template.nav2.helpers({
isMobile: function(){
if ($.browser.mobile){
return true;
} else {
return false;
}
}
});
And this inside my nav2.html file:
{{#if isMobile}}
{{> mobile_nav}}
{{else}}
{{> desktop_nav}}
{{/if}}
Answered By - Zulhilmi Zainudin Answer Checked By - David Marino (PHPFixing Volunteer)
Posts
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.