Remove border from alt text if image url is not valid - javascript

Today is friday and this is a fun question (and a real problem). I am using border around the image but if the image url is not valid, the border appears around the alt text and looks kind of ugly. How to remove it using CSS?
<a href="#">
<img src="http://badsrc.com/blah" style="border:1px solid black" alt="Remove border from this alt text" />
</a>
I don't want to overkill it with server side script or jQuery. Interested in CSS. If no CSS solution is available then other solutions are welcome.
My actual server side script looks like this
If Not String.IsNullOrEmpty(photoURL) Then
photoUrl2="<img src="..." style="border:1px solid #000" alt="BMW for sale">"
end if
jsfiddle

You can use onerror and set the border
<a href="#">
<img src="http://badsrc.com/blah" onerror="this.style.borderWidth=0" style="border:1px solid black" alt="Remove border from this alt text" />
</a>
It would be better to not use inline styles and use classes
jsfiddle

Use .error(), it binds an event handler to the "error" JavaScript event.
$("img").error(function () {
$(this).css('border', 'none');
})
DEMO

<a href="#">
<img id="myImage" src="http://badsrc.com/blah" style="border:1px solid black" alt="Remove border from this alt text" />
</a>
<script>
var image = document.getElementById('myImage'); // or select based on classes
image.onerror = function(){
// image not found or change src like this as default image:
image.style.border = "none";
};
</script>
here is your solution with javascript.

Since you are setting it via server side, the correct thing to fix this on the server side, not in CSS or JavaScript. All you have to do is change your code to this:
photoUrl2 = String.Format("<img src='...' style='border:{0}' alt='BMW for sale' />",
If(String.IsNullOrEmpty(photoURL),
"none",
"1px solid #000"))

I know it's an old question but here is CSS only solution using pseudo elements
img:after {
content: attr(alt);
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
}
<img src="//placehold.foo/200x200" alt="Remove border from this alt text" />

Related

inserting content into div with javascript

dI am succesfully placing text in a div using javascript. However I also want to add images to the text but my javascript method does not seem to accept this. I am using the following code for the text:
document.getElementById("myDiv").innerHTML = "This a bit of text";
See the Fiddle here
Just adding an img tag within the text hasn't worked. Anyone?
Eddy.
And what if I wanted to add the possibility to enlarged the photo using the following script.
<div class="slider jcarousel fancybox" data-jcarousel="true" style="position: relative; width: auto; margin-top: -1px; z-index: 99;">
<ul style="left: 0px; top: 0px; width: 100%;">
<li class="product slide" style="width: auto; border: none;"><a class="zoom first" rel="" href="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" title=“Test image”><img src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" alt=“Test image“ /></a>
</li>
</ul>
</div>
How would I place this within the text?
You should be able to insert images with innerHtml. Just use '' marks instead of "".
Like this:
document.getElementById("myDiv").innerHTML = 'This a bit of text <img src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />';
Fiddle
To add images in HTML text you must escape quotes using \ before or use ' instead of " in attributes or string.
If you don't that, then you'll see an error in the browser's console.
This is wrong:
document.getElementById("myDiv").innerHTML="<img src="img.png">"//img.png is outside of the string
Examples:
document.getElementById("myDiv").innerHTML="<img src=\"img.png\"/>"
document.getElementById("myDiv").innerHTML='<img src="img.png">'
document.getElementById("myDiv").innerHTML="<img src='img.png'/>"
How did you try to add the image?
document.getElementById("myDiv").innerHTML = " <img src=' // image path ...'/>This a bit of text";
this way you can add image easily. but please make sure that you are addind image with proper path
OR if it will not work then,
add <img /> tag in HTML. like:
<div id="myDiv">
<img src="..image path..." />
</div>
You shouldn't use innerHTML. This is a better way of doing it:
var myDiv = document.getElementById("myDiv");
myDiv.textContent = "This a bit of text";
var myImg = new Image();
myImg.src = "http://placehold.it/100x50";
myDiv.appendChild(myImg);
<div id="myDiv">
</div>

Calculate element padding dynamically using JavaScript

