how to detect scrollbar on application? - javascript

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.

Related

jQuery Hide/Show DIV on change of anchor text

I have one page website which changes URL #id or anchor text on scrolling and on navigation click. I have an image positioned fixed at the center of the site. The site is divided in different sections and the image shows in all the sections. I do not want to show the image on the first section as it is unrelated to the content of the 1st section but will be showed in all next sections. How can I make it work?
What I have tried till now but not working:
$(document).ready(function(){
$(".phone").hide();
var idSample = window.location.href.split("#");
var id = "#"+idSample[1];
if($(id) == "second"){
$(".phone").show();
}else{
$(".phone").hide();
}
});
Rest in Fiddle: https://jsfiddle.net/shubhamjha1000/vh7bu32q/
I don't want that phone to be seen on 1st section but on rest of the sections. Please help me guys!
You can use the answer written in this question to listen to changes in the window see what url you are on and show or hide the phone accordingly....
Example:
$(function(){
// Bind the event.
$(window).hashchange(hashchanged);
// Trigger the event (useful on page load).
hashchanged();
});
function hashchanged(){
var hash = location.hash.replace( /^#/, '' );
//your code
if(hash == "#first") {
// Hide element
} else {
// Show element
}
}
But still even though what you are planning to do will work with that solution I think it would still look bad on the app it self and instead of a hovering phone maybe you can create the phone as an img inside the relevant containers and hide and show with id...
You can simply use a substring on your location.hash for get your hash tag
$(document).ready(function(){
$(".phone").hide();
var id = window.location.hash.substr(1);
if($(id) == "second"){
$(".phone").show();
}else{
$(".phone").hide();
}
});

How to dynamically change the height of an empty div using Javascript onclick and restore with onScroll

Context: I have a button on the top of the page in the header, and I want visitors to jump to the form section which is at a lower position on the same page. For some unchangeable factors, the form is partially hidden under the header after page jump, so I am thinking of creating a new div before the form and change the height of the div to push the form down after jumping. Then, when users scroll again on the page, the height should go back to 0.
Problem: When I click on the DemoButton for the first time, the div height doesn't change and the form goes under header, but the second time it works. I don't know how to fix that.
The basic html structure is shown as following:
<div>
<a href="#demoForm" id="DemoButton">
<button>request demo</button>
</a>
</div>
<div id="space"></div>
<from id="demoForm">...</form>
JavaScript:
window.onload = function comparison() {
window.addEventListener("scroll", reset, false);
var demo = document.getElementById('DemoButton');
demo.onclick = uniform;
}
function reset() {
document.getElementById('Space').style.height = '0';
}
function uniform() {
document.getElementById('Space').style.height = '160px';
};
I know a lot of people are using newer CSS for reactive headers these days. I believe it's done using media queries, and I might suggest researching it some more. (I have some experience, it was very easy and cool too.)
Ideally, you'd want something like this to happen in CSS without JavaScript at all. See if you can get it figured out that way.
Using very light Javascript, it seems the easiest thing to do would be to just offset the scroll by the height of the header once the button has been clicked. You can hard-code the header height or calculate it dynamically.
So...
;;;;;;;;;;;;;;
; $ = document ;
; id = 'getElementById' ;
;;;;;;;;;;;;;
onload = function (e)
{
$[id]('DemoButton')
. onclick = function offset(e)
{
document.body.scrollTop -= $[id]('Header').offsetHeight;
}
;
}
Notes
You may have to wrap it in a 5ms setTimeout. Easy enough.
I don't remember all the cross-browseryness. There might be a need to parseInt or use document.documentElement. But at least you don't have cross-browser scroll events to deal with now, so this should be nice.

how to make a div stay in the same position and then dissapear at a specific point

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.

Passing multiple values in Javascript OnClick, using those values in specific ways

While I've done some Javascript coding, I consider myself a more novice, Frankenstein-type coder, basically cutting and pasting with trial and error to see if I can get something to work...just a heads up on my honest assessment of my experience level.
I've got a unique thing I'm developing for, and hoping to get some help with Javascript. Here's what I'm trying / need to do: for a webpage based kiosk presentation, I'm using one HTML webpage, but with multiple sections whose visibility toggles on/off based on a Javascript I currently have that works fine. (I don't want to / can't use regular HTML pages with links because of how it ends up running).
The only problem with the above issue is that there's no easy way to create a 'back' or 'previous page' link for an end page that may have multiple ways to get to it. It won't 'know' where the user came from.
So here's what I'd like to do: pass 2 variables through my OnClick javascript function, the DIV name that needs to toggle on/off ... AND a 2nd variable of the current visible DIV name so that the next DIV that toggles on can 'remember' what the previous (and now invisible) DIV was so that there can be an accurate 'back' button.
Here's some sample code:
Each DIV section that turns on an off is setup like this:
<div id="sectionName" class="content">
</div>
These DIVs have buttons/links that are setup like this:
These run a Javacript:
function toggleVisibility(selectedTab) {
var content = document.getElementsByClassName('content');
for(var i=0; i<content.length; i++) {
if(content[i].id == selectedTab) {
content[i].style.display = 'block';
} else {
content[i].style.display = 'none';
}
}
}
So what I'm hoping is that there is a way to do something like this:
So that when that is clicked, the next DIV that turns on could also include a Javascript generated link based on that passed variable, something like:
Previous<br>Menu
I'm aware that Javascript toggling of DIVs on and off may not allow the generation of a dynamic Javascript link like the one I'm describing above, so I'm throwing this out there for some help from other, far more experienced programmers. Ideally, I'd like to try and fit everything into what I've created so far, so I don't have to start over from scratch. Any ideas?
Please reference this sample page:
www.gs3creative.com/test/
You could use location hashes (mypage.html#mydivid) and then use history.back() to handle 'back' navigation.
To stitch up the div's showing on the correct hash value....
var oldHash = '';
// fires when the hash changes
function hash_changed() {
var hash = location.hash.replace('#', ''); // get the div ID
var div = document.getElementById(hash); // find the content div on the page
var allDivs = document.getElementByClassName('content'); // get all of the content divs
// hide all the content divs
for (var i = 0; i < allDivs.length; i++) {
var thisDiv = allDivs[i];
thisDiv.style.display = 'none';
}
// only show the right one
div.style.display = 'block';
}
// this triggers the event
setInterval(function() {
// if the hash has changed, fire the function
if (oldHash != location.hash) {
oldHash = location.hash;
hash_changed();
}
}, 100); // call every 100 ms so that there is no lag
So if you set the navigation to 'mypage.html#sectionName' it would hide all other div's of the class 'content' and then only show the div with the ID of 'sectionName'.
An easy solution for me would be to render two content pages on a HTML page and show and hide content when needed from a onlick handler via javascript in your CSS add a class:
function showDiv() {
document.getElementById("theObject").className = "visible";
}
CSS:
// Switch between the content adding the classes and removing the old class
.visible{
display:none;
}
.show{
display:block;
}
Another solution using sessions "php" via javascript to hold the variables with in statements.
<?php if (session_status() == PHP_SESSION_NONE) {
session_start();
$_SESSION['user_is where_variable'] = "im on page div 1";
}
This could also be done through js anyways.
javascript have a conditional statement using your $_SESSION vars;
if (variable == "im on page div 1" ){
// your functions
}else if ( variable == "im on page div 1"){
// another function
}
Create your click handler to update the variables in the session.

Stuck: hide/show divs with next button, redirect last div

Here's what I have so far, which allows the user to click an image to open a new window and go to a location. When that click occurs, the image in the parent window is replaced with the next div.
Example: http://jsfiddle.net/rzTHw/
Here's the working code so far...
<div class = "box"><img src="http://placehold.it/300x150/cf5/&text=img+1"></div>
<div class = "box"><img src="http://placehold.it/300x150/f0f/&text=img+1"></div>
<div class = "box"><img src="http://placehold.it/300x150/fb1/&text=img+1"></div>
<div class = "box"><img src="http://placehold.it/300x150/444/&text=img+1"></div>​
Jquery:
$('.box').not(':first').hide();
$('.box a').click(
function(e){
e.preventDefault();
var newWin = window.open(this.href,'newWindow'),
that = $(this).closest('.box'),
duration = 1200;
if (that.next('.box').length){
that.fadeOut(duration,
function(){
that.next('.box').fadeIn(duration);
});
}
});
What I am having trouble with is:
Creating a "next" button so the user can cycle through to the next div without having the click the image, thus avoiding having to open a new window to get to the next image.
Having a click on the last div redirect the window location to a URL, while still doing the normal function of opening a new window to the a href location if the image is clicked. Otherwise if clicking the "next" button when the last div is shown, simply redirect the user.
What's the best way to go about this? Thanks!
Here is my attempt at tweaking your code to allow for a next button, and my best guess at what you want to happen for the last image:
var redirectUrl = 'http://www.google.com'; // replace in your code
function next(event, duration) {
duration = duration || 1200; // default value
var that = $('.box:visible');
if (that.next('.box').length) {
that.fadeOut(duration, function() {
that.next('.box').fadeIn(duration);
});
} else {
window.location.href = redirectUrl;
// the above line doesn't work inside jsFiddle, but should on your page
}
return false;
}
$('.box').not(':first').hide();
$('.box a').click(
function(e) {
e.preventDefault();
var newWin = window.open(this.href, 'newWindow'),
duration = 1200;
next(e, duration);
});
$('.next').click(next);
jsFiddle example here. Note the redirect is prevented in some browsers since it is running inside an iframe. But it should work in a normal page.
Perhaps look at a slideshow jquery plugin. JQuery Cycle being just one example. There are plenty. Just google jquery Slideshow or jquery cycle and pick the one that suites you best. The cycle plugin itself has a number of "pager" examples that let you change the contents of the displayed picture without leaving the page.
Most of them offer having the contents be html and not just a simple picture so you can play around with what exactly you want.
There's also Fancybox, lightbox, colorbox, etc. if that's what you're trying to accomplish.

Categories

Resources