Make text selectable in html pages looking like iPhone forms - javascript

I am working on an application than needs to create pages looking like this:
http://iui-js.appspot.com/samples/music/music.html#_usage
The problem I have is that, just like in the page linked above, the values are not selectable neither with iSafari nor with the desktop version of Safari.
I need to be able to select and copy the values (in the example page these are '2', '8' and '27').
I would be fine simply knowing why the above text is not selectable in the first place, as this would probably be enough to find a workaround solution.
Thanks everybody for the kind attention.

In this case the problem is caused by the following option
-webkit-user-select:none;
Alternative options, for the same property, are auto and text.
Further documentation available on Safari CSS reference page

Related

Atrributes Selection Not working on Android browsers

I have a problem with attributes (PrestaShop 1.6)
http://www.laddersukdirect.co.uk/telescopic-ladders/abbey-telescopic-ladders.html
If you click on Choose Size: from any browser but an android browser it works as it should.
BUT if you click on Choose Size: from an android browser it opens the options to select from then closes it straight away.
Anyone else have this problem if so have you solved the issue?
PrestaShop uses jQuery Uniform plugins to style up it's inputs. This plugin actually generates some divs that show the selected information and hides the actual input (opacity = 0). You should try inspecting the amrkup and you'll see what I'm talking about.
I think you have two options:
Trying to disable Uniform plugin from styling up that select element - either by calling some "undo" function (you should look up the documentation) or by removing the class from that triggers the plugin (I'm actually just guessing here)
Modifying product.tpl - replacing current select element with a basic select element (which I assume works on Android)
You can also use jQuery: remove the overlay element, and set opacity for select element back to 1. (I don't really recommend this method)
Well thank you very much, editing the product.tpl file was indeed the way to go.
It seems that the select form_control is not functioning properly with the explorer for mobile phones (it was working perfectly for Google Chrome on mobiles though).
This is a solution for your problem:
Open up product.tpl inside your themes folder and look for:
<select name="{$groupName}" id="group_{$id_attribute_group|intval}" class="form-control attribute_select no-print">
And comment out form-control after class so it looks like:
<select name="{$groupName}" id="group_{$id_attribute_group|intval}" class="attribute_select no-print">
Then to add your global.css file inside your {your_theme}/css
Add the following to make it look go again:
select#group_3.attribute_select {width: 60%!important;}
select#group_1.attribute_select {width: 60%!important;}
The numbers after group vary per website, so take a look which group number is being used for you attribute selector.

Edit opened HTML Page, with Javascript

I was looking into making Firefox addons, and I need some help.
Is it possible to edit an HTML page that is open in the browser with javascript?
For example:
User types in "google.com"
Addon is activated
Javascript changes contents of "google.com" to maybe say "Hello!" at the bottom.
Of course this isn't specifically what I want to do, but a push in the right direction on how to accomplish such a task would be great.
~Carpetfizz
From within a Firefox addon this is obviously possible as many extensions do this.
If you, however, simply want to modify the DOM and nothing else than I would recommend taking a look at greasemonkey. Loads of example scripts around to do this: http://userscripts.org/
And the added benefit, if written correctly they also work in Chrome and other browsers.
Yes, it is. You must find a tutorial about javascript DOM manipulation

Hovering over option in a select list (window ) in IEs does not generate a tooltip

Hovering over option in a select list (window ) in IEs does not generate a tooltip, but works fine in FireFox and Chrome. I’ve set up a working demonstration on jsbin.com and jsfiddle.net, whichever is more convenient.
Link To jsfiddle.net Demo.
and
Link To jsbin.com Demo.
So you can see it in action.
The function which is in use was not written by me, I found it here: owainlewis.com/blog/post/simple_jquery_tool_tip_plugin. Originally it was written for showing 'tittle' attributes as a tool-tip, but I re-wrote it some of it (replaced 'title' with 'option') to accommodate my needs.
To know exactly what I mean, check out those demos in Firefox or Chrome first.
Sorry, I forgot to mention that this HTML code is generated by PHP. Using title attribute would be great for me, if I was in charge of PHP, then I would not have to re-write the original plugin.
Unfortunately, for now I have to keep looking.
P.S.
I am open to any workarounds. (If there is no hack I will go back to the title attribute.)
You don't need JavaScript to do it, and in fact, you can't use JavaScript to do it. IE does not respond to mouseover on option items. If you need dynamic tooltips just change the title attribute of the option.
Though it's a simple title attribute, this works for me in IE9: http://jsfiddle.net/n5YUk/4/
Check the first option in the list - I changed it to:
<option title="dash dash" Value="">--</option>
I know it's not what you're hoping to get but it's the only way you'll get it in IE.
Paul
Set the title property of the option (you can use jquery for this also by setting the attr) tag and you should be good to go.

simple html textarea/contenteditable text editor component supporting links, undo, tab-in/outdent for google chrome

im writing a chrome extension and need a simple text editor component so that users can edit simple notes in the extension.
required:
clickable links, but without any sort of modal dialog. its sufficient if any "http://.." substrings can be turned into actual clickable links of any sort (ie. divs styled like links and with onclick handler are fine)
undo/redo functionality
tab indent/outdent of a single line or multiple selected lines simultaneously
seamless switch between editing/displaying, ie. no save buttons or reflowing or the like (counterexample)
dont need any kind of formatting capabilities apart from indenting, just plain text (counterexample)
html/js that works on chrome
i have looked at/tried:
<textarea/>: undo included and tab indent easy to implement, but no way to do links
<div contenteditable="true">: undo broken, tab indent=hell (selections and ranges), but links work fine. also have set white-space: nowrap; to show indent spaces. this is my current solution but its very buggy, maybe ill have to open another question just for this.
tinymce: overkill i guess
markitup: looks good, but since it is a textarea, i figure no links possible
ACE: looks promising, worth a shot? not overkill?
kix-standalone demo doesnt work on chrome (ironically)
any comments or answers very appreciated..
edit: i have used codemirror 1 in my project (Syncpad for Simplenote Chrome extension) and i am quite content with it. CodeMirror provided alot of additional infrastructure for text editing (esp live parsing) which i wouldnt want to miss anymore. Will be updating to codemirror 2 when i have the time
How about CodeMirror? I don't think it will do links, but it's nicely engineered and you may be able to extend it.

Tracking down display errors in IE, when everything looks good in firefox

I am a super newb at developing web pages. Especially pages that are created dynamically from javascript.
I have a page that I have worked on that uses some templates from prototype, and widgets from dojo, as well as plain old javascript. This page looks and acts perfectly in firefox.
It is basically adding rows to a table, and adding widgets to the cells.
The widgets basically seem like they are in the wrong column/wrong place.
Where do I start looking to figure out what the incompatibilities are between firefox and IE?
There are lots of sites that will give you information about compatibility. I'd check google. Also, you can download IETester which will allow you to see how your site looks in most IE versions (5.5+).
Take a look at: http://www.quirksmode.org/
I am currently trying to make a template that displays well with FF do the same in IE.
So far, I am breaking it down div by div with corresponding JS function.
Then it is easier to look up the specifics of that particular piece you are trying to make compatible.
For example, I was implementing the enter key and noticed it worked well in FF and not IE. After I looked at that specific input box in html and gathered there were no problems with it, I dove into that specific JS function. Inside I found that the currentTarget wasn't "working". I did a quick search on current target in IE and got all the info I needed to get it to work.
Get yourself a good JS debugger as well, FireBug works with both browsers.
There just aren't good web standards in the web industry right now. Everyone is doing their own thing, it is like the house and bank market. These guys are trying though.

Categories

Resources