Turn.js (flipbook effect) is not working - javascript

Sorry, but I am not getting where actually I did the mistake (as I am a newbie to javascript). I wrote this code for the flipbook effect using turn.js with the help of a tutorial. But the output in a browser is just showing the blank screen. I guess, there must be an awkward mistake but m still not getting it . plz help.
<html>
<head>
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="turn.js"></script>
<style type="text/css">
body{
background: #9988aa;
}
#book{
width: 1152px;
height: 400px;
}
#book .turn-page{
background-color: #ddd;
background-size: 100% 100%;
}
</style>
</head>
<body>
<div id="book">
<div style="background-image:url('images/1.jpg');"></div>
<div style="background-image:url('images/2.jpg');"></div>
<div style="background-image:url('images/3.jpg');"></div>
<div style="background-image:url('images/4.jpg');"></div>
<div style="background-image:url('images/5.jpg');"></div>
<div style="background-image:url('images/6.jpg');"></div>
<div style="background-image:url('images/7.jpg');"></div>
<div style="background-image:url('images/8.jpg');"></div>
</div>
<script type="text/javascript">
$(window).ready(function(){
$('#book').turn({
display:'double',
acceleration: true,
elevation:50;
});
});
$(window).bind('keydown',function(e){
if (e.keyCode==37)
$('#book').turn('previous');
else if (e.keyCode==39)
$('#book').turn('next');
});
</script>
</body>
</html>

Hi there is small error in your code, kindly just remove semi colon from following line.
elevation:50;
It should be like following, just remove semi colon. Hope it will resolve your issue.
$(window).ready(function(){
$('#book').turn({
display:'double',
acceleration: true,
elevation:50
});
});
$(window).bind('keydown',function(e){
if (e.keyCode==37)
$('#book').turn('previous');
else if (e.keyCode==39)
$('#book').turn('next');
});

Related

Dynamic less variable values using javascript - Browser compatability issue

Dynamically update less variables from javascript using less.modifyVars method. It works fine on chrome but not supported by Firefox and IE-11(i.e. color attribute value does not be applied on firefox and IE-11).
Using less.js for compilation, please refer the code and screenshot, I don't know where I did mistake.
// HTML Code
<html>
<head>
<link rel="stylesheet/less" type="text/css" href="css/color.less" />
<script src="Scripts/jquery-1.11.1.min.js"></script>
<script src="Scripts/less.js"></script>
<script type="text/javascript">
less.modifyVars({
'#color': 'blue'
});
</script>
</head>
<body>
<div class="row1" style="width: 250px; height: 250px;">box1</div>
<div class="row2" style="width: 250px; height: 250px;">box2</div>
</body>
</html>
//LESS Code(color.less)
#color:"red";
.row1
{
background-color:#color;
}
.row2
{
background-color:#color;
}
Error screenshot: "http://s8.postimg.org/ia9ki4nnp/Browser.png"

Weird margin on html page

There seems to be padding around the sides of my website, and I cannot get rid of it. Any types of hints will be appreciated.
#introContainer{
background-color: #bdc3c7;
}
#navHeader{
background-color:#95a5a6;
}
#skillsHeader{
background-color:#3498db;
}
<!DOCTYPE html>
<html>
<head>
<title>Local</title>
</head>
<body>
<div id="introContainer">
</div>
<div id="navHeader">
</div>
<div id="skillsHeader">
</div>
</body>
</html>
To remove it add the following:
body { margin: 0; }
You could also search normalize.css or reset.css and add the style before your own style.

skrollr doesnt work on ipad when using doctype html

Below code doesnt work on ipad: the page gies completely blank. Works fine on desktop browsers. If I remove the doctype, it works.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#block {
background-color:red;
width:100px; height:100px; top:300px;
position:absolute;
}
</style>
</head>
<body>
<div id="skrollr-body">
<div id="block" data-0="left:0px" data-300="left:100px">test</div>
</div>
<script src="js/skrollr.min.js"></script>
<script type="text/javascript">
skrollr.init();
</script>
</body>
</html>
Strange .. using skrollr 0.6.17. Whats wrong ?
*-pike
html, body { height:100%; }
seems to fix it. hm .. is that a bug ? am i missing a lib ?

jQuery mobile popup is not closing

sorry for not supplying a fiddle, I can't get it set up there.
However, I use the following code to programatically open and close a popup. Only that it doesn't close and stays open. What am I doing wrong?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.js"></script>
<script>
$(document).ready(function()
{
$("#initialpopup").popup("open");
setTimeout(function()
{
$("#initialpopup").popup("close");
}, 500);
});
</script>
</head>
<body>
<div data-role="page" data-theme="a" data-content-theme="c">
<div data-role="popup" id="initialpopup" data-overlay-theme="a" data-theme="a">Foobar</div>
</div>
</body>
</html>
you can try
$('#initialpopup').popup('open', {transition: 'pop'});
window.setTimeout('$("#initialpopup").popup("close");', 500);
I am not sure if this is the same case as the one reported here, but I had the same problem and fixed it with this extra CSS:
.ui-popup-container [data-role=popup] {
visibility: hidden;
}
.ui-popup-container.ui-popup-active [data-role=popup] {
visibility: inherit;
}
.ui-popup-screen.out {
visibility: hidden;
}
I believe there was a screw-up in the library at some point in time, or we might be missing something...
I feel this is related to the animations somehow, but I haven't found a way to properly fix it.

How to make a Jquery Popup note

How would you make a JQuery popup Note ? This is what I currently have,
Note Code Example
<html>
<head>
<script type="text/javascript" src="jquery.js"> </script>
<style type="text/css" rel="stylesheet">
#popup {
border: 1px solid black;
width: 400px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$(".HoverMe").mouseenter(function() {
var left = $(".HoverMe").position().left;
var top = $(".HoverMe").position().top;
$("body").append("<div id=\"popup\"> </div>");
$("#popup").css("left",left);
$("#popup").css("top",top);
$("#popup").append("<p> Hello World </p>");
});
$(".HoverMe").mouseleave(function() {
$("#popup").fadeout("fast");
});
});
</script>
</head>
<body>
<div class="HoverMe">
Hover Me
</div>
</body>
</html>
Thats not what I wanted, i wanted something like when you hover some text, it displays a popup with some text. The popup is then aligned center of the text if that makes sense.
Any examples would be useful,
Thank you!
How about using someone else's code for this? I recommend tipsy.
Have a look here. It's not jQuery, although arguably it's an easier technique than jQuery:
http://sixrevisions.com/css/css-only-tooltips/

Categories

Resources