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.
Related
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.
I was trying to crawl a website which has badly formatted HTML web pages. Take some web page as an example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="keywords" content="physician, doctor, CME, CE, physician job recuiter, Chinese speaking doctors, medical school alumni," />
<meta name="description" content="An online database for physicians who obtained medical degree in China and are practicing in USA. It contains over 6,000 profiles. Email:admin#cmgforum.net for any question." />
<title>
CMG Physician Database - 华人医生数据库
</title>
<link rel="stylesheet" type="text/css" href="default.css" />
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-27283808-3']);
_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>
<script type="text/javascript">
function validateForm()
{
valid = true;
if ( document.myForm.last.value == "" )
{
alert ( "Last name is required" );
valid = false;
}
else if ( document.myForm.first.value == "" )
{
alert ( "First name is required" );
valid = false;
}
else if ( document.myForm.states.value == "" )
{
alert ( "State is required" );
valid = false;
}
else if ( document.myForm.specialty_id.value == "" )
{
alert ( "Specialty is required" );
valid = false;
}
else if ( document.myForm.gradschool_id.value == "" )
{
alert ( "School is required" );
valid = false;
}
return valid;
}
</script>
<script type="text/javascript">
if (screen.width<800) {
window.location="http://physician.cmgforum.net/m/";
}
</script>
<script language="JavaScript"
type="text/JavaScript">
function changePage(newLoc)
{
nextPage = newLoc.options[newLoc.selectedIndex].value
if (nextPage != "")
{
document.location.href = nextPage
}
}
</script>
</head>
<body>
<div id="outer">
<div id="upbg"></div>
<div id="inner">
<div id="header">
<embed src="flash/cmglogo.swf" width="685" Height="90">
</div>
<div id="menu">
<center>
<ul>
<li>Home</li>
<li>Combo Search</li>
<li>Name</li>
<li>Schools</li>
<li>Specialties</li>
<li>Local Specialties</li>
<li>States</li>
<li>Cities</li>
</center>
</div>
<table width="100%">
<tr>
<td width="2%"></td>
<td>
<form method="POST" name="menu" >
<select name="selectedPage"
onChange="changePage(this.form.selectedPage)">
<option value = "" selected>Site Navigation</option>
<option value = "/index.php">Home</option>
<option value = "/facilities.php"> Medical Facilities</option>
<option value = "/stats-d.php">Statistics</option>
<option value = "/contact.php">Contacts</option>
<option value = "/top5.php">The Top5</option>
<option value = "http://blog.cmgforum.net">Blog</option>
<option value = "/links.php">Links</option>
<option value = "/addme.php">Add Me</option>
<option value = "/news.php">News</option>
<option value = "/faq.php">FAQ</option>
<option value = "/pop-d.php">人气</option>
<option value = "/pgy-d.php">PGY</option>
<option value = "/video2-d.php">CMG Videos</option>
<option value = "/url.php">CMG Website</option>
</select>
</form>
</td>
<td>
<script type="text/javascript"><!--
google_ad_client = "ca-pub-6867265085889194";
/* header-links */
google_ad_slot = "9503010667";
google_ad_width = 468;
google_ad_height = 15;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</td>
</tr></table>
</body>
</html>
<center>
<table><tr>
<td width="5%"></td>
<td>
<center>
<script type="text/javascript"><!--
google_ad_client = "pub-6867265085889194";
/* 468x60, created 8/19/10 */
google_ad_slot = "1699885909";
google_ad_width = 400;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</center>
</td>
<td>
<img src="images/code.jpg" alt="QR Code" height="60" width="60">
</td>
</tr></table>
</center>
<!---
<marquee ALIGN="Top" LOOP="infinite" BGCOLOR="#FFFFFF" DIRECTION="left" HEIGHT=16 WIDTH=640 scrollamount="3" scrolldelay="1"><FONT SIZE="3" FACE="courier" COLOR=blue>
第三届健桥医学峰会即将在波士顿召开, 更多的信息请点击这里！
</font></marquee>
--->
<table width="100%" style="text-shadow: 1px 1px 3px #999;"><tr><td width="3%"></td><td width="16%">Allergy & Immunology(20)<br>Anesthesiology(595)<br>Cardiology(129)<br>Dentistry(437)<br>Dermatology(29)<br>Emergency Medicine(8)<br>Endocrinoloy(60)<br>Family Practice(434)<br>Gastroenterology(88)<br>General Surgery(94)<br>Geriatric Medicine(48)<br>Hem/Onc(295)<br>Infectious Disease(12)<br>Internal Medicine(1880)<br>Medical Genetics(47)<br><br></td><td width="3%"></td><td width="16%">Nephrology(114)<br>Neurology(333)<br>Neurosurgery(11)<br>OB/GYN(83)<br>Occupational Med(33)<br>Ophthalmology(63)<br>Optometry(28)<br>Orthopaedics(18)<br>Otolaryngology(10)<br>Pathology(1235)<br>Pediatrics(300)<br>Pediatric Hem/Onc(8)<br>Pediatric Cardiology(9)<br>Pediatric GI(9)<br>Pediatric Neurology(13)<br><br></td><td width="3%"></td><td width="17%">Pediatric Endocrinology(10)<br>Pediatric Rheumatology(2)<br>Pediatric Allergy(Immu)(5)<br>Plastic Surgery(5)<br>Psychiatry(319)<br>Pulmonary Disease(30)<br>Radiation Oncology(54)<br>Diag Radiology(Nuclear)(156)<br>Rehabilitation(216)<br>Sports Medicine(2)<br>Rheumatology(43)<br>Thoracic Surgery(17)<br>Urology(12)<br>Add New Specialty<br>Add New Specialty<br><br></td><td width="3%"></td><td width="20%"><script type="text/javascript"><!--
google_ad_client = "ca-pub-6867265085889194";
/* spe-120-240 */
google_ad_slot = "2416199460";
google_ad_width = 120;
google_ad_height = 240;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<br>
</td></tr></table><div id="top5">
<html>
<head>
<link rel="stylesheet" type="text/css" href="default.css" />
</head>
<body>
<center>
<div id="ad">
<script type="text/javascript"><!--
google_ad_client = "pub-6867265085889194";
/* 728x90, created 8/26/10 */
google_ad_slot = "7083487992";
google_ad_width = 715;
//google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
</center>
</body>
</html>
</div>
<center>
<table border="0" BORDERCOLOR=orange><tr>
<td><div style="padding: 2px; border: 1px red solid;"></div></td>
<td><img src="http://physician.cmgforum.net/images/wikilips.jpg" border="1" width="160" height="80"></td>
<td><img src="http://physician.cmgforum.net/images/MedicalCareer_150x65.gif" border="1" width="170" height="80"></td>
<td><img src="http://physician.cmgforum.net/images/scan.JPG" border="0" width="80" height="80">
<img src="http://physician.cmgforum.net/images/qrcode.png" border="0" width="80" height="80">
</td>
</tr></table>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>terrafirma1.0 by nodethirtythree</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" type="text/css" href="default.css" />
</head>
<body>
<center>
<div id="footer">
© copyright 2007 cmgforum.net. all rights reserved.
Contact: admin#cmgforum.net
</div>
</div>
</div>
</body>
</html>
As we can see from this, there are two root elements here. In such case, Scrapy can't parse the XPath correctly. Any ideas how to handle this?
When you face malformed HTML pages, try to generalize your xpaths since the browser and scrapy don't interpret the page in the same way. In this case, if you want to extract the list of links in the table, try an xpath like this:
//tr//td//a[contains(#href,'/specialty/')]
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; }
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.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function show1() {
document.getElementById("img1").display = 'block';
}
function hide1() {
document.getElementById("img1").display = 'none';
}
</script>
</head>
<body>
<span onMouseOver="show1()" onMouseOut="hide1()">Corporate Team Outing - LNT</span>
<div id="img1" style="display:none">
<img src="" alt="image 1" />
<img src="" alt="image 2" />
</div>
</body>
</html>
i want that when u put mouse on text it show image in div i m trying to do it but it not working.
Forget javascript for this one! CSS is the answer. Put a hover state on ID:img1 and the images inside the div (if u don't do the latter, mousing over the images will cancel out the div mouse over. So it will look like this (not inline styles due to mouse over states declaration):
#img1 {
Background-image: none;
}
#img1:hover, img1:hover img {
Background-image: url(your URL);
}
You could change the IDs to classes, so the CSS can be reused and keep the IDs for coding (javascript etc)