"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
Related
I need help with bootstrap datepicker
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker3'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker3').datetimepicker({
format: 'LT'
});
});
</script>
</div>
</div>
The code works, however it shows date instead of time.
You need to edit the format option to show time only:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js" type="text/javascript" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker3'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker3').datetimepicker({
format: 'HH:mm'
});
});
</script>
</div>
</div>
$(document).ready(function(){
$("#datetimepicker").datetimepicker({
pickDate: false,
minuteStep: 15,
pickerPosition: 'bottom-right',
format: 'HH:ii p',
autoclose: true,
showMeridian: true,
startView: 1,
maxView: 1,
});
$(".datetimepicker").find('thead th').remove();
$(".datetimepicker").find('thead').append($('<th class="switch">').text('Pick Time'));
$('.switch').css('width','190px');
});
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://www.malot.fr/bootstrap-datetimepicker/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css" rel="stylesheet">
</head>
<body>
<div class="form-group">
<input class="form-control" type="text" id="datetimepicker" readonly>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://www.malot.fr/bootstrap-datetimepicker/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
</body>
</html>
this works in my application:
$("#datetimepicker").datetimepicker({format: 'HH:mm:ss', pickDate:false });
You should try this
<div class="well">
<div id="datetimepicker3" class="input-append">
<input data-format="hh:mm:ss" type="text"></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar">
</i>
</span>
</div>
</div>
<script type="text/javascript">
$(function() {
$('#datetimepicker3').datetimepicker({
pickDate: false
});
});
</script>
Add to
showSeconds:false
$('#kt_timepicker_2').timepicker({
minuteStep: 1,
format: 'HH:mm',
defaultTime: '',
showMeridian: false,
snapToStep: true,
showSeconds:false});
Download the zip file in https://www.malot.fr/bootstrap-datetimepicker/demo.php
It has the Time only picker code.
I have also copied it here
<div class="form-group">
<label for="dtp_input3" class="col-md-2 control-label">Time Picking</label>
<div class="input-group date form_time col-md-5" data-date="" data-date-format="hh:ii" data-link-field="dtp_input3" data-link-format="hh:ii">
<input class="form-control" size="16" type="text" value="" readonly>
<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
</div>
<input type="hidden" id="dtp_input3" value="" /><br/>
</div>
<script>
$('.form_time').datetimepicker({
//language: 'fr',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 1,
minView: 0,
maxView: 1,
forceParse: 0
});
</script>
I am trying to use Bootstrap datepicker in my project. I include following scripts and styles:
<link href="{{ url('/datepicker/css/datepicker.css') }}" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="{{ url('/js/jquery-3.1.1.min.js') }}"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="{{ url('/datepicker/js/bootstrap-datepicker.js') }}"></script>
Field for entering date:
<div class="form-group ">
<div class='input-group date' id='datepicker'>
<input type="text" id="processdate" class="form-control datepicker" placeholder="Processing Date..." name="processdate" />
<span class="input-group-addon btn"><i class="glyphicon glyphicon-calendar"></i> </span>
</div>
</div>
<script>
$(document).ready(function () {
$('#datepicker').datepicker({
startDate: '-180d',
endDate: '+1d',
autoclose: true
});
});
</script>
But when I open the page, I get following error:
Uncaught TypeError: $(...).datepicker is not a function
at HTMLDocument.<anonymous> (register:135)
at j (jquery-3.1.1.min.js:2)
at k (jquery-3.1.1.min.js:2)
Where is the mistake?
I used the code from here:
http://jsfiddle.net/Lro8kxjx/6/
mmenu crashes the page when used with Google Publisher Tags (async), as soon as the page loads the css formatting and html structure seems to be lost and all further javascript execution stops. It can be reproduced by adding a google publisher tag in the demo file of mmenu download.
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>
(function() {
var useSSL = 'https:' == document.location.protocol;
var src = (useSSL ? 'https:' : 'http:') +
'//www.googletagservices.com/tag/js/gpt.js';
document.write('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>');
})();
</script>
<script type='text/javascript'>
googletag.defineSlot('/5910/symall/ROS', [1, 1], 'div-gpt-ad-1403693262284-0').addService(googletag.pubads());
googletag.pubads().enableSyncRendering();
googletag.pubads().enableSingleRequest();
googletag.pubads().collapseEmptyDivs();
googletag.enableServices();
</script>
<meta charset="utf-8" />
<meta name="author" content="www.frebsite.nl" />
<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=yes" />
<title>jQuery.mmenu demo</title>
<link type="text/css" rel="stylesheet" href="css/demo.css" />
<link type="text/css" rel="stylesheet" href="../src/css/jquery.mmenu.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="../src/js/jquery.mmenu.min.js"></script>
<script type="text/javascript">
$.fn.mmenu.debug = function( msg ) {
console.log( msg );
};
$(function() {
$('nav#menu').mmenu();
});
</script>
</head>
<body>
<div id="page">
<div class="header">
Demo
</div>
<div class="content">
<p><strong>This is a demo.</strong><br />
Click the menu icon to open the menu.</p>
<p>For more demos, a tutorial, documentation and support, please visit mmenu.frebsite.nl</p>
</div>
<nav id="menu">
<ul>
<li>Home</li>
<li>About us
<ul>
<li>History</li>
<li>The team
<ul>
<li>Management</li>
<li>Sales</li>
<li>Development</li>
</ul>
</li>
<li>Our address</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
</div>
<!-- SYMALL/ROS -->
<div id='div-gpt-ad-1403693262284-0'>
<script type='text/javascript'>
googletag.display('div-gpt-ad-1403693262284-0');
</script>
</div>
</body>
</html>
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>
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>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~