Jump to content


page shifts up without an anchor


  • Please log in to reply
10 replies to this topic

#1 Guest_cturner

Guest_cturner
  • Guests

Posted 18 May 2009 - 03:29 PM

I have a calendar on the home page. www.sttimothymesa.org When a day is clicked it shifts the entire web page upwards as if an anchor is attached to it. All that needs to happen is the box below is shifted to the day requested. Tried CSS fixes, but no luck.
  • 0

#2 Ben

Ben

    Administrator

  • Administrators
  • 5,638 posts
  • LocationChico, CA

Posted 18 May 2009 - 04:07 PM

There is an anchor -- within the box below the calendar. I don't think there is a fix for this, unless you go about scrolling that box below the calendar in a completely different method.
  • 0
Benjamin Falk
Falken Creative : Twitter

#3 PicnicTutorials

PicnicTutorials

    Eric

  • Advanced Member
  • PipPipPipPip
  • 2,431 posts
  • LocationCarlsbad, CA

Posted 18 May 2009 - 06:57 PM

All that needs to happen is the box below is shifted to the day requested.


What does that mean? Can you reword that?
  • 0

#4 Ben

Ben

    Administrator

  • Administrators
  • 5,638 posts
  • LocationChico, CA

Posted 18 May 2009 - 07:23 PM

All that needs to happen is the box below is shifted to the day requested.


What does that mean? Can you reword that?


The content in the box below the calendar and the calendar itself is connected. If you click on a date, the content in the box below the calendar needs to shift (either scroll up or down) into the right position so it shows the correct related news items. The issue is that this also may cause the entire page to jump.
  • 0
Benjamin Falk
Falken Creative : Twitter

#5 PicnicTutorials

PicnicTutorials

    Eric

  • Advanced Member
  • PipPipPipPip
  • 2,431 posts
  • LocationCarlsbad, CA

Posted 18 May 2009 - 07:47 PM

ahhh... off the bat I don't see a way either with the named anchor method. Seems like JS may be your answer.
  • 0

#6 PicnicTutorials

PicnicTutorials

    Eric

  • Advanced Member
  • PipPipPipPip
  • 2,431 posts
  • LocationCarlsbad, CA

Posted 18 May 2009 - 09:35 PM

I was just starring at it and tossing some ideas around in my head. You probably "could" remove the stuff below the calender altogether. And rather have it appear to the left of the calender (at the exact same level, but only when you hover over the calender div. Then when you click on the days it "should" not move the page around. Or maybe not, you'd have to test it. Just a thought...
  • 0

#7 Wickham

Wickham

    Advanced Member

  • Advanced Member
  • PipPipPipPip
  • 1,732 posts
  • LocationSalisbury UK

Posted 19 May 2009 - 11:05 AM

I've tried a few things with your code, but it's got me beat too.

The trouble is that anchors do normally go to the top of the viewport, unless there is a javascript way to force it a bit lower which I don't know. In your case its's complicated by the scrollbar in the div as you want that to show the anchored text at the top of its div, without affecting the whole page.
  • 0

#8 PicnicTutorials

PicnicTutorials

    Eric

  • Advanced Member
  • PipPipPipPip
  • 2,431 posts
  • LocationCarlsbad, CA

Posted 19 May 2009 - 11:24 AM

I was just starring at it and tossing some ideas around in my head. You probably "could" remove the stuff below the calender altogether. And rather have it appear to the left of the calender (at the exact same level, but only when you hover over the calender div. Then when you click on the days it "should" not move the page around. Or maybe not, you'd have to test it. Just a thought...


If he did this, what do you think John, that should work right?
  • 0

#9 Wickham

Wickham

    Advanced Member

  • Advanced Member
  • PipPipPipPip
  • 1,732 posts
  • LocationSalisbury UK

Posted 19 May 2009 - 01:10 PM

Yes, as mentioned you could put the calendar and the scrolling div with the dates side by side, but that would mean changing the page design.

You could also have an invisible dates div which only shows on hover as a popup or onclick with javascript, covering other content, but that also spoils the look of the page and it's useful to have the dates div showing all the time so that you don't have to click a calendar day.

Keeping the page design as it is needs a solution no one has found yet.
  • 0

#10 Eddie

Eddie

    Advanced Member

  • Advanced Member
  • PipPipPipPip
  • 3,618 posts
  • LocationTexas

Posted 19 May 2009 - 02:21 PM

I wonder if you added position:absolute to the anchor? Of course this still presents a problem of page shift because one cannot foresee just where about the user's page is located but it will keep the calendar and the text below it visible?

If not positioning, I wonder if padding/margin would work? Otherwise, I will have to agree with Eric that JS is probably the solution.
  • 0

#11 PicnicTutorials

PicnicTutorials

    Eric

  • Advanced Member
  • PipPipPipPip
  • 2,431 posts
  • LocationCarlsbad, CA

Posted 22 May 2009 - 07:52 PM

Look what I found! Scroll down to the demo where it says "Scroll to paragrapgh #3".

http://www.learningj...-with-jquery-12
  • 0




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users