i have one page which have some div with different id for move between div , i move to one of div by panel but when i return to main page list of item(panel) does not work. this is Part of the code.... What should I do
<div data-role="page" id="main" data-theme="a">
<div data-role="panel" data-position-fixed="true" data-display="overlay" id="listpanel">
<ul data-role="listview" style="float:right">
<li>
item1
</li>
<li>
item2
</li>
</ul>
</div>
<div data-role="header">
<h1>mainheader</h1>
</div>
<div data-role="page" id="page1" data-theme="a">
<div data-role="panel" data-position-fixed="true" data-display="overlay" id="listpanel">
<ul data-role="listview" style="float:right">
<li>
item1
</li>
<li>
item2
</li>
</ul>
</div>
<div data-role="header">
<h1>item1</h1>
</div>
<div data-role="navbar">
<ul class="ui-btn ui-corner-all">
<li>list</li>
<li>mainpage</li>
</ul>
</div>
<div data-role="content">Content</div>
</div>
<div data-role="page" id="page2" data-theme="a">
<div data-role="panel" data-position-fixed="true" data-display="overlay" id="listpanel">
<ul data-role="listview" style="float:right">
<li>
item1
</li>
<li>
item2
</li>
</ul>
</div>
<div data-role="header">
<h1>item2</h1>
</div>
<div data-role="navbar">
<ul class="ui-btn ui-corner-all">
<li>list</li>
<li>mainpage</li>
</ul>
</div>
<div data-role="content">Content</div>
</div>
Related
I can not figure out how to turn off switching between tabs on the keyboard keys? For some reason, the data-wrap-on-keys = "false" property does not work. Maybe someone ran into it? I just need to switch keyboard did not work
$(document).ready(function () {
$(document).foundation();
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.js"></script>
<div class="grid-container">
<div class="grid-x grid-margin-x">
<div class="cell medium-3">
<ul class="vertical tabs" data-tabs id="example-tabs" data-wrap-on-keys="false">
<li class="tabs-title is-active">Tab 1</li>
<li class="tabs-title">Tab 2</li>
<li class="tabs-title">Tab 3</li>
<li class="tabs-title">Tab 4</li>
<li class="tabs-title">Tab 5</li>
<li class="tabs-title">Tab 6</li>
</ul>
</div>
<div class="cell medium-9">
<div class="tabs-content" data-tabs-content="example-tabs">
<div class="tabs-panel is-active" id="panel1v">
<p>One</p>
<p>Check me out! I'm a super cool Tab panel with text content!</p>
</div>
<div class="tabs-panel" id="panel2v">
<p>Two</p>
<img class="thumbnail" src="assets/img/generic/rectangle-7.jpg">
</div>
<div class="tabs-panel" id="panel3v">
<p>Three</p>
<p>Check me out! I'm a super cool Tab panel with text content!</p>
</div>
<div class="tabs-panel" id="panel4v">
<p>Four</p>
<img class="thumbnail" src="assets/img/generic/rectangle-2.jpg">
</div>
<div class="tabs-panel" id="panel5v">
<p>Five</p>
<p>Check me out! I'm a super cool Tab panel with text content!</p>
</div>
<div class="tabs-panel" id="panel6v">
<p>Six</p>
<img class="thumbnail" src="assets/img/generic/rectangle-8.jpg">
</div>
</div>
</div>
</div>
</div>
You can do so by calling $('[data-tabs] *').off('keydown.zf.tabs') after initializing foundation
$(document).ready(function () {
$(document).foundation();
$('[data-tabs] *').off('keydown.zf.tabs')
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.js"></script>
<div class="grid-container">
<div class="grid-x grid-margin-x">
<div class="cell medium-3">
<ul class="vertical tabs" data-tabs id="example-tabs" data-wrap-on-keys="false">
<li class="tabs-title is-active">Tab 1</li>
<li class="tabs-title">Tab 2</li>
<li class="tabs-title">Tab 3</li>
<li class="tabs-title">Tab 4</li>
<li class="tabs-title">Tab 5</li>
<li class="tabs-title">Tab 6</li>
</ul>
</div>
<div class="cell medium-9">
<div class="tabs-content" data-tabs-content="example-tabs">
<div class="tabs-panel is-active" id="panel1v">
<p>One</p>
<p>Check me out! I'm a super cool Tab panel with text content!</p>
</div>
<div class="tabs-panel" id="panel2v">
<p>Two</p>
<img class="thumbnail" src="assets/img/generic/rectangle-7.jpg">
</div>
<div class="tabs-panel" id="panel3v">
<p>Three</p>
<p>Check me out! I'm a super cool Tab panel with text content!</p>
</div>
<div class="tabs-panel" id="panel4v">
<p>Four</p>
<img class="thumbnail" src="assets/img/generic/rectangle-2.jpg">
</div>
<div class="tabs-panel" id="panel5v">
<p>Five</p>
<p>Check me out! I'm a super cool Tab panel with text content!</p>
</div>
<div class="tabs-panel" id="panel6v">
<p>Six</p>
<img class="thumbnail" src="assets/img/generic/rectangle-8.jpg">
</div>
</div>
</div>
</div>
</div>
Hi I am new to bootstrap and jQuery. I have created a bootstrap Tab, which is working fine. The tabs are changing by header, but I also needs pagination to change Tab, which I am not able to do. Following is my scenario,
Tab 1 --> next button --> go to tab 2
Tab 1 <-- previous -- Tab 2 -- next ---> Tab 3
Tab 2 <-- previous -- Tab 3
Can any one help. Following is my HTML. This is just an example, I can have variable number of tabs.
<div class="row">
<!-- tabs -->
<div class="col-md-3 col-sm-3">
<ul class="nav nav-tabs nav-stacked nav-alternate">
<li>
Question - 1
</li>
<li>
Question - 2
</li>
<li>
Question - 3
</li>
</ul>
</div>
<!-- tabs content -->
<div class="col-md-9 col-sm-9">
<div class="tab-content tab-stacked nav-alternate">
<div id="tab_1" class="tab-pane active">
<div class="panel panel-default">
<div class="panel-body">
<p>Some Text Tab 1</p>
</div>
</div>
<ul class="pager">
<li class="next"><a class="radius-0" href="#" data-toggle="tab">Next →</a></li>
</ul>
</div>
<div id="tab_2" class="tab-pane">
<div class="panel panel-default">
<div class="panel-body">
<p>Some Text Tab 2</p>
</div>
</div>
<ul class="pager">
<li class="previous"><a class="radius-0" href="#">← Previous</a></li>
<li class="next"><a class="radius-0" href="#">Next →</a></li>
</ul>
</div>
<div id="tab_3" class="tab-pane">
<div class="panel panel-default">
<div class="panel-body">
<p>Some Text Tab 3</p>
</div>
</div>
<ul class="pager">
<li class="previous"><a class="radius-0" href="#">← Previous</a></li>
</ul>
</div>
</div>
</div>
</div>
Updated jQuery script to attach to the previouse/next link.
Updated class="active" to the li tag for Question-1.
<!-- tabs -->
<div class="col-md-3 col-sm-3">
<ul class="nav nav-tabs nav-stacked nav-alternate">
<li class="active">
Question - 1
</li>
<li>
Question - 2
</li>
<li>
Question - 3
</li>
</ul>
</div>
<!-- tabs content -->
<div class="col-md-9 col-sm-9">
<div class="tab-content tab-stacked nav-alternate">
<div id="tab_1" class="tab-pane active">
<div class="panel panel-default">
<div class="panel-body">
<p>Some Text Tab 1</p>
</div>
</div>
<ul class="pager">
<li class="next"><a class="radius-0" href="#" data-toggle="tab">Next →</a></li>
</ul>
</div>
<div id="tab_2" class="tab-pane">
<div class="panel panel-default">
<div class="panel-body">
<p>Some Text Tab 2</p>
</div>
</div>
<ul class="pager">
<li class="previous"><a class="radius-0" href="#">← Previous</a></li>
<li class="next"><a class="radius-0" href="#">Next →</a></li>
</ul>
</div>
<div id="tab_3" class="tab-pane">
<div class="panel panel-default">
<div class="panel-body">
<p>Some Text Tab 3</p>
</div>
</div>
<ul class="pager">
<li class="previous"><a class="radius-0" href="#">← Previous</a></li>
</ul>
</div>
</div>
</div>
<script>
$('.next').click(function(){
$('.nav-tabs > .active').next('li').find('a').trigger('click');
});
$('.previous').click(function(){
$('.nav-tabs > .active').prev('li').find('a').trigger('click');
});
</script>
I'm building a campaign site for my school. I am implementing a sidebar that changes colour on different sections of the website when its in viewport. I'm unable to make the scrollspy work.
This is what I have: https://codepen.io/aahlfeeyann/pen/oeBGdq
<body data-spy="scroll" data-target="#sidebar">
<div class="wrapper">
<nav id="sidebar">
<ul class="sidebar visible">
<li id="step1" class="active">
<a href="#hero">
<span>Home</span>
</a>
</li>
<li id="step2">
<a href="#about">
<span>About this Campaign</span>
</a>
</li>
<li id="step3">
<a href="#mvps">
<span>Our Participants</span>
</a>
</li>
<li id="step4">
<a href="#appreciation">
<span>How to fight Procrastination</span>
</a>
</li>
<li id="step5">
<a href="#details">
<span>Event Details</span>
</a>
</li>
<li id="step6">
<a href="#team">
<span>Our Team!</span>
</a>
</li>
</ul>
</nav>
<div class="bg-wrapper">
<div class="section" id="hero">
</div>
<div class="section" id="about">
<h1>About the Campaign</h1>
</div>
<div class="section" id="mvps">
<h1>Our Participants</h1>
</div>
<div class="section" id="appreciation">
<h1>Appreciation...?</h1>
</div>
<div class="section" id="details">
<h1>Event Information</h1>
</div>
<div class="section" id="team">
<h1>About the Team</h1>
</div>
</div>
</div>
</body>
Add nav class to ul element.
As per Bootstrap Docs
Scrollspy currently requires the use of a Bootstrap nav component for
proper highlighting of active links.
HTML
<ul class="sidebar visible nav">
.....
...
..
.
</ul>
Scrollspy Docs Reference
Hope This Helps..
I'm trying to correct a bug that's recently been triggered in my multi-page mobile application with a panel dialog. At random, JQuery seems to shorten the min-height of any given page, causing the black footer div to jump up and the side panel to shorten. This happens either when navigating to a new page or when opening the side menu panel.
I've attempted to manipulate the CSS per this threads: jQuery Mobile not resizing page correctly
And then attempted a JavaScript fix here using the window resize event: jQuery mobile page height
But neither have worked so far. It seems the "resize" event never fires, so the callback would never run. I'm not sure what other event I could try that would fire when using JQuery Mobile.
See the jsfiddle for the demonstration: http://jsfiddle.net/m8ws6479/
Code here:
<body>
<div data-role="page" data-position="fixed" id="page1">
<div data-role="panel" data-display="push" id="menu1" class="menu">
<div class="menulist">
<ul>
<li>
Page 1
</li>
<li>
Page 2
</li>
<li>
Page 3
</li>
<li>
Page 4
</li>
</ul>
</div>
</div>
<div data-role="header" class="menubar">
<div class="sidebutton">
Menu1
</div>
</div>
<div data-role="main" class="ui-content">
<div><p>This is page 1</p></div>
</div>
<div data-role="footer" style="width:100%; height:200px; background: black; position:absolute; bottom: 0;"></div>
</div>
<div data-role="page" data-position="fixed" id="page2">
<div data-role="panel" data-display="push" id="menu2" class="menu">
<div class="menulist">
<ul>
<li>
Page 1
</li>
<li>
Page 2
</li>
<li>
Page 3
</li>
<li>
Page 4
</li>
</ul>
</div>
</div>
<div data-role="header" class="menubar">
<div class="sidebutton">
Menu2
</div>
</div>
<div data-role="main" class="ui-content">
<div><p>This is page 2</p></div>
</div>
<div data-role="footer" style="width:100%; height:200px; background: black; position:absolute; bottom: 0;"></div>
</div>
<div data-role="page" data-position="fixed" id="page3">
<div data-role="panel" data-display="push" id="menu3" class="menu">
<div class="menulist">
<ul>
<li>
Page 1
</li>
<li>
Page 2
</li>
<li>
Page 3
</li>
<li>
Page 4
</li>
</ul>
</div>
</div>
<div data-role="header" class="menubar">
<div class="sidebutton">
Menu3
</div>
</div>
<div data-role="main" class="ui-content">
<div><p>This is page 3</p></div>
</div>
<div data-role="footer" style="width:100%; height:200px; background: black; position:absolute; bottom: 0;"></div>
</div>
<div data-role="page" data-position="fixed" id="page4">
<div data-role="panel" data-display="push" id="menu4" class="menu">
<div class="menulist">
<ul>
<li>
Page 1
</li>
<li>
Page 2
</li>
<li>
Page 3
</li>
<li>
Page 4
</li>
</ul>
</div>
</div>
<div data-role="header" class="menubar">
<div class="sidebutton">
Menu4
</div>
</div>
<div data-role="main" class="ui-content">
<div><p>This is page 4</p></div>
</div>
<div data-role="footer" style="width:100%; height:200px; background: black; position:absolute; bottom: 0;"></div>
</div>
</body>
Changing your footer to this seems to solve the jumping:
<div data-role="footer" data-position="fixed" data-tap-toggle="false" style="height: 200px; background: black;"></div>
JSFiddle
I am using a grouped-buttons-widget and a listview-widget. My code is
<div data-role="controlgroup" data-type="horizontal" class="ui-corner-all ui-controlgroup ui-controlgroup-horizontal">
<div class="ui-controlgroup-controls" align="center">
<!-- ........ -->
</div>
</div>
<ul data-role="listview" id="mylist">
<li data-role="list-divider" role="heading" data-theme="b">
Sheet: Untitled1
</li>
<!-- ........ -->
<li id="mylistSummary" data-role="list-divider" role="heading" data-theme="b">
Total:
</li>
</ul>
The problem is now the widgets appear just next to each other without any spacing in between.
What should I do to ensure desired space between these (and perhaps other) widgets?
I think you may try to add a simple <br> to separate the 2 components:
<div data-role="controlgroup" data-type="horizontal" class="ui-corner-all ui-controlgroup ui-controlgroup-horizontal">
<div class="ui-controlgroup-controls" align="center">
<!-- ........ -->
</div>
</div>
<br>
<ul data-role="listview" id="mylist">
<li data-role="list-divider" role="heading" data-theme="b">
Sheet: Untitled1
</li>
<!-- ........ -->
<li id="mylistSummary" data-role="list-divider" role="heading" data-theme="b">
Total:
</li>
</ul>
Or you may try to play with margin-bottom, for example, try the following:
<div style="margin-bottom: 5px;" data-role="controlgroup" data-type="horizontal" class="ui-corner-all ui-controlgroup ui-controlgroup-horizontal">
<div class="ui-controlgroup-controls" align="center">
<!-- ........ -->
</div>
</div>
<ul data-role="listview" id="mylist">
<li data-role="list-divider" role="heading" data-theme="b">
Sheet: Untitled1
</li>
<!-- ........ -->
<li id="mylistSummary" data-role="list-divider" role="heading" data-theme="b">
Total:
</li>
</ul>
Hope this helps.
Let me know if these solutions work for you.