Develop Reference

Printing a div in HTML with all css applied

I'm making a project in asp.net MVC. I want to print a div with all css styles applied. This div may contain one or more divs inside it. I tried a lot of javascript print codes but each of them failed. The page I want to print looks like this: Click here to view page. I just want to print the area below the input region which contains the details. But the problem is that when I use the javascript print method, my table view suddenly vanishes. This is the print preview that I get: Click here to view the print preview page. I've tried multiple methods but all have failed. Please Help. Thanks in advance. Below are my code files of front end
saleInvoice.cshtml
<script>
function refresher() {
$('#si, .si').load('/TallySet/cart');
};
function printDiv(divID) {
debugger;
var printContents = document.getElementById(divID).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
};
</script>
<div class="col-lg-12 popblk">
<p>New Sales Invoice</p>
</div>
<div class="col-lg-12" style="background-color:white">
<div class="row">
<div class="col-lg-2">
<p>Customer : </p>
</div>
<div class="col-lg-4">
#Html.DropDownList("customers")
</div>
</div>
<div class="row">
<div class="col-lg-4">
#Html.DropDownList("items")
</div>
<div class="col-lg-4">
#Html.TextBoxFor(x => x.quantity)
</div>
<div class="col-lg-2">
<button value="Add to cart" onclick="addToCart()">Add to cart</button>
</div>
<div class="col-lg-2">
<button value="Refresh" onclick="printDiv('si')">Refresh Cart</button>
</div>
</div>
<div class="row" id="si" style="margin-left:50px;">
#{Html.RenderAction("cart", "TallySet");}
</div>
<div class="row" style="background-image:url('../../viewData/sale_footer.png')">
</div>
<button class="rButtonCancel" value="X" data-dismiss="modal" onclick="listVoider()">X</button>
</div>
cart.cshtml
#model IEnumerable<Fast_Tally_Accounter.Models.salesCart>
<img src="~/viewData/sale_head.png" />
#if(Model!=null)
{
foreach(var v in Model)
{
<div class="row" style="background-image:url('../../viewData/sale_row.png'); background-repeat:no-repeat;margin-left:0px;margin-bottom:0px">
<div class="col-lg-2">
<p>#v.quantity KG</p>
</div>
<div class="col-lg-4">
<p>#v.itemName</p>
</div>
<div class="col-lg-1">
<p>#v.itemPrice</p>
</div>
<div class="col-lg-1">
<p>#v.itemTotal</p>
</div>
</div>
}
}
<div class="row" style="background-image:url('../../viewData/sale_footer.png'); background-repeat:no-repeat; margin-left:0px; height:120px">
<div class="row myRow" style="height:20px; margin-left:536px; margin-bottom:2px; margin-right:0px" id="myRow">
<p>#ViewBag.dt</p>
</div>
<div class="row myRow" style="height:20px; margin-left:536px; margin-bottom:2px; margin-right:0px" id="myRow">
<p>Daniyal humayun</p>
</div>
<div class="row myRow" style="height:20px; margin-left:536px; margin-bottom:10px; margin-right:0px" id="myRow">
<p>#ViewBag.qt</p>
</div>
<div class="row myRow" style="height:20px; margin-left:536px; margin-bottom:0px; margin-right:0px" id="myRow">
<p>#ViewBag.pr</p>
</div>
</div>

There's a number of issues here. First and foremost. You're not actually using a table. Instead, you're using Bootstrap's grid styles to make an approximation of a table. Using an actual HTML table is a better idea, not just for the consistency it provides but also for the sake of accessibility.
Second, the "borders" to your "table" are being applied via background images. While I think Chrome actually gives the user the option to print background images, now, it's not the default, and other browsers will simply ignore background images entirely when printing. Long and short, that approach is doomed to failure.
Third, when printing, you're actually taking the contents of this div and replacing the entire HTML document with that. Importantly, that means any stylesheets and such that were part of the document are thrown away. In particular to your issue here, that would include the Bootstrap stylesheet. This was the way people used to handle printing way back in the day before CSS was even really a thing. Now, there's a much preferable way to handle removing extraneously content from the print. You simply add print-specific styles and hide elements you don't want to print (such as a page header) via that. For example:
#media print {
#Header { display:none; }
}
You can also use this same approach to change styles to improve the print layout. Maybe you want the text to be larger or smaller when printed. You simply add something like body { font-size:12pt; } inside this block.
The only JavaScript you actually need is just window.print(). Your print button calls that, and your print-specific CSS should take over to modify what needs to be modified in the print version.

jQuery append html loading randomly on page reresh

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();
});

Javascript - load an image before the rest of the page

