Is there a way to disable the default tooltip that shows up in a browser when hovering over an image? This is without removing the title or alt tags. Another option, can the tooltip be made to show a specific text for certain image types (such as JPG) and another text for a different image type (such as PNG)?
The title attribute is used as hover text in most browsers by default. The only way I could see removing them is to remove the title attribute. JavaScript would be capable of doing this. I'm sure there is a pure DOM way to do this, but I'm using a little jQuery:
$(function() { // when the document becomes ready for manipulation
$("[title]").removeAttr('title'); // removes title from all things that have title
// your other options:
// all images who's src ends in .jpg
$("img[src$=.jpg]").attr('title','JPG Image');
// all images who's src ends in .png
$("img[src$=.png]").attr('title','PNG Image');
}
If you need to stick this on your pages, I suggest making a site.js file that has this code in it. Then you need to tell your HTML pages to load it. You should have some main site template file (and it may already have jQuery - if so skip the include for jQuery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"> </script>
<script type="text/javascript" src="/js/site.js"> </script>
Response to comment: how about restricting the characters that can appear in the tooltip to zero or up to let's say 10?
This problem gets slightly more complicated, for this one lets pull out .each() on elements with titles:
$("[title]").each(function() {
var $this = $(this); // shortcut for later
var title = $this.attr('title'); // get the title attribute
// if the length of our title was 10 characters or more, shorten it and set:
if (title.length>10) {
$this.attr('title', title.substring(0,10));
}
});
Related
I am writing some CSS to style some images on a website. Some of the styles I am applying, though they look good on the images, would be problematic if for whatever reason the image didn't load and the site displayed the alt text. For example, I mirror some of the images with transforms.
Is there some way I can target an image in my CSS only if the image is actually loaded and displaying, but not if it has fallen back to the alt text?
As an additional note, the reason I am using CSS to style the images, rather than just actually modifying the images themselves, is that I am using the same image multiple times on the page as an icon for a list, and just want to add a little variety to each instance. I'd rather not have 6 different versions of the same image on the page.
You could do something like this:
.image-not-loaded-yet {
/* your css for when the image has not yet loaded */
}
and then
<img onload="this.classList.remove('image-not-loaded-yet')" class="image-not-loaded-yet" src="path/to/image.jpg" />
or the opposite, add the class only when the image has finished loading:
.image-ready {
/* your css for when the image has fully loaded */
}
and then
<img onload="this.classList.add('image-ready')" src="path/to/image.jpg" />
If you want to apply this to all images on a page, you can add an event listener to each img like this:
document.addEventListener('DOMContentLoaded', () => {
for (const img of document.querySelectorAll('img')) {
img.addEventListener('load', () => img.classList.add('image-ready'))
}
});
I'v defered all my CSS using
media="none" onload="if(media!='all')media='all'"
and images using yall.min.js
But PageSpeed Insights continues claiming it (and the images are visibles too)
How do I could optimize this?
Thanks, Ari
I'm using JavaScript to asynchronously load external CSS files.
Similar to old solutions where one would put scripts before the closing </body> tag, I'm now introducing data-attributes to create <link> tags, so they're made asynchronous automatically:
HTML
<div data-dom="link" data-href="#asyncCssBundle" data-media="screen"></div>
<div data-dom="link" data-href="#printBundle" data-media="print"></div>
jQuery
/**
* Loads an array object of CSS files in async mode
* stops render blocking CSS loading
* good for fonts and #imports
* #prop {object} asyncLinkTag data representation of a link tag on a div element
*/
function loadCssAsync() {
var arr = [];
$.each($('[data-dom="link"]'), function () {
var el = $(this),
link = $('<link />').prop({
href: el.data('href'),
rel: el.data('rel') || 'stylesheet',
media: el.data('media') || 'screen'
});
arr.push(link);
});
$(document.head).append(arr);
}
$(function(){
loadCssAsync();
});
Additionally I distinguish in SCSS between above the fold CSS and backgrounds, fonts, print, ...
If you really want to put an effort in it, the above the fold CSS can go inline. But I find it rather tricky to pull this off on a larger project. So I'm fine with async loading backgrounds and fonts. However, for fonts it's now clear they're loaded afterwards, similar to a FOUC or call it "Flash of Loading Font". It's good to do some research on a solid substitute font so it doesn't change your layout too much.
I have some problems with Jcrop's croppable area size. In my own, simple application I used Jcrop without any problem but now I'm using Jcrop inside another web application (Virtual Viewer Snowbound). Here is a screenshot of my problem-free application:
I added all Jcrop js and css files to the other website's folders into the right paths. I think there is no problem about file locations. But probably something inside that website's css and Jcrop's css conflicts and prevents it from working properly.
Firstly I added these libraries to the most below side of the head tags (I commented out the first one because website has Jquery 1.9.1 version so it conflicts:
<!-- <script src="js/jquery.min.js" type="text/javascript"></script>-->
<script src="js/jquery.Jcrop.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
Then Jcrop functions are written:
jQuery(document).ready(function(){
jQuery(function ($) {
$('#vvImageCanvas').Jcrop({
onChange: updatePreview,
onSelect: updatePreview,
setSelect: [100,100,200,200],
bgColor: 'black',
allowSelect: true,
allowMove: true,
allowResize: true,
aspectRatio: 0
});
function updatePreview(c) {
if (parseInt(c.w) > 0) {
// Show image preview
var imageObject = $("#vvImageCanvas")[0];
var canvas = $("#previewMyCanvas")[0];
var context = canvas.getContext("2d");
if (imageObject != null && c.x != 0 && c.y != 0 && c.w != 0 && c.h != 0) {
context.drawImage(imageObject, c.x, c.y, c.w, c.h, 0, 0, canvas.width, canvas.height);
}
}
};
}
);
});
As you see the vvImageCanvas is the canvas which holds the image and I Show the preview inside previewMyCanvas canvas. The problem is croppable area size. If I add that below code:
style="width:auto!important; height:auto!important;"
into the
<canvas id="vvImageCanvas" class="vvCanvas">
tags then I have the below view:
As you see in the preview I can crop where I want but the croppable area does not have the same size with picture. I think that is the jcrop-holder div but I'm not proffesional in css issues.
If I don't add these style options then I have that:
The croppable area has same size with picture but the picture gets smaller and as you see in the preview, cropped area is different from where I crop. Maybe it crops from the actual size of image.
So, how can I use Jcrop functions without conflictions. I added
jQuery.noConflict(true);
but it didn't help.
Thanks.
EDIT:
Ok I realized the problem.
The Jcrop functions should work after the page load. But I cannot achieve that by writing these codes into document.ready or window.load blocks. That was the reason of asking this question.
Then I ran the code by a button click. It worked. But I don't know why it does not work inside document.ready and works in button click event. Also I have to make it work on page load automatically not by clicking a button.
Any advise?
It's a wild guess, since you didn't provide any demo, but I've come across similar issues in following cases:
Jcrop element was animated using CSS3 transitions
There was a CSS rule applied to the parent of jcrop element manipulating width, height, max-width or max-height of all img tags inside
Fix for the second case is obvious - you need to apply your custom rules only to the images you need adjusted - don't forget Jcrop creates its own elements in DOM in the same container as your initial image.
In case of using CSS3 transitions, you need to call Jcrop after all transitions for your element has finished:
$("#image").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
// your Jcrop code
});
You may encounter similar issues when using scripts to preload images.
Say I'm embedding a bit of HTML code in an existing website. I'd like to know what CSS classes are already available. Currently I could do this as follows:
View the source for the page
Search for links that include .css files
Browse the contents of those until I find a useful class
That's tedious, and not exhaustive.
What's a better way?
EDIT You can also do this in Chrome:
Inspect Element
Select "Resources" tab
Navigate to Frames/../Stylesheets
View contents of individual stylesheets
I guess what I'm looking for is a higher level, interpreted view of the CSS styles available: not simply the contents of the CSS files. So if one style was defined identically in multiple places, I'd only want to see it twice. If two different styles applied to the same element, I'd want to see the two side by side.
Let's assume I can't do this by embedding code.
Press F12 in Chrome and select a magnifying glass.
In IE it's Also F12 and then select a little arrow.
Firefox has a similar feature or you can download Firebug which is great for web developers.
I think Web Developer plugin for firefox might be help you. You can add it from here.
The W3 CSS validator tool http://jigsaw.w3.org/css-validator/ will show all available css styles available to a webpage you specify, underneath a list of faulty styles.
copy this code immediately before the closing tag of the page's body :
I got code from here: http://snipplr.com/view/6488/
Tested in Chrome
//CODE
<div id="allclasses" style="text-align:left">
</div>
<script type="text/javascript">
var allTags = document.body.getElementsByTagName('*');
var classNames = {};
for (var tg = 0; tg< allTags.length; tg++) {
var tag = allTags[tg];
if (tag.className) {
var classes = tag.className.split(" ");
for (var cn = 0; cn < classes.length; cn++){
var cName = classes[cn];
if (! classNames[cName])
{
classNames[cName] = true;
}
}
}
}
var classList = [];
for (var name in classNames)
classList.push(name+'<br />');
document.getElementById('allclasses').innerHTML = classList.sort();
</script>
I want an animation modal (loading please wait) and when the page fully loads it disappears?
Using jQuery:
$(function() { $('#loading').fadeOut(); });
The rest is CSS and an animated GIF.
If you're using jQuery, try something like this:
$(function() {
var reqMgr = Sys.WebForms.PageRequestManager.getInstance();
reqMgr.add_beginRequest(ShowWait);
reqMgr.add_endRequest(HideWait);
});
function ShowWait() {
$("#Loading").fadeIn();
}
function HideWait() {
$("#Loading").fadeOut();
}
Then just have an element:
<div id="Loading">Loading, Please Wait...</div>
Style and position as you want with css, default it to have a display: none; though.
I recommend to write some simple html with your loading message (and may be a page mask to make it grayed) and place it at the beginning of the page. And at the end of page add script to remove that message and mask (see first answer). So users will see this message as soon as they get the html page (also some browsers support rendering of incomplete pages during loading of the page). See the code of this page for additional details.
This is my favorite way to make a modal popup. It does not use any AJAX, it's just pure HTML & CSS: http://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/
You can hook it up to code-behind instead of using hyperlinks (get rid of the opacity attribute and work with div.visble = true/false). Set the modal div visible as default, then when page load completes, set it to visible=false.