Solved

Header Isn't a Link

Posted on 2014-12-26
9
195 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 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 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
Independent Software Vendors: 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 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 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 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

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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 …
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

740 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