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".
Related
I am working on a wordpress website with the wordpress personal plan (no option to use plugins and no option to edit the CSS code). I assumed creating a sticky header in wordpress would be a matter of turning on a switch in the header menu, but it seems more difficult than I thought. I now got into the Code editor menu of the header in which I think it may be possible to make the header stick, but any other recommendations are more than welcome.
I have tried going through the entire header settings and options menu to see if I could find a way to make the header stick, but without success. I've also tried Googling solutions but everything I could find included either using plugins or editing the CSS code which I am both unable to do given the plan I'm using. Now I found the Code editor of the header and footer, in which I think it might be possible to make the header stick, but I haven't been able to figure it out yet. The current Code editor code is:
<!-- wp:group {"className":"gapless-group","layout":{"inherit":"true","type":"constrained"}} -->
<div class="wp-block-group gapless-group"><!-- wp:group {"align":"full","style":{"spacing":{"padding":{"bottom":"var(\u002d\u002dwp\u002d\u002dcustom\u002d\u002dgap\u002d\u002dvertical)","top":"var(\u002d\u002dwp\u002d\u002dcustom\u002d\u002dgap\u002d\u002dvertical)"}}},"className":"site-header","layout":{"type":"flex","justifyContent":"space-between"}} -->
<div class="wp-block-group alignfull site-header" style="padding-top:var(--wp--custom--gap--vertical);padding-bottom:var(--wp--custom--gap--vertical)"><!-- wp:group {"className":"site-brand","layout":{"type":"flex"}} -->
<div class="wp-block-group site-brand"><!-- wp:site-logo {"width":64} /-->
<!-- wp:group -->
<div class="wp-block-group"><!-- wp:site-title {"style":{"typography":{"letterSpacing":"3px","textTransform":"capitalize","lineHeight":"1.2"}},"fontSize":"x-large"} /--></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
<!-- wp:navigation {"ref":749,"className":"social-links","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right","orientation":"horizontal"},"style":{"spacing":{"margin":{"top":"0"},"blockGap":"var:preset|spacing|50"},"typography":{"fontSize":"1.3rem"}}} /-->
<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons"><!-- wp:button {"style":{"color":{"background":"#00a54f"},"spacing":{"padding":{"top":"var:preset|spacing|40","right":"var:preset|spacing|40","bottom":"var:preset|spacing|40","left":"var:preset|spacing|40"}},"border":{"radius":"5px"}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-background wp-element-button" href="https://kungfuhaarlem.com/contact/" style="border-radius:5px;background-color:#00a54f;padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)">Gratis proefles!</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
I have a simple question: I am currently creating my portfolio in html
I wish that by clicking on the image, I can write the description of my choice. For the moment it shows me this:
I give you the party of the corresponding code below.
Thank you again for your help !
<!-- item -->
<div class="project-item">
<!-- ==> Put your thumbnail as a background -->
<a href="img/portfolio/p2.jpg" class="project-thumbnail nivobox" data-lightbox-gallery="portfolio" style="background-image: url('img/portfolio/thumb-p2.jpg');">
<!-- project-description -->
<div class="project-description-wrapper">
<div class="project-description">
<!-- project name -->
<h2 class="project-title">Project Title</h2>
<!-- /project name -->
<span class="see-more">Project Tags</span>
</div>
</div>
<!-- /project-description -->
</a>
</div>
<!-- /item -->
I don't know what framework (if at all) you're using, but my go-to solution for creating websites, is MaterializeCSS.
And oh look, they got something that exactly matches what you want (as far as I can understand, let me know if it doesn't).
Here it is:
<!-- MATERIAL BOXED-->
<h1>MATERIAL BOXED</h1>
<img src="http://materializecss.com/images/sample-1.jpg" alt="" class="materialboxed" data-caption="Here is an image caption">
The only change that you must do in your code, is to import the Materialize library and jQuery necessary, all of which are in their official page.
Hope this can help you solve your problem, it might look a bit un-orthodox but it gets the job done, at looks pretty nice doing so ;)
I am trying to put the start of a div in a "header" template and the end in a "footer" template.
Unfortunately meteor shows the following during the building process and fails to start:
Your app is crashing. Here's the latest log.
=> Meteor server restarted
Errors prevented startup:
While building the application:
file.html:22: Expected "div" end tag
What is the correct way of implementing divs that start in one template and end in another?
Thanks in advance.
Extend your templating as far as necessary.
Without an example of your code, I can only make an assumption of what you're trying to do.
<body>
<div class="container">
<div id="another-div">
{{> header}}
</div>
{{> footer}}
</div>
</body>
<template name="header">
<nav id="header">
<!-- content -->
</nav>
</template>
<template name="footer">
<footer id="footer">
<!-- content -->
</footer>
</template>
That being said, an example of your code in your post will help specify the answer.
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 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;