Javascript for Anchor tags

**pixelzim** · 10-02-2009, 12:59 PM

I've got this greybox plugin on my website, which is basically like lightbox but for html pages. I've got it working good the only problem is if I put in enough content so that the links that open up a greybox need to be scrolled down to get to, the greybox loads all the way up to the top of the page. I basically need some type of javascript so when I click a certain link it goes to #wrap (which is at the top of the page) and it opens the greybox. So its like having two destinations.

Heres the page I'm talking about: http://jr.stwhiteco.com/gd.html You'll notice if you scroll your browser to the bottom and then click on one of the thumbnails it loads at the top of the page and you need to scroll up. Its not a problem right now unless you have a small monitor, but as I add more thumbnails it will be a problem.

**jscheuer1** · 10-02-2009, 02:04 PM

Edit: Added Later:
I see that your greybox script is out of date. The current version:

http://swampfoot.googlepages.com/greybox.js

will automatically place the greybox at the top of the window, not the page as your version does. If you want to continue using your older version and modify it as you originally requested, read on. . .

Looking in the head of your page, at its source code, I see (among other things):

Code:

    <script type="text/javascript">
var GB_ANIMATION = true;
      $(document).ready(function(){
        $("a.greybox").click(function(){
          var t = this.title || $(this).text() || this.href;
          GB_show(t,this.href,753,950);
          return false;
        });
      });
function MM_goToURL() { //v3.0
  var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
  for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
}
    </script>

<!--[if IE]>
<script type="text/javascript" src="js/DD_belatedPNG_0.0.7a-min.js"></script>
<script type="text/javascript">DD_belatedPNG.fix('#lBrdr, #rBrdr, #pHeader, img');</script>
<script type="text/javascript" src="js/iefIx.js"></script>
    <script type="text/javascript" src="http://jquery.com/src/latest/"></script>
    <script type="text/javascript" src="js/greybox.js"></script>
    <link href="css/greybox.css" rel="stylesheet" type="text/css" media="all" />
    <script type="text/javascript">
      var GB_ANIMATION = true;
      $(document).ready(function(){
        $("a.greybox").click(function(){
          var t = this.title || $(this).text() || this.href;
          GB_show(t,this.href,760,963);
          return false;
        });
      });
    </script>
<![endif]-->

I've highlighted the two places where the greybox links are initialized (the first is for most browsers, the other one with slightly different dimensions is for IE). If you were to add to both (I'll only show one here):

Code:

        $("a.greybox").click(function(){
          window.scrollTo(0, 0);
          var t = this.title || $(this).text() || this.href;
          GB_show(t,this.href,753,950);
          return false;
        });

That should take care of it.

**vwphillips** · 10-02-2009, 05:12 PM

Code:

         window.scrollTo(0, 0);

is far from ideal

I ran your code locally and the script auto positions the geybox without trouble and scroll the greybox with page scroll as required
I cannot see why yours does not work
I will upload my version tomorrow if required

Code:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Steve White's Portfolio</title>
<link href="http://jr.stwhiteco.com/css/style.css" type="text/css" media="all" rel="stylesheet" />

<script src="http://jr.stwhiteco.com/js/swfobject_modified.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://jquery.com/src/latest/"></script>
    <link href="http://jr.stwhiteco.com/css/greybox.css" rel="stylesheet" type="text/css" media="all" />
<script  type="text/javascript">
/*<![CDATA[*/

/* Greybox Redux
 * Required: http://jquery.com/
 * Written by: John Resig
 * Based on code by: 4mir Salihefendic (http://amix.dk)
 * License: LGPL (read more in LGPL.txt)
 */

var GB_DONE = false;
var GB_HEIGHT = 400;
var GB_WIDTH = 400;

function GB_show(caption, url, height, width) {
  GB_HEIGHT = height || 400;
  GB_WIDTH = width || 400;
  if(!GB_DONE) {
    $(document.body)
      .append("<div id='GB_overlay'></div><div id='GB_window'><div id='GB_caption'></div>"
        + "<img src='close.gif' alt='Close window'/></div>");
    $("#GB_window img").click(GB_hide);
    $("#GB_overlay").click(GB_hide);
    $(window).resize(GB_position);
    $(window).scroll(GB_position);
    GB_DONE = true;
  }

  $("#GB_frame").remove();
  $("#GB_window").append("<iframe id='GB_frame' src='"+url+"'></iframe>");

  $("#GB_caption").html(caption);
  $("#GB_overlay").show();
  GB_position();

  if(GB_ANIMATION)
    $("#GB_window").slideDown("slow");
  else
    $("#GB_window").show();
}

function GB_hide() {
  $("#GB_window,#GB_overlay").hide();
}
function zxcWWHS(){
 if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
 else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
 return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTop];
}


function GB_position()
{
    var de = document.documentElement;
    var h = self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight;
    var w = self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
    var iebody=(document.compatMode && document.compatMode != "BackCompat")? document.documentElement : document.body;
    var dsocleft=document.all? iebody.scrollLeft : pageXOffset;
    var dsoctop=document.all? iebody.scrollTop : pageYOffset;

    var height = h < GB_HEIGHT ? h - 32 : GB_HEIGHT;
    var top = (h - height)/2 + dsoctop;//zxcWWHS()[3]+(zxcWWHS()[1]-height)/2;//(h - height)/2 + dsoctop;
    $("#GB_window").css({width:GB_WIDTH+"px",height:height+"px",left: ((w - GB_WIDTH)/2)+"px", top: top+"px" });
    $("#GB_frame").css("height",height - 32 +"px");
//    $("#GB_overlay").css({height:h, top:top + "px", width:w});
}
/*]]>*/
</script>
    <script type="text/javascript">
