Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
I have a DIV that I want to scroll the contents of. As the user scrolls (using either a custom scrollbar or scroll up/down buttons), I need to know what DOM elements are visible within the scrollable DIV. I'd be happy to know even just one DOM element, as I can use that to walk the DOM and find a particular parent element that I'm looking for.
Are there any plugins that provide this kind of information in the scroll completion event, or can someone recommend a way of doing this?
Checkout Waypoints and/or jquery scrollspy. These do exactly the functionality you are looking for.
Related
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 6 years ago.
Improve this question
I need to create something like that
What I understand is that no matter the window size, the background is resized to fit perfectly and once I scroll down the nav bar becomes visible and sticks to the top.
I believe I am going to need javascript (?) and obviously HTML and CSS.
Any tips, even to what to search will be greately appreciated.
Just google something like 'sticky navigation'. Here's the codepen I found (using jquery) and edited:
https://codepen.io/anon/pen/NABAxd.
The idea is very simple: you attach a handler to scroll event to check if user has scrolled down a certain amount. Based on that you apply or remove position:fixed to element. And you can find the amount of pixels scrolled from top via window.pageYOffset.
EDIT:
You can set height: 100vh to first section to cover whole browser window. I have edited the codepen.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
I have a webpage in which I need to realize something that looks like the following sketch:
As you can see, there are basically two sections:
a side-block (preferably) on the right that serves as image-thumbnails scroller;
a contents-block on the left (in my draw) in which there are text parts and an image that is selected from the right side-scroller.
Side scrolling may be achieved by a browser sidebar or (very much preferably better) by apposite up/down buttons.
When clicking on a different image on the side-scroller that image get shown in place of the previous one.
Last thing, clicking the image selected shall make it show in full-size (not larger than browser window anyway) with a lightbox-like-effect.
Anyone know of a jQuery plugin that already provide all this?
Thank you very much.
Swiper (http://www.idangero.us/swiper/demos/) should help you with this, it covers most (if not all with a bit of a creative layout on your part) of the things you're looking for. It's got some very thorough documentation, for the light box behaviour you're looking for - I'd use one of the baked-in methods to create your own event handler.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
All:
Right now, say I have 4 DIV elements on the page, what I want to implement is drag a one DIV and move to other DIV then they can swap position just like IPHONE, when you hold the icon for a little while, all the icons turn into position edit mode, you can move icon around the screen and located to certain grid position and according icon can swap with it.
Could anyone show me an example for this?
Thanks
Jquery UI makes this trivial:
https://jqueryui.com/draggable/#sortable
http://jqueryui.com/sortable/#default
The link also shows an example of how to use it.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 8 years ago.
Improve this question
I have used quite a few jquery sliders like bxslider, wooslider etc. but they all slide images. is there any particular slider that can slide a div that contains some contents? if so, please give me some examples. and, what will happen if i try a div instead of an image with wooslider/bxslider?
In the past I have really only used Bootstrap libraries to do this. The template can be customized to how you want it, and it includes different ways to present text onto of every slide. If you want header tags, paragraphs or even a list. Controls can be changed, the Bootstrap controls that comes with Bootstrap aren't the best, they are kinda the basics. I recommend using Font Awesome and customizing the controls yourself. However you can not have the same text that is fixed when the slider is moving in the background. You must create a div outside the slider div.
http://getbootstrap.com/javascript/#carousel
Best example is on the mophie battery (mophie.com) website, using Bootstrap
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
If you take a look at that, you'll see that there's an overlay, with arrows pointing to how to use the webpage.
Is there a JQuery plugin that does this? (automatically ties the arrow to the dom elements)?
Have you seen http://jquery.bassistance.de/tooltip/demo/
Hope this helps.
I'm guessing here, but I doubt there is a plugin that would display an overlay with images directly connected to certain elements of the DOM as it is such a bespoke thing to do.
However, it would not be too tricky to achieve through the use of the CSS display and position: absolute properties.