Here is the setup, I have multiple divs on a page which are full widths and have blocks of color. The number of divs can vary from page to page. Each div with have a class associated to it (light or dark) and I have a logo pinned to the top of the browser window.
What I am trying to accomplish is this. I want to detect when each on of these div (with a common class) reach the top of the browser window. I then want to see if it has a light or dark class (only this div that just reached the top.) and then change the logo on the page depending on that value.
The closest thing I have come across is some onscreen jquery plugins that will add an :onscreen value to the current div that is on the screen. This would be great if I could only add this onscreen attribute when it reaches the top rather than just into view.
Does anyone have any suggestions as to how one might accomplish this?
// jsfiddle example
http://jsfiddle.net/UhrrR/
Funny, I was just looking at a library that does this very thing:
http://imakewebthings.com/jquery-waypoints/
You can add listeners to your elements that will fire off when your element hits the top of the viewport:
$('#myDiv').waypoint(function() {
var color = $(this).css('background-color');
$('img.logo').attr('src', 'logo.png');
});
For an amazing demo of it in use:
http://tympanus.net/codrops/2013/07/16/on-scroll-header-effects/
I completely agree with Chris Hardie that Waypoints is the way to go. I built a simple example based on your description.
https://github.com/imakewebthings/jquery-waypoints
http://codepen.io/cgspicer/pen/FrCgI
Here is the fiddle, I've used my own, because I've started before you posted your fiddle, but the idea is pretty the same.
I have a position of a logo element, and when scroll happens I check whether one of the desired blocks intersects logo block. On success a class from a custom data-trigger-class attribute is assigned to a logo element.
Related
I've tried to accomplish this, (since I am a noob at coding...) with a concept I found online... it didn't work out very well, and offline the scroll padding and "Sign In' button appears for a second than disappears...
To view web:
Click Here
if someone can please send me a simple code including: Html, (Css,) JavaScript, (no Jquery) of how to accomplish the same idea (of the button) on that site...
Thank You!
You want to listen for window scroll events and check to see if the main button is visible. You can do this by checking it's position inside the window using Element.getBoundingClientRect();
The bottom property tells you how many pixels the bottom of the element is from the top of the screen. If the number is below zero, it means the bottom of the element is off the top of the screen.
At that point, just toggle the hidden button into view. In my demo, I did this by adding a CSS class to that button.
If the user scrolls up and the main button is visible again, you can hide the side button by removing the class you previously added to it.
JS Fiddle Demo Here
Using scroll event with getBoundingClientRect may decrease performance
You can use intersection observer for checking an element enter in viewport
https://developers.google.com/web/updates/2016/04/intersectionobserver
Wondering how I can achieve the following effect on a website I'm building:
Div with 100vw width and 100vh height (we'll call this #container2) hides to the right of the home page (we'll call the home page #container1).
Moving mouse towards the right edge of the page causes #container2 to peek out.
If the user clicks on the visible portion of #container2, it slides all the way to the left, fully obscuring #container1.
The user is now on a new page with a corresponding URL, where they can scroll down and view more content.
I've got the first 3 steps more or less figured out. What I need help with is figuring out the best way to:
Handle the URL transition from site.com into site.com/newpage during the sliding animation
How to dynamically load the new page's content to the #container2 once the page transition happens, so the user can scroll down and see the new pages content if they click into it, but don't have to load the content if they choose to stay on the homepage.
Making it so if someone types or is linked directly to site.com/newpage, they will see the same thing that someone who started on the home page, clicked #container2, and watched the transition animation sees (but without showing a page transition).
I don't have any code snippets to show because I'm not really sure where to start. Any help or direction would be greatly appreciated. If possible, I'd like to use a vanilla javascript solution, as I've managed to make all the other features on the site run without JQuery. If JQuery is the only way to do this though, I'd still love to hear the solution.
There are a lot of ways you could do this. My intuition would be to have only one page that has different url fragments. Your question is fairly broad so my answer will also be broad.
One approach would be to use the target pseudo-class in css. All you need to do is make container2 a link that adds fragment to the end of the url that matches the classname of said container. You could have a some style for :hover that makes the container slide out and some settings for :target that brings the container to the center of the page. Container2 could have have a second section beneath the fold that contains the rest of the content for the page.
You could do something very similar with javascript by adding and removing classes from the various elements, but using the target pseudo class will help with your last bullet point. If a user goes directly to the link with the fragment, they will see the page with that container displayed.
I hope that gives you a place to start. Here is some info about the target pseudo-class.
here i don't know the technically what will call but will try to explain the scenario what i want to achieve. following is the image what i am facing issue
when page right boundary is not touching the list it is showing like this.
when i minimize the browser window from any side i want list should come in the visible area of the page it should change the position now it is clipping the list like this
Please help me how i will change the position of the list as its touching to the any boundary of page like top, left, right, bottom. using jquery or css
Put your table inside a div and for div add css rule overflow:auto
Yes, You can achieve that things,
For that you have to use Shuffle.js
Please refer this Link
So I wanted to do for my company's webpage, a thing where are links that belong to people, to make it when you click, you have a little menu where you can choose to send him a message or view his profile..
Before click:
After click:
I tryed to search for it, couldn't find anything of much valuable.. Maybe someone can help me out.
If you're looking for an easy way to do it, I recommend using jQuery (http://jquery.com/) with one of the popup plugins (http://plugins.jquery.com/tag/popup/). It's easy to install, and most of them have a working demo for you to test out before download.
Otherwise, coding a popup window with pure JS takes time.
This general method is to:
Create a hidden div
Position: absolute and play with the z-index so your div will be on top of all other elements.
Set the position to where you clicked, or somewhere around the area of the target.
Take into account the width and height of the window/screen. (i.e. No poing in showing a div that'll appear off screen).
Fill it in with information you need.
Make it appear.
The way I've done things like that in the past is to have a hidden absolute or fixed DIV layer that houses that message menu. Then have a click trigger make that div layer visible and positioned at the current mouse coordinates.
There should be a lot of articles on google telling you how to do the various stages of all those steps.
A requirement for a current project of mine involves "highlighting" an HTML element in the context of a page. That is, I need to provide some sort of visual effect that decreases the brightness of the surrounding page while leaving the element at full brightness.
To achieve this, I'm trying the following approach:
Determining the highest z-index value of any element on the page (using JavaScript).
Creating an element to function as a "backdrop" on top of the page. This is just a <div> with a translucent gray background image, sized to 100% of the width and height of the <body> element, with position: fixed. I set its z-index to 1 greater than the highest z-index I've found on the page, with the intent that it will overlay every other element on the page.
Change the z-index of the "highlighted" element to 1 greater than the backdrop. The intent is to allow it to sit on top of the backdrop, which in turn sits on top of the rest of the page.
I got it working on a quick test page:
http://troy.onespot.com/static/stack_overflow/z_index_test.html
but when I tried to set it up on a few actual Web pages, it didn't work in all cases. For example:
http://troy.onespot.com/static/stack_overflow/z_index.html
Here, I've inserted two "dummy" elements on a copy of a Jacksonville.com article page, both with a class of test (if you're looking at the page source, they're at lines 169 & 859).
I also added some JavaScript (using jQuery) at the very end of the page that functions as I've described above.
The first <div class="test"> does function as I'd expect it to. However, the second one does not - it seems to still be stuck beneath the "backdrop" element, despite having a higher z-index.
I think this may have something to do with stacking contexts, but after reading through the relevant W3C docs (http://www.w3.org/TR/CSS21/visuren.html#z-index & http://www.w3.org/TR/CSS21/zindex.html), I still can't fathom why this is happening. I'd appreciate anyone more familiar with z-index and stacking order than I to take a look at my examples and let me know if anything looks suspicious.
Please note that I've only tested these examples in Firefox v3.6.
Thanks very much for any help!
The problem is that the second test div is inside a bunch of other HTML elements, one of which must be creating a new stacking context (it may be the #wl-wrapper-tier-1 div). Basically, a new stacking context is created whenever an element is positioned and has a z-index other than auto, see this MDC article for more info on stacking contexts.
Ultimately this means you can't achieve your desired effect reliably with this method. I think you're probably better off composing 4 divs to surround the target element.
If the element that you're highlighting is inside a different element (stacking context) with a z-index lower than the backdrop, it will not appear higher than the backdrop, since the element's z-index only controls stacking order within that parent.
The only good solution is to clone the highlighted element and add the clone to the <body> tag.
Beware of inherited CSS styles, which would be lost.