var GB_ANIMATION = true;
      $(document).ready(function(){
        $("a.greybox").click(function(){
          var t = this.title || $(this).text() || this.href;
          GB_show(t,this.href,753,950);
          return false;
        });
      });
function MM_goToURL() { //v3.0
  var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
  for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
}
    </script>

<!--[if IE]>
<script type="text/javascript" src="http://jr.stwhiteco.com/js/DD_belatedPNG_0.0.7a-min.js"></script>
<script type="text/javascript">DD_belatedPNG.fix('#lBrdr, #rBrdr, #pHeader, img');</script>
<script type="text/javascript" src="http://jr.stwhiteco.com/js/iefIx.js"></script>
    <script type="text/javascript" src="http://jr.stwhiteco.com/http://jquery.com/src/latest/"></script>

    <link href="css/greybox.css" rel="stylesheet" type="text/css" media="all" />
    <script type="text/javascript">
      var GB_ANIMATION = true;
      $(document).ready(function(){
        $("a.greybox").click(function(){
          var t = this.title || $(this).text() || this.href;
 //         GB_show(t,this.href,760,963);
          return false;
        });
      });
    </script>
<![endif]-->

</head>

<body>
<div id="wrap">
	<div id="lBrdr"></div>
    <div id="rBrdr"></div>

  <div id="wrapper">






   	  <div id="banner">

        <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="900" height="168">
          <param name="movie" value="swf/banner.swf" />
          <param name="quality" value="high" />
          <param name="wmode" value="transparent" />
          <param name="swfversion" value="6.0.65.0" />
          <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
          <param name="expressinstall" value="js/expressInstall.swf" />
          <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
          <!--[if !IE]>-->

          <object type="application/x-shockwave-flash" data="swf/banner.swf" width="900" height="168">
            <!--<![endif]-->
            <param name="quality" value="high" />
            <param name="wmode" value="transparent" />
            <param name="swfversion" value="6.0.65.0" />
            <param name="expressinstall" value="js/expressInstall.swf" />
            <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
            <div>
              <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>

              <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://jr.stwhiteco.com/http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
            </div>
            <!--[if !IE]>-->
          </object>
          <!--<![endif]-->
        </object>
</div><!--Banner Div -->








      <div id="content">

        <div id="pHeader">

        <h6><span class="yellow">//</span> Graphic Design</h6>
        </div>

      <!--Death -->
			<div class="gdWrap">
                <div class="gdContent">
                    <div class="gdThumb"><a class="greybox" href="http://www.dynamicdrive.com/"><img src="http://jr.stwhiteco.com/images/gd/tCastleComp.jpg" alt="Medieval Ruins" width="259" height="188" /></a></div>
                    <div class="gdThumb"><a class="greybox" href="gd/sleepyHollow.html"><img src="http://jr.stwhiteco.com/images/gd/tSH.jpg" alt="Sleepy Hollow" width="259" height="188" /></a></div>
                    <div class="gdThumb"><a class="greybox" href="gd/dRow.html"><img src="http://jr.stwhiteco.com/images/gd/tDRow.jpg" alt="Desolation Row" width="259" height="188" /></a></div>

                    <div class="gdThumb"><a class="greybox" href="gd/wgPoster.html"><img src="http://jr.stwhiteco.com/images/gd/tWGP.jpg" alt="This Machine Kills Fascists" width="259" height="188" /></a></div>
        <div class="gdThumb"><a class="greybox" href="gd/death.html"><img src="http://jr.stwhiteco.com/images/gd/tDeath.jpg" alt="Death" width="259" height="188" /></a></div>
                    <div class="gdThumb"><a class="greybox" href="http://www.dynamicdrive.com/"><img src="http://jr.stwhiteco.com/images/gd/tMozartP.jpg" alt="Mostly Mozart Poster" width="259" height="188" /></a></div>
                    <div class="gdThumb"><a class="greybox" href="http://www.dynamicdrive.com/"><img src="http://jr.stwhiteco.com/images/gd/tMozartB.jpg" alt="Mostly Mozart Brochure" width="259" height="188" /></a></div>




              </div><!--gdContent Div-->


            </div><!--gdWrap Div -->
      </div><!--Content Div -->







<div id="footer">

       	  <div id="up">
            	<a href="#wrap">^ Up</a>
             </div>
        	<div id="links">
        		<ul>
               <li> <a href="index.html">Home</a> - </li>

               <li> <a href="#wrap">Portfolio</a> -
               	<ul>
                	<li><a href="wd.html">Web Design</a></li>
                    <li><a href="gd.html">Graphic Design</a></li>
                    <li><a href="photography.html">Photography</a></li>
                </ul>

               </li>
               <li> <a href="about.html">About Me</a> - </li>
                <li> <a href="contact.html">Contact</a></li>
				</ul>
</div><!--Links Div -->

       		<div id="copyright">© Copyright 2009 Steve White</div>


        </div><!--Footer Div -->







  </div><!--Wrapper Div -->
</div><!--Wrap Div-->

<script type="text/javascript">
<!--
swfobject.registerObject("FlashID");
//-->
</script>
</body>
</html>

**jscheuer1** · 10-02-2009, 06:30 PM

Originally Posted by vwphillips

Code:

         window.scrollTo(0, 0);

is far from ideal

Agreed, but it should do what the OP asked for.

Originally Posted by vwphillips

I ran your code locally and the script auto positions the geybox without trouble and scroll the greybox with page scroll as required
I cannot see why yours does not work

His does not work because he is using an earlier version that doesn't do that. Follow the link (right click it and 'save as' if your browser won't navigate to it) at the top of my previous post in this thread for the version that does.

Thread: Javascript for Anchor tags

Thread Tools

Search Thread

Javascript for Anchor tags

Bookmarks

Bookmarks

Posting Permissions