Bootstrap token field typeahead - bootstrap-typeahead

What could be wrong guys? I am trying to query the database when someone types. All results in json data in the local variable must be returned by php
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Tokenfield for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap styling for Typeahead -->
<link href="dist/css/tokenfield-typeahead.css" type="text/css" rel="stylesheet">
<!-- Tokenfield CSS -->
<link href="dist/css/bootstrap-tokenfield.css" type="text/css" rel="stylesheet">
<!-- Docs CSS -->
</head>
<body>
<input type="text" class="form-control" id="tokenfield-typeahead" value="andani" />
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="dist/bootstrap-tokenfield.js" charset="UTF-8"></script>
<script type="text/javascript" src="docs-assets/js/scrollspy.js" charset="UTF-8"></script>
<script type="text/javascript" src="docs-assets/js/typeahead.bundle.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="docs-assets/js/docs.js" charset="UTF-8"></script>
</body>
<script>
jQuery(document).ready(function($) {
var engine = new Bloodhound({
local: [
<?php
$Conn=mysqli_connect("localhost","root","","andani_play");
$Query="SELECT `GroupName` FROM `group` LIMIT 1";
$Result=mysqli_query($Conn,$Query);
$Array=array();
if($Result)
{
while($Data=mysqli_fetch_array($Result))
{
echo json_encode($Data[0]);
}
}
?>
],
//local: [{value: 'red'}, {value: 'blue'}, {value: 'green'} , {value: 'yellow'}, {value: 'violet'}, {value: 'brown'}, {value: 'purple'}, {value: 'black'}, {value: 'white'}],
//local: ['red','blue','green','yellow','violet','brown','purple','black','white'],
datumTokenizer: function(d) {
return Bloodhound.tokenizers.whitespace(d);
},
queryTokenizer: Bloodhound.tokenizers.whitespace
});
engine.initialize();
$('#tokenfield-typeahead').tokenfield({
typeahead: [null, { source: engine.ttAdapter() }]
});
});
</script>
</body>
</html>


