•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 397,515 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,757 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting
Views: 12499 | Replies: 19 | Solved
 |
•
•
Join Date: Sep 2005
Posts: 660
Reputation: 
Rep Power: 5
Solved Threads: 38
Practically a Master Poster
Re: Hyperlink a div •
•
•
•
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 8: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!
Cpanel Email - Let users Register email accounts on your website upon registration
Ajax Chat - Fully browser based chat!
•
•
Join Date: Dec 2004
Posts: 1,590
Reputation:
Rep Power: 7
Solved Threads: 34
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:
Rep Power: 2
Solved Threads: 7
Posting Whiz in Training
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.
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 9:54 am.
•
•
Join Date: Dec 2004
Posts: 1,590
Reputation:
Rep Power: 7
Solved Threads: 34
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 9:56 am.
•
•
Join Date: Jul 2006
Location: Deptford, London
Posts: 941
Reputation:
Rep Power: 5
Solved Threads: 47
Posting Shark
•
•
•
•
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..
If it only works in Internet Explorer; it doesn't work.
•
•
Join Date: Dec 2004
Posts: 1,590
Reputation:
Rep Power: 7
Solved Threads: 34
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.
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
Location: Deptford, London
Posts: 941
Reputation:
Rep Power: 5
Solved Threads: 47
Posting Shark
•
•
•
•
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 12:49 pm.
If it only works in Internet Explorer; it doesn't work.
•
•
Join Date: Jul 2005
Location: india
Posts: 143
Reputation:
Rep Power: 4
Solved Threads: 15
Junior Poster
•
•
•
•
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"
<!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"> </a></div>
</body>
</html>
Rahul
Last edited by katarey : Oct 30th, 2006 at 2:11 pm.
Freelance Web Designer & Developer
Http//www.Katarey.com
Http//www.Katarey.com
•
•
Join Date: Sep 2005
Posts: 660
Reputation:
Rep Power: 5
Solved Threads: 38
Practically a Master Poster
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.
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 8: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!
Cpanel Email - Let users Register email accounts on your website upon registration
Ajax Chat - Fully browser based chat!
|
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
•
•
•
•
•
•
•
•
DaniWeb JavaScript / DHTML / AJAX Marketplace
Linear Mode
- Previous Thread: javascript pop-up div
- Next Thread: Javascript gives error on localhost
