I have this code :
public function headerAction($activeRoute)
{
$activeRouteArray = explode('_', $activeRoute);
return $this->render('FrontendBundle::header.html.twig',
array('activeController' => #$activeRouteArray[1], 'mainmenu' => $menu )
);
}
$menu is a string that contains a Top Bar, link: http://foundation.zurb.com/docs/components/topbar.html
header.html.twig:
<nav class="top-bar" data-topbar="">
<section class="top-bar-section">
<ul class="left">{{mainmenu|raw}}</ul>
<ul class="right">
<li class="divider"></li>
</ul>
</section>
</nav>
On desktop, laptop everything are OK, BUT on mobile SIII, mozzila browser It's displayed only the first button from menu. (I have more than one button.).
on layout.html.twig:
`<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>`
What I should do?
if the screen is small "meta" tag <meta name="viewport" content="width=device-width, initial-scale=1.0" /> it's hiding the menu --so I deleted.
<nav class="top-bar" data-topbar="">
<ul class="title-area">
<li class="toggle-topbar menu-icon" style="width:auto">Menu</li>
</ul>
<section class="top-bar-section">
<ul class="left">{{mainmenu|raw}}</ul>
</section>
</nav>
But on my code I have : <li class="toggle-topbar menu-icon" style="width:auto">Menu</li> on small screen this should be displayed ...and didn't work :(.
Related
I am trying to make multiple pages in my hybrid app on IBM MobileFirst Platform on eclipse juno using the Dojo toolkit.
In design view: the text in pages other than the homepage does not appear.
after running and deploying all environments, i preview on the browser(chrome) and the tabs are not working
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>MoodApp</title>
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user- scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="stylesheet" href="css/main.css">
<script>window.$ = window.jQuery = WLJQ;</script>
<script type="text/javascript" src="dojox/mobile/deviceTheme.js"></script>
<script type="text/javascript" data-dojo-config="isDebug: false, async: true, parseOnLoad: true, mblHideAddressBar: false" src="dojo/dojo.js"></script>
</head>
<body style="display: none;">
<div data-dojo-type="dojox.mobile.View" id="view0" data-dojo-props="selected:false">
<div data-dojo-type="dojox.mobile.Heading" data-dojo-props="label:'My Mood App'">
</div>
<ul data-dojo-type="dojox.mobile.TabBar" fixed="bottom">
<li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props="moveTo:loginPage,transition:'slide',icon:'images/done.png'">Log in</li><li
data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props="moveTo:signupPage,icon:'images/comments16.png',transition:'slide'">Sign up</li>
</ul>
<div data-dojo-type="dojox.mobile.View" id="loginPage" data-dojo-props="selected:true">Enter username and password</div>
<div data-dojo-type="dojox.mobile.View" id="signupPage" data-dojo-props="selected:false">sign up now</div>
</div>
<script src="js/initOptions.js"></script>
<script src="js/main.js"></script>
<script src="js/messages.js"></script>
</body>
Eclipse Juno is not a supported version of Eclipse in IBM MobileFirst Platform - upgrade to Eclipse Java EE Kepler or Luna.
In design mode, you will see only the active tab, so per your code you will see only view 0. Swap between the true/false values of data-dojo-props="selected to switch between your pages... but better yet, see the fuller example below.
Your tabs do not work because you did not put the moveTo values in single quotes:
<ul data-dojo-type="dojox.mobile.TabBar">
<li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props="moveTo:'loginPage',transition:'slide',icon:'images/done.png'">Login</li>
<li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props="moveTo:'signupPage',icon:'images/comments16.png',transition:'slide'">Signup</li>
</ul>
Fuller example:
<div data-dojo-type="dojox.mobile.View" id="view0" data-dojo-props="selected:false">
<div data-dojo-type="dojox.mobile.Heading" data-dojo-props="label:'My Mood App'">
</div>
<p>
This is view 0.<br/>
This is view 0.<br/>
This is view 0.<br/>
</p>
<ul data-dojo-type="dojox.mobile.TabBar">
<li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props="moveTo:'loginPage',transition:'slide',icon:'images/done.png'">Login</li>
<li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props="moveTo:'signupPage',icon:'images/comments16.png',transition:'slide'">Signup</li>
</ul>
</div>
<div data-dojo-type="dojox.mobile.View" id="loginPage" data-dojo-props="selected:false">
<div data-dojo-type="dojox.mobile.Heading" data-dojo-props="label:'My Mood App'">
</div>
Enter username and password
</div>
<div data-dojo-type="dojox.mobile.View" id="signupPage" data-dojo-props="selected:false">
<div data-dojo-type="dojox.mobile.Heading" data-dojo-props="label:'My Mood App'">
</div>
sign up now
</div>
I need to get OpenStreetMap running under Dojo. I followed this example : http://dojotoolkit.org/reference-guide/1.9/dojox/geo/openlayers.html
The problem is that the map is not rendered and I don't know why. The example implementation is this one : http://demos.dojotoolkit.org/demos/mobileOpenLayers/demo.html
When i copy the code and run it locally it does not work !
My code so far (it is the same as in the given example) :
<!DOCTYPE html>
<html>
<head profile="http://www.w3.org/2002/12/namespace">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>Dojo OpenLayers Map Demo</title>
<!-- hosted version of Open Layer libraries -->
<script type="text/javascript" src="http://openlayers.org/api/2.10/OpenLayers.js"></script>
<script type="text/javascript" src="../../dojo/dojo.js" data-dojo-config="parseOnLoad: 1, async:1"></script>
<script type="text/javascript" src="src.js" charset="utf-8"></script>
</head>
<body style='visibility:hidden;'>
<div id="home" data-dojo-type="dojox.mobile.View" selected="true" >
<h1 data-dojo-type="dojox.mobile.Heading" label="OpenLayers Map"></h1>
<h2 data-dojo-type="dojox.mobile.RoundRectCategory">Go To:</h2>
<ul data-dojo-type="dojox.mobile.RoundRectList">
<li id="paris" data-dojo-type="dojox.mobile.ListItem" moveTo="mapPage" transition="slide">
Paris
</li>
<li id="newyork" data-dojo-type="dojox.mobile.ListItem" moveTo="mapPage" transition="slide">
New York
</li>
<li id="lacolle" data-dojo-type="dojox.mobile.ListItem" moveTo="mapPage" transition="slide">
La Colle sur Loup
</li>
</ul>
</div>
<div id="mapPage" data-dojo-type="dojox.mobile.View">
<h1 data-dojo-type="dojox.mobile.Heading" back="Back" moveTo="home" id="mapHeader"></h1>
<div id="map" style="height:100%; width:100%; background-color: #b5d0d0;">
</div>
</div>
</body> </html>
My research so far : When I use absolute values for the map-div, it works :
<div id="map" style="height:100px; width:100px; background-color: #b5d0d0;">
</div>
But I need to get it in fullscreen. How can I resolve this problem ?
I have a jquery code that adds the tel: link to a style in a span around a phone number but it only works for one phone number. I have a page with 20 different phone numbers and when I add the style to all of the phone numbers it will populate all 20 tel: links with the last phone number in the list to all of the tel: links.
How can I make the tel: link for each phone number populate correctly? Currently It populates just the last phone number in the list to all of the tel: links.
Any help would be much appreciated!
$(document).ready(function() {
// if Modernizr detects class "touch"
if($('html').hasClass('touch')) {
// for each element with class "make-tel-link"
$(".make-tel-link").each(function () {
//$.each(".make-tel-link", function () {
var jPhoneNumber = $(this).text();
// wrap phone with href="tel:" and then insert phone number
$(this).wrapInner('<a class="jPhoneLink" href=""></a>');
$('.jPhoneLink').attr('href', 'tel:'+jPhoneNumber);
});
}
});
Here is an example of the markup.
<!DOCTYPE html>
<html class="touch">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css">
<!-- Extra Codiqa features -->
<link rel="stylesheet" href="codiqa.ext.css">
<!-- jQuery and jQuery Mobile -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script src="codiqa.ext.js"></script>
<script src="modernizr.custom.39046.js"></script>
</head>
<body>
<!-- Home -->
<div data-role="page" id="page2">
<div data-theme="a" data-role="header">
<div id="head"> <strong>Contacts</strong></div>
<div data-role="navbar" data-iconpos="left">
<ul>
<li>
<a href="index.php" data-transition="fade" data-theme="" data-icon="">
home
</a>
</li>
<li>
<a href="3.php" data-transition="fade" data-theme="" data-icon="">
contact
</a>
</li>
</ul>
</div>
</div>
<div data-role="content">
<h1>CONTACT US</h1>
<div class="layout">
<h4>Headquarters</h4>
4235345 High bar<br />
Suite 345<br />
Quence, AL 45205
<br />
<h4>Customer Service</h4>
info#fgfghgdgh.com<br />
<span class="make-tel-link">888-555-5555</span><br />
<span class="make-tel-link">800-555-5555</span><br />
<span class="make-tel-link">866-555-5555</span><br />
</div><br />
</div>
</div>
</div>
</body>
</html>
you can create the link first and in there set its attributes and the wrap it
$(function(){
$.each($(".make-tel-link"), function () {
//replace all instances of '-'
var jPhoneNumber = $(this).text().replace(/-/g,'');
var link = $('<a />', {class: 'jPhoneLink', href: 'tel:'+jPhoneNumber});
$(this).wrapInner(link);
});
});
working example
http://jsfiddle.net/pUkUb/3/
Edit:
the problem in your script is here:
$('.jPhoneLink').attr('href', 'tel:'+jPhoneNumber);
you are assigning the attribute to all the elements that have that class, not the one you just created
I have been going around and around and around, trying to apply as many different solutions as possible, trying to solve this problem by myself. The fact is that I cannot!
I am developing a very simple app in HTML5 on Adobe PhoneGap. The app is only a list of links that the user should click and access to the respective websites. Problem? The problem is that the websites are opening on the app and not on the browser. I already tryed everything I knew... Set target _blank, applied this solution, this one, this one and this one. I've been googling also, but the results are exactly the same: no solution for my problem.
There must be something that I am doing wrong, and right now I don't think I have the discernment to see what it is! And it is driving me crazy... Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Northern Landscape APP</title>
<meta name="description" content="Northern Landscape APP - With this APP you can keep up with the latest news of our group: Features, Group Messages, new magazine issues and more!" />
<meta name="author" content="LFS" />
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="stylesheet" href="style.css">
<script type="text/javascript">
$('.link').live('tap', function() {
url = $(this).attr("rel");
loadURL(url);
});
function loadURL(url){
navigator.app.loadUrl(url, { openExternal:true });
return false;
}
</script>
</head>
<body>
<div id="contentor">
<header>
</header>
<nav>
<div id="cabeca">
<img src="imgs/cabecalho.png">
</div>
<br>
<br>
<br>
<div id="botoeswraper">
<div id="linha1">
<div id="b1">
<div id="icone"><img src="imgs/logo_compus.png"></div>
<div id="texto">
<a href="#" class='link' rel='http://www.northernlandscape.org'>Official Website</a> </div>
</div>
</div>
<div id="linha2">
<div id="b2">
<div id="icone"><img src="imgs/rblogo.png"></div>
<div id="texto">
<a href="#" class='link' rel='http://www.redbubble.com/groups/northern-landscape'>Redbubble group</a> </div>
</div>
</div>
<div id="linha3">
<div id="b3">
<div id="icone"><img src="imgs/groupmsg.png"></div>
<div id="texto">
<a href="#" class='link' rel='http://www.redbubble.com/groups/northern-landscape/forums/7330'>Group messages</a> </div>
</div>
</div>
<div id="linha4">
<div id="b4">
<div id="icone"><img src="imgs/issues.png"></div>
<div id="texto">
<a href="#" class='link' rel='http://www.northernlandscape.org/alli.php'>All NL magazine issues</a> </div>
</div>
</div>
<div id="linha5">
<div id="b5">
<div id="icone"><img src="imgs/tweeter.png"></div>
<div id="texto">
<a href="#" class='link' rel='https://twitter.com/NL_host'>Check us on Tweeter</a> </div>
</div>
</div>
</div>
</nav>
<p> </p>
<p> </p>
<footer>
<p>
NL APP version 1.0 - Developed by LFS©
</p>
</footer>
</div>
</body>
</html>
I am most appreciated for any help that I can get...
I have done the changes below and each one works for me.
<!-- Opens in new tab -->
Official Website
<!-- Opens in new window -->
Redbubble group
I'm new to jquery and jquery mobile and and having an issue with custom selects (data-native-menu="false"). When I tap to open one, with just 4 options, sometimes it opens as normal, but closes itself a second later, before I've had a chance to choose an option.
Another issue, which perhaps may be related, is that sometimes when I open a dialog (data-rel='dialog') it will not close when I tap the "X" button it provides.
My code validates as HTML 5 and the only custom config I have done is defaultDialogTransition & defaultPageTransition off.
I have it so each form element has a unique ID, as has each page.
Both issues happen with opera and android browsers, on 2.3 gingerbread.
Thanks, Kevin
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<title>title</title>
<meta name='viewport' content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;' />
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script>
<script src='/js/jquery_mobile_global_defaults.js'></script>
<script src='http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js'></script>
<link rel='stylesheet' href='/design/mobile_style.css'>
<link rel='stylesheet' href='http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css' />
</head>
<body>
<div data-role='page' id='homepage'>
<div class='header'>
<div class='logo'><a href='/' ><img src='/design/logo.png'></a></div>
<div class='login'><a href='/php/mobile_login.php' data-overlay-theme='b' data-transition='none' data-rel='dialog' data-role='button' data-inline='true' data-icon='arrow-r' data-iconpos='right' data-theme='a' data-mini='false'>Login</a></div>
</div>
<div class='mobile_content'>
<form data-ajax='true' method='GET' id='btipdgnkrb_form' action='/php/mobile_search.php'>
<div>
<select data-native-menu='false' onchange='ajaxcreateSubCatSelect("btipdgnkrb");' name='main_catetory_type' id='btipdgnkrb_maincat'>
<option>Career path / role</option>
<option value='CONSTRUCTION'>Construction roles</option>
<option value='DESIGN'>Design roles</option>
<option value='ENERGY'>Energy roles</option>
<option value='GENERIC'>General roles</option>
</select>
</div>
<div id='btipdgnkrb_subcatloaddiv' style='text-align:center;'></div>
<div>
<select data-overlay-theme='b' disabled data-native-menu='false' name='profession_id' id='btipdgnkrb_subcat'><option data-placeholder='true'>
Select role / category</option></select>
</div>
<div><select name='location_id' id='btipdgnkrb_location' data-overlay-theme='b' data-native-menu='false' data-icon='arrow-d'><option data-placeholder='true' value='0'>Location (optional)
</option>
<option></option>
<option value=37>Ireland</option>
<option value=61>Ulster</option>
</select></div>
<label for='btipdgnkrb_keywords' class='ui-hidden-accessible'>Keywords:</label>
<div><input type='text' name='keywords' id='btipdgnkrb_keywords' value='' placeholder='Keywords (optional)'></div>
<div><input type='submit' data-theme='b' data-icon='search' data-iconpos='right' value='Search'></div>
<div><input type='button' onclick='reset_search_form("btipdgnkrb");' data-theme='c' data-iconpos='right' value='Clear form'></div>
</form>
<p> <p>
<script src='/js/main.js'></script>
</div>
<div data-role='footer' data-theme='a' >
<div data-role='navbar' data-iconpos='right'>
<ul>
<li><a data-icon='home' href='/'>Home / Search</a></li>
<li><a data-icon='plus' href='#'>Menu</a></li>
</ul>
</div><!-- /navbar -->
</div>
</div>
</body>
</html>