AJAX

Hyperlink a div

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

Thread Solved

•

Join Date: Sep 2005

Posts: 1,075

Reputation: digital-ether is just really nice

Solved Threads: 66

digital-ether digital-ether is offline

Offline

Veteran Poster

Re: Hyperlink a div

#11

Oct 30th, 2006

•

Originally Posted by MattEvans

any better solutions..? o_O

EDIT: bah... that doesn't work though! who decided you can't have hyperlinked anchors in buttons? as i'm overriding the button graphical style anyway, i guess i can just emulate it with a div... i have to use JS to toggle the edges and padding to give a "clicked" appearance... but at least i don't have JS depandant functionality...

another solution.. is to absolutely place another form and button next to the submit button and use the form action... methinks that's messier.

Not really sure what you want...
But wouldn't [HTML]<a href="#" target="_blank"><input type="button" /></a>[/HTML] work for you?
(You may have to define height and width for IE though).

If you're going to emula

te buttons with DIVs you'll definately have to do it will all buttons as you don't know what a button looks like on differnet platforms and browsers. But then you'll have to rely on JS to submit the form, and you dont what that.

You could probably just do something like:

[HTML]<form name="real_form" ...>

<form target="blank" action="page_you_wanna_open.html">
<input type="submit" ... />
</form>

...

<input type="submit" name="real_submit" ... />

</form>[/HTML]

I don't think theres anything wrong with nesting forms?

Edit:

Or (but kinda ugly):

[HTML]<form name="real_form" ...>

...

<input type="submit" name="real_submit" ... />

</form>

<form target="blank" action="page_you_wanna_open.html">
<input class="link_button" type="submit" ... />
</form>

[/HTML]

[HTML]

<style>

input.link_button {
margin-top: = -[height of SUBMIT BUTTON]px;
margin-left: = [width of SUBMIT BUTTON plus your padding...]px
}

</style>

[/HTML]

Last edited by digital-ether; Oct 30th, 2006 at 9:53 am.

www.fijiwebdesign.com - web design and development and fun
Cpanel Email - Let users Register email accounts on your website upon registration
Ajax Chat - Fully browser based chat!

•

Join Date: Dec 2004

Posts: 1,655

Reputation: tgreer is an unknown quantity at this point

Solved Threads: 35

tgreer

Offline

Made Her Cry

Re: Hyperlink a div

#12

Oct 30th, 2006

This entire discussion is very amusing. In short, you have to use JavaScript for most of the questions in this thread. There is no reason not to do so, either. If you want a real-world solution, don't impose silly restrictions. This is like saying "I need directions from my business to yours, but I'll only take left turns".

•

Join Date: Oct 2006

Posts: 214

Reputation: SnowDog is an unknown quantity at this point

Solved Threads: 8

SnowDog

Offline

Posting Whiz in Training

Re: Hyperlink a div

#13

Oct 30th, 2006

What's even more funny is that the solution I provided - and which appears to be totally invisible to everyone - does not include any javascript (thank you very much), gives you an 'animated' button if you want it, and makes a whole div into a link as per the original question (I think).

Let me simplify it:[php]
<div CLASS="divname" onmouseover="style.backgroundColor='#FFFFFF';
this.style.cursor='pointer'" onmouseout="style.backgroundColor=''#000000"
onmouseup="somepage.htm"></div>[/php]This creates a div which is white when you point at it and black when you don't, and the whole thing links to somepage.htm.

No Javascript and no anchor tags.

Last edited by SnowDog; Oct 30th, 2006 at 10:54 am.

•

Join Date: Dec 2004

Posts: 1,655

Reputation: tgreer is an unknown quantity at this point

Solved Threads: 35

tgreer

Offline

Made Her Cry

Re: Hyperlink a div

#14

Oct 30th, 2006

Well, all the mouse event handlers are just that: event handlers. The events are provided by JavaScript. Also, the "style." is a reference to the DOM, and again is JavaScript. So while you may not have written any JavaScript functions, or put anything inside of script tags, your solution DOES use JavaScript. My point is, though: that's perfectly fine.

Last edited by tgreer; Oct 30th, 2006 at 10:56 am.

•

Join Date: Jul 2006

Posts: 1,091

Reputation: MattEvans is a jewel in the rough

Solved Threads: 63

MattEvans

Offline

Veteran Poster

Re: Hyperlink a div

#15

Oct 30th, 2006

•

Not really sure what you want...
But wouldn't
HTML Code:
<a href="#" target="_blank"><input type="button" /></a>

work for you?
(You may have to define height and width for IE though).

nope, not with my doctype anyway (transitional)

•

I don't think theres anything wrong with nesting forms?

yerp, there is. it seems the action is taken from the first form.

i didn't use any absolute positioning in the end, i let the button in the form float, and the second button (in a floating form) fits right in there [on either side, depending on the float direction]. it only works if both forms have margin-top:0px and margin-bottom:0px.

•

This entire discussion is very amusing. In short, you have to use JavaScript for most of the questions in this thread. There is no reason not to do so, either. If you want a real-world solution, don't impose silly restrictions. This is like saying "I need directions from my business to yours, but I'll only take left turns".

well. not everyone has js available or enabled; and it's not very well standardised. i prefer to keep all neccessary functions outside of javascript, and use it for effects only.. i write pages with js dependant things hidden by default... then, if js can work, it shows all of those things, otherwise; the user doesn't even know what (or even what it is) that they're missing.

still, a browser that doesn't support JS probably doesn't support CSS either..

Plato forgot the nullahedron..

•

Join Date: Dec 2004

Posts: 1,655

Reputation: tgreer is an unknown quantity at this point

Solved Threads: 35

