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>
Related
"You need show full error, where does it happen, etc."
There is a .php file (view) on Joomla 2.5.1 with a code snippet:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(function drawMachines() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Machine');
data.addColumn('number', 'Printed');
data.addRow(['LP-3000', 69174.8542]);
data.addRow(['MPS', 74595.0154]);
data.addRow(['MPS-2', 85626.7536]);
data.addRow(['Digicon', 650.1061]);
data.addRow(['Indigo-4500', 17630.4017]);
data.addRow(['KDO-508', 15414.495]);
data.addRow(['MP', 0.0237]);
var options = {
'title': 'For machines'
,'titleTextStyle': {fontSize: '12'}
,'legend': {position: 'none'}
,'enableInteractivity': false
};
var chart = new google.visualization.ColumnChart(document.getElementById('com_fp_infopanel_manufacture_machines'));
chart.draw(data, options);
});
</script>
<div class="com_fp_infopanel_manufacture">
<div id="com_fp_infopanel_manufacture_machines" class="com_fp_infopanel_manufacture_machines"></div>
<div class="clear"></div>
</div>
I get an error: "Cannot read property "from" of undefined".
Has anyone encountered such an error?
Perhaps someone can suggest what is the reason?
The view-source code:
<!doctype html>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7 ie6" lang="ru"> <![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8 ie7" lang="ru"> <![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9 ie8" lang="ru"> <![endif]-->
<!--[if gt IE 8]><!--><html class="no-js" lang="ru"> <!--<![endif]-->
<head>
<base href="http://infopanel.fleksoprint.ru/index.php" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="refresh" content="50; URL='index.php?option=com_fp_infopanel&view=sales&layout=0'; charset=utf-8" />
<meta name="generator" content="J!Blank Template by Joomla-book.ru" />
<title>Flexo Print</title>
<link href="/templates/jblank/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
<link rel="stylesheet" href="/media/com_fp_infopanel/site/css/manufacture.css" type="text/css" />
<link rel="stylesheet" href="/templates/jblank/css/base.css?1346224085" type="text/css" media="all" />
<link rel="stylesheet" href="/templates/jblank/css/grid.css?1346224085" type="text/css" media="all" />
<link rel="stylesheet" href="/templates/jblank/css/_styles.css?1346224085" type="text/css" media="all" />
<link rel="stylesheet" href="/media/mod_fp_infopanel/css/shipping.css" type="text/css" />
<link rel="stylesheet" href="/media/mod_fp_infopanel/css/birthday.css" type="text/css" />
<script src="/templates/jblank/js/libs/jquery.min.js?v=1.7.1" type="text/javascript"></script>
<script src="/templates/jblank/js/libs/modernizr.min.js?1346224085" type="text/javascript"></script>
<script src="/templates/jblank/js/libs/jquery.tools.js?1346224085" type="text/javascript"></script>
<script src="/templates/jblank/js/libs/jquery-ui.min.js?1346224085" type="text/javascript"></script>
<script src="/templates/jblank/js/libs/jquery.mousewheel.min.js?1346224085" type="text/javascript"></script>
<script src="/templates/jblank/js/libs/jquery.smoothdivscroll.min.js?1346224085" type="text/javascript"></script>
<script src="/media/system/js/mootools-core.js" type="text/javascript"></script>
<script src="/media/system/js/core.js" type="text/javascript"></script>
<script src="/media/system/js/mootools-more.js" type="text/javascript"></script>
<script src="/media/mod_coolclock/assets/js/excanvas.js" type="text/javascript"></script>
<script src="/media/mod_coolclock/assets/js/coolclock.js" type="text/javascript"></script>
<script src="/media/mod_coolclock/assets/js/moreskins.js" type="text/javascript"></script>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width" />
</head>
<body>
<div class="container">
<div class="grid_2 content">
<div class="module module-left module-header "><h3 class="module-header">Часы</h3><div class="module-content">
<script type="text/javascript">
$(document).ready(function() {
function mod_coolclock132_date_refresh()
{
var months = [];
months.push('Января');
months.push('Февраля');
months.push('Марта');
months.push('Апреля');
months.push('Мая');
months.push('Июня');
months.push('Июля');
months.push('Августа');
months.push('Сентября');
months.push('Октября');
months.push('Ноября');
months.push('Декабря');
var weekdays = [];
weekdays.push('Воскресенье');
weekdays.push('Понедельник');
weekdays.push('Вторник');
weekdays.push('Среда');
weekdays.push('Четверг');
weekdays.push('Пятница');
weekdays.push('Суббота');
var today = new Date();
var date = '<h4>' + weekdays[today.getDay()] + ', ' + today.getDate() + ' ' + months[today.getMonth()] + ' ' + today.getFullYear();
$('#mod_coolclock_date132').html(date);
}
window.setInterval(mod_coolclock132_date_refresh, 60000);
mod_coolclock132_date_refresh();
});
</script>
<div style="text-align: center; border-radius: 0 0 5px 5px; border-style: ridge; border-width: 3px;">
<div><canvas id="clock132" class="CoolClock:swissRail:68::+4"></canvas></div>
<div id="mod_coolclock_date132"></div>
</div></div></div><div class="module module-left module-header "><h3 class="module-header">Время прихода</h3><div class="module-content">
<script type="text/javascript">
$(document).ready(function () {
$("#mod_fp_infopanel_birthday_employees135").smoothDivScroll({
mousewheelScrolling: false,
manualContinuousScrolling: false,
hotSpotScrolling: false,
autoScrollingMode: "always",
autoScrollingDirection: "endlesslooptop"
});
});
</script>
<div id="mod_fp_infopanel_birthday_employees135" class="mod_fp_infopanel_birthday_employees">
<div class="scrollWrapper">
<div class="scrollableArea">
<!-- <p style="clear: both;"/>
<div style="background-color: #2F6309;width:32px;height:12px;margin-top:6px;margin-left:5px;"></div>
<div style="color: #FFFFFF;padding:4px;font-weight:bold;font-size:10px;text-align:center;position:relative;margin-top:-17px;margin-bottom:-2px;">Авг</div>
<div style="color: #2F6309;font-weight:bold;font-size:1.3em;width:42px;text-align:center;">18</div>
</div>-->
<p class="mod_fp_infopanel_birthday_employee">09:46:18 - Кудинов Сергей Борисович</p>
<p style="clear: both;"/>
<!-- <p style="clear: both;"/>
<div style="background-color: #2F6309;width:32px;height:12px;margin-top:6px;margin-left:5px;"></div>
<div style="color: #FFFFFF;padding:4px;font-weight:bold;font-size:10px;text-align:center;position:relative;margin-top:-17px;margin-bottom:-2px;">Авг</div>
<div style="color: #2F6309;font-weight:bold;font-size:1.3em;width:42px;text-align:center;">18</div>
</div>-->
<p class="mod_fp_infopanel_birthday_employee">09:36:04 - Логинов Роман Викторович</p>
<p style="clear: both;"/>
<!-- <p style="clear: both;"/>
<div style="background-color: #2F6309;width:32px;height:12px;margin-top:6px;margin-left:5px;"></div>
<div style="color: #FFFFFF;padding:4px;font-weight:bold;font-size:10px;text-align:center;position:relative;margin-top:-17px;margin-bottom:-2px;">Авг</div>
<div style="color: #2F6309;font-weight:bold;font-size:1.3em;width:42px;text-align:center;">18</div>
</div>-->
<p class="mod_fp_infopanel_birthday_employee">09:11:28 - Мазин Александр Петрович</p>
<p style="clear: both;"/>
<!-- <p style="clear: both;"/>
<div style="background-color: #2F6309;width:32px;height:12px;margin-top:6px;margin-left:5px;"></div>
<div style="color: #FFFFFF;padding:4px;font-weight:bold;font-size:10px;text-align:center;position:relative;margin-top:-17px;margin-bottom:-2px;">Авг</div>
<div style="color: #2F6309;font-weight:bold;font-size:1.3em;width:42px;text-align:center;">18</div>
</div>-->
<p class="mod_fp_infopanel_birthday_employee">09:05:50 - Семенова Дарья Витальевна</p>
<p style="clear: both;"/>
</div>
</div>
</div>
</div></div>
</div>
<div class="grid_8 content">
<div class="module module-middle module-header "><h3 class="module-header">Показатели компании</h3><div class="module-content"><script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
function dateInFuture(days)
{
var now = new Date();
now.setDate( now.getDate() + days );
return now;
}
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Машина');
data.addColumn('date', 'Загрузка');
data.addRows([['MPS', dateInFuture(5.3083425954183)]]);
data.addRows([['MPS-2', dateInFuture(10.435140861034)]]);
data.addRows([['LP-3000', dateInFuture(3.3856865581936)]]);
data.addRows([['Indigo-4500', dateInFuture(0.019926592893071)]]);
var options = {
title: 'Загрузка печатного оборудования',
titleTextStyle: { fontSize: '12'},
legend: {position: 'none'},
hAxis: {format: 'dd MMM', minValue: new Date()},
enableInteractivity: false
};
var chart = new google.visualization.BarChart(document.getElementById('mod_fp_infopanel_shipping_load136'));
chart.draw(data, options);
});
</script>
<div class="mod_fp_infopanel_shipping_container">
<div id="mod_fp_infopanel_shipping_kpi136" class="mod_fp_infopanel_shipping_kpi">
<dl class="mod_fp_infopanel_shipping_Bar">
<dt class="mod_fp_infopanel_shipping_BarLabel">ВП</dt>
<dd class="mod_fp_infopanel_shipping_BarScale">
<div class="mod_fp_infopanel_shipping_BarFilled" style="width: 40.243306389056%;">40.2%<strong> </strong></div>
<div class="mod_fp_infopanel_shipping_BarAnotation">101 164,83 EUR. / 251 383,00 EUR.</div>
</dd>
<dt class="mod_fp_infopanel_shipping_BarLabel">Отгрузка</dt>
<dd class="mod_fp_infopanel_shipping_BarScale">
<div class="mod_fp_infopanel_shipping_BarFilled" style="width: 40.930513139422%;">40.9%<strong> </strong></div>
<div class="mod_fp_infopanel_shipping_BarAnotation">250 437,85 EUR. / 611 861,00 EUR.</div>
</dd>
<dt class="mod_fp_infopanel_shipping_BarLabel">Произведено</dt>
<dd class="mod_fp_infopanel_shipping_BarScale">
<div class="mod_fp_infopanel_shipping_BarFilled" style="width: 42.998597671693%;">43.0%<strong> </strong></div>
<div class="mod_fp_infopanel_shipping_BarAnotation">263 091,65 EUR. / 611 861,00 EUR.</div>
</dd>
<dt class="mod_fp_infopanel_shipping_BarLabel">Склад</dt>
<dd class="mod_fp_infopanel_shipping_BarPanel">
<div class="mod_fp_infopanel_shipping_BarValueText">47 306,65 EUR.</div>
</dd>
</dl>
</div>
</div>
<div id="mod_fp_infopanel_shipping_load136" class="mod_fp_infopanel_shipping_load"></div>
<div class="clear"></div>
</div></div><div class="module module-middle module-header "><div class="module-content">
<div class="custom" >
<hr /></div>
</div></div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart']});
// Разбивка по машинам
google.charts.setOnLoadCallback(function drawMachines() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Машина');
data.addColumn('number', 'Отпечатано');
data.addRow(['LP-3000', 69174.8542]);
data.addRow(['MPS', 74595.0154]);
data.addRow(['MPS-2', 85626.7536]);
data.addRow(['Digicon', 650.1061]);
data.addRow(['Indigo-4500', 17630.4017]);
data.addRow(['KDO-508', 15414.495]);
data.addRow(['МП', 0.0237]);
var options = {
'title': 'По машинам'
,'titleTextStyle': {fontSize: '12'}
,'legend': {position: 'none'}
,'enableInteractivity': false
};
var chart = new google.visualization.ColumnChart(document.getElementById('com_fp_infopanel_manufacture_machines'));
chart.draw(data, options);
});
// Разбивка по сменам
google.charts.setOnLoadCallback(function drawShifts() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Бригада');
data.addColumn('number', 'Отпечатано');
data.addRow(['Катайкин', 48949.1127]);
data.addRow(['Владимиров', 55795.0403]);
data.addRow(['Шурыгин', 56640.1172]);
data.addRow(['Ломакин', 68120.6211]);
data.addRow(['Кононенко', 4385.4825]);
data.addRow(['Спиридонов', 8308.4379]);
data.addRow(['Станчев', 5418.9761]);
data.addRow(['Галушкин', 8535.9824]);
data.addRow(['Голев', 2884.7224]);
data.addRow(['Салтыков', 3993.7902]);
data.addRow(['Контракт', 59.3432]);
var options = {
'title': 'По бригадам'
,'titleTextStyle': {fontSize: '12'}
,'legend': {position: 'none'}
,'enableInteractivity': false
};
var chart = new google.visualization.ColumnChart(document.getElementById('com_fp_infopanel_manufacture_shifts'));
chart.draw(data, options);
});
</script>
<div class="com_fp_infopanel_manufacture">
<div id="com_fp_infopanel_manufacture_machines" class="com_fp_infopanel_manufacture_machines"></div>
<div id="com_fp_infopanel_manufacture_shifts" class="com_fp_infopanel_manufacture_shifts"></div>
<div class="clear"></div>
</div>
</div>
<div class="grid_2 content">
</div>
<div class="clear"></div>
<div class="modules-bottom content grid_12">
<div class="module module-bottom module-grid grid_12 "><div class="module-content">
<div class="custom" >
<p><img src="https://info.weather.yandex.net/38/2_white.ru.png?domain=ru" border="0" alt="Яндекс.Погода" /><img src="https://clck.yandex.ru/click/dtype=stred/pid=7/cid=1227/*https://img.yandex.ru/i/pix.gif" border="0" alt="" width="1" height="1" /></p></div>
</div></div>
</div>
<div class="clear"></div>
</div>
</body>
</html>
The problem was solved this way:
...
google.charts.load('44', ...
...
Look at: https://developers.google.com/chart/interactive/docs/release_notes#official-releases
I want to use datepicker https://bootstrap-datepicker.readthedocs.io/en/latest/index.html with Bootstrap 4.
Following the examples on above page, I can make it work with Bootstrap 3.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<main class="container">
<div class="row" style="padding-top: 100px">
<div class="col">
<input data-date-format="dd/mm/yyyy" id="datepicker">
</div>
</div>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript">
$('#datepicker').datepicker({
weekStart: 1,
daysOfWeekHighlighted: "6,0",
autoclose: true,
todayHighlight: true,
});
$('#datepicker').datepicker("setDate", new Date());
</script>
</body>
Using this code datepicker appears correctly.
But doing the same with Bootstrap 4:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"></head>
<body>
<main class="container">
<div class="row" style="padding-top: 100px">
<div class="col">
<input data-date-format="dd/mm/yyyy" id="datepicker">
</div>
</div>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script><script type="text/javascript">
$('#datepicker').datepicker({
weekStart: 1,
daysOfWeekHighlighted: "6,0",
autoclose: true,
todayHighlight: true,
});
$('#datepicker').datepicker("setDate", new Date());
</script>
</body>
Makes it look less professional:
Looks like font and spacing are messed up in Bootstrap 4 version.
How can I get same look and feel of datepicker in Bootstrap 4?
Thanks
You can too override default datepicker classes like the following:
the default bootstrap font size is 1rem or 16px so update .datepicker class
font-size: 0.875em; or/and update the cell width and height:
.datepicker td, .datepicker th {
width: 1.5em;
height: 1.5em;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"></head>
<body>
<main class="container">
<div class="row" style="padding-top: 100px">
<div class="col">
<input data-date-format="dd/mm/yyyy" id="datepicker">
</div>
</div>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<style type="text/css">
// solution 1:
.datepicker {
font-size: 0.875em;
}
/* solution 2: the original datepicker use 20px so replace with the following:*/
.datepicker td, .datepicker th {
width: 1.5em;
height: 1.5em;
}
</style>
<script type="text/javascript">
$('#datepicker').datepicker({
weekStart: 1,
daysOfWeekHighlighted: "6,0",
autoclose: true,
todayHighlight: true,
});
$('#datepicker').datepicker("setDate", new Date());
</script>
</body>
From documentation:
bootstrap-datepicker.standalone.css
can be used to include the datepicker without depending on the Twitter Bootstrap library.
You can try out https://github.com/satyandra-softuvo/bootstrap4-datetimepicker
$.extend(true, $.fn.datetimepicker.defaults, {
icons: {
time: 'far fa-clock',
date: 'far fa-calendar',
up: 'fas fa-arrow-up',
down: 'fas fa-arrow-down',
previous: 'fas fa-chevron-left',
next: 'fas fa-chevron-right',
today: 'fas fa-calendar-check',
clear: 'far fa-trash-alt',
close: 'far fa-times-circle'
}
});
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>
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>
We have a ASP.Net application that we use for SmartPhone devices. One of the screens has a section that is visible in a desktop browser but not on a smartphone browser(Iphone Safari browser). I have marked the section and
Would we know why?Any pointers would be welcome.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<!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">
<head><meta content="yes" name="apple-mobile-web-app-capable" /><meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" /><meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=1;" /><link href="styles/StyleSheet.css" rel="stylesheet" type="text/css" /><title>
Floor Plan Details
</title>
<script type="application/x-javascript">
if (navigator.userAgent.indexOf('iPhone') != -1) {
addEventListener("load", function() {
setTimeout(hideURLbar, 0);
}, false);
}
function hideURLbar() {
window.scrollTo(0, 1);
}
</script>
<script type="text/javascript">
function ColapseDetails() {
var elem2 = document.getElementById('divButton');
var details = document.getElementById('divDetails');
elem2.className = 'Show';
details.style.display = 'none';
}
function ExpandDetails() {
var elem2 = document.getElementById('divButton');
var details = document.getElementById('divDetails');
elem2.className = 'Hide';
details.style.display = 'block';
}
</script>
<style type="text/css">
a, .hdrGreen, .TxtAccent2, .itemList ul li
{
color: #b5985a;
}
#HeaderBar, #ftrCopyright
{
background-color: #f8cb30 !important;
}
#FtrNav, #HdrNav, .Separate, .SeparateSR, .smSeparate, .Button
{
background-color: #0068b3 !important;
}
a:hover, .hdrBlue, .TxtAccent1
{
color: #0068b3;
}
.Links a, .contents a
{
color: #b5985a !important;
}
.TitleLink
{
color: #0068b3 !important;
}
.PropGalThumb, .LargePhoto, .PhotoFrame
{
border-color: #f8cb30 !important;
}
</style>
<link href="/WebResource.axd?d=rYllaDxVV86L8uK7fm716DHtvUx7jEZl07Ni1bAwaCFyy83QnKp58MjumhwHTm3k5DeaG8uKyMP-a7NwOtgW5HQ2pq4UHdVEXH7SniWIwg9RO4oFHQ9Ox82H1rrwkiQS3YslSA2&t=634487606568630000" type="text/css" rel="stylesheet" class="Telerik_stylesheet" /><link href="/WebResource.axd?d=t9YDm8fMtH0CC5asMtMI4fYQLHf0MgrFPIjAybzYl__rRvUM4FsPvrIk2Je7ADAX9h_Y7xc4-kfkfmXrbForHb-JW0HpLzZPt9DexdRer9z0PQom39lb0-brKgkmrYByRaOt9nXhQsatKXhpIL2qfjQhGT81&t=634487606568630000" type="text/css" rel="stylesheet" class="Telerik_stylesheet" /><link href="/WebResource.axd?d=HnZfSQ00Unw9sodb1ZENEb8OCaQNYLMOL7UEoEroy1WahkY5iq6Kb-y9ve7XIVzS9OaCT9LmBYi7u4NjAWkkpgeFHkBbBszYstomcGDOiKzlHBwMuZmZNFVDxXkoO5fUAN-Z_w2&t=634487606568630000" type="text/css" rel="stylesheet" class="Telerik_stylesheet" /></head>
<body>
<form name="aspnetForm" method="post" action="FloorPlanDetails.aspx" id="aspnetForm">
<div>
<input type="hidden" name="ctl00_RadScriptManager1_TSM" id="ctl00_RadScriptManager1_TSM" value="" />
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPaA8FDzhjZTRiODM4M2EyMzRhNhgBBR5fX0NvbnRyb2xzUmVxdWlyZVBvc3RCYWNrS2V5X18WAgUdY3RsMDAkY3BoQ29udGVudCR0c0Zsb29ycGxhbnMFHmN0bDAwJGNwaENvbnRlbnQkbXB2Rmxvb3JwbGFuc9fXJq/1CrDWuJv8X3Ex07QdyIjs" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['aspnetForm'];
if (!theForm) {
theForm = document.aspnetForm;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<script src="/WebResource.axd?d=UvkWM5HwgcL8L6uzzv8ClbaUMj56sSlOI0ToE3UrzfY6Jb13eC2SwwgMrrnYyKCI9Eh_8mDefDtQl4hVuuGtgtYRDWo1&t=634515435604257574" type="text/javascript"></script>
<script src="/Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=ctl00_RadScriptManager1_TSM&compress=1&_TSM_CombinedScripts_=%3b%3bSystem.Web.Extensions%2c+Version%3d3.5.0.0%2c+Culture%3dneutral%2c+PublicKeyToken%3d31bf3856ad364e35%3aen-US%3afec40ae8-2c1f-4db6-96ca-d6c61af2dc7f%3aea597d4b%3ab25378d2%3bTelerik.Web.UI%2c+Version%3d2010.3.1109.20%2c+Culture%3dneutral%2c+PublicKeyToken%3d121fae78165ba3d4%3aen-US%3a0b207b76-976c-4925-ba92-57c3001b0b77%3a16e4e7cd%3af7645509%3a24ee1bba%3ae330518b%3a1e771326%3a8e6f0d33%3a6a6d718d" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ctl00$RadScriptManager1', document.getElementById('aspnetForm'));
Sys.WebForms.PageRequestManager.getInstance()._updateControls([], [], [], 90);
//]]>
</script>
<div id="HeaderBar">
<div id="ctl00_Header1_Phlogo" class="Phlogo">
<img id="ctl00_Header1_imgLogo" src="http://crossfiremedia.realpage.com/palisadesatjaguarcity/logos/lg1029_h50.png" alt="Logo" style="border-width:0px;" />
</div>
</div>
<div id="HdrNav">
<a id="ctl00_Header1_hlApartmentSearch" class="item" href="Default.aspx">Property website</a>
<a id="ctl00_Header1_hlResidentLogin" class="item" href="https://property.onesite.realpage.com/mobile/login.aspx?w=palisadesatjaguarcity">Resident Login</a>
</div>
<div class="hdrGrad">
</div>
<div id="content">
<script type="text/javascript">
function showdetails() {
if (document.getElementById) {
var elemlbl = document.getElementById('divButton');
if (elemlbl.className == 'Hide') {
ColapseDetails();
}
else if (elemlbl.className == 'Show') {
ExpandDetails();
}
}
}
</script>
<ul class="pageitem">
<li class="PropInfo Details">
<span id="ctl00_cphContent_PropDetailHeader_lblPropName" class="hdrBlue" style="font-size:12pt;font-weight:bold;">The Palisades at Jaguar City</span>
</li>
<li class="Details">
<div style="float: left;">
<span id="ctl00_cphContent_PropDetailHeader_lblPhone" class="hdrGreen" style="font-size:12pt;font-weight:bold;">(866) 936-5544 (Phone)</span>
</div>
</li>
</ul>
<!--Not visible:Start-->
<ul class="pageitem">
<li class="Details">
</li>
<li class="Details">
<div class="SeparateSR"/>
</li>
<li class="Details">
<div class="BoldText TxtAccent1">
<span id="ctl00_cphContent_lblModel"></span>
</div>
</li>
<li class="Details">
</li>
<li class="paddedBox"><span class="BoldText">Bedrooms:
<span id="ctl00_cphContent_lblBeds">1</span></span><br />
<span class="BoldText">Bathrooms:
<span id="ctl00_cphContent_lblBaths">1</span></span>
<br />
<span class="BoldText">Sq/Ft: </span>
<span id="ctl00_cphContent_lblSqft">544</span>
<br />
<span class="BoldText">Price: </span>
<span id="ctl00_cphContent_lblRent">$779 - $779</span><br />
<span class="BoldText">Deposit: </span>
<span id="ctl00_cphContent_lblDeposit">$150</span><br />
</li>
<li class="Details">
<div id="ctl00_cphContent_tsFloorplans" class="RadTabStrip RadTabStrip_Default RadTabStripTop_Default">
<!-- 2010.3.1109.20 --><div class="rtsLevel rtsLevel1">
<ul class="rtsUL"><li class="rtsLI rtsFirst"><a class="rtsLink rtsBefore" href="#"><span class="rtsOut"><span class="rtsIn"><span class="rtsTxt">Amenities</span></span></span></a></li><li class="rtsLI rtsLast"><a class="rtsLink rtsSelected" href="#"><span class="rtsOut"><span class="rtsIn"><span class="rtsTxt">2D View</span></span></span></a></li></ul>
</div><input id="ctl00_cphContent_tsFloorplans_ClientState" name="ctl00_cphContent_tsFloorplans_ClientState" type="hidden" />
</div>
</li>
<li class="Details" style="margin-top: -1px;">
<div id="ctl00_cphContent_mpvFloorplans" style="border-color:#848284;border-width:1px;border-style:Solid;">
<div id="ctl00_cphContent_pvAmenities" class="rmpHiddenView">
<div class="paddedBox itemList">
<span class="TxtAccent2 BoldText ">Features</span>
<ul> <li><span> Private Bedrooms </span></li> <li><span> Fully-equipped Kitchen with Breakfast Bar </span></li> <li><span> Full-Sized Washer / Dryer </span></li> <li><span> Spacious Living Room </span></li> <li><span> High Speed Internet Connections in Each Bedroom </span></li> </ul>
</div>
</div><div id="ctl00_cphContent_pv2d">
<img id="ctl00_cphContent_img2DFP" src="http://crossfiremedia.realpage.com/palisadesatjaguarcity/floorplans/fp1014_w240.jpg" alt="2D Floorplan" style="border-width:0px;" />
</div><input id="ctl00_cphContent_mpvFloorplans_ClientState" name="ctl00_cphContent_mpvFloorplans_ClientState" type="hidden" />
</div>
</li>
</ul>
<!--Not visible:End-->
</div>
<ul id="ctl00_ctl06_ulFooterList" class="pageitem PropFooter">
<li class="Details">Floor Plans</li>
<li class="Details">About our Community</li>
<li class="Details">Contact Us</li>
<li class="Details">Photos & Videos</li>
<li class="Details">Amenities & Pet Policies</li>
<li id="ctl00_ctl06_listNeighbor" class="Details">Local Businesses</li>
</ul>
<div id="footer">
<div class="ftrGrad">
</div>
<div id="FtrNav">
<span class="item" style=" padding-top: 0;padding-right:0;">
<img id="ctl00_Footer1_imgDisability" src="images/disa_btn.png" alt="Handicap Accessible" style="border-width:0px;" />
<img id="ctl00_Footer1_imgEHO" src="images/eoh_btn.png" alt="Equal Housing Oportunity" style="border-width:0px;" /></span>
<div class="item ">
<span>©
2011
RealPage </span>
</div>
</div>
</div>
<script type="text/javascript">
//<![CDATA[
Sys.Application.initialize();
Sys.Application.add_init(function() {
$create(Telerik.Web.UI.RadTabStrip, {"_selectedIndex":1,"_skin":"Default","clientStateFieldID":"ctl00_cphContent_tsFloorplans_ClientState","multiPageID":"ctl00_cphContent_mpvFloorplans","selectedIndexes":["1"],"tabData":[{"pageViewID":"ctl00_cphContent_pvAmenities"},{"pageViewID":"ctl00_cphContent_pv2d"}]}, null, null, $get("ctl00_cphContent_tsFloorplans"));
});
Sys.Application.add_init(function() {
$create(Telerik.Web.UI.RadMultiPage, {"clientStateFieldID":"ctl00_cphContent_mpvFloorplans_ClientState","pageViewData":[{"id":"ctl00_cphContent_pvAmenities"},{"id":"ctl00_cphContent_pv2d"}],"selectedIndex":1}, null, null, $get("ctl00_cphContent_mpvFloorplans"));
});
//]]>
</script>
</form>
</body>
</html>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~