Lets say I had a website full of pictures posted vertically. As a scroll down, I want to use javascript/jquery to load in their description (and have the previous description hide). How would I go about doing this?
Please let me know. Thanks.
An example would be this page here.
https://stackoverflow.com/about
As you scroll, many jquery events take place.
Using something like scroll to etc that you can then find the co-ordinates / location and then perform the script you require etc
Could try something like the jquery appear plugin
It fires when the element comes into view.
Could do it manually as well, when scrolling, check all the container elements holding your hidden description to see if they fall within the viewable browser and show their description elements if so.
Related
In some apps, when a user focues on a certain element, a tooltip will float at the bottom of the page which displays information about that element. For example:
Does anyone know of a good way to achieve this effect (preferably using Angular, although jQuery is also fine)?
Note that I'm NOT looking for the tooltip that hovers nearby the actual element itself, like so:
Instead, I'm interested in the tooltip that floats at the bottom of the page.
The control you are NOT looking to use is called a popover. A popover and a tooltip are both tied to an element on the DOM that has to be interacted with to be shown.
If you want to something in between that shows up in a fixed position on the window, use something like the angular port of Toastr and configure it to show up when and where you want.
Maybe you are looking for a plugin like the famous ToastrJS which can position a toast in the middle of the screen.
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.
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.
I would like to write a java script that allows me to see the table headings of each column when at least one column of the table is visible. So I want an "excel-like" effect, when the user scrolls down a big table.
So I have to be able to check if an element is at the screen of the user at the moment. When he scrolls down long enough, the element "disappears" from his screen. How do I check that?
The only function I found was goog.style.isElementShown, but thats not what I want.
In jQuery it seems to be .scrollTop().
Try goog.style.getVisibleRectForElement.
If you look at jQuery source code, you will see that .scrollTop() just unify access to element/window scrollTop https://github.com/jquery/jquery/blob/master/src/offset.js#L264
For elements, you can just use scrollTop.
But scrollTop is probably not what you are looking for.
I'm designing a dynamic web page that loads contents by AJAX, like the wall of facebook, first to the top last to the bottom. However, i don't want to change the scrolled content. For example, when new contents are loaded page is driven down, but i want a script to fix scrolled content on screen. How can I do this? Help me please.
Update
Okey, I've found the key function it is scrollBy(x,y); function of the window object. however now i want to use it with jquery animation how can i animate this function?
I don't really know if this is what you want, but i think u can record the event's clientY attribute or pageY as in jquery, & then using jquery or simple JS scroll down to the value that you had stored.
var w = $('#selector').width();
$('#selector').append(data).scrollTop(w);
i have not tested it but it has the basics on that :)