I am trying to create an app for iPad, like iBook. I have loaded a ePub file in it and all is working fine.
I have written a CSS for the webview page. The following is my code to get page break
<span style="page-break-after: always" />
I have loaded a image, and some text below it. After the image I want the page break, and I want the image to be moved to the next page, but the page break code is not working. I'm not sure that my line of code is correct.
How about add a style definition like this?
<style type="text/css">
img.pagebreak {page-break-before: always;}
...
</style>
...
<body>
...
<img style="pagebreak" ...>
...
Related
I want on the WP page with ctrl+p print only some classes and not the whole page. So can I do it?
I am unsure how free you are with WordPress, but, if you are able to implement your own CSS (since you used it as a tag), you can use a media query to exclude/include classes when the user prints the page. #media print targets the print style of the page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test.html</title>
<link rel="stylesheet" href="test.css" />
</head>
<body>
<p class="c1">class 1</p>
<p class="c2">class 2</p>
<p class="c3">class 3</p>
</body>
</html>
#media print {
.c2 {
display: none;
}
}
Web View:
Print View:
-Clicking the Print button on the toolbar instantly prints the web page. To work the Print dialog box, choose Print from the Print button’s menu or press Ctrl+P.
-A single web page is often output to several printed pages.
-To print only part of a web page, select the part you want by using the mouse. Then press Ctrl+P and, in the Print dialog box, choose Selection. Click the Print button to print only the selected portion of the web page.
-Only one part of a web page can be selected at a time.
-Sometimes, text fails to show up when you select the Shrink to Fit option. It’s a “feature” of the web page. Simply choose another size from the Change Print Size menu.
-You can print an image on a web page by right-clicking the image and choosing Print Picture from the shortcut menu. This trick comes in handy when the image doesn’t print with the rest of the web page.
I'm using one of html5up.net's templates and when I add a stripe 'Pay by card' button, it's overridden by the css of html5up (see both jsfiddles below). I tried going through the css file and see if there's anything I could change to affect the button's appearance to no avail (the file is absolutely massive and I could use some steering from more experienced heads).
Jsfiddle of how the button is supposed to look like (no css loaded)
<title>Lalala</title>
<body>
<form action="/your-server-side-code" method="POST">
<script
src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="a public key"
data-amount="1000"
data-name="Lalala"
data-description="Widget"
data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
data-locale="auto"
data-zip-code="true"
data-currency="eur">
</script>
</form>
</body>
Jsfiddle of how it looks like with HTML5up's css, which is the same code as before plus this line:
<link rel="stylesheet" href="main.css" />
My question: Is there any simple way that I can have just the button be exempt from the css that I have loaded for the site? If not, how would you go about accomplishing that? A new class that has default settings in the css file?
Thanks!
Line 1897 of your CSS is describing styles applied to the buttons.
If you remove line 1923:
height: 3.75em;
It will look kind of ok (or just delete whole section from 1897 to 2050 and you will be fine).
I've made a website using WordPress. The problem is the blank slide after the last image. I've checked in Firefox firebug there is not any blank slide or script in code but it is shown in the original site.
Any known solution then help me out.
I just noticed you have this line
<script type="text/javascript" src=".../wp-content/themes/twentyten/js/startstop-slider.js"></script>
and then you have the same code again inside that page
<div id="detail_slider">
<script language="javascript">
...
...
</script>
Try removing that external startstop-slider.js file from the page. Maybe they are interfering with each other.
I have a page with error message hidden using display: none;
When page loads, the error message was shown briefly and then went away. It seems ccs applies slowly to the page.
How can I improve the user experience and not allow the error message to display when loading?
The page also loads a table using Ajax call. Could this affect how css applies to the page?
Thanks.
Simply add style="display:none;" to the actual html elements or div's on the page that you don't want to show initially. You can't rely on the CSS file right away. For example:
<div class="error" style="display:none;">
<span class="myerror">Hello World!</span>
</div>
Other than this exception for the hidden areas, it's typically best to keep all your css decoupled from the page and in an external file.
If you call your CSS file with <link> then you should try to put your CSS in <style> instead. Should be faster. As the external file needs longer to load then <style> which you have in the same file.
i am using a slider js named as easySlider1.js for worspress. its working fine but till the time whole page is not fully loaded it show all the images of slider for a moment till the page is not loaded. as soon as page is fully loaded then it working fine.but it seems odd that it show all the images while page is in loading process. so please tell me how can i solve the problem. i want that all the images of slider should not show while page load. i try for it but cannot get the solution.so please tell me how can i solve the problem.
Thanks.
I don't know how the page looks like, but with the information you gave I came up with the following:
If the images are surrounded with a html-tag like div or p, then you can add css to hide the images while loading and show the images when the page is fully loaded.
If you have this:
<html>
<body>
<div id="image_gallery">
<img src="..." />
</div>
...
</body>
Then change it to this:
<html>
<body>
<div id="image_gallery" style="display:none;">
<img src="..." />
</div>
...
<!-- insert script just above the body endtag -->
<script type='text/javascript'>
jQuery('div#image_gallery').show();
</script>
</body>
jQuery must be loaded for this to work.