Tabber widget overlapping other content on sidebar in IE - javascript

I've implemented the following tabbed widget in the sidebar of my blog (Blogger hosted): http://mylpgb.blogspot.com/2013/04/how-to-add-5-tabbed-widget-for-blogger.html
It works just fine in Chrome and Firefox (the submit box is a bit wonky in Firefox, but whatever), but in Internet Explorer, I've got some problems. When the content under a tabber tab gets a little long, it overlaps the other gadgets on my sidebar. Actually, it looks like the rest of the gadgets/content are properly pushed down, but the image directly below the tabber just gets run over. There's nothing special about that image--it's just a simple image tag.
I tried setting the table height to 100%, but no dice. I'm kind of learning as I go, so I'd be very grateful for any troubleshooting tips. Thank you.

Related

HTML/CSS for mobile app. Footer with input behaves wrong when opening keyboard

I have a really tricky problem I have been trying to solve for weeks now.
I want to make a web chat for mobile devices. I have some speech bubbles and a footer that has an input box. The footer should always be on the bottom. And when the keyboard opens, it should move just above the keyboard that the user sees when what he writes.
That works so far. The tricky thing is to have the view with the speech bubbles scrollable so that I can scroll to the first message WITHOUT THE FOOTER MOVING ALONG.
I had a version which only worked in Google Chrome (tested on iOS), but not in Safari:
http://marcback.es/work/sparkassenchat/v7
It is an ugly solution which involves Javascript Code etc.
Does any of you guys have a solution for that? The solution doesn't have to be pretty, it just needs to work. Please help :/

Dojo Datagrid Scrolling "forgets" previous entries in IE 10

I'm currently quite confused about a bug my datagrid is displaying. I am of the impression this bug has been a part of my code since the beginning at this point, but I have only started to notice it more recently.
Basically, after the grid is initially populated I can see all of my entries perfectly fine.
But then after I scroll downwards to the bottom of the list and wish to scroll back to the beginning of the list, the entries that were originally visible will usually (about half the time, more often than not if I scroll quickly) disappear (sometimes just half a row will disappear).
If I scroll to the point where the missing rows (or just a few of them) are no longer visible again and then scroll back upwards, the rows that were hidden refresh and appear like they did in the first screen shot.
I know this is a somewhat odd problem and I hope I explained myself clearly enough. I have tried and been unable to replicate this result in Firefox and Chrome, so the issue seems to be restricted to IE (10 is what I am using). In this case I really need for this to work within this browser version as this is what is being suggested to our clients. I do not know if it is a factor, but this grid IS being displayed within an iframe.
Despite my efforts I have been unable to find much of anything online. Any help would be appreciated. Thanks in advance.

Fixed position not working on ios devices

I am working on implementing a couple of instances of http://amsul.ca/pickadate.js/ but i seem to be running into a couple of problems with the css. If you view the above site on an ipad or iphone, the calendar is positioned correctly, as the container covers up the window as a good fixed position element should do. But if you were to see my site, and pull up the calendar, then you would see the calendar container (the greyed out background) starting from the bottom left corner of the input that it is next to (as if it were positioned relative) and extending with the same dimensions of the window. In addition to this, when I inspect in mobile safari's web inspector on my mac, the blue box, which usually indicates where the div is being positioned is fixed to the top of the document and not necessarily the window.
The only error I'm getting are a 404 from a stylesheet that has nothing to do with this plugin.
here are 3 screenshots of the problem that i am facing, the first has shows the input that the div with the calendar is just after
http://www.dumpt.com/img/viewer.php?file=rvipsnuyfyuv8u6xt5dr.png
the second is where inspector seems to think it is rendering and you can see the translucent background further down the page
http://www.dumpt.com/img/viewer.php?file=nc7el13lcthqlzrsfarg.png
and the third shows that it seems to be the correct dimensions and everything, but the calendar does not seem to be positioning itself correctly
http://www.dumpt.com/img/viewer.php?file=8hbswbfv9abwobkth8iq.png
If anyone has any ideas about why this might be I would love to hear them because right now, i'm at a loss.
EDIT
This page has been tested on android devices and works perfectly.
Ok, so it seems that mobile does not support fixed elements very well.
http://www.quirksmode.org/m/css.html
Search: fixed
which is really unfortunate. If anyone has any workarounds for this, that would be really great.

