I'm trying to implement a custom image cursor in CSS, e.g.
cursor:url(/img/custom.png), pointer;
this works great, except when the mouse moves over a flash element (e.g. embedded youtube video). Then it reverts back to the standard mouse cursor. Is there a way to override this?
The best "solution" would probably be to include the custom cursor in the flash as well.
Not really a perfect solution, but this site suggests putting an empty div that loads the movie in when you click it (also helps initial page load time).
I'm not sure if it works, but this site says it has a way to have a javascript command activate. Might be more than you want, but I know the solution listed gets rid of flash objects seemingly infinite z-index (thus I know it can override part of it).
Related
I am using Monaco Editor 0.22.3 in combination with StencilJS and TailwindCSS. Everything works great, except for an annoying visual glitch in the intellisense dropdown as depicted here:
As you can see, the last suggested item is partially obscured.
I suspect it might have something to do with some style coming from TailwindCSS, but I'm pretty much at my wits end here. I tried to use the F12 element inspector to see if I can find some hints, but that is proving to be close to impossible since the intellisense dropdown disappears as soon as it loses focus.
Any hints would be much appreciated!
UPDATE 1
Here's a screenshot with a bigger editor to demonstrate that the dropdown itself does not appear to be clipped:
UPDATE 2
Here's an animated gif showing the issue when trying to debug the HTML elements using the browser developer tools:
As you can see, the dropdown disappears as soon as I click anywhere else.
The issue comes from a fairly common css class being used: .tree. Libraries such as tailwindcss add padding-bottom to it for example. To undo some of its additions for the monaco editor we added the following to our css file:
.monaco-editor .suggest-widget div.tree {
white-space: unset;
padding-bottom: 0;
}
And to get get to that solution for other libraries and styling artefacts:
It should have been quite easy but the suggestion dialog has a tendency to hide when we try to observe it. so a UI guy and I spent a while going through the playbook to try to debug it. The only successful way to inspect it was to abuse the JS debugger by running (which was a hint from a stack overflow post that I'm struggling to find to give credit), and just cause the JS engine to pause:
Run:
setTimeout(5000);
This gives us 5 seconds to get the suggestion window to show (or set to a relative amount of time to the problem). After which, you could mostly inspect it as normal with a quick shortcut:
ctrl+shift+c that brings up the debuggers element selector.
Here we are, the suggestion was from the following post:
How can I inspect disappearing element in a browser?
break on subtree probably would have worked, but we became a bit impatient stepping through the changes. ctrl+ / didn't seem to help in this case, which left the odd setTimout to save the day.
The drop down is clipped at the editor's boundaries. I actually wonder how you can see the last empty part outside of the editor.
For inspection: use your browser's dev tools to see how the containers overlap. This will avoid that the editor hides the drop down.
Update
After your update I think now that somehow the styles are messed up. You will have to figure out a way to show the popup and still navigate the DOM tree in the developer tools. Try to locate the parent and see if that popup is only hidden (it still shows up then in the tree) or if it is dynamically created or is a portal, which lives in a completely different part of the tree.
If that cannot be done then try to disable all CSS you have and see if that solves the issue. If so enable the CSS piece by piece to find the culprit.
When dynamically adding custom css classes to a dc.selectMenu IE11 kicks them out when filters are applied. For now I push them in again using a renderlet. This causes "glitches"/moves content around due to added padding or widths/heights.
You can reproduce the issue by selecting an option from the select box in my block.
Is this a bug? Does anyone know a cleaner workaround not causing these glitches to appear?
We found that IE11 actually crashes on Win8 if you try to update a selectMenu! So we only render, don't attempt to redraw selectMenu on that browser.
So that's why you need to re-apply it.
In experimenting with this, I found that it was enough simply to move
.on('renderlet', ...
to the selectMenu, where it arguably belongs (because it's modifying that widget). I think this works because the select menu doesn't use any transitions, and there is no delay.
More generally, though, in any modern version of dc.js, you should really use the pretransition event, which fires before any transitions. In sum:
selectMenu.on('pretransition', function(chart){
selectMenu.select('select').classed('uk-select', true);
});
Although it's a really cool word, renderlet is rarely the right event to listen to. You'll see it in a lot of examples because it goes way back to early releases of dc.js, but it occurs after all transitions have finished.
If you use pretransition you'll have a chance to change things before the browser even refreshes at all.
I have just come across a weird CSS quirk that goes far beyond my understanding and would appreciate some help:
I was trying to build a fancy pure css dropdown solution using the clickable event method Ryan Collins proposed: http://www.ryancollins.me/?p=1041
With :active and :hover and some nested divs we may make trigger spans (or divs or whatever) that cause a sister element in the same container to appear upon mouse click. The example on Ryans page worked on my ipad so I assumed that iOS was smart enough to handle a touch event as triggering the :active state - and if the trigger contains a hyperlink this works, but there is no way to deactivate the active state of a hyperlink, safe for clicking on another hyperlink.
This sucks, because my plan to have an elegant navigation (and some other stuff) pop up and hide from view with just css is foiled, the menu never collapses - but then why does the example on Ryan's page work? I did some testing and finally narrowed the key element down to a twitter widget he has embedded on his page. Some javascript styles the embedded tweet and in doing so, it affects the very :active and : hover solution that all of a sudden works via touch on iOS, even without hyperlinks.
Can anybody tell me what causes this behavior and if I could emulate it without relying on a crazy hack like embedding a twitter widget and hiding it from view?
Found the answer myself with some more digging through the code and a little Google help:
The twitter widget among all the proprietary stuff it does also declares a touchstart event, which by itself anywhere on the page is enough to make mobile safari utilize the CSS :active pseudo style.
http://miniapps.co.uk/blog/post/enable-css-active-pseudo-styles-in-mobile-safari/
I have created a CSS dropdown menu using suckerfish. The problem with it is when you click the top level nav item that takes you to category pages, the pointer is still over that nav item and the dropdown appears automatically in IE.
Its fine for Firefox as the dropdown will not appear until I move the mouse, however IE just kicks in straight away without any mouse movement at all.
As the menus are quite large the user is unaware that the page has changed underneeth.
This site http://www.foodnetwork.com/ seems to achieve what I want, with a slight delay before the dropdown appears again. I know they are mixing it up with JS and CSS, but cant quite work out what they are doing.
Any thoughts
I know you are currently using a different technological solution to this problem, but please at least take a look at my suggestion before you judge it. I'm not good enough to explain it outright, so I'll just give you a couple of bullet points and then link to the solution in an effort to assist you.
This solution contains these attributes:
No client-side scripting of any sort (Javascript) was used
Absolute browser and platform compatibility
Text scaling friendly
Narrow window width handling
Functional for non-CSS, or CSS-disabled, browser
Placed into the Public Domain
The site where the file is posted uses this menu (it's owned by the writer). So, please visit this GRC's Script-Free Pure-CSS Menuing System page.
I really hope this helps you!!
Use jQuery's hoverIntent to achieve that delayed effect. In addition, the menu stays there even if the cursor momentarily moves out of the menu. Prevents that distracting flicker effect of menus appearing and disappearing.
Just throwing this out there, since there may be other changes you wish the menu had as well:
You may want to consider Superfish (an updated/upgraded [and possibly overkill so take a look] version of Suckerfish), one of the additions is the delay option on the menus.
So I got the solution for this.
I added the CSS with JS in the head of the document and set a small delay on it. This way when the user clicks the main nav link the dropdown is hidden by default with the CSS and then made to reveal with the CSS that is written in with JS. The user sees a page without the drodown on page load, and then after 1.5 secs the dropdown appears, therefore showing the user the page reloaded.
// Add dropdown styles
function addDDStyles() {
var head = document.getElementsByTagName('head')[0];
var logindiv = document.createElement('link');
logindiv.setAttribute('type', 'text/css')
logindiv.setAttribute("rel", "stylesheet");
logindiv.setAttribute("href", 'http://files.stv.claw/css/dropdown.css');
logindiv.setAttribute("media", "screen");
head.appendChild(logindiv);
}
setTimeout('addDDStyles()', 1500)
I've had a poke around in the TweetMeme plugin code and IANA JS Guru, but I cant find any sensible way to make specific styling changes; you can add div-specific CSS characteristics, but I'm talking about changing the resting colour and the hover colour of the button.
I've googled around and noone seems to have asked it on here so I thought I should.
The button uses an image sprite for its background and hover states. But this is beside the point because the button is loaded from the TweetMeme server in an iframe, which makes overriding the styles much, much more complicated (if possible at all). If it were possible, you'd need to alter the content of the iframe with javascript after everything has loaded. You can't just edit the plugin to make it serve what you want.
I suggest finding a plugin that exposes its elements to CSS styling if you need to have control over its look and feel. Since there are many such plugins, that probably won't be too hard.
You could always wait for their Pro version of the button. I hear it's due out in the not too distant future.