I create my pages using multi page template, I read that only start page(e.g index.aspx) still remain in Dom in each pages when loading. but now in my other page(e.g child.aspx) which is a child of page parent.aspx, I can see dom element of parent.aspx page.
the breadcrumb is as follow: Index--->parent--->child, maybe I should see only the index dom content not parent. this make me wonder why the page is like this and how I can handle it.Thanks
update:
I just want to reload every page on each showing, I mean clearing the DOM completely and loading content from the beginning. Like when you push ctrl+f5 and load page without cache. Is this possible in JQM?
Index.aspx:
<form id="form1" runat="server" dir="rtl">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode = "Conditional">
<ContentTemplate>
<asp:ScriptManager ID="ScriptManager" runat="server"></asp:ScriptManager>
<uc2:MblMyMessageBox ID="MblMyMessageBoxInfo" runat="server" ShowCloseButton="true" />
<div data-role="page" id="home">
<div data-role="header">
<h1>header</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" data-filter="false">
<li data-icon="false">AccountStatus</li>
<li data-icon="false">ConfirmPayment</li>
</ul>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</form>
AccountStatus.aspx:
<div data-role="page" id="accountStatus">
<div data-role="header">
<h1>Header</h1>
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview" data-inset="true" data-filter="false">
<li data-icon="false">balance</li>
<li data-icon="false">invoice</li>
</ul>
</div><!-- /content -->
<div data-role="footer">
<p>back</p>
</div><!-- /footer -->
</div><!-- /page -->
removing content of index from accountStatus page dom element is my purpose.
All pages that the user has navigated to will be added to the dom. See the documentation. However jQM also has a mechanism to keep the DOM from getting to big and slowing down the browser. It may or may not remove old elements from the DOM.
I would advice you not to trust on DOM elements getting removed automatically. If you really want to remove the page you are navigating away from, you can bind for example the following:
$(document).one("pageshow",function(){
$(document).one("pagehide",function(){
$("#pageId").remove();
});
});
Where pageId is the id you give to the <div data-role="page" id="pageId">.
Edit for the updated question:
To reload the whole page when following links:
Links that point to other domains or that have rel="external",
data-ajax="false" or target attributes will not be loaded with Ajax.
Instead, these links will cause a full page refresh with no animated
transition.
Source: jQuery Mobile Docs
Or you can change it with the following global variable:
$.mobile.ajaxEnabled = false;
Related
I have used the Asp.net MVC 5 Razor and angularjs.
Now my view have the layout .That layout contains top and side menu bar.
So when the view load i got nested page top and side bar in the ng-view.How do i resolve this.
If i was tried with another one root view and removed the layout.that was
worked fine.but when i hit F5 loaded the action alone.Master content is missed
_Layout.cshtml
<header ng-include="'/Partials/TopNavbar'" class="topnavbar-wrapper"></header>
<!-- sidebar-->
<aside ng-include="'/Partials/Sidebar'" ng-controller="SidebarController" class="aside"></aside>
<!-- offsidebar-->
<aside ng-include="'/Partials/Offsidebar'" class="offsidebar"></aside>
<!-- Main section-->
<section>
<!-- Page content-->
<div ui-view="" autoscroll="false" ng-class="app.viewAnimation" class="content-wrapper">
Tested
<div ui-view="" data-autoscroll="false" class="wrapper">
#Styles.Render("~/bundles/bootstrapStyles")
#Styles.Render("~/bundles/appStyles")
#RenderBody()
#Scripts.Render("~/bundles/baseScripts")
#Scripts.Render("~/bundles/appScripts")
</div>
</div>
</section>
<!-- Page footer-->
<footer ng-include="'/Partials/Footer'"></footer>
View
#{
// This is requried for AngularJS because we have to send only the view markup (not within the layout)
Layout = "~/Views/Shared/_Layout.cshtml";}
<small>Subtitle</small>
<div class="row">
<div class="col-lg-12">
testing A blank template
</div>
</div>
This view has refered the layout.
So while page load the Master content loaded perfectly.but when the ng-view load again the master content loaded like nested.
I am creating a site with foundation 5. I have a page in which I would like a secondary navigation bar to scroll with the page until it reaches the bottom of the primary navigation, then snap into place and 'stick' while the user scrolls, effectively adding 'fixed' to the top-bar when it reaches that point. This functionality is described AND demonstrated exactly in the foundation documentation in the sticky top-bar section (see following link).
http://foundation.zurb.com/docs/components/topbar.html
PROBLEM: I am unable to implement this behavior in my site, even if I copy and paste the sticky top-bar code directly from the working example in the above link. All other elements of top-bar are functioning and the console shows no errors. I have demonstrated the issue in a plunkr:
http://embed.plnkr.co/cRdYV5tobUZsd6q2NQxT/preview
please help me understand the issue. Thank you in advance.
Specifications:
Foundation version: 5.5.0
jQuery: 2.1.0
//TOP-BAR CODE, SAME CODE AS IN PLUNKR
<div class="large-12 columns">
<div class="sticky">
<nav class="top-bar" data-topbar="" role="navigation">
<ul class="title-area">
<!-- Title Area -->
<li class="name">
<h1>Sticky Top Bar</h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="divider hide-for-small"></li>
<li>Main Item 1</li>
</ul>
</section>
</nav>
</div>
</div>
UPDATE
Updated plunkr with proper links: http://plnkr.co/edit/8OPKh2sbSn6iq5aN6HF0
My issue was where I was calling
$(document).foundation()
as this is an Angular application, I ended up calling it in
app.run
which worked.
Add this script at the bottom of your page ;)
<script>
$(document).foundation();
</script>
There is a problem with your plunkr site. When the page is loaded the top-bar.js file is not loaded, so this example will never work.
The browser console shows the error - Failed to load resource: the server responded with a status of 404 (Not Found) http://run.plnkr.co/plunks/cRdYV5tobUZsd6q2NQxT/top-bar.js
You need to update the link to ensure the top-bar.js file is loaded.
The foundation website says Just add foundation.topbar.js AFTER the
foundation.js file. Your markup should look something like this:
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.topbar.js"></script>
<!-- Other JS plugins can be included here -->
<script>
$(document).foundation();
</script>
Few stuff to corrected
make sure tag or the div that wrap your navigation is direct child
of body tag (this important)!
make sure the direct parent; (body) has no overflow property on it
The rest is normal
if you are using bootsrap 4 :-add sticky-top as usual or you can use
separate javascript tooo will work !!
I'm working on a mobile app using JQuery-mobile and I'm having problems with my dialogs, every time I try to close the dialog (using the default close button) the app freezes.
Head code:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <!-- JQuery Mobile CSS link -->
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <!-- JQuery Mobile link stored on CDN-->
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> <!-- JQuery Mobile link stored on CDN -->
Relative Home Page Code:
<p>Register</p>
Dialog Code:
<!-- Start of third page: #register -->
<div data-role="page" id="register">
<div data-role="header" data-theme="e">
<h1>Activation</h1>
</div><!-- /header -->
<div data-role="content" data-theme="d">
<h2>Licence Key</h2>
<p>Please enter your licence key in order to activate your additional features of 20Keys</p>
<div data-demo-html="true">
<div class="ui-field-contain">
<label for="licenseKey">Licence Key:</label>
<input type="text" name="licenseKey" id="key" placeholder="Insert Key" value="">
</div>
</div><!--/demo-html -->
</div><!-- /content -->
<div data-role="footer">
<p>Activate Now
Cancel</p>
</div><!-- /footer -->
</div><!-- /page register -->
At the moment the activation button (work in progress) just goes back to the home page. If you spot anything that could be causing this issue I'd appreciate your comment.
The same issue occurred with the Footer buttons when the code was:
<p>Activate Now....
Cancel</p>
I had to remove data-rel="back" in order to fix that.
I'm using Chrome if that helps answer this. Thank you in advance.
I found out what the problem was...
You can't use data-rel="back" in a dialog page because there's technically no back page to go to for a dialog page because it pops up like a new tab would.
The correct way to do solve my problem would be to either just use href="#one" or possibly data-rel="close" instead of data-rel="back".
I have an update panel on my aspx page which does not have a style property or attribute which you can use to override the style. I know this is how it is designed so that is not the issue. From looking online most resources have said that simply putting a div around the update panel and setting the style at that level will take care of the issue. However a central div is created by Visual Studio which is stopping me from seeing my content.
ASPX Code
<div style="height:100%;width:100%;overflow:auto;padding-right:16px;" runat="server">
<asp:UpdatePanel runat="server" id="pdfPanel" UpdateMode="Conditional" EnableViewState="true">
<ContentTemplate>
<div id="pdfFrame" runat="server" style="height:100%;width:100%;overflow:auto;padding-right:16px;">
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
How HTML is rendered
<div style="height:100%;width:100%;overflow:auto;padding-right:16px;">
<div id="ctl00_body_pdfPanel">
<div id="ctl00_body_pdfFrame" style="height:100%;width:100%;overflow:auto;padding-right:16px;">
<!-- Actual content here -->
</div>
</div>
</div>
The problem is the pdfPanel which is being created has no style and is causing my inner div not to be displayed. When I copy the style using Firebug from either of the other two controls then it becomes visible.
If you are using .NET 4.0 you can set ClientIDMode="Static" and it will give you the ID you set on the updatepanel itself.
I have a CSS class called selected which highlights the DIV as the current step. When they're all in separate pages, I just had to move the selected word to the next DIV.
But how can I achieve the same in Master Page VB .Net? It seems to be one page for all. When the next page loads, how do I get it to highlight the next step? Thank you.
<div id="Div1">
<div class="step selected" id="Div2">
<h2>
Join</h2>
<img src="./assets/images/signup_arrow.png" class="selected">
</div>
<div class="step" id="Div3">
<h2>
Choose</h2>
</div>
<div class="step" id="Div4">
<h2>
INVITE</h2>
</div>
</div>
If you want to change the value of these controls programatically, you have to make them available server-side via the runat="server" attribute. Once you do that you can get a handle to the controls, either directly in the MasterPage or indirectly on constituent Controls or the Page itself via FindControl("Div2"), which will return an HtmlGeneric control that represents the div. With that you can then use it's Attributes collection to change the class (controls under System.Web.UI.HtmlControls.* lack the direct CssClass property that WebControls have).
There are client-side options as well.