I have some code for a tootlip in a calendar. i want to be able to display html in the tool tip is this possible? every time i try and change it to accept html it crashes it only allows text right now and i do not understand how to change it to allow for html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script type='text/javascript' src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<style type='text/css'>
.pink > a {
background-color: pink !important;
background-image:none !important;
}
.green > a {
background-color: green !important;
background-image: none !important;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
var Event = function(text, className) {
// would like to convert this to allow for html
this.text = text;
// this.html = text; // does not work
this.className = className;
};
var events = {};
events[new Date("01/01/2013")] = new Event("New Years Day", "pink");
events[new Date("12/25/2012")] = new Event("<B>Merry</b> Christmas", "green");
console.dir(events);
$("#dates").datepicker({
beforeShowDay: function(date) {
var event = events[date];
if (event) {
return [true, event.className, event.text];
}
else {
return [true, '', ''];
}
}
});
});//]]>
</script>
</head>
<body>
<div id="dates"></div>
</body>
</html>
thank you in advance for any code or help you may provide
Johnny
The title attribute does not allow html code.
But there are several frameworks out there that allow you to modify the hover.
I used jQuery Tooltip
<script src="http://jquery.bassistance.de/tooltip/jquery.tooltip.js"></script>
$('*').tooltip();
Here you will see that they tooltip has been modified and the bold is in place.
http://jsfiddle.net/Morlock0821/WqrMK/
Related
I am having some problem with the ajax . I want to get image name only using ajax but I am getting header and footer content instead of image name..
here is my code.
controller file
public function deleteimageAction() {
$id = (int) $this->params()->fromRoute('id', 0);
$image = $_POST['image'];
return $image;
}
and my ajax-
$('.delete').click(function(e){
var imageName=$(this).attr('data');
var id=$(this).attr('id');
$.ajax({
url:'/test/zend/public/business/deleteimage/'+id,
type: 'POST',
data:{id:id,image:imageName,},
success: function (data) {
alert('Success : please check console')
console.log(data);
},
error:function(data) {
alert('Error : please check console')
console.log(data);
}
});
});
and getting the following result in the console -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ZF2 Skeleton Application</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Le styles -->
<link href="/test/zend/public/css/bootstrap.min.css" media="screen" rel="stylesheet" type="text/css">
<link href="/test/zend/public/css/style.css" media="screen" rel="stylesheet" type="text/css">
<link href="/test/zend/public/css/bootstrap-responsive.min.css" media="screen" rel="stylesheet" type="text/css">
<link href="/test/zend/public/images/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon">
<!-- Scripts -->
<script type="text/javascript" src="/test/zend/public/js/jquery.min.js"></script>
<script type="text/javascript" src="/test/zend/public/js/bootstrap.min.js"></script>
<!--[if lt IE 9]><script type="text/javascript" src="/test/zend/public/js/html5.js"></script><![endif]-->
</head>
<body>
</body>
</html>
public function deleteimageAction() {
$id = (int) $this->params()->fromRoute('id', 0);
$image = $_POST['image'];
echo $image;
exit();
}
I am trying to get json encoded data into a json file inorder to show them in an event calendar.I am using php codeigniter framework.I just want to know whether is there any other method other than the method i have used. Because it is not working. But when i echo the json_encode data it displays.But I want to write them into a separate file calls events.json.
Thanks in advance.
model
function get_all_reservations_for_calendar(){
$this->db->select('reservations.date,reservations.time,reservations.hall');
$this->db->from('reservations');
$this->db->where('is_deleted', '0');
$query = $this->db->get();
return $query->result();
}
Controller
function index() {
$reservation_service = new Reservation_service();
$output['calendar_results'] = $reservation_service->get_all_reservations_for_calendar();
$partials = array('content' => 'dashboard/dashboard_view');
$this->template->load('template/main_template', $partials, $output);
}
calendar_view
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
#event_cal{
width: 500px;
height: 500px;
}
</style>
<link rel="stylesheet" href="http://localhost/Calendar/backend_resources/css/eventCalendar.css">
<link rel="stylesheet" href="http://localhost/Calendar/backend_resources/css/eventCalendar_theme_responsive.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="http://localhost/Calendar/backend_resources/js/jquery.eventCalendar.min.js" type="text/javascript"></script>
<?php //echo json_encode($calendar_results); ?>
<?php
//write to json file
$fp = fopen('events.json', 'w');
fwrite($fp, json_encode($calendar_results));
fclose($fp);
?>
<script type="text/javascript">
$(function() {
$("#event_cal").eventCalendar({
eventsjson: 'http://localhost/Calendar/backend_resources/json/events.json',
dateFormat: 'dddd MM-D-YYYY'
});
});
</script>
</head>
<body>
<div id="event_cal" ></div>
</body>
</div>
You can put your file data using file_put_contents();
<?php
//write to json file
$jsonEvents=json_encode($calendar_results);
file_put_contents('events.json',$jsonEvents);
?>
I am trying to add a blog to my website and I decided I would just create a google blog and use a full screen Iframe to display it on my page. It works fine but then I decided to add the websites header. So now I have the header followed by the Iframe but I would like to be able to treat the header & Iframe as one single page. Right now the header is always visible and I can scroll through the Iframe with the header always showing above it which is not the most visibly pleasant experience. Here is the code:
<?php
include("header.php");
?>
<html>
<head>
<style type="text/css">
body
{
margin: 0;
overflow: hidden;
}
#iframe1
{
height: 80%;
left: 0px;
position: absolute;
top: 180px;
width: 100%;
}
</style>
</head>
<body>
<iframe id="iframe1" src="http://xxxx.blogspot.com/" frameborder="0"></iframe>
</body>
</html>
Here is the header code:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta name="google-site-verification"=xxx />
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-26023641-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>xxx – <?php if ($page != 'Home') { echo $page; } else { echo 'xxxxs'; } ?></title>
<meta name="description" content="xxx." />
<meta name="keywords" content="xxx<?php echo $tags; ?>" />
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="/js/lightview/js/excanvas/excanvas.js"></script>
<![endif]-->
<script type="text/javascript" src="js/external.js"></script>
<script type="text/javascript" src="js/lightview/js/spinners/spinners.js"></script>
<script type="text/javascript" src="js/lightview/js/lightview/lightview.js"></script>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box"></script>
<link rel="stylesheet" type="text/css" href="css/hub.css" media="screen" />
<link rel="stylesheet" type="text/css" href="js/lightview/css/lightview/lightview.css"/>
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="css/ie7styles.css" /><![endif]-->
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="css/ie6styles.css" /><![endif]-->
<!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="css/ie6styles.css" /><![endif]-->
<link rel="icon" href="favicon.ico" type="image/ico" />
</head>
<body>
<div id="header">
<a id="logo" href="/"></a>
<ul id="nav">
<li>xx</li>
<li>xx</li>
<li>xx</li>
<li>xx</li>
<li>xx</li>
<li>xx</li>
<li>xx</li>
<li>xx</li>
<li>xx</li>
<li>xx</li>
</ul>
</div>
<div id="content">
The problem is that your scroll bar is within the iframe and disabled on the main page body, so scrolling is only scrolling within the iframe and not your whole page. Remove overflow: hidden from your page body and make it so your iframe stretches its height to fit its contents. That way, the scrollbar you see on the page would scroll your entire page instead of just the iframe.
The response has about 500 records and it looks ugly in auto-complete. If more than 10 suggestion then is there any change make the list look like combobox instead of very long list?
Thanks
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#textbox_postcode').autocomplete(
{
source: 'search-db.php',
minLength: 3
});
});
</script>
</head>
<body>
<input type="text" id="textbox_postcode" value="" />
</body>
</html>
add the following to your .css file.
.ui-autocomplete {
max-height: 100px !important;
overflow-y: scroll;
}
max-height can be whatever you would like.
Here is an HTML page where I want to load an element with a php script using ajax.
<?php require_once('connect.php'); ?>
<!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 http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<?php require("pagetitle.php"); ?>
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame Remove this if you use the .htaccess -->
<!-- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/themes/base/jquery-ui.css" type="text/css" media="all"
/>
<!-- Portal JavaScript -->
<script type="text/javascript" src="portal.js"></script>
<script type="text/javascript">
var http = false;
if(navigator.appName == "Microsoft Internet Explorer") {
http = new ActiveXObject("Microsoft.XMLHTTP");
} else {
http = new XMLHttpRequest();
}
function LoadCalendar() {
http.abort();
http.open("GET", "calendar/index.php?cP=2", true);
http.onreadystatechange=function() {
if(http.readyState == 4) {
document.getElementById('litcal').src = http.responseText;
}
}
http.send(null);
}
</script>
</head>
<body onload="appendTitle('Calendar');">
<div id="content-body"><a name="top"></a>
<h1>
<iframe id="litcal" onload="LoadCalendar();" style="padding: 0px 0px 0px 0px; border: 1px solid #404040;" width="690px"
height="691px"></iframe>
</h1>
</div> <!-- End CONTENT-BODY div -->
</body>
</html>
The loaded element is empty. It only has <html></html>. What error in the ajax code caused this?
maybe you need to make sure the status is 200 before assigning the src attribute to the response text
The problem was that the PHP was not returning a URL. So ajax could not assign anything to the src. See this question for the code that worked.
https://stackoverflow.com/questions/6612918/loading-an-iframe-with-ajax/6618656#6618656