I'm building a button that moves away from the mouse and "wraps" around the window. Relatively new to jQuery/JavaScript, I'm building this as a learning exercise (I was inspired by #4 on this page: http://panjiva.com/jobs/challenges).
Background: this is actually my second attempt, and probably not the most elegant solution to the problem. Basically, in this second version, there are hidden "temp" buttons that move in tandem with the button and appear when the button begins to leave the screen. (My first attempted had only two buttons but I ran into issues there.)
Below is an nested if/else statement that detects when a portion of the button is moving out of the window and, if it is, reveals a temp button in the correct location to the give the "wrap" effect. It also checks to see if the entire button has moved off screen and, if so, moves the button to the new coordinates (where the temp button had been exposed).
I thought this entire if/else statment should only allow the button to wrap to one side, even when the button left at a corner. However, it is sometimes wrapping to 2 or 3 corners when leaving to a corner. Why is this happening?
I've created a JSFiddle with the complete code: http://jsfiddle.net/aaronmacy/AVwpU/
All help/advice would be much appreciated!
// Is any part of the button about to move off the page?
// To the top?
if (edgeTop < 0) {
// Always wrap to the bottom
bottom.show();
// Is the button disappearing?
if (edgeBottom < 0) {
// Move the button
buttonNextY += parseInt(viewportHeight);
moveAll();
// Hide everything else
hideTemps();
}
else {
moveAll();
}
}
// To the right?
else if (edgeRight > parseInt(viewportWidth)) {
// Wrap to the left
left.show();
// Is the button disappearing?
if (edgeLeft > parseInt(viewportWidth)) {
buttonNextX -= parseInt(viewportWidth);
moveAll();
hideTemps();
}
else {
moveAll();
}
}
// To the bottom?
else if (edgeBottom > parseInt(viewportHeight)) {
// Wrap to the top
top.show();
// Is the button disappearing?
if (edgeTop > parseInt(viewportHeight)) {
buttonNextY -= parseInt(viewportHeight);
moveAll();
hideTemps();
}
else {
moveAll();
}
}
// To the left?
else if (edgeLeft < 0) {
// Wrap to the right
right.show();
// Is the button disappearing?
if (edgeRight < 0) {
buttonNextX += parseInt(viewportWidth);
moveAll();
hideTemps();
}
else {
moveAll();
}
}
// If the button is completely inside the window
else {
moveAll();
}
I think their requirement is unclear "other side of screen".... I would say your script works fine. they didn't really think about bonus requirements, they just added it to see which candidate will give more effort.... Anyway, make more distance between your buttons, add at least button width on x and height of button on y axis... and don't hide any of copies. It will wrap naturally, believe me ;)
Related
I have an SAPUI5 app where I display a table which goes off the screen. I have a button that I the user can click to go back to the top. The problem is that button is always displayed, even when not needed. I only want it to show up when the table goes off the screen. I've been looking for solution to this but nothing has worked so far.
Here is my button defined in my xml view
<html: a id="toTop" href ="#_xmlview0--top">
<Button id="backToTopBtn" text = "back"/>
</html:a>
and then I have this defined at the top of my view
<html:div id = top"></html:div>
I've tried different solutions I found using jquery but nothing has worked so far. I thought something like this would work
if($('body').height()>$(window).height()){
//go back to top here
}
but looking at these values body height and window height are the same. Any ideas?
To not have your button show all the time you need to hide it using styles or javascript. I'll assume you'll use display: none in this case then show it when the user has scrolled a certain amount.
element.scrollTop and element.scrollLeft give you the amount of offset an element has.
If you want to show something only when the body has been scrolled a certain amount you could do:
var page = document.body;
var button = document.getElementById('backToTopBtn');
function showScrollTopButton() {
if (page.scrollTop > xyz) {
button.style.display = 'block';
} else {
button.style.display = 'none';
}
return;
}
window.addEventListener('scroll', showScrollTopButton);
Where xyz is the numerical value for when to show and hide the button.
I've got a little problem.
Here's my fiddle:
[https://jsfiddle.net/ekpgbxrk/][1]
My question is: what's wrong with my code? Point is that I want to scroll site down after clicking button and after another click I want to stop, then to proceed.
I used:
http://www.mediacollege.com/internet/javascript/page/scroll.html
Please help!
The button onclick function is wrong. Change it to whatever function you'd want to call in your JS code.
Also change your JSFiddle's JS setting "Load Type" to "No wrap in - <head>"
Here is updated logic for your code.
var scrolling = false;
var scrollDelay;
function scrollClick() {
if (!scrolling) {
scrolling = true;
startScroll();
} else {
scrolling = false;
stopScroll();
}
}
function startScroll() {
window.scrollBy(0, 50); // horizontal and vertical scroll increments
scrolldelay = setTimeout('startScroll()', 125); // scrolls every 100 milliseconds
}
function stopScroll() {
clearTimeout(scrolldelay);
}
Here is the updated fiddle https://jsfiddle.net/ekpgbxrk/5/
Your code logic is completely wrong.
I have rewrote the logic.
For your reference:
[1]: https://jsfiddle.net/ekpgbxrk/1/
I needed a jQuery function to fix my div when the page is scrolled.
I found this:
var fixed = false;
var topTrigger = $('#sticker').offset().top;
$(document).scroll(function() {
if( $(this).scrollTop() >= topTrigger ) {
if( !fixed ) {
fixed = true;
$('#sticker').css({'position':'fixed', 'top':'0'});
}
} else {
if( fixed ) {
fixed = false;
$('#sticker').css({'position':'relative'});
}
}
});
Now, since I'm not a super beginner with jQuery, I tried to skim it and understand it. The only things I don't understand are the things related to the var:fixed. I tried to delete the var and the if statement related to that and the function works perfectly.
My question : why is that variable there, what does it mean, what feature does it add to the entire function?
Why should I keep it there instead of deleting everything related to that variable?
The scroll event will be fired multiple times as the user scrolls. If you keep on changing the DOM attributes, then the performance of the site may slow down.
To avoid applying the style multiple times, they are having a flag called fixed. So once the user has scrolled a particular height, they will trigger change the DOM to be fixed. Later they need not again change the CSS style.
Only if the user scrolls back less than the threshold they need to change the style again.
So i'm wondering how you can make a div apear at a certain point of the page and stay in the exact same spot untill you reach a specific point of the page
kinda like they have on http://www.squarespace.com where you see a imac screen which stays on the screen until you reach a specific point
can this be done without using js
either way can someone let me know how?
I'm going to assume you mean making a div show up when the user has scrolled to a certain point in the page and then disappear when they scroll to another point.
This isn't technically possible with CSS. There might be a way to make it look like this with other elements covering it up, but I'll focus on doing it with JS for now.
Essentially, you want to
// set up limits for show/hide
var SHOW_Y = 100,
HIDE_Y = 800;
// function to be called every time
// the page is scrolled
function scrolled() {
if(window.scrollTop < SHOW_Y) {
hide(this);
} else if(window.scrollTop < HIDE_Y) {
show(this);
} else {
hide(this);
}
}
// helper function which hides an element
function hide(element) {
element.style.display = 'none';
}
// helper function which shows an element
function show(element) {
element.style.display = 'block';
}
window.addEventListener('load', function() {
var element = document.getElementById('your-element');
window.addEventListener('scroll', scrolled.bind(element));
});
I would probably do this using CSS classes rather than display properties, in order to control the way that the element disappears and reappears, but this should give you some idea.
You could also use a script like Skrollr or ScrollMagic.
I have a button on a banner at the top of my page that launches several yui2 overlays on to the screen. Each overlay has a close button on it (which just changes the visibility to hidden so it can be reused). After the overlays are launched, there is also a button on the banner that appears will close all overlays if clicked.
This gives the use the option to close all or close each one individually. This is what i am stuck on:
If the user closes an individual overlay, after I close the overlay, I want to check if any other overlay is still open. If they happen to have closed all of them individually, then I need to revert the banner at the top and remove the "close all button".
I can search for all overlays by doing a:
var elements = YAHOO.util.Dom.getElementsByClassName('test');
I cant think of the logic I would need to do to go through that array each time they close an overlay to see all of them are set to visibility if hidden. If so, then execute a function. If there is still any overlays visible on the page, then do nothing.
This is the answer I came up with. Just not sure if it is correct.
var elements = document.getElementsByClassName('test');
var visiblecounter = 0;
for (var i = 0; i < elements.length; i++) {
if(elements[i].style.visibility!='hidden'){
alert("not hidden");
visiblecounter ++;
}
}
if(visiblecounter > 0){
alert("all overlays are closed individually. you can remove close all button");
}
You mention you are reusing those overlays so since you are pooling the overlays for reuse, I assume you have them in an array or something like that. Instead of checking the DOM (which is always expensive) to see if they are visible or not, loop through the array of overlays checking the visible attribute, like:
var anyVisible = false;
for (i = 0; i < myOverlays.length; i+=1) {
anyVisible |= myOverlays[i].cfg.getProperty("visible");
}
If any of them are visible, disable the button.
I am not sure I get the question, but I will try my best to help. Here are some things I would do. I also define an active class, so my HTML elements would be written as this:
<div class="john active"></div>
and in my css I would write.
.john {display: none};
.active {display: block};
So by default the object is hidden! But when you append the "active" class to it, it appears on the screen. So now we can do the following wizardry.
$(".hideButton").click(function() {
$(this).removeClass("active");
});
If I want to hide all the other objects, assuming that they have the same parent in the DOM
$(".hideOthersButton").click(function() {
$(this).siblings().removeClass("active");
});
if I want to hide all objects that share the same parent.
$(".hideEverything").click(function() {
$(".parent").children().removeClass("active");
});
I hope this helps! let me know if you need more help. The solution uses Jquery but you can repurpose the logic for anything else.