Guest cturner Posted May 18, 2009 Report Share Posted May 18, 2009 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. Quote Link to comment Share on other sites More sharing options...
falkencreative Posted May 18, 2009 Report Share Posted May 18, 2009 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. Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted May 18, 2009 Report Share Posted May 18, 2009 All that needs to happen is the box below is shifted to the day requested. What does that mean? Can you reword that? Quote Link to comment Share on other sites More sharing options...
falkencreative Posted May 19, 2009 Report Share Posted May 19, 2009 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. Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted May 19, 2009 Report Share Posted May 19, 2009 ahhh... off the bat I don't see a way either with the named anchor method. Seems like JS may be your answer. Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted May 19, 2009 Report Share Posted May 19, 2009 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... Quote Link to comment Share on other sites More sharing options...
Wickham Posted May 19, 2009 Report Share Posted May 19, 2009 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. Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted May 19, 2009 Report Share Posted May 19, 2009 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? Quote Link to comment Share on other sites More sharing options...
Wickham Posted May 19, 2009 Report Share Posted May 19, 2009 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. Quote Link to comment Share on other sites More sharing options...
newseed Posted May 19, 2009 Report Share Posted May 19, 2009 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. Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted May 23, 2009 Report Share Posted May 23, 2009 Look what I found! Scroll down to the demo where it says "Scroll to paragrapgh #3". http://www.learningjquery.com/2007/09/animated-scrolling-with-jquery-12 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.