Hi while developing a lightbox for a website it seems I made an error in the creation of my code somewhere.If I click the lightbox two times it works normaly and everything is well.But when I try to open it a third time a bug seems to interfere.I have posted the code for the entire website on jsFiddle :
http://jsfiddle.net/Ywpdh/
Pay attention only on the "Login" button on the top right corner.When the Login button is clicked the lightbox appeares you can close it by clicking on the top right rectangle.The bug only appeares after the login button is clicked a third time.At this point the small rectangle seems to behave as if it's container is given the overflow:hidden property something that is not true.I have tested the code on all modern browser I get the same bug.Can someone please tell me what's going on?
Using firebug, the conatiner does get overflow: hidden when the exit div is clicked the 2nd time.
After reducing the code and commenting out It was the animation of width and height that are causeing the problem.
searching google for jquery aminate caused overflow: hidden i came accross this SO post
jQuery .animate() forces style "overflow:hidden"
So it appears you have to reset the overflow yourself
Updated your Fiddle
function lighbox(){
var width = $(window).width() / 2 - ($('div.lightbox').width() / 2);
var height = $(window).height()/2 - ($('div.lightbox').height() / 2);
var body = $('body');
body.css('overflowY','hidden');
$('div#bg-lightbox').fadeTo('slow',0.9)
$('div#lightbox').css({
'left':width,
'top':height,
'overflow': 'visible' // *** added this line
}).stop()
.animate({
'width':'+=500px',
'height':'+=250px',
'left':'-=300px',
'top':'-=200px',
'opacity':'1'
}, 'slow' , 'swing')
Related
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.
I'm using a tiny library called '$.scrollTo' to animate a scroll to a div element in my html. at the top of my page I have a fixed navgation bar.
at the end of the animation, I would like to have that div focused (for accessibility). if my div is to large, at the end of the animation, the fact that it gets focus - simply sends it a bit off the screen.
This does not happen with small divs.
here is my code (check jsfiddle below):
$('#buttonid').on("click", function() {
//fixed nav bar height (to compensate when scrolling)
var fixed_navbar_height = $("#navbar-id").height();
//the element to scroll to
var $go_to_selector = $("#topic2");
$.scrollTo($go_to_selector, {
duration: 1000,
offset: -fixed_navbar_height,
onAfter: function() {
//if you comment out this .focus it works as intended.
$go_to_selector.focus();
}
});
});
here is a JSFIDDLE example:
https://jsfiddle.net/dy35obpq/3/
obviously the onAfter messes it up, but i would like both the animation and the focus. Any ideas on how to implement a focus on a large div without letting it change the scroll bar ? suggestions are more than welcome.
Try this.
onAfter: function() {
$go_to_selector.focus();
$(window).scrollTop($($go_to_selector).offset().top - fixed_navbar_height);
}
I have simply added this line in your onAfter callback.
$(window).scrollTop($($go_to_selector).offset().top - fixed_navbar_height);
and it seems to have fixed the problem while still retaining focus. You might want to use css to disable the focus blue highlight.
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 am unable to scroll vertically when using dynamically added iframe. Horizontally works ok. I have seen some questions and answers, however, neither of them works for me.
Also i dont want to use jquery, i am sure that this can be done by using just scrollTo and scrollBy.
I want to scroll to the bottom when specific action is done.
var ifrm = document.createElement("iframe");
var url = <PAGE>;
ifrm.setAttribute("src", url);
ifrm.style.width = 1280 +"px";
ifrm.style.height = 1720 +"px"; //for testing, hardcoded
document.body.appendChild(ifrm);
window.scrollTo(0, 500);
When i put window.scrollTo(500, 500); everything is ok, page is scrolled right for 500.
Does anybody see any issue in my code?
This is my example: http://jsfiddle.net/aLvgx/5/
update 1: changed "my_frame" to "iframe" in createElement. Copying code error.
update 2: when i start this page (code: http://pastebin.com/dCRQkQj9) in chrome, i get this values:
H: 947
W: 1861 It is possible to automatically scroll horizontally, but vertically not.
The link you are using as the source of your iframe seems to trigger some sort of scroll event on its parent.
If you wait for it to finish and then run your code to scroll, it will work (sort of).
See the amended fiddle here: http://jsfiddle.net/aLvgx/7
Basically, it's just got a timeout function wrapped around the scrolling:
setTimeout(function() {
window.scrollTo(100, 1500);
},1000);
I have been having the oddest bug in firefox. I have a parent div (divbodycontainer) that is having its content scrolled down the screen when a child div containing a floated div with a base height of 0 is dynamically scrolled using javascript. If you scroll half way down any of the main pages in firefox and refresh the page the parent divs content will jump down. Odd thing is firebug reports no css or code change that could be doing this?
Bug also randomly pops up during fast scrolling.
Tried to fix bug by adding a height style to the javascript function since the bug is tied to the scrolling action.
$(window).scroll(function () {
var ntMin = 0+"px";
var newTop = $(window).scrollTop();
if (newTop <= ntMin){
newTop = ntMin;
}
$("#floatPitchButton").stop()
.animate({'top': newTop}, "slow")
document.getElementById('floatPitchButton').style.height = ntMin;
});
This idea did not fix my problem? Anyone have any idea whats going on?
Site: www.webstudioproductions.com
It looks like I was able to solve the problem by deleting the server js file and re-ftping the file.