Web Development

Access an element that is present in a embed object

18-Jul-10 22:36

Hi ahmad25,

Just try little googling[^] you will surely get very good answer easily.

Because it is very common scenario to achieve.

HTH

Jinal Desai - LIVE
Experience is mother of sage....

cdpace17-Jul-10 6:47

cdpace

17-Jul-10 6:47

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.

Re: Access an element that is present in a embed object

Peace ON18-Jul-10 22:14

Re: Access an element that is present in a embed object

18-Jul-10 22:14

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.");
//or you can access specific element like
//if you want to access embed object circle then you can use
//document.embeds[0] or document.embeds["circle"]
-->
</script>
</html>

HTH

Jinal Desai - LIVE
Experience is mother of sage....

cdpace20-Jul-10 21:12

cdpace

20-Jul-10 21:12

thx

Re: Access an element that is present in a embed object

Peace ON21-Jul-10 19:51

21-Jul-10 19:51

My Pleasure.

Jinal Desai - LIVE
Experience is mother of sage....

Problem with menu image

swornavidhya_m16-Jul-10 21:20

16-Jul-10 21:20

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;
}

Peace ON16-Jul-10 22:29

Jinal Desai - LIVE
Experience is mother of sage....

16-Jul-10 22:29

The answer is in your question itself.
I have modified your code as below.

#nav a
{
    background-image:url("../images/leftlinkbg1.jpg");
    background-repeat:no-repeat;
    text-decoration:none;
    width:130px;
    height:25px;
}

The above solution is only for the situation if you want to fix size of all the that is
coming under nav. And consider one point that the height and width is applied to only those
elements which has image binded line #nav a.

HTH

swornavidhya_m18-Jul-10 19:13

18-Jul-10 19:13

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

Graham Breach18-Jul-10 22:03

Graham Breach

18-Jul-10 22:03

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;
}

swornavidhya_m19-Jul-10 0:19

Re: java script code error

19-Jul-10 0:19

Thank you. It works for me.

M.Sworna Vidhya

java script code error

varsh1216-Jul-10 19:35

varsh12

16-Jul-10 19:35

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

Peace ON16-Jul-10 19:46

Re: java script code error

16-Jul-10 19:46

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....

varsh1216-Jul-10 20:14

varsh12

16-Jul-10 20:14

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

Re: java script code error [modified]

Peace ON16-Jul-10 20:20

javascript : submit for via link + "retrieving value of submit button"

16-Jul-10 20:20

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

sharp_k16-Jul-10 12:02

sharp_k

16-Jul-10 12:02

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

Re: javascript : submit for via link + "retrieving value of submit button"

sharp_k16-Jul-10 12:15

sharp_k

16-Jul-10 12:15

I think I solved the problem. I introduced a hidden field that acts as a button which accomplishes the purpose.

Survey request for Javascript Developers

Sean Ewington16-Jul-10 5:46

Sean Ewington

16-Jul-10 5:46

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

Background-image not working in external stylesheet

swornavidhya_m16-Jul-10 3:40

Re: Background-image not working in external stylesheet

16-Jul-10 3:40

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

Peace ON16-Jul-10 4:04

Re: Background-image not working in external stylesheet

16-Jul-10 4:04

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....

swornavidhya_m16-Jul-10 18:14

Re: Background-image not working in external stylesheet

16-Jul-10 18:14

Thank you, desai. Now it works for me.

Peace ON23-Jul-10 19:09