Mac Safari 7 Rendering Issue scrollLeft() issue - javascript

I created a dynamic table that scrolls left and right, has resizable columns, has a fixed header, etc. This table works great on EVERY browser I've tried. Even IE8 looks good (missing features, but still good).
This issue arises when I try to view the table in Safari 7.0.4 on my Macbook.
Attached is what is should look like (the fixed header is on the bottom for demonstration purposes):
when you scroll, the fixed header, body, and fixed scrollbar all are connected via some jQuery scrollLeft() functions (scroll one, scroll all):
var tableHeaderSpace = $('.table-full-wrap-space'),
tableHeader = $('.table-full-wrap-header'),
tableBody = $('.table-full-wrap-body'),
tableScroll = $('.table-full-wrap-scroll');
tableScroll.bind('scroll', function() {
tableHeader.scrollLeft(tableScroll.scrollLeft());
tableBody.scrollLeft(tableScroll.scrollLeft());
});
tableHeader.bind('scroll', function() {
tableScroll.scrollLeft(tableHeader.scrollLeft());
tableBody.scrollLeft(tableHeader.scrollLeft());
});
tableBody.bind('scroll', function() {
tableScroll.scrollLeft(tableBody.scrollLeft());
tableHeader.scrollLeft(tableBody.scrollLeft());
});
$(window).bind("scroll", function() {
var tableHeaderOffset = tableHeaderSpace.offset().top;
if (this.pageYOffset >= tableHeaderOffset) {
tableHeader.addClass('isFixed');
} else {
tableHeader.removeClass('isFixed');
}
});
Again, this works great...but as you scroll right a bit more, the browser starts duplicating content within that fixed header:
The issue is is that no 'actual' content is being duplicated - this is some sort of browser fragmenting that is showing duplicates - without adding elements in the DOM.
The next picture is the browser doing some more "magic". at certain points in horizontal scrolling, the whole fixed header's colors gets inverted:
I wasn't able to get a snapshot of it, but it also once duplicated the "record count" bar below it.
Anyone have any ideas what's going on here? I tried to duplicate this in jsFiddle but no dice. From that, I would assume that this is an issue with my code, but the results are only with ONE specific browser on mac (safari), and it is doing some STRANGE stuff.
Last note - since I can't replicate this in jsFiddle, i'm not sure how I could report this to Apple (the working (or 'broken') example is proprietary and I can't give out access to it).
EDIT:
here's the jsfiddle where I tried to duplicate the issue (very rough - but it's functional):
jsFiddle Duplication Attempt

so - I knew this wouldn't be a hot topic question, but I thought I would still give it a go ahead.
as for the answer, I found some old table css that was overlapping my new stuff - which in turn was somehow flipping safari out so bad that it was fragmenting it.
previous old code: background: transparent;
new code: background: #fff;
This doesn't make sense to me - but until someone else comes up with an hypothesis, I'll mark this as the answer.
now my number-one contender for worst browser: safari - look out, IE.

Related

JQuery Mobile Listviews w/collapsibles inside panel – random extra vertical pixels in Chrome v67

