I don't know what this is called, but I've seen it on a few websites where when a div scrolls into view it flows to the top hiding the previous block (well scrolling out of view). It like a slideshow but vertically and shows the content. It's kinda like a normal scrolling web page but brings segments into view.
Does this make sense??
Does anyone know what this is called so I can Google how to do it in css or jQuery.
Thanks in advance
If I understand correctly your question you are searching for sticky position. You can see how to do it here: https://css-tricks.com/position-sticky-2/
Related
I have a div area that contains pagination, but for mobile devices to access the later pages the horizontal scrollbars do not show and the visitor has to use their finger.
I'm looking for a pretty simple solution, so I thought if I can detect if overflow has occurred a little image suggesting scroll with finger should be made visible.
Is this possible and does anyone have an example of how to write this?
We are instituting a new responsive web template design on our website, this design has worked perfectly in all but one place (We are on the Convio CMS if that helps). Here is what it is supposed to look like (menu and contact info in right column):
http://www.ucc.org/feed-your-spirit/practices/prayer-flags.html
On this page however:
http://www.ucc.org/find/find-a-ucc-church.html
that info appears below here. However after you use the find feature, the information then DOES appear on the right side as it should. This really has me stumped.
The find a church service is a component that can be placed on any page.
Secondary issue - the map is not visible on the results page in Firefox, though on the current page - www.ucc.org/find - it is visible.
Any solutions, ideas, etc. are welcome!
Two problems, both CSS. The left div, ef-inner3 does not have float:left nor width specified. This causes it to be too wide, pushing the topics area down.
You need to add those CSS values in. How you do that with your particular CMS system I am not sure.
The reason behind it moving down is thus: When you float two elements, their combined widths cannot be greater than the width of their parent. If they are greater then there is not enough room and the second floated item moves below the first.
Tricky one! But I'm thinking this might not be CSS.
My first reaction was that maybe a DIV isn't properly closed somewhere.
Based on the Find function fixing it, maybe you have a </div> that's set to display with the Find results, so it's not showing up before the Find function brings it up?
Hope that makes sense! If possible, try searching for any closing tags that are inside any kind of if/else statement.
EDIT - just noticed - A lot of the content in your Find a Church page seems to be after the 'three fourth' DIV, and after a 'clear' DIV. If you can edit the source, try placing all of that back inside the 'three fourth' DIV and see what happens.
I'm trying to develop a horizontally scrolling website in which clicking a link in the navigation scrolls the page to the right to the linked div.
The problem is I want the elements that it scrolls to to be horizontally centered within the browser window. I assume that this can be done using javascript, but I have no idea how to go about it.
Here is a pastebin link to my HTML: http://pastebin.com/YxajLvtW
And here is the CSS: http://pastebin.com/JpaJC2Yg
I know how to implement javascript, but not necessarily read/write it.
This should be helpful: http://www.arvindandrion.com/jquery/horizontal-scroll-using-jquery-scrollto/
General advice: Use a Javascript framework like jQuery to code Javascript functionality. It makes life a loooooot easier :)
Maybe take a look at this, too: http://api.jquery.com/scrollLeft/
How can I keep an image visible in browser window on a very long page vertically? (not centered as it is now) Here is the page that has the situation: http://designs-and-more.com/Apparel_Designs.html Note that as you scroll down you will see the links but I want them be visible at all times. Anybody have any help? If anyone knows of a link to an example that would be great since my programming skills are very, very basic. thanks greatly in advance.
The old-school way was to use frames. I believe most websites are not doing this these days (generally menus, side bars, etc. scroll away along with the page content) as they consider keeping the frames design to be undesirable for user interaction.
Ok I have checked your website. You have to add CSS speciality to your declarations.
vertical-aling: top;
.dsR37 {
background-image: url("images/but_Home_BG.png");
vertical-aling: top;
}
Example for home link, your other menu declarations different, so you have to add each other.
You're probably looking for CSS fixed positioning. Here's a demo from David Walsh's site: http://davidwalsh.name/dw-content/css-fixed-position.php
Google "css fixed positioning" and you'll find some demos on how to 'pin' the side nav to be visible no matter where the user scrolls.
I have a site based on Solar Sentinel Joomla template. www.sism.org
I'm having some visualization problem with chrome.
The right side-bar is shifted down after all the content, while it should be floating on the right!
Could someone explain me why?
PS: the template css is pretty messy, and there is some custom css and js made by me inline at the beginning of the page.
EDITED
It's hard to answer your question because you've not provided any code or other way for us to determine what might be going on for you.
At a guess, I'm going to say that the main content div on your page is extending (in width) and forcing the sidebar to drop underneath.
You can test this by making your main content section slimmer and see if the right hand bar decides to shift back into place.
As for why this might only be happening in Chrome and not other browsers, it's hard to know without more information.