I have a chat window, and I want to always see bottom of this chat. I tried two ways, both of them are here: http://jsfiddle.net/9hMXL/518/ and none of it works.
What am I doing wrong?
Also, since SO requires me to put some code here, here is html of the page:
<div id="contt" class="cont">
<div class="inner">
<p>Hi there! Nice scrollbars, aren't they?</p>
</div>
</div>
#contt doesn't have the scrollbar. window does.
$(window).scrollTop(400);
http://jsfiddle.net/9hMXL/519/
$(window).scrollTop(window.height)
Or if you're using an internal frame, use it in place of window.
Related
I'm trying to make an entire website with all events triggered by scrolling. I just need help to achieve this effect :
I have a website with a few divs which fill all the viewport, I want the user to be able to scroll down to a named div and then when he keep scrolling the website stop scrolling vertically but the content of the div scroll horizontally. when it's done the website can scroll vertically again.
<body>
<header> </header>
<div class="scroll-vertical" id="tile1"></div>
<div class="scroll-vertical" id="tile2"></div>
<div class="scroll-vertical" id="tile3"></div>
<div class="scroll-horizontal" id="tile4">
<div class="horizontal" id="tile5"></div>
<div class="horizontal" id="tile5-a"></div>
<div class="horizontal" id="tile5-b"></div>
<div class="horizontal" id="tile5-c"></div>
</div>
<div class="scroll-vertical" id="tile6"></div>
<div class="scroll-vertical" id="tile7"></div>
<footer> </footer>
How to make that the website can only be scrolled from one div to the other ( full page)
I know there is a jquery plugin named fullpage.js which does that pretty well but as a student learning web development using plugins is not the best way to improve my skills.
Thanks for your help!
Cheers Simon
Why would you assume that ?
I doubt it can get much simpler than
$(document).ready(function() {
$('#fullpage').fullpage();
});
The author of the plugin also most likely already encountered, considered and had to solve a number of details and issues, cross-browser and non, that you have not yet had a chance to think about.
Edit :: animating divs:
$( "#bigasshorizontaldiv" ).animate({
left: "-=thewidthofoneviewport",
}, 5000, function() {
// Animation complete.
});
I searched several of the suggested questions that came up when typing this, but I couldn't find an answer to my problem.
I'm using Uikit V2, and I have a div with the Sticky component. Here:
<div class="uk-sticky" data-uk-sticky id="nvbr">
<nav class="uk-navbar-center">
<a class="uk-button" href="#pg5"><h3>Contact</h3></a>
<a class="uk-button" href="#pg6"><h3>AboutUs</h3></a>
<a class="uk-button" href="#pg3"<h3>Services</h3></a>
</nav>
</div>
This works fine on the full screen, but when I resize to a small screen, the bar gets very wide. I open then in the inspector in Chrome and I get this line:
<div class="uk-sticky-placeholder" style="height: 123px; margin:0px;">
Where would this be in my code and how can I fix it? I looked in Uikit and the Uikit.js.
(I should note, that when I am in Inspector, if I change that 123px to say 10px, it looks fine.)
Thanks all.
I think it just counts height based on collapsed elements in the viewport.
https://github.com/uikit/uikit/blob/v2/develop/src/js/components/sticky.js#L286
The thing I would do if I were on your place, I would hide navbar elements on smaller devices with conditional classes and prepare of canvas menu (take a look inside docs).
Or try to take over control with your own js script.
The playground
http://labs.recgr.com/polymer-dev/test1.html
My goal
I've managed to replicate this animation, but I need it to have content as well (text and images).
The Problem
Inserting content - I've been experimenting with adding just text for now, and I cannot get it working.
What I've tried
Adding content directly to div circle div container in circles-page.html, it doesn't work properly.
<div class="circle">test</div>
Result:
Getting position with jQuery, on circles-page.html (at the bottom of the page):
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function() {
var sq_pos = $(".square");
console.log(sq_pos.position());
});
</script>
.. and then using that to make an invisible div above that, to display content.
Result: undefined (in Chrome Console)
I also tried using jQuery to add content once Dom is ready, but it didn't work, nor did various properties inside Polymer object I've tried (that I've seen on documentation).
Thank you.
You can use Polymer's layout system to achieve this easily.
To lay out all the circles horizontally, apply horizontal layout to the parent div. Then you just need to use center-center horizontal layout on the child div to center the text.
<div class="horizontal layout">
<div class="circle center-center horizontal layout">test</div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
You can read more about this iron-flex-layout from here.
I've been playing with Scrollmagic and managed to get a few things working. What I'm trying to do right now is create a sticky social sharing bar for my blog at the bottom of the viewport. I've had no issues managing to get it to show up with my code
// Sticky Share Bar
var stickyShareAnimation = TweenMax.fromTo(shareBar, 0.5,
{ bottom:-50},
{ bottom:0 }
);
var share = new ScrollMagic.Scene({
triggerElement: '.entry',
offset:60,
})
.setTween(stickyShareAnimation)
.setPin('.share-bar')
.addIndicators()
.addTo(controller)
This is the HTML
<section class="share-bar">
<div id="share-container" class="container">
<div class="row">
<div class="col-md-12">This is the content</div>
</div>
</div>
</section>
<section class="blog-content">
<div class="container">
<div class="row">
<article class="single-post">
<div class="entry">
<?php the_content();?>
</div>
</article>
</div>
</div>
</section>
<section class="Test">
Where I want sharebar to tweenout.
</section>
I know I could fade out the sharebar with another Tweenmax animation targetting the "section Test" but figured there was probably a better way to do so with my initial javascript. Is there another way or would I need to create a seperate Tween for the sharebar to hide after content (div.entry) finishes.
Codepen http://codepen.io/anon/pen/aOWBQZ
If you want scrollbound animation (scene duration > 0) then yes, you should create one scene for animating the header in and one to animate it out again.
If you want to trigger an animation and animate the same property (i.e. opacity, when fading in and out) using ScrollMagic's setTween method, there will be problems related to property overwriting.
For details see here: https://github.com/janpaepke/ScrollMagic/wiki/WARNING:-tween-was-overwritten-by-another
NOTE: The wiki was written for ScrollMagic 1.3, but the same principle applies.
The recommended solution is this (Updated for ScrollMagic 2.x):
http://jsfiddle.net/xk22Lx50/
An easier solution however might be to define a CSS class and use setClassToggle to add or remove it for a certain time.
Animation can be achieved using CSS animations.
See: http://scrollmagic.io/examples/basic/class_toggles.html
And one more thing:
If your pinned element is always pinned (as in your example) and just animates in or out, but is never part of the DOM flow, there is no reason to make it sticky (i.e. to use ScrollMagic's pin functionality).
Just set it to position: fixed in css and you're done.
You can still use ScrollMagic to animate it in and out, but have less (unnecessary) JS code.
I have a strange problem I can't figure out. I'm developing some navigation (that is responsive) independent from the rest of my site, and all is going well, except for one thing. If you load the page at a normal desktop size, the navigation is correctly above the placeholder image. But if you resize the browser window skinnier to where it switches to tablet size, and then resize it wider again, the navigation goes below the placeholder image.
Maybe it's something simple or maybe it's not. I can't figure it out.
My html structure is
<body>
<div id="page">
<div id="wrapper">
<nav></nav>
<section id="content"></section>
</div>
</div>
</body>
So I'm not sure how the content section is getting above the nav, but if you inspect the code and look at the html after doing the resize I describe above, the code becomes
<body>
<div id="page">
<div id="wrapper">
<section id="content"></section>
<nav></nav>
</div>
</div>
</body>
I'm not sure if it's the javascript I'm using or what the deal is that is juggling that and not resetting it. Surely it's not a missing CSS declaration...
EDIT: Resolved! Thanks Chris!
Looking at the code beginning on line #2619, the destroy function expects there to be an element #header, which doesn't exist. Add the element #header as the first element within your #wrapper and the issue will resolve. I'm assuming this isn't your JavaScript, so I wouldn't recommending changing it; instead, adjust your markup to give it what it expects.
Try changing the navigation.js line
a.elt.insertAfter("#content");
to
a.elt.insertAfter("#header");