I am a newbie regarding Javascript or injecting code on iOS WKWebView.
Visit this page with user agent equal to safari 13 iOS and scroll down.
At one point, this bar appears at the bottom.
bottom bar
at this moment, if you scroll up the bar disappears.
I am a newbie in Javascript. I found this page that shows a similar effect.
Looking at the source I guess the id of that div is agentFavBar but inspecting the page I see that this div's class change from class="styles___MobileFixedBar-sc-x9qtiw-0 fMaMax" to class="styles___MobileFixedBar-sc-x9qtiw-0 ivYpwt" that is display:none.
I have this iOS app I have to fix where the bar never disappears when you scroll up.
Looking at the app, I see that who created this, that does not work for the company anymore, injectes code to show and hide the bottom bar.
This is the only code I could find that appears the one responsible for this, but like I said the bar shows when I scroll down but do not disappears when I scroll up.
if (document.querySelector('div#FA-HIDE_BOTTOM_NAV')) {
window.webkit.messageHandlers.hideTabBar.postMessage('hideTabBar');
}
var banner_height = document.querySelector('div.styles___MobileFixedBar-x9qtiw-0.jcioIC').offsetHeight;
document.querySelector('main').style.paddingBottom = banner_height.toString() + 'px';"
and
if (!document.querySelector('div#FA-HIDE_BOTTOM_NAV')){
window.webkit.messageHandlers.showTabBar.postMessage('showTabBar');
}
and also discovered this one:
window.onscroll = function(e) {
if (Math.abs(this.oldScroll - this.scrollY) > 88) {
document.querySelector('div.styles___MobileFixedBar-x9qtiw-0.jcioIC').style.display = this.oldScroll > this.scrollY ? 'none' : '';
this.oldScroll = this.scrollY
};
}; window.oldScroll = 0;
One thing I do not understand is why one need to inject javascript if the what the app basically does is to show the mobile version of the site (served by the server based on the user agent) inside a WKWebView.
Do you see this code consistent with hiding the bottom bar? How can I write that to make it work.
NOTE: yes, I know that wkwebviews don't need any injected code to work, but I am not the one who created this app and the guy who did it, somehow messed with the original wkwebview in a way that now, if I remove all injected code the page does not even load.
Related
I'm trying to use selenium to scrape a webpage, and one of my elements dynamically loads a finite amount of content (IE not like twitter where you can just keep scrolling) when I scroll to the bottom of it.
Now I could simply do something like
var scrollbar = document.getElementsByClassName("dataTables_scrollBody")[0]
var last = -1;
var curr = scrollbar.scrollHeight;
while (curr != last) {
last = curr;
scrollbar.scrollTop = curr;
curr = scrollbar.scrollHeight;
}
And in fact, that's what I'm doing. However, the actual load operation on the data table takes so long that this script exits by the time the load finishes, meaning I only ever get halfway down the scrollbar.
What's a good way to make sure that I've scrolled all the way to the bottom of the scroll bar?
This question is different from Scroll to bottom of div? because I don't have access to the raw HTML, and it's different from Scroll Automatically to the Bottom of the Page because my page is dynamically loading content.
Perhaps I could force an ajax load of all the content in the panel, but I don't know how to do that, and I don't want to wade through miles of minified code to figure out how the page owner does it.
Here's an ugly solution:
scroll_elem = document.getElementsByClassName("dataTables_scrollBody")[0];
table_elem = document.getElementsByClassName("dataTable")[0];
function scrollToBottom() {
scroll_elem.scrollTop = scroll_elem.scrollHeight;
};
new ResizeObserver(scrollToBottom).observe(table_elem)
Basically how this works is we have an object watching the element we want to scroll to the bottom of. If and when it resizes, it instantly scrolls to the bottom of the new window. This works well enough, then you could use the sleep function KunduK recommended in comments to wait for the process to complete
I'm trying to create some sort of info "Scroll Down" button (not clickable) which has to be visible while scroll bar is up on top, fade out when scroll down a few pixels and fade back in when up again.
So far I was able to create the arrow and the message so far as well as the fading part.
Here is a fiddle: https://jsfiddle.net/8b3jL7r0/1/
var btn = $("#button");
$(window).scroll(function() {
if ($(window).scrollTop() < 100) {
btn.addClass("show");
} else {
btn.removeClass("show");
}
});
var btn2 = $("#scrolltxt");
$(window).scroll(function() {
if ($(window).scrollTop() < 100) {
btn2.addClass("showx");
} else {
btn2.removeClass("showx");
}
});
The problem with is that the arrow and the info text 'Scroll Down' does not appear right from the beginning, you have to scroll down a bit so they appear on top and then everything works smooth. Any clue how to make them visible right from the first load of the code?
Any idea how could I transfer all this code into one single code module in WordPress and have it work exactly like in the fiddle ? Because I've tried to insert it but it seems to not work at all, nothing appears on the page, not the arrow nor the info text.
I just added the inital classes to both elements:
https://jsfiddle.net/4e2cafju/
<div id="button" class="show"></div>
<div id="scrolltxt" class="showx">scroll down</div>
for 2:
You should be able to put these elements directly into a template. You should be able to add the css to the style sheet. And you could lnk to an external JS file. That would probably be best practice. You could also put all the code into a single page. I'm not sure how your wordpress install / theme is set up.
I've created a sticky navbar for a subnav, which should stick at the top of the screen when the user scrolls down. Therefore I've tried some javascript, which changes the position to 'fixed' when the top is reached. Avoiding a gap in the content when the navbar is taken out of the flow, I've also added a placeholder, which has the same height as the navbar.
On Desktop it really works and looks how it should be. But I got a "touch" issue on mobile view. When I scroll down on mobile view the navbar will not appear during the process of scrolling over the viewpoint, where the css class is changing. It only appears when I stop scrolling after that viewpoint. When it shows up I can normally scroll up and down and I am only getting this issue again if I repeat this procedure, where the navbar has to change the css class. So it might be a problem with the css class change and I guess the problem could be in the javascript snippet. Does anybody know a solution for this? I'd like to have the same behavior like on desktop view, so the navbar is always visible and just fixed to the very top of the screen, even if it is in the flow of scrolling.
JS:
var menu = document.querySelector('#irp-localnav');
var menuPosition = menu.getBoundingClientRect();
var placeholder = document.createElement('div');
placeholder.style.width = menuPosition.width + 'px';
placeholder.style.height = menuPosition.height + 'px';
var isAdded = false;
window.addEventListener('scroll', function() {
if (window.pageYOffset >= menuPosition.top && !isAdded) {
menu.classList.add('sticky');
menu.parentNode.insertBefore(placeholder, menu);
isAdded = true;
} else if (window.pageYOffset < menuPosition.top && isAdded) {
menu.classList.remove('sticky');
menu.parentNode.removeChild(placeholder);
isAdded = false;
}
});
If you guess an error in the html/css markup, just let me know, so I get in touch with you again by posting this markup
Kind Regards
I was able to hack around. For anyone, who is facing a similiar issue:
Mobile browsers simply do not fire on a scroll event, while the event is in process. They fire when the event has stopped, so, when you've stopped scrolling. Using translate3d(0px,0px,0px) can solve this. Refer to this thread to read more about it:
iOS 9 Safari: changing an element to fixed position while scrolling won't paint until scroll stops
Kind Regards!
I have been working on this website since last week. It is a school project, and I can't figure out why part of it isn't working. When I scroll down, click on the menu button, leave the menu down, then scroll back up, the navbar keeps its height even though I take away the class that resized it. I have attempted to use Google Chrome's developer tools to see what is happening. It just shows the height property crossed out. I have no idea why it won't work, and I have looked for any reason in my code. I also tried it in Internet Explorer to see if chrome was just having problems with it for some reason. It did the same thing there causing me to assume the problem is in my code.
Here is a link to the website it is currently published on: http://www.dragonmath.net/rockets/
Html Code:
http://www.dragonmath.net/rockets/index.html
Javascript Code:
http://www.dragonmath.net/rockets/javascript/main.js
CSS Sheet 1:
http://www.dragonmath.net/rockets/styles/main.css
CSS Sheet 2:
http://www.dragonmath.net/rockets/styles/function.css
got problem!!
After scrolling back to top you didn't change height of nav element;after scroll back make it 40px again it may solve your problem.
if (flag !== 2 && $(window).scrollTop() === 0) {
//add this line
$nav.css({height:'40px'});
$nav.slideUp();
$nav.removeClass("dropDown");
$menu.stop(true,false).slideUp(800, function () {
$heading.css({'margin-left':'40px'})
});
$nav.stop(true,false).slideDown();
flag = 2;
}
I have a script that collapses my site navigation on small screens, based on Brad Front's example here: http://codepen.io/bradfrost/full/sHvaz
All the script does is toggle a class on click, and then the CSS uses a transition on the max-height to hide & reveal the menu.
On one of my sites, the script runs just fine, but on others there is a pronounced delay after the "hide menu" click before the CSS transition begins.
The script that functions as intended is here: http://archstglassinc.com/
(the script comes into play when the browser window is narrower than 768px).
Here's the un-minified script:
var $menu = jQuery('#menu-main-nav'),
$menulink = jQuery('.menu-link');
$menulink.click(function() {
$menulink.toggleClass('active');
$menu.toggleClass('active');
return false;
});
Whereas the script that lags is here: https://www.talleyreedinsurance.com/
(Please Note: in order to access the collapsed menu on this site, you need to load or re-load the page when your browser window is narrower than 768px). The first click reveals the menu just fine, but there's a delay after the second click before the menu starts to go away.
This script, un-minified, is a bit longer because it enables some drop-downs that will come in a future phase, but the relevant portion is identical except that it uses preventDefault instead of return false to stop the link:
var $menu = $('#menu-partial-nav-for-launch'),
$menulink = $('.menu-link'),
$menuTrigger = $('.family-link > a, .business-link > a');
$menulink.click(function(e) {
e.preventDefault();
$menulink.toggleClass('active');
$menu.toggleClass('active');
});
$menuTrigger.click(function(e) {
e.preventDefault();
var $this = $(this);
$this.toggleClass('active').next('ul').toggleClass('active');
});
It's probably irrelevant to give you this code, though. I can tell that the class toggle does happen immediately, because the icon next to the "Site Menu" link text switches right away, and that relies on the toggled class.
But then there's a delay of half a second or more before the max-height transition begins.
Can anyone determine (or even speculate upon) what would cause this sort of pause in the transition?
The issue isn't with your javascript but your css.
You set your active max-height to 100em.
However, you don't need this entire height.
The browser is transitioning the entire max-height from 100 back to 0. The first 89ems of the transition doesn't appear do anything, because the content is only roughly 11em tall. In your other example, you set max-height to 15em