i have just encountered a very strange problem. I am working with jQuery mobile and making the mobile version for a website. There is a listing page that has its own filters. The filters are in a panel, its slides out, you select the filter, it closes and filters the list. pretty basic. Now when the same app is accessed from an iOS 7 iphone, the first time you filter something it works fine. but if you open the filter again, its blank. but the filters are still where they should be and if you just tap at the place where you think a filter should be, they appear and filter the list as nothing is wrong. it remains like this after that.
This is the anchor i use to open the panel
<a id="friendsFilterAnchor" href="#friendsFilterPanel" data-mini="true" data-role="none" data-iconpos="right" class="ui-icon ui-icon-filter frindes-filter filter-ico" data-theme="a" title="Filter"></a>
and the panel looks something like this
<div data-role="panel" id="friendsFilterPanel" data-position-fixed="true" data-position="right" data-display="overlay" data-theme="b">
<ul id="friendsFilterList" data-role="listview" data-theme="e" data-divider-theme="a">
<li data-icon="ffTick" class="selected"><a href="javascript://" >All</a></li>
<li data-icon="false">Pending</li>
<li data-icon="false">Users</li>
</ul>
</div><!-- /panel -->
Anyone seen something like this before?
The problem was the use of same ids on different pages. The previous page was also in the dom and it had the same id in it. use relative selectors, i.e get divs by searching on the same page, which is usually a good practice in javascript.
Related
I have a pretty average jQuery Mobile app. On the bottom there is a navbar with icons and text.
This is how it should look
but when I tap/click on the page it toggles to this
To save myself some repetition, I've been appending the same footer to each page using this basic script.
$(function ()
{
$("div[data-role='page']").append($("#footer").html());
$("body").trigger('create');
});
And here's the HTML.
<div class="hidden" id="footer">
<div data-role="footer" data-position="fixed" data-id="footer">
<div data-role="navbar" data-iconpos="top">
<ul>
<li>Maps</li>
<li>Rules</li>
<li>Schedule</li>
<li>Settings</li>
</ul>
</div>
</div>
</div>
I believe this script is the cause of this issue. Any ideas for how to fix this behavior?
EDIT: In inspecting the DOM I found that a class called "ui-fixed-hidden" is being toggled on the data-role="footer" div when I click.
It turns out that just because my template footer div was nested in another div with "display: none" doesn't mean that jQuery Mobile wasn't using that element. As such, I had multiple footers which created weird behaviors.
I resolved this by moving my template footer to a seperate html file and then loading it in on page start.
I love jQueryUI, but the Tabs widget seems to be complicating things too much (jQueryUI version 1.10.3).
I know it can load content on the fly and this is all wonderful, but I have here a very simple structure with a form and some DataTables, more or less like this:
<div id="MyContent">
<ul>
<li>Main Data</li>
<li>Additional data 1</li>
<li>Additional data 2</li>
</ul>
<div id="Form">
<form>...</form>
</div>
<div id="SubTable1">
DataTables 1 goes here
</div>
<div id="SubTable2">
DataTables 2 goes here
</div>
</div>
However, things break horribly when I apply jQueryUI Tabs to this. One reason I already know is the use of <base> tag in my code, which makes Tabs "think" I want to load my content on the fly, instead of simply hiding/showing content already there. But even using a hack to fix this, DataTables doesn't render correctly.
And frankly, I don't want to spend days trying to figure it all out to find a fix.
Instead, I would like to know if there is a way to "switch off" all the fanciness of JqueryUI Tabs, and make it just hide and show my tabs, using whatever is inside each div. Is it possible?
That would solve my problem. If I manually create some buttons and associate a click event that simply do a display: none / display: block to my divs, they work like a charm, including DataTables.
In fact, I'm considering dumping jQueryUI Tabs completely and creating the necessary code to do just that, but I would prefer to use jQueryUI Tabs, if possible.
Thanks a lot in advance!
I will admit this is a bit ham-fisted - but it works, as an example.
HTML:
<div id="MyContent">
<ul>
<li>Main Data</li>
<li>Additional data 1</li>
<li>Additional data 2</li>
</ul>
<div id="Form" class="tab active">
<form>My Form</form>
</div>
<div id="SubTable1" class="tab">
DataTables 1 goes here
</div>
<div id="SubTable2" class="tab">
DataTables 2 goes here
</div>
</div>
CSS:
.tab{display:none}
.active{display:block}
jQuery:
$('#MyContent a').on('click',function(e){
var id = $(this).attr('href')
$('div.active').toggleClass('active');
$(id).toggleClass('active', ($(this).attr('class') != 'active'));
console.log()
})
Working jsFiddle
NEWER
So the scrolling is working now... But it's fixed to the top of the page. I need it to be in the correct position (next to the content) and then start scrolling with at it's current position with the content.
I'm trying to get my sidebar to scroll like this one here -> http://getbootstrap.com/2.3.2/components.html
The website is http://www.katyasarmiento.zzl.org (a free hosted site for now)
OLDER
I'm having a really hard time with this. I've looked up everything I could and I still can't figure it out. I got it to work for a while with a tutorial I found, but it didn't work well with ScrollSpy. So I'm trying to use Bootstrap's Affix.
I'm new to javascript / jquery so if anyone could look over my website and check to see what I'm doing wrong.
The ScrollSpy is working right now I think, I just can't get the sidebar to scroll with the page.
ALRIGHT I got it to work!
What I did was change the following...
<div class="bs-docs-sidebar span3">
<ul class="nav nav-list bs-docs-sidenav affix-top">
To...
<div class="bs-docs-sidebar span3">
<ul class="nav nav-list bs-docs-sidenav affix" data-spy="affix" data-offset-top="255" data-offset-bottom="200">
So I put the data-spy and data-offset on the "bs-docs-sidenav" class, changed the script to that class also instead of the "bs-docs-sidebar" class.
Then I edited the css of "affix-top", "affix", and "affix-bottom" and it works very well :)
My original problem was referring to the sidebar class instead of the sidenav class, because that's what my affix CSS was working on.
Hope this helps anyone that was having a similar issue to mine :)
What helped me with this were these tutorials.
In ul element on your page you have written-
<ul class="nav nav-list bs-docs-sidenav">
Where you have used nav nav-list bs-docs-sidenav classes add one more class affix-top. Then it will be -
<ul class="nav nav-list bs-docs-sidenav affix-top">
And remove the class affix-top from this line, which is the parent node of your ul element-
<div class="bs-docs-sidebar span3 affix-top" data-offset-top="50" data-spy="affix">
And write this line like-
<div class="bs-docs-sidebar span3">
I want to make a content box with jquery tabs with a tab navigation for many tab contents, such as for more than 10 tab contents. The problem is that jquery UI does not provide built in tab navigation for large tab number and the "scrollable tabs for jquery plugin" at google code, https://code.google.com/p/jquery-ui-scrollable-tabs/, looks very slow and inefficient for large volumes about more than 50 pages. If the user tries to read the 1st and the 40th page, it will take more than 30 sec. to navigate for clicking the arrows.
So, I made a tab content box with only 5 tabs including selected shown and with a tab navigation of input text box selecting specific pages and next and previous with the first and the last page tab navigation buttons. (If you put regular jquery UI tab with more than 20-30 tabs it will mess up appearance and css.)
<div id="tabs" class="tabs-bottom">
<ul>
<li>Nunc tincidunt
</li>
<li>Proin dolor
</li>
<li>Aenean lacinia
</li>
</ul>
<ul class="TabbedPageNavi">
<li>Page
<input id="pageNumber" type="text" value="01" style="width:30px;" />
</li>
<li><a class="previous" href="#">« Prev</a>
</li>
<li><a class="nexttab" href="#">Next »</a>
</li>
<li class="copyTab">2013 ©John3825 blog</li>
</ul>
<div class="tabs-spacer"></div>
<div id="tab-contents">
<div id="tabs-1">
Sample:
http://jsfiddle.net/john3825/anh7c/embedded/result/
What is the best possible way to manage the large numbers of content tabs with navigation? Please tell me a example or correct problems.
I also want to make the tab content box fit within 350px width x 1000px height.
As far as the best possible way is concerned,there are many of them.One suggestion would be using iFrames.
The Result would be quite like this : DEMO
Or either your approach is quite scalable and is old-school which is good thing in reference of compatibility and usability. Now the other requirement goes like this. You set the width:350px; and the height:1000px for the content-tab like this.
Working Fiddle: DEMO
Code:
#tab-content{
height: 1000px !important;
width:350px;
background-color:darkgrey;
border:2px ridge black;
}
I've got a page with a three column layout (main nav on the left, center console in the middle and specific page options/navigation on the right). Until now I've been using jQuery UI's Tabs widget in the center console area for one of my pages.
What I'd like to do is separate the tabs (putting them in the right hand column) whilst maintaining the contents position in the middle. Like this:
<div id="center_console">
<div class="tabs_container" id="pets"></div>
<div class="tabs_container" id="family"></div>
<div class="tabs_container" id="bio"></div>
</div>
<div id="right_options">
<div id="tabs">
<ul>
<li>Pets</li>
<li>Family</li>
<li>Bio</li>
</ul>
</div>
</div>
So far however I've been unable to find a way to use jQuery UI to do this (it seems to require that tabs and content be placed within the same container).
I think what you need to do is use the 'select' method
So you would bind your links to the tab you want to click
<div id="center_console">
<div class="tabs_container" id="pets"></div>
<div class="tabs_container" id="family"></div>
<div class="tabs_container" id="bio"></div>
</div>
<div id="right_options">
<div id="tabs">
<ul>
<li id="pets">Pets</li>
<li id="family">Family</li>
<li id="bio">Bio</li>
</ul>
</div>
</div>
$(function(){
//set-up your tabs as normal first
$('#bio').click(function(){
$('#center_console').tabs("select", '#bio');
});
});
You may need to have some links set-up as tabs in the center_console as well, but you could use CSS to hide these. I'm not 100% sure on how tabs() works under the hood. I managed to get this working by hacking around the jqueryui demo with firebug, but for some reason I couldn't get the tabs to work in jsfiddle. If you can set-up an example in that I'm happy to edit it to show you what I did
Thanks to a useful comment below, I realised that I'm not following best practice here. I've set-up a fiddle that should achive what you want ( all be it you will need to style it correctly). It can be found here http://jsfiddle.net/GKNC9/1/
thanks