I got it guys..Just use the code below. I have been fighting with this for weeks:
<!DOCTYPE>
<html lang="en">
<head>
<title>Andani Masikhwa</title>
<link href="bootstrap-tokenfield.css" type="text/css" rel="stylesheet">
<!--<link href="tokenfield-typeahead.css" type="text/css" rel="stylesheet">-->
</head>
<style>
.tt-query,
.tt-hint {
width: 396px;
height: 30px;
padding: 8px 12px;
font-size: 24px;
line-height: 30px;
border: 2px solid #ccc;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
outline: none;
}
.tt-query {
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.tt-hint {
color: #999
}
.tt-dropdown-menu {
width: 422px;
margin-top: 12px;
padding: 8px 0;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
-moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
box-shadow: 0 5px 10px rgba(0,0,0,.2);
}
.tt-suggestion {
padding: 3px 20px;
font-size: 18px;
line-height: 24px;
}
.tt-suggestion.tt-is-under-cursor {
color: #fff;
background-color: #0097cf;
}
</style>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script type="text/javascript" src="bootstrap-tokenfield.js" charset="UTF-8"></script>
<script src="http://cdn.jsdelivr.net/typeahead.js/0.9.3/typeahead.min.js"></script>
<script>
$(document).ready(function(){
$('#search').tokenfield({
typeahead:{
name : 'sear',
remote: {
url : 'connection.php?query=%QUERY'
},
success:function(data){
process(data);
}
}
});
});
</script>
<body>
<input type="text" class="form-control" id="search" value="andani" />
</body>
</html>

Related

not support css properties in itext7.pdfhtml at all

I'm using itext7.pdfHtml adds-on to convert my html template to PDF doc and everything is ok and result produce without any error but my is that there were a bunch of CSS properties that not recognizable with pdfhtml dll.
some of these properties are show at this snippet:
.day-meta-wrapper {
font-size: 15px;
line-height: normal;
height: 24px;
border-radius: 12px;
color: #ffffff;
background: #00000033;----> not support
padding: 0 6px;
display: flex;----> not support
align-items: center;----> not support
justify-content: center;----> not support
}
this my html file result:
as you can see in browser view there's no problem and all of the properties work properly
but this is my PDF result:
as shown in the picture PDF doc loosed CSS properties
h1 {
background-color: red;
}
.day-meta {
margin: 5px 0;
user-select: none;
display: flex;
align-items: center;
justify-content: center;
}
.day-meta-wrapper {
font-size: 15px;
line-height: normal;
height: 24px;
border-radius: 12px;
color: #ffffff;
background-color: #00000033;
padding: 0 6px;
display: flex;
align-items: center;
justify-content: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/DayMeta.css">
</head>
<body style="background: #979797;">
<h1>Hello IText7 PDFHtml</h1>
<div class="day-meta">
<div class="day-meta-wrapper">
<div>December 11, 2018</div>
</div>
</div>
</body>
</html>

html2canvas not working at all

Here is the code which isn't working. Basically I'm allowing the user to edit some text in the div and then display its screenshot. Can someone please tell why is it not working?
<!doctype html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="main.css" />
<title>Poster</title>
</head>
<body>
<div id="main_image">
<img src="image.jpg" id= "image"/>
<div id="user_text">IT IS TOTALLY AWESOME</div>
</div>
<div id="edit_text_box">
<textarea id="user_input" placeholder="Your text here.." rows="2" cols="30" ></textarea>
<div id="change_size">
<span style="float: left;">FONT-SIZE : </span>
<button id="decrease_size">-</button>
<button id="increase_size">+</button>
</div>
<input id="submit" type="submit" value="SUBMIT" />
</div>
<script type="text/javascript">
window.onload = function() {
html2canvas( [ document.body ], {
onrendered: function( canvas ) {
document.body.appendChild( canvas );
}
});
};
</script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/edit_text.js"></script>
</body>
</html>

I changed your code a little bit and it works:
<!doctype html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="main.css" />
<title>Poster</title>
<script type="text/javascript" src="html2canvas.js"></script>
<script type="text/javascript">
var Submit = function() {
html2canvas(document.body, {
onrendered: function(canvas) {
document.body.appendChild(canvas);
}
});
};
</script>
</head>
<body>
<div id="main_image">
<img src="image.jpg" id= "image"/>
<div id="user_text">IT IS TOTALLY AWESOME</div>
</div>
<div id="edit_text_box">
<textarea id="user_input" placeholder="Your text here.." rows="2" cols="30" ></textarea>
<div id="change_size">
<span style="float: left;">FONT-SIZE : </span>
<button id="decrease_size">-</button>
<button id="increase_size">+</button>
</div>
<button onclick="Submit();" >Submit</button>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/edit_text.js"></script>
</body>
</html>
First, I added html2canvas JavaScript file (<script type="text/javascript" src="html2canvas.js"></script>). You can download it at https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js and put that file to the same folder as your HTML. Apparently, you are trying to create something like a form, but there's no form tag in your code. You can call html2canvas either when you submit a form (you have to add <form> then) or using onclick attribute of a button. I changed your submit input element to button and bind Submit method to its onclick attribute. When user clicks the button, screenshot appears below the form.

Just use this code
document.querySelector('button').addEventListener('click', function() {
html2canvas(document.querySelector('.specific'), {
onrendered: function(canvas) {
// document.body.appendChild(canvas);
return Canvas2Image.saveAsPNG(canvas);
}
});
});
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
.btn-default {
color: #333;
background-color: #fff;
border-color: #ccc;
}
h1 {
font-size: 36px;
font-family: inherit;
font-weight: 500;
line-height: 1.1;
color: inherit;
}
h1 small {
font-size: 65%;
font-weight: 400;
line-height: 1;
color: #777;
display: block;
padding-top: 15px;
}
.specific {
background-color: #fff;
}
p a {
padding: 5px;
}
<script src="https://superal.github.io/canvas2image/canvas2image.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<div class="specific">
<h1>Click to Take a Screenshot & Download it! <small>using html2canvas.js + canvas2image.js</small></h1>
<p>This is a simple demo.</p>
<p>Use html2canvas.js to take a screenshot of a specific div and then use canvas2image.js to download the screenshot as an image locally to your filesystem.</p>
<button type="button" class="btn btn-default">Take a Screenshot!</button>
<p>References: html2canvas.jscanvas2image.js
</p>
</div>

How to stop Navigation bar from scrolling with my posts?

blog: http://mattdomchristom.tumblr.com
As you can see, when you scroll down, the navigation bar at the top follows and it's annoying. How can I just make it stay at the top of the page?
This is my HTML:
<head>
<!--Default Variables-->
<!--Colors-->
<meta name="color:Background" content="#000"/>
<meta name="color:Text" content="#fff"/>
<meta name="color:Post Title" content="#1C1C1C"/>
<meta name="color:Link" content="#8B7D7B"/>
<meta name="color:Link Hover" content="#d8d8d8"/>
<meta name="color:Blog Title" content="#8b0000"/>
<meta name="color:Links Text" content="#e7e7e7"/>
<meta name="color:Links Hover" content="#fff"/>
<meta name="color:Ask Background" content="#838b8b"/>
<!--Images-->
<meta name="image:Background" content""/>
<meta name="image:Sidebar" content=""/>
<!--Options-->
<meta name="if:Infinite Scrolling" content=""/>
<meta name="if:Pagination" content=""/>
<meta name="if:Glitterati Cursor" content=""/>
<meta name="if:Tiny Scrollbar" content=""/>
<meta name="if:Box shadows" content=""/>
<meta name="if:Ask" content=""/>
<meta name="if:Archive" content=""/>
<meta name= "if:Link 1" content="link1"/>
<meta name= "if:Link 2" content="link2"/>
<meta name= "if:Link 3" content="link3"/>
<meta name= "if:Link 4" content="link4"/>
<!--Links-->
<meta name="text:Link 1 URL" content=""/>
<meta name="text:Link 1 name" content=""/>
<meta name="text:Link 2 URL" content=""/>
<meta name="text:Link 2 name" content=""/>
<meta name="text:Link 3 URL" content=""/>
<meta name="text:Link 3 name" content=""/>
<meta name="text:Link 4 URL" content=""/>
<meta name="text:Link 4 name" content=""/>
{block:Description}
<meta name="description" content="{MetaDescription}" />{/block:Description}
<title>
{block:PostSummary}
{PostSummary} - {/block:PostSummary}{Title}</title>
{block:ifinfinitescrolling}<script type="text/javascript" src="http://codysherman.com/tools/infinite-scrolling/code"></script>{/block:ifinfinitescrolling}
</style>
<style type="text/css">
{block:ifGlitteraticursor}
body, a, a:hover {cursor: url(http://media.tumblr.com/tumblr_m10gu8MJ7Z1r869vr.gif), progress;}{/block:ifGlitteraticursor}
{block:iftinyscrollbar}
::-webkit-scrollbar {width: 8px; height: 9px; background :#fff; }
::-webkit-scrollbar-thumb { background-color: #000000; -webkit-border-radius: 0ex; border: 0px #D4D8DB;}
{/block:iftinyscrollbar}
body{
background-color: {color:Background};
background-image: url({image:Background});
background-attachment: fixed;
background-repeat: repeat;
background-position: center;
font-family: helvetica;
font-size: 14px;
line-height: 14px;
letter -spacing:0px;
color:{color:Text};
text-align:justify;
}
a:link, a:active, a:visited{
color: {color:Link};
text-decoration:none;
}
a:hover{
color: {color:Link Hover};
text-decoration:underline;
}
#container {
margin:auto;
position:right;
width:1200px;
color: {color:Title};
_margin-left:10%;
}
#content {
float:center;
width:508px;
padding: 2px;
margin-top: 25px;
margin-left: 300px;
background: clear;
}
#entry {
margin-top:15px;
padding:3px;
background-image: url(http://static.tumblr.com/j4dtzbm/Amxlg5cp4/transparentg.png);
{block:ifboxshadows};
box-shadow: 0px 5px 20px rgba(0,0,0,0.35);
{/block:ifboxshadows}
{block:ifboxborders}
border: 1px solid black;
{/block:ifboxborders}
}
#entry img{
{block:IndexPage}max-width:500px;{/block:IndexPage}
}
#side {
position:fixed !important;
width: 220px;
height: auto;
margin-top: 40px;
margin-left: 500px ;
padding: 2px ;
font-size: 13px;
text-transform: lowercase;
background-image: url(http://static.tumblr.com/j4dtzbm/Amxlg5cp4/transparentg.png);
{block:ifboxshadows};
box-shadow: 0px 5px 20px rgba(0,0,0,0.35);
{/block:ifboxshadows}
}
#side2 {
position:fixed !important;
width: 753px;
height: 30px;
text-transform: uppercase;
font-size: 13px;
background-color:black;
opacity: .8;
margin-top: -20px;
margin-left: -30px ;
padding: 2px ;
}
.navigate a{
color: {color:Links Text};
display:block;
width: 85px;
height: 15px;
text-align: center;
padding-top: 3px;
padding-left: 3px;
margin-left: 0px;
margin-top: 2px;
position: relative;
text-align: center;
z-index: 999;
font-family: helvetica;
font-size: 14px;
display: inline-block;
}
.navigate a:hover{
color: {color:Links Hover};
text-decoration: none;
}
.permalink{
display: block;
padding:1px;
margin-top:0px;
margin-bottom:4px;
font-size: 11px;
text-align: center;
text-transform: uppercase;
}
.blogtitle{
text-transform: uppercase;
font-size: 22px;
line-height: 22px;
color: {color:Blog Title};
}
.posttitle{
font-size: 17px;
line-height: 12px;
text-transform: uppercase;
color: {color:Post Title};
letter-spacing: 1;
font-weight: none;
}
blockquote{
padding:0px 0px 2px 5px;
margin:0px 0px 2px 1px;
border-left: 1px solid {color:Text};}
blockquote p, ul{margin:0px; padding:0px;
}
.chat .line{
margin: 0 0 0px;
padding: 2px;
}
.chat .line.odd{
}
.label {font-weight:bold; color:{color:text}}
.question {
color:{color:Text};
font-size: 10px;
font-weight: normal;
line-height:95%;
background: {color:Ask Background};
margin: 0 0 10px 0;
padding: 10px 15px;
position: relative;
-moz-border-radius:5px; -webkit-border-radius:5px;
}
.questionarrow {
width: 13px;
height: 7px;
font-size:30px;
position: absolute;
color:{color:Ask Background};
bottom: -3.5px;
left: 260px;
}
.asker {width:500px; text-align:left; color:{color:Text};font-family: silkscreen;font-size: 9px;}
.asker a {color:{color:Text};}
.asker img {float:left; margin-left:220px; vertical-align:top; margin-right:3px; max-height:15px;}
a img{border: 0px;}
.p { padding-top: 5px; }
.ol, ul { margin-left: 10px; padding: 5px; }
.ul { list-style-type: square; }
.albumart { margin-bottom: 0px; }
.albumart img, .audio embed { width: 60px; }
.video embed, .post div.video object {width:250px !important; height:187px !important;}
.notes img{width:10px; position:left; top:3px;}
.tags {
width:auto;
solid {color:Links};
font-size: 10px;
text-transform:uppercase;
color:{color:link};
padding:2px;
line-height:1;
margin-left:1px;
}
.tags a:hover{
color: {color:Link Hover};
text-decoration:underline;
}
#pages {
float: center;
width: 753px;
height: 22px;
text-transform: uppercase;
font-size: 14px;
color: {color:Link};
background-color: white;
opacity: .6;
margin-top: 10px;
margin-left: 300px ;
padding: 2px;
padding-top: 6px;
}
{font-size: 100%;}
{CustomCSS}
</style>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" title="{Title}" href="{RSS}" />
{block:ifinfinitescrolling}<style>#toTop {display:none;text-decoration:none;position:fixed;bottom:20px;right:20px;overflow:hidden;width:30px;height:40px;border:none;text-indent:-999px;background:url(http://static.tumblr.com/hi8vwsz/Q0ull6xz3/totop.png) no-repeat left top;z-index:3000;}#toTopHover {background:url(http://static.tumblr.com/hi8vwsz/Q0ull6xz3/totop.png) no-repeat left -40px;
width:30px;height:40px;display:block;overflow:hidden;float:left;opacity: 0;-moz-opacity: 0;filter:alpha(opacity=0);}
#toTop:active, #toTop:focus {outline:none;}#toTop:active, #toTop:focus {outline:none;}</style>
<script type="text/javascript" src="http://static.tumblr.com/53unaru/kx3lgzker/jquery-1.3.2.min.js" charset="utf-8"></script>
<script type="text/javascript" src="http://static.tumblr.com/53unaru/4jtlgzkf8/easing.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/53unaru/y8wlgzkbt/jquery.ui.totop.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$().UItoTop({ easingType: 'easeOutQuart' });
});
</script>{/block:ifinfinitescrolling}
</head>
<body>
<div id="container">
<div id="content">
<div id="side2">
<div class="navigate">
<a href="/" >home</a>
{block:ifAsk}
<a href="/ask" >message</a>
{/block:ifAsk}
{block:iflink1}
{text:Link 1 name}
{/block:iflink1}
{block:iflink2}
{text:Link 2 name}
{/block:iflink2}
{block:iflink3}
{text:Link 3 name}
{/block:iflink3}
{block:iflink4}
{text:Link 4 name}
{/block:iflink4}
<a href="/archive" >archive</a>
<a href="http://sociallyawkwardgiraffe.tumblr.com/" >Theme</a>
</div>
</div>
</center>
<div id="side">
<center>
<div class="blogtitle">{Title}</div>
</center>
<br>
<img src="{image:sidebar}" width=220px>
{Description}
</div>
</div>
</div>
<div id="content">
{block:Posts}
<div id="entry">
<center>
{block:IndexPage}
<div class="permalink" style="letter-spacing:1px;"><l> {Month} {DayOfMonth}, {Year} • {NoteCountWithLabel} • Reblog</l>
</div>
{/block:IndexPage}
</center>
{block:Text}
{block:Title}<span class="posttitle">{Title}</span>
{/block:Title}<span class="entrytext">{Body}</span>
{/block:text}
{block:Link}
{Name}{block:Description}{Description}{/block:Description}
{/block:link}
{block:Photo}
{LinkOpenTag}
<a href="{permalink}"><img src="{PhotoURL-500}" alt="{PhotoAlt}" width=500px
{LinkCloseTag}
{block:Caption}{Caption}{/block:Caption}
{/block:Photo}
{block:Photoset}<center>{Photoset-500}</center>
{block:Caption}{Caption}{/block:Caption}
{/block:Photoset}
{block:Quote}
<span class="title">{Quote}</span>
{block:Source}<i> - {Source}</i>{/block:Source}<br>
{block:Caption}{Caption}{/block:Caption}
{/block:Quote}
{block:Chat}
{block:title}<div id="posttitle"><center>{Title}<br></center></div>
{/block:title}<div class="chat">
{block:Lines}<div class="chat"><div class="line {Alt}"><div class="{Alt} user_{UserNumber}">
{block:Label}<span class="label"><b>{Label}</b></span>
{/block:Label}{Line}</div>
</div></div>{/block:Lines}</div>{/block:Chat}
{block:Audio}
{block:albumart}<div class="albumart"><img src="{albumarturl}" align="left"></div>
{/block:albumart}<div style="width: 310px; height: 20px;">
{AudioPlayerblack}</div><BR>{block:TrackName}<span><strong>Title</strong>:
{TrackName}</span>{/block:TrackName}<br>
{block:Artist}<span><strong>Artist:</strong>
{Artist}</span>{/block:Artist}<br>
{/block:Audio}
{block:Video}<center>{Video-500}<BR>
</center>{block:Caption}{Caption}{/block:Caption}{/block:Video}
{block:Answer}
<div class="question">
<div class="questionarrow">▼</div>
{Question}
</div>
<div class="asker"><img src="{AskerPortraitURL-24}">{Asker}</div>
<div class="answer">{Answer}</div>
{/block:answer}
{block:HasTags}<div class="tags"> tags: {block:Tags}#{Tag} {/block:Tags}</div>{/block:HasTags}
</center>
{block:PostNotes}{PostNotes}
{/block:PostNotes}</div>{/block:Posts}
</center>
</div>
<div id="pages">
{block:ifpagination}
<center>
{block:PreviousPage}←{/block:PreviousPage} {CurrentPage} of {TotalPages} {block:NextPage}→
{/block:NextPage}
{/block:ifpagination}
<center>
</center>
</div>
</div></div>
</div>
</body>
</html>