I'm currently building a website and have an image as the header, but when I load the page it will jump half way down the page, load the image and then jump back up. How can I make the image load in first to prevent it from jumping?
HTML:
<div class="refocus" id="hero-header">
<div class="refocus-img-bg"></div>
<div class="refocus-img focus-in">
HTML:
</div>
<div class="refocus-text-container">
<div class="t">
<div class="tc">
</div>
</div>
</div>
</div>
<div class="row">
<div class=".col-md-6">
<div id="section1">
<div id = "sub-text">
<h1>Hello</h1>
<br>
<h2>Hello</h2>
<h3><br>Hello.</h3>
</div>
<div id="image">
<img src="images/aboutme.png"/>
</div>
</div>
<div id="buttoncontainer">
<div id="totimeline">▼</div>
</div>
</div>
</div>
Here's a JSFiddle to replicate this.
Thank you in advance.

You can do one of two things for this.
1) Set the dimensions of your image inline. This is actually a recommended method of preventing the very thing you are experiencing where the page jumps around after images load in. By setting the dimensions inline, the browser will already know how tall the image needs to be and will reserve the space for it before it even finishes loading in.
Example:
<img src="http://placehold.it/350x150" height="150" width="350">
2) If you don't prefer to set the dimensions inline, it seems you could also just set the height in your styles ahead of time and that would do the trick as well.
Example:
.refocus-img{
height:150px;
}

Blank page between transitions jQuery Mobile

When using transitions to navigate between two pages in my jQuery Mobile application, I see a blank page between the two pages. This behavior occurs at least on the Slide transition, fade does not show this behavior.
My page structure is like this:
<div id="MainPanelPage" data-role="page">
<div id="MenuLeft" data-role="panel">
...
</div>
<div data-role="header">
...
</div>
<div data-role="ui-content">
...
</div>
</div>
<div id="BannerPage" data-role="page">
<div data-role="header">
...
</div>
<div data-role="ui-content">
...
</div>
</div>
Note: jQuery Mobile wraps these divs into a global div automatically.
I am calling the transition with the following link:
<input type="submit" name="ctl25" value="Meer informatie" onclick="$.mobile.navigate('#BannerPage', { transition: 'slide' });" data-role="button" href="#BannerPage" data-transition="slide">
Please note that I am running ASP.NET and the language is kind of dirty in combination with jQuery Mobile.
I am running jQuery Mobile 1.4.5. After spending hours of trying I decided to ask here for a possible solution. Thanks in advance.

Jquery mobile page disappear after image displayed with css

I'm trying to use the file transfer with Jquery mobile and cordova on android,
i use this tutorial to practice:
http://blog.revivalx.com/2014/05/03/tutorial-camera-cordova-plugin-for-ios-and-android/
After selecting the picture, this function is call on success:
function onPhotoDataSuccess(imageURI) {
navigator.notification.alert("onPhotoDataSuccess Image URI: "+imageURI, function() {});
var cameraImage = document.getElementById('image');
cameraImage.style.display = 'block';
cameraImage.src = imageURI;
}
The notification show me the good file URI, so i presume it's ok, but when the application come back to the webview, the whole "page" and it's content disappear from the screen and another page appears, this page is the launcherpage that is displayed untill the device is ready, when it's ready, i change the page to login page.
<div id="launcherPage" data-role="page" data-theme="b">
<h1>Loading...</h1>
</div>
So i tried and changed this function with this code:
function onPhotoDataSuccess(imageURI) {
navigator.notification.alert("onPhotoDataSuccess Image URI: "+imageURI, function() {});
$('#image').attr({
src: imageURI,
style: "display:block;width:100%;"
});
}
But i have the same result, there is no duplicate ids, i don't really understand why it's doing that.
Here is the html code:
<div data-role="page" id="picture" data-theme="b">
<div data-role="header">
<h1>TEST</h1>
</div><!-- /header -->
<div data-role="content" data-theme="b">
<form id="pictureForm">
<button onclick="capturePhoto();">Capture Photo</button><br>
<button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Library</button>
<img id="image" src="" style="display:none;width:100%;">
<label for="title">Title</label>
<input data-clear-btn="true" name="title" id="title" value="" type="text">
<input value="Continue" type="submit" id="adButton" onclick="uploadPhoto();">
</form>
</div><!-- /content -->
<div data-role="footer" data-theme="b">
<h4>TEST</h4>
</div><!-- /footer -->
</div><!-- /page -->
EDIT
I've noticed that when the launcherPage is displayed after the picture selection, if i tap my phone's back button, it displays the picture page correctly with the selected image included...
EDIT 2
When i comment the launcherPage from the html code, after the picture selection, it displays the login page...

i figured out the solution, the issue was not comming from css, but html:
I just changed this code:
<button onclick="capturePhoto();">Capture Photo</button>
to this:
Capture Photo
Don't use html buttons tag, use anchor tag... don't know why but this worked !!!
Hope this will help someone