Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I'm working on a huge single page website and would like to show an scroll down hint (icon or something like that) at the bottom of the window when the user visits the website.
The hint should vanish when the visitor either scrolls down or clicks on the icon. I've seen this on several websites which I can't remember now unfortunately. Already been searching on but with no results as I'm probably searching with the wrong keywords...
Anyone has any directions on where to start to achieve this?
Here is a start to get the scroll hint working. Now on styling, that's up to you but I would personally do something like position: absolute and then work from there and give it a zIndex about everything on the page.
$(window).scroll( function() {
if($(document).scrollTop() == 0 ) {
// SHOW scroll hint
} else {
// HIDE scroll hint
}
});
I did this on one of my own web pages.
http://codepen.io/pattmorter/pen/mFDLs
Just check out the javascript and the css.
I think you would need an ID on your icon/link and then have two event listeners. One for clicking on the ID itself and the other onscroll. Once either of those events are fired you can call .remove()
If you don't know where to start, try to read reference of window object. For visibility change you can use opacity, and position attribute to make it fixed at bottom of screen.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I'm looking for a reliable way to get a browser window always on top. I know some old methods like window.focus(), blur events and so on but they don't work anymore.
I was wondering if there is some kind of way to get the user trust to keep a specific browser window always on top on the desktop.
The use case is simple. I'm letting the user to capture and record their screen and I want to let them record their face as well. For that, I'm opening a popup (window.open) and enabling their webcam. This window must be always on top in order to get their face always visible when the user is managing other windows.
Is this achievable? Thanks!
I don't think what you're asking for exists, no.
The closest that I can think of is the fullscreen API, but that won't work for your use case — it sounds like you want other windows to be visible, just not on top.
I think you'll have to use user training to get the best results you can, telling them to be sure that their face is visible and not behind some other window.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
So I've seen a mouse-hover effect on 2 websites so far and I really like it.
This is the effect I'm talking about.
I'd be grateful if somebody can tell me how to get that effect on my webpage.
It only appears under your cursor when you hover over the page.
The site you have linked in the comments uses the HTML canvas element. But You can simply use already existing libraries for that effect.
Examples mentioned in the comments:
http://jnicol.github.io/particleground/
http://github.com/VincentGarreau/particles.js
Simply, Go to the webpage you wanted to Copy it's effects or anything from it
Right click, View page source
If the effect is made by Css, you will find it in stylesheets tab
If it's using jQuery/Js, Search the head for <script> , Read them and copy the effect (assuming that you understand js/jquery
For more simplicity, use Firebug, open it and just point the cursor at the item you want to see it's source.
But, actually
You can find it at github Here
Change what you want.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I have a website with a grid of elements that scrolls down. Something very similar than this example:
I would like that, when you click on an element, it zooms in on this element, the other elements disappear, and next to the chosen element's image, some text is displayed. And when you exit this view, the text disappears, and unzoom to the initial view with the grid of all elements.
I don't know how this effect is called - if it ever has a name - and I am having a hard time figuring out how it could be done.. jQuery ? CSS animation ?
I am open to any leads ! Thanks for your help,
I've made a piece of code with jQuery. You can achieve your goal with many ways but here is one.
You can use scale() CSS3 properties to make the zoom on the image and hide() with jQuery to hide the other ones while you click() on one.
If you can't find a solution with these hints, I've made an example of what you wants right here
You can create new div on click with absolute position and display it on front of other elements(bigger z-index)
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I am trying to make a JavaScript function that will scroll to the next article whenever the down arrow key is pressed. All my HTML elements are dynamic, and are all just article tags with no ID. The script I have so far can recognize the down key being pressed, but from this point, I have no idea how to make a function that will scroll down to the next article tag without naming the articles or something like that.
document.addEventListener('keydown', function(e){
if(e.keyCode === 40) {
// function to scroll down
}});
I think I will need to create a variable that is just any article element within my HTML page. Is that even possible? If so, how would I do that, and make the function scroll down to the next article? Thanks in advance!
You are looking for window.scrollTo function. All you need is to identify Y offset of next article. You can do it by calculating offsetTop of that node (plus all its offsetParent nodes).
Another solution: use element.scrollIntoView() or element.scorllIntoViewIfNeeded(). It's cross-browser too, but I would prefer first solution because it allows you to you can control animation and it will work even in oldest browsers.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I want to be able to ask the pdf viewer a multiple choice question when he visits page X.
Can someone please give me a high level of how that can be achieved using pdf.js library (or other library)?
I am thinking there should be a way where my front-end detects that user now scrolled to page X and thus executes the javascript function to ask the question. Am I on the right track?
I will further build on your reply. I have done my homework before posting here.
Use .scrollTop() (jQuery) to see how far a user has scrolled through a page:
$(document).scroll(function(){
if ($('.pageX').scrollTop() > 0) {
/*JavaScript to be executed*/
}
});
I have given page X a class of pageX, and the instance that page X fills up the entire window your JavaScript will start.
.scrollTop() looks for how many pixels of the element are above the page (out of site), so if you wanted your functions to begin before the window is filled with page X you can change the 0 to a negative number, eg. if ($('.pageX').scrollTop() > -70) will start your javascript when page X is filling up most of the window.