Facebook Connect uses JS/CSS overlays/popups for user interaction. I have sites with Flash elements, and no matter how I set the z-indices, the Flash always seems to go to the top.
I have a similar and likely related problem with a div with display:fixed at the top of the screen, where it gets covered by the Flash when you start scrolling.
How can I make sure the Flash element layers properly?
If you just need your flash to fall behind other object then you should use wmode=opaque. This will correct the z-index.
wmode=transparent will also correct the z-index but it also makes your stage transparent so whenever you have nothing on the stage or gaps between objects your html will show through underneath. This in turn causes more system strain.
Ergo if you just need the z-index correcting use wmode=opaque
Generally, I've needed to set the wmode=transparent property on the Flash object and/or embed string.
http://www.communitymx.com/content/article.cfm?cid=e5141
Related
Here is the desired outcome I'm looking to achieve by scrolling using react-scroll-parallax.
On Mobile browser
View web browser example here
Description
I want to create a website with the parallax affect shown above. The key elements being a website build in react containing three pages.
While scrolling from Page 1 to Page 2 I want the mobile device mock to start halfway on the screen (as to avoid the other content of page 1), then move to being basically centered.
While scrolling from Page 2 to Page 3, the website and components stick and once again act like a normal website scroll.
Additionally, during the scroll from Page 1 to Page 2, I want the content inside the device mock to scroll as well.
What I tried
For starters I was able to get nearly the affect I wanted by using a div with it's z-index and absolute position set, and parallax on translateY of -50, 125.
<div className={"absolute z-10 w-full"}>
<Parallax translateY={[-50, 125]}></Parallax>
</div>
The problem became however when I wanted to place content inside the div. Having another div within the parallax that also had z-index set seemed to mess with the parallax affect.
Important notes
Content inside device mock
One issue I found that was tricky was trying to place the content inside the device mock. I want a parallax both on the device mock itself, and the content within it.
I'm not entirely sure how I should crop the content inside the device mock.
The device mock svg frame and device mock mask can be found here if you want to give it a try
Device mock svg and mask
I tried imgs with various z-indexes, masking the div with an svg mask, using image backgrounds. Nothing is quite getting the preferred outcome.
Scaling of device mock
I want to make sure this works well on both mobile and browser. With that said I was trying to use margins to scale the device mock but I had a hard time with trying to then correctly get the mask to work for the content within the mock.
I'm not sure if using dedicated width and height sizes would be the ideal way to go, but very open to suggestions! It seems hard to scale the device frame and the mask properly.
Parallax of device and parallax of device content
I want the content inside the device mock to be html so that I can change it more than just an image. That being said the most important feature I want is for both the device and the content inside to have a parallax scroll affect.
Summary
I know this is a bit much for a quick simple stack overflow issue, but I've been trying a lot to get this to work and just can't seem to nail down the little details correctly. I sincerely appreciate all help and suggestions and if there is anything else I can provide please let me know!
The trickier part of the request was blowing up the <svg>, adding new <path /> and <clipPath /> for the color swap inside the phone mock.
Eventually I got it working here. The part linking the clipPath transition to the scroll progress looks like this:
const [y, setY] = React.useState(1739);
const onProgressChange = React.useCallback(
(a) =>
setY(Math.max(Math.min(1739, 1739 - ((a - 0.24) / 0.0018) * 17), 36)),
[setY]
);
const { ref } = useParallax({
translateY: [0, 185],
onProgressChange
});
The 1739 and 36 are max and min values for the translation and they are strictly related to the svg's viewBox. The other values allow tweaking the start, end and speed of animation, with regards to overall scroll progress.
This, together with some CSS, took care of binding the right animations to the correct scroll progress.
Feel free to tweak it some more, especially if you add more markup.
The other thing I wanted was a function activated shortly after scrolling, which would snap the scroll to certain positions. Namely, to the .page elements.
I used gsap's ScrollTrigger plugin for the task, for multiple reasons:
I'm somewhat familiar with it (used it before)
it's performant, light and non-obtrusive (basically quits when it detects another user scroll)
listens to all relevant events (touch, mouse pointer, keyboard) without me having to make sense of them, providing a unified interface.
uses inertia (if you scroll down faster from page 1 it will scroll past page 2, directly to page 3 - other scroll plugins limit you to having to scroll once for each page change)
works well on mobile devices
There are other libs/plugins out there for the task, you don't have to use gsap (although I do think it's awesome). If you end up including it in your project, make sure you comply with their licensing (which is not MIT).
By the way, my first choice for the parallax effect per-se would also be gsap, as their timelines provide a lot of flexibility and options.
Their most advanced stuff is reserved for subscribers, but even if you limit yourself to the free plugins, you're still getting more than from alternative libs/plugins, IMHO.
See it working.
I'm displaying mathematical expressions in a webview (using jqmath library and some CSS). One requirement is that expressions should be centred, and here's what I use to achieve that:
<html><head><style type='text/css'>html,body {margin: 0;padding: 0;width: 100%;height: 100%;}html {display: table;}body {display: table-cell;vertical-align: middle;text-align: center;}</style></head><body><p>here goes the expression</p></body></html>
Since rendering math takes some time, the webview is hidden while the expression is rendering, and displayed only when it is ready (once the WebViewClient's onPageFinished has been called). This worked well until Android 4.4.
The problem with the new webview seems to be that it only applies CSS when it is visible on screen. So after revealing the hidden webview, the expression first appears in the top left corner, and only after ~0.1 seconds "jumps" to the center. This looks ugly, since I have to display many expressions in quick succession.
A related problem is described in this question: width:100% in CSS not rendering well in Android 4.4. The asker was able to solve his problem by removing the display: table; from html, but that doesn't work in my case.
So is there a way to either:
(a) force the new (Chromium-based) webview to render content while it is not visible, or
(b) display the content at the center from the beginning (without first displaying it in the top left corner).
It is not true that the KK WebView applies CSS only when visible on screen:
the WebView will not size itself if it has visibility set to GONE because the Android framework will call layout-related methods on it (like layout and onSizeChanged). This might be what you're seeing. Try setting the visibility to INVISIBLE instead.
WebViewClient.onPageFinished is not a reliable trigger for showing your WebView. What the callback really means is that the resource for the main frame had been loaded from the network. Unfortunately there never was a reliable callback that would tell you 'your content is ready to be displayed' - what you're describing probably happened to work because of particular timing. The most reliable way to not show unfinished content would be to do so in the HTML/CSS.
you might be using WebView.loadDataWithBaseUrl to load your contents into a new/blank WebView - this API is has an effect similar to re-writing the page's content (rather than issuing a 'real' navigation) and can result in weird layout. If possible use loadData or loadUrl. If neither of those are feasible try calling loadUrl("data:text/html,<body style=\"margin: 0px;\"/>"); before loading the real content (wait at least till you get an WebViewClient.onPageStarted callback for that bootstrap URL).
you might be setting height to WRAP_CONTENTS. This is very unlikely to cause the issues you're describing, but it would be good to rule out. Try setting a width of MATCH_PARENT and a height with a fixed number of pixels.
I have an ActiveX on a page... I know ... ActiveX ... blarghhh!
That for some logic business reason we had to go with ActiveX, but the problem is that I can't make the ActiveX <object> to be beneath anything else ...
it's extremely weird!
Live plain example and Live example with iframe wrapper
You can try the example, but remember that the ActiveX only work in Internet Explorer, and no matter what version for the ActiveX, it will always run.
This problem I'm facing is the overlapping one:
Playing with position and z-index does nothing and I have no more ideas :-(
ActiveX controls are rendered as "windowed" elements in Internet Explorer, whereas most other elements (particularly in newer versions of IE) are "windowless". Flash has a wmode option for whether it draws windowless or windowed but, in my experience, this is very difficult to achieve, especially if the object is written in .NET and not C++.
All windowed elements paint themselves on top of all windowless
elements, despite the wishes of their container. However, windowed
elements do follow the z-index attribute with respect to each other,
just as windowless elements follow the z-index attribute with respect
to each other.
All windowless elements are rendered on the same MSHTML plane, and
windowed elements draw on a separate MSHTML plane. You can use z-index
to manipulate elements on the same plane but not to mix and match with
elements in different planes. You can rearrange the z-indexing of the
elements on each plane, but the windowed plane always draws on the top
of the windowless plane.
> http://support.microsoft.com/kb/177378
There are two potential solutions I can think of. You could try the iframe "cutout" solution, which explains that you can use iframes to "cut out" part of the plug-in for the HTML below to show through.
The second solution is to draw your popup menus in a popup object. These are separate windows that render in front of your web page and can even exceed the boundaries of the document — with some limitations — the major downside being that they don't have shadows so this might uglify your styling a little.
I have 50 local HTML files. I want to show these in scrollview or list. I tried by stageWebView. But it shows always on top of the stage. is there any way to do this. if it is possible in mxml na also, tell me...
(In mxml, i tried with mx:HTML but its not working in device. its working in desktop oly.)
QNXStageWebView is a native component, not a Flash display object, so there's no way to put it in the middle of the display list, sandwiched between other layers.
Your choices are to display on top, or to display behind the entire stage. In the latter case you would of course want to make your background transparent, but then draw a non-transparent "frame" in all the regions not covered by the QNXStageWebView.
Until the native SDK is available it's extremely unlikely there will be any "fix" for this, and even then it may have similar restrictions.
Sort of a complicated scenario - just curious if anyone else could come up with something:
I have a Text control and when I scroll it and stop the scroll with the cursor over some text that has a url, the cursor doesn't revert to a hand, and also flash player starts acting as if a selection is being made from the last cursor position. So IOW a bonafide bug in flash as far as I can determine.
The above probably wasn't completely clear so let me elaborate. If you grab a scrollbar thumb and start moving it up and down, you don't actually have to keep the mouse pointer on the thumb while doing so. When you stop the scroll, the mouse pointer could be outside the browser window, inside your flash application, but not currently on the scroll bar thumb, or wherever. The previously mentioned bug occurs when you stop the scroll with the mouse pointer positioned over text with an html anchor (a hyperlink). At that point the cursor enters into some state of limbo, and doesn't show the url hand pointer, and furthermore acts as if some text selection is taking place from the last cursor position prior to the scroll.
So the question would be, what sort of event could I simulate in code to jolt flash out of this erroneous state it is in. And furthermore in what event could I perform this simulated event (given that for example there is no AS3 event to signal the end of a scroll.)
To be clear, the Text control in question is on a canvas, and that canvas (call it A) is on another canvas which actually owns the scrollbar, and scrolling takes place by changing the scrollRect of canvas A.
I have run into this exact same problem with the TextArea in Flex 4: Scroll (textarea content is large than it's container) and release the mouse when over a link, and the cursor doesn't act right.
I think it's a bug, try submitting it to the Adobe Bug and Issue Management System. I will vote for it :).
Are you using Flex 3 or 4? If you're in Flex 4, I can make some suggestions. As a base, I would examine the TextArea and related source code in the Flex 3 SDK and figure out what events are being dispatched from links and whatnot. If you can eliminate the possibility that it's a Flash TextField (which TextArea uses), then it's a Flex bug. Try dispatching events that they're dispatching within the TextArea, from the things that are dispatching it (Event.CHANGE is all I can see taking a quick glance).
Good luck!
This is really in response to viatropos.
I was just able to duplicate the bug using the code example from the end of the Text documentation page in Flex 3.5 reference.
Just replace their htmlText in that example with a huge block of htmlText containing anchors tags (<a>...</a>). Then make the browser window small. Then click some arbitrary area of the htmlText with the mouse (That step is important.) Then scroll using the thumb. Stop the scroll with the cursor directly over one of the hyperlinks you created and release the mouse. The entire block of htmlText is selected and highlighted and the mouse pointer will not revert to a hand. (Well it will after you click somewhere else.)
As far as reporting this to adobe through their bug tracking system, I guess if I want to wait several months for it to be fixed. I reported another genuine bug over a year ago that was never fixed.
But examining their source code as you suggested - probably my best bet.