My site has blog posts played out down the page… In the top right, I have navigation, with an option to jump to the last post in September. I know the id of the div that contains this post is #post2, so I'm trying to use jQuery to scroll the page to that div, like this:
$("html, body").animate(
{ scrollTop: $("#post2").offset().top },
500);
What could I be doing wrong?
You can utilize the window.scrollTo function, by calculating the according coordinates, but if you are using jQuery there are out-of-the-box ready plugins with smooth scrolling support like jquery.scrollTo.
Here a Code-Snippet that demonstrates it:
$(function(){
$('#btn').click(function(){
$.scrollTo('#post2', 800 );
});
});
div {
width: 200px;
}
#large {
height: 1500px;
background-color: grey;
}
#post2 {
height: 100px;
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://demos.flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js?1.4.11"></script>
<button id="btn">scroll</button>
<div id="large"></div>
<div id="post2"></div>
In your case you need to add overflow: hidden; to the UIPostContainer class, since you can not scroll to an element without a height. And because you have a ~50px height fixed header that overlays everything you have to account for that as well, e.g. like that: $.scrollTo("#post2 h4", 800, {offset: {top:-55} });
Your code is 100% right it has no mistake
and as I saw your site is working too
Your code is right but the behavior you want is not there because the height for the divs of postcontainer like $('#post2) is not correct (it is 0px) in terms of styling.
Related
So I'm trying to figure out how I'd go about coding something similar to this website: http://www.nataliads.cl/ and how to have the text scroll down for a certain length, but not have the picture to move.
If you are trying to keep a floating block of text or image above the images moving underneath, you can use css "position:fixed;".
.floating-block{
position: fixed;
top: 25%;
right: 25%;
width: 50%;
border: 3px solid red;
background-color:white;
}
example:
https://jsfiddle.net/NYCguyJason/vxcj31zj/
Or the opposite... (because your wording is a bit confusing)
If you are trying to have fixed position image which does not move while the rest of the page scrolls, try this example:
https://jsfiddle.net/NYCguyJason/4n9ab0x6/1/
.fixedBackground {
width: 100%;
position: fixed;
top: 0;
}
Edits
Edits
**EDITS Per your new comments **
Per your comments, here are some additional ideas to get closer to what you described:
1. Pure CSS:
Set the "z-index"s so that certain elements stay on top of others. (highest z-index stays on top. You must set the "position" to something to use "z-index")
demo:
https://jsfiddle.net/NYCguyJason/vxcj31zj/1/
.fullwidthblock { /* this is the first background */
position:relative;
z-index:1;
}
.floating-block{ /* this is the floating block */
position: fixed;
z-index:2;
}
.stayOnTop{ /* this is for all blocks further down the page that should always stay on top*/
position:relative;
z-index:3;
}
?Do you have jquery on your site?
2. Custom Javascript or Jquery:
Keep the element Fixed, until you scroll to a certain point, and then make it scroll up with you.
There's an answer here: (but it seems to be using an older version of jquery)
Stopping fixed position scrolling at a certain point?
3. A full Jquery plugin:
Sticky Kit
http://leafo.net/sticky-kit
--Seems okay
ScrolTo Fixed
http://bigspotteddog.github.io/ScrollToFixed/
--This looks like your best bet, so I updated the jsfiddle to show you this option:
https://jsfiddle.net/NYCguyJason/bn9ekcds/7/
<!-- grab jquery -->
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<!-- grab plugin script -->
<script type="text/javascript" src="https://cdn.rawgit.com/bigspotteddog/ScrollToFixed/master/jquery-scrolltofixed-min.js"></script>
<!-- trigger the plugin -->
<script type='text/javascript'>
$(window).load(function(){
$('.floating-block').scrollToFixed({
marginTop: 80, //how far from the top of the window to start
// limit: $($('.stayOnTop')).offset().top
limit: 550 //when to make the fixed element start scrolling up
});
});
</script>
I'm trying to force an embedded tweet to behave responsively by setting its width to 100%.
I've attempted adjusting the width inline as follows:
<blockquote class="twitter-tweet" width="100%">...</blockquote>
I've also attempted styling the twitter-tweet class as follows:
blockquote.twitter-tweet {width:100% !important}
Both approaches have failed. Is this simply being overwritten by the script Twitter requires to be included with the tweet embed? (The script can be referenced at http://platform.twitter.com/widgets.js.)
Any help in forcing the embed to 100% width would be very much appreciated.
Since May 2016 Twitter use an other embed HTML. It looks like this. They droped iFrame integration.
<twitterwidget class="twitter-tweet twitter-tweet-rendered" id="twitter-widget-1"
style="position: static; visibility: visible; display: block; max-width: 100%; width: 500px; min-width: 220px; margin-top: 10px; margin-bottom: 10px;"
data-tweet-id="732567624345915393">
<div data-twitter-event-id="1" class="SandboxRoot env-bp-350" style="position: relative;">
...
</div>
</twitterwidget>
In the DOM you will find an Element called #shadow-root after twitterwidget open tag (check out in Chrome inspector). From now it is possible to manipulate all Twitter Ebends by css and pseudo element shadow.
Example for width:
twitterwidget::shadow .EmbeddedTweet {
width: 700px;
max-width: 960px;
}
Example
- https://jsfiddle.net/86dc9y5t/
Do not use on product pages:
- https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM
Cory, this is not possible using Twitter's provided embed. Well, it's possible to some extent, but only up to 520px. See https://dev.twitter.com/docs/embedded-timelines.
However, you can add width="2000" like this `
<a class="twitter-timeline" width="2000" href="https://twitter.com/twitterapi" data-widget-id="YOUR-WIDGET-ID-HERE">Tweets by #twitterapi</a>
`
And then adjust your CSS. It's not the best solution, though.
there's an old post that might be of use for you, don't know if still works, but worth a view, check it out at http://kovshenin.com/2012/quick-tip-how-to-make-tweet-embeds-responsive/
Simply set the width setting the width of the widget itself.
Check inspecting in the console what is the id of the widget container.
#twitter-widget-0{ width:100%; }
Unfortunately the above solutions didn't work for me, it only worked when I queried shadowRoot and execute with delay after the tweet loads:
Javascript
setTimeout((function() {
return $('.twitter-tweet').each(function() {
return $(this.shadowRoot).find('.EmbeddedTweet').css({
width: '99%',
maxWidth: '100%'
});
});
}), 2000);
Coffeescript
setTimeout (->
$('.twitter-tweet').each () ->
$(this.shadowRoot).find('.EmbeddedTweet').css
width: '99%'
maxWidth: '100%'
), 2000
This solution works for me.
Basically, you have to inject some css into your twitter widget iframe.
This example use jQuery
<style type="text/css" id="twitter-style">
.timeline { max-width: 100%; }
</style>
<script type="text/javascript">
twttr.widgets.createTimeline(
'WIDGET_ID_GO_HERE',
$('#widget-placeholder-go-here')[0],
{
chrome: 'nofooter noborders noheader' //optional
}
).then(function(el) {
$(el).contents().find('head').append($('#twitter-style'));
});
</script>
The described solution with shadow seems to apply only to Chrome. For other Browsers it is posible to manipulte the with by javascript. Here is an Example with jQuery.
jQuery(window).load(function () {
jQuery('.twitter-tweet').contents().find('.EmbeddedTweet').css({
maxWidth: "960px", width: "100%"
});
});
For anyone who is wondering why these solutions sometimes don't work; it's because twitter cards has a title and content with white-space:nowrap
But don't worry, this is the only code you will need to use, because it covers all cases (atm):
#twitter-widget-0,#twitter-widget-1{ width:100%; }
twitterwidget::shadow .SummaryCard-content *{white-space:normal !important;}
twitterwidget::shadow .resize-sensor{display:none !important;width:0px !important;overflow:hidden !important;}
The idea is to have images that appear on the page in a sliding way (sliding into place) and that part I managed to make.
What I don't seem to be able to achieve is to add some kind of easing to them - for example the image should go faster in the beginning and slow down right before reaching its destination.
I have the first part working on my website, but in the fiddle I created nothing works - anyway, this is it: http://jsfiddle.net/Sf5jC/ :
HTML:
<div id="click-me">
<div id="square"></div>
</div>
CSS:
#click-me {
width: 1000px;
height: 1000px;
}
#square {
position: relative;
left: 300px;
height: 100px;
width: 100px;
background-color: orange;
}
JS:
$('#click-me').click(function (e) {
e.preventDefault();
$('#square').animate({
left: 0
}, 500);
});
Could somebody please give me a suggestion? I'm quite a newbie in jQuery.
In fiddle nothing works because you did not select any library for it to work
Take a look at fiddle now Fiddle
And how about something like this to slow down
Fiddle
$('#click-me').click(function (e) {
e.preventDefault();
$('#square').animate({
left: 100
}, 500);
$('#square').animate({
left: 0
}, 1500);
});
As the commenter pointed out - you're missing jQuery from the fiddle which is why it doesn't work.
jQuery comes with 2 different easing options out of the box, swing (the default) and linear which as the name suggests is constant.
However, there's a really good library for different easing options that you can plug in - there's a link here and you can try out the different kinds on the page. Download it, include it in your website (after jQuery) and you can use the different easing methods.
To use easing in your code just add the type of easing after the duration. E.g.
$("#element").animate({"left":0},1000,"easingName");
Lately I have come into a dead end. I'm trying to expand the footer (#footernotes) and that works, it's basically a div behind the body (done with z-index) and when you click on a button it moves down. The scroll bar goes with it too, meaning that the page is now longer.
But what I'm trying to do is to make the viewport move with the expanded div. What happens now is that when I press the button (.secret) the div (#footernotes) comes in but it is still out of the viewport UNLESS you manually scroll to view the longer page.
So to some it up, how do you make the viewport automatically scroll down after you expanded the page? In other words, how do you make the viewport stay at the bottom of the page.
Here is my code:
<script>
$(document).ready(function(){
$('.secret').click(function(){
$("#footernotes").animate({top: "100px"}, 1000);
return false;
});
});
</script>
<div id="footer">
</div>
<div id="footernotes">
</div>
</div> <!-- end #footer -->
And the CSS for #footernotes
#footernotes {
background-color: red;
width: 100%;
position: relative;
top: -80px;
height: 150px;
z-index: -400;
}
EDIT: While typing up the question I figure out the answer, you have to use the scrollTop. I have added the line code in the example below:
<script>
$(document).ready(function(){
$('.secret').click(function(){
$("#footernotes").animate({top: "100px"}, 1000);
$('body,html').animate({scrollTop: "210px"},1000);
return false;
});
});
</script>
You can still answer this if you think there is a better way, I just thought I'll leave this question posted in case other people have the same question.
document.getElementById('divID').scrollIntoView();
try and see if that would do the job.
It can be done using Jquery method .focus(). just need to add
$(divname / .class / #id).focus();
and it would be done.
I have created an example to help explain. http://jsfiddle.net/9AUbj/1/
<style>
div#one {}
div#two {
height: 50px;
background-color: blue;
width: 1000px;
}
div#three {
height: 1000px;
}
</style>
...
<div id="one">Hello World!</div>
<div id="two"></div>
<div id="three"></div>
I would like "Hello World!" to move horizontally with the window when the user scrolls horizontally. But I DON'T want it to move vertically with the window when the user scrolls vertically. What is the best way to do this? I'm using Bootstrap and jQuery UI, in case those might help. However, I am also interested in a pure CSS solution.
Thanks in advance :-)
ktm
Whenever you scroll the window, reposition the #one element to always be on screen. Also, #one should be position: absolute.
$(window).scroll(function () {
$("#one").css({
left: $(this).scrollLeft()
});
});
Here's your fiddle with the new code: http://jsfiddle.net/9AUbj/15/
While I admit that a CSS-only solution would be cool, you can't apply positioning based on axis. With how fixed positioning works, you can't force a horizontal scroll on the document even if the fixed-position element extends outside.
However, this is very simple to do with jQuery
$(document).on('scroll', function () {
$("#two").css('top', $(this).scrollTop());
});
This requires #two to be absolutely positioned.
http://jsfiddle.net/9AUbj/16/
i used this code
$(window).scroll(function () {
$("#one").css({
left: $(this).scrollLeft()
});
});
and it works perfect on Chrome , but on internet explorer when i drag the horizontal scroll, the fixed content starts to flicker :(