Solved

Header Isn't a Link

Posted on 2014-12-26
9
201 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
  • 3
9 Comments
 
LVL 53

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 33

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 33

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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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
 
LVL 53

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 33

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 53

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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

738 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