• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 445
  • Last Modified:

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

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
amateur6
Asked:
amateur6
  • 5
  • 4
  • 2
1 Solution
 
Gurvinder Pal SinghCommented:
but what exactly do you mean by removing the links? and why?
0
 
P1ST0LPETECommented:
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
 
P1ST0LPETECommented:
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
Cloud Class® Course: Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

 
amateur6Author Commented:
@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
 
Gurvinder Pal SinghCommented:
0
 
P1ST0LPETECommented:
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
 
amateur6Author Commented:
Are those tabs supposed to do anything?

Unfortunately, the design isn't really up for discussion any more.
0
 
amateur6Author Commented:
@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
 
P1ST0LPETECommented:
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
 
P1ST0LPETECommented:
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
 
amateur6Author Commented:
Excellent. Actually ended up dropping the links altogether (heh), but this will probably be handy in the future! Thank you sir!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

  • 5
  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now