How to hide an image by src attribute in IE? - javascript

I’m trying to find an image that has a src that starts with a particular url and hide it. I can do it but it doesn’t work on IE.
Is there a version of this css (maybe javascript) that will also work for edge and IE
img[src ^= "https://www.google"]{
display: none;
}

Use this CSS3 attribute selector:
img[src*="hideme"] {
display: none;
}
As usual, some versions of IE are known to have bugs with CSS3 attribute selectors. The SitePoint Reference is useful: Link

Below is the example tested with IE 11 and MS Edge browser version 44. In both and other browsers the code is working fine.
<!DOCTYPE html>
<html>
<head>
<style>
img[src*="i.postimg.cc"] {display: none;}
</style>
</head>
<body>
<img src="https://i.postimg.cc/13D5v67n/223.png" alt="Trulli" width="500" height="333">
</body>
</html>
Reference:
Hide image of specific size, by CSS? (Refer the accepted answer in the thread.)

Related

Chrome text-decoration line-through prevents click

I am programming a web app where clicking on a bit of text should toggle the line-through css style. This works on Firefox, but the click event seems not to fire in Chrome once the style has been applied.
HTML:
<script>
$(document).ready({
$(".liner").click(toggleStrikethrough);
});
<div class="liner">
Hello World
</div>
JS (note that I've used jQuery because that's what I'm using in the app, but a vanilla solution would be acceptable as well):
function toggleStrikethrough()
{
if($(this).css("text-decoration") != "line-through")
$(this).css("text-decoration","line-through");
else
$(this).css("text-decoration","");
}
JS Fiddle
In CSS3, text-decoration has multiple parts. In your particular case, the read $(this).css("text-decoration") returns line-through solid rgb(0, 0, 0).
Instead, try changing the if condition to $(this).css("text-decoration-line") to get only the line style part of the text decoration.
I tried to solve your problem using different way. I think it was succeeded. you can use below mention code to get same output that you want.
$('div').bind('click',function(){
$(this).toggleClass('liner');
});
.liner{
text-decoration:line-through;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Exzmple</title>
<style>
</style>
</head>
<body>
<div class="liner">Hello World</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>
I used bind , toggleClass methods for this. As a result js code was simple and it could run efficiently.

getComputedStyle text-decoration inherit

getComputedStyle fails to get text-decoration property inherited, but can get font-size.
Failed in Firefox 25 and GoogleChrome 30.
Note: In Internet Explorer 10 work!
<!DOCTYPE html>
<html>
<style>
#parent
{
font-size: 38px;
text-decoration: underline;
}
</style>
<body>
<div id="parent">
<p id="child">Test</p>
</div>
<script>
var elem = document.getElementById("child");
document.write("text-decoration:"+window.getComputedStyle(elem).getPropertyValue("text-decoration"));
document.write("<br>");
document.write("text-decoration:"+document.defaultView.getComputedStyle(elem).getPropertyValue("text-decoration"));
document.write("<hr>");
document.write("font-size:"+window.getComputedStyle(elem).getPropertyValue("font-size"));
document.write("<br>");
document.write("font-size:"+document.defaultView.getComputedStyle(elem).getPropertyValue("font-size"));
</script>
</body>
</html>
It is a fault of mine, or browsers that failed?
text-decoration isn't supposed to inherit, even though the parent text decoration affects the child text. This is unlike font-size, which does inherit.
That being said, this definitely looks like an IE bug. While window.getComputedStyle() is reporting in IE10 as inherited, it's interesting to note that the F12 developer tools say otherwise.
References:
https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration
http://reference.sitepoint.com/css/text-decoration

Remove Black Outline of Input buttons in IE 9 using css

Is it possible to remove the annoying black border that IE 9 puts around submit buttons?
This only occurs when the form is in focus.
IE 9:
IE 9 http://olokoo.com/sandbox/ie.jpg
FireFox
Firefox http://olokoo.com/sandbox/firefox.jpg
You can use jQuery if you want, but adding the following to your CSS should fix it
input[type=submit] { border:none !important; }
//edit per your comment
Depending on if you want to use HTML5 or not, you need to make sure you've set up the DOCTYPE and meta tags correctly:
HTML5 setup:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Example document</title>
</head>
<body>
<p>Example paragraph</p>
</body>
</html>
For HTML4 setup examples see: W3School
If you want to remove the border from the buttons with jQuery, something like this should work:
$(":button").css({border-width:"0px"});

Jquery html() bug?

I have a bug in IE8, but works in firefox, chrome and safari. Here's my HTML code
<!DOCTYPE html>
<html dir="ltr">
<head>
<style>
header {display:block; background-color:#333; color:#fff;height:30px;}
</style>
<!--[if lt IE 9]>
<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="bug">
<header><h2>h2</h2></header>
</div>
<button type="button" onclick="$('#bug').html(' <header><h2>h2</h2></header>');">press</button>
<script type="text/javascript" language="javascript" src="jquery.tools.min.js"></script>
</body>
</html>
You can see the code in action here - http://evermight.com/jquerybug/index.html
In IE8, how come when I press the "press" button, the h2 with black background turns to white background instead of remaining as black background? When I remove the white space in between html(' and <header> of the button's onclick event handler, then the black bakground persists as expected.
Why does an empty space affect the CSS appearance of the header tag in IE8?
This isn't a jQuery bug -- its an IE combined with HTML5shiv bug. Or you could just call it an IE bug in general.
If you try your code, replacing
<header> .... </header>
with
<div class='header'> .... </div>
you'll find it works correctly, even with the leading space.
If you read the issues page on the html5shiv site this is a known bug (dynamically created HTML5 elements not styling).
You can also read this stackoverflow post for more information on what's going on and some workaround suggestions.
You need the innershiv.

jquery script only works in firefox

I am using this jquery script to create a small slideshow between .jpg's the problem is it only works on firefox, not safari , not chrome , not opera... any ideas?
<script type='text/javascript'>
$(document).ready(function() {
slideShow();
});
function slideShow(){
var current = $('#animation .show');
var next = current.next() .length ? current.next() : current.parent() .children(':first');
current.hide() .removeClass('show');
next.fadeIn() .addClass('show');
setTimeout(slideShow, 2000);
}
</script>
I tried to reproduce your code. Created a simple HTML page:
<div id="animation">
<img class="show" src="http://www.ewatching.nl/wp-content/uploads/2010/10/google_logo_3.jpg" />
<img src="http://thenextweb.com/nl/files/2010/01/google.jpg" />
<img src="http://www.descherpepen.nl/wp-content/uploads/2010/06/google.jpg" />
<img src="http://images.retecool.com/uploads/reet-google_chrome.jpg" />
</div>
with some css (not ideal, but it does the trick)
<style type="text/css">
#animation > img
{
display:none;
visibility:hidden;
}
.show
{
display: block !important;
visibility:visible !important;
}
</style>
Then I use your script to create the slideshow. It works in IE, Opera, Firefox and Safari.
The problem isn't your script. Perhaps your html and css? Can you post those?
Jquery was designed to be cross browser, making it a lot simpler for developers!
I see that the script is probably internal on your page, have you tried clearing the caches of other browsers to make sure any dependant scripts are loaded properly?
Also do you have any browser specific code? Along the lines of, if browser = IE, use some of this code. This can conflict with other pieces of code on your page.
Other than that, make sure you are of course running the same file and not an older version (I've done this before!)
Is it something to do with the spaces in your statements? For example, instead of
current.hide() .removeClass('show');
perhaps try
current.hide().removeClass('show');
And so on for your code? Just a thought!

Categories