I'm trying to calculate the padding-bottom property for multiple elements in an image gallery. Check out the following code for one element:
<div class="item-container fashion">
<a href="images/fashion/11-large.jpg"
data-size="600x900"
class="item"
style="padding-bottom: 150%">
<img class="lazyload"
alt="Description"
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
data-sizes="auto"
data-src="images/fashion/11-small.jpg"/>
</a>
</div>
As you can see I define the size of the image in "data-size" attribute (600x900). In order to get the padding-bottom value which I need to prevent reflow, I simply divide calculate (height/width) x 100, which in this case yields 150 - my padding-bottom value.
Now I can easily calculate this manually and input it as I'm doing above and it works just fine. But since my gallery will contain hundreds of images all with different ratios, I'm gonna need a more automated way of calculating the padding value.
Is there anyway to achieve this by doing the calculation in JavaScript and then apply it to the respective element? If I were to include the dimensions in the filename for example and parse it maybe I could even avoid manually inputting the data-size value too...?
I would really like to avoid having to manually do hundreds of calculations, plus It'll be great to learn a new trick for the future. Thanks!
UPDATE
here's what I got so far, as you can see image1 and image2 have different dimensions and ratio. As you can see i'm doing something wrong the padding isn't working out just right. I'm setting "item" height to 0 because padding-bottom will end up taking care of the height. thoughts?
var tags = document.getElementsByClassName('item');
for (var i = 0; i < tags.length; ++i) {
/* This is the part I mentioned about, you may want to use one of the methods above depending on how your css and the rest of your code looks like*/
tags[i].style.paddingBottom = (100 * (tags[i].offsetHeight / tags[i].offsetWidth)) + 'px';
}
.item {
position: relative;
height: 0;
display: inline-block;
border: 1px solid red;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item-box fashion">
<a href="http://lorempixel.com/output/city-h-c-600-900-7.jpg" data-size="600x900" class="item">
<img width="300" height="450" class="lazyload" alt="Image description" src="http://lorempixel.com/output/city-h-c-600-900-7.jpg" data-sizes="auto" />
</a>
</div>
<div class="item-box fashion">
<a href="http://lorempixel.com/output/fashion-q-c-600-400-5.jpg" data-size="600x900" class="item">
<img width="300" height="200" class="lazyload" alt="Image description" src="http://lorempixel.com/output/fashion-q-c-600-400-5.jpg" data-sizes="auto" />
</a>
</div>
First of all why don't you have to define the dimension of the picture. You can use element.offsetWidth element.offsetHeight OR element.style.width, element.style.height (these two would have to be parsed because they return a string for instance 5px) OR element.getBoundingClientRect() (the lattest is an object containing top, left, right, bottom etc.)
Now, that being said using java you can do the following ...
var tags = document.getElementsByClassName('item');
for(var i = 0; i < tags.length; ++i){
/* This is the part I mentioned about, you may want to use one of the methods above depending on how your css and the rest of your code looks like*/
tags[i].style.paddingBottom = (100 * (tags[i].offsetHeight / tags[i].offsetWidth)) + 'px';
}
.item{
width: auto;
height: auto;
display: inline-block;
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item-box fashion">
<a href="http://lorempixel.com/output/city-h-c-600-900-7.jpg" data-size="600x900" class="item">
<img width="300" height="450" class="lazyload" alt="Image description" src="http://lorempixel.com/output/city-h-c-600-900-7.jpg" data-sizes="auto" />
</a>
</div>
<div class="item-box fashion">
<a href="http://lorempixel.com/output/fashion-q-c-600-400-5.jpg" data-size="600x900" class="item">
<img width="300" height="200" class="lazyload" alt="Image description" src="http://lorempixel.com/output/fashion-q-c-600-400-5.jpg" data-sizes="auto" />
</a>
</div>

How to apply different format or style to popup window

I display a popup window in a simple format. I want to apply different format of opening popup a window. How can I apply format or style so that it looks very good when pop window opens? The following is my source code:
HTML:
<div onMouseOver="show('healing')" onMouseOut="hide('healing')">
<div id="healing" class="bgdiv" >
<div id ="title" class="Title"> Healing</div>
<img class="img" src="images/healing.bmp">
<div class="description" >Welcome Sir.</div>
</div>
</div>
CSS:
#showhealing, #innovations, #div3 {
visibility: hidden;
}
JavaScript:
function show(id) {
document.getElementById(id).style.visibility = "visible";
}
PoeHaH is right; you can style the popup using CSS. A good resource for learning CSS is the Mozilla Developer Network.
For example, try this in your CSS:
#healing {
visibility: hidden;
border: 1px solid blue;
background: grey;
}
The above will give the popup a blue border and a grey background. Not beautiful, I know, but it demonstrates the principle.
By the way, there are some discrepancies in your code example (i.e. in CSS you have #showhealing, which has no equivalent in the HTML).

Writing a JavaScript function to open an image in (css)pop up with a close button?

I am a new HTML developer, so can someone please describe briefly how to write a JavaScript function to open an image in (css) pop up with a close button?
Just to get you started I've set up an simple example for you, try it out here: http://www.lunarailways.com/demos/popup.html
<html>
<head>
<style>
#popup {
border: 1px solid gray;
border-radius: 5px 5px 5px 5px;
float: left;
left: 50%;
margin: auto;
position: fixed;
top: 200px;
z-index: 9999;
}
</style>
</head>
<body>
<h1>Your page</h1>
Open Image 1
Open Image 2
Open Image 3
<div id="popup" style="display:none">
<a id="popup-close" href="" class="button">Close</a>
<p>
<img id="image-placeholder" src="">
</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$(".popup-open").click( function(e) {
$("#popup:visible").hide(); //hide popup if it is open
e.preventDefault(); // don't follow link
$("#image-placeholder").attr("src", $(this).attr("href")); // replace image src with href from the link that was clicked
$("#popup").fadeIn("fast"); //show popup
});
$("#popup-close").click( function(e) {
e.preventDefault();
$("#popup").fadeOut("fast");
});
});
</script>
</body>
</html>
FanyBox, which is uses the jQuery library is the right tool for that.
In a simple way,
- place anchor and image tags in a div container.
- set display attribute of the div to "none".
- create displayMyPopup and closeMyPopup functions in js.
- set anchor's onclick attribute to closeMyPopup.
- in displayMyPopup function, set the div's display attribute to "block"
- in closeMyPopup function, set the div's display attribute to "none"
or you can use jquery's show/hide functions.
I guess jQuery library is a good start. Start with defining your HTML markup and then google image galleries and see what fits your bill.
Something like this:
<ul class="gallery">
<li><img src="path-small-image" alt="thumbnail" /></li>
</ul>

