I have a neat HTML page to output this as a PDF. The HTML page appears in the browser as it should
But when I do window.print() this structure looks broken
My HTML codes are like this
<div class="main"> <!-- PDF Page 1 --> </div>
<div class="pagebreak"></div>
<div class="main"> <!-- PDF Page 2 --> </div>
<div class="pagebreak"></div>
<!-- more ... -->
I spent all day trying to solve this problem. However, I couldn't figure out what was causing it. The red boxes in the corners of the PDF pages have the property position: absolute;. The part that overflows from the page is the rest of these pieces. How can I prevent this?
You did not provide enough information like the CSS on the parent element but I think your problem here is the dimensions. You should try by fixing the parent element to take the whole width and height of the viewport.
Maybe like this :
<div class="main" style="height:100vh;"> <!-- PDF Page 1 --> </div>
<div class="pagebreak"></div>
<div class="main" style="height:100vh;"> <!-- PDF Page 2 --> </div>
<div class="pagebreak"></div>
<!-- more ... -->
Related
I have a this problem:
I use a jquery plugin fullPage.js by Alvaro Trigo on my website. The plugin script automatically inserts the html structure in certain elements... in my html I have:
<div class="section fp-auto-height-responsive" id="slider-section">
<div class="slide" id="co-delame-section">
<div class="slide-wrapper">
...
</div>
</div>
</div>
And when the page is loading, javascript generates extra html tags and css, so it looks like:
<div class="section fp-auto-height-responsive fp-section active fp-completely" id="slider-section" data-anchor="About" style="height: 638px;">
<div class="fp-slides">
<div class="fp-slidesContainer" style="width: 100%;">
<div class="slide fp-slide fp-table active" id="co-delame-section" style="width: 100%;">
<div class="fp-tableCell" style="height:638px;">
<div class="slide-wrapper">
</div>
</div>
</div>
</div>
</div>
</div>
I want to append more slides (slide class) for a certain page resolution, so that when user is on mobile with smaller screen, the extra slides won't load.
I do it with this javascript code:
$.get("http://marketingo.cz/wp-content/themes/twentysixteen-child/slider_cs.html", function (data) {
$("#slider-section").append(data);
});
And there is the problem... it works in about 50% page loads, the problem is that sometimes it appends the slides after the fullPage generates the structure, so that the appended slides are out of the slider structure... like this:
<div class="section fp-auto-height-responsive fp-section active fp-completely" id="slider-section" data-anchor="About" style="height: 638px;">
<div class="fp-slides">
<div class="fp-slidesContainer" style="width: 100%;">
<!-- the right place of a slide -->
<div class="slide fp-slide fp-table active" id="co-delame-section" style="width: 100%;">
<div class="fp-tableCell" style="height:638px;">
<div class="slide-wrapper">
</div>
</div>
</div>
</div>
</div>
<!-- appended slides out of slider blocks -->
<div class="slide" id="jsme-partner">
</div>
<div class="slide" id="vase-problemy">
</div>
</div>
So it looks the fullPage.js script runs before the slides are appended, but in the html head tag I firstly put the script to append the slides and fullPage is loaded after...
But what is really weird is that sometimes it loads correctly, sometimes not. Clearing the cache on refresh helps sometimes, but I can't say if there is any pattern with deleting the cache.
You can check it on http://marketingo.cz/en/?stack-overflow#About and give it a few refreshes with cache clearing to see...
The questions is - how can I ensure that the html is appended before the fullPage plugin modifies the code so that the appended sliders will be in a same container?
Thanks for a help! :)
Easy.
Just initialice fullPage.js after you append the slides by using the $.get callback.
$.get("http://marketingo.cz/wp-content/themes/twentysixteen-child/slider_cs.html", function (data) {
$("#slider-section").append(data);
//initialice fullPage.js here:
$('#fullpage').fullpage();
});
I have a website that is already structured a certain way. It looks like this roughly, but with many more rows. These rows are generated based on how much information is pulled from a database.
The code looks somewhat like this,
<html>
<body>
<div class='master'>
<div class='dates'>
<!-- Left side of first internal div -->
<div class='ResourceHeader'>
<p>Resource</p>
</div>
<!-- Right side of first internal div -->
<div class='DatesHeader'>
<div class='dates'>
<p>Date1</p>
</div>
<!-- Insert more dates -->
</div>
</div>
<div class='secondRow'>
<!-- Left side of second row -->
<div class='Resource1'>
<p>P1</p>
</div>
<!-- Right side of second row -->
<div class='date1'>
<p>D1</p>
<!-- Insert more dates -->
</div>
</div>
<div class='thirdRow'>
<!-- Left side of third row -->
<div class='Resource2'>
<p>P2</p>
</div>
<!-- Right side of third row -->
<div class='date1'>
<p>D1</p>
<!-- Insert more dates -->
</div>
</div>
</div>
</body>
I want the website to be structured like this,
I just want to surround the elements in different divs because the div on the right will scroll to the right if more content(dates) are added while the div on the left stays still.
Is there a way to achieve this using anything? Or would I have to go back and change how my website is being rendered after the info is being pulled from the database.
Or can I just assign the divs with the Date1, Date2, ... and D1, D2, ... with a class and just have those divs with the certain class move?
The multipage is working, but I want to inject the footer code in every page container.
Page Code:
<div data-role="content">
<div class="upage" id="mainpage" data-role="page">
<div class="upage-outer">
<!-- some content -->
</div>
</div>
<div class="upage" id="uberpage" data-role="page">
<div class="upage-outer">
<!-- some content -->
</div>
</div>
</div>
And the I just inject the footer code with some buttons (When device is ready):
$(".upage-outer").append('<div data-role="footer">Copyright + Buttons</div>');
This is the full footer code:
<div data-role="footer" data-position="fixed" class="container-group inner-element uib_w_4" data-uib="jquery_mobile/footer" data-ver="0">
<div data-role="controlgroup" data-type="horizontal" class="brideButtonGroup">
<a class="widget uib_w_6" data-role="button" href="#mainpage" rel="external">Wetter</a>
<a class="widget uib_w_7" data-role="button" onclick="intel.xdk.device.launchExternal('http://wetter2.mt-labor.it.hs-worms.de/plot');">Mehr</a>
<a class="widget uib_w_8" data-role="button" href="#uberpage" rel="external">Über</a>
</div>
</div>
The code gets injected, but on the mainpage, the Buttons are not displayed; instead, there are plain text links. On the second page, everything is displayed very well. I can switch between the pages.
What did I do wrong?
edit: I used enhanceWhithin(), and its working. But when I click somewhere on the document, strange colors appear, which are caused by the class ".ui-fixed-hidden". Where does this come from?
edit2: https://jsfiddle.net/564f1fkf/ It's not exactly the same, but if you go to site 2 and then back to site 1 and click somewhere on the page, you should see the problem.
PS: See pictures
You have to call the enhanceWithin() method on data-role="content" element. This will enhance the newly added HTML into jQuery mobile format.
$("[data-role='content']").enhanceWithin();
I'm using the following code with bootstrap to create a banner directly on top of my page. Problem is, the image is at the the very left corner of my page. As soon as I delete the id='banner' flag, the image starts at the correct point just like the rest of my page. Is it because it's not treated as an bootstrap-span-element anymore? I'm sure there is an easy solution. Thanks for help.
<body>
<div class="container" id="banner">
<div class="row">
<!--span>fdsssssssssssssssssssss</span-->
<img src="images/fcrlogo.png" max-width="100%" max-height="100%" class="span1">
<!-- h1> Your banner </h1 -->
</div>
</div>
I'm currently making a website for a university project where I'm using a piece of Javascript ( http://buildinternet.com/project/supersized/ ) in order to generate a background that is a gallery of several images.
I'm trying to set the site so that it will display a single image as the background in the event of Javascript being turned off, but the navigation elements of this slideshow are generated using HTML code outside of the script tags and inside the body tag.
Is there a way I can set this HTML code so that it will only be included when Javascript is active, leaving the screen clear of the navigation controls when it isn't?
At request the code I'm trying to isolate is the Div tags being called below.
<!--Thumbnail Navigation-->
<div id="prevthumb"></div>
<div id="nextthumb"></div>
<!--Arrow Navigation-->
<!-- <a id="prevslide" class="load-item"></a>
<a id="nextslide" class="load-item"></a>
<div id="thumb-tray" class="load-item">
<div id="thumb-back"></div>
<div id="thumb-forward"></div>
</div>
<!--Time Bar-->
<!--<div id="progress-back" class="load-item">
<div id="progress-bar"></div>
</div>
<!--Control Bar-->
<div id="controls-wrapper" class="load-item">
<div id="controls">
<a id="play-button"><img id="pauseplay" src="img/pause.png"/></a>
<!--Slide counter-->
<div id="slidecounter">
<span class="slidenumber"></span> / <span class="totalslides"></span>
</div>
<!--Slide captions displayed here-->
<div id="slidecaption"></div>
<!--Thumb Tray button-->
<a id="tray-button"><img id="tray-arrow" src="img/button-tray-up.png"/></a>
<!--Navigation-->
<ul id="slide-list"></ul>
</div>
</div>
Like #jumpingcode mentioned, you would want to hide the controls in question with CSS, and show them with JavaScript.
Hide the div with CSS:
#controls-wrapper {
display:none;
}
Then show it in your page with jQuery:
$('#controls-wrapper').show();
Or use .css() to have more control over what type of display property to use:
$('#controls-wrapper').css('display', 'block');