I'm trying to print content on my html page
the format is
<div class="header">Title of the page</div>
<div class="main">Content of the page</div>
<div class="footer">Footer of the page</div>
<div class="page-break"></div>
<div class="header">Title of the page</div>
<div class="main">Content of the page</div>
<div class="footer">Footer of the page</div>
<div class="page-break"></div>
<div class="header">Title of the page</div>
<div class="main">Content of the page</div>
<div class="footer">Footer of the page</div>
<div class="page-break"></div>
so there are three pages, pages are added dynamically and this css helps me to break the page while printing
.page.break{
page-break-after:always
}
The problem is that the footer comes after the main div, I want it to be at the bottom of page always.
Any help?
Add this CSS in to your footer div, it should solve your problem
style="clear: both;"
Could your solution be something similar as in this thread?
Footer Not Aligning At Bottom Of Content In Print Preview
Related
I am using fullpage.js and the scroll does not work after the 'intro' class section. I am able to move upwards in the webpage but while moving downwards it stops after the 'intro' class section. I even tried using normalScrollElements but it still does not work. The code is as below:
<div id="fullpage">
<div class="section">
Hello
</div>
<div class="section">
Hello
</div>
<div class="section">
Hello
<div class="intro">
/* Dummy Text */
</div>
</div>
<div class="section">
Hello
</div>
</div>
Link to Codepen: https://codepen.io/yash9051/pen/rNpXNYJ
I am trying to create a horizontally scrolling website, but it feels that I am at a dead end. The website I want to create shouldn't have a horizontal scrollbar and it needs to "jump" from page to page when using the navigation links.
Here is a basic version of the website I currently have - Horizontal Scrolling Project
What I am trying to achieve:
The navigation links should be the only way of navigating and scrolling should have no effect on navigation.
Each module should be on a single page and it's very important that when a module is higher than the height of the page, it is able to scroll to the bottom of the module. The navbar and footer should also always be visible.
And last but not least, it should be able to work with Bootstrap 4.
Please note that I am not expecting someone to do this entire project for me, but rather that if someone could help me or knows of any resources I could check out, I would really appreciate it!
Code:
<html>
<body>
<div class="bar">
<div class="container-fluid">
<div class="row">
<div class="col text-left">
<p>👈</p>
</div>
<div class="col text-center">
<span class="main-link">
Download
</span>
</div>
<div class="col text-right">
<p>👉</p>
</div>
</div>
</div>
</div>
<div class="main">
<div class="container">
<div class="row">
<!--MODULE START-->
<div class="module col-sm-12 offset-sm-0 col-md-10 offset-md-1 col-10 offset-1 text-center">
<p class="title">01</p>
</div>
<!--MODULE END-->
<!--MODULE START-->
<div class="module col-sm-12 offset-sm-0 col-md-10 offset-md-1 col-10 offset-1 text-center">
<p class="title">02</p>
</div>
<!--MODULE END-->
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<p>Made by Jeroen</p>
</div>
</footer>
</body>
</html>
I have been trying to implement a solution for this for a while and I have not come to a clean one yet.
Please, help me.
I have 2 routes:
/login
/register
They have very similar templates:
login.html
<div class="main-container">
<section class="fullwidth-split">
<div class="container-fluid">
<div class="row">
<div class="col-12">
[...more similar html to both views...]
<h2>Login</h2>
</div>
<!--end of col-->
<div class="col-12">
Login form HTML
</div>
</div>
</div>
</section>
</div>
register.html
<div class="main-container">
<section class="fullwidth-split">
<div class="container-fluid">
<div class="row">
<div class="col-12">
[...more similar html to both views...]
<h2>Registration</h2>
</div>
<!--end of col-->
<div class="col-12">
Registration form HTML
</div>
</div>
</div>
</section>
</div>
As you can see, most of the HTML is the same, including the section and container div. I would like to reuse this template and I have tried using child routes and using on the dynamic HTML part, but as you can see the h2 changes its content as well, so unless I duplicate this template it's not possible. The best I've got is using the router-outlet, but then I have a STATIC title h2 and can't change it on the child component because it's on the parent component template.
Any suggestions?
Here is one possible solution.
Create a component (my-component) that uses the shared html and add content projection to it. The html should look something like this:
<div class="main-container">
<ng-content></ng-content>
</div>
You project the different content like this:
register.html:
<my-component>
<h2> Registration </h2>
</my-component>
login.html:
<my-component>
<h2> Login </h2>
</my-component>
You could also have multiple content projections.
This is done by adding a select attribute to the ng-content in my-component:
<div class="main-container">
<ng-content select=".heading-content"></ng-content>
<ng-content select=".form-content"></ng-content>
</div>
And use like this:
<my-component>
<h2 class="heading-content"> Login </h2>
<div class="form-content">
.....
</div>
</my-component>
Please see below example of HTML structure
<div data-role="page" id="p1">
<div data-role="header"><h1>Header</h1></div>
<div data-role="content">
Click Me
</div>
<div data-role="footer"><h4>Footer</h4></div>
</div>
<div data-role="page" id="p2">
<div data-role="header"><h1>Header 1</h1></div>
<div data-role="content">
Page Two
</div>
<div data-role="footer"><h4>Footer</h4></div>
</div>
jquery for same
$('#p1').live('pagecreate', function(e){
$("#add").click(function(e) {
$.mobile.changePage('#p2', { transition: "flip"} );
});
});
The above example is working fine but header part is repeating.
So how to avoid this issue because I am using same header as well as footer part for each data-role="page"?
There seems to be no nice "built-in" method to do it. You can find some workarounds here: jQuery Mobile: Use same header footer for all pages
I have a design where on mobiles/tablets all the text is in one div but when on 'desktop' the p tags move to the div below it. (All divs have different background images).
Here's the markup -
<main>
<div class="pane">
<h2>A thing</h2>
<p>This stuff needs to jump to pane-details below when around 48em</p>
</div>
<div class="pane-details">
<p></p>
</div>
<div class="pane">
<h2>Another thing</h2>
<p>This stuff needs to jump to pane-details below when around 48em</p>
</div>
<div class="pane-details">
<p></p>
</div>
<div class="pane">
<h2>A third thing</h2>
<p>This stuff needs to jump to pane-details below when around 48em</p>
</div>
<div class="pane-details">
<p></p>
</div>
<div class="pane">
<h2>A fourth thing</h2>
<p>This stuff needs to jump to pane-details below when around 48em</p>
</div>
<div class="pane-details">
<p></p>
</div>
<div class="pane">
<h2>The last thing</h2>
<p>This stuff needs to jump to pane-details below when around 48em</p>
</div>
<div class="pane-details">
<p></p>
</div>
</main>
Demo: http://codepen.io/sturobson/pen/aCqDc
So, when the page hits 48em (768px) the <p> in .pane needs to drop down into the following .pane-details
How do I do this without duplicating the content and nastily resorting to display: none;.
Use the window resize event:
$(window).on('resize'), function() {
if ($(window).width()<768) {
// move the element
} else {
// move it back
};
}).trigger('resize'); // force it to run on load
However, you can probably solve this with pure CSS if you rethink your HTML layout a little.