I am using Thomas Kahn's smooth div scroll for "mixed content". Basically I have an issue when scrolling left or right using the hotspots. I have 6 "contentbox" in my HTML. This can obviously go up and down depending on whether content expires or new content is published. Let me explain the scenario to you. The first time the page is loaded, I have the 6 "contentbox" coming up in the descending order of the date. Now once the scroliing begins, let us say 2 "contentbox" scrolled out of the screen from the left side. At this stage, if I scroll left using the left hotspot, it goes back only one. What I want is that it should go back upto the first "contentbox" I have on my HTML. Similarly, if I scroll right, it should go upto the last "contentbox" I have on my HTML. Is this possible?
FYI, when we disable "auto scrolling", the left and the right hotspot work as expected. However, our requirement is to scroll at the same time the left and the right hotspot should traverse to the first and last "contentbox" respectively.
Any help would be highly appreciated.
Link to DropBox --->> https://www.dropbox.com/s/bwy4elhvi4qldbd/Whats_New.zip
Please run WhatsNew.html
Related
I believe I've seen this done before, but I can't remember where. What I want is to fix text to the top of the screen (like you can do with the nav bar, but I want it to be just a heading text for a section of the site instead of the nav bar), and then when you scroll down to the next section, new heading text bumps it out of the way and stays locked until the next section.
Looking at my design I've uploaded, I'd like "motalife.photography" to be at the top while scrolling through the photography section, and then to get bumped out of the way and have "motalife.design" to be fixed at the top while scrolling through that section. Is it possible?
You might like to read up on "position: sticky":
https://developer.mozilla.org/en/docs/Web/CSS/position
A common use for sticky positioning is for the headings in an alphabetized list. The B heading will appear just below the items that begin with A until they are scrolled offscreen. Rather than sliding offscreen with the rest of the content, the B heading will then remain fixed to the top of the viewport until all the B items have scrolled offscreen, at which point it will be covered up by the C heading, and so on.
From what I've read, it was dropped for a while but has recently been revived. So it may not work in all circumstances, and there are various associated issues you'll want to be aware of. I've just tested it on a div in my current project (including -webkit-sticky and -moz-sticky for good measure), and it seemed to work as described (in FF and Chromium on Mint).
I am making this website: http://charlottebrand.nl/BFA/index.html
As you can see the design is made so that the word 'ARENA' is being cut off at the top and bottom of each section.
What I want is this: when you scroll up past the top (this elastic effect of the browser is triggered) you'll be able to see the whole word 'ARENA' instead of it being cut off, as it is now.
I've tried to give the body more padding, open the page at the right height and then added a snap scroll to create the elastic effect, but all in vain. It's always too glitchy! I feel like there should be a simple solution. Something in the line of rubber band scroll?
Help is much appreciated!
PS Here you can see my latest try: http://charlottebrand.nl/BFA/index2.html
Here's the url:
http://teothemes.com/wp/nam-fermentum-suscipit-metus-at/
When you click on the next arrow for the first time, it overlaps the content, I suppose it's about the margins, but I'm not sure about it. Also I noticed it's only when I use fx: scrollHorz, I really like that one so I'd want to use it.
Also one more thing, is there any way of making the cycle plugin go back to the first item when arriving at the last slide instead of scrolling to the right I'd like it to go 2 slides back to the first one.
Fixed it by making the width 100% for .panel div that contained the content
I have a sample of the new version of my non profits website up at http://www.blazingoctopuss.com
Using the top nav bar, when you go between index and about us or between index and donate, the entire page shifts about 5 pixels to the side.
However, when you go from index to services the page stays put. Also when you go between about us and donate, the page stays in one place.
So there is something about about us, and donate that is different than index and services but I cannot see what it is. They are all using the same style sheet and I can't see anything different in the way I've called the pages.
Can anyone tell me what I'm doing wrong? Thanks in advance for giving it a look!
It shifts the exact amount required to add a vertical scroll-bar (a lot more than 5 pixels, but different in every browser) whenever content exceeds the height of the window. This is normal and expected behavior, there is nothing wrong with your design in this regard.
just as Sparky 672 said. This is normal.
However, if the transition bothers you, add a (disabled) scroll-bar to the pages that don't need one by adding this line to the css:
body { overflow: auto }
now there will no page "jumps" when navigating the site.
I'm experiencing some strange behavior with a project i'm working on:
http://daft.net76.net/yah/
When you click the rules link the entire layout shifts to the left by a pixel or three. I've attributed this to the amount of content in that div, because when you click the 'Scores' link, which has a smaller content height.
The lower div structure looks like the following:
<div id="lowercontent">
<div id="rulesDiv" >
<h1>Rules</h1>
<p>Clicking the roll button rolls the dice. You have 3 rolls per turn.
After rolling you can choose to keep dice through rolls. Click a die to keep it through a turn.
Submit a combination of dice by clicking an option and clicking Score Roll.
To claim yahtzee either click the zee button, or score roll without anything selected.
To claim yahtzee either click the zee button, or score roll without anything selected.
To claim yahtzee either click the zee button, or score roll without anything selected.
To claim yahtzee either click the zee button, or score roll without anything selected.</p>
</div>
<div id="scoresDiv">
<h1>Scores</h1>
<p>1</p>
</div>
<p id="closeTest"><span id="close">close</span></p>
</div>
I'm using jquery functions to swap between the scores and rules.
lowercontent is a fixed width div. The inner rules and scores divs have no width.
Any ideas? Let me know if more detailed css on the divs is needed.
When the Rules div is shown, it is causing the scrollbar to appear. First, its really not a big deal.. I would just leave it alone.
If it really bothers you, add this to your CSS:
html { height: 100% }
body { height: 101% }
This will force a scrollbar to always be present so the layout won't shift.
My original answers are below but the truth is, there's only one good answer to this if you feel you need to do anything at all: modal windows.
A modal window is one that pops to the foreground and needs to be actioned before you can carry on doing what you were doing. You've used one before even if you didn't know the name. One example is an open file dialogue in an application. You have to pick a file or cancel to carry on.
On the web, you can replicate this functionality quite easily. It involves "overlay" over the content to stop the user touching it and the modal box on top of the overlay. Most web-examples shade the overlay to let the user know what has focus.
This fixes your problem because it stops the content getting longer by putting the new content over the old content and therefore the scroll-bar doesn't need to show.
Luckily for you, there are prefab solutions (see the last line of this) but I think the one that will work best for you is Facebox. It's light and sexy and does the job of just showing some information. it doesn't look like you need to get too bogged down in other actions.
Here, at least, it's because the scrollbar on the window pops up.
There are a few ways to fix this but all are pretty hacky or imperfect:
Use a left-aligned design.
On load, if the height is bigger than the computed height of the content (no scroll bar) force the content to create a scrollbar. Compare widths. Deduct half this from your left margin on your content. Yuck!
Manually centre the content using onload and onresize hooks to change the margin on the content. Probably the cleanest and you can leave it on margin:auto just in case. This won't work for IE6 but I guess that's expected.
You can put the content into tabs that the user has to switch between.
Use pop-in modal layers instead of attaching the content to the bottom of the page. I'm thinking something like LightBox but with content instead of images. I think there's probably a script out there that does this with content already.
Edit: See this for more tips on modal windows.