Image for <option> not working in IE - javascript

My requirement is to add images inside <option>. I have used the below code to display images in FF.
[Script]
var items = $("#ShipCountry option").children(); //dropdown options
for (i = 0; i < items.length; i++) {
$(items[i]).html("<img src='/Images/" + $(items[i]).html() + ".gif'></img>"); // adding image
}
This code works in FF but not in other browsers. I do not want to implement this logic using CSS as i need to display large number of images (options).
Is that possible without CSS for all browsers?

There is no way to make this work cross-browser, as lots of browsers restrict what you can do with the <option> tag. I'm surprised it works in Firefox to be honest. You might want to look into Select2 which makes this possible cross browser, and has great documentation.

Related

Mobile first when using match media?

I have a page that uses multiple form elements. Far too many for a smartphone without scrolling, which I don't want. To solve this problem, I put the form elements in a carousel.
When I don't need the carousel (larger displays) I need to eliminate it. The only way I know of to do this is to reassign the parent properties of the carousel items and then remove the carousel.
This approach works fine using java-script. However, to pull this off I would need to use match media to call the java-script functions. Since most legacy browsers (which don't support match media) are used by desktops wouldn't this go against mobile first development?
Would it be wiser to design for legacy browsers and then upgrade the page for newer, more robust devices that can understand more updated languages or am I approaching this problem entirely wrong? I would rather not add a polyfill to fix this problem if I don't have to. Forgive my ignorance if I'm not seeing the simple solution here.
Here is a snippet that changes the parent div for large displays at codepen.
// Transfer elements from carousel to a larger div display
function SetParentDiv() {
var newParent = document.getElementById('LargeDisplayPage');
var oldParent = document.getElementById('1');
// Carousel items are 3 divs with numbered id's
for (var x=1; x < 4; x++) {
oldParent = document.getElementById(x);
while (oldParent.childNodes.length > 0) {
newParent.appendChild(oldParent.childNodes[0]);
}; ///endwhile
}; // endfor
document.getElementById('SmallDevicePage').style.display = 'none';
...
Here is the full Code Pen

WebP Image Replacement

My end goal is to detect if the browser is capable of displaying webp images. If it is, replace all the images on the page with their webp equivalent (located in the same directory with the same name, just different extension)
Currently I have a script that successfully detects if the browser is able to display webp
(function(){
var WebP=new Image();
WebP.onload=WebP.onerror=function(){
if(WebP.height!=2){
console.log("You do not have WebP support.");
} else {
console.log("You do have WebP support.");
}
};
WebP.src='data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA';
})();
Inside the case for having webp support I have tried the following code but been unsuccessful.
// replace .gif with .webp
var allImages = document.body.getElementsByTagName("img");
var length = allImages.length;
var i;
for(i = 0; i < length; i++){
allImages[i].src.replace("png", "testtest");
console.log(allImages[i]);
}
When placed in the header the console does correctly show all of the image tags, but the source has not been changed from the filename.png that it originally was.
Any ideas on what is being done incorrectly?
Edit: I found found out the problem with why it was not loading the images, thanks to wsanville. Looking at the network tab in chrome however still reveals that I am loading both the png and now the webp image as well. How can I prevent the png image from loading in the first place?
The replace function returns a string, it doesn't mutate it. You just need to assign the value back:
allImages[i].src = allImages[i].src.replace("old", "new")
Edited for comment:
All browsers will download the corresponding file in the src attribute of an image. As an alternate to your approach, I suggest storing the file name in a different attribute of the img tag.
Your image tags could look like:
<img alt="" data-png-source="/path/to/image.png" />
The corresponding Javascript could set the src attribute to the correct version.
var supportsWebP = true; //set this variable properly
for(i = 0; i < length; i++)
{
var image = allImages[i];
var pngSource = image.getAttribute('data-png-source');
image.src = supportsWebP ? pngSource.replace('.png', '.webp') : pngSource;
}
I know this a very old question, but as I looked for a way to replace webp images with corresponding jpgs, I didn't find much.
With this post, I put this together which seems to work through IE 9.
(It might actually work further back with an older jQuery version, but I'm using jQuery 2.1.1 which breaks in IE <= 8 so I'm not certain)
It checks for .webp support, then if the browser doesn't support .webp, it replaces all occurrences with a .jpg equivalent.
$(function() {
var WebP=new Image();
WebP.onload=WebP.onerror=function(){
if(WebP.height!=2){
$('img[src$=".webp"]').each(function(index,element) {
element.src = element.src.replace('.webp','.jpg');
});
}
};
WebP.src='data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA';
});
If you have (some) control of the server, you can use content negotiation instead of javascript. See http://httpd.apache.org/docs/2.2/content-negotiation.html for how it's done in Apache.
You are actually trying to solve a variation of the classic responsive image problem.
The problem you have with changing the image src attributes is that a modern browser will look ahead and start downloading images with the wrong extension. You probably don't want to download images you aren't going to use.
The trick is to place the image inside a noscript tag, then progressively enhance that by changing the path as you read the textContent of the tag. In older browsers you will need a simple polyfill to read out the content of noscript tags.
You can view my series on responsive images and webP support here. View an example here based on Ethan Marcotte's classic responsive design.

color to B/W javascript affect

Is there any known/simple/open-source library that provide
a javascript function that will switch colored picture that is displayed in an html page into a black and white
That can be used in all the most used browsers (IE, FireFox, Chrome)?
I mean something like:
<html>
...
<img id="myPic" src="pic.jpg">
...
<script type="text/javascript">
function onEvent(){
var pic = document.getElementById("myPic");
magicFunctionToBlackAndWhite(pic);
}
</script>
</html>
looking for that magicFunctionToBlackAndWhite()
There's no one solution that works across all browsers, but you can combine different solutions:
For IE, use the following CSS: filter: Gray
A lot of other browsers supports canvas, so you should be able to use this javascript code for that.
Of course it should't be too much of a hassle to make an image b/w in a serverside language such as .net, so you could always have a javascript that in principle does something like the following:
var imgs = document.getElementsByTagName('img');
for(var i = 0; i < imgs.length; i++) {
imgs[i].src = 'convertimage.aspx?img=' + imgs[i].src;
}
...and then have all of the magic happening on the server.
That might be somehow possible by using the <canvas> element, but I would recommend you to do the black and white versions yourself, either manually or through some sort of script. Trust me – it'll save you a lot of trouble.

I wrote a tab control but I cannot get the css to work in all browsers, how do I fix it?

Using CSS, there are basically two classes, one for the tabs default colour, and a "selected" CSS class that is applied using JavaScript to whichever tab is clicked.
The control functions perfectly, but the dynamic CSS only works in IE7 and IE8.
The code is basically this:
for (var i = 0; i < group.children.length; i++)
{
child = group.children[i];
// Remove class (selected)
child.className = "";
To remove the "selected" css class from each element. The default CSS is automatic, not specified using class=, so basically this reverts them to default.
Then after the other logic, it applies the selected CSS to whichever one was clicked:
// Set selected tab
tab.className += "SelectedTab";
Am I doing it wrong? It seems ok in IE7/8 but Firefox renders the tabs correctly initially, with the first tab being "selected", but when I click another tab, it clears the selected CSS from the first one correctly, but doesn't apply "selected" css again to the next tab.
Have a look at the page using the DOM inspector in Firefox, and make sure there isn't something wrong with the JavaScript by either using the Error Console or Firebug.
If you could post some more code, or even better, the link to a test page, then we might be able to help you more. Right now there isn't much we can do with the code you've posted.
JQuery is really awesome for this kind of stuff.
$(child).removeClass("SelectedTab");
$(tab).addClass("SelectedTab");

Safari and Chrome: problem editing input 'size' attribute on the fly

I have the following bit of code to create an automatically resized text input:
// setup quick jump input
$("#goto").keydown(function(e){
var size = $(this).val().length;
// sanity
if ( size < 1 ) {
size = 1;
}
$(this).attr("size",size);
// if enter then GOTO->
if ( e.keyCode == 13 ) {
window.location.href = "/" + $(this).val();
}
});
HTML:
<input type="text" id="goto" size="1" name="goto" />
Problem:
Resizing the input doesn't work in Safari or Chrome, just Firefox and Opera. I'm using jquery 1.3.2 and would like to know if it's a bug in jquery or my implementation.
EDIT: sorry I wasn't clear enough at first - it's the part where I'm trying to update the size of the input on the fly that is broken. My bad. Thanks for the feedback so far, some very useful links there.
I doubt that the size attribute would work cross browser. I would switch to setting the maxlength and css width of the input field rather than changing the size attribute.
Looks like a bug/unsupported feature in webkit. Which Safari/Chrome share.
According to the jQuery documentation on keydown():
// Different browsers provide different codes
// see here for details: http://unixpapa.com/js/key.html
// ...
Have you checked the page referenced to see if Safari/Chrome/Webkit have different values for the Enter key?
The problem seems to lie in setting the size attribute. This line:
$(this).attr("size",size);
Safari nor Chrome doesn't respect some attributes. But you can set it via css element. Works good.
$(this).css("width","4em");
For example, i have noticed that onClick attribute doesn't work in Chrome when onclick is typed.

Categories

Resources