I am using jquery ui. But the page is taking a lot of time to load. Also I am using tabs function for on LI elements of UL tag. But for a split second the list is shown as it is and after that the Tabs effect takes place. I have written the javascript for calling the tabs in the same html file. How I can reduce the loading time and also the the abrupt view that is shown for a split sec.
If you are truely using the load event, then you probably want to switch to the domReady event.
instead of doing
<head>
<script>
$(document).load(eventHandler);
</script>
</head>
do
<head>
<script>
$(document).ready(eventHandler);
</script>
</head>
or simply
<head>
<script>
$(eventHandler);
</script>
</head>
which is a shortcut for the same thing
This will trigger as soon as the DOM is ready to be manipulated, but before images are loaded, and generally before the browser renders the page for the first time, tho that depends on how your have built your page.
You can set your UL tag to display:none
#dilip
For loading times you can install Firebug with Firefox and see where the loading times go.
If you are using PHP to generate your page, you can also use http://www.xdebug.org/ to see where PHP takes the most time per script file.
For the menu I would say, do not let the JavaScript kick in to render the Tabs effect when the DOM has fully loaded. jQuery can detect that easily :)
Background:
There are a few little optimization you can do for smoother loading of the tabs. But it's basically trade-off to easy-to use. You add some css classes into your html already and don't wait till jQuery puts it for you. This avoids all the funny movements in the page when jQuery takes over, coz the elements will be already in place.
Explained steps:
1) div containing all the tabs:
You add class ui-tabs which in combination with step2 will suppress the original list and puts the navigation already in place.
You add class ui-widget which fixes the font-size and the position of the first tab against navigation.
2) ul containing the nav items:
You add class ui-tabs-nav which completes the list repositioning.
3) Each particular div containing tab panel, which is not active:
You add style="display:none;". This is what jQuery does anyway. So you don't have to remove style after the tabs are ready. jQuery does it for you. It also more fine-tuned than crudely hiding all content of tabs.
4) Is also good idea to put tabs constructor call in document ready:
$(document).ready(function(){$( "#tabs" ).tabs();}
Result:
So you change your html from original
<div id="tabs">
<ul>
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
<li>Aenean lacinia</li>
</ul>
<div id="tabs-1">
<p>tabs-1 content</p>
</div>
<div id="tabs-2">
<p>tabs-2 content</p>
</div>
<div id="tabs-3">
<p>tabs-3 content</p>
</div>
</div>
to:
<div id="tabs" class="ui-tabs ui-widget">
<ul class="ui-tabs-nav">
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
<li>Aenean lacinia</li>
</ul>
<div id="tabs-1">
<p>tabs-1 content</p>
</div>
<div id="tabs-2" style="display:none;"><!-- display:none is later reverted by jQuery.tabs -->
<p>tabs-2 content</p>
</div>
<div id="tabs-3" style="display:none;">
<p>tabs-3 content</p>
</div>
</div>
Conclusion:
You are just using jQuery styles.
You tabs navigation and tab panels are already in place before jQuery starts rendering.
No need any clean-up (E.g.: remove display:none from ul) after tabs are rendered.
Related
I have navbar like this :
<ul class="dropdown-menu" role="menu">
<li>People</li>
<li>Main Page</li>
</ul>
but when I click on "People" link, it will not position correctly, because I am loading some charts on that page. I have many section with unique id and content is loaded from JavaScript (charts).
<section id="top_something">
<div class= "container">
<h2 class="blue-headings text-center"><b>Top People</b></h2>
<div id="div_something"></div>
</div>
<br>
</section>
The content of a div id="div_something" I am making in JavaScript ...
I have a 10 div's like this on that main_page with unique id. I can see that when I click on a a href="/main_page#top_something" on navbar it will paste me on that section , but as soon as it loads JavaScript it will move me upper
thanks in advance
If your main_page is a directory (which it probably is) then you need to simply include a slash before the anchor name.
People
If you have JavaScript injecting content after the page loads then you will be brought to the appropriate anchor but the page may move because the additional content added by JS will push the anchor down the page. You might consider repositioning the screen to the appropriate anchor using JS after its done injecting content.
I've 3 tabs that use javascript to show content when they are clicked:
<ul class="tab">
<li>12 Weeks</li>
<li>4 Weeks</li>
<li>1 Week</li>
</ul>
Divs are placed in my html code as follows:
<div id="12_Weeks" class="tabcontent"> <!-- Tab 1 starts here -->
<h1>Example Text</h1>
</div>
I'd like the first tab to be open when the page is loaded and have tried the following code:
$( document ).ready(function() {
// Handler for .ready() called.
$("#12_Weeks").trigger('click');
});
however this doesn't seem to do the trick, anyone know what I'm doing wrong here, am sure it's super simple!?
Are you sure there is an element with ID #12_weeks on your page?
It is not present in your sample code.
Your trigger click has tab content but it will be in tab title. See flowing code.
$( document ).ready(function() {
// Handler for .ready() called.
$('ul#tab li:first > a.tablinks').trigger('click');
});
Or
you can user this under your hide execute code. $("#12_Weeks").show('');
Seems I needed to add openCity("12_Weeks") in my javascript function, they seem to have left this bit out at W3schools, thanks all for helping!
You could use style="display: block;" directly in your default <div></div> tag, like this:
<div id="12_Weeks" class="tabcontent" style="display: block;"> <!-- Tab 1 starts here -->
<h1>Example Text</h1>
</div>
When a different Tab is clicked, the style="display: none;" and the current clicked Tab is given style="display: block;"
This should do the trick.
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'm trying to change a part of a page, I know that this has been asked before but I cannot really find a good solution to my issue.
The red colour is the part of the page I want to change dynamically depending on what you click on the left side that is a panel.
Image: http://wstaw.org/m/2014/04/24/ask.png
HTML Code: http://pastebin.ubuntu.com/7322513/
<body id="framework">
<div data-role="page" class="page ui-responsive-panel">
<!-- header -->
<div data-role="header" data-theme="a">
<h1 id="titlepage">ICU</h1>
Menu
Add
</div>
<!-- /header -->
<!-- content that is replaced by ajax -->
<div id="content" data-role="content">
<h2>content</h2>
</div>
<!-- /content -->
<!-- Left menu panel -->
<div data-role="panel" data-position="left" data-position-fixed="false" data-display="overlay" id="nav-panel" data-theme="b">
<ul data-role="listview" data-theme="a" data-divider-theme="a" style="margin-top:-16px;" class="nav-search" id="nav">
<li data-icon="delete" style="background-color:#111;" data-theme="b">
<!--Removed data-rel="close" since there is a bug in jquery mobile https://github.com/jquery/jquery-mobile/issues/1405 -->
Close menu
</li>
<li data-filtertext="Inbox">
<a href="html/dummy.html">
<span class="ui-mail-icon-blue nav-ui-thumbnail"></span>
<span class="ui-li-count ui-btn-up-a ui-btn-corner-all" id="mail#">2</span>
<h1 class="ui-li-headline">Inbox</h1>
<p class="ui-li-desc" id="gotMail">Du har mail!</p>
</a>
</li>
<li data-filtertext="Startsida">
<a href="html/dummy2.html">
<span class="ui-start-icon nav-ui-thumbnail"></span>
<h1 class="ui-li-headline">Startsida</h1>
</a>
</li>
<li data-filtertext="Översikt">
<a href="html/dummy2.html">
<span class="ui-overview-icon nav-ui-thumbnail"></span>
<h1 class="ui-li-headline">Översikt</h1>
<p class="ui-li-desc">Antal elever (2)</p>
</a>
</li>
<!--Nav list divider-->
<li data-role="list-divider" role="heading" class="ui-button ui-li-divider ui-bar-a ui-li-has-count">
Avdelningar
<span id="departments#" class="ui-li-count ui-btn-up-a ui-btn-corner-all">2</span>
</li>
<!--/Nav list divider-->
<!--Auto generated departments-->
<li data-filtertext="Testpage">
<a href="html/dummy.html">
<span class="ui-department-placeholder nav-ui-thumbnail"></span>
<h1 class="ui-li-headline">Avdelning 1</h1>
<p class="ui-li-desc">Antal elever (2)</p>
</a>
</li>
<li data-filtertext="Testpage2">
<a href="html/dummy2.html">
<span class="ui-department-placeholder nav-ui-thumbnail"></span>
<h1 class="ui-li-headline">Avdelning 2</h1>
<p class="ui-li-desc">Antal elever (3)</p>
</a>
</li>
</ul>
</div>
Jquery Code:
function loadPage(page, title) {
$.ajax({
url: page,
async: false
}).done(function (data) {
$("#content").html(data);
$("#titlepage").html(title);
}).fail(function () {
alert("Gick inte att ladda");
});
}
I have done my own ajax loadpage that works but is there a way to use the jquery mobile internal since it feels like a hack.
Conclusion, is there a way to do this better? and how should i load script for each page, using the main-page header to load all of them at once or is there a way to load the script when that content is loaded.
Im using
Jquery jquery-2.1.0
JqueryMobile jquery.mobile-1.4.2
Best Regards
I have done my own ajax loadpage that works but is there a way to use the jquery mobile internal since it feels like a hack.
jQuery Mobile is based on Ajax Navigation; it uses Ajax to retrieve pages, load them into DOM and then initialize them before showing them. This been said, when you use Ajax to load external data, you are doing it the right way.
You can use $.ajax(), .load() or $.get(). However, bear in mind that you need to manually initialize data retrieved - in case it contains jQM widgets - using enhancement methods e.g. .enhanceWithin().
Should I load script for each page, using the main-page header to load all of them at once or is there a way to load the script when that content is loaded.
As you're using Single Page Model, it is safer (maybe you should) load all JS libraries and style sheets in head for each and every page. Nevertheless, jQM will load those links only once on first page's initialization, the rest of pages will be loaded/retrieved via Ajax. jQM loads first data-role=page it finds in any external page and neglects any thing else.
Why to load all JS and style sheets? Is to get jQM working again in case a user refreshes current page. In this case, the current refreshed / reloaded page becomes first page.
Binding events and adding listeners:
When using jQM, you need to stay away from .ready() and/or $(function(){}) and use Page Events. Except for some cases e.g. using External toolbars, panels or popups. Those External widgets need to be initialized manually on first run before page is loaded.
$(function () {
$("#ExternalPanel").panel();
});
As for adding listeners, use pagecreate event.
$(document).on("pagecreate", "#pageID", function () {
$("foo").off("click").on("click", function () {
/* do something */
});
});
You need to remove .off() previous bindings and then .on() add them again, since external pages go through pagecreate whenever they are shown. Because jQM removes external pages from DOM once hidden.
One final point on appending elements to active page. You need to be specific as where you want to add those elements retrieved by Ajax.
var activePage = $.mobile.pageContainer.pagecontainer("getActivePage");
$.get("URL", function (data) {
$("#foo", activePage).html(data).enhanceWithin();
}, "html");
Demo (1) - Code
(1) Click "inbox"
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