Solved

Header Isn't a Link

Posted on 2014-12-26
9
192 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 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
Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

 

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

The Eight Noble Truths of Backup and Recovery

How can IT departments tackle the challenges of a Big Data world? This white paper provides a roadmap to success and helps companies ensure that all their data is safe and secure, no matter if it resides on-premise with physical or virtual machines or in the cloud.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Converting dates in JavaScript 2 36
Little bit of help styling my heading 3 21
Under active page on navigation bar 8 14
Diminish Pop-up  in 3 seconds 7 23
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
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.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

831 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