How to enlarge image while hover over an image?

I want to show the thumbnail image large when hover over it, similar to the one in
http://www.freelayouts.com/websites/html-templates Plz help. Any help will be appreciated.
What you need is a tooltip plugin. There are plenty of them.
Check out this list: https://cssauthor.com/jquery-css3-hover-effects/
<img class="enlarge-onhover" src="img.jpg">
...
And on the css:
.enlarge-onhover {
width: 30px;
height: 30px;
}
.enlarge-onhover:hover {
width: 70px;
height: 70px;
}
Take a look at http://fancybox.net/blog
Fancybox looks nice, uses JQuery and is highly configurable with various show/hide effects. Tutorial number 3 on this page shows you how to use it OnHover rather than OnClick
The home page http://fancybox.net/home shows some examples of the visual effect
<script>
function bigImg(x) {
x.style.height = "64px";
x.style.width = "64px";
}
function normalImg(x) {
x.style.height = "32px";
x.style.width = "32px";
}
</script>
<img onmouseover="bigImg(this)" onmouseout="normalImg(this)" border="0" src="smiley.gif" alt="Smiley" width="32" height="32">
The function bigImg() is triggered when the user mouse over the image. This function enlarges the image.
The function normalImg() is triggered when the mouse pointer is moved out of the image. That function sets the height and width of the image back to normal.

Categories