How to get page 's scroll position change event?
I want to implement dynamic table of contents like http://bonsaiden.github.com/JavaScript-Garden/ ( In this website, with your scrolling of the webpage, It also shows the current active item)
Is it possible to implement same thing without getting current scroll-position?
I am very new to JS and web-world.
That page does use some JS trickery with its <nav> element, but it's fixing the location of the sidebar using position: fixed, that is, using CSS not JavaScript. Here's the relevant style declaration (comments mine):
nav {
position: fixed; // fix position
margin-left: 750px; // add 750 px of room to the left
top: 0; // set 0px from top of page
}
Related
I want to be able to change my navbar position on the fly adjusting remaining content accordingly.
So, I have a functiona website. There is a menu navbar on top by default. What I did is added an 'edit' button to that menu so that when you click it, you get a list of 4 checkboxes with the ability to choose if you want that menu positioned on top (default), left, right or bottom with the other content moving accordingly (e.g menu on the left, content goes slightly right, etc). So basically, I have something like this:
// css for menu positioning to the left
.navbar-left {
width: 25%;
height: auto;
}
.content-right {
position: relative;
left: 200px;
}
// css for menu positioning to the bottom
.navbar-bottom {
position: relative;
bottom: 0;
left: 0;
height: 200px;
}
.content-up {
position: relative;
bottom: 200px;
}
And in JS I do something like this
if($("#left"):checked){
$("#menu-bar").addClass("navbar-left");
$("#content").addClass("content-right");
} else if ($("#bottom"):checked){
$("#menu-bar").addClass("navbar-bottom");
$("#content").addClass("content-up");
}
Now, I have much more styling than this, but it is irrelevant to the issue at hand. The problem is when I choose 'left' it styles properly but when I change it to 'bottom' after that it still uses the styles from 'left' positioning and adds the new ones to it.
Right now I solved the issue by removing the previous classes with .removeClass() method, like that:
if($("#left"):checked){
$("#menu-bar").removeClass("navbar-bottom navbar-right").addClass("navbar-left");
$("#content").removeClass("content-up content-down").addClass("content-right");
} else if ($("#bottom"):checked){
$("#menu-bar").removeClass("navbar-right").addClass("navbar-bottom");
$("#content").removeClass("content-down").addClass("content-up");
}
Basically, right now I have about a hundred lines of just adding classes of the chosen positioning while removing all the classes of 3 other choices that I added each time.
So, finally the question: Is there any other way to strip all the classes that were used before (just set everything to initial values like when the page was loaded) instead of deleting all these classes by hand?
I haven't ever tried resetting the classes to their initial state, but you can certainly clear them all off of a single element in one line of code:
To replace all existing classes with another class, we can use .attr( "class", "newClass" ) instead.
source: https://api.jquery.com/removeclass/
You could probably combine that with the .toggleClass or another method.
If I had to sit down and do it right now, based on my understanding of your question I'd just hide the original elements and add new elements with the classes that you'd like, then to revert delete the new elements and restore the original one.
I currently have a list of objects (projects) that are presented to the user initially as div's that have have a 100px x 200px height/width, position absolute, and float left. This list is contained within an angular ng-repeat method (not sure that makes a difference in the overall question but figured I'd add it in just in case it does). There could be 100s of these divs on the particular project listing page. Currently, I have the page setup so that if you click one of the projects, it's details come up in a modal dialog box. This functionality is fine per the requirements for my project but I'd like to add some "umph" to it by adding in an animation that does the following:
1) If you click on one of the projects, the box expands up to fill the parent container that contains all the projects
2) As the div grows to fill the space or when it's full sized, I want to expose the details of the project itself. Essentially, when the project is unselected, it's just a title/description showing. When it is selected, the project div goes full screen, exposes all of it's details, and shows it's editable fields in the full screen version of the div.
3) When the user closes that full screen div, I'd like it to go back to it's original state in it's original position.
I'm only using the latest version of Chrome for this project so it doesn't need to be a cross browser solution. I'd prefer to keep the animation as close to pure css as possible and would prefer to leave jquery out of it.
I currently have no experience with css3 animations but got a book on it that I hope can teach me about this eventually. However, I figured I would ask in the mean time in case someone can help me out soon so I can put this functionality in while still meeting my deadline for the functionality.
Thanks in advance!
Create a second CSS class that can be added to your div element when it is selected, and removed when it is not. Something like
div {
top: 100px;
bottom: 200px;
left: 100px;
right: 300px;
transition: all 1s; /* animate changes */
}
.active {
top: 0px;
bottom:0px;
left: 0px;
right: 0px;
}
.content {
display: none; /* hide the content unless active */
}
.active .content {
display: block; /* show the content when .active class is added */
}
Make sure that the parent container fills the entire window and is itself set to positiion: absolute or position: relative. There will be a lot more details to work out as you go, but that should give you a framework to get started. You can then add or remove the .active class as needed with JavaScript.
I have a div element which I would like to be on the right side of the screen, but that does not update its position when the content extends dynamically the width of the page. I made some research, but it was unsuccessful. I know this can be done by using JQuery, but I don't know how. Any ideas?
Thanks.
You can use a fixed position on your div:
div { position: fixed; left: something; top: something; }
That would "glue" your div to the screen at the position you specify without any javascript. And if you scroll through the page, the div will stay at the same position.
What is the best approach to restricting an absolutely positioned element's position, ideally in pure CSS?
I know that the following isn't possible but I guess what I'm looking for would look something like:
.stickyElement{
bottom-max:auto;
bottom-min:0px;
top-max: auto;
top-min: 100px;
}
That would allow an element to move to a position no less than 100px from the top of it's containing, positioned element.
An example (and my initial) use case for this is a menu that scrolls as part of a page but stops scrolling when it hits the top of a viewport. (Sticky menus?) an example of which can be seen on this page:
http://spektrummedia.com/startups
I fully expect that this is not possible without using some Javascript but I thought I'd put it out there.
position: sticky
There have been discussions in the W3C about this in recent years. One proposal is the addition of a sticky value for the position property.
.content {
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
position: sticky;
top: 10px;
}
This is currently supported in Chrome 23.0.1247.0 and later as an experimental feature. To enable it, enter about:flags for the URL address and press enter. Then search for "experimental WebKit features" and toggle it between enabled and disabled.
On the html5rocks website, there's a working demo.
Strictly speaking, this is an implementation of sticky content, and not a general-purpose way to limit the minimum or maximum position of an element relative to another element. However, sticky content might be the only practical application for the type of the behavior you're describing.
As there is no way to build this for all major browsers without the use of JavasScript I made my own solution with jQuery:
Assign position:relative to your sticky-top-menu. When it reaches the top of the browser window through scrolling the position is changed to positon:fixed.
Also give your sticky-top-menu top:0 to make sure that it sticks to the top of your browser window.
Here you find a working JSFiddle Example.
HTML
<header>I'm the Header</header>
<div class="sticky-top-menu">
<nav>
Page 1
Page 2
</nav>
</div>
<div class="content">
<p>Some content...</p>
</div>
jQuery
$(window).scroll(function () {
var headerTop = $("header").offset().top + $("header").outerHeight();
if ($(window).scrollTop() > headerTop) {
//when the header reaches the top of the window change position to fixed
$(".sticky-top-menu").css("position", "fixed");
} else {
//put position back to relative
$(".sticky-top-menu").css("position", "relative");
}
});
CSS
.sticky-top-menu {
position:relative;
top: 0px;
width: 100%;
}
I know this post is old, and I might be a little late to it, but to anyone still wondering how to do this i would suggest checking out the clamp() method in CSS, you could do something like this:
top: clamp(30px, 10vw, 50px);
Which would set the min top value to 30px, the ideal value to 10vw, and the max value to 50px.
A media query expression that defines the distance between body 0X 0Y and browser-window 0X 0Y would allow elements to be made sticky after page is scrolled
No such expression has otherwise been proposed and is not supported by any browser, to my knowledge, but it would be a useful expression to allow dynamic configuration of sticky elements, such as menu bars that are sticky after page is scrolled past head, without use of JavaScript.
.this element {
position: absolute;
top: 200px;
}
#media (max-scroll: 200px 0) {
.this.element {
position:fixed;
top: 0;
}
}
To my knowledge, there is no way to restrict an element that was positioned using absolute positioning using solely CSS.
The form I am creating for a mobile website shows new fields based on previous selections. i.e. - a user selects and option from a dropdown menu (a date) and then a series of times shows up based on the day selected. The times are not showing until the day is selected.
I have a spinning loading div while the times are loaded in the background via ajax. The problem I am having is that the loading div sits at the top of the page when the 'action' is taking place about three-quarters of the way down. This 'action' part is in the viewport (it's a mobile website) and the loading div is at the top of the page - which is far above the users viewport.
How can I bring the loading div down so that it's always in the current viewport? How can I make the loading div follow the place in the form where the user currently is taking into account scrollbars?
I have been trying to use the vertically centred html/CSS model as described here:
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
But it is not working and the centre of the page doesn't seem to update at each event when a form element is clicked. I think I need to use the focus or blur event for the form field to update this and reassess, but I don't seem to be able to get it working.
Does anyone have any tips on how to move the loading div to the centre of the current viewport area each time the page increases in length?
If your loading div is designed to be inside the document flow - e.g. a new content block inside the form - it's best to use jQuery to insert the loading div inside the content itself. It will be very difficult to position it pixel-perfect otherwise.
If the loading div is to appear as an overlay to the document then you can use fixed CSS positioning with a high z-index. To center it on all screen resolutions use jQuery and the formula (window.height() - div.height())/2 as the top pixel position. The code will be similar to this answer.
Hope that helps
If you do something like this, and put the div inside your <body> tag, it will stay in the middle of the visible area.
div.loading {
position: fixed;
top: 47%;
left: 47%;
height: 6%;
width: 6%;
z-index: 1000;
}
Another solution is to put it at the end of the container content will be loading into. Just make sure to load the content before it. If you give it a margin:auto; it'll stay right in the middle and keep pushing down.
EDIT: It's also worth noting the answer here. This will prevent covering up something important in a way the user can't fix.
Set your loading div's position to fixed, this will of course cause it to escape from its parent in the DOM structure, you will then need to position it where you want it. Fixed positioning is relative to the visible area of the viewport.
<html>
<head>
<style type="text/css">
#loader {
height: 30px;
position: fixed;
top: 50%;
left: 50%;
background: #ccc;
}
</style>
</head>
<body>
<div id="loader">Loading...</div>
</body>
</html>
This will result in the loader div always being centered on the screen, no matter where the user has scrolled, left/right up/down.