iOS Positioning fix

I've been editing a site for a friend, updating it etc, I changed an old Flash script slideshow to a JS one.
It runs fine, but when loaded into an iPhone/iPod, the entire section containing the slideshow & text loads incorrectly, underneath the Left Panel, instead of next to it.
The site loads fine on several Android devices, & PC browsers.
Any ideas on what's wrong/how I can fix it?
http://www.stonehouserestaurant.com.au
Thanks, Matt.
The footer of the right side is longer on the mobile website than on the browserwebsite. That's why it's floating under the left side.
Give the html a max width:
html {max-width: 1024px;}
Though it will look like it should you still have amount of space...scroll..i think you should check your whole content to see whats happening..

Rendering bug in Google Chrome at certain window widths

My users and I are running into a rendering glitch in Chrome only (on both Windows and Mac) where an overlaid div that I'm using for on-hover tooltip-style "popouts"(see first image below) does not get rendered properly in certain cases (see second image below). In all other browsers I've tested, it works as expected.
Here's how the hover popouts are supposed to look (and what happens in Firefox, Safari, IE):
Here's what happens in Chrome:
You can see it in action on this site if you look at May 24 using a browser window width of ~ 1200px (significnatly wider or narrower windows do not seem to work). The glitch only affects the popouts in the bottom right of the menu that are popping left, e.g. those on May 24. Hovers using the same exact mechanism higher up in the page work just fine. Glitched popouts are invisible (except for part of the carat), but if you click on the link to lock the popout in place and then hold left click while moving your mouse around as if to "select text" in the area where the popout should be, it will then render partially. Also if I open dev tools and try to select the popout, it will render just fine at that point.
I've been looking at this all day and trying different work arounds with opacity, z-index, etc. and getting nowhere. Does this glitch ring any bells for anyone? Is there a way to force Chrome to render the div, once its been positioned and unhidden? I'm fine with any work-around or hack.
I use a custom (and fairly complicated) jquery plugin for popouts. If it would be helpful to see the non-minified javascript for the plugin, I can post or provide a link to that, but general guidance that leads me to a work around will be sufficient to be accepted as an answer.
Edit: My Browser Build: 26.0.1410.65
(Per my comments)
This does indeed seem to be a bug in Chrome, though without a smaller test case to reproduce it, it could be very hard to track down. You may want to report it to the Chrome team with as much information as possible.
In support of my "it's a bug" assertion:
The hidden/clipped elements become visible when they are selected.
The elements underneath the hidden/clipped elements are not clickable.
This indicates that z-index and height is correct.
It only happens under very specific circumstances; the rest of the items with the same style work fine. The same item may work fine at a slightly bigger/smaller screen width.
Applying a 3D transform fixes it.
The problem goes away when I apply a CSS transform such as scale3d or translate3d. I imagine this is because certain CSS properties cause the browser to switch to GPU acceleration.
In this case, switching to the fast path for rendering seems to alter the drawing sequence enough to fix the problem.
Super hacky but this fixes it for me:
$('.drop-link.food').on('hover',function() {
$('.tool-tip').css('overflow', 'hidden').height();
$('.tool-tip').css('overflow', 'auto');
});
Obviously this isn't a "good" solution, and even remaining hacky you could probably optimize it to only force the redraw on the tooltip it needs to, but hopefully it helps...
Another clue:
$('.drop-link').on('hover',function() {
$(this).siblings('.tool-tip').css('display','block');
});
This won't fix it right away, but it seems like if this is there, once you've hovered on something, it will work the next time you hover on it.
Not sure if this helps with your situation, but over the last couple of days I've started to notice that certain site elements on Facebook and Weight Watchers no longer show up. Specifically it seems to be affecting items that (I believe) to be controlled by or dependent on Javascript. When I call up these sites in Firefox and Safari they work as expected.

Categories