I am looking for simple and short solution of accessing SELECT value on HTML website in Internet Explorers (6 and 7).
HTML
<select id="s1">
<option>Option1</option>
</select>
JS:
document.getElementById("s1").options[document.getElementById("s1").selectedIndex].value
Above code do not work. I get empty strings.
I found one solution - I would have to make every option look like this:
<option value="Option1">Option1</option>
That works but my website mostly cosist of forms, so such operation increase its size by 50-70%.
Do you know any other ways ?
PS. I've read that I should use "text" instead of "value", but I am not sure about that. I couldn't find what are the consequences of doing this.
Use,
document.getElementById("s1").options[document.getElementById("s1").selectedIndex].innerHTML;
This is because you don't have a value attribute in your option:
<select id="s1">
<option value="Option1">Option1</option>
</select>
This would give you the correct value back.
Newer browsers send the option text instead of the missing value attribute.
As for your question as to what to use, the proper semantic way would be to use value attribute. What if your display text is different than value? Would you change your design again?
If page size is a concern, try removing whitespace or gzipping content instead of breaking the semantics. Note that some older IE6 versions (IE6 with SP3 is fine I guess) may not play well with GZipped content.
Related
Chrome has a feature as did firebug before it went defunct to break on an element's changes. Chrome however, only breaks on 3 types of changes and Firebug no longer works on new versions of Firefox and the tool to replace doesn't have the ability to break on changes to an element.
I have tried all three break on events for chrome and none enter the debugger. I have a select list like:
<select id="someid">
<option value="">Choose</option>
<option value="12"> Some Text with bad formatting and <span>in it for some reason</span>
<option value="13"> Other text with <span>etc</span> in it</option>
</select>
What I have found happens is that some JS on load will replace all the bad option text with valid html after load. Why does magento2 do this? I don't know. But it makes it a pain for me and is likely tied to a core feature as the spans have ids to products and more in it.
I append text to the options but it gets removed by this other replace procedure. I ended up writing setTimeout to check every 1000ms if the newer option text is there, and add my changes. But it's not a good fix it's a work around that is prone to break for a multitude of reasons, and slow besides.
My question is, in this gigantic huge program of software I never wrote how can I easily find what arbitrary javascript is changing the option text on load? Chrome won't persist on load, and even if I quickfinger Mcgee it and hit f8 to pause loading just as it starts, then find the element, then set it to break on changes, it doesn't actually break.
So I tried Mutation Observers, but then found out via another stack overflow answer to someone else's question, that you can never have the call stack visible using mutation observers. So now I'm looking at watch(), but I doubt it will solve my issue either?
Why isn't breaking on changes to element or it's children or it's text from JS a default easy to use feature this is a CONSTANT issue in development to find out which chunk of code in thousands and thousands of lines is actually causing a behavior you don't want, or you wish to run other javascript after it runs.
I don't have reputation to comment, but based on what you said:
What I have found happens is that some JS on load will replace all the bad option text with valid html after load. Why does magento2 do this?
i was thinking if magento doesn't have a function to show raw input ? maybe it's the root of your problems...
https://magento.stackexchange.com/questions/569/how-to-escape-output-data
I made the horrible mistake of using an html feature without looking it up first and, lo and behold, when I'm a few hours away from deploying a website I realize Safari doesn't have support for datalist...
http://caniuse.com/#search=datalist
This is a rather troublesome thing since a large part of the audience for this specific website consists of the technologically impaired and, as such, I expect safari to constitute 30-50% of all access on the website.
Now, I can see how a simple-ish polyfill for datalist could be written in JavaScript, so that I can just include a script tag and painlessly-ish get rid of the problem without having to shim my whole html, but I can't find said JavaScript.
I'm not asking for you guys to write it, I could obviously do that myself if I wanted to waste a bunch of time. I'm hoping you guys know of a true-tested library for this that I, in my stupidity and anger can't seem to find right now.
Before anyone comments on the issue, yes, it was stupid of me not to do parallel testing on Safari considering up to half my users could come from there... but hindsight is 20-20
edit: I should mention, I found two plugin which were sadly, Jquery&modernizer depended, and that's really the kind of dependency I'd rather not take on.
Edit: Someone marked this question as a duplicate without apparently reading the questions. I will, as such, restate my question:
I want a Javascript script that polyfills datalists for Safari/Opera mini. Now, lets go through these terms, shall we:
-> Javascript != Hmtml
-> polyfill: https://en.wikipedia.org/wiki/Polyfill Let me TL;DR: Allows you to implement a feature that is not supported by a browser.
-> datalist: allows the user to type words dynamically in an input element and suggests autcompletes from a drop-downlist. It looks like this:
<body>
Choose: <input type="text" list="languages">
<label for="languages">
<datalist id="languages">
<option value="JavaScript"></option>
<option value="Haskell"></option>
<option value="Ruby"></option>
<option value="Go"></option>
<option value="Python"></option>
<option value="etc"></option>
</datalist>
</label>
https://jsfiddle.net/a5o2cna3/
Problem with the other answer is that:
a) It take html editing, its not a javascript that you insert painlessly and that allows other human beings to read the code without going: What the fuck is that ?
b) It REPLACES the datalist by a select element. It can server the same purpose IF you don't want users to input anything but the predefined options, IF you don't care about how the element look visually AND IF you don't care about the fact that, instead of typing, the user has to select from a list (very annoying on mobile).
This is how the proposed solution works (the one in the "duplicate" question):
<body>
Choose: <input type="text" list="languages">
<label for="languages">
<select id="languages">
<option value="JavaScript">JavaScript</option>
<option value="Haskell">Haskell</option>
<option value="Ruby">Ruby</option>
<option value="Go">Go</option>
<option value="Python">Python</option>
<option value="etc">etc</option>
</select>
</label>
https://jsfiddle.net/vv63pptj/
So, this question is indeed similar but its similar to a question that wasn't ever solved the way I wanted it solve it, and instead of "necro bumping" (don't even know if its possible).
Now, to exemplify what I wanted (and found after some digging on github):
https://github.com/Fyrd/purejs-datalist-polyfill
-> No external dependencies, just a few hundred lines of js and css
-> Can be simply included in the html and it makes existing datalists work without mangling the html
-> Makes the input element behave on safari and opear mini the same way it behaves in firefox, chrome and android browser. It offer the same functionality and looks the same. Its not a "This replace you element with an element with different behavior but often used for similar situations" its a "This mimics your element with javascript for browsers that don't support it"
I shall post this answer to the similar question, in case people reading that want an alternative. But I wanted to explain as clear as possible why this is not a duplicate, since it was asked of me.
Safari support will be part of the upcoming iOS and MacOS releases that most likely will be released end of February/beginning of March.
And you could as well use another polyfill for that: https://github.com/mfranzke/datalist-polyfill/
The answer to my question was found digging a bit on github:
https://github.com/Fyrd/purejs-datalist-polyfill
Basically a short and sweet .js and .css that you can include in your html and it makes datalists linked inputs behave the same on Safari and Opera mini as they do on Chrome, Firefox and Android Browser.
I am working on HTML and JavaScript. I need to store some values in HTML and use that some for other purpose for other languages like JAVA (HTML parsing).
Can I use own attributes like column='helloworld'? Is it valid in HTML?
I also see "data-", but I don't know what happened if I do not use "data-".
Does that give any error ?
Please elaborate someone, I have no expertise in HTML.
<input type="text" id="1" class="text-clone" name="default">
<select id="Name" class="dropdown-clone" name="Name">
<option value="">Name</option>
<option value="MyName">myName</option>
</select>
$('#'+id).find("input[type=text]").attr("column",$("#Name").val());
Name value is any string like "myName".
after this when I see on my browser by using inspect element , column="myName" . So I am confused why we can not do this which I did , that is wrong or correct . safe or not ?
I would say using custom attributes is okey and valid as soon as many frameworks like Angular use it as well. Your can find some information about it here
Should you use it? Hard to say. For many situations cookies is much easier and cleaner option as #mtb say in comment.
About data attribute you mentioned in your question:
HTML5 is designed with extensibility in mind for data that should be
associated with a particular element but need not have any defined
meaning. data-* attributes allow us to store extra information on
standard, semantic HTML elements without other hacks such as
non-standard attributes, extra properties on DOM, or setUserData.
For more information about it check this link
In IE the dropdown list is coming upward inspite of coming downward when you click on it because of more number of values in it. In mozilla its working fine. Any suggestions? how to bring it downward. Also i am using IE8.
<s:select theme="simple" key="" id="" value="12" list="#{'1':'1','2':'2','3':'3'
,'4':'4','5':'5','6':'6','7':'7','8':'8','9':'9','10':'10','11':'11','12':'12','13':'13','14':'14','15':'15','16':'16','17':'17','18':'18','19':'19','20':'20','21':'21','22':'22','23':'23','24':'24','25':'25','26':'26','27':'27','28':'28','29':'29','30':'30','31':'31','32':'32','33':'33','34':'34','35':'35','36':'36'}"/>
Unfortunately this is something that seems to be handled by the browser explicitly, even after your html/javascript code.
Meaning that if IE detects that's it's a select and has the ability to make it an updrop due to little space, it will.
Alternatively you can use a custom dropdown control which will not actually render as a select, therefor you will have more control on how it works. There are many that can be found on-line using JavaScript/jQuery.
Personally I think it might be too much trouble for such a feature.
I have a select drop-down that is supposed to represent the hierarchy of pages in a site.
<select id="parent" name="parent">
<option value="">(none)</option>
<option class="inset0" value="home">home</option>
<option class="inset1" value="aboutpage">aboutpage</option>
<option class="inset2" value="about">about</option>
<option class="inset2" value="staff">staff</option>
<option class="inset1" value="news">news</option>
<option class="inset1" value="products">products</option>
<option class="inset2" value="starter">starter</option>
<option class="inset3" value="nesso">nesso</option>
</select>
The construction is made on the backend and styled using css.
option.inset0 {text-indent:0px;}
option.inset1 {text-indent:10px;}
option.inset2 {text-indent:20px;}
option.inset3 {text-indent:30px;}
option.inset4 {text-indent:40px;}
option.inset5 {text-indent:50px;}
option.inset6 {text-indent:60px;}
This is making options of deeper levels display as indented according to the depth each page is in the site hierarchy. However this styling only works in FireFox, and not in Chrome. I know that styling of controls is largely uneven among browsers and operating systems, so I will not go there. Instead I would like to add "-" characters before the text of each option in order to make the hierarchy visible. I only need to do this for Chrome, since I am not supporting IE at all in this project.
The manipulation of the object's text will be done in javascript.
My question is this:
Knowing that browser detection is not recommended and feature detection is favored instead, how can I perform a feature detection for this browser behavior? If this is not possible, is there a quick test that will allow me to know if I'm in Chrome/webkit or Firefox/Gecko?
I can't imagine how one would feature detect this. I thought maybe the computed style may not be set, however a quick test showed it is.
There is an offical page (http://trac.webkit.org/wiki/DetectingWebKit) about detecting WebKit, but it's 4 years old, and the script simply checks the User Agent string, which is basically the same thing jQuery does for $.browser.webkit.
As for specifically detecting Chrome, it defines window.chrome (I can't find an official documentation, but see Safe feature-based way for detecting Google Chrome with Javascript?), but I guess the rendering problem will be in all Webkit browsers.