This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
jQuery/Javascript to replace broken images
This should be easy I just don't know the terminology to be googling for. I think this is HTML/CSS, if an image link is broken it often shows a missing image icon showing a page with red, green, blue shapes. In HTML is it possible to configure "use this image if an image link is broken?"
An 'onerror' example:
<img src="fail.jpg" onerror="this.src='https://www.google.com.br/logos/2012/montessori-res.png';">
http://jsfiddle.net/u4hQd/
I think the heart of this is how to add dynamic functionality to CSS. I don't know of an if/else check in CSS apart from detecting browsers, however, this is what I would do if I ever need to do something like this.
If you are using php you can do this:
$imagename = "image.png";
if (file_exists($imagename)){
echo '<p class="exists">';
} else {
echo '<p class="dne">';
}
Then in the css you can have
.exists{background:url("../img/git-sprite.png") no-repeat 0px -32px;}
.dne{background:url("../img/git-sprite2.png") no-repeat 0px -32px;}
This way you can add an if/else functionality for this in the CSS itself. You don't have to use PHP, I'm sure a javascript would work as well
Your question is understandable without any additional terminology.
Unfortunately there are no means in HTML for what you want.
What you can do is use JS (jQuery will help), to cycle through all img tags in your document, and check which of them have images (check against null). For those, who miss their images, you can load some other image (some default).
But remember to run this script after the page has completely loaded (with all assets: JS, CSS, images), because if you run it before page loading is done, you may mistakenly put default image to some img tag, which had no time to load it's real image.
Are you using php?
You could check before sending the file with something like this:
$filename = "whatever.png";
if (file_exists($filename)){
$html = "<img src=\"$filename\">";
} else {
$html = "<img src=\"someotherpath.jpg\">";
}
echo $html;
Related
In most of my emails, the image included may not be present. In such cases the broken image icon is displayed along with my alt text.
Problem Explanation:
While sending an HTML email along with an <img> tag, at cases this image may not be there (404). As the image URL is dynamic, I cannot verify the existence of the image before sending the email. So it displays a broken image icon. I want to get rid of this icon.
JSFiddle
Code Snippet:
<img alt="NA" src="http://www.somerandomdomain.com/error.png" width="120" >
I am need of a solution compatible with all major email clients.
Have tried onerror handler, but it does not work in email clients.
Also have tried text-indent: -9999px;, it works in Outlook but not
in Gmail.
When the negative indent is changed to positive Outlook
scrolls to the right which is a mess.
The solutions mentioned in possible duplicate, are for the web. But my question is clearly about the HTML emails, where JS and objects does not work like the solutions provided.
When generating email, check if that image exists (Example in PHP):
$url = 'http://www.somerandomdomain.com/error.png';
$headers = #get_headers($url);
if (strpos($headers[0],'200') !== false) {
echo "<img alt='NA' src='{$url}' width='120'/>";
}
I am trying to convert a website that uses a lot of old-school in-page formatting to the standard way of doing things where the content is on the html page and the styling is in the css document. Also, the page is in Japanese.
Here is the translated page.
Are there any batch operations or tools I can use to strip the page of all its messy inline formatting without selecting any of the Japanese characters (even with Google Translate after selecting the page the translated Japanese characters are still copied) and still maintain a word wrap? Basically, I want to make the coding and design of the page up to date and I need to do it on a lot of pages so I'll need some sort of batch operation.
Any ideas/advice? Thanks.
Hi you can use jquery to help. i've given you a starting point on jsfiddle.
jQuery:
$(document).ready(function() {
css = '';
$('body *').each(function(){
if (!!$(this).attr('style')){
if(!!$(this).attr('class')){
css += '.'+$(this).attr('class')+'{'+$(this).attr('style')+'}<br />';
};
if(!!$(this).attr('id')){
css += '#'+$(this).attr('id')+'{'+$(this).attr('style')+'}<br />';
};
}
});
$('#css').html(css);
});
This is by no means a finished solution, but it should definatly give you a helping start
Also whn you're happy that you got all the styles collected, you can use $(this).removeAttr('style') to remove the style attribute from the elements.
Does HTML support a behavior of text rendering where multiple lines will be avoided with an automatic placement of "..." ? Sorry, I just cannot find the style/tag associated with this behavior, if it exists!
No, there is nothing built in.
You need to either do it yourself serverside, or write some JavaScript that will count lines and replace the rest of the line with an ellipsis (...).
There is a text-overflow-mode defined in the CSS3 spec that will do this, but as a working draft it is not final and will not necessarily work on current browsers.
The property you're looking for is the CSS text-overflow: ellipses. Unfortunately it does not work in Firefox. Here is a resource on it:
http://www.css3.info/preview/text-overflow/
You can kind of hack it in Firefox, with e.g.
http://www.jide.fr/english/emulate-text-overflowellipsis-in-firefox-with-css
But the only real cross-browser solution would be a JavaScript one, like this maybe, or perhaps one of the ones in the comments on this page:
http://ajaxian.com/archives/ellipsis-or-%E2%80%9Ctruncate-with-dots%E2%80%9D-via-javascript
Short answer: No.
Longer answer: This is possible if you're using a programming backend (e.g. PHP) that outputs HTML to the front end. You could do something like
<?php
if(str_len($yourText) > 100) {
echo substr($yourText, 0, 100) . "...";
}
?>
How can you prevent any automatic formatting when in CKEditor when viewing in source mode?
I like to edit HTML source code directly instead of using the WYSIWYG interface, but whenever I write new lines, or layout tags how I would indent them, it all gets formatted when I switch to WYSIWYG mode and then back to source mode again.
I stumbled upon a CKEditor dev ticket, Preserve formatting of ProtectedSource elements, that alluded to a setting which may have existed once upon a time which would be exactly what I'm after. I just want to know how I can completely turn off all automatic formatting when editing in source mode.
I came up with a solution I thought would be foolproof (albeit not a pleasant one).
I learned about the protectedSource setting, so I thought, well maybe I can just use that and create an HTML comment tag before all my HTML and another after it and then push a regular expression finding the comment tags into the protectedSource array, but even that (believe it or not) doesn't work.
I've tried my expression straight up in the browser outside of CKEditor and it is working, but CKEditor doesn't protect the code as expected (which I suspect is a bug involving comment tags, since I can get it to work with other strings). In case you are wondering, this is what I had hoped would work as a work-around, but doesn't:
config.protectedSource.push( /<!-- src -->[\s\S]*<!-- end src-->/gi );
and what I planned on doing (for what appears to be the lack of a setting to disable formatting in source mode) was to nest all my HTML within the commented tags like this:
<!-- src -->
<div>some code that shouldn't be messed with (but is)</div>
<!-- end src -->
I'd love to hear if anyone has any suggestions for this scenario, or knows of a setting which I have described, or even if someone can just fill me in as to why I can't get protectedSource to work properly with two comment tags.
I really think it's gotta be a bug because I can get so many other expressions to work fine, and I can even protect HTML within the area of a single comment tag, but I simply cannot get HTML within two different comment tags to stay untouched.
My solution to this was to use comments in my system, but before feeding the page content to CKEditor, convert them to custom HTML tags. Then, upon save, convert them back to my comment tags.
For your syntax that would be something like this in PHP. Before printing the page content to the textarea:
$content = str_replace(array('<!-- src -->','<!-- end src -->'),array('<protected>','</protected>'),$content);
Before saving the resulting content:
$content = str_replace(array('<protected>','</protected>'),array('<!-- src -->','<!-- end src -->'),$content);
In the CKEditor configuration:
protectedSource:[/<protected>[\s\S]*<\/protected>/g]
Hope that helps!
I wanted to preserve newlines in my source, and the protectedSource feature works well for that. I added this to my config.js:
config.protectedSource = [/\r|\n/g];
config.allowedContent=true; will do the trick
Here is the full HTML code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CKEditor</title>
<script src="http://cdn.ckeditor.com/4.5.10/standard/ckeditor.js"></script>
</head>
<body>
<textarea name="editor1"></textarea>
<script>
CKEDITOR.config.allowedContent=true;
CKEDITOR.replace( 'editor1' );
</script>
</body>
</html>
I solved this problem by simply surrounding the back-end output of edit form page with a conditional on a $_GET variable - when you click on "Expert Mode" it loads a plain textarea instead of the ckeditor system. Your invocation of the ckeditor object will vary depending on your setup. ( I have a custom class that calls/builds the editor object )
<div id="postdivrich" class="postarea">
<?php
if( isset( $_GET['expert'] ) )
{
print "<div style=\"text-align:right;\">Editor mode</div>\n";
print "<textarea name=\"content\" style=\"height:400px;width:{$nEwidth}px;\">{$aDoc['content']}</textarea>\n";
}
else
{
print "<div style=\"text-align:right;\">Expert mode</div>\n";
require_once( 'admin/editor.class.php' );
$aDoc['content'] = str_replace( "\r", '', str_replace( "\n", '', nl2br( $aDoc['content'] ) ) );
$oEditor = new setEditor( $aDoc['content'], $nEwidth, "400", 'content' );
$oEditor->ShowEditor();
}
?>
</div>
Does this answer help? Basically you can turn off the options adding a javascript, it looks like.
Consider this CSS Property:
background: url(http://images.something.com/background.png) left top repeat-x;
Is there a way to dynamically specify the URL being used in the external file (Meaning the URL is sort of automatically generated rather than hard-coded in the CSS file) ?
Thanks.
Dynamic CSS Background URLs
There is another cool trick.
You could add a
.php
to the file's name so it will be Hypertext Preprocessed next time, someone calls it.
Now you can easily do (in your CSS file):
<?php $num = rand(1, 3); ?>
background: url(http://images.something.com/background<?php echo $num; ?>.png) left top repeat-x;
This will switch randomly the background-image between
background1.png, background2.png and background3.png
P.S. Dont forget to update your <link> to your css.php file.
background: url(http://images.something.com/getimage.html?image=random) left top repeat-x;
And in the getimage.html, check if request[image] == "random". Using whatever server-side language you desire, respond with an arbitrarily or randomly selected image.
Yes.
You can call a server-side page, and based on variables, it can put in different CSS there.
If you just mean with html/css -- there is very little you can do dynamically.
You can also set background images using Javascript (there are a large quantity of possibilities), but HTML and CSS are, by nature, static languages.