Solved

scrolling window with PHP

Posted on 2008-06-10
7
529 Views
Last Modified: 2010-08-05
Is it possible to; using PHP, find the scrolled position of a window and then set the next window to the same position?

Ref: http://www.heart4haitians.com/slideshows/slideshow.php?title=Haitian%20History&slideshow=haitihistory

I have a slideshow which shows the slide previews at the bottom of the screen and has a window near the top that shows the current slide pic and has little nav buttons for next and previous.  The thing is if a person scrolls the screen down so that the little slide window is in the middle of their monitor, then click on next, the next window will reposition the window to the top, so the person has to scroll down again if they want the image in the center of their screen (monitor - whatever).

I know I could use js to make the slide show and replace the image and that would work slicker, but I don't know js as well as I do PHP and I'd prefer to stick with PHP if I could.

What I need to do is - when a person clicks on next or on an image - find the current scrolled position of the screen, pass it on to the next window, then scroll the window down to that position.

Any suggestions?
0
Comment
Question by:theclay
  • 4
  • 2
7 Comments
 
LVL 1

Expert Comment

by:eagle00789
ID: 21754706
unfortunately this is not possible with php, as it is only executed on the serverside and not on the clientside where you must be. unfortunately the only solution is to do it with js.
0
 

Author Comment

by:theclay
ID: 21755118
Could someone provide me with the js code needed to do this?  (scroll the screen, not run the slideshow)

- sorry, I'm lazy, plus you need to earn your points ;)
0
 
LVL 1

Expert Comment

by:webjema
ID: 21758056
It's so hard to remember position and apply it on new page.
The easy solution is to use anchors.
Page 1 has:
1. text 1
link to page 2 with anchor 1
2. text 1
link to page 2 with anchor 2
3. text 1
link to page 2 with anchor 3
4. text 1
link to page 2 with anchor 4

Page 2 has:
1. text 2
anchor 1
2. text 2
anchor 2
3. text 2
anchor 3
4. text 2
anchor 4

So, user on page 1 clicks on link with anchor 3 and goes to page 2 and position 3.
Link with anchor < a href="page2.html#anchorX" >link< /a >

If it's not solution I can offer hard solution with JS.
0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 

Author Comment

by:theclay
ID: 21763165
I'm aware of anchors
Gimme the hard solution.  I just upped your points
0
 
LVL 1

Accepted Solution

by:
webjema earned 500 total points
ID: 21766559
Ok.
You need links for people and for search engines on your page.
For search engines you use < a href="page2.html" >link< /a >
For people (and scrolling) you have to add onclick function to your links. So, link must be < a href="page2.html" onclick="go(this)" >link< /a >
Also you have to add some javascripts to your pages.
In page top add:
[code]
<script language="javascript">
function go(link) {
      link.href = link.href+"?p=" + getScrollXY();
}

function getURLParam(strParamName){
  var strReturn = "";
  var strHref = window.location.href;
  if ( strHref.indexOf("?") > -1 ){
    var strQueryString = strHref.substr(strHref.indexOf("?")).toLowerCase();
    var aQueryString = strQueryString.split("&");
    for ( var iParam = 0; iParam < aQueryString.length; iParam++ ){
      if (
aQueryString[iParam].indexOf(strParamName.toLowerCase() + "=") > -1 ){
        var aParam = aQueryString[iParam].split("=");
        strReturn = aParam[1];
        break;
      }
    }
  }
  return unescape(strReturn);
}

function getScrollXY() {
  var scrOfX = 0, scrOfY = 0;
  if( typeof( window.pageYOffset ) == 'number' ) {
    //Netscape compliant
    scrOfY = window.pageYOffset;
    scrOfX = window.pageXOffset;
  } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
    //DOM compliant
    scrOfY = document.body.scrollTop;
    scrOfX = document.body.scrollLeft;
  } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
    //IE6 standards compliant mode
    scrOfY = document.documentElement.scrollTop;
    scrOfX = document.documentElement.scrollLeft;
  }
  //return [ scrOfX, scrOfY ];
  return scrOfY;
}

</script>
[/code]

In page bottom add:
[code]
<script language="javascript">
var p = getURLParam('p');
if (p > 0) {
      // do scroll
      window.scrollBy(0,p);
}
</script>
[/code]

See example dev.carmusic.ua/test/page1.html
0
 

Author Comment

by:theclay
ID: 21797326
Thanks webjema.  Unfortunately I'm extremely busy right now and don't have time to test your code for a while.  Once I have a chance to test it and it works I'll reward the points - hopefully within the next week or so.
0
 

Author Closing Comment

by:theclay
ID: 31465862
Thanks - works great
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

I imagine that there are some, like me, who require a way of getting currency exchange rates for implementation in web project from time to time, so I thought I would share a solution that I have developed for this purpose. It turns out that Yaho…
Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

778 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