Solved

Header Isn't a Link

Posted on 2014-12-26
9
184 Views
Last Modified: 2014-12-26
I need the header image of this site to link to the home page: Gopher State Events

It used to do it but I have made some changes and now it does not.  I assume I need to use an area tag?
0
Comment
Question by:Bob Schneider
  • 3
  • 3
  • 3
9 Comments
 
LVL 52

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 150 total points
ID: 40518480
You can simply wrap the entire div with an <a> tag

<a href="/"><div id="MyHeader"></div></a>

Open in new window

0
 
LVL 32

Assisted Solution

by:Big Monty
Big Monty earned 350 total points
ID: 40518482
another solution is to use jquery:

$('#header').click(function(e) { document.location = 'http://www.gopherstateevents.com/' });
0
 
LVL 32

Assisted Solution

by:Big Monty
Big Monty earned 350 total points
ID: 40518484
you would add it to a $(document).ready() block on your page. if you have a header include file for each page, you could stick it on there so it would be in place for every page
0
 

Author Comment

by:Bob Schneider
ID: 40518489
I think using the jquery approach would be best because I am trying to get better at that.  I don't have a $(document).ready() block on the page.  I am using an include.  Where in there do I put it?
<a href="http://www.gopherstateevents.com/" style="margin: 0;padding: 0;width: 100%;height: 100%;">
   <div id="header" style="background-image: url('/graphics/gse_header.png');background-repeat: no-repeat;height: 180px;"> 
	   <div class="social_media">
            <div  style="padding: 0;background: none;float: right;">
                <a href="http://www.youtube.com/channel/UCs09DthS7jEZy5srWZEDJQw">
                <img src="/graphics/social_media/youtube.png" alt="YouTube" height="32"></a>
            </div>
            <div style="padding: 0;background: none;float: right;">
                <a href="http://plus.google.com/100097568010679842973?prsrc=3" rel="publisher" style="text-decoration:none;">
                <img src="/graphics/social_media/GooglePlus-512-Red.png" alt="Google+" height="32"></a>
            </div>
            <div style="padding: 0;background: none;float: right;">
                <a href="https://twitter.com/gsetiming" class="twitter-follow-button" data-show-count="false">
                    <img src="/graphics/social_media/Twitter.png" alt="Follow @gsetiming" height="32">
                </a>
                <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
            </div>
            <div style="padding: 0;background: none;float: right;">
                <a href="http://www.linkedin.com/pub/bob-schneider/8/96a/876">
                    <img src="/graphics/social_media/LinkedIn-Logo.png" height="32" alt="View Bob Schneider's profile on LinkedIn">
                </a>     
            </div>
            <div style="padding: 0;background: none;float: right;">
                <a href="http://gopherstateevents.blogspot.com/" onclick="openThis(this.href,1024,768);return false;">
                    <img src="/graphics/blogspot.png" height="32" alt="Gopher State Events Blog">
                </a>
            </div>
        </div>
   </div>
</a>

Open in new window

0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 40518498
Either way is fine, but I would not suggest for the only reason you want to get better.   You can use http://www.codecademy.com/ for that.

The KISS method would be hard coding it.    Where javascript/jquery would make sense is if you needed to dynamically change the link after a page loads.

With that said, either option will work.
0
 

Author Comment

by:Bob Schneider
ID: 40518506
Actually it is in a header...any idea why it won't "work"?  I am sure it is user error somewhere.
0
 
LVL 32

Accepted Solution

by:
Big Monty earned 350 total points
ID: 40518507
you can put those blocks anywhere you would put a javascript block, think of it as the equivalent as a page onload event in javascript. typically they're put in the <head></head> section of a page, or at the very bottom of the page (so it runs AFTER all of the elements have been loaded on the page and are accessible. since you want to put it in an include file where your header resides, it would look something like:

   <div id="header" style="background-image: url('/graphics/gse_header.png');background-repeat: no-repeat;height: 180px;"> 
	   <div class="social_media">
            <div  style="padding: 0;background: none;float: right;">
                <a href="http://www.youtube.com/channel/UCs09DthS7jEZy5srWZEDJQw">
                <img src="/graphics/social_media/youtube.png" alt="YouTube" height="32"></a>
            </div>
            <div style="padding: 0;background: none;float: right;">
                <a href="http://plus.google.com/100097568010679842973?prsrc=3" rel="publisher" style="text-decoration:none;">
                <img src="/graphics/social_media/GooglePlus-512-Red.png" alt="Google+" height="32"></a>
            </div>
            <div style="padding: 0;background: none;float: right;">
                <a href="https://twitter.com/gsetiming" class="twitter-follow-button" data-show-count="false">
                    <img src="/graphics/social_media/Twitter.png" alt="Follow @gsetiming" height="32">
                </a>
                <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
            </div>
            <div style="padding: 0;background: none;float: right;">
                <a href="http://www.linkedin.com/pub/bob-schneider/8/96a/876">
                    <img src="/graphics/social_media/LinkedIn-Logo.png" height="32" alt="View Bob Schneider's profile on LinkedIn">
                </a>     
            </div>
            <div style="padding: 0;background: none;float: right;">
                <a href="http://gopherstateevents.blogspot.com/" onclick="openThis(this.href,1024,768);return false;">
                    <img src="/graphics/blogspot.png" height="32" alt="Gopher State Events Blog">
                </a>
            </div>
        </div>
   </div>

<script type="text/javascript">
    $(document).ready(function () {
             $('#header').click(function(e) { document.location = 'http://www.gopherstateevents.com/' });
    });
</script>

Open in new window


first, note that I removed the <a href="..."><div><div></a> format, as that wasn't working.  next, I just added the jquery script right under the html. While this will work, if you have any kind of footer include file, it would be better to put it in there, that way the page has been fully loaded and you don't have to worry about not being able to access any page elements (in this case it wouldn't matter, but it's something to keep in mind for the future)
0
 
LVL 52

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 150 total points
ID: 40518508
I take that back... BM's jquery will work better in this case after seeing your code because you have other links.
0
 

Author Comment

by:Bob Schneider
ID: 40518528
Awesome.  Thank you both...again!
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

911 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now