I am learning to make menus. In a tutorial I learned to make a mobile-friendly menu (http://designshack.net/articles/css/responsive-slide-down-navigation). The page I created is at http://nspowers.org/ask/why-menu and uses lists for the links.
The links in the footer work. However, links with identical syntax in the top menu do not link.
Here is the structure of the working footer navigation:
<footer id="hfooter">
<div class="footer_nav">
<nav>
<ul>
<li> Home </li>
<li> Work </li>
<li> About </li>
<li> Contact </li>
</ul>
</nav>
</div>
<div class="copyright">©</div>
</footer>
This is the structure of the top navigation that is not working:
<header id="topnav">
<nav>
<ul>
<li> WORK </li>
<li> ABOUT </li>
<li> CONTACT </li>
</ul>
</nav>
Nav Menu
<h1>This is the 'home' page</h1>
</header><!-- #end #topnav -->
The css is here: http://nspowers.org/ask/why-menu/styles.css.
I would like to learn what other variables may affect successful linking other than the syntax of the links I've looked at in tutorials.
Solved it.
1) First, the menu.js from file has the following in the third section:
$('#topnav nav a,#topnav h1 a,#btmnav nav a').on('click', function(e){
e.preventDefault(); // stop all hash(#) anchor links from loading
});
Thank you to http://disqus.com/ashearlam, this doesn't need to be there. Delete it. It was supposed to stop the menu from linking away within a mobile view. However, it works fine without it. The working menu.js is as follows:
$(function(){
var nb = $('#navbtn');
var n = $('#topnav nav');
$(window).on('resize', function(){
if($(this).width() < 570 && n.hasClass('keep-nav-closed')) {
// if the nav menu and nav button are both visible,
// then the responsive nav transitioned from open to non-responsive, then back again.
// re-hide the nav menu and remove the hidden class
$('#topnav nav').hide().removeAttr('class');
}
if(nb.is(':hidden') && n.is(':hidden') && $(window).width() > 569) {
// if the navigation menu and nav button are both hidden,
// then the responsive nav is closed and the window resized larger than 560px.
// just display the nav menu which will auto-hide at <560px width.
$('#topnav nav').show().addClass('keep-nav-closed');
}
});
$('#navbtn').on('click', function(e){
e.preventDefault();
$("#topnav nav").slideToggle(350);
});
});
2) The webpage was missing a mobile meta viewport, so the website was not being scaled down to a mobile view when viewed on a mobile device. Adding the meta,
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
resolves this issue.
A working version can be found here: http://nspowers.org/ask/menu-solved
Related
I want to set a default tab in jQuery Mobile.
My source code:
<div data-role="tabs" id="tabs">
<div data-role="navbar">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
<div id="one" class="ui-body-d ui-content">
<h1>First tab contents</h1>
</div>
<div id="two">
<ul data-role="listview" data-inset="true">
<li>Acura</li>
<li>Audi</li>
<li>BMW</li>
<li>Cadillac</li>
<li>Ferrari</li>
</ul>
</div>
</div>
$("#tabs").tabs({ active: 0 });
It worked but has no background color, because the first tab is not actually clicked.
I want to set default tab with background when I login in.
No background color demo
To set the active tab, try:
$( "#tabs" ).tabs("option", "active", 1);
Here is a working DEMO
UPDATE: the blue background on the tab button comes from the class ui-btn-active. Either add this class to the button, or instead of setting the active tab, trigger the click event on the appropriate button: http://jsfiddle.net/ezanker/c29gd4h6/1/
I have added class="ui-btn-active" in first tab-li
<div data-role="navbar">
<ul>
<li>One</li>
<li>Two</li>
</ul>
</div><!-- /navbar -->
If not work then try below It working for me when page load only I mean refresh page in browser
Put following code in jquerymobile pagecreate event that will make every first tab selected
$('[data-role="tabs"] a:first').each(function() {
$(this).click();
});
I had put above lines into pagecreate event
$(document).on("pagecreate", "#homepage", function(event) {
$('[data-role="tabs"] a:first').each(function() {
$(this).click();
});
});
In above line #homepage is my page id and pagecreate is event of jquery-mobile that fire when page load/init
HTML
<div data-role="tabs" id="tabs">
<div data-role="navbar">
<ul>
<li>Default</li>
JS
$(document).on("pagecreate", function (event) {
$('#tab-one').trigger('click');
});
I found the existing mentioned solutions had issues:
the one by #ezanker showed the content but didn't set the tab button as active
the one by #Devendra Chhaiya clicked any first link that the tab content contained also! :-)
I also found that the tab wasn't remaining selected when coming back to that page, so I used this solution to fix that too.
there was also an issue with pages loading into tab content, so I had to fix that too
in addition (yes, there's more :-) I wanted to selected a specific tab based on the requirements of that specific page, so I added a class select-this-tab on page generation from the server.
So I modified the one by #Devendra Chhaiya to click only the actual tab button (and not any tab content, keep the tab selected, and also prevent content loading into the tab area. I had to move the trigger from pagecreate to pageinit for it to work:
/*
* https://stackoverflow.com/questions/13837304/jquery-ui-non-ajax-tab-loading-whole-website-into-itself/17384908#17384908
*/
jQuery(function () {
jQuery('base').remove();
jQuery("#tabs").tabs();
});
$(document).on('pageinit', function () {
console.log('pageinit');
/*
* Ensure the correct tab of a set is selected (and only once)
* https://stackoverflow.com/questions/25336233/jquery-mobile-default-tab/64080164#64080164
*/
$('[data-role="tabs"] [data-role="navbar"] ul li.select-this-tab').each(function () {
console.log('Clicking tab');
$(this).removeClass("select-this-tab").find("a").click();
});
/*
* Ensure a tab REMAINS selected when coming back to that page.
* https://stackoverflow.com/questions/16752704/tab-active-state-in-jquery-mobile/23725612#23725612
*/
$('div[data-role="tabs"] [data-role="navbar"] a').click(function (e) {
e.preventDefault();
$('div[data-role="tabs"] [data-role="navbar"] .ui-btn-active').removeClass('ui-btn-active ui-state-persist');
$(this).addClass('ui-btn-active ui-state-persist');
});
You can remove the console.log lines which you can just use to prove the code actually fires.
I'm trying to learn jquery mobile and have been playing around with it for the past few days and things are going alright, but I'm not so sure if I'm taking the proper approach.
I tried making a site with a similar UI as the facebook app. On the top right and left corners of the page's header are buttons that causes the page to slide out like a drawer.
The top left button will slide the page out to the right to reveal a menu, while the top right button will slide out to the left to reveal a form to fill out.
What I did was create divs outside the page and used javascript to slide out the active page, to reveal the menu or form depending on which button is pressed:
<body>
<div id="my-menu">
<ul>
<li>Menu Item 1</li>
</ul>
</div> <!-- end of my-menu -->
<div id="my-form">
<form method="post" action="form-action.php">
<!-- form elements -->
</form>
</div> <!-- end of my-form -->
<div data-role="page" id="home">
<div data-role="header">
</div>
<div data-role="content">
</div>
</div> <!-- end of home -->
</body>
I used my own CSS to style the menu, but I also noticed my theme wasn't applied to "my-form", but everything in the page "home" had all elements properly styled.
I can't put the form inside the page "home" because I will not be able to do sliding drawer effect that I've done with the menu.
Am I suppose to have my own styling applied to the form outside the page or is there a way to apply the jquery mobile theme to elements outside the page?
Would this be the best approach to implement this kind of user interface or is there a better way using what's available in jquery mobile?
Since this will be my UI for the application does that mean I will just copy the same code to all the pages? Or is there a better way to do this?
I'd like to use the best practice for this use case so please offer any advice!
Thanks in advance for the help!
BTW I did the slide menu based on this blog post:
http://blog.aldomatic.com/facebook-style-slide-out-menu-in-jquery-mobile/
Solution 1:
As I told you in comments, jQM style can not be applied outside of page container but that should not prevent you from using its css.
If you are using firefox, use firebug plugin and take a look at every jQM page element, copy its structure and css. Use it to create styling outside page container.
One more thing, new elements are going to be styled but they will not have functionality, you will need to redo it by yourself.
Solution2:
Have your content inside a data-role="page" div at page-load, let jQuery Mobile style the page, and then move your content div out of the data-role="page" div to be a child of the body tag.
In order to add a fade transition to addClass/removeClass I am using jQuery UI:
$(document).ready(function(){
$('header nav a').hover(
function(){
$('header').stop().removeAttr("style").addClass('header-pink', 'slow')
},
function(){
$('header').stop().removeClass('header-pink', 'slow')
}
)
});
My goal is: to change (with a fade animation/effect) the background-color of the parent element (header) when :hover the child element (hover nav a). The css class is very simple:
.header-pink { background: pink; }
The HTML:
<header>
<nav>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</nav>
</header>
Of course, I am calling jQuery and jQuery UI with no errors:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"</script>
<script src="js/libs/jquery.effects.core.min.js"></script>
The jQuery script does not work properly because:
The class is added (onmouseover) but with no transition (fade) effect.
The class is added in a undesired way: <header style="background:
pink;"> I use .removeAtrr("style") to avoid this odd behavior.
The class is not removed (onmouseout).
Using .animate() to animate colors with jQuery UI is something I prefer to avoid because I am using variables with LESS and, of course, I want the style only to be modified by the stylesheet.
Please, check my project to get an idea. As you can see, my intention is to replace the background color of the fixed <header> with the color of the links when you place the cursor over the links. In other words, the background color of the <header> turns with a transitional fade animation/effect as blue or pink as soon as the pointer is :hover the link "Posts." or "Links." but it recovers its original state (with no css class, .removeClass()) as soon as the pointer is out with the same transitional fade animation/effect. Please note that my project is still in development and I am currently testing the effect with same properties for all the links; when I accomplish the desired result I will apply the individual properties (background-color) for every link.
I'm using jQuery UI's tabs to divide content on my page. I have a 'link bar' I would like to have hang at the bottom of each tab. (The tab text will change but generally they will navigate the user left or right through tabs.)
Hosting the #linkBar div inside the first tab makes it 'look' right, inside Themeroller's border. Putting it just outside the 'parent tab' div places the links below the theme's border. I've tried creating a spacer div but it just pushes #linkBar down further.
Of course when the user switches to another tab, the link bar goes away. How is ownership of elements organized between tabs? Should I dynamically destroy the #linkBar div on the tab being navigated away from and rebuild it in the tab being navigated to? Or is there a better way to move it between them, or just manage visibility?
I would like to have the link bar follow the content on each tab as a footer, 'floating' one or two lines below the last content of each tab (rather than having it in a fixed position relative to the tab bar).
Ok ... It was simply adding the jQuery UI classes to the linkBar. Check out my working jsFiddle demo:
I moved the linkBar div out of the tabOne div and put it at the bottom of the tabs div:
<div id="container">
<div id="title">
<h1>title bar</h1>
</div>
<div id="tabs">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<div id="tabone">
content goes here
<br><br><br><br>more stuff<br><br><br>more stuff<br><br>
</div>
<div id="tabtwo">
content goes here...
</div>
<div id="tabthree">
content goes here...
</div>
<div id="linkBar">
<span id="leftLink"><< left link</span>
<span id="rightLink">right link >></span>
</div>
</div>
</div>
I slightly altered the linkBar style by giving it a top and bottom margin as well as hiding it by default:
#linkBar {
display: none;
margin: 10px auto;
}
Then I simply added the jQuery UI classes to the $linkBar. I slightly altered the jQuery to be more readable:
$("#accordion").accordion({ header: "h3" });
var $tabs = $("#tabs"),
$linkBar = $("#linkBar");
$linkBar.addClass("ui-tabs-panel ui-widget-content ui-corner-bottom");
$linkBar.show();
$tabs.tabs();
$('#title').click(function() {
$tabs.tabs('select', 0);
return false;
});
Note: You could just add class="ui-tabs-panel ui-widget-content ui-corner-bottom" to the linkBar div and be done with it. But, I think I like it better managed in the JS.
Ive built a webpage with 'tabs' using rails. When a user clicks a tab, a new page loads. I want to format it so the tabs are always in the same place on the page as a user clicks them. This happens as long as the user has not scrolled down on the page. If a user has scrolled down, clicking on the tab will refresh the page and it is no longer scrolled down - which make clicking the tabs look bad. Is there a way to keep the spot on the page where the user has scrolled down, without using Javascript? If it must be done with Javascript, any suggestions?
T
alt text http://img.skitch.com/20100526-xtrn2ncbetj6bs1a2s4xwywfjh.png
Without Javascript, nope. If they were at an exact location, you would be good to go, using an anchor (example.html#anchor), but since you don't know the exact location, you're pretty much out of luck.
So sorry!
You can do it but you will need a small amount of Javascript and some CSS hiding.
Suppose these are your tabs:
<ul id="nav">
<li class="tab">Content 1</li>
<li class="tab">Content 2</li>
</ul>
And suppose this is your content:
<div id="content" class="content1">
<div id="content1">
<h1>Some content</h1>
<p>This is my content.</p>
</div>
<div id="content2">
<h1>More content</h1>
<p>This is my other content.</p>
</div>
</div>
What you would need to do then, and I am demonstrating using the Ext.Core library, is:
<script type="text/javascript">
Ext.onReady(function() {
Ext.select('.tab a').on('click', function(ev, el) {
ev.stopEvent();
var content_id = el.href.replace('#', '');
Ext.get('content').removeClass(['content1', 'content2', ...]).addClass(content_id);
});
});
</script>
You also need a little CSS like so:
#content.content2 #content1,
#content.content1 #content2 {
display:none;
}
This hides the other content we are not looking at. We set a class on the content container called contentN which is the href of the link for that tab. So if we have a tab with href="#content1" then we add a class to the content container called content1 and now that content is visible and other content is not.
The Ext.Core samples page has another way of doing it, and they have an example up showing it working. Their way is more involved than this.