I'm trying to recreate something similar to the following:
https://www.apple.com/uk/ipad-mini/design/
When you scroll down on the page it seems to understand that a certain area, when viewed, triggers an animated element. I'm trying to base next steps on this but unsure what to start in. I understand elements of HTML, CSS, DIV Tags and potentially switching on a hidden block when viewed might be the answer. But need advice of the simple trigger element. Java? PHP? CSS?
So when the user scrolls down maybe 30% a hidden element appears or animates. I would animate in adobe edge if that helps.
Any good?
Try to do it with Jquery (scrolltop)
$(window).scroll( function(){
if ($(window).scrollTop() > 150) {
// If window is scrolled by 150px do this
}
});
Hope this helps
Related
I have a div that has overflow: scroll, and I want it to always scroll to bottom along Y-axis no matter what content it has. (think about a chat thread, which always displays the latest message at the bottom.)
I saw there are some jQuery solutions that scrolls the div to its height when new messages get added, but I am wondering if there's any pure CSS solution to this?
Thank you!
Unfortunately, not possible with pure CSS but you can use pure js to get the total scrollable height of element with elem.scrollHeight and scroll the element to that position with elem.scrollTop
you can see in this example
the js code is:
var elem = document.querySelector("theElementClass");
var elemHeight = elem.scrollHeight;
elem.scrollTop = elemHeight;
hope this helps. =D
I have two fixed elements with a background image that I want to have scroll with the page, without the element scrolling. Here's the jsfiddle: http://jsfiddle.net/3s3qu2yv/
Is there a way to accomplish this in pure CSS? I know there is a way to do this is javascript but I'd like to avoid that if possible.
Not sure what you are asking here. It looks like you have already accomplished this in your fiddle.
Otherwise background as a background-attachment attribute that makes it scroll along with an element.
This is commonly used in parralax sites.
There is not a way to do this with just CSS, you will need JavaScript. THIS jQuery to be exact:
http://jsfiddle.net/3s3qu2yv/4/ -- updated to better illustrate the effect I'm going for.
function scr() {
var scrolled = $(window).scrollTop();
$('.fx').css('background-position', 'center -' + scrolled + 'px');
}
$( document ).ready(function() {
$(window).scroll(function(){
scr();
});
});
A fixed element's background cannot scroll with the page, regardless if the background-attachment is set to fixed or scroll because the element itself does not move.
I have a HTML page with an internal DIV used for content. The internal DIV has its own scrollbars. I would like to automatically scroll to a certain position in the DIV.
How can I do this? (Note that I do NOT want to auto scroll the Window scrollbars - I already know how to do this)
A cross platform solution is needed
The div has a scrollTop property that you can set (and its pal, scrollLeft).
jsFiddle Demo
scrollTop on MDN
scrollLeft on MDN
there is this .scrollTo() method which can help you scroll through your divs. try it for more info visit here
As long as JavaScript is acceptable, I created a demo using jQuery that uses a known element with an ID inside the div.
$(function() {
var testOffset = $('#test').offset(),
scrollOffset = $('#scroll').offset();
$('#scroll').scrollTop(testOffset.top - scrollOffset.top);
});
If you only know how far, in terms of pixels, rather than to a specific element, it could be adapted to:
$(function() {
$('#scroll').scrollTop(100);
});
Add a div (where you want to scroll):
<div id="#scroll-here">Test..</div>
and add a link like this:
Scroll to Test
if you want a smooth scroll you can check this
You have to target taht div and set scrollLeft. scrollTop property.
const scrollingDivElement = document.getElementsByClassName("class_name");
if(scrollingDivElement && scrollingDivElement.length > 0){
//this is the div element that scrolls
scrollingDivElement[0].scrollLeft += 50;
}
I would recommend having a look at the scrollTo jQuery plugin. It's a really handy plugin that allows you to animate a scroll within any element. I've setup a small example in jsFiddle that demonstrates how it works. The example shows how you "scroll to" the third p in the first div, and then the second p in the second div. One thing worth noting, is that to ensure the position().top is correct, you'll need to set the containing div to have a position: relative;. Hopefully this isn't too much of a problem though. :)
As you can see if you go to the link below in IE7/AOL, the layout breaks if you resize the window. However, click the products menu tab and it rights itself. I haven't a clue why or how to fix it, and it looks sloppy. On resizing the page, the logo and breadcrumb trail div stay where they ought to be, but my horizontal nav menu and everything below the breadcrumb div end up about 20-30 pixels off to the right. On refreshing the page, changing page, or opening a pull down menu item, it all falls back into the correct alignment.
link text
It is working as it should. The li elements in the menu are all floating to the available space. If the window does not have enough space they will float to the next available line. Nothing to see here.
Just use the CSS min-width to stop the DIV from becoming too small for the menu. Or consider a rigid layout (as oposed to a flexible one).
Add the following line to your div to make it work.
#outer {
min-width:790px;
}
To fix incorrectly rendered (in ie7) divs, which correct themselves after hovering over something else, mousing out, or any other weird event, use the below jQuery:
if ($("html").hasClass("ie7")){
var tempHolder = $("#ajaxresults").html();
$("#ajaxresults").html(tempHolder);
}
The logic is pretty simple, and I'm imagine you could do it just as easily with javascript's "innerHTML". Just rewrite the html contents of the div that's misbehaving, and this'll cause it to recompute the styles.
As for giving the html or body tag the ie7 class, I recommend taking a look at html5boilerplate.com. If for some reason you can't use their solution, the jquery for it is:
if ($.browser.msie){
if ($.browser.version < 8){
$("html").addClass("ie ie7");
}
else {
$("html").addClass("ie");
}
}
[Update]
I actually compromised on this problem for now by foregoing the fixed footer design.
It seems that there is no problem with dynamic content moving the footer and resizing containers appropriately unless the footer is fixed to the browser bottom initially.
I hope others will eventually provide a great solution that encompasses the best of both worlds.
I spent all day trying to get the footer to move down the page to accommodate dynamically added (via ajax) content. I really need some pointers or links because I haven't found anything that helps.
Basically:
My site has some pages that begin with only a text box and a button so that the total height of the content area is only a few inches beneath the header area.
I don't have any problem getting the sticky footer working so that the footer appears at the bottom of the browser window even when there is very little content on screen.
That same css layout works fine for other pages that have content that extends beneath the browser window.
The catch:
The content has to be rendered and passed to the browser with the initial load.
The Problem:
Any content that is added to the page via AJAX after the initial load paints down the page correctly -- but the footer remains in its initial location.
Please tell me there is a fix for this.
I can't post the css until checking with my boss first - if possible - and if needed, I will later - but it's just a very basic version of the many sticky footer css solutions floating around the web.
Thanks.
Currently fixed similar situation with small jQuery and CSS, where parameter is footer div object (i.e. $("#mainfooter")):
function positionFooter(obj){
if ($("body").outerHeight(true) > $(window).height()) {
obj.css("position","relative");
} else {
obj.css("position","fixed");
obj.css("bottom","0px");
}
}
Bound this function to $(document).ready and $(window).resize.
If ajax call resizes body, this should be called also after content load.
It sounds like your footer is using display: fixed or similar. Try changing the container of your footer to:
bottom: 0;
display: block;
position: absolute;
That will ensure it appears right at the bottom of whatever container it sits within (I'm assuming the <body> tag). Your problem now becomes ensuring that it appears at the bottom of the screen rather than the bottom of your document, which starts of being much shorter. You could accomplish this in a couple of ways, but perhaps the easiest would be to set a minimum height on your AJAX content container:
min-height: 600px;
height: auto !important /* This is a hack to make IE6 fix itself to a set height */
height: 600px; /* IE6 will always follow whatever instruction appears last, even if !important is specified */
The other approach is since you're using a JavaScript library (I assume?) to grab the required content, perhaps you could also adjust the height of the AJAX content container or change the footer's CSS once that content has loaded?
Without any code it´s hard to tell what the problem might be.
However, I´m using a sticky footer as described here that works very well although I haven´t added ajax content in it. Browser resizing works just fine though.
Use include in PHP and call the footer after the dynamic content appears.
I'm not sure you are looking for this, but I am also facing the same problem before and same CSS, where my content overlaps on the footer when i call the ajax through jQuery method.
Now I found the solution: Just get the div height through jQuery and apply the height to the div where you are returning your results from ajax.
var obj = $("#viewcomm").height();
if($.browser.msie) {
$("#viewcomm").height(obj).css({cursor:"auto"});
}
where here viewcomm is div ID.
I solved same kind of problem with following code, where content is the id of div where php pages load and footer is the footer tag.
var footerAdjustId = setInterval(adjustFooter, 2000);
function adjustFooter(){
$("footer").css("marginTop", $("#content").height() - $(window).height());
clearInterval(footerAdjustId);
}