Loading gallery page with the gallery at the top of the page

[eventide]

The gallery I'm working on is a ways down the page, as you'd see if you clicked on the link. You have to scroll down quite a bit to get to the gallery itself. And moving it up the page is not an option.

The frustrating part is that anything that is done in the gallery (click a login link, etc., or click any button in the gallery) and the page reloads to the top of the page.

I'm wondering if there is any way to make it so that when a user clicks on anything in the gallery that reloads the page, the page loads with the gallery at the top of the window.

Thanks for anyone's help.

[Jeff Bailey]

in /yourgallery/themes/yourtheme/template.html add

Code Select Expand


id="galltop"
to the opening tag of the first table after your div id="cpgContainer"

or you can probably just change "#galltop" to "#cpgContainer" in the theme.php i posted below

then in /yourgallery/themes/yourtheme/theme.php
paste this before the

Code Select Expand


?>


Code Select Expand


// this function is used in this file it needs to be declared before being called.
function assemble_template_buttons($template_buttons,$buttons) {
    $counter=0;
    $output='';

    foreach ($buttons as $button)  {
      if (isset($button[4])) {
         $spacer=$button[4];
      } else {
      $spacer='';
      }

        $params = array(
            '{SPACER}'     => $spacer,
            '{BLOCK_ID}'   => $button[3],
            '{HREF_TGT}'   => $button[2],
            '{HREF_TITLE}' => $button[1],
            '{HREF_LNK}'   => $button[0]
            );
        $output.=template_eval($template_buttons, $params);
    }
    return $output;
}


// Creates an array of tokens to be used with function assemble_template_buttons
// this function is used in this file it needs to be declared before being called.
function addbutton(&$menu,$href_lnk,$href_title,$href_tgt,$block_id,$spacer) {
  $menu[]=array($href_lnk,$href_title,$href_tgt,$block_id,$spacer);
}

// HTML template for sys_menu
$template_sys_menu = <<<EOT
          {BUTTONS}
EOT;

// HTML template for sub_menu
$template_sub_menu = $template_sys_menu;

if (!defined('THEME_HAS_NO_SYS_MENU_BUTTONS')) {

  // HTML template for template sys_menu spacer
  $template_sys_menu_spacer ="::";

  // HTML template for template sys_menu buttons
  $template_sys_menu_button = <<<EOT
  <!-- BEGIN {BLOCK_ID} -->
        <a href="{HREF_TGT}#galltop" title="{HREF_TITLE}">{HREF_LNK}</a> {SPACER}
  <!-- END {BLOCK_ID} -->
EOT;

  // HTML template for template sys_menu buttons
    // {HREF_LNK}{HREF_TITLE}{HREF_TGT}{BLOCK_ID}{SPACER}
    addbutton($sys_menu_buttons,'{HOME_LNK}','{HOME_TITLE}','{HOME_TGT}','home',$template_sys_menu_spacer);
    addbutton($sys_menu_buttons,'{MY_GAL_LNK}','{MY_GAL_TITLE}','{MY_GAL_TGT}','my_gallery',$template_sys_menu_spacer);
    addbutton($sys_menu_buttons,'{MEMBERLIST_LNK}','{MEMBERLIST_TITLE}','{MEMBERLIST_TGT}','allow_memberlist',$template_sys_menu_spacer);
    addbutton($sys_menu_buttons,'{MY_PROF_LNK}','{MY_PROF_TITLE}','{MY_PROF_TGT}','my_profile',$template_sys_menu_spacer);
    addbutton($sys_menu_buttons,'{ADM_MODE_LNK}','{ADM_MODE_TITLE}','{ADM_MODE_TGT}','enter_admin_mode',$template_sys_menu_spacer);
    addbutton($sys_menu_buttons,'{USR_MODE_LNK}','{USR_MODE_TITLE}','{USR_MODE_TGT}','leave_admin_mode',$template_sys_menu_spacer);
    addbutton($sys_menu_buttons,'{UPL_PIC_LNK}','{UPL_PIC_TITLE}','{UPL_PIC_TGT}','upload_pic',$template_sys_menu_spacer);
    addbutton($sys_menu_buttons,'{REGISTER_LNK}','{REGISTER_TITLE}','{REGISTER_TGT}','register',$template_sys_menu_spacer);
    addbutton($sys_menu_buttons,'{FAQ_LNK}','{FAQ_TITLE}','{FAQ_TGT}','faq',$template_sys_menu_spacer);
    addbutton($sys_menu_buttons,'{LOGIN_LNK}','{LOGIN_TITLE}','{LOGIN_TGT}','login','');
    addbutton($sys_menu_buttons,'{LOGOUT_LNK}','{LOGOUT_TITLE}','{LOGOUT_TGT}','logout','');
    // Login and Logout don't have a spacer as only one is shown, and either would be the last option.

  $params = array('{BUTTONS}' => assemble_template_buttons($template_sys_menu_button,$sys_menu_buttons));
  $template_sys_menu = template_eval($template_sys_menu,$params);
}

