We help IT Professionals succeed at work.

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

Enflow
Enflow asked
on
330 Views
Last Modified: 2011-09-28
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
Comment
Watch Question

Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

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

Author

Commented:
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">
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
try
<div style="position:absolute; left:550px; top:190px; z-index:10">

but whay not add it to the menu?
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
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

Author

Commented:
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

??

Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
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
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
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;

Author

Commented:
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



Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
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
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
or

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

Author

Commented:
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


Author

Commented:
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...
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
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

Author

Commented:
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;

Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
You can make a sub menu like the others.

It was just to show you

Author

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

Author

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

 }

IT Expert
CERTIFIED EXPERT
Top Expert 2009
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION

Author

Commented:
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*
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
<blush />
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.