On my page I have jQuery creating tabs, and I have Chart.js creating a line chart. They both work fine, except I cannot make Chart.js show the line chart inside a jQuery tab. I don't understand what it is about jQuery tabs that could be preventing the chart to display.
The only error I get from Chrome is "Uncaught TypeError: Cannot call method 'getContext' of null" referring to line 64.
How do I go about making this work?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="css/style.css" rel="stylesheet">
<!--Chart.js stuff-->
<script src="js/Chart.js"></script>
<meta name = "viewport" content = "initial-scale = 1, user-scalable = no">
<style>
canvas{
}
</style>
<!--jQuery/jQuery UI files-->
<link href="css/smoothness/jquery-ui-1.10.3.custom.css" rel="stylesheet">
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui-1.10.3.custom.js"></script>
<!--To enable jQuery elements-->
<script>
$(function()
{
$( "#tabs" ).tabs();
});
</script>
</head>
<body>
<script>
var lineChartData = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
data : [65,59,90,81,56,55,40]
},
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
data : [28,48,40,19,96,27,100]
}
]
}
var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(lineChartData);
</script>
<div class="wrapper">
<div class="middle">
<div class="container">
<main class="content">
<div id="tabs">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<div id="tabs-1">
<!--Trying to display the chart here is not working-->
<canvas id="canvas" height="450" width="600"></canvas>
</div>
<div id="tabs-2">
<p></p>
</div>
</div>
</main><!-- .content -->
</div><!-- .container-->
</div><!-- .middle-->
</div><!-- .wrapper -->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name = "viewport" content = "initial-scale = 1, user-scalable = no">
<title>Untitled Document</title>
<style>
canvas{
}
/*** tabs ****/
.etabs { margin: 0;
padding-left:20%; }
.etabs li
{display:inline-block;
width:auto;
padding:0 3% 2% 3%;
text-align:center;
}
.tab { display: inline-block;
zoom:1;
display:inline;
background:url(../images/li_border.fw.png) no-repeat right;
height:23px;
}
.tab a { font-size: 20px;
line-height: 2em;
display: block;
outline: none;
color:#D80000;
font-size:20px;
text-decoration:none;
}
.tab a:hover { text-decoration: none; }
.tab.active { color:#D80000;
position: relative;
border-color: #666; }
.tab a.active {
color:#0085B2; }
.tab-container .panel-container { background: #fff;
border: solid #666 1px;
padding: 10px;
-moz-border-radius: 0 4px 4px 4px;
-webkit-border-radius: 0 4px 4px 4px;
}
/*** tabs ****/
</style>
</head>
<body>
<div id="tab-container" class="tab-container">
<ul class='etabs'>
<li class='tab'>Chart</li>
<li class='tab'>Bar chart</li>
</ul>
<div id="history" class="heig">
<h1>bar chart</h1>
<canvas id="canvas" height="450" width="600"></canvas>
</div>
<div id="business" class="heig">
<h1>pie chart</h1>
<canvas id="canvaspie" height="450" width="450"></canvas>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="jquery.easytabs.js"></script>
<script src="Chart.js"></script>
<script>
$(document).ready(function(){ $('#tab-container').easytabs(); });
</script>
<script>
var barChartData = {
labels : ["Pass","Fail"],
datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,1)",
data : [65,0]
},
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
data : [0,47]
}
]
}
var myLine=new Chart(document.getElementById("canvas").getContext("2d")).Bar(barChartData);
</script>
<script>
var pieData = [
{
value: 30,
color:"#F38630"
},
{
value : 50,
color : "#E0E4CC"
},
{
value : 100,
color : "#69D2E7"
}
];
var myPie = new Chart(document.getElementById("canvaspie").getContext("2d")).Pie(pieData);
</script>
</body>
</html>
I just posted an answer in a different related question in ChartJS charts not generating within tabs with example code and jsfiddle. I'm not using jquery.tabs but I was having the same problem with tabs I made myself. I realized the issue is that with display:none chartjs doesn't know the size of the div to render the chart. The ^ fiddle makes use of two fixes actually: using jquery.hide()/show() instead and temporarily hiding the area with a cover while they render (which I found was necessary in large pages).
The trick is to hide each tab as soon as you render the chart. Again, using tabs I made myself but this should fix your issue too if you're willing to adjust how you show/hide tabs.
The business (full code on the jsfiddle)
var ctx = document.getElementById('chart1').getContext('2d');
var chart1 = new Chart(ctx).Bar(data1);
$('#tab1').hide();
var ctx = document.getElementById('chart2').getContext('2d');
var chart2 = new Chart(ctx).Line(data2);
$('#tab2').hide();
$('#tab1_btn').on('click',function(){
$('#tab1').show();
$('#tab2').hide()
})
$('#tab2_btn').on('click',function(){
$('#tab1').hide();
$('#tab2').show()
})
This works for me. The trick is generate the chart when the tab activated.
var chartIsShow = false;
$(function() {
$( "#Tabs1" ).tabs({
activate: function(event, ui) {
if(chartIsShow === false) {
var ctx = document.getElementById("chart").getContext("2d");
window.myLine = new Chart(ctx).Line(chart_data,{ animation : false, responsive : true });
chartIsShow = true;
}
}
});
});
download customized jquery-ui.js file and check minimum things (only tabs) and uncheck all other at http://jqueryui.com/download/ and include this js file instead of yours on this page
Related
Weird one. Have two school building calendars being fed by public Google Cal. Can click month-to-month without error, but when I hide one building cal and click to the next month, I end up with duplicate entries that continue to double then triple and continue duping as you click month to month. Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8' />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/fullcalendar.css" rel="stylesheet" />
<link href="css/fullcalendar.print.css" rel="stylesheet" media="print" />
<link type="image/x-icon" href="http://www.woostercityschools.org/sites/woostercityschools.org/files/favicon_wcs.png" rel="shortcut icon">
<link type="image/x-icon" href="http://www.woostercityschools.org/sites/woostercityschools.org/files/favicon_wcs.png" rel="icon">
<script src="js/moment.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/fullcalendar.min.js"></script>
<script src="js/gcal.js"></script>
<script>
var allCals = [
{
id: 1,
name: 'High School',
url: 'https://www.google.com/calendar/feeds/CALENDAR_ID_HERE#group.calendar.google.com/public/basic',
color: '#0057b8',
visible: true
},{
id: 2,
name: 'Middle School',
url: 'https://www.google.com/calendar/feeds/CALENDAR_ID_HERE#group.calendar.google.com/public/basic',
color: '#4b4c4c',
visible: true
}
];
var gCals = function(){
var ret = $.grep(allCals, function(a){
return a.visible === true;
});
console.log('called gCals()');
console.log(ret);
return ret;
}
$(document).ready(function() {
//Hide/Show all
$('#hide-all').click(function(){
$('.calendar-list button').each(function(){
$(this).removeClass('btn-calendar-hide');
});
$.each(allCals, function(index,value){
//$('#calendar').fullCalendar('removeEventSource', this);
this.visible = false;
});
$('#calendar').fullCalendar('removeEvents');
});
$('#show-all').click(function(){
$('.calendar-list button').each(function(){
$(this).addClass('btn-calendar-hide');
});
$('#calendar').fullCalendar('removeEvents');
$.each(allCals, function(index,value){
$('#calendar').fullCalendar('addEventSource', allCals[index]);
this.visible = true;
});
});
//Populate buttons
$.each( allCals, function( index, value ){
var tmp = $('<button/>', {
type: 'button',
class: 'btn btn-block btn-calendar',
style: 'background-color: '+value.color,
text: value.name,
id: 'btn_calendar'+value.id,
click: function () {
if ($(this).hasClass('btn-calendar-hide')){
//$('#calendar').fullCalendar('removeEventSource', value);
$( this ).removeClass('btn-calendar-hide');
value.visible = false;
} else {
//$('#calendar').fullCalendar('addEventSource', value);
$( this ).addClass('btn-calendar-hide');
value.visible = true;
}
updateCalendar();
}
});
if (value.visible === true){
tmp.addClass('btn-calendar-hide');
}
$('.calendar-list').append(
tmp
);
});
//Display the calendar
$('#calendar').fullCalendar({
googleCalendarApiKey: 'AIzaSyDiJjIhfkuYrKzwrj0GS3wBN1erVcMsJmM',
eventSources: allCals,
eventClick: function(event) {
// opens events in a popup window
window.open(event.url, 'gcalevent', 'width=700,height=600');
return false;
},
loading: function(bool) {
$('#loading').toggle(bool);
},
header: {
left: 'month,basicWeek,basicDay',
center: 'title',
right: 'today prev,next'
}
});
function updateCalendar(){
$('#calendar').fullCalendar('removeEvents');
$.each(allCals, function(index,value){
if (value.visible === true){
$('#calendar').fullCalendar('addEventSource', allCals[index]);
}
});
}
});
</script>
<style>
a.fc-event:hover, a.fc-event:focus{
color:#000;
}
#loading {
display: none;
position:absolute;
width:96%;
padding:10px;
z-index:999;
border: solid 1px #f8e166;
margin:1% 2%;
}
#loading h3 {
margin:2%;
}
#calendar {
margin: 20px auto;
}
.btn {
border-color: rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.25);
}
.btn-calendar {
background-image: none;
color: #FFFFFF;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8);
opacity: 0.5;
}
.btn-calendar-hide {
opacity: 1;
}
.btn:hover, .btn:focus {
color: #FFFFFF;
text-decoration: none;
}
#media print {
a[href]:after {
content: none;
}
}
</style>
</head>
<body>
<div id="loading" class="bg-warning">
<h3 class="text-center">Loading...</h3>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-2 hidden-print"> <img class="img-responsive center-block" style="margin-top:2em; margin-bottom:2em" src="logo-district.jpg" alt="Wooster City Schools" >
<div class="calendar-list">
<h4>Calendars
<div class="btn-group">
<button id="show-all" type="button" class="btn btn-xs">Show All</button>
<button id="hide-all" type="button" class="btn btn-xs">Hide All</button>
</div>
</h4>
</div>
</div>
<div class="col-md-10">
<p class="text-right hidden-print" style="margin-top:2%"><i class="glyphicon glyphicon-print"></i> Print</p>
<div id="calendar"></div>
</div>
</div>
</div>
</body>
</html>
The problem you've got is that calling $('#calendar').fullCalendar('removeEvents'); deletes the events currently visible on the calendar, but it doesn't remove the source of those events.
That means that when you then go on to call $('#calendar').fullCalendar('addEventSource' next, you are simply adding the same source of events over and over again. Next time you press "next" or "previous" to change the date range, this triggers fullCalendar to request new events for that date range from all the available sources. Since you haven't removed any sources, but have kept adding more, you can see how this then leads to duplication of events in the display.
In one part of your code you've commented out a call to $('#calendar').fullCalendar('removeEventSource' ...but actually that (or the plural "removeEventSources", where appropriate) should be the correct approach. If you remove the source then it will both remove the existing events and also prevent future requests to that source from adding more events again.
I neede to customize labels (like a bubbletalk) of a kendo line chart.
I build a template (like in this kendo test: http://dojo.telerik.com/#PMcDonou/URiZA. I took this demo from an admin solution in a kendo forum thread) and it work when load the page first time, but in some situations kendo UI not render the labels.
The problem appears in this two cases:
When I refresh manually chart with a button that to click on it you need to
scroll the page.
When i refresh the page(F5) after that i scrolled down the page.
I noticed that the position of the labels moves upwards based on the offset from top given by scrolling.
I did this fiddle for you to see the first case.
For see an example of the second case look the fiddle in a full screen page, try to scroll down and refresh the page(F5) and try this in multiple positions of scroll. Thank you for attention and help me please.
function createChart(){
var dataSource = new kendo.data.DataSource({
data: [{
category: "A", value: 10
}, {
category: "B", value: 20
}, {
category: "C", value: 30
}]
});
var labelTemplate = kendo.template($("#labelTemplate").html());
$("#chart").kendoChart({
dataSource: dataSource, series: [{
type: "line", style: "smooth", field: "value", categoryField: "category", labels: {
visible: true, template: "#= category #", visual: function(e) {
var dataItem = $.grep(dataSource.data(), function(item) {
return item.category === e.text;
})[0];
// Label origin position (same as where the original label would be)
var origin = e.rect.origin;
var content = $('<div/>')
.css({
position: "absolute",
font: "11px Arial,Helvetica,sans-serif",
left: 0,
top: 0
})
.appendTo(document.body)
.html(labelTemplate(dataItem));
var visual = new kendo.drawing.Group();
kendo.drawing.drawDOM(content).done(function(group) {
// Place drawn shapes on original label position
group.transform(kendo.geometry.transform().translate(origin.x, origin.y));
visual.append(group);
// Remove element from DOM
content.remove();
});
return visual;
}
}
}]
});
}
$(function(){
createChart();
$("#refreshChart").on("click", function(){
$("#chart").data("kendoChart").refresh();
})
});
.talk-bubble {
width: auto;
height: auto;
background-color: red;
color: white;
border-radius: 30px;
}
.talktext {
padding: 1em;
text-align: left;
line-height: 1.5em;
}
.talktext p {
/* remove webkit p margins */
-webkit-margin-before: 0em;
-webkit-margin-after: 0em;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.mobile.all.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script>
</head>
<body>
<!-- Div for chart -->
<div id="chart"></div>
<!-- Example div container -->
<h1>Go down and click button</h1>
<div style="height:3000px; background-color: yellow;"></div>
<!-- Button that refresh chart -->
<h3>Click button</h3>
<button type="button" id="refreshChart">Refresh chart</button>
<h1>Now go up, label not rendered</h1>
<!-- Label Template Custom -->
<script id="labelTemplate" type="text/x-kendo-template">
<div class="talk-bubble">
<div class="talktext">
<p>Value: #= kendo.format('{0:n2}', data.value) #</p>
</div>
</div>
</script>
</body>
</html>
I am trying to implement the scroll to top feature in my website: www.arrow-tvseries.com.
The "button" is seen on the website however it does not work properly, because when clicked its not scrolling to the top of the page. More over I would like that the "Scroll to top button" is visible when scrolled down, say half the page.
Here is the javascript code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$(window).scroll(function() {
if($(this).scrollTop() != 200) {
$('#backtotop').fadeIn();
} else {
$('#backtotop').fadeOut();
}
});
$('#backtotop').click(function() {
$('body,html').animate({scrollTop:0},800);
});
});
</script>
HTML Code (Head Tag):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>Arrow-TvSeries - Home</title>
<link rel="stylesheet" type="text/css" href="style.css">
<!--back to top links-->
<link rel="stylesheet" type="text/css" href="back_to_top.css">
<script src="/scripts/back_to_top.js" type="text/javascript"></script>
<!--end of back to top links-->
<meta property="fb:admins" content="{793705343}"/>
<!--Google Analytics-->
<script type="text/javascript">
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-40124321-1', 'arrow-tvseries.com');
ga('send', 'pageview');
</script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="description" content="Arrow Tv Show">
<meta name="keywords" content="arrow, tv show, amel, stephen amell, katie cassidy, oliver, oliver queen, queen">
<meta name="author" content="Ståle Refsnes">
<meta charset="UTF-8">
<!--IPAD setting-->
<meta name="viewport" content="width = 730, initial-scale=0.70, minimum-scale = 0.5, maximum-scale = 1.25"/>
</head>
CSS Code:
#backtotop {
cursor : pointer;
/*display : none;*/
margin : 0px 0px 0px 370px;
position : fixed;
bottom : 10px;
font-size : 90%;
padding : 10px;
width : 100px;
text-align : center;
background-color : #000;
border-radius : 8px;
-webkit-border-radius : 8px;
-moz-border-radius : 8px;
filter: alpha(opacity=60);
-khtml-opacity : 0.6;
-moz-opacity : 0.6;
opacity : 0.6;
color : #FFF;
font-size : 14px;
z-index : 10000;
font-family: arial;
}
#backtotop:hover {
filter : alpha(opacity=90);
-khtml-opacity : 0.9;
-moz-opacity : 0.9;
opacity : 0.9;
}
Please feel free and let me know if you require further code or information.
Thanks
Try this and let me know if it is not working:
<!DOCTYPE html>
<html>
<head>
<style>
input.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
</style>
<script>
function scrollWindow()
{
window.scrollTo(0,0);
}
</script>
</head>
<body>
<br>
<input class="pos_fixed" type="button" onclick="scrollWindow()" value="Scroll" />
<br>
</body>
</html>
You can do the same thing with below code:
$("a[href='#top']").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
Try this. Hope it helps.
You could do something like this:
JSFiddle demo
$(window).scroll(function() {
// if you have scrolled down more than 200px
if($(this).scrollTop() > 200) {
$('#backtotop').fadeIn();
} else {
$('#backtotop').fadeOut();
}
});
$('#backtotop').bind('click', function(e) {
e.preventDefault();
$('body,html').animate({scrollTop:0},800);
});
The problem is that your javascript file is actually written in HTML.
In your HTML head section, you should have:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src="scripts/back_to_top.js" type="text/javascript"></script>
Then your back_to_top.js should contain only the following:
$(function() {
$(window).scroll(function() {
if($(this).scrollTop() != 200) {
$('#backtotop').fadeIn();
} else {
$('#backtotop').fadeOut();
}
});
$('#backtotop').click(function() {
$('body,html').animate({scrollTop:0},800);
});
});
I want to connect div's using jsPlumb. It works when I used styles, but the final lines have an incorrect offset when I use jquery-ui decorations like accordion.
Code:
<!doctype html>
<html lang="us">
<head>
<meta charset="utf-8">
<title>jQuery UI Example Page</title>
<link href="css/ui-lightness/jquery-ui-1.9.1.custom.css" rel="stylesheet"/>
<script src="js/jquery-1.8.2.js"></script>
<script src="js/jquery-ui-1.9.1.custom.js"></script>
<script src="js/jquery.jsPlumb-1.3.16-all.js"></script>
<script>
$(function() {
$( "#top" ).accordion({
collapsible: false,
icons: false
});
});
</script>
</head>
<body>
<h1>jsPlumb tests</h1>
<div id="top" style="border-width: 2px; border-style: solid; border-color: red;">
<h1>TOP</h1>
</div>
<div>
<p>Text Text Text</p>
</div>
<div id="bottom" style="margin: 0px 100px 0px 50px; border-width: 2px; border-style: solid; border-color: red;">
<h1>Bottom</h1>
</div>
<script>
jsPlumb.ready(function() {
jsPlumb.importDefaults({
ConnectorZIndex:5
});
var jsP = jsPlumb.getInstance({
PaintStyle:{ lineWidth:1, strokeStyle:"#567567", outlineColor:"black", outlineWidth:1 },
Connector: "Straight",
Endpoint: "Blank"
});
var e0 = jsP.addEndpoint("top", {
anchor: ["Perimeter", {shape:"square", anchorCount:100}]
});
var e1 = jsP.addEndpoint("bottom", {
anchor: ["TopCenter"]
});
jsP.connect({ source:e0, target:e1});
});
</script>
</body>
</html>
Produces:
The desired effect (without accordion decoration) is:
What I am doing wrong? It seems that the line is rendered before the accordion decoration.
I have found a solution changing the order of the scripts, including the style one inside the jsPlumb one:
<!doctype html>
<html lang="us">
<head>
<meta charset="utf-8">
<title>jQuery UI Example Page</title>
<link href="css/ui-lightness/jquery-ui-1.9.1.custom.css" rel="stylesheet"/>
<script src="js/jquery-1.8.2.js"></script>
<script src="js/jquery-ui-1.9.1.custom.js"></script>
<script src="js/jquery.jsPlumb-1.3.16-all.js"></script>
</head>
<body>
<h1>jsPlumb tests</h1>
<div id="top" style="border-width: 2px; border-style: solid; border-color: red;">
<h1>TOP</h1>
</div>
<div>
<p>Text Text Text</p>
</div>
<div id="bottom" style="margin: 0px 100px 0px 50px; border-width: 2px; border-style: solid; border-color: red;">
<h1>Bottom</h1>
</div>
<script>
$( "#top" ).accordion({
collapsible: false,
icons: false
});
jsPlumb.ready(function() {
jsPlumb.importDefaults({
ConnectorZIndex:5
});
var jsP = jsPlumb.getInstance({
PaintStyle:{ lineWidth:1, strokeStyle:"#567567", outlineColor:"black", outlineWidth:1 },
Connector: "Straight",
Endpoint: "Blank"
});
var e0 = jsP.addEndpoint("top", {
anchor: ["Perimeter", {shape:"square", anchorCount:100}]
});
var e1 = jsP.addEndpoint("bottom", {
anchor: ["TopCenter"]
});
jsP.connect({ source:e0, target:e1});
});
</script>
</body>
</html>
And the result is:
Am using the below script to change the color of the script but showing 'font color="red">Hello world /font> like this.Is any possible way to change the alert text color..
<html>
<head>
<title>JavaScript String fontcolor() Method</title>
</head>
<body>
<script type="text/javascript">
var str = new String("Hello world");
alert(str.fontcolor( "red" ));
</script>
</body>
</html>
No. alert() accepts a string and renders it using a native widget. There is no provision to style it.
The closest you could get would be to modify the HTML document via the DOM to display the message instead of using an alert().
You can use JQuery to resolve your Problem
<html>
<head>
<meta charset="utf-8" />
<title>JavaScript String fontcolor() Method</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery- ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#dialog-message" ).dialog({
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}});
});
</script>
</head>
<body>
<div id="dialog-message" title="My Dialog Alternative">
<p style='color:red'> Hello world </p>
</div>
</body>
</html>
Hope this help :
<!doctype html>
<html>
<head>
<title>JavaScript String fontcolor() Method</title>
<style>
#alertoverlay{display: none;
opacity: .8;
position: fixed;
top: 0px;
left: 0px;
background: #FFF;
width: 100%;}
#alertbox{display: none;
position: fixed;
background: #000;
border:7px dotted #12f200;
border-radius:10px;
font-size:20px;}
#alertbox > div > #alertboxhead{background:#222; padding:10px;color:#FFF;}
#alertbox > div > #alertboxbody{ background:#111; padding:40px;color:red; }
#alertbox > div > #alertboxfoot{ background: #111; padding:10px; text-align:right; }
</style><!-- remove padding for normal text alert -->
<script>
function CustomAlert(){
this.on = function(alert){
var winW = window.innerWidth;
var winH = window.innerHeight;
alertoverlay.style.display = "block";
alertoverlay.style.height = window.innerHeight+"px";
alertbox.style.left = (window.innerWidth/3.5)+"pt";
alertbox.style.right = (window.innerWidth/3.5)+"pt"; // remove this if you don't want to have your alertbox to have a standard size but after you remove modify this line : alertbox.style.left=(window.inner.Width/4);
alertbox.style.top = (window.innerHeight/10)+"pt";
alertbox.style.display = "block";
document.getElementById('alertboxhead').innerHTML = "JavaScript String fontcolor() Method :";
document.getElementById('alertboxbody').innerHTML = alert;
document.getElementById('alertboxfoot').innerHTML = '<button onclick="Alert.off()">OK</button>';
}
this.off = function(){
document.getElementById('alertbox').style.display = "none";
document.getElementById('alertoverlay').style.display = "none";
}
}
var Alert = new CustomAlert();
</script>
</head>
<body bgcolor="black">
<div id="alertoverlay"></div>
<div id="alertbox">
<div>
<div id="alertboxhead"></div>
<div id="alertboxbody"></div>
<div id="alertboxfoot"></div>
</div>
</div>
<script>Alert.on("Hello World!");</script>
</body>
</html>
The concept is taken from this : http://www.developphp.com/video/JavaScript/Custom-Alert-Box-Programming-Tutorial