Solved

Remove internal (#anchor-name) links based on window size?

Posted on 2011-02-24
11
424 Views
Last Modified: 2012-05-11
Caveat: I have absolutely no javascript (or php) skills, but I think javascript can take care of this. I have a page with three internal (name=one, name=two, etc) links. They're necessary if the user's screen size is 1024x768, but less so (or not at all) if the browser window is taller. Example: http://sullivanandco.com/test/link-example.html

I found the following code which will get the measurement at http://www.howtocreate.co.uk/tutorials/javascript/browserwindow

function alertSize() {
  var myWidth = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  }
  window.alert( 'Width = ' + myWidth );
  window.alert( 'Height = ' + myHeight );
}

Open in new window


(it's a little old but I assume it's still valid)

My question is, can I (easily) remove the internal links with css or javascript if the window is tall enough that they aren't required (actually, effectively fail to function as intended).

Points for speed. Thanks!
0
Comment
Question by:amateur6
  • 5
  • 4
  • 2
11 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 34970372
but what exactly do you mean by removing the links? and why?
0
 
LVL 10

Expert Comment

by:P1ST0LPETE
ID: 34970494
Yes, you can do this using JavaScript.  See example below:
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        window.onload = function ()
        {
            var height = window.innerHeight;

            if (height > 768)
            {
                for (var i = 1; i < 4; i++)
                {
                    document.getElementById('A' + i).style.display = 'none'
                }
            }
        }        
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <a id="A1" href="#">Link One</a><br />
        <a id="A2" href="#">Link Two</a><br />
        <a id="A3" href="#">Link Three</a>
    </div>
    </form>
</body>
</html>

Open in new window

0
 
LVL 10

Expert Comment

by:P1ST0LPETE
ID: 34970643
Actually this is the more correct way to do it as it's cross browser friendly:
 
<script type="text/javascript">
    window.onload = function ()
    {
        var height;

        if (window.innerHeight)
            height = window.innerHeight;
        else if (document.documentElement.clientHeight)
            height = document.documentElement.clientHeight;
        else
            height = document.body.clientHeight;

        if (height > 768)
        {
            for (var i = 1; i < 4; i++)
            {
                document.getElementById('A' + i).style.display = 'none'
            }
        }
    }        
</script>

Open in new window

However, if you aren't afraid to use jQuery, which makes writing JavaScript easier, then you can do it this way, and let jQuery handle all the cross browser stuff for you:
 
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
    $(document).ready(function ()
    {
        var height = $(this).height();

        if (height > 768)
        {
            $('[id*="A"]').hide();
        }
    });       
</script>

Open in new window

0
 
LVL 1

Author Comment

by:amateur6
ID: 34970762
@gurvinder372: I mean make them go away, as P1STOLPETE has done; the reason is that if the window is large enough, the links won't "jump" down the page (because the page ends too soon) -- and that can (will) confuse people. Or at least make my boss say "what do these do? Can you make them go away if they don't work?"... (see new behavior at http://sullivanandco.com/test/link-example-rev.html)

@P1STOLPETE: thanks for all of that! Two questions:

1) Can I make the form's DIV actually collapse, or does it have to remain there at the same depth AS IF the links are there?
2) If I'm scared of (or just don't know anything about)  jQuery, is there any significant downside to using the first javascript?

Thanks both!
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 34970857
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 10

Expert Comment

by:P1ST0LPETE
ID: 34971070
No, you can use regular JavaScript.  It would probably do you good to learn the core workings of JavaScript before you progress to jQuery.  But keep in mind jQuery is a highly sought after skill these days by employers.

However, when you bring up collapsing a <div>, using jQuery is WAY easier than trying to write out the JavaScript yourself.  If you simply want to hide a div that is one thing, but if you want to have the collapsing animation then jQuery is the way to go.

Example <div>:

        <div id="MyDiv"></div>

Hiding in regular JavaScript:

         document.getElementById('MyDiv').style.display = 'none';

Hiding in jQuery:

          $('#MyDiv').hide();

Collapse animation in jQuery:

           var speed = 1000;  1000 milliseconds = 1 second
          $('#MyDiv').slideUp(speed);




Also, going back to hiding your links.  Don't use A1, A2, A3, etc. like I used in the above example.  That was not very thoughtful on my part.  Change it to something like NavLink1, NavLink2, NavLink3.  This would cause you to alter the Javascript like this:

          document.getElementById('NavLink' + i).style.display = 'none'

And the jQuery like this:

         $('[id*="NavLink"]').hide();

The way I had it before if you were using jQuery with id*="A"  (which means find all elements with A in their name) would more than likely hide more elements than you were wanting to hide.
0
 
LVL 1

Author Comment

by:amateur6
ID: 34971075
Are those tabs supposed to do anything?

Unfortunately, the design isn't really up for discussion any more.
0
 
LVL 1

Author Comment

by:amateur6
ID: 34971151
@P1ST0LPETE:

Ah, mixed up my terminology. Let me be more clear: In FF 3.6.13 on Mac, the links go away but the empty div stays essentially the same height. I don't need to animate it, but can I make it have a height of 0 (or close to it)?

Revised revision (changing names): http://sullivanandco.com/test/link-example-rev2.html

Thanks again!
0
 
LVL 10

Expert Comment

by:P1ST0LPETE
ID: 34972352
Ok, I think I see what you're talking about now.  You are indeed using a <div>, but what you are fighting is the table that it is nested in.  Which I'm not sure why you are using a table here, no need.

Doing a "view source", shows your html looking like this:

<table style="margin:  -20px 0 0 40px;">
    <tr>
          <td style="border: 0; padding: 10px 40px 0 0; line-height: 25px;">
              <form id="form1" runat="server">
                  <div>
                        <a id="InteralLink1" href="#">Link One</a><br />
                        <a id="InteralLink2" href="#">Link Two</a><br />
                        <a id="InteralLink3" href="#">Link Three</a>
                  </div>
              </form>
          </td>
      </tr>
</table>

So when you hide your links, that <div> isn't going to have any height to it and will will automatically collapse.  However, because the table cell (i.e. <td>) has "line-height: 25px;" applied to it, that area will still remain 25 pixels tall.

So the basic fix is to remove the "line-height" styling from the table, as the table cell will naturally grow to fit it's content.  Also why are you using a table here? No need.  Just use the <div> tag and position the div where you want it.  Also, why are you using a <form> tag, and declaring it there of all places?  No need for a <form> to do simple anchor links, and if you do plan on actually adding things to your page that require a form, you typically make the entire page a form like this:

<html>
   <head></head>
   <body>
      <form>
          <div id="page">
                   <!-- All page content here -->
          </div>
      </form>
   </body>
</html>

0
 
LVL 10

Accepted Solution

by:
P1ST0LPETE earned 500 total points
ID: 34972422
Also, since you have all your links inside of a <div>, simply put and Id on that <div> and then hide that, instead of hiding each of the links. Example:

<div id="InternlLinks">
     <a href="InternlLink1">Link One</a><br />
     <a href="InternlLink2">Link Two</a><br />
     <a href="InternlLink3">Link Three</a>
</div>

JavaScript:

document.getElementById('InternalLinks').style.display = 'none'.

This hides the <div> and everything inside of it as well.
0
 
LVL 1

Author Closing Comment

by:amateur6
ID: 34998944
Excellent. Actually ended up dropping the links altogether (heh), but this will probably be handy in the future! Thank you sir!
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
The viewer will learn how to dynamically set the form action using jQuery.

705 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