if (!defined('THEME_HAS_NO_SUB_MENU_BUTTONS')) {

  // HTML template for template sub_menu spacer
  $template_sub_menu_spacer = $template_sys_menu_spacer;

  // HTML template for template sub_menu buttons
  $template_sub_menu_button= $template_sys_menu_button;

  // HTML template for template sub_menu buttons
    // {HREF_LNK}{HREF_TITLE}{HREF_TGT}{BLOCK_ID}{SPACER}
    addbutton($sub_menu_buttons,'{CUSTOM_LNK_LNK}','{CUSTOM_LNK_TITLE}','{CUSTOM_LNK_TGT}','custom_link',$template_sub_menu_spacer);
    addbutton($sub_menu_buttons,'{ALB_LIST_LNK}','{ALB_LIST_TITLE}','{ALB_LIST_TGT}','album_list',$template_sub_menu_spacer);
    addbutton($sub_menu_buttons,'{LASTUP_LNK}','{LASTUP_TITLE}','{LASTUP_TGT}','lastup',$template_sub_menu_spacer);
    addbutton($sub_menu_buttons,'{LASTCOM_LNK}','{LASTCOM_TITLE}','{LASTCOM_TGT}','lastcom',$template_sub_menu_spacer);
    addbutton($sub_menu_buttons,'{TOPN_LNK}','{TOPN_TITLE}','{TOPN_TGT}','topn',$template_sub_menu_spacer);
    addbutton($sub_menu_buttons,'{TOPRATED_LNK}','{TOPRATED_TITLE}','{TOPRATED_TGT}','toprated',$template_sub_menu_spacer);
    addbutton($sub_menu_buttons,'{FAV_LNK}','{FAV_TITLE}','{FAV_TGT}','favpics',$template_sub_menu_spacer);
    addbutton($sub_menu_buttons,'{SEARCH_LNK}','{SEARCH_TITLE}','{SEARCH_TGT}','search','');

  $params = array('{BUTTONS}' => assemble_template_buttons($template_sub_menu_button,$sub_menu_buttons));
  $template_sub_menu = template_eval($template_sub_menu,$params);
}


This has not been thoroughly tested but I hope it solves your issues.
If this isn't the correct way to accomplish this I'm sure someone will come around and straighten me out.

[eventide]

That didn't quite work - made a blank page load!

I'm wondering if this is something that JavaScript could take care of - I know next to nothing about JS, but what little I do know leads me to believe JS (or maybe even jQuery) can detect if something is clicked in a container div and then load the page as needed (with the gallery div at the top of the browser window in this case).

Unless there's just a coding goof in the code you posted...

Any suggestions?

[Jeff Bailey]

hmm it works fine in my testbed. Did you edit it in anyway... or is there other code in your custom theme.php

