I have been looking around for ages but can not find a correct solution for this.
Brief:
I have a fixed bar at the top of the page. As the user scrolls past each ID, I need the text in the fixed bar at the top to change. So for example, if the user scrolled on to #ID2 then the text would change to 'Test'.
What's the best way to do something like this? I am assuming JS but am only just starting to learn JS.
Any guidance is very much appreciated.
See if following works for you:
HTML
<div id="fixed-text"></div>
JavaScript
function update_text() {
if($(window).scrollTop() > $('#ID2').offset().top
{
$('#fixed-text"').text('Test');
}
}
$(window).scroll(function() {
update_text();
});
Related
I copied this from another post, not blindly, I can see what it does but I can't think of a way to fix the problem. I am not really proficient in JavaScript but I can read this snippet.
// The function actually applying the offset
function offsetAnchor() {
if (location.hash.length !== 0) {
window.scrollTo(window.scrollX, window.scrollY - 100);
}
}
// This will capture hash changes while on the page
$(window).on("hashchange", function() {
offsetAnchor();
});
// This is here so that when you enter the page with a hash,
// it can provide the offset in that case too. Having a timeout
// seems necessary to allow the browser to jump to the anchor first.
window.setTimeout(function() {
offsetAnchor();
}, 3);
;(function($) {
$('.swipebox').swipebox();
})(jQuery);
The issue was, that when I was scrolling to DIVs with ID's used for anchor points, I was scrolling slightly too far down as I have a sticky header. I tried using this so when changing DIV it would account for the sticky header, it doesn't exactly work perfectly but the main issue I am having, is that I will have over 12 navigation DIV ids, and every time anyone of them is clicked it no longer goes to the DIV, but instead just scrolls up -100 pixels.
I essentially need a solution that will scroll to just above where I need it without affecting the rest of my menu functionality, it doesn't have to be achieved by JS but that's the only feasible way I can see a solution (I've tried thinking of a CSS only one but margin/padding won't help in this situation of scrolling)
To give one last detail, when clicking on a navigation div it will scroll to that div, and the menu (sticky header) will cover some of the image and the of the item scrolled too. Major problem :)
I can leave a link if you'd like a better description and I am learning JS at the moment, but as this is for a client I'd love to be able to fix it within a timely manner and would greatly appreciate any and all help anyone can offer.
Thank you.
In this question there's an answer for jumping to certain element.
If you want a smooth scroll: look here.
I am trying to make an interactive brand guide site and I wanted to make a single scroll layout.
I want to implement a background that changes color when it reaches to the next section in the navigation
Basically, what I want to do is exactly what this MailChimp site does:
http://mailchimp.com/2012/#
I tried looking through the code with no avail. Anyone know how to go about doing this?
There are many ways to achieve that effect, I will let you know the way I find the easiest to understand.
assuming you have a container with the background color you wish, you just have to add a little jquery that will add a class to that container to overwrite the "old" background color:
$(window).scroll(function () {
if ($(window).scrollTop() > 500) {
$(".background").addClass("red");
} else {
$(".background").removeClass("red");
}
});
Here you have a FIDDLE that will make it easier to understand (english not my main lenguaje)
Edited: I edited the fiddle to add a simple transition.
This is the plugin:
Fancyselect page - http://code.octopuscreative.com/fancyselect/
This is the situation:
I need to control the position where the selector window with the various options is going to open.
I have tried to look into the code, but i did not figured out how to do it.
But i think that, by default, it depends if there is or not some space above.
To be more clear I have recreated two examples:
Here the selector is opening at the top: http://jsbin.com/AqoYucAG/2/edit
Here the selector is opening at the bottom: http://jsbin.com/AqoYucAG/3/edit
But, trust me, the css and the js are exactly the same in the both.
What change is that in the second example it misses the div with its content.
My actual situation is similar to the first example: the fancyselect is under a div with some text, and as in the jsbin, the selector is opening at the top, while i need to open it at the bottom.
This is the question:
How is possible to control the position where the selector is going to open?
And how to make it opening at the bottom?
Thank you!
if ((parent.offset().top + parent.outerHeight() + options.outerHeight() + 20) > $(window).height()) {
options.addClass('overflowing');
} else {
options.removeClass('overflowing');
}
}
he add and remove overflowing class
that css class control the way control is opened
if add > options.addClass('overflowing');
the select will open at the bottom
to test that try to comment //options.addClass('overflowing'); and see the behavior
We are trying to fit the content in div inside main div. But half of the line is being cut. How should we avoid this. How should we identify that line and create span around those words and move it slightly up or down.
We were trying with offsetheight, offsetTop etc as we do not want to use scroll bar. Any idea in jquery to handle this.
Code here: jsfiddle
I am playing around with your code... I'm not 100% sure of what you are trying to accomplish.. but check out the revisions I made and let me know if it gets you any closer to what you are trying to do.
I added in the functionality for the next and previous and also modified your surrounding box so there is no padding. You can tweak all this, but maybe this will prevent the need to try to move stuff around via jquery?
DEMO: http://jsfiddle.net/r5eZ7/3/
$(".next").click(function() {
var visiblep = $(".content p:visible");
if (visiblep.next().length == 0)
{
$(".content p:first").show();
}
else
{
visiblep.next().show();
}
visiblep.hide();
});
I am making a little messaging / chat system that is working nice and fine. The problem is, the <div> which the messages are outputted to does not scroll the way I need it to.
All the new messages are added to the bottom of the div and when more are added and the scrollbar shows up, the scrolling stays at the top of the <div>. I need this to be reversed, so that the scrolling always sticks to the bottom of the <div>.
A good example of what I want would be Steam's chat windows, or even this text input which I am using to fill out the question.
As I would like to avoid jQuery, this has me completely stuck. If you could point me in the correct direction that would be great! I am not sure if HTML and CSS can handle this, or if JavaScript is necessary at all.
The Javascript code below should keep your div's scrollbar positioned at the bottom like you described:
var objDiv = document.getElementById("divExample");
objDiv.scrollTop = objDiv.scrollHeight;
This solution and more information can be found on the link below:
http://web.archive.org/web/20080821211053/http://radio.javaranch.com/pascarello/2005/12/14/1134573598403.html
I think this is a better solution:
element.scrollTop = element.scrollHeight - element.clientHeight;
For Kotlin I have used the following:
val element = view?.findViewById<ScrollView>(R.id.uidScrollElement)
element?.smoothScrollTo(0,element.measuredHeight)