The menu problem is on the mobile version, for the desktop it works fine.
In the mobile version the menu works, but when I go on one page and scroll down, anywhere I press on the left side redirects me to another page in the menu. Exactly where displays the menu page when it is open.
I mention that I have a menu with three lines and after entering a page click on X and the menu disappears, only that instead of pages if I click directs me to other pages on the site.
How to solve it?
<div class="center-container">
<div class="w3_agile_header">
<div class="w3_agileits_logo">
<div class="w3_menu">
<div class="agileits_w3layouts_banner_info">
</div>
<div class="mobile-nav-button">
<div class="mobile-nav-button__line"></div>
<div class="mobile-nav-button__line"></div>
<div class="mobile-nav-button__line"></div>
</div>
<nav class="mobile-menu">
<ul>
<li><a href="https://ioanasandu.ro/online/web/index.html" >Despre mine</a></li>
<li>Repertoriu</li>
<li>Discografie</li>
<li>Evenimente</li>
<li>Foto</li>
<li>Video</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div class="clearfix"></div>
</div>
Related
Just like the image I want to make, when Home is clicked, it is located in the navigation-aside-wrapper on the right.
Opening the navigation-aside-item page, I couldn't figure out how to do this. I would love it if you could help.
image
<div class="container">
<div class="navigation">
<div class="navigation-wrapper">
<div class="navigation-aside-item">
<span>Home</span>
</div>
<div class="navigation-aside-item">
<span>About</span>
</div>
</div>
</div>
<div class="navigation-aside-wrapper">
<div class="navigation-aside-item">
Home Child
</div>
<div class="navigation-aside-item">
About Child
</div>
</div>
</div>
If you are wanting to show different page content when you click an menu item you can use Javascript to show the correct content for each button.
Here is a post that shows how to do this. show hide html code/content using nav menu
I have a main menu. This main menu opens hidden divs that also contain inner menus that show and hide content.
You can see this in action here: http://shirleycollinsmovie.com/collins-html5/index.html#about
The user can select from the main menu and open up one of the hidden divs, and then explore the contents of the inner menu.
However when the user closes the hidden div and then opens a new one, then returns to the previous one again, instead of it displaying the contents from the beginning again it shows them exactly where they were when they left the hidden div previously. I want it to display the contents from the beginning again.
This is the code I have which shows the hidden divs from the main menu (I am using the same code for the inner menus as well):
$('#menu nav a').click(function() {
$('.draggable').hide();
$(this.getAttribute('href')).show()
});
<div id="menu">
<h1>main header</h1>
<nav>
<a id="about-link" href="#about">About</a>
<a id="news-link" href="#news">News</a>
<a id="foundation-link" href="#foundation">Foundation</a>
<a id="contact-link" href="#contact-info">Contact</a>
</nav></div>
<div id="foundation" class="hidden draggable-scroll">
<div id="foundation-nav" class="box-text">
<nav>
The Story so Far
What will the Foundation do?
The Manifesto
Who is the Foundation?
</nav>
</div>
<div id="foundation-opening" class="box-text foundation-info">
<h2>header </h2>
<p>
</p></div>
<div id="the-story" class="box-text foundation-info hidden">
<h2>The Story so far: </h2>
<p>
And she’s not done yet,</p>
</div>
<div id="what" class="box-text foundation-info hidden">
<p>
The Ballad of </p>
</div>
<div id="manifesto" class="box-text foundation-info hidden">
<h2>The proposed Manifesto: </h2>
<p>
The reason for the foundation to exist: </p>
</div>
<div id="who" class="box-text foundation-info hidden">
<h2>Who is the Foundation?</h2>
<p> </p>
</div>
<div class="close-box">
x</div>
</div>
Perhaps there is a way to target the starting content from the href of the main menu?
Or is there a way within the jQuery to re-hide the hidden content when the users selects from the main menu again?
A simple workaround,
The following code finds first/beginning Menu Item - a:first selector and trigger click on it.
$('#menu nav a').click(function() {
$('.draggable').hide();
$(this.getAttribute('href')).show().find('nav a:first').click();
});
This would always open first <a> of <nav>.
It works with your site link. Tried out in console.
I have a PhoneGap application wich uses a jQuery Mobile multipage layout. On every page (page A and page B) I have a navbar for switching between pages. No custom code involved. I also have a panel on every page which opens by clicking the 'new' button in the header.
Sometimes it happens that I hit the button (maybe to soft? or to fast?) to open to panel but the buttons just changes it state to "active" and the panel does not open. I cannot click the button anymore. When I change the page and go back (all by using the navbar) page A appears again and now the panel is opened. This is a strange behaviour but could be plausible. But trying to close it now is just impossible. Clicking one of the buttons in the panel is as inactive as clicking on the page itself. The whole thing seems to be froozen.
<div data-role="page" id="one">
<div data-role="header" data-transition="fixed">
New
<h1 class="header">myApp</h1>
Options
</div>
<!-- Header -->
<div data-role="panel" id="panel_one">
<div data-role="collapsible-set" class="menu"></div>
</div>
<!-- Panel -->
<div data-role="content">
<div data-role="navbar">
<ul>
<li><a href="#one" data-transition="none" class="ui-btn-active" >A</a></li>
<li><a href="#two" data-transition="none" >B</a></li>
</ul>
</div>
</div>
<!-- Content -->
</div>
<!-- Page One-->
<div data-role="page" id="two">
<div data-role="header" data-transition="fixed">
New
<h1 class="header">myApp</h1>
Options
</div>
<!-- Header -->
<div data-role="panel" id="panel_two">
<div data-role="collapsible-set" class="menu"></div>
</div>
<!-- Panel -->
<div data-role="content">
<div data-role="navbar">
<ul>
<li>A</li>
<li><a href="#two" data-transition="none" class="ui-btn-active" >B</a></li>
</ul>
</div>
</div>
<!-- Content -->
</div>
<!-- Page Two-->
menu() creates the content of the Menu which is not shown in the example. Another method (loadPanel()) is boud to the pageshow-event and will populate the sidebar with the buttons. every button will execute
var pageId = $.mobile.activePage.attr("id");
$("#panel_" + pageId).panel('close');
before anything else is executed. However, all of this works most of the time and I would just like to know if some observed a similar behaviour.
As per jQuery mobile documentation
A panel must be a sibling to the header, content and footer elements inside a jQuery Mobile page. You can add the panel markup either before or after these elements, but not in between.
Maybe you should move up your panel because it may be the cause of the strange behaviour
I am using jQuery Mobile 1.3.1 and finding my dialog which is opened from a panel item is not enabling any button click or listview click and hover functionality. The working panel html code which is opening my dialog is: -
<li data-icon="grid">Change Name</li>
The dialog html which I've simplified as much as possible is: -
<div id="changeNameDialog" data-role="page" data-theme="b" data-content-theme="d">
<div data-role="header" data-theme="b">
<h1>Change Name</h1>
</div>
<div data-role="content">
<div>
<ul id="nameList" data-role="listview">
<li>j1</li>
<li>j2</li>
<li>j3</li>
<li>j4</li>
</ul>
</div>
<div>
<button type="button" data-inline="true" data-theme="b" onclick="putNameChange();">Change</button>
</div>
</div>
</div>
If I change my panel list item data-rel attribute to be data-rel="page", the button and list click and hover functionality works fine i.e.
<li data-icon="grid">Change Name</li>
The only thing that works on the Dialog is the dialogs (x) icon close button. What is the Panel doing to the Dialog events?
The twitter bootstrap docs site, the left nav gets fixed to the top in a mobile layout.
ex: http://twitter.github.com/bootstrap/javascript.html
I want to do the same without using the ...docs.css as is done in the Bootstrap site.
Currently, the issue that I'm facing is that the 'affix nav' stays on top of the content in mobile dimensions as you scroll through the content.
<div class="row">
<div class="span3">
<div data-spy="affix">
<ul class="nav nav-list nav-stacked">
<li> Objective
</li>
<li> Experience
</li>
<li> Skills
</li>
<li> Education
</li>
</ul>
</div>
</div>
<div class="span9">
<section id="objective">
<div class="page-header">
<h1>
Objective: <small> Do good </small>
</h1>
</div>
</section>
<section id="experience">
<div class="page-header">
<h1>
Exprience: <small> I worked at a bit </small>
</h1>
</div>
</section>
<section id="skills">
<div class="page-header">
<h1>
skills: <small> my skillz </small>
</h1>
</div>
</section>
<section id="education">
<div class="page-header">
<h1>
education: <small> I went to school </small>
</h1>
</div>
</section>
</div>
http://jsfiddle.net/gPsWe/1/
I want the 'affix nav' to get fixed to the top in a mobile layout with using the latest bootstrap v2.3.1. How do I go about it? Any suggestions?
Menus for mobile screens aren't always the easiest things to work with.
Using the layout you've started with, here's a simple idea where you remove the affixed behaviour for mobile screens: http://jsfiddle.net/panchroma/ZuELd/ . Doing this returns the menu to normal flow so then the content falls nicely into place underneath.
You might need to fine-tune the menu links, or even change them to a horizontal list for mobile screens, but that's easy enough to do from here.
CSS
#media (max-width: 767px){
.affix{
position:static;
}
}
Good luck!