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"
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 am writing a phonegap application using Angular's ngRoute as an MVC. This all works beautifully, except for my top bar which includes the trigger button for the slide out menu. as it sits now, the top bar has the same title for every page, so to fix this I moved the top bar inside of the route view, which now stops my slide out menu from working.
How can i get the javascript trigger to actually run properly inside a route view (i understand this has to do with the page, and all of its JS, rendering before the route view is actually loaded) and I also would LIKE to execute other JS in a route view as well. for example, one of the views handles GPS location and NFC chip reading and i would love to only execute those scripts when that view is active rather than all the time, which chews up battery listening for NFC chips and GeoData even when that view is not in use.
if this isnt possible or is a serious pain then id just as soon go back to conventional page changes instead of views, im just hoping that there is a way to do this.
Here is the relevant code illustrating the issue:
index.html:
<script type="text/javascript">
$(window).load(function() {
$('#menutoggle').toggle(function() {
$('#right').animate({
left: 200
});
}, function() {
$('#right').animate({
left: 0
});
});
});
</script>
<div id="menu">
<span class="logo-bar"></span>
<ul id="sidenav">
<li>
<a href="#/Checkin">
<img src="img/home.png">Check In
</a>
</li>
<li>
<a href="#/logout">
<img src="img/logout.png">Logout</a>
</li>
</ul>
</div>
<div class="content view-animate-container">
<div id="contentcontroller" ng-view class="view-animate wrapper">
</div>
</div>
CheckIn.html
<div id="right">
<div id="menubar">
<div id="menutoggle">
</div>
<div class="title">
Check In
</div>
</div>
</div>
Now the toggle button works fine on whatever view is initially loaded, however as soon as a page change occurs the menu toggle simply stops.
is there any way to remedy this?
I am green in this area and I am trying to learn while I build a virtual resume for a website I can use to advertise my programming services (my strength lies more with C#, Java and similar languages :')
Something I think would look pretty cool, is if when you click on a link in my side-bar, the content on the page slides out and is replaced with the content on the new page that slides in, in the previous page' place.
I am a bit lost on how to achieve this though and if I have to do a per-page thing, or if I can make one general method in Javascript to take care of it. I am using jQuery and bootstrap.
var main;
main = function () {
$(".sidebar-nav a").click(function() {
<!-- Not sure what to do here -->
<!-- Pseudo Code -->
<!-- find out what element was pressed
slide out content on current page using animate();
slide in content from the element that was pressed using animate(); -->
})
}
$("document").ready(main);
The HTML:
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<h1>Brand</h1>
</li>
<li>
<a href="#">
Index
</a>
</li>
<li>
<a href="#">
About Me
</a>
</li>
<li>
<a href="#">
Resume
</a>
</li>
<li>
<a href="#">
Contact
</a>
</li>
</ul>
</div>
<!-- Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
<p>Grumpy wizards make toxic brew for the evil Queen and Jack.</p>
Toggle Menu
</div>
</div>
</div>
</div>
</div>
Let me know if you need the CSS.
You should use an AJAX technology to seamlessly load another page's HTML contents inline into the document.
The best choice (in my opinion) for this situation is the jQuery function load(), due to it's simplicity and pure convenience. You can also send a callback function, it's easy to implement.
You could then easily implement a CSS animation using the animation attribute.
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 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.