I am using Telerik RadHtml chart i need to chart should be auto size based on the screen resolution how to do it.
I have tried to set width and height as Auto but this not working. my chart containing in the datalist my code block below
<asp:UpdatePanel ID="pnlContainer" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div id="wrapper">
<asp:DataList ID="dtlstDashboards" runat="server" RepeatColumns="2" RepeatDirection="Horizontal"
OnItemDataBound="dtlstDashboards_ItemDataBound" Width="100%" DataKeyField="DashboardID">
<ItemTemplate>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left">
<telerik:RadHtmlChart runat="server" ID="chrtCntrl" Width="500px" Height="300px" >
<Legend>
<Appearance Position="Bottom">
</Appearance>
</Legend>
<PlotArea>
</PlotArea>
</telerik:RadHtmlChart>
</td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
</div>
</ContentTemplate>
</asp:UpdatePanel>
You need to call the repaint() method of the chart if its dimensions change (usually, in the window.resize event, or any other suitable place in your code): http://www.telerik.com/support/code-library/radhtmlchart-in-a-responsive-web-page.
Here is an example:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
html, body, form
{
height: 100%;
margin: 0;
padding: 0;
}
.chartContainer
{
width: 50%;
height: 50%;
border: 2px solid red;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="Scriptmanager1" runat="server" />
<div class="chartContainer">
<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="100%" Height="100%">
<PlotArea>
<Series>
<telerik:AreaSeries>
<SeriesItems>
<telerik:CategorySeriesItem Y="1" />
<telerik:CategorySeriesItem Y="2" />
<telerik:CategorySeriesItem Y="4" />
<telerik:CategorySeriesItem Y="3" />
</SeriesItems>
</telerik:AreaSeries>
</Series>
</PlotArea>
</telerik:RadHtmlChart>
<script>
function resizeChart() {
//repaint the chart - will play animations
//$find("<%=RadHtmlChart1.ClientID%>").repaint();
//only resizes the chart - will not play animations
$find("<%=RadHtmlChart1.ClientID%>").get_kendoWidget().resize();
}
var TO = false;
$telerik.$(window).resize(function () {
if (TO !== false)
clearTimeout(TO);
TO = setTimeout(resizeChart, 200); //200 is time in miliseconds
});
</script>
</div>
</form>
</body>
</html>
resize timeout idea courtesy of this post javascript resize event firing multiple times while dragging the resize handle
Telerik Controls RadGrid and RadHTMLChart need to have the Height and Width on every container that is sized by percentage in order to be sized by percentage. You will have to add Height=100% Width=100% to all the containers that hold these items, all the way to the root.
Related
Here's what I got... for some reason when I click the image map links they open up the page outside the iframe (as in it opens up as it's own page)
I've messed with it for a couple hours and went through about 20 pages but none of them specifically deal with image map links and none of them are helping.
The live link is here, I'm using firefox.
http://www.penumbra-productions.com
<!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=utf-8"/>
<title>Penumbra Productions</title>
<script src="Scripts/jquery-1.10.2.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#dropshadow").hide();
setTimeout(function () {
$("#dropshadow").fadeIn(1000)
}, 1500);
});
</script>
<link href="CSS/Penprocss.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
body {
background-color: #CCC;
}
</style>
</head>
<body>
<div id="dropshadow">
<div id="wrapper">
<div id="header">
<a href="Index.html">
<img src="Images/PenproFull.jpg"
width="309" height="199"
alt="Penumbra Productions"
longdesc="http://penumbra-productions.com/Index.html"/>
</a>
<br/>
</div>
<div id="navigation">
<img src="Images/Navigation.jpg" width="1200" height="50" border="0" usemap="#Map"/>
<map name="Map" id="Map">
<area shape="photography" coords="29,5,252,43" href="photo.html" target="content"/>
<area shape="videography" coords="319,6,516,43" href="video.html" target="content"/>
<area shape="portfolio" coords="572,9,761,44" href="port.html" target="content"/>
<area shape="contact" coords="801,9,981,42" href="contact.html" target="content"/>
<area shape="about" coords="1020,9,1185,43" href="about.html" target="content"/>
</map>
</div>
<iframe id="content" src="main.html" width="1200" height="620" frameborder="0"></iframe>
<div id="footer"></div>
</div>
</div>
</body>
</html>
ok... all that needed to happen was to add the name="content" attribute to the iframe so the image map links could target it
Instead of using the target attribute of the area tag, try using an onclick handler.
...
<area shape="contact" coords="801,9,981,42" href="#" onclick="loadNow('contact.html')" />
<area shape="about" coords="1020,9,1185,43" href="#" onclick="loadNow('about.html') />
...
function loadNow(url) { document.getElementById('content').src=url; }
this is my code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<!--<script type="text/javascript" src="js/jquery-ui.js"></script>
<script src="js/jquery-ui-1.8.20.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.20.min.js" type="text/javascript"></script>-->
<head>
<body>
<canvas id="myCanvas" width="940" height="600" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
function ImageLoad()
{
var ctx = document.getElementById('myCanvas').getContext('2d');
var img = new Image(); // Create new img element
img.onload = function(){
// execute drawImage statements here This is essential as it waits till image is loaded before drawing it.
ctx.drawImage(img , 0, 0);
};
img.src = $('img[alt="example"]').attr('src'); // Set source path
}
</script>
<!--<img src="basicCycle.jpg"/>-->
<table border="1px">
<tr>
<td><img src="cycle6.jpg" alt="example" height="120" width="120"></td>
<td><img src="cycle1.jpg" alt="example" height="120" width="120"></td>
<td><img src="cycle2.jpg" alt="example" height="120" width="120"></td>
<td><img src="cycle3.jpg" alt="example" height="120" width="120"></td>
<td><img src="cycle4.jpg" alt="example" height="120" width="120"></td>
<td><img src="cycle5.jpg" alt="example" height="120" width="120"></td>
<td><img src="cycle6.jpg" alt="example" height="120" width="120"></td>
<td><img src="cycle1.jpg" alt="example" height="120" width="120"></td>
</tr>
</table>
</body>
</html>
now i want to load cycle1 in canvas when i click to cycle1 image.and load cycle2 when i click to cycle2 image.
the problem is my code always load first td image.whatever i clicked.
The problem is that you are always setting the src to that of the image whose alt is "example" and all the images have that alt, so you are always getting the first one.
Instead of:
img.src = $('img[alt="example"]').attr('src'); // Set source path
Do this:
img.src = $(this).find('img').attr('src');
"this" refers to the link that was clicked, but you need to replace the href values with "#":
<td><img src="cycle1.jpg" alt="example" height="120" width="120"></td>
And put this right before the closing <script> tag:
$(document).ready(function () {
$('a').click(ImageLoad);
});
You should also put:
return false;
as the last line inside ImageLoad(). This will keep the page from jumping to the top, if it has been scrolled.
I want to add a button for each image and the images will add border when button is clicked.
<img src="icon.png" id="vermillion" class="pic"/>
<div class="btn"id="vermillion">select</div>
I'm not good in Javascript.
I made change on
$('#image_container.btn').click(function(){
I'm not sure is it correct or not..
Original HTML code:
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#image_container img').click(function(){
//remove border on any images that might be selected
$('#image_container img').removeClass("img_border")
// set the img-source as value of image_from_list
$('#image_from_list').val( $(this).attr("src") );
$('#data_value').val( $(this).attr("id") );
// $('#data_value').val( $(this).data("options").color );
//add border to a clicked image
$(this).addClass("img_border")
});
})
</script>
<style>
.img_border {
border: 2px solid red;
}
</style>
</head>
<body>
<div id="image_container">
<img src="icon.png" id="vermillion" />
<img src="icon.png" id="riverway"/>
<img src="icon.png" id="solaria"/>
</div>
<form action="" method="get">
<input id="image_from_list" name="image_from_list" type="text" value="" />
<input id="data_value" type="text" value="" />
</form>
Use CSS pseudo classes.
http://www.w3schools.com/css/css_pseudo_classes.asp
especially :active pseudo class.
In an MVC3 application I have a view rendering two Ajax partial views: a Create partial view and a List one. In the Create partial view I try to fire client validation on OnBegin event, but this does not happen.
The error messages I get, when I force errors, are the one indicated in the model annotations, and not the ones I define in the validation function called OnBegin (e.g.:
leaving the event place empty, I get "The event place is required" (annotation) instead of "Where did it take place?" (FieldsValidation function),
for the event description I get "The event description is required" (annotation) instead of "Tell us sth about it!" (FieldsValidation function)
and the validation summary message sais "Error on creation. Please retry after corrections." instead of "Save failed. Please correct errors and retry."(FieldsValidation function)).
I tried to put a breakpoint in the FieldsValidation function, but it was never reached.
Just to make sure, I also tried to call OnBegin a function displaying an alert (after the test I restored the original call to FieldsValidation function):
function toDoOnBegin() { alert("This is onBegin"); }
The alert never displays!
If all fields are properly filled in, the event is correctly created and displayed in the event list (the other partial view). The problem is uniquely the function call OnBegin.
Please explain me what did I do wrong, did I miss to include something or what else is it?
Thank you truly.
Web.config
<appSettings>
<add key="webpages:Version" value="1.0.0.0" />
<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>
Model:
public partial class Event
{
public int client_ID { get; set; }
[Required(ErrorMessage="The event date is required")]
[DataType(DataType.Date, ErrorMessage="The event date is invalid")]
public System.DateTime event_date { get; set; }
[Required(ErrorMessage="The event place is required")]
public string event_place{ get; set; }
[Required(ErrorMessage="The event description is required")]
public string event_description{ get; set; }
}
_Layout.cshtml :
Style sheets
<link href="#Url.Content("~/Content/styles.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/nivo-slider.css")" rel="stylesheet" type="text/css" media="screen"/>
<link href="#Url.Content("~/Content/themes/redmond/jquery-ui-1.8.18.custom.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/jquery.timepicker.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/jquery.alerts.css")" rel="stylesheet" type="text/css" media="screen"/>
jQueries for datetimepicker plugin needed on several other pages
<script src="#Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.18.custom.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.ui.core.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.ui.slider.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.ui.datepicker.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.ui.datepicker-fr.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-timepicker-addon.js")" type="text/javascript"></script>
jQueries for other application components
<script src="#Url.Content("~/Scripts/jquery.alerts.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/OJscript.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.nivo.slider.pack.js")" type="text/javascript"></script>
jQueries for validation
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
Index.cshtml
#model MyApp.ViewModels.EventViewModel
#{
ViewBag.Title = "Events";
}
<div id="divUpdateable">
#Html.Partial("_Create", Model)
</div>
<div id="divList">
#Html.Partial("_ListEvents", Model.EventsList)
</div>
_Create.cshtml
#model MyApp.ViewModels.EventViewModel
<script type="text/javascript">
function FieldsValidation() {
$("#idformCreate").validate({
errorContainer: $($('div.validation-summary-errors')),
errorLabelContainer: $("ul", $('div.validation-summary-errors')),
wrapper: 'li',
errorClass: "input-validation-error2",
rules:
{
'Event.event_date':
{
required: true
},
'Event.event_place':
{
required: true
},
'Event.event_description':
{
required: true
}
},
messages:
{
'Event.event_date':
{
required: "Date is required"
},
'Event.event_place':
{
required: "Where did it take place?"
},
'Event.event_description':
{
required: "Tell us sth about it!"
}
}
}).form();
if (!$("#idformCreate").valid()) {
$("div.validation-summary-errors span").html("Save failed. Please correct errors and retry.");
return false;
}
return true;
}
</script>
#using (Ajax.BeginForm("Create", "Event", new { clientID = Model.Event.client_ID }, new AjaxOptions
{
UpdateTargetId = "divUpdateable",
OnBegin = "FieldsValidation",
InsertionMode = InsertionMode.Replace,
OnSuccess = "getForm('" + Url.Action("ListEvents", "Event", null) + "','divList')"
}, new { id = "idformCreate" }))
{
#Html.ValidationSummary(false, "Error on creation. Please retry after corrections.")
<p>#Html.ValidationMessage("_FORM")</p>
<div class="validation-summary-errors">
<span></span>
<ul>
</ul>
</div>
<fieldset style="width: 800px; line-height: 1.4em;">
<legend>Add an event</legend>
<table style="width: 100%; padding-bottom: 0; padding-top: 0; border: 0;">
<tr>
<td style="width: 90px; border: 0;">
#Html.LabelFor(model => model.Event.event_date)
</td>
<td style="width: 200px; border: 0;">
#Html.EditorFor(model => model.Event.event_date, new { #class = "date" })
#Html.ValidationMessageFor(model => model.Event.event_date, "*")
#Html.HiddenFor(model => model.Event.client_ID)
</td>
</tr>
<tr>
<td style="width: 80px; border: 0; text-align: right;">
#Html.LabelFor(model => model.Event.event_place)
</td>
<td style="width: 120px; border: 0;">
#Html.DropDownList("Event.event_place", Model.PlacesList, "Where?", new { #style = "width: 100px;" })
#Html.ValidationMessageFor(model => model.Event.event_place, "")
</td>
</tr>
<tr>
<td style="width: 90px; border: 0;">
#Html.LabelFor(model => model.Event.event_description)
</td>
<td style="width: 600px; border: 0;" colspan="5">
#Html.TextAreaFor(model => model.Event.event_description, new { #class = "input_txt_nofloat", #style = "width:590px" })
#Html.ValidationMessageFor(model => model.Event.event_description, "*")
</td>
</tr>
<tr style="height: 64px;">
<td colspan="2" style="text-align: center;">
<br />
<br />
<input type="submit" value="Save" class="submit" style="width: 280px" />
</td>
</tr>
</table>
</fieldset>
}
Here is the answer: (with a great thanks for BrockAllen)
If you are doing your own client-side validation then you should
remove jquery.validate.unobtrusive.min.js. This is MVC's client side
validation code and they will conflict if both are using
jquery.validate.
Hopefully, this will help other people too.
On begin you are calling:
OnBegin = "FieldsValidation",
If you want your alert to be displayed, then you need:
OnBegin = "toDoOnBegin"
I am using google line chart api and no matter how big i make the div chart dimentions, it always shows a horizontal and vertical scroll bar. how can i stop this from happening.
CONTEXT: editable HTML of https://code.google.com/apis/ajax/playground/?type=visualization#line_chart (using Firefox or Chorme).
Instructions for help you in the problem:
suppose you need a box with width=500px and height=400px.
check Javascript at new google.visualization.LineChart(), if the width and height inicializations are 500 and 400.
check if style of the HTML tag (perhaps div) of renderization place (id="visualization") is style="width: 800px; height: 400px;".
check if style of the HTML parent tag (any) of renderization place is bigger than 500 and 400, or is 100%.
Another solution is by "HTML cut": use overflow:hidden.
EXAMPLE OF CASE WITH SCROLL
// ... piece of your javacascript.
new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, {curveType: "function",
width: 800, height: 400,
vAxis: {maxValue: 10}}
);
} google.setOnLoadCallback(drawVisualization);
<!-- ... piece of your HTML -->
<div id="container" style="width:400px;overflow:scroll;">
<div id="visualization" style="width: 800px; height: 400px;"></div>
</div>
HTML SOLUTION (fix the container width)
<!-- ... piece of your HTML -->
<div id="container" style="width:800px;overflow:scroll;">
<div id="visualization" style="width: 800px; height: 400px;"></div>
</div>
ANOTHER SIMPLE HTML SOLUTION (use overflow:hidden)
<!-- ... piece of your HTML -->
<div id="container" style="width:400px;overflow:hidden;">
<div id="visualization" style="width: 800px; height: 400px;"></div>
</div>
... or reduce all, Javascript and HTML widths and heights, etc.
Using :
<script src="https://www.google.com/jsapi"></script>
<script>
google.load("visualization", "1", {packages:["corechart"]});
var data = new google.visualization.DataTable();
//init your data
var options = {
width: "100%", height: "100%",
//other options
}
var chart = new google.visualization.LineChart(document.getElementById('chart'));
chart.draw(data, options);
</script>
....
<body>
<div id="chart"></div>
</body>
You ensure that the graph will fit the div you're using.
Then to resize the graph set style="width: ...px; height: ...px;" with the desired size :
<body>
<div style="width: 800px; height: 400px;" id="chart"></div>
</body>