I have a UIWebView in an iPhone application. In the html code there is a big image, named loadedBar that has an effect bound to it, using jQuery, the following way:
$('#loadedBar').click(function(){ ... });
Everything in the function is OK, but there's a visualisation effect that I don't need. When the image is clicked it becomes gray for a fraction of a second. I found the same behaviour on a div with an event, bound the same way as on the image.
Is this the default UIWebView event-click-visualisation and is there a way to turn it off (some CSS rules might do the trick), so that the app behaves like a native one.
Any ideas?
You are looking for:
-webkit-tap-highlight-color:<css-color>
This is an inherited property that changes the tap highlight color,
obeying the alpha value. If you don’t specify an alpha value, Safari
on iOS applies a default alpha value to the color. To disable tap
highlighting, set the alpha to 0 (invisible). If you set the alpha to
1.0 (opaque), then the element won’t be visible when tapped.
Documentation: http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/AdjustingtheTextSize/AdjustingtheTextSize.html
Example to disable the property:
-webkit-tap-highlight-color:rgba(0,0,0,0);
Related
I'm new to XMonad. I'd like to have 1px borders for all windows (so I can tell which one is active), except for the browser. In a conventional window manager, I typically have one maximized web browser window in a designated workspace. I'm very used to bringing the mouse cursor all the way to the top edge of the screen to select browser tabs. But if I have 1px border around the browser window, if I slide the mouse all the way to the top it ends up over this border pixel and cannot select the tabs.
Is there a way to define different rules for specific windows regarding border width, or any other such properties?
Alternatively, is there a way to not have a border around any window, if it's the only one on the workspace?
Yes, all of it is possible.
Import xmonad-contrib's NoBorders Layout Extension using
import XMonad.Layout.NoBorders
Then, in your manageHook you can use hasBorder with conditions like checking the program's className (you may want to use XOrg's Property displayer xprop to find out your browser's actual className)
className =? "firefox" --> hasBorder False
Alternatively, you can launch your browser within a given layout and modify that layout in your layoutHook definition to not show borders at all using noBorders, or to remove them only in given one-window or fullsize-floating scenarios using smartBorders
noBorders Full ||| smartBorders Tall ||| ...
Weather.com is the only example I know of that is doing this, showing a dashed red line under misspelled text instead of squiggles. This is on Chrome in Windows 7
What I'd like to replicate
Any ideas on how this is done? Unfortunately going to inspector clears text from the field.
What most sites show
This turns out to not be a style, but rather an effect of a precisely sized text box/precisely tuned line height. The squiggle is 2px tall, but the bottom 1px was cut off, giving it the appearance of a dashed line, but in fact it is not.
This method can be used to replicate the effect shown IF you are using a font where the letters that extend below the baseline don't go so far down that they touch the spellcheck squiggle.
It seems possible to move the squiggle independently of the text, which could possibly present a way to do emulate this style with any font.
If I find a way to do this, I will update further.
This is a browser feature that can be achieved (at least in Webkit/Blink) on input fields and contentEditable elements with spellcheck="true". Not every browser will implement it the same way. For that, you would have to build the text markers yourself in conjunction with a dictionary service (like Google Docs does, as one example).
https://jsfiddle.net/bn7pfyf3/
(change the "true"s to "false"s and you won't see any highlights on focus)
In Webkit/Blink, this is a DocumentMarker type (which is used for Ctrl+F, highlights, typos in input fields, and more). They are not exposed in the DOM or CSS.
https://github.com/crosswalk-project/blink-crosswalk/blob/master/Source/core/dom/DocumentMarker.h
Today I read about HTML5's color input and I thought I'd give it a try:
<input type="color" name="background" id="background" value="#ff0000">
When I click the input (in chrome and firefox, on windows), a color picker appears. However, it is positioned in the top left corner of my screen, not above the input.
Is this a known issue and will this be 'fixed' in the future? Is it possible to position the color picker through code? Or is this something that browsers can't do much about and that users have to live with?
The positioning of the input of type color is browser-specific implementation, in the official documentation there is no given rule for user-agents (i.e. browsers) how to position it over the page's element. This makes custom positioning via CSS for example, or JavaScript not possible.
However, there are some other rules (for example, there is always a color picked, and there is no way to set the value to the empty string.)
Keep in mind when using the input of type color, that Internet Explorer and Safari browsers do not support it yet.
One more caveat is that when creating a custom picker control, use 0-size instead of display: none. Otherwise browser will place the picker in the corner (out of the Visual DOM tree).
<input type="color" width="0" height="0" value="#ff0000">
<button onClick="/* logic to show the picker */">Pick a colour</button>
I had this same question. I wanted to create a Theme editor and wanted to do this. Like the VS Code when editing a CSS file.
I figured out some strategies for solving this problem:
Method A using positioned iframe and signalling changes between iframe and parent.
Figure out the absolute screen location where you want your picker to open.
Create a <input type=hidden with an id like signalColor. And monitor this id for changes.
Move a hidden <div with the absolute position and size where you need the color picker.
Place an iframe in the <div with the code to create a colour picker. Also, in the Iframe you will need an input with your initial color.
Set the color of the initial color within the iframe and then show the div.
Use the following post to figure out when to signal the new color or if cancelled.
https://lugolabs.com/articles/how-to-use-a-color-picker-in-javascript
Method B using window.open(…)+ Ajax
Figure out the absolute screen location where you want your picker to open.
Generate a random token file name.
Open a new Window with needed position and size, loading in any into the HTML you will need. Embed in the script the token file name and pass ajax credentials you will be using. Add references to JQuery, etc. Create a loop in the parent DOM to detect when the window is closed.
When the operator clicks on a new selection detect the click and capture the new colour value.
Send an ajax message with the new colour to the host. Saving the value in the token file.
Then close the window which then triggers the parent to use ajax to request the token file.
Here's a hacked solution which worked for me.
After page load ("AfterViewInit" in Angular), I picked all inputs with the type color.
One of them should be the color input I was applying to. For me it was the first one.
Then, I changed its style attribute.
See the code below:
let colorPickerInputs = document.querySelectorAll('input[type=color]');
if (colorPickerInputs)
colorPickerInputs[0].setAttribute('style', 'position: absolute; top: 20px; opacity: 0;');
I've created a button with Raphael.js that has a gradient background. Now I want to change to a different gradient when hovering over the button using Element.hover. But as soon as I move the mouse over the button, it starts showing only a solid color.
Here's my fiddle.
Maybe it's browser-related. I only tested Chrome and Safari under OS X.
The problem is that you call transform on the set afterwards. The tranform() method is deprecated, use the transform attr instead. Also, you might want to apply the transformation individually when you create the elements, as Raphael is known to have some issues in transforming sets uniformly.
Is it possible to only trigger a div's mouseover when the cursor is over an opaque part of the div's background image? Perhaps via Javascript?
All I can find with Google are old IE PNG fixes.
This looks like a similar question to this one: Hit detection on non-transparent pixel
I suppose this could also be done for background image by getting the attribute with jQuery:
$('#myDiv').css('background-image');
I haven't personally done this, but it seems like a viable solution. This will only work for modern browsers, but you should be able to make it back-compatible with excanvas.
It is possible, just not very easily. You'll have to use a lot of Javascript.
You'd want to attach to your <div>'s onmousemove event, which returns the X,Y coordinates of the cursor. Your event handler function would then test to see if the cursor is in the correct place in order to trigger an alternative onmouseover event.
Implementing the "is the cursor over an opaque pixel or not?" test can be done two ways: the first is to create a simple mathematical expression (say if the opaque parts of the image make neat rectangles, circles or polygons). The more difficult (and less browser-supported) way is to load the background image into a Canvas object and then get the current pixel value's opacity figure and take it from there, like so:
var pixel = canvas.getImageData(x, y, 1, 1).data;
var alpha = pixel[3]; // assuming RGBA
if( alpha > threshold ) onMouseOver(); // raise the event
Another alternative is to create an entirely transparent div (or some other element) positioned and sized so that it only covers the opaque part of the div below, then just test the mouseover of that element's box.
It's a bit of tweaking but why don't you add a class to your opaque div, and use JavaScript to check for it?
In jQuery:
$('div').mouseover(function(){
if ($(this).is('.opaque')) {
//Some actions
}
});