Solved

scrolling window with PHP

Posted on 2008-06-10
7
531 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

 

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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

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 …
Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
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 a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

726 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