if you can attach the theme.php and template.php as theme.php.txt and template.php.txt and ill have a look.

I'm wondering if this is something that JavaScript could take care of

You shouldn't need to use javascript for something as simple as this.

I'll look though my code again an try it in a fresh theme.

[eventide]

Thanks a lot for digging into this deeper.

Yes, I do have a good amount of stuff added to the theme.php file, which is probably the issue with adding your code...

The files are attached as requested.

[Jeff Bailey]

Thank you.
Your theme.php already had the menu functions in it ..so that probably caused the conflict 

Here are new ones for you to upload.
Take out the .txt before you upload them to your server.
Hope it works for you this time 

[Jeff Bailey]

I see it works for the menus...forgot about the other stuff 
Let me look a little more 

[eventide]

Was just writing a reply about that!

Thanks a lot! 

[Jeff Bailey]

I restored to javascript 

I'm wondering if this is something that JavaScript could take care of

did not test this...should work out of the box
luckily your online and we don't have to wait for replys 

[eventide]

Uploaded the change.

Didn't to the trick.

[Jeff Bailey]

Ok sorry about that. I'm gonna have to look deeper or one of the devs or a more experienced supporter will help. I'll post again probably tomorrow if I find anything.

restore your template.html to the one in this post -> http://forum.coppermine-gallery.net/index.php/topic,62902.msg312433.html#msg312433

or just restore them to what you had before we went though all this
two steps forward one step back  

[eventide]

No problem. I certainly appreciate the effort! 

[Jeff Bailey]

If this doesn't work Im all out of ideas.
Attached is a small plugin that should take care of your issue.
I made it a plugin instead of just editing your code so other people could use it without having to edit.

[Jeff Bailey]

Code Select Expand

<div id="cpgContainer" style="margin-top: -30px;" name="gallery">take out the name and add the style in a css file instead.

Code Select Expand

<div id="cpgContainer">

edit - I saw that you still had the anchor and the buttons function in place, replace your theme.php and template.html with the ones you uploaded here originally before making changes to the div and before installing the plugin.

edit - take out the body onload as well

[eventide]

Thanks for all of the you've put into this, Jeff, but I really, really regret to tell you that it didn't work.

The links above the gallery area do load the page with the gallery at the top of the browser window, but whenever you click on anything "inside" the gallery - buttons, images, etc. it still loads the page with the top of the Web page showing in the browser window.

So, are you really out of ideas? If so, hopefully someone can show up and save the day! 

Thanks

[Jeff Bailey]

Read my last post more carefully and you will see that you did not complete all the steps as suggested. Restore your theme.php and template.html back to the orignals...before you updated them witht he changes we made though this thread.

[phill104]

What you are trying is not really going to work. Browsers render from the top down, that is the way they are designed to operate. Even if you do fudge it to work differently then it will probably not work in different browsers.

What I would suggest is you create a theme for your gallery page without the huge image above it or rethink it another way.

[eventide]

Okay, little embarrassing there: I tried to take the shortcut and just change what I remembered we edited. And what do you know? When I actually do exactly as suggested it works!  

Thanks again, Jeff.

Your help is appreciated and hopefuly the plugin will benefit others, as well.

Mark

[eventide]

What you are trying is not really going to work. Browsers render from the top down, that is the way they are designed to operate. Even if you do fudge it to work differently then it will probably not work in different browsers.

Good thought, so I tested it in IE8, FF3.5, Chrome 3, and Safari 4. Since it's a plugin now, I'd imagine that would make it "browser-safe" - if anything truly can be...

What I would suggest is you create a theme for your gallery page without the huge image above it or rethink it another way.

Believe me, I'd do anything to get rid of that image at the top of the page, but the client insists it stay there...

Thanks!

[Jeff Bailey]

The plugin simply adds a anchor "#galltop" to any links inside the div, so i don;t think it would be affected by the browser? Please resolve your thread using the check mark.

edit - Resolved it literary while I was typing this, ha.