Link to home
Start Free TrialLog in
Avatar of Enflow
EnflowFlag for United States of America

asked on

How do i Positon a Hyperlink on a page at an exact point using JavaScript

How do i Positon a Hyperlink on a page at an exact place using JavaScript

i need it down about 3 inches from the top - over 4 inches, etc..

what is the best way to do this...

even if that position was on top of an image... need a x,y,z coordinate...

cj
Avatar of Michel Plungjan
Michel Plungjan
Flag of Denmark image

<div style="position:absolute; left:200px; top:300px"><a href="....">Here</a></div>
Avatar of Enflow

ASKER

thank you for taking the time to make a suggestion...

Here is the page i am posting it too...

http://www.tapereader.net/index2.html

refresh the page and look VERY QUICKLY and will see that i have placed a hyperlink on it using your method (the subscribe word in green)
but a javascript produced image bar covers it?... what i am trying to do is place a hyperlink onto that DARK green bar area that has
the javascript drop down menus on it... right exactly in linline with them (the javaS menus)

i added to my page source per your suggestion...
</head>
<BODY BGCOLOR="#FFFFFF" background="picts/background-main.gif" TEXT="#000000" LINK="#339966" VLINK="#663399" ALINK="#666666" leftmargin="0" rightmargin="0" topmargin="0" bottommargin="0" marginheight="0" marginwidth="0">
<div style="position:absolute; left:550px; top:190px"><a href="subscribe.aspx?type=Active">Subscribe</a></div>
<!-- PAGE TABLE-->
<TABLE cellpadding="0" cellspacing="0" border="0" width="100%" height="100%"><tr><td ALIGN="LEFT" VALIGN="TOP">
try
<div style="position:absolute; left:550px; top:190px; z-index:10">

but whay not add it to the menu?
You already have subscribe:
Top_Width[3]=100; Sub_Menu_Width[3]=110;
m[3]='Subscriptions';n[3]='index2.html';st[3]="";s[3]=""
+l+"subscribe.aspx?type=Active"+r+" Subscribe "+c
+l+"subscribe.aspx?type=Free 14 Day Trial"+r+" Free 14 Day Trial "+c

Avatar of Enflow

ASKER

how do i do that...

the dropDn menu bar is created by a menu.js page that creates all the header and
sub sections and when i TRY to add something to that javascript created sub menu it does not work...

here is the menu.js copied over to menu.txt so you can see it...

http://www.tapereader.net/menu.txt

??

I see no problem

Top_Width[3]=100; Sub_Menu_Width[3]=110;
m[3]='Subscriptions';n[3]='index2.html';st[3]="";s[3]=""
+l+"subscribe.aspx?type=Active"+r+" Subscribe "+c
+l+"subscribe.aspx?type=bla1"+r+" Bla di bla "+c
+l+"subscribe.aspx?type=bla2"+r+" another free trial "+c
And here is how to add it as a new menu

Top_Width[5]=125;Sub_Menu_Width[5]=100;
m[5]='Subscribe';n[5]='index3.html';st[5]="";s[5]=""
+l+"subscribe.aspx?type=Bla"+r+" Subscribe "+c



// IF YOU ADD ANOTHER TOP LEVEL MENU YOU MUST ADD TO THE BOTTOM OF THIS LIST

ADJ[0]=MFL;
ADJ[1]=(Top_Width[0])+MFL;
ADJ[2]=(Top_Width[0]+Top_Width[1])+MFL;
ADJ[3]=(Top_Width[0]+Top_Width[1]+Top_Width[2])+MFL;
ADJ[4]=(Top_Width[0]+Top_Width[1]+Top_Width[2]+Top_Width[3])+MFL;
ADJ[5]=(Top_Width[0]+Top_Width[1]+Top_Width[2]+Top_Width[3]+Top_Width[4])+MFL;

Avatar of Enflow

ASKER

yes, i don't seem to type as fast as you...

i already created 2 of those menus just fine - that is a walk in the park... but

what i am trying to do is get the submenu link - the subscribe.aspx? - to OPEN with var values...
so if i enter the following...

"subscribe.aspx?type=Active Subscription"onClick="window.open('http://www.tapereader.net/subscribe.aspx?type=Active Subscription','Subscribe','toolbar=no,menubar=no,status=no,resizable=no,scrollbars=no,width=875,height=250,screenX=100,screenY=150,left=100,top=150')

it does not load any menus at all so it barfs on that line



Close to impossible since the dynamic writing uses all available quotes.
And you cannot hijack the onClick just by not making a space

try this instead

function winOpen(url) {
   window.open(url,'_blank','width=875,height=250,screenX=100,screenY=150,left=100,top=150')
}

+l+"javascript:winOpen(\'subscribe.aspx?type=Active\')"+r+" Subscribe "+c
or

+l+"javascript:void(winOpen(\'subscribe.aspx?type=Active\'))"+r+" Subscribe "+c
Avatar of Enflow

ASKER

i think we are defintely closer...

both code strings CAUSED no page load barfing and the menus did form and display but the winOpen function event did not fire for either one when i clicked on it
but the status bar shows...