I'm seeing some odd behavior that recently surfaced for me after the recent Chrome v67 update (tested in both Mac El Cap and on Windows 10 so far).
Using JQuery Mobile, I have some collapsibles nested inside a panel widget acting as a menu. This was working flawlessly for some time, but when I got temporarily sidetracked and then returned to the project, I noticed that now, in Chrome (v67 of which was released in late May, while I was away from the project), I was getting random 1px vertical spaces (white horizontal lines) between some menu items when opening the menu and then expanding a collapsible. It's impossible to predict which items will be effected, and even inspecting them is difficult, as the extra space disappears/resolves on rollover or when opening the inspector.
So far, I'm not seeing this behavior in Safari or FF (Mac), nor in Chrome v66 (Windows). While I'm unable to do more extensive cross browser testing at the moment, from what I'm seeing I'm operating under the assumption that something in the latest Chrome update is causing this issue.
I've sometimes seen similar unpredictable spacing issues when the browser's view is zoomed in/out slightly, but I've confirmed I'm viewing this at actual size.
It doesn't appear to be a CSS issue, as I'm not seeing a change in the computed values of an element after the space issue resolves on rollover. It appears for all the world to be some kind of Chrome rendering problem.
I realize this is a rather specific set of circumstances, but has anyone else experienced anything similar in Chrome v67, and if so have you found a way to resolve it?
Here is a fiddle that demonstrates this odd behavior (it's easiest to see when opening "List 2 of 6"):
https://jsfiddle.net/halfacre/p349ghvf/5/
EDIT: The issue seems to be originating from the math in my JS. This script is meant to smooth-scroll the chosen submenu to the top of the viewport (as these are long lists, and without the visual cue it's easy to get lost), and was working beautifully until the latest Chrome update. I'm including said JS below. As I'm not a programmer or particularly stellar at math, this script is crossing my eyes a bit... could this be due to remainders or rounding issues?
$(document).ready(function() {
$(document).on("collapsibleexpand", ".ui-collapsible", function(e) {
var self = $(this),
menu = $("#mainmenu"),
pageY = $(document).scrollTop(),
content = $(this).children(".ui-collapsible-content");
content.hide();
content.slideDown({
duration: 300,
step: function(now, fx) {
if (fx.prop == "height") {
var pct = ((100 * now) / fx.end),
itemTop = $(self).offset().top,
menuScrollTop = $(menu).scrollTop(),
amt = (itemTop - pageY) / 100 * pct;
menu.scrollTop(menuScrollTop + amt);
}
}
}
);
e.stopPropagation(); // don't bubble up
});
$(document).on("collapsiblecollapse", ".ui-collapsible", function(e) {
var content = $(this).children('.ui-collapsible-content');
content.slideUp(300);
e.stopPropagation(); // don't bubble up
});
});
Thanks for taking a look.
EDIT 2: Screenshot of what I'm seeing:
If I am not wrong here, I believe the question is how to zero-pad the JQM collapsible, i.e. the listviewand the collapsible heading inside the menu panel.
First, keep in mind that JQM is dynamically enhancing each div which has an attribute data-role by adding some DOM content and the corresponding CSS classes.
You can look at the JQM source code by searching for mobile.collapsible and You will find what's happen at widget instancing in the _enhance() function and what's happen when You click the collapsible heading in the _handleExpandCollapse() function.
Now, I strongly believe there is somewhere a conflict among the JQM classes and Your CSS styles:
li, ul {padding:0!important; }
h3{ margin:0!important;}
But, sadly, I am not able to explain to You why this happens, as You said, just only with the latest Chrome version. I also noticed these thin random lines, which belongs to the panel-content background.
Here is my proposal to reset the space between the panel inner and the content:
.ui-panel-inner { padding: 0 !important; }
.ui-panel-inner .ui-collapsible-content { padding: 0 !important; }
.ui-panel-inner .ui-listview { margin: 0 !important; }
.ui-panel-inner .ui-listview > .ui-li-static { padding: 0 !important; }
.ui-panel-inner .ui-listview > li h3 { margin: 0 !important; }
Instead of defining new rules, I am overriding the JQM styles. Now, I can't see any thin random line anymore.
Here is the Fiddle: https://jsfiddle.net/98b4r3w5/ any feedback welcome.
Moreover: a note aside, if You need a centered page content and a smaller footer, I would do it the same way:
.ui-content { text-align:center; }
.ui-footer .ui-title { padding: 0 !important; }

DataTables ColReorder scroll when header scrolled close to boundaries

I am using DataTables for a large quantity of data gathered from various ASP databases.
In addition, I am using the following DataTables plug-ins:
FixedHeaders, FixedColumns, ColReorder.
Now, with the ColReorder function, when a header (a column actually) is dragged to reorder it and is overflowing to the sides (horizontal scrolling), I would like the table to scroll to the side with it, so that the column can be dragged not only to the viewed area of the table but to the entire table.
I have tried nomerous ways and walkarounds such as trying to make it scroll when the curser is close to the boundaries (like here in "Drag Scrolls" http://javascriptmvc.com/docs.html#!jQuery.Drag), but I did not succeed, as well as this method - http://mootools.net/docs/more/Interface/Scroller.
I would highly appreciate your help.
Thank you all in advance.
Here is an approach that may get you closer to solving it. Based on my experiments, you can copy and modify dataTables.colReorder.js in function _fnMouseMove just before this.dom.drag.css(...) code.
var scrollLeftVal = $(this.s.dt.nTableWrapper).find('.dataTables_scrollBody').scrollLeft();
if((e.pageX - this.s.mouse.offsetX) > (this.s.dt.nTableWrapper.clientWidth - 50)) {
scrollLeftVal += 10;
$(this.s.dt.nTableWrapper).find('.dataTables_scrollBody').scrollLeft(scrollLeftVal);
}
This will scroll the window to the right when dragging a column header. A reverse method would be needed as well, as well as modifying the positions of the pointer and drag elements, such as below:
this.dom.pointer.css( 'left', this.s.aoTargets[i-1].x - scrollLeftVal );
If you decided on this approach, you would be better off long term to build an extension/plugin rather than modifying core code. This is just for experimental purposes.
I started down this path, but believe I'll do my own reordering interface since this approach, even if working and scrolling properly, is not as ideal for the project I'm working on.
Hope this helps someone get closer to a solution!
Ryan
Tested with bootstrap https://jsfiddle.net/bababalcksheep/gsf2r1v4/17/
I added this code by modifying dataTables.colReorder.js in function _fnMouseMove just before this.dom.drag.css(...)
Seems to work Fine however with only one problem.
Lengthy columns have hard time snapping to next short width column.
For Example: in https://jsfiddle.net/bababalcksheep/gsf2r1v4/17/ , try dragging project column to next EXT column. I suspect this is because project column has larger width.
Any further fix to this problem will be much appreciated
var scrollHead = $(this.s.dt.nTableWrapper).find('.dataTables_scrollHead');
var scrollBody = $(this.s.dt.nTableWrapper).find('.dataTables_scrollBody');
var scrollLeftVal = e.pageX - scrollHead.parent().offset().left - this.s.mouse.offsetX;
//
var difference = scrollHead[0].clientWidth - scrollLeftVal ;
//is near Right edge, scroll to far right
if (difference < 150){
scrollLeftVal = scrollHead[0].scrollWidth - scrollHead[0].clientWidth;// max scrollleft Value
}
//is near Left edge, scroll to far Left
if(scrollLeftVal < 100){
scrollLeftVal= 0;
}
//
scrollBody.scrollLeft(scrollLeftVal);

Show advertisement while game loads

I looked around internet and was always looking like from previous 6 months for a script that could load flash content/game while showing an actual loading screen But I always received a few answers:
It is not possible to show an actual loading with Javascript.
You can do it only by adding action script to the flash file maybe they are talking about FLA
Why Don't you show a fake loading screen that appears and show some
seconds and then disappears (the most annoying this of such screen
is that they first make user load 15 seconds then the flash starts
loading, if it starts loading those 15 seconds still it is worth
something it is good BUT making them wait double is really bad)
But at last I found something that I was looking forever. A Jquery based script that shows actual loading (shows ad too) and uses swf Object to talk to flash content too. It is really awesome as it doesn't require you to do changes to the FLA, it is just pure outer environment dealing. So now the question arises what's the issue then. Well the issue is that this script was made for pixels, it works if you are using width and height for flash in pixels, while I can't use pixels as I am using %ages (this way user have ability to go full screen optionally by pressing f11).
So as you can see I want that script to work with %ages that is my problem, but as I mentioned earlier I didn't came here right away I have been asking for help (Actually Begging) in over 14 forums from previous few months and of course some good people still exists some people helped me to reach a certain point (but it didn't solve the problem) So now I will provide some Markup:
Here is link to the script that I am talking about http://www.balloontowerdefense.net/jquery-preloader/jquery-preloader.html (It is the link to the creator of this script)
Here is a link to working example (flash based on Pixels) http://www.balloontowerdefense.net/jquery-preloader/example.html
Some one helped me here but it didn't work 1 month ago. The person told me that I should change the plugin Named as Preroll the changes preferred were these
Modify the plugin to use user-supplied units instead of pixels. To do this, you will need to modify two functions in the plugin, applygameiframe and showgame.
applygameiframe should be changed to:
var applygameiframe = function() {
var gc = '#'+settings.gameframe;
var iframe = $('<iframe />').attr({
"id": settings.gameid,
"src": settings.swf,
"frameborder": 0,
"scrolling": "no",
"marginwidth": 0,
"marginheight": 0
}).css({
"height":'settings.height
"width": settings.width
});
$(gc).append(iframe);
return true;
};
showgame should be changed to:
var showgame = function() {
var ac = '#' + settings.adframe;
var game = '#' + settings.gameframe;
$(ac).hide();
$(game).css({
"width": settings.width,
"height": settings.height
});
};
Once those changes are made, the inline CSS should be set to whatever you supply as parameters (i.e., 100%, 50em, etc.).
I did the changes told to be done as described above to the Preroll plugin and after that this is what I get http://files.cryoffalcon.com/MyFootPrint/fullscreen.html
Now if you let the game load (as loading screen appears) all is well done except that in the end, the game doesn't appear, it loads but when it should skip and make the game appear at that time something goes wrong. (For reference you can see this link http://www.balloontowerdefense.net/jquery-preloader/example.html here when the loading finishes then game appears)
Can Someone Fix this problem?
Note: Sorry for not providing JsFiddle but as I live in Afghanistan with 5KBps speed it is not possible for me.
I didn't provided the HTML, CSS and JS that makes up the whole demo page as I thought it will make the question very long but still if you think I should provide Please let me know in comments.
I tried my best to make the question more relevant with Relevant Markups BUT still If I am missing something I would try my best by editing it and providing it you again.
Being an accountant, I tried my best to use programmers terms, coding is my passion but I am still in learning stage of JS
UPDATE: After solving the problem here you can see now everything is fine. http://files.cryoffalcon.com/MyFootPrint/newfullscreen.html
Credit: Goes to the one who answered this question.
This seems to be just a pure css problem. You're trying to set the width to 100% while the parent of div.gamewrapper has no width or height. That's why the size is 0 and it will not show up.
The trick you need to apply is add the following to your style:
html, body, .gamecontent {
height: 100%;
width: 100%;
}
Update:
Also, remove float: left; from .gamecontent .game, and add a width and height of 1px such that it becomes:
.gamecontent .game {
margin:0px auto 0px auto;
padding:0px;
overflow:hidden;
width : 1px;
height : 1px;
}
Well, after an hour and a half of playing Bloons on your link (my untouched work load can verify that), I feel it's safe to say that the full screen features work exactly as I'd expect them to. I'm using Chrome 18.0.x.
My experience was: Click link, game loads. The loader took about 2 seconds longer to finish then it took for the "Click Here to Show the Game" button appeared. After, an ad appeared for 10seconds and then I clicked "Play" and it went right to the game. Full screen worked correctly to my knowledge, although when I left full screen the game didn't resize back down - the bottom section was cut off.
I know that doesn't answer your question, but perhaps the issue is only in certain browsers?
i found that in FF the problem seems to be the height and width of 100%. I changed the script slightly to:
$(game).css({
"width": window.innerWidth,
"height": window.innerHeight
});
and now the game shows correctly in FF.

jQuery scrolling DIV is jumpy and positioned incorrectly

Not too long ago I asked about setting up a DIV which scrolls with the rest of the page. Post can be found here.
I've set this up, using the following code:
JS..
jQuery(function ($) {
var el = $('#sidebar'),
pos = el.position().top;
alert(pos);
$(window).scroll(function() {
el.toggleClass('fixed', $(this).scrollTop() >= pos);
});
});
CSS..
/* profile sidebar */
#sidebar>div{ width: 300px; margin-top: 10px; }
#sidebar.fixed>div{position:fixed;top:0}
A copy of the page can be found here. The alert was just some debugging.
The problem is, when you scroll a small amount, #sidebar suddenly appears at the very top of the page. In addition, sometimes as you scroll further down, the sidebar appears - and sometimes it doesn't.
Any idea what might be causing such seemingly random functionality?
I'm still trying to figure out why it works in the first place in the jsfiddle example, but anyway, I know how to fix it:
$(window).scroll(function() {
if($(this).scrollTop() >= pos){
el.addClass('fixed');
}else{
el.removeClass('fixed');
}
});
I tested this by unbinding the event you had and replacing it with this code. It seemed to work fine.
The reason I can't understand why it works in the example: toggleClass should be constantly adding and removing "fixed" if you have scrolled enough, because the conditional is true (true here means whether to toggle). The constant adding and removing of the fixed class causes the jumpy behavior.
You can watch this on your page: open up some dev tools (firegubg or Chrome) and watch what happens to your sidebar element.
[UPDATE]
Actually, I misread the docs. True means the class should be added (I don't think the docs are very clear though). Thus... the only way I could explain this is if #dunc was running jQuery v1.2 and the switch was getting ignored completely...

jQuery .css("margin-top", value) not updating in IE 8 (Standards mode)

I'm building an auto-follow div that is bound to the $(window).scroll() event. Here is my JavaScript.
var alert_top = 0;
var alert_margin_top = 0;
$(function() {
alert_top = $("#ActionBox").offset().top;
alert_margin_top = parseInt($("#ActionBox").css("margin-top"));
$(window).scroll(function () {
var scroll_top = $(window).scrollTop();
if(scroll_top > alert_top) {
$("#ActionBox").css("margin-top", ((scroll_top-alert_top)+(alert_margin_top*2))+"px");
console.log("Setting margin-top to "+$("#ActionBox").css("margin-top"));
} else {
$("#ActionBox").css("margin-top", alert_margin_top+"px");
};
});
});
This code assumes that there is this CSS rule in place
#ActionBox {
margin-top: 15px;
}
And it takes an element with the id "ActionBox" (in this case a div). The div is positioned in a left aligned menu that runs down the side, so it's starting offset is approximately 200 px). The goal is to start adding to the margin-top value once the user has scrolled past the point where the div might start to disappear off the top of the browser viewport (yes I know setting it to position: fixed would do the same thing, but then it would obscure the content below the ActionBox but still in the menu).
Now the console.log shows that the event is firing every time it should and it's setting the correct value. But in some pages of my web app the div isn't redrawn. This is especially odd because in other pages (in IE) the code works as expected (and it works every time in FF, Opera and WebKit). All pages evaluate (0 errors and 0 warnings according to the W3C validator and the FireFox HTMLTidy Validator), and no JS errors are thrown (according to the IE Developer Toolbar and Firebug). One other part to this mystery, if I unselect the #ActionBox margin-top rule in the HTML Style explorer in the IE Developer Tools then the div jumps immediately back in the newly adjusted place that it should have if the scroll event had triggered a redraw. Also if I force IE8 into Quirks Mode or compatibility mode then the even triggers an update.
One More thing, it works as expected in IE7 and IE 6 (thanks to the wonderful IETester for that)
I'm having a problem with your script in Firefox. When I scroll down, the script continues to add a margin to the page and I never reach the bottom of the page. This occurs because the ActionBox is still part of the page elements. I posted a demo here.
One solution would be to add a position: fixed to the CSS definition, but I see this won't work for you
Another solution would be to position the ActionBox absolutely (to the document body) and adjust the top.
Updated the code to fit with the solution found for others to benefit.
UPDATED:
CSS
#ActionBox {
position: relative;
float: right;
}
Script
var alert_top = 0;
var alert_margin_top = 0;
$(function() {
alert_top = $("#ActionBox").offset().top;
alert_margin_top = parseInt($("#ActionBox").css("margin-top"),10);
$(window).scroll(function () {
var scroll_top = $(window).scrollTop();
if (scroll_top > alert_top) {
$("#ActionBox").css("margin-top", ((scroll_top-alert_top)+(alert_margin_top*2)) + "px");
console.log("Setting margin-top to " + $("#ActionBox").css("margin-top"));
} else {
$("#ActionBox").css("margin-top", alert_margin_top+"px");
};
});
});
Also it is important to add a base (10 in this case) to your parseInt(), e.g.
parseInt($("#ActionBox").css("top"),10);
Try marginTop in place of margin-top, eg:
$("#ActionBox").css("marginTop", foo);
I found the answer!
I want to acknowledge the hard work of everyone in trying to find a better way to solve this problem, unfortunately because of a series of larger constraints I am unable to select them as the "answer" (I am voting them up because you deserve points for contributing).
The specific problem I was facing was a JavaScript onScoll event that was firing but a subsequent CSS update that wasn't causing IE8 (in standards mode) to redraw. Even stranger was the fact that in some pages it was redrawing while in others (with no obvious similarity) it wasn't. The solution in the end was to add the following CSS
#ActionBox {
position: relative;
float: right;
}
Here is an updated pastbin showing this (I added some more style to show how I am implementing this code). The IE "edit code" then "view output" bug fudgey talked about still occurs (but it seems to be a event binding issue unique to pastbin (and similar services)
I don't know why adding "float: right" allows IE8 to complete a redraw on an event that was already firing, but for some reason it does.
The correct format for IE8 is:
$("#ActionBox").css({ 'margin-top': '10px' });
with this work.
try this method
$("your id or class name").css({ 'margin-top': '18px' });

Categories

Resources