In the Custom CSS box in your customization screen, enter the following:
#side2 {
position: relative!important;
}

Update fb iframe height

Is it possible to update the Facebook iframe height?
Here's the scenario. I have a Facebook app with PHP pages inside, but when I click the menu, it gets the previous iframe height and it doesn't automatically adjust the iframe height of the current content.
<link rel="stylesheet" href="" type="text/css" >
<style>
.nav li {
background-color: #fff;
font-family: Century Gothic;
list-style: none outside none;
margin-bottom: 1px;
padding-bottom: 5px;
padding-left: 10px;
padding-top: 5px;
font-size:9pt;
border-left:6px solid #7b7b7b;
color:#7c7c7c;
}
li a {
text-decoration: none;
color: inherit;
}
.title {
margin:0px;
}
.navigation ul {
padding:0px;
margin:0px;
}
.logo {
margin-bottom: 10px;
padding-left: 10px;
}
.sidebar {
width:177px;
float:left;
margin-right:10px;
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
background-color: #515151;
font-family: Century Gothic;
list-style: none outside none;
margin-bottom: 1px;
padding-bottom: 5px;
padding-left: 10px;
padding-top: 5px;
font-size:9pt;
border-left:6px solid #FAB101;
color:#fff;
}
.titlewrapper {
background-color: #FEFEFE;
border: 1px solid #B6CADC;
color: #BFBFBF;
font-size: 28pt;
margin-bottom: 5px;
padding: 5px 10px;
width: 768px;
}
</style>
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function(){
FB.init({appId: 'APPID', status: true, cookie: true, xfbml: true});
FB.Canvas.setSize();
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js'; // all.js
document.getElementById('fb-root').appendChild(e);
setTimeout(sizeChangeCallback,5000);
}());
// Do things that will sometimes call sizeChangeCallback()
function sizeChangeCallback() {
FB.Canvas.setSize();
}
</script>
</head>
<body style="background-color:#e4e4e4;">
<div class="clearfix" style="width:1007px;margin:auto;">
<div id="tabs">
<div class="sidebar">
<div class="logo">
<img src="../images/gotodo_direct_logo.png">
</div>
<div class="navigation">
<ul class="nav">
<li id="tabs"><h3 class="title">Hotel Demo</h3><i>Indvidual hotel booking</i></li>
<li id="tabs"><h3 class="title">All Hotel List Demo</h3><i>all occupancy plus hotel partner</i></li>
<li id="tabs"><h3 class="title">Instruction</h3><i>how to install this app?</i></li>
<li id="tabs"><h3 class="title">Faq</h3> <i>frequently ask question</i></li>
</ul>
</div>
</div>
<div class="main-content" style="float:left;width:790px;height:1000px;">
<div id="tabs-1">
<div class="titlewrapper" style="float:left;"><div style="float:left"><img src="images/hotel.png" style="margin-right: 10px; vertical-align: middle;"></div><div style="float:left;width:700px;">Hotel Demo<br /><i style="font-size:10pt;">let's take a look a quick demo at how hotel app look like when you install it on your facebook fan page</i></div></div>
<div class="rooms" style="float:left;">
<?php include'../hotel.php';?>
</div>
</div>
</div>
</div>
</div>
</body>
and heres the link of my app.

