I am trying to add flipbook effect in HTML5
I have created some div tags for pages and for hard cover but problem is that 'hard' div's are not working as they should be like I am unable to turn hard pages.!
I have code this :
<html>
<head>
<!--
<style type="text/css">
body
{ overflow:hidden;}
#zoom-viewport
{
background:#E3EDFF;
}
#flipbook.shadow{
-webkit-box-shadow: 0 4px 10px #666;
-moz-box-shadow: 0 4px 10px #666;
-ms-box-shadow: 0 4px 10px #666;
-o-box-shadow: 0 4px 10px #666;
box-shadow: 0 4px 10px #666;
}
#flipbook .page-wrapper{
-webkit-perspective:2000px;
-moz-perspective: 2000px;
-ms-perspective: 2000px;
perspective: 2000px;
}
#flipbook{
background:#75A3FF;
transition:margin-left 1s;
-webkit-transition:margin-left 1s;
-moz-transition:margin-left 1s;
-o-transition:margin-left 1s;
-ms-transition:margin-left 1s;
transition:margin-left 1s;
}
</style>
-->
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="includes/Turn/turn.js"></script>
</head>
<body>
<div id="zoom-viewport">
<div id="flipbook" style="background-color:red;">
<div class="hard"> Turn.js </div>
<div class="hard"></div>
<div class="double"> Page 1 </div>
<div class="double"> Page 2 </div>
<div class="double"> Page 3 </div>
<div class="double"> Page 4 </div>
<div class="hard"></div>
<div class="hard"></div>
</div>
</div>
<script type="text/javascript">
$("#flipbook").turn({width:800, height:500 , autoCenter:true}).bind("turning", function(event, page, view) {
alert("Turning the page to: "+page);
});
</script>
</body>
</html>
Please help to sort out this problem
Thanks in advance
Shumaila
There's a couple things to check.
Which version of Turn.js are you using?
What browser are you testing in?
It seems that the hard class wasn't released until the 4th version. There was also a bug using hard class in IE9 that wasn't fix until release 4.1.0.
Hope this helps, on a quick look the code seems pretty much like the example code.
Related
The IE 11 (11.0.9600.18350) seems to have some issues when using rounded borders. I made a minimal fiddle: https://jsfiddle.net/7phqrack/2/
html:
<div class="backgrounddiv">
<div class="outer">
<span id="span1">some content</span>
<div class="inner">
<span id="span2">more content in a nested div</span>
</div>
</div>
<div class="outer">
<span id="span1">some other content</span>
</div>
</div>
style:
.backgrounddiv{
background: black;
}
.outer{
border-radius: 4px 4px 0px 0px;
background: white;
}
.inner{
background: white;
}
At some zoomlevels (130% on my machine) the background is visible between the two divs (and also at the upper border). Other browsers do not render the black line between the divs.
Does anybody know how to solve this issue?
Try to use this and see if it's remove the borders in Internet Explorer:
.outer{
border-radius: 4px 4px 0px 0px;
background: white;
border:0;
outline:none;
}
This question was already asked:
Question 1
Question 2
It seems to be a bug in IE11.
I'm trying to decide the best way to automate adding text overlays onto images for a resource library I am creating. I have hundreds of these kinds of resources where I grab a "sample image" of the item that I then manually, in a graphics program, add the resource name overlay. It would be great if I could just upload the image and then in the HTML add the resource name and have it overlay the name and round the corners of the image and make it look right. An example of what I am trying to do is at http://digitallearning.pcgus.com/Pepper/PPB/General/leadership.html. This is all manual at this point and the more I can automate the better the process of creating this will be. Thanks in advance for any advice/code I could use.
thanks for asking on SO!
In future, we would all appreciate it if you could add your code at the moment, if any.
There are multiple ways to do this, it all depends on how you write code.
The way I would do it is using a bootstrap row (for inline images), then insert this code (modify for your application):
HTML:
<div class="col-xs-4">
<div class="imageTextContainer">
<div class="imagePart">
<img src="imgSrcHere" />
</div>
<p>Your text here</p>
</div>
</div>
<div class="col-xs-4">
<div class="imageTextContainer">
<div class="imagePart">
<img src="img2SrcHere" />
</div>
<p>Your text here</p>
</div>
</div>
<div class="col-xs-4">
<div class="imageTextContainer">
<div class="imagePart">
<img src="img3SrcHere" />
</div>
<p>Your text here</p>
</div>
</div>
Custom CSS:
.imageTextContainer {
height: 250px;
background-color: #0000FF
}
.imagePart {
height: 230px;
}
.imagePart > img {
height: 100%;
}
Hope this helps.
The reason this works is because the div containing the images and text is 250px high, however the images are set to 100% of 230px, so you get 20px for text. You can obviously modify these values however
This is what I ended up with that seems to have addressed my particular needs.
.wrap {
/* force the div to properly contain the floated images: */
position:relative;
float:left;
clear:none;
overflow:hidden;
}
.wrap img {
position:relative;
z-index:2;
width:200px;
height:125px;
border:2px solid #1F497D;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
z-index:1;
}
.wrap img:hover {
-webkit-filter: brightness(70%);
-moz-filter: brightness(70%);
-o-filter: brightness(70%);
-ms-filter: brightness(70%);
filter: brightness(70%);
}
.wrap .desc {
display:block;
position:absolute;
width:100%;
top:55%;
left:0;
background-color: rgba(31,73,125,0.85);
font-family: 'Arvo', serif;
font-size:11px;
color: #FFF;
text-shadow: 1px 1px #111111;
font-weight:normal;
display:flex;
text-align:center;
justify-content:center;
align-items:center;
bottom: -5%;
-webkit-border-radius: 0px 0px 10px 10px;
-moz-border-radius: 0px 0px 10px 10px;
border-radius: 0px 0px 10px 10px;
z-index: 1;
}
<!DOCTYPE html>
<html>
<head><title>Client Resources</title>
<link href="learningmat.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Arvo|Alice|Roboto|Roboto+Condensed|Alegreya:700">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
</head>
<body>
<div class="list">
<h1 class="list2">Client Resources</h1>
<hr class="list2">
<p>SOME KIND OF DESCRIPTION</p>
<img src="imgs/spacer.png" class="spacer2">
<a href="docs/03 - How do we define urgency.pdf" target="_blank">
<div class="wrap">
<img src="imgs/Urgency.jpg" />
<h3 class="desc">How Do We Define Urgency?</h3>
</div>
</a>
</div>
</body>
</html>
If anyone sees any improvements or changes, please let me know.
I am building a website and I am still in the stages of learning, I'd say this is my most complex layout. Basically I have an unusual banner at the top of my page which I think is causing my problem. Above the footer of my page there is a large white space. I think it is caused by the face I have had to use things like top:-200px; on some of my divs so that they are in the right place.
It would really help to have someone with more experienced eyes to look it over.
Here is the website -
www.redchevron.co.uk
and here is the html -
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/header.css">
<link rel="stylesheet" type="text/css" href="css/font.css">
<link rel="stylesheet" type="text/css" href="css/footer.css">
<link rel="stylesheet" type="text/css" href="css/home_stylesheet.css">
<title>Red Chevron | Graphic Design</title>
<META NAME="description" CONTENT="At Red Chevron, we strive to bring you crisp, quality designs to suit your needs. Digital Graphics | Corporate Identity | Promotional Material">
<META NAME="keywords" CONTENT="graphics, rob, jeffrey, graphic, design, photoshop, logo, business, card, leaflet, flyer, freelance, red, chevron, redchevron, designer, digital, quality, media">
<script>
$(“body”).Scrollbar();
</script>
</head>
<body>
<div class="banner">
<div class="navigation">
<ul>
<li><a class="nav" href="index.html">Home</a></li>
<li><a class="nav" href="#">Portfolio</a></li>
<li><a class="nav"></a></li>
<li><a class="nav" href="#">About me</a></li>
<li><a class="nav" href="#">Contact</a></li>
</ul>
</div>
</div>
<div class="headround">
</div>
<div class="headlogo">
<img src="images/head_logo.png">
</div>
<!-- stop here for header -->
<div class="maincont">
<div class="mainfeat">
<img src="images/feat_flag.png">
<div class="maininfo"><!--feature-->
</div>
</div>
</div>
<div class="maincont">
<div class="mainfeat">
<img src="images/news_flag.png">
<div class="maininfo"><!--news-->
<h2> Coming Soon </h2>
Thank you for visiting Red Chevron.<br><br>
My name is Rob Jeffrey, founder of Red Chevron. I offer quality, affordable graphic design services to suit your needs.
Whether you need a new Corporate Identity, promotional material, or anything in between, I am here to make your ideas a reality.<br><br>
I have spent over 6 years refining and polishing my Digital Design skills in order to give my clients the very best results.<br><br>
Unfortunately this site is currently under construction.<br>
If you would like to contact me, please use the details below:<br><br>
Rob Jeffrey<br>
<b>Call:</b> 07925 870385<br>
<b>Email:</b> rob.jeffrey#redchevron.co.uk
</div>
</div>
</div>
<div class="maincont">
<div class="mainfeat">
<img src="images/pipe_flag.png">
<div class="maininfo"><!--pipeline-->
</div>
</div>
<div class="footer">
© 2014 Red Chevron All Rights Reserved
</div>
</div>
<!-- Start of footer -->
</body>
</html>
And the css -
Header -
*{
margin:0px;
padding:0px;
}
body{
overflow-x:hidden;
}
.banner{
width:100%;
height:80px;
position:relative;
z-index:10;
background-color:white;
box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.6);
overflow:hidden;
}
.headround{
background: #fff;
position:relative;
float: center;
margin:auto;
height: 76px;
width: 164px;
z-index:100;
-webkit-border-radius: 0px 0px 76px 76px;
-moz-border-radius: 0px 0px 76px 76px;
border-radius: 0px 0px 76px 76px;
box-shadow: 0 7px 12px 0px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 7px 12px 0px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 0 7px 12px 0px rgba(0, 0, 0, 0.4);
}
.headlogo{
position:relative;
z-index:101;
width:124px;
margin:auto;
float:center;
top:-144px;
}
.navigation
{
width: 1300px;
overflow:auto;
margin:25px auto 0px auto;
padding:0px;
float:center;
}
ul {
list-style-type:none;
margin:auto;
padding:0;
text-align:center;
}
li {
display:inline-block;
float:center;
text-align:center;
font-size:34px;
font-family:walkway;
}
.nav {
display:inline-block;
width:250px;
height:30px;
color:black;
text-decoration:none;
text-align:center;
padding:2px;
float:center;
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background-color: rgba(235,235,235,1);
-webkit-border-radius: 0px;
}
::-webkit-scrollbar-thumb:vertical {
background-color: rgba(231,52,39,1);
-webkit-border-radius: 0px;
}
::-webkit-scrollbar-thumb:vertical:hover,
::-webkit-scrollbar-thumb:horizontal:hover {
background: rgba(231,52,39,1);
}
::-webkit-scrollbar-thumb:horizontal {
background-color: rgba(231,52,39,1);
-webkit-border-radius: 0px;
}
Home page style sheet -
*{
margin:0px;
padding:0px;
}
body{
overflow-y:hidden;
}
.maincont{
margin:0 auto;
float:center;
width:1350px;
padding-left:1px;
height:auto;
z-index:1;
position:relative;
top:-220px;
color:white;
font-family:verdana;
font-size:11pt;
}
.mainfeat{
width:450px;
height:auto;
text-align:center;
float:left;
margin:auto;
}
.maininfo{
height:428px;
width:378px;
top:-56px;
z-index:-1;
position:relative;
background:#303030;
margin:0px 30px;
padding:61px 5px 5px 5px;
}
h2{
color:#e73427;
}
and Footer -
.footer{
width:100%;
height:auto;
text-align:center;
color:#b4b4b4;
font-family:verdana;
clear:both;
padding:10px;
bottom:-100px;
vertical-align:bottom;
}
Like I said I'm a beginner so if there is a much more logical way of constructing my banner and getting rid of the white space, please let me know.
Many thanks guys
It looks like the culprit is, as you say, your usage of position CSS. If I disable top: -220px; from your maincont divs, the gap is eliminated.
As for a solution...? I'm not too sure, really. There are plenty of neater ways to code what you're trying to do, using different methods, from what I'm seeing in your page source.
Perhaps someone else might be able to suggest ways you can fix it up, but from my perspective, I would redo more or less everything, because of other issues, such as the one we discussed in the comments regarding overflow-y. Plus, the width of the page and your overflow-x would essentially stop users on smaller screens/browser widths/resolutions from seeing a good chunk of the right side of your site.
Not the best nor neatest way to code, but sometimes a negative margin on the bottom the equivalent of the negative top works or change the top:-220px; to margin-top:-220px;
Bottom border moves down and down again in IE9 when hovering/unhovering the button:
<!DOCTYPE html>
<html>
<head>
<style>
.btn:hover {
box-shadow: 0 0 0 2px #b1b3b4;
}
</style>
<head>
<body>
<div style="overflow: auto; border: 1px solid black;">
<div style="width: 110%; height: 20px;">
Wide content causing horizontal scrolling....
</div>
<button class="btn">Hover Me</button>
</div>
</body>
</html>
Fiddle: http://jsfiddle.net/WW3bh/6353/
Is it a known IE9 issue? How do I work that around?
Put display:block at the .btn:hover.
Guess that will fix it!
.btn:hover {
box-shadow: 0 0 0 2px #b1b3b4;
display:block;
}
Option 1:
Setting a height for the scrollable div seems to solve the problem:
Working Example 1
<div style="overflow: auto; border: 1px solid black; height:65px;">
<div style="width: 110%; height: 20px;">Wide content causing horizontal scrolling...</div>
<button class="btn">Hover Me</button>
</div>
Option 2:
Use overflow-x:scroll; rather than overflow:auto;:
Working Example 2
<div style="overflow-x: scroll; border: 1px solid black;">
<div style="width: 110%; height: 20px;">Wide content causing horizontal scrolling....</div>
<button class="btn">Hover Me</button>
</div>
Option 3:
Probably the best option as it allows the box-shadow to be visible in IE9.
Wrap the button in a div with class .btn rather than placing the class directly on the button.
Working Example 3
.btn {
display:inline;
}
.btn:hover {
display:inline-block;
border-radius:2px;
box-shadow: 0 0 0 2px #b1b3b4;
}
<div style="overflow: auto; border: 1px solid black;padding:2px;">
<div style="width: 110%; height: 20px;">Wide content causing horizontal scrolling...</div>
<div class="btn">
<button>Hover Me</button>
</div>
<div class="btn">
<button>Hover Me</button>
</div>
<div class="btn">
<button>Hover Me</button>
</div>
</div>
Option 4:
Just for laughs...
Working Example 4
<!--[if IE]>
<div id="noIE">Please download a Real Browser!
<br><sub>Internet Explorer is hateful non-compliant browser that kicks puppies... </sub>
</div>
<![endif]-->
Try this:
Option 1 (change html slightly):
<div style="overflow: auto; border: 1px solid black;">
<div style="width: 110%; height: 20px;">Wide content causing horizontal scrolling...</div>
<span><button class="btn">Hover Me</button></span>
</div>
http://jsfiddle.net/WW3bh/10615/
Option 2 (with provided html, using js):
$('.btn').hover(function () {
var $btn = $(this);
var originalPosition = $btn.css('position');
$btn.css('position', 'fixed');
// this.offsetHeight is needed to trigger browser reflow.
this.offsetHeight;
$btn.css('position', originalPosition);
});
http://jsfiddle.net/WW3bh/10617/
To correct this, change: overlow: auto to overflow: visible and that should so it.
You got yourself a really weird bug there sir. And it definitely a bug, if you use ie9-mode on a ie10, this will not happen.
I couldn't figure it out why but it seems to go back to its original state if you resize the window manually. Maybe you can fake this with javascript?
Another thing i discovered was that if you set a :hover {zoom: 1} on the element with the scroll, it "reset" itself when hovering of it. maybe someone can use this to figure out why it acts like it does.
fiddle for it here: http://jsfiddle.net/WW3bh/10599/
please try this css:
.btn:hover {
box-shadow: 1px 2px 0px 1px #b1b3b4;
}
<div style="overflow: auto; border: 1px solid black;">
<div style="width: 110%; height: 80px;">Wide content causing horizontal scrolling....</div>
<button class="btn">Hover Me</button>
<div> </div>
</div>
http://jsfiddle.net/WW3bh/10472/
Adding a height of 100% to the div should fix your issue
<div style="overflow: auto; border: 1px solid black;height: 100%">
<div style="width: 110%; height: 20px;">Wide content causing horizontal scrolling....</div>
<button class="btn">Hover Me</button>
</div>
Here is the working JSFiddle: http://jsfiddle.net/c2sBp/
I checked this in Ie9 and did not find that border bottom expanding.
please give a try. and Let me know
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>hover demo</title>
<style>
.btn{
box-shadow: 0 0 0 2px #b1b3b4;
}
.noBtn{
box-shadow: none;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div style="overflow: auto; border: 1px solid black;" >
<div style="width: 110%; height: 20px;">
Wide content causing horizontal scrolling....
</div>
<button id="hover">Hover Me</button>
</div>
<script>
$(document).ready(function(){
try{
$('#hover').hover(function () {
$("#hover").addClass('btn');
$("#hover").removeClass('noBtn');
});
$('#hover').mouseleave(function () {
$("#hover").removeClass('btn');
$("#hover").addClass('noBtn');
});
}catch(e){
alert(e);
}
});
</script>
</body>
</html>
Please let me know after trying.
Say I have a index.html with a canvas in it:
<html>
<head>
</head>
<body style="text-align: center;background: #f2f6f8;">
<div style="display:inline-block;width:auto; margin: 0 auto; background: black; position:relative; border:5px solid black; border-radius: 10px; box-shadow: 0 5px 50px #333">
<canvas id="gameCanvas" width="320" height="480"></canvas>
</div>
</body>
</html>
and the canvas is showing ok this way ~~~
Now I want to put a image as background behind the canvas and I tried to add a img tag in the body:
<html>
<head>
</head>
<body style="text-align: center;background: #f2f6f8;">
<img src="xxx.png" alt="" />
<div style="display:inline-block;width:auto; margin: 0 auto; background: black; position:relative; border:5px solid black; border-radius: 10px; box-shadow: 0 5px 50px #333">
<canvas id="gameCanvas" width="320" height="480"></canvas>
</div>
</body>
</html>
but then the canvas appeared to show after the image not on top of it ...
I really know nothing about html I think it should not be that hard to get this done, hope someone can give a hand here, thanks :)
Live Demo
You just need to use z-index. I put the image and the canvas element in a container, and position them so the canvas will always be over the image.
Also another note, you shouldn't size your canvas using CSS, you should always do it via the properties directly. In my fiddle I did it via JS.
Markup
<div id="container">
<img class='img' src="http://lorempixel.com/320/480/" alt="" />
<canvas id="gameCanvas" width="320" height="480"></canvas>
</div>
CSS
body{text-align: center;background: #f2f6f8;}
.img{position:absolute;z-index:1;}
#container{
display:inline-block;
width:320px;
height:480px;
margin: 0 auto;
background: black;
position:relative;
border:5px solid black;
border-radius: 10px;
box-shadow: 0 5px 50px #333}
#gameCanvas{
position:relative;
z-index:20;
}
you can draw image in canvas like this , rather than putting canvas on image
var topMap = new Image();
topMap.src = "myiamge.jpeg";
function drawMap() {
context.clearRect(0, 0, WIDTH, HEIGHT);
context.drawImage(topMap, 0, 0);
}
function init() {
drawMap();
}
topMap.onload = function() {
init();
}
You can set a background image for the canvas with background-image: url('xxx.png'); but the background won't be displayed if the user presses View image in the browser.
<canvas style="background-image: url('xxx.png');"id="gameCanvas" width="320" height="480"></canvas>
Or use JavaScript like Pranay Rana said (it's better if you have other levels or if you have to change the background later) :)