|
Hello,
I have the following file called index.html
<!DOCTYPE html>
<html>
<head>
<title>HTML 5 and SVG Test</title>
<script type="text/javascript">
document.onmousemove = MoveRectangle;
function MoveRectangle(event)
{
var rect = document.getElementById("mytestrectangle");
var ev = event || window.event;
rect.x = ev.pageX;
rect.y = ev.pageY;
alert("x" + ev.pageX + "y" + ev.pageY);
}
</script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<embed id="mysvg" src="test.svg" width="800" height="600" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/" />
</body>
</html>
and this code in another file called test.svg
<svg width="100%" height="100%"
xmlns="http://www.w3.org/2000/svg">
<rect id="mytestrectangle" width="300" height="100"
style="fill:rgb(255,0,255);stroke-width:1;
stroke:rgb(0,0,255);fill-opacity:0.9;"/>
<polygon points="0,0 100,100 170,250 20,10"
style="fill:#cccccc;
stroke:#000000;stroke-width:1"/>
</svg>
now what i am tring to do is from the file index.html try to access the element called "mytestrectangle" that is in the file test.svg. But I am incliding this file in index.html via the embed object. Is there a way I can access that element via javascript from the index.html page?
hope i expained clear what i need.
Thank you in advance for the help.
|
|
|
|
|
Well, I do not found any way to access elements that reside in
file you have used in embed tag.
However, you can access embed object as whole like
<html>
A Circle
<embed src="circle123.gif" name="circle">
A Square
<embed src="square123.gif" name="square">
<script language="JavaScript">
<!--
document.write(document.embeds.length," embedded objects.");
-->
</script>
</html>
HTH
Jinal Desai - LIVE
Experience is mother of sage....
|
|
|
|
|
|
My Pleasure.
Jinal Desai - LIVE
Experience is mother of sage....
|
|
|
|
|
The size of the image i'm using in the background for <a> element is of width:130px and height:25px. Since <a> element is within <li> and it will act as menus.
The problem is that when i run my sorce, the image gets displayed according to the contents of the <a>. How to set the background image for all <a> with width:130px and height:25px.
My html code is :
*****************
<html>
<head>
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Try Web Page</title>
<link type=text/css rel=stylesheet href=css/style.css>
</head>
<body>
<div id="container">
<div id="top">
<div id="header">Inside Header Top Container</div>
<div id="nav">
<UL>
<li><a href=#>Home</a></li>
<li><a href=#>About Us</a></li>
<li><a href=#>References</a></li>
<li><a href=#>Contact Us</a></li>
</UL>
</div>
</div>
<div id="main">
<div id="left">Inside Left Main Container</div>
<div id="right">Inside Right Main Container</div>
</div>
<div id="footer">Inside footer Container</div>
</div>
</body>
</html>
CSS Part of code is:
********************
#nav
{
text-align:center;
}
#nav ul
{
list-style-type:none;
}
#nav li
{
width:200px;
border:1px solid red;
display:inline;
}
#nav a
{
background-image:url("../images/leftlinkbg1.jpg");
background-repeat:no-repeat;
text-decoration:none;
}
|
|
|
|
|
|
Thanks Desai,
I tried with but failed.
#nav a
{
background-image:url("../images/leftlinkbg1.jpg");
background-repeat:no-repeat;
text-decoration:none;
width:130px;
height:25px.
}
is also not working.
Blinking what to do further. Also, if i download any sample which contains background-image set for html elements in external stylesheet, is working fine. But when i try to code myself the same sample set with background-image property, It is not working. IF i copy and paste the same code, it is working fine. Also when i do hand-code the sample, differences occurs from browser to browser. How to overcome it too.
M.Sworna Vidhya
|
|
|
|
|
You can't set the width or height of inline elements like <a>, so you need to add display: block. Adding float: left to the <li> makes the blocks line up horizontally, and overflow: auto in the <ul> prevents items after the list flowing to the right of it.
#nav ul
{
list-style-type: none;
overflow: auto;
}
#nav li
{
width: 200px;
border: 1px solid red;
display: block;
float: left;
}
#nav a
{
background-image: url("../images/leftlinkbg1.jpg");
background-repeat: no-repeat;
text-decoration: none;
width: 130px;
height: 25px;
display: block;
}
|
|
|
|
|
Thank you. It works for me.
M.Sworna Vidhya
|
|
|
|
|
use this javascript code, but this gives following error:
"'mappedimg' is an unexpected token. Expecting white space. Line 1, position 27."
code is here:
<body onLoad='LoadImgMap('mappedimg','cng');ChangeMappedImgSize('fitinframe','mappedimg');' onResize='LoadImgMap('mappedimg','cng');ChangeMappedImgSize('fitinframe','mappedimg');'>";
thanx in advance
|
|
|
|
|
Instead of your line try following line.
<body onLoad='LoadImgMap("mappedimg","cng");ChangeMappedImgSize("fitinframe","mappedimg");' onResize='LoadImgMap("mappedimg","cng");ChangeMappedImgSize("fitinframe","mappedimg");'>
See that I have converted all the single quote inside the outer single quote into double quote
so that it will interpret your arguments that you have passed inside the function correctly.
HTH
Jinal Desai - LIVE
Experience is mother of sage....
|
|
|
|
|
thnx for ur attention.
but it gives same 16 errors:
the error is : ;expected
and if i remove the code it gives is erron on "onResize". said : not closed
|
|
|
|
|
Now try this one. I think you have just copy pasted my code. By mistakenly I have
printed 'o' of önResize with some different language.
So you just need to replace önResize with onResize.
HTH
Jinal Desai - LIVE
Experience is mother of sage....
modified on Saturday, July 17, 2010 2:29 AM
|
|
|
|
|
When you submit a form via javascript, (it is already done), the value of Submit button is not set. I want this to be set for security reason and as good programming practice. I tried something like this, that should work but it does not.
document.hiddenform.school.value = 'My School';
document.hiddenform.submitbutton.value = 'My Submit';
document.hiddenform.submit() ;
That is I am setting value of of submit button in javascript. While "My School" text is correctly assigned to the school text field, "My Submit" text is no assigned to submit button. Any one know what is the best way to go about it? I am using link to submit form and i want the submit button to be set as well. Well actually I might go without the submit button but just curious if anyone can help in this case, just for testing.
Thanks
|
|
|
|
|
I think I solved the problem. I introduced a hidden field that acts as a button which accomplishes the purpose.
|
|
|
|
|
CodeProject is currently working with an Assistant Professor from Oregon State University to understand better the trends in Javascript development, and our Javascript articles on CodeProject itself.
The survey will ask you to identify 3 pieces of JavaScript code on the CodeProject.com website that you have tried to use, and ask you to describe whether it was easy or hard to use each piece of code.
That's it. No personally-identifiable information will be requested or shared (by Oregon State University rules), and it won't take long.
If you've got a few minutes of spare time and are a Javascript developer, then the survey is at http://experiments.eecs.oregonstate.edu/general/surveyor/[^]
CodeProject and Oregon State University thank you for your help!
Thanks,
Sean Ewington
The Code Project
|
|
|
|
|
I'm trying to create a tableless website. When using external stylesheet, the background-image property alone is not working with my external stylesheet. Other properties are working fine with the external stylesheet. I'm getting fuzzed to continue.
My external stylesheet (style.css) and is placed in folder 'css' code is:
The image is in folder 'images'.
When surfng the google with 'background-image not working in external stylesheet' i found that if we place css in different folder and made a call for an image in differnt folder we've to give mention as
background-image:url("../images/disdat-gold-red.gif");
- even this failed.
Again when searched, i found that instead of saying 'background-image' give code as follows for which they answered it worked fine. And the code is:
background: #000000 url(images/disdat-gold-red.gif) repeat-x; - even this get failed for me.
I'm attaching my html file along with my css file.
Coding part in "style.css"
#header
{
text-align:center;
font-family:arial, verdana, 'times new roman';
font-size:15pt;
font-weight:bold;
color:#0ac0af;
padding:2% 0 15% 0;
background:url(images/disdat-gold-red.gif) no-repeat;
}
HTML code is:
<html>
<head>
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Try Web Page</title>
<link type=text/css rel=stylesheet href=css/style.css>
</head>
<body>
<div id="container">
<div id="top">
<div id="header">Inside Header Top Container</div>
<div id="nav">Inside Nav Top Container</div>
</div>
<div id="main">
<div id="left">Inside Left Main Container</div>
<div id="right">Inside Right Main Container</div>
</div>
<div id="footer">Inside footer Container</div>
</div>
</body>
</html>
M.Sworna Vidhya
|
|
|
|
|
I tried your code it is working here fine at my end.
Keep the images in image folder.
Keep style sheet file in css folder.
Both of these folders (image and css) should be
at the same level of your folder hierarchy.
Now when you are referring image file try to refer it as follows.
background-image:url("../images/disdat-gold-red.gif");
HTH
Jinal Desai - LIVE
Experience is mother of sage....
|
|
|
|
|
Thank you, desai. Now it works for me.
|
|
|
|
|
My Pleasure.
Jinal Desai - LIVE
Experience is mother of sage....
|
|
|
|
|
Make all of your references relative to the root (start with /). Or use a base tag.
|
|
|
|
|
Hello Friends
I am using object tag in .html file and getting its Id in javascript code bu using document.getElemenById("view");
When I run in IE,it is returning the exact element.
but when I run the same in Firefox then It is just returning Object html Element.Now the exact elemt whose Id i am passing.
Do I need to change some internet option for browser or do I ned to change in java script code to get exact element.
Thanks In Advance.
Regards
Yogesh
|
|
|
|
|
Try following options..
window.document["objectid"]
window.document.objectid
document.embeds.objectid
document.embeds["objectid"]
document.getElementsByName("objectid")[0]
Refer this[^] link for more information and understanding.
HTH
Jinal Desai - LIVE
Experience is mother of sage....
|
|
|
|
|
Thanks A LOt Mr. Desai.
Very Helpful for me.Thanks Once again.![Rose | [Rose]](https://www.codeproject.com/script/Forums/Images/rose.gif)
Regards
Yogesh
|
|
|
|
|
My Pleasure.
Jinal Desai - LIVE
Experience is mother of sage....
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
