Solved

Header Isn't a Link

Posted on 2014-12-26
9
205 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
WordPress Tutorial 1: Installation & Setup

WordPress is a very popular option for running your web site and can be used to get your content online quickly for the world to see. This guide will walk you through installing the WordPress server software and the initial setup process.

 

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

Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

Question has a verified solution.

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

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

617 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