Fancybox 2.0 not loading

I been looking and working and I can't make fancybox work in this code. I have revised severalt times and I don't understand why it doesn't work. I'm using Dreamweaver and the fancybox are marked below and I don't know if some code contrasts with the fancybox codes
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/GabLopezIT.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<link rel="shortcut icon" type="image/x-icon" href="../images/favicon.ico" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Gabriele Lopez</title>
<!-- InstanceEndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
-->
</style>
<link href="../css/psr_site_layout.css" rel="stylesheet" type="text/css" />
<link href="../css/psr_site_layout_content.css" rel="stylesheet" type="text/css" />
<link href="../css/psr_site_layout_gallery.css" rel="stylesheet" type="text/css" />
<link href="../css/psr_site_submenu.css" rel="stylesheet" type="text/css" />
<!-- InstanceBeginEditable name="head" -->
<style type="text/css">
/*.video {
width:200px;
float:left;
margin-left:50px;
}*/
</style>
<!-- InstanceEndEditable -->
<style type="text/css">
</style>
<style type="text/css">
body,td,th {
color: #FFF;
}
a:link {
color: #CCC;
text-decoration: none;
}
a:visited {
color: #CCC;
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
#bio {
margin-bottom:-20px;
}
#social {
margin-top:5px;
height: 25px;
width: auto;
float: right;
}
#lang {
float:left;
width:auto;
margin-right:15px;
}
#twitter {
float: right;
width: 60px;
height: 24px;
vertical-align: bottom;
margin-left: 17px;
margin-right: 5px;
}
#google {
float: right;
width: 50px;
height: 24px;
vertical-align: bottom;
margin-left: 17px;
margin-right: 15px;
}
.fb-like {
height: 25px;
width: 85px;
float: right;
vertical-align: bottom;
margin-left: 17px;
margin-right: 5px;
display:inline-table
}
</style>
<link href="../css/copyright.css" rel="stylesheet" type="text/css" />
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
<link href="../css/bottom.css" rel="stylesheet" type="text/css" />
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body bgcolor="#666666" background="../img/background001.jpg" onload="MM_preloadImages('../images/facebook2.png')">
<!-- FACEBOOK CODE-->
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "http://connect.facebook.net/it_IT/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!--END FACEBOOK CODE-->
<!--TWITTER CODE-->
<script>!function(d,s,id){
var js,fjs=d.getElementsByTagName(s)[0];
if(!d.getElementById(id)){
js=d.createElement(s);js.id=id;
js.src="//platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);}
}(document,"script","twitter-wjs");</script>
<!--END TWITTER CODE-->
<!--GOOGLE+ CODE-->
<script type="text/javascript">
window.___gcfg = {lang: 'it'};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<!--END GOOGLE+ CODE-->
<div id="psr_site_layout">
<table id="Table_01" width="800" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="../img/bannerweb.png" alt="" width="800" height="200" border="0" /></td>
</tr>
<tr>
<td colspan="5">
<img src="../img/layout/PSR-website-(sliced-new)_03.png" width="800" height="8" alt="" /></td>
</tr>
<tr>
<td colspan="5"><ul id="MenuBar1" class="MenuBarHorizontal">
<li>HOME</li>
<li>NEWS</li>
<li>TOUR</li>
<li>FOTOS</li>
<li>VIDEOS</li>
<li>ALBUMS</li>
<li>BIO</li>
</ul>
<div id="social">
<div id="lang"><img src="../img/EN-button.png" width="20" height="20" /></div>
<div id="google"><g:plusone size="medium"></g:plusone>
</div>
<div id="twitter">Tweet</div>
<div class="fb-like" data-href="http://www.gabrielelopez.com" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false" data-font="trebuchet ms"></div>
</div>
</td>
</tr>
<tr>
<td colspan="5">
<img src="../img/layout/PSR-website-(sliced-new)_15.jpg" width="800" height="6" alt="" /></td>
</tr>
<tr>
<td colspan="5"><!-- InstanceBeginEditable name="Content1" -->
Fancybox Scripts start here
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js?v=2.0.4"></script>
<script type="text/javascript" src="fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js?v=2.0.4"></script>
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-thumbs.js?v=2.0.4"></script>
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.0.4" type="text/css" media="screen" />
<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-buttons.css?v=2.0.4" type="text/css" media="screen" />
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=2.0.4" type="text/css" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
$(".various").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none',
});
});
</script>
<div id="psr_site_layout_content">
Fancybox HTML content starts here
<a class="various fancybox.iframe" href="http://www.youtube.com/embed/_DjiHFxPauw" title="Vorrei tanto dirtelo"><img src="../img/tvpianeta.png"></a><p>Vorrei tanto dirtelo</p>
<a class="various fancybox.iframe" href="http://www.youtube.com/embed/L9szn1QQfas?autoplay=1">Youtube (iframe)</a>
<div class="video"><a class="various fancybox.iframe" href="http://www.youtube.com/embed/_DjiHFxPauw" title="Vorrei tanto dirtelo"><img src="../img/tvvorrei.png"></a><p>Vorrei tanto dirtelo</p></div>
<div class="video"><a class="lavita fancybox.iframe" href="http://www.youtube.com/embed/_DjiHFxPauw" title="Vorrei tanto dirtelo"><img src="../img/tvvita.png"></a>
<p>La vita che vorrei</p></div>
<div class="video"><a class="lavita fancybox.iframe" href="http://www.youtube.com/embed/_DjiHFxPauw" title="Vorrei tanto dirtelo"><img src="../img/tvhistoria.png"></a><p>Historia de un perfecto idiota</p></div>
<div class="video"><a class="lavita fancybox.iframe" href="http://www.youtube.com/embed/_DjiHFxPauw" title="Vorrei tanto dirtelo"><img src="../img/tvteletaxi.png"></a><p>Vorrei tanto dirtelo</p></div>
</div>
<!-- InstanceEndEditable --></td>
</tr>
<div id="bottom">
<tr>
<td colspan="5">
<img src="../img/layout/PSR-website-(sliced-new)_17.jpg" width="800" height="5" alt="" /></td>
</tr>
<tr>
<td colspan="6"><div id="psr_site_submenu">Home | News | Tour | Fotos | Videos | Dischi | Bio | Cambia al Inglese</div></td>
</tr>
<tr>
<td height="39" colspan="6" class="copyright">
© 2012 Orange Park Records srl.<br />
Tutti diritti riservati.
</td>
</tr>
</div>
</table>
</div>
<p> </p>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
<!-- InstanceEnd --></html>

I don't see anywhere in your code that you have included jQuery or fancybox's css and js files.
Be sure that you have included the script and stylesheet in your document (make sure the css and js files are on your server). Make sure you also load the jQuery library.
Follow this example and adjust the paths accordingly:
<!-- Add jQuery library -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.0.4" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.0.4"></script>