airesofwar Posted January 27, 2011 Share Posted January 27, 2011 I am trying to figure out how to assign a link to a HTML element. Example:<div id='header'><!--widget content--></div> How would I make the full header element link to another page. Link to comment Share on other sites More sharing options...
justsomeguy Posted January 27, 2011 Share Posted January 27, 2011 One solution is to wrap the entire div in an anchor element, or you could also use Javascript to attach a click event to the div. Link to comment Share on other sites More sharing options...
jeffman Posted January 27, 2011 Share Posted January 27, 2011 Without JavaScript, you will need to use an <a> element. If it needs to fill the entire div, change the CSS display property to block. If the div has a predefined height, assign that height to the <a> also.Technically, you could define the <a> as a block element and wrap it around the div. It should work, but then your document might not validate. Link to comment Share on other sites More sharing options...
airesofwar Posted January 27, 2011 Author Share Posted January 27, 2011 Well that is the problem I am using a Blogger site and its very strict about what can be placed in the <body> section of the template. Wrapping the element in a <a> tag results in a error message and can not be excepted. But I was thinking their might be a way to do it through a JavaScript function by assigning a onclick location to the element in the <head>. But I am a noob with JavaScript so I have not learned how to do something like that. Link to comment Share on other sites More sharing options...
jeffman Posted January 27, 2011 Share Posted January 27, 2011 Did you try my first suggestion? Using a link, if it is at all possible, is always preferable to JavaScript because many users disable JavaScript.But if you really, really want to compromise, this should work:<div onclick="location.href = 'path/to/destination.html'">Don't mess up the quotation marks. Link to comment Share on other sites More sharing options...
airesofwar Posted January 28, 2011 Author Share Posted January 28, 2011 Did you try my first suggestion? Using a link, if it is at all possible, is always preferable to JavaScript because many users disable JavaScript.But if you really, really want to compromise, this should work:<div onclick="location.href = 'path/to/destination.html'">Don't mess up the quotation marks. Alright thanks! It excepted that but its still not working. I know its not a syntax error and it seems to be just Blogger being retarded. I had this same problem with mouseover scripts in the past. Back to the drawing board! Link to comment Share on other sites More sharing options...
thescientist Posted January 28, 2011 Share Posted January 28, 2011 are you checking for errors? How are you verifying that it is not a syntax error? (it could be any sort of run time error) Link to comment Share on other sites More sharing options...
dsonesuk Posted January 28, 2011 Share Posted January 28, 2011 what if you just wrap content of this element within an anchorparentelem = document.getElementById("header");parentcontent = parentelem.innerHTML;parentelem.innerHTML="<a class="linkthis" href='path/to/destination.html'>"+parentcontent+"</a>";if it is a fixed height use.linkthis {display:block; height: 100%;}or you could try using position absolute to force the link to fill the area of a non fixed height element.#header {position:relative;}.thislink {position:absolute; top:0; bottom:0; right:0; left:0;}you can then either useparentelem.innerHTML="<a class="linkthis" href='path/to/destination.html'>"+parentcontent+"</a>";ORparentelem.innerHTML="<a class="linkthis" href='path/to/destination.html'></a>"+parentcontent;you may have to set z-index to bring the 'linkthis' layer above the header content, but it should work. Link to comment Share on other sites More sharing options...
airesofwar Posted January 28, 2011 Author Share Posted January 28, 2011 are you checking for errors? How are you verifying that it is not a syntax error? (it could be any sort of run time error)Ahh wait it was a error cause be blogger reformatting the coding. I used this code. <div class='header-outer' onclick="location.href = 'path/to/destination.html'">It changed to this code after saved.<div class='header-outer' onclick='location.href = 'path/to/destination.html''>So I reformatted it to this code.<div class='header-outer' onclick='location.href = "path/to/destination.html"'>Now it works just fine! Thanks for everyone's help! Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.