I am trying to create a foundation 6 site with a fairly large menu, I have created a codepen of the exact menu here:
https://codepen.io/ianims/pen/WOWazM
The Code is as shown:
<body>
<div class="top-bar ">
<div>
<div class="header_logo">
<a href="index.php">
<div class="header_logo_first">Yacht Charters</div>
</a>
<div class="header_logo_text">Yacht Management and Charter</div>
</div>
</div>
<div class="top-bar-right">
<div class="contact_details">
<div class="contact_left"><img src="././images/my_account.png" >MY ACCOUNT</div>
<div class="contact_left"><img src="././images/phone.png">+44 207 112233</div>
<div class="contact_right"><img src="././images/mail.png">me#somewhere.com</div>
</div>
</div>
</div>
<div class="top-bar ">
<div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="large">
<button class="menu-icon" type="button" data-toggle="example-menu"></button>
<div class="title-bar-title">Menu</div>
</div>
<!-- <ul class="vertical medium-horizontal menu" data-responsive-menu="accordion medium-dropdown" style="background:#000000;" id="example-menu"> -->
<ul class="vertical medium-horizontal menu" data-responsive-menu="accordion dropdown" style="background:#000000;" id="example-menu">
<li>
<!-- INTRO -->
Introduction
<ul class="vertical menu" style="background:#000000;">
<li>Introduction</li>
<li>The DiYachting Team</li>
<li>Contact Us</li>
<li>Corporate Partners</li>
</ul>
</li>
<li>
<!-- CHARTER -->
Charter
<ul class="vertical menu" style="background:#000000;">
<li>Introduction</li>
<li>Our Yachts</li>
<li>Destinations</li>
<li>FAQs</li>
</ul>
</li>
<li>
<!-- MANAGEMENT -->
Management
<ul class="vertical menu" style="background:#000000;">
<li>Introduction</li>
<li>Yacht Management</li>
<li>Consultancy</li>
<li>Logistics</li>
<li>Financial</li>
<li>Compliance</li>
<li>Technical</li>
<li>Crew</li>
<li>Charter Management</li>
<li>Resources</li>
</ul>
</li>
<li>
<!-- PURCHASE -->
Purchase
<ul class="vertical menu" style="background:#000000;">
<li>PURCHASE</li>
</ul>
</li>
<li>
<!-- REGISTRATION -->
Registration
<ul class="vertical menu" style="background:#000000;">
<li>Introduction</li>
<li>British and Jersey Registration</li>
<li>Tonnage Surveys</li>
<li>Uk Reprasentative</li>
</ul>
</li>
<li>
<!-- COMPLIANCE -->
Compliance
<ul class="vertical menu" style="background:#000000;">
<li>Introduction</li>
<li>MCA Coding</li>
<li>MLC Compliance</li>
<li>Equipment, Supply and Install</li>
<li>Renewal Inspections & Equipment Service</li>
<li>MCA Surveys Worldwide</li>
</ul>
</li>
<li>
<!-- TECHNICAL -->
Technical
<ul class="vertical menu" style="background:#000000;">
<li>Introduction</li>
<li>Maintenance</li>
<li>Spare Parts</li>
<li>Wintervention</li>
<li>Summer Service</li>
<li>Haul Out Management</li>
<li>Refits</li>
<li>Equipment</li>
</ul>
</li>
<li>
<!-- CREW -->
Crew
<ul class="vertical menu" style="background:#000000;">
<li>Introduction</li>
<li>Recruitment</li>
<li>Employment</li>
<li>Temporary / Short Term Crew</li>
<li>Vacancies and Apply</li>
</ul>
</li>
<!-- NEWS -->
<li>
News
<ul class="vertical menu" style="background:#000000;">
<li>News</li>
<li>DiYachting Press</li>
<li>Upcoming Events</li>
</ul>
</li>
<!-- PRESS -->
<li>
Press
<ul class="vertical menu" style="background:#000000;">
<li>Press Pack</li>
<li>In The Press</li>
<li>Meet Us</li>
<li>Contact</li>
</ul>
</li>
</ul>
</div>
The menu works fine on larger screens laptop, desktop and also small screens , but on a IPad the menu is off the screen to the right -- any ideas??
I was using the following link:
https://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.js
I downloaded the latest foundation files and used those instead - this solved the problem!!
Related
the bootstrap can't show style right use those code:
<!DOCTYPE html>
<html class='no-js' lang='en'>
<head>
<meta charset='utf-8'>
<meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'>
<title>登陆</title>
<link rel="stylesheet" href="/css/bootstrap.css">
</head>
<body class='main page'>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.js"></script>
</body>
</html>
it's so ugly.
i run it on vscode with node.js windows11, chrome.
this result is so ugly ,the net show is so pretty, what' wrong with my code which all are copied from the bootstrap net.
what's wrong with my code? it's all from the bootstrap.com
The following code outputs the ui:repeat tag on the genereated html, and its breaking my layout.
<nav role="navigation" class="f_left f_xs_none d_xs_none t_xs_align_l">
<ul class="horizontal_list main_menu clearfix">
<ui:repeat value="#{categoryBean.rootCategories}" var="cat">
<li class="relative f_xs_none m_xs_bottom_5">
<a href="#{cat.url}" class="tr_delay_hover color_light tt_uppercase">
<b>#{cat.name}</b>
</a>
</li>
</ui:repeat>
</ul>
</nav>
Here the Output generated by the code above:
<nav role="navigation" class="f_left f_xs_none d_xs_none t_xs_align_l">
<ul class="horizontal_list main_menu clearfix"><ui:repeat>
<li class="relative f_xs_none m_xs_bottom_5">
<a href="florestal" class="tr_delay_hover color_light tt_uppercase">
<b>Florestal</b>
</a>
</li></ui:repeat><ui:repeat>
<li class="relative f_xs_none m_xs_bottom_5">
<a href="jardinagem" class="tr_delay_hover color_light tt_uppercase">
<b>Jardinagem</b>
</a>
</li></ui:repeat><ui:repeat>
<li class="relative f_xs_none m_xs_bottom_5">
<a href="pragas-urbanas" class="tr_delay_hover color_light tt_uppercase">
<b>Pragas Urbanas</b>
</a>
</li></ui:repeat>
</ul>
</nav>
BalusC, thanks for JSF version tip, I looked the Mojarra changelog and I found a bug on ui:repeat, I updated to Mojarra 2.2.7 and the problemn was solved.
I'm building a custom theme. I need to override how the list of blog posts is rendered to match my desired look. I can't seem to figure out how to render the blog post's title( or any other piece of info for that matter ). All of my markup and hard coded info renders, but the dynamic data does not.
Inside of my theme folder "~/Views/Items/Content-BlogPost.cshtml":
<div class="media row-fluid">
<div class="span1 hidden-phone">
<!-- Date desktop -->
<div class="date-wrapper"><span class="date-m">Jan</span> <span class="date-d">20</span> </div>
<!-- Meta details desktop -->
<p class="meta muted"><i class="icon-user"></i>Alex </p>
</div>
<!-- PROBLEM IS HERE!!!!!!!!!!! Title does not render! -->
<div class="span11"><h1>#Display(Model.Content.Title)</h1>
<div class="media-body">
<div class="tags">coding / event</div>
<h4 class="title media-heading">a nec in sed hac ultrices cursus</h4>
<!-- Meta details mobile -->
<ul class="inline meta muted visible-phone">
<li><i class="icon-calendar"></i><span class="visible-desktop">Created:</span> Sun 20th Jan 2013</li>
<li><i class="icon-user"></i>Alex</li>
</ul>
<a href="blog-post.htm" class="media-object">
<img src="img/blog/ape.jpg" alt="Picture of frog by Ben Fredericson">
</a>
<p>#Display(Model.Content)</p>
<ul class="inline links">
<li><i class="icon-circle-arrow-right"></i>Read more</li>
<li><i class="icon-comment"></i>50 Comments</li>
</ul>
</div>
</div>
</div>
Thanks to Bertrand, I tracked down the way to do this.
Model.ContentItem.TitlePart.Title
I am trying to implement a YUI2 Menu component into a JSF. I coded it in a normal HTML file and it works.
(source: alvinsim.com)
But when i ported the code to JSF, it didn't show properly. I think it is because JSF couldn't find the YUI2 skin.
(source: alvinsim.com)
I am using Netbeans 7.2, Java JDK6, and Glassfish3. My project structure is like this.
(source: alvinsim.com)
Below is my JSF code.
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>YUI2 Menu</title>
<h:outputStylesheet name="styles.css" library="css" />
<!-- ===== YUI Library Implementation ===== -->
<!-- Fonts CSS - Recommended but not required -->
<link rel="stylesheet" type="text/css"
href="#{facesContext.externalContext.requestContextPath}/resources/yui/fonts/fonts-min.css" />
<!-- <h:outputStylesheet name="yui/fonts/fonts-min.css" /> -->
<!-- Core + Skin CSS -->
<link rel="stylesheet" type="text/css"
href="#{facesContext.externalContext.requestContextPath}/resources/yui/menu/assets/skins/sam/menu.css" />
<!-- <h:outputStylesheet name="yui/menu/assets/skins/sam/menu.css" /> -->
<!-- Dependencies -->
<script src="#{facesContext.externalContext.requestContextPath}/resources/yui/yahoo-dom-event/yahoo-dom-event.js"></script>
<script src="#{facesContext.externalContext.requestContextPath}/resources/yui/container/container_core-min.js">
</script>
<!-- <h:outputScript name="yui/yahoo-dom-event/yahoo-dom-event.js" />
<h:outputScript name="yui/container/container_core-min.js" /> -->
<!-- Source File -->
<!-- <script src="#{facesContext.externalContext.requestContextPath}/resources/yui/menu/menu-min.js"></script> -->
<h:outputScript name="yui/menu/menu-min.js" />
<!-- ===== END ===== -->
</h:head>
<h:body>
<div id="mymenubar" class="yuimenubar yuimenubarnav">
<div class="bd">
<ul class="first-of-type">
<li class="yuimenubaritem first-of-type">
<a class="yuimenubaritemlabel" href="#file">File</a>
<div id="file" class="yuimenu">
<div class="bd">
<ul>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#">
New File <em class="helptext">Ctrl + N</em>
</a>
</li>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#">New Folder</a>
</li>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#open">Open <em class="helptext">
Ctrl + O</em>
</a>
<div id="open" class="yuimenu">
<div class="bd">
<ul class="first-of-type">
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#">Application 1</a>
</li>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#">Application 2</a>
</li>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#">Application 3</a>
</li>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#">Application 4</a>
</li>
</ul>
</div>
</div>
</li>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#">
Print <em class="helptext">Ctrl + P</em>
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="yuimenubaritem first-of-type">
<a class="yuimenubaritemlabel" href="#">Edit</a>
<div id="pim" class="yuimenu">
<div class="bd">
<ul class="first-of-type">
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#"> Undo<em class="helptext">Ctrl + Z</em></a>
</li>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#"> Redo<em class="helptext">Ctrl + Y</em></a>
</li>
</ul>
<ul>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#"> Cut<em class="helptext">Ctrl + X</em></a>
</li>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#"> Copy<em class="helptext">Ctrl + C</em></a>
</li>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#">
Paste<em class="helptext">Ctrl + V</em>
</a>
</li>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#"> Delete<em class="helptext">Del</em></a>
</li>
</ul>
<ul>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#">
Select All<em class="helptext">Ctrl + A</em>
</a>
</li>
</ul>
<ul>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#"> Find<em class="helptext">Ctrl + F</em></a>
</li>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#">
Find Again<em class="helptext">Ctrl + G</em>
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="yuimenubaritem first-of-type">
<a class="yuimenubaritemlabel" href="#">Very Long Menu</a>
<div id="longMenu" class="yuimenu">
<div class="bd">
<ul>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#">Very, very long Item 1</a>
</li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 2</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 3</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 4</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 5</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 6</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 7</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 8</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 9</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 10</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 11</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 12</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 13</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 14</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 15</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 16</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 17</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 18</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 19</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 20</a></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
<script>
YAHOO.util.Event.onDOMReady(function () {
// Instantiate a MenuBar, passing in the id of the HTML element
// representing the MenuBar.
var oMenuBar = new YAHOO.widget.MenuBar("mymenubar", {
autosubmenudisplay: true,
maxheight: 300
});
// Render the MenuBar instance
oMenuBar.render();
});
</script>
</h:body>
In my code, I did change from using the <link /> tag to <h:outputStylesheet /> tag (and same for the JavaScript), and it still doesn't work.
Can someone point me where I am doing it wrong?
After several rounds of debugging using firebug and IE9's own debugging tool, and code switching, I finally realized why it didn't work. It was a simple mistaken which was overlooked when porting my code from HTML to JSF.
The reason it didn't work is because I left out the code to load the YUI skin in the <h:body /> or parent element. So the <h:body /> tag should look like <h:body styleClass="yui-skin-sam">.
And the end result is below
(source: alvinsim.com)
We are developing an application with the layout near to the jqm examples here( table of contents on left and contents at right) but we want the same behavior as Sencha mobile, when it's in portrait, the table of contents collapses in a navigation button here
Is it possible to do with jqm?
I have created a sample jQuery Mobile application which works like this - When in portrait mode,a split view layout will be shown.When in landscape mode,navigation can be done via a button in the header.For illustrating this in a desktop browser,I have given the width to check as 500px.If width>500 px ,split view. If width <500px, button in header.
This is the source code:
<!DOCTYPE html>
<html>
<head>
<title>Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<link rel="stylesheet" href="http://jquerymobile.com/test/docs/_assets/css/jqm-docs.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script>
function showNavList() {
$(".navdiv").toggle();
}
$(".page").live("pagebeforeshow", function() {
$(".navdiv").hide();
});
</script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<style>
.content-secondary{
margin: 0px !important;
padding:0px !important;
}
/*refer http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ */
/* Smartphones (landscape) ----------- */
#media all and (min-width: 501px){/*For demo in desktop browsers,gave 501.Should be 321px.Refer above link*/
.headerNav{
display:none !important;
}
.content-secondary{
display: block;
}
.navdiv{
display:none !important;
}
}
/* Smartphones (portrait) ----------- */
#media all and (max-width: 500px){/*320px*/
.headerNav{
display:block !important;
}
.content-secondary{
display: none;
}
}
</style>
</head>
<body>
<div data-role="page" class="page" id="page1">
<div class="navdiv" style="width:150px;top:38px;left:5px;position:absolute;z-index:1000;display:none">
<ul data-role="listview">
<ul data-role="listview" data-theme="c">
<li class="ui-btn-active" data-icon="false">
Page 1
</li>
<li data-icon="false">
Page 2
</li>
<li data-icon="false">
Page 3
</li>
</ul>
</ul>
</div>
<div data-role="header">
<h1>Page 1</h1>
Navigation
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
Content1
</div>
<div class="content-secondary">
<ul data-role="listview" data-theme="c">
<li class="ui-btn-active" data-icon="false">
Page 1
</li>
<li>
Page 2
</li>
<li>
Page 3
</li>
</ul>
</div>
</div><!-- /content -->
</div><!-- /page -->
<div data-role="page" class="page" id="page2">
<div class="navdiv" style="width:150px;top:38px;left:5px;position:absolute;z-index:1000;display:none">
<ul data-role="listview">
<ul data-role="listview" data-theme="c">
<li data-icon="false">
Page 1
</li>
<li data-icon="false" class="ui-btn-active">
Page 2
</li>
<li data-icon="false">
Page 3
</li>
</ul>
</ul>
</div>
<div data-role="header">
<h1>Page 2</h1>
Navigation
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
Content2
</div>
<div class="content-secondary">
<ul data-role="listview" data-theme="c">
<li data-icon="false">
Page 1
</li>
<li class="ui-btn-active" data-icon="false" >
Page 2
</li>
<li data-icon="false">
Page 3
</li>
</ul>
</div>
</div><!-- /content -->
</div><!-- /page -->
<div data-role="page" class="page" id="page3">
<div class="navdiv" style="width:150px;top:38px;left:5px;position:absolute;z-index:1000;display:none">
<ul data-role="listview">
<ul data-role="listview" data-theme="c">
<li data-icon="false">
Page 1
</li>
<li data-icon="false">
Page 2
</li>
<li data-icon="false" class="ui-btn-active">
Page 3
</li>
</ul>
</ul>
</div>
<div data-role="header">
<h1>Page 3</h1>
Navigation
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
Content3
</div>
<div class="content-secondary">
<ul data-role="listview" data-theme="c">
<li>
Page 1
</li>
<li>
Page 2
</li>
<li class="ui-btn-active">
Page 3
</li>
</ul>
</div>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
This is not a foolproof application.But just a rough copy to illustrate how this feature can be done.There are still lot of things to be done to make this work perfectly.
To make it work I have used the concept of media queries.Using it you can selectively hide/show the layout depending on the browser width(orientation of device).
P.S. I have used jqm-docs.css for this example.This css has other media queries too targeting other widths.So there might be some weird layout issues when you test this code.Please modify that css to remove the unwanted media queries.
Let me know if it helps