Javascript - replace broken image by text (div; css class) - javascript

I am trying to replace all broken image by JS. I use this code to replace all broken images by notfound.png image.
$(document).ready(function() {
$('img').attr('onError', 'this.src="notfound.png"');
});
Anyway, I would like to replace them by a text notice instead of image. I cannot find the proper way how to do it, thank you very much for your help. JS is not my cup of coffee :(
I would like to use this for the text part:
Text to to shown...
EDIT:
OK, I have found this solution working fine, but doesnt accept CSS class
<script type="text/javascript">
$(document).ready(function() {
$('.post_body img').one('error', function() {
$(this).replaceWith('<div>Image not found (error 404)</div>').addClass('error404');
});
});
</script>
Anyway as I wrote CSS class is not added, so this solution is not complete :(
CSS will be:
.error404 {
display: block;
color: #667d99;
font-weight: bold;
font-size: 11px;
border: 1px dotted;
border-radius: 3px;
padding: 5px;
margin: 10px;
background: #e7edf3;
text-aling: center;
}

Ok, I think I have found a solution for you. I tried to use jQuery error function. This one helped me:
To replace all the missing images with another, you can update the src attribute inside the callback passed to .error(). Be sure that the replacement image exists; otherwise the error event will be triggered indefinitely.
In your example this would be the best:
$('img').each(function() {
var img = $(this);
img.error(function() {
img.replaceWith('<div class="error404">Image not found (error 404)</div>');
}).attr('src', img.attr('src'));
});
I also made a jsFiddle example for you, which is working great for me.

You can create a text node and append it to the parent of img, and optionally remove img if needed. This code goes inside the error handler for img
$('img').on('error', function(){
$(this).parent().append($('<div>Broken image</div>'));
$(this).remove();
})

If you really need to use javascript for this try
$(document).ready(function() {
$('img').attr('alt', 'Alternative text');
});
But the same is achievable by barebone HTML
<img src="path/to/image.jpg" alt="Alternative text">

You can change the alt if an error is thrown just like you're doing with the image.
function imgMissing(image) {
image.onerror = "";
image.alt = "Image not Found";
return true;
}
The HTML:
<img src="image.jpg" onerror="imgMissing(this);" >

EDIT: OK, I have found this solution working fine:
<script type="text/javascript">
$(document).ready(function() {
$('.post_body img').one('error', function() {
$(this).replaceWith('<div>Image not found (error 404)</div>');
});
});
</script>
Anyway one more think, I need to add CSS class "error404" for this "div", how to do that in JS? Thank you very much!
CSS will be:
.error404 {
display: block;
color: #667d99;
font-weight: bold;
font-size: 11px;
border: 1px dotted;
border-radius: 3px;
padding: 5px;
margin: 10px;
background: #e7edf3;
}

Related

I don't understand how to use document.getElementById(‘id’).onclick

I'm learning javascript right now and I am just building a simple menu that will show when the nav button is clicked.
I don't understand how to use the document.getElementById(‘id’).onclick when in a separated js file that is linked to my html. Reading around I think I understand that my problem is that you cannot call onclick out the blue because the DOM element are not yet defined.. or something alone those line. I just don't understand then how to proceed.
If I add within my button html tag onclick="function()" it works, but it don't when I add it within my separate js file. I'm using the W3school tutorial found here.
Here is my code
<nav>
<button class="nav-button" id="nav">
<div class="menu-button"></div>
<div class="menu-button"></div>
<div class="menu-button"></div>
</button>
<div class="dropdown-menu" id="dropdown">
Hello
Hello
Hello
</div>
</nav>
.nav-button {
background: none;
border: none;
margin-left: 1em;
padding-top: 12px;
cursor: pointer;
}
.menu-button {
background-color: #fff;
width: 30px;
height: 4px;
margin-bottom: 5px;
border-radius: 5px;
}
.dropdown-menu {
margin-top: 7px;
width: 100px;
background-color: #fff;
display: none;
}
.showDropDown {
display: block;
}
function showDropDown() {
document.getElementById('dropdown').classList.toggle("showDropDown");
}
document.getElementById("nav").onclick = function showDropDown()
Here is a codepen
Thanks for your help!
just instead of
document.getElementById("nav").onclick = function showDropDown()
replace it with
document.getElementById("nav").onclick = showDropDown
because the onclick accepts function and you'r already defined this function
1.create myjavascript.js file in same folder where your page html is.
2.copy the javascript code in myjavascript.js "only code not tag <script></script>"
4.paste this at the end of your html page
<SCRIPT language="javascript" src="myjavascript.js" type="text/javascript"></SCRIPT>
This is the way to reference your code javascript in your html file.
It will be much easier to work with jquery than plain javascript.
Here how you are calling showDropDown function is wrong
change function showDropDown to
showDropDown
Better you can make the closure at the button click event like
let btn = document.getElementById("nav");
let toggleIt = document.getElementById('dropdown');
btn.onclick = function(){
toggleIt.classList.toggle("showDropDown");
};
Having it in a separate js file should work you just need to import the js file using the script tag. You should probably do this at the end of the HTML to guarantee that the js is ran after the DOM is loaded.
Update Your missing the brackets around the function call:
document.getElementById("nav").onclick = function() { showDropDown(); };

How to always display the alt attribute of an anchor tag

How to always display the alt attribute of an anchor tag in HTML?
Here is a situation where I have multiple repeating grids and I want to identify with date.
So i want to show the title always, how can I achieve this?
see details
see details
see details
Here is a demo: https://jsfiddle.net/wub5y96d/1/
You can output the content of an element's attribute using content: attr(attribute); on either of the pseudo elements ::after or ::before, like this:
a[title]::after {
content: ' ('attr(title)')';
}
Demo
try this simple loop
$('a').each(function(){
var text = $(this).text();
var title = $(this).attr('title');
$(this).text(text+'-'+title);
});
Why do people keep using Fiddle's. When Snippets will work just as fine.. :)
You can run them directly inside SO, how cool is that. Oh, well maybe it's just me..
a::after {
position: absolute;
top: 16px;
left: 0px;
width: 200px;
color: silver;
content: attr(data-created);
font-size: smaller;
}
a {
position:relative;
display:inline-block;
height: 30px;
}
<div>
see details
</div>
<div>
see details
</div>

Keep an image selected

I have a program which allows the user to select some images and i gave them the pseudo class
.my_image_clas:hover{
border:3px solid blue;
-webkit-box-sizing: border-box; }
to make them surrounded with borders when the pointer goes over (giving a "selected effect"). I'd like to keep this effect even when i select the image, like this :
How can i achieve this? (With javascript)
CSS-only "hack"
At first this question asked for CSS-only solution and while, as others have said, it's not really possible to achieve what you ask for without JavaScript, there is a CSS-only hack, however:
img {
margin: 3px;
width: 100px;
}
img:hover, img:target {
border: 3px solid green;
margin: 0;
}
<img id="a" src="https://farm1.static.flickr.com/640/23366158776_3bddebe005_t.jpg" />
<img id="b" src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Marsglobe_tiny2.jpg" />
It works by making your images a target of a click on an anchor they are contained in. We can style elements that are link targets, because we have a selector for that in CSS.
Note that this way you can select only one image.
Pure JavaScript
If you want to do it with JavaScript though, you can use below code:
function select(element) {
element.onclick = function() {
element.classList.toggle('selected');
}
}
Array.from(document.getElementsByClassName('selectable')).forEach(select);
img {
margin: 3px;
}
.selected {
border: 3px solid green;
margin: 0;
}
<img class="selectable" src="https://farm1.static.flickr.com/640/23366158776_3bddebe005_t.jpg" />
<img class="selectable" src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Marsglobe_tiny2.jpg" />
It works by toggling class named selected on click for every element with class selectable. Also, it will let you select multiple items.
If you want to limit the user to selecting only one element though, change the above JavaScript to:
function select(element) {
element.onclick = function() {
var selected = document.getElementsByClassName('selected')[0];
if (typeof selected !== 'undefined') { selected.classList.remove('selected'); }
if (element !== selected) { element.classList.add('selected'); }
}
}
Array.from(document.getElementsByClassName('selectable')).forEach(select);
You may use jQuery here for hovering effects, jQuery provides the hover() pseudo-event, which behaves better than moueseenter/mouseleave. Also, it's a good idea to create a CSS class for each state (normal and hovered), and then change the class on hover:
$(document).ready(function() {
$(".my_image_clas").hover(
function() { $(this).addClass("Hover"); },
function() { $(this).removeClass("Hover"); }
);
});
.my_image_clas.Hover { border: 3px solid blue; }
#Francesco Monti I've read your comment.
for working with jquery you may add jquery.js under the head tag of your html
<head>
<script src="jquery-1.12.0.min.js"></script>
</head>
or adding online would be
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
and you can use $(document).ready(function() under the script tags.
If you want you can separate js & css files and includes those files accordingly.
Your approx CSS:
.item {
box-sizing: border-box;
border: 2px solid transparent;
}
.item.selected,
.item:hover,
.item:focus {
border: 2px solid blue;
}
Some basic jQuery:
$('.item').on('click', function (event) {
event.preventDefault(); // Prevent default behavior if .item is a link or button
$(this).toggleClass('selected');
})

Load Images only after mouseover on URL (using DIV Tag)

I'm using this method, to show a Picture only after a URL-mouseover:
TITLE<span><img src="IMAGE-URL"></span>
So the Picture only gets showed, after the mouseover. The problem is, while using this method, ALL Pictures are getting loading from the server after opening the site. They may not show, but they get loaded. So if you have 100 Links with a mouseover image, all 100 images gets loaded after opening the site, which creates big traffic.
Is there any code, that makes the pictures inside the Tag only get loaded from the server, >IF< there is a mouseover?
This is the CSS:
a.infotext{
text-decoration: none;
}
a:hover.infotext {
color: #E2E2E2;
text-decoration: none;
}
a.infotext span {
visibility: hidden;
position: absolute;
left: 2em;
margin-top: 2em;
padding: 1em;
text-decoration: none;
}
a:hover.infotext span {
visibility: visible;
border: 1px solid #292929;
color: #347BEE;
background: #040404;
text-decoration: none;
width: 432px
}
I know this isn't a css approach but I've create a quick (non-styled) demo using onmouseover to load the image conditionally, javascript will allow you to target specific images. Hope this could help!
Javascript
function loading()
{
var image = document.getElementById('image');
image.setAttribute('src', 'img/placeholder.png');
}
And here is the HTML
Load image
<img id="image" src="" alt="">
Remove the Image tag. give the span a data-imgsrc:
<span data-imgsrc="IMAGE-URL"> </span>
On hover append() the img-tag and remove it
$( "a" ).hover(
function() {
var that = $( this ).next("span[data-imgsrc='IMAGE-URL']");
that.append( '<img src='+ that..attr("data-imgsrc")+'/>' );
}, function() {
$( this ).removeit;
}
);
Written without testing but i hope you get the idea, and better then pseudo code.

Jquery sidebar slide out/in not working locally

Help! :)
So,
I have been trying to add a slide-in cookiebox with jquery,
it works perfectly on jsfiddle,
but i can't make it work on local,
it acts as if the library wasn't loaded and it just shows the box right away and the buttons dont do anything.
Fiddle: http://jsfiddle.net/u2zz4/1/
How i load the scripts in the header(already checked that both paths are working correctly)
<script type="text/javascript" src="js/jquery.min2-0.js"></script>
<script type="text/javascript" src="js/cookiebox.js"></script>
The used Jquery lib is from https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js
(added the 2-0 behind it to remember its version, tested without 2-0 and it acted the same so i assume that aint the issue)
Cookiebox.js
var slideWidth = 250;
var slides = $('#aboutBox').css('width', slideWidth);
slides.css({
width: slideWidth,
height: slides.attr('scrollHeight')
});
var wrapper = slides.wrap('<div>').parent().css({
width: 1,
height: slides.height(),
overflow: 'hidden',
display: 'none'
});
$('#show').click(function() {
if(wrapper.is(':visible'))
return;
wrapper.show().animate({
width: '+=' + slideWidth
}, 'slow');
});
$('#hide').click(function() {
wrapper.animate({
width: 1
}, 'slow', function() {
wrapper.hide();
});
});
HTML (added right under the body tag)
<div id="cookiebox">
Cookies
<div id="aboutbox">
<p>We have placed cookies on your computer to make sure this website functions properly.</p>
<p>You can change your cookie settings at any time in your browser settings.</p>
<p>We'll assume you're OK to continue.</p>
<h2>OK</h2>
</div>
</div>
CSS
#cookiebox {
margin-top:25px;
float:left;
}
#aboutBox {
padding: 0px 15px;
max-width:200px;
float:left;
background: rgba( 200, 200, 200, 0.8);
border:1px solid rgb(0,0,0);
}
#aboutBox h1{
margin-bottom: 15px;
}
#aboutBox p {
margin: 15px 0;
}
#aboutBox h2 {
padding: 10px 0;
}
FYI, i have no idea who made the original jquery code, but it wasn't me.
I have already looked around for over one and a half hour for a fix with no luck.
PS, if anyone knows how to make the bottom border show aswell i'd be very happy :)
Could the use of ajax for another item be the issue?
Hope someone can see the issue and help me out :)
You just need to put your code inside a doc.ready function, like this:
$(document).ready(function(){
// your code here
});
That is basically what the onLoad option in your jsFiddle is doing for you.
You could also do this:
$(window).load(function(){
// your code here
});
but .ready will be faster and work fine
You trying to register to events before DOM is ready
You should wrap your code in $(documnet).ready

Categories

Resources