tgreer

Offline

Made Her Cry

Re: Hyperlink a div

#16

Oct 30th, 2006

JavaScript is of course standardized. What confuses many is that it's a scripting language, so interacts with the underlying DOM, and that each doctype has its own DOM. Morever, JavaScript is used with other, non-HTML DOMs as well, such as Acrobat. However, the language itself is standardized.

I've been a web developer since the web's inception, and coded EDI and BBS systems prior to that... in all that time, in all the systems I've written or been involved with, there has never been a situation where we had to code around a "non-JavaScript" user. Not once.

So while I am absolutely all for people developing their own coding standards and best practices, I would recommend spending zero time worrying about "non-JavaScript" users.

•

Join Date: Jul 2006

Posts: 1,091

Reputation: MattEvans is a jewel in the rough

Solved Threads: 63

MattEvans

Offline

Veteran Poster

Re: Hyperlink a div

#17

Oct 30th, 2006

•

JavaScript is of course standardized. What confuses many is that it's a scripting language, so interacts with the underlying DOM, and that each doctype has its own DOM. Morever, JavaScript is used with other, non-HTML DOMs as well, such as Acrobat. However, the language itself is standardized.

ah, you got me there, but the ramifactions are a consideration; however small.

it's not just doctype aswell, different browsers need to be considered regardless of doctype.. non-browser-dependant js code is usually quite messy looking at the very least.

for me it's a very small consideration; because i minimize the importance of js code

if i scripted a site entirely in js, it would be a bigger consideration, as some people are absolutely nuerotic about their security online, and disabling js isn't difficult.

admittadly though, it isn't as likely as someone not having flash installed/enabled, or not having an up-to-date version of java.

•

there has never been a situation where we had to code around a "non-JavaScript" user. Not once.

not to deliberately perpetuate the, already well-perpetuated js-fear.. but you wouldn't neccessarily know the amount of non-js user's who couldn't use your company/ies, or client(s) sites if elements of those sites were totally js dependant.

for the most part, users go elsewhere when things don't work as expected, regardless of whether the problem's on a page, or with a security setting.. and almost anything that's functionally js-dependant doesn't need to be..

to me, that seems to need zero-consideration as to how to do something that may be important to standard flow, such as setting a hyperlink on something.

edit: although, that zero consideration ends up causing stoopidly large considerations sometimes; made annoying by the fact that one embedded line of JS would solve an otherwise difficult problem instantly and cleanly.

Last edited by MattEvans; Oct 30th, 2006 at 1:49 pm.

Plato forgot the nullahedron..

•

Join Date: Jul 2005

Posts: 154

Reputation: katarey is an unknown quantity at this point

Solved Threads: 20

katarey

Offline

Junior Poster

Re: Hyperlink a div

#18

Oct 30th, 2006

•

Originally Posted by cscgal

Is it possible to make an entire <div> into a hyperlink using CSS only, as can be easily accomplished with mouse events in JavaScript? I'm assuming it's too good to be true since CSS isn't interactive? Nevermind ... I guess I just answered my own question

Hi,

Sorry to replay even this Question is solved

But my view this may done by this way also "100% CSS"

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
 
<!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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#adbar
		{
			margin: 0 0 0 0;
			padding: 0px;
			height:400px;
			background-color:#eeeeee;
			border-right: 1px solid #ccc;
			border-bottom: 1px solid #ccc;
			display:block;
		}
.adbar_links
		{
			display:block;
			height:100%;
			width:100%; 
			background-color:#eeeeee;
                        text-decoration:none;
		}
a.adbar_links:active, a.adbar_links:visited
		{
			display:block;
			height:100%;
			width:100%; 
			background-color:#cccccc;
                        text-decoration:none;
		}
a.adbar_links:hover
		{
			display:block;
			height:100%;
			width:100%; 
			background-color:#00ff00;
                        text-decoration:none;
		}
-->
</style>
</head>
<body>
<div id="adbar" ><a href="#" class="adbar_links">&nbsp;</a></div>
</body>
 
</html>
<!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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#adbar
		{
			margin: 0 0 0 0;
			padding: 0px;
			height:400px;
			background-color:#eeeeee;
			border-right: 1px solid #ccc;
			border-bottom: 1px solid #ccc;
			display:block;
		}
.adbar_links
		{
			display:block;
			height:100%;
			width:100%; 
			background-color:#eeeeee;
                        text-decoration:none;
		}
a.adbar_links:active, a.adbar_links:visited
		{
			display:block;
			height:100%;
			width:100%; 
			background-color:#cccccc;
                        text-decoration:none;
		}
a.adbar_links:hover
		{
			display:block;
			height:100%;
			width:100%; 
			background-color:#00ff00;
                        text-decoration:none;
		}
-->
</style>
</head>
<body>
<div id="adbar" ><a href="#" class="adbar_links">&nbsp;</a></div>
</body>

</html>

Rahul

Last edited by katarey; Oct 30th, 2006 at 3:11 pm.

Freelance Web Designer & Developer
Http//www.Katarey.com

•

Join Date: Sep 2005

Posts: 1,075

Reputation: digital-ether is just really nice

Solved Threads: 66

digital-ether digital-ether is offline

Offline

Veteran Poster

Re: Hyperlink a div

#19

Oct 31st, 2006

I've learned more about CSS in the above then I have in the last month! Thanks dude..

Edit:

Then again, I haven't read a single bit of CSS in the last month. lol.

Last edited by digital-ether; Oct 31st, 2006 at 9:21 am.

www.fijiwebdesign.com - web design and development and fun
Cpanel Email - Let users Register email accounts on your website upon registration
Ajax Chat - Fully browser based chat!