I made a simple parrallex template for a friend of mine and i'm trying to add a layer ontop (with smoke)
when I scroll the page the smoke layer doesn't scroll up with the page, it just sort of dissapears, the logo div scrolls as it should but not the smoke layer,
my example can be found here:
www.junkjuice.co.uk
what am I doing wrong?
Related
I am using Cypress to validade and test a webapp for a client. This site main page is not scrollable, however some functions works in a "pop up", which is sscrollable. For instance:
enter image description here
Sensible information censored. The thin blue line on the right is the scroll bar for this part only (the main page is blurred behind it). If I want to click an element on the end of this list, scrollIntoView doesn't work. How can I scroll just this specific part?
cy.get('.item-class').contains('Text inside the item').scrollIntoView().click()
enter image description here
I've been trying to programmatically scroll a list (accordion) in an Ionic-Angular app and I’ve been having no success at all.
I reproduced it in this stackblitz: https://stackblitz.com/edit/stack-overflow-ionic-scroll-problem?file=src/app/home/home.page.ts
When you click on an item, it expands and I want it to align to the top of the screen (with the title visible). In this example, I am using scrollIntoView() to get it to the top but it disappears behind the toolbar.
I've tried many things to get it to align properly (including setting a "scroll-margin-top" as suggested on many posts) but this hasn't worked for me.
Also, I can't seem to be able to use the scrollBy() or scrollTo() method... they do nothing at all.
Can anybody help me figure this out and get this precise example to work? Thanks in advance!
The problem is in the property [fullscreen]="true" of the <ion-content> tag.
The property fullscreen of ion-content, according to the ionic documentation...
If true, the content will scroll behind the headers and footers. This effect can easily be seen by setting the toolbar to transparent.
In ionic when you use the option fullscreen as in <ion-content [fullscreen]="true"> it adds the following style to the ion-content tag:
--offset-top: 56px;
The goal of the [fullscreen]="true" is to create the effect of the content scrolling behind the header.
As a side effect, part of the <ion-content> is hidden behind the <ion-header>.
Fullscreen property and scrollIntoView()
According to w3schools...
The scrollIntoView() method scrolls the specified element into the visible area of the browser window.
So, in your code, when you call scrollIntoView() of a group it is working exactly as expected. The screen is scrolled until the top o the group is into the visible area of the browser. The problem is that the <ion-header> is covering part of the top of this visible area.
Solution:
If you remove the [fullscreen]="true" of the <ion-content>tag the scroll will work as you expect.
But you will loose the effect created by the fullscreen property (content scrolling behing the header).
References
Fullscreen property of ion-content tag:
https://ionicframework.com/docs/api/content
ScrollIntoView:
https://www.w3schools.com/JSREF/met_element_scrollintoview.asp
The title explains it. I can't seem to figure out the specific way to put it while searching for a way to have a menu bar under a banner, then, have it move up to a fixed position on the top of the page as you scroll down (kind of like the salmon-colored box that is currently showing up to the right of this form).
I will be using a simple table for a menu bar.
Many Thanks!
Sean
My site have a main div with width set to ~1200px and centered.
if I put g+1 button inside another div which is float:left and div with content on the right side everything works great. Sadly, I would like to put this button on the right side of my content. In this situation during loading this button ads horizontal scrollbar for one second.
I know about this: google +1 button adds scroll bar to my site
but it not work for me.
I'm googling about it, but every solution is similar to this I linked above.
[EDIT] IE & FF only
Only one solution I found is load g+1 button to hidden div, and show this div with some delay.
Social div contains three social-* divs for facebook, googleplus and twitter.
$('#social-fb').css("opacity", "0.0");
$('#social-gp').hide();
$('#social-tw').hide();
$('#social-fb').html('...');
$('#social-gp').html('...');
$('#social-tw').html('...');
timeoutID = setTimeout(function(){
$('#social').hide()
$('#social-fb').css("opacity", "1.0");
$('#social-gp').show();
$('#social-tw').show();
$('#social').fadeIn(500);
}, 2000);
I have designed a master page on which I have a horizontal banner with my company logo and in the same banner at right hand side I have copied the WELCOME control div from Ribbon area and placed inside banner area which is perfect.
I have customized master page to hide ribbon bar for the visitors (General users) with no uploading rights but the problem is that when site collection administrator logs in it shows the ribbon bar and my banner with welcome control but when visitor logs in the ribbon gets hidden and banner appears on top at the place of ribbon BUT the welcome control div doesn't move and gets displaced somewhere (cant see anywhere).
How to automatically change position of welcome control when ribbon gets off/on and appears in the banner accordingly. what change in CSS i need to do.
thanks