javascript:winOpen(       //for the first suggestion)

the status bar shows...
javascript:void(winOpen(    //for the second suggestion

anything i can do to help debug or code this please suggest... i am like a hungry dog with a bone...

http:www.tapereader.net/menu.js

cj


Avatar of Enflow

ASKER

Is there a way inside the .js page to document write a hyperlink to show up next to the last drop down menu - this is why my original question was about
placing a hyperlink at an absolute postion... just needs to be done in the menu.js page so it shows up next to the last java script start menu...
Here you are

urls=new Array(
"http://www.google.com",
"http://www.msn.com",
"http://www.irt.org"
);

function winOpen(urlIdx)
{
   window.open(urls[urlIdx],'_blank','width=875,height=250,screenX=100,screenY=150,left=100,top=150')
}


and then you can have

Top_Width[5]=80;Sub_Menu_Width[5]=40;
m[5]='PopUp';n[5]='javascript:winOpen(0)';st[5]="";s[5]=""



// IF YOU ADD ANOTHER TOP LEVEL MENU YOU MUST ADD TO THE BOTTOM OF THIS LIST

ADJ[0]=MFL;
ADJ[1]=(Top_Width[0])+MFL;
ADJ[2]=(Top_Width[0]+Top_Width[1])+MFL;
ADJ[3]=(Top_Width[0]+Top_Width[1]+Top_Width[2])+MFL;
ADJ[4]=(Top_Width[0]+Top_Width[1]+Top_Width[2]+Top_Width[3])+MFL;
ADJ[5]=(Top_Width[0]+Top_Width[1]+Top_Width[2]+Top_Width[3]+Top_Width[4])+MFL;



use winOpen(1) for link number 2 and so on
Avatar of Enflow

ASKER

Hi MP...

Well, we are definitely getting closer...

it didn't make hyperlink but it did make a new menu called PopUp and that did not have any
links under it but it DID pop up in a re-sized window with no chrome...

page in question... with changes
http://www.tapereader.net/index2.html

here is the js menu page which i did setup per your above instructions... pretty sure i got it right...
http://www.tapereader.net/menu.js

*******************************************************************
urls=new Array(
"http://www.google.com",
"http://www.msn.com",
"http://www.irt.org"
);

function winOpen(urlIdx)
{
   window.open(urls[urlIdx],'_blank','width=875,height=250,screenX=100,screenY=150,left=100,top=150')
}


Top_Width[5]=80;Sub_Menu_Width[5]=40;
m[5]='PopUp';n[5]='javascript:winOpen(0)';st[5]="";s[5]=""
m[5]='PopUp';n[5]='javascript:winOpen(1)';st[5]="";s[5]=""
m[5]='PopUp';n[5]='javascript:winOpen(2)';st[5]="";s[5]=""

// IF YOU ADD ANOTHER TOP LEVEL MENU YOU MUST ADD TO THE BOTTOM OF THIS LIST

ADJ[0]=MFL;
ADJ[1]=(Top_Width[0])+MFL;
ADJ[2]=(Top_Width[0]+Top_Width[1])+MFL;
ADJ[3]=(Top_Width[0]+Top_Width[1]+Top_Width[2])+MFL;
ADJ[4]=(Top_Width[0]+Top_Width[1]+Top_Width[2]+Top_Width[3])+MFL;
ADJ[5]=(Top_Width[0]+Top_Width[1]+Top_Width[2]+Top_Width[3]+Top_Width[4])+MFL;

You can make a sub menu like the others.

It was just to show you

Avatar of Enflow

ASKER

Oh, Ok, let me re - look at it... since i was excited something popped up and was re sized...
Avatar of Enflow

ASKER

GOT IT GOT IT GOT IT - Man So Frikin Cool... Far Out... Oh, Mama, Hit Me With A Silly Stick...

Now just one last thing... trying to create a select case statement to open the each of the windows to thier
own vars...

this select case not working - if this is even the way i should go?

my Urls setup is... as per yer post...
urls=new Array(
"http://www.tapereader.net/login.aspx",
"http://www.tapereader.net/subscribe.aspx?type=Active",
"http://www.tapereader.net/subscribe.aspx?type=Free 14 Day Trial",
"http://www.tapereader.net/preferences.aspx?type=Active"
);

my slect case statement inside our winOpen function...

function winOpen(urlIdx)
 {
   switch (urlIdx)
   {
     case '0': window.open(urls[urlIdx],'_blank','width=200,height=200,screenX=275,screenY=100,left=275,top=100')
                         break;
     case '1': window.open(urls[urlIdx],'_blank','width=300,height=400,screenX=275,screenY=100,left=275,top=100')
                         break;
     case '2': window.open(urls[urlIdx],'_blank','width=500,height=500,screenX=275,screenY=100,left=275,top=100')
                         break;
     case '3': window.open(urls[urlIdx],'_blank','width=600,height=600,screenX=275,screenY=100,left=275,top=100')
               break;
   }

 }

ASKER CERTIFIED SOLUTION
Avatar of Michel Plungjan
Michel Plungjan
Flag of Denmark image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Enflow

ASKER

Best Answer - mplungjan
Best Assist - mplungjan
MVP - mplungjan
Best Substitution - mplungjan
Best Comeback - mplungjan
Cleanest Code - mplungjan
Quickest Answer - mplungjan
Clearest Comments - mplungjan

And Honorable Mention goest to - mplungjan

and finally a thanks to mplungjan for his help...

hope i gave enough points - this is my first time using EEchange...

if not let me know... like i know what i am doing here...

hope i was not to much of a dull head...

Chris James...
*removed by Netminder 2 Sept 2005*
<blush />