I'm dynamically generating cards for a board game and for the sake of brevity on-screen I want all of the extra rules captions to only be displayed when the rule keyword is hovered over. I'm trying to avoid nested div tags here for a few behind-the-scenes reasons.
I have the alternate text setup with tags (shorted here with '...'):
<span title="Beasts of Nurgle secrete a Slime Trail ... "><b>Slime Trail</b></span>
and above, in the style section, I have:
[title]:hover:after {
position: absolute;
content: attr(title);
background-image: url('images/spanbg.jpg');
padding: 5px;
width: 250px;
border-radius: 8px;
border: 2px solid;
z-index: 100;
}
Initially when I hover over the text I get the title text formatted as desired, but a second later if the mouse cursor stays there I also get the default formatting for title show up on top (see attached image). The attached image shows what the initial display looks like before hovering for the extra second... with the unappealing and unformatted second copy of the title I can't seem to get rid of.
Weird second title text from formatted title
Anyone have suggestions how to get just the formatted title text that shows up for the span element without the additional default one? I'm not sure it's needed, but this is hosted on a node.js server being served via proxy from apache2 on the same host, and the behaviour has been confirmed in the latest version of Chrome and Firefox.
I don't believe there's any way of disabling the browser's default behavior for title. To get around this, you could use the aria-label attribute, instead:
<span aria-label="Beasts of Nurgle ... "><b>Slime Trail</b></span>
[title]:hover:after {
/* ... */
content: attr(aria-label);
/* ... */
}
In Blazor razor page if I place an HTML anchor such as
My Text
the text doesn't show until the mouse is moved over it.
I have worked around this by making it a Button.
Is there any solution to this or or better linkage component to use?
I cannot reproduce this in a new project.
The behaviour seems to suggest this might be a CSS problem. To confirm this, try giving your a an id and set a specific style
#tester {
visibility: visible;
display: inline-block;
color: white;
background-color: red;
font-size: 1rem;
}
Then
<a id="tester" href="http://example.com">My Text</a>
When you run the app you should now hopefully see the link. Right-click it, and select "Inspect Element", then look down the CSS rules for that element for anything that has a strike-through font (meaning it has been overridden by a more specific rule).
One of these should be something hiding your element. Once you've found the culprit, kill it :)
WARNING:
I do not recommend anyone to do this. It's an ugly hack.
I've got the code (minimized for the example)
<div id="somecontent">
<a name="content"></a>
Content to be changed
</div>
JSFiddle: https://jsfiddle.net/zalun/o733uyvs/
I'd like to change the "Content to be changed" with CSS.
Is this even possible (all ugly hacks included)?
It's easy when HTML is modified (<span> added) as in second block in mentioned fiddle.
Note: What you are trying to do is not recommended. I am providing you
a solution because I think you do not have access to source HTML or
your content is generated dynamically. I would still suggest you too
either change the source file or modify the DOM node using JavaScript.
I would say No and Yes.
Why No?
That's a text node. You cannot manipulate DOM nodes using CSS. You need to use JavaScript for that.
Why Yes? (Using ugly hacks), How?
Using content property as you are already using, but you cannot change the DOM, so you can make it super ugly like
Demo
#somecontent {
color: transparent;
position: relative;
}
#somecontent a:before {
content: "My new content";
color: #000;
position: absolute;
}
JavaScript Solution :
Demo
// You'll see text flicker
var t = document.getElementById('somecontent');
t.textContent = 'New Text';
As per the default behavior, alt attribute is rendered first time just before the image rendering. I am displaying 25 images in a grid so it looks bit awkward as all alt attributes are displayed first.
Is it possible to hide alt attributes in Firefox?
Note: alt attributes contain dynamic names in my case.
After trying all the other methods here, I found this method works best which makes the text transparent until the image loads:
.yourClass img {
color: transparent;
}
The way to prevent alt attribute values from being displayed is to remove the attribute.
The meaning of an alt attribute (not tag) is that it specifies an alternative, a substitute for the image, in situations where the image is not displayed. So if you want to hide it when the image has not yet been loaded, you are asking for behavior that contradicts the very meaning of the attribute.
You can however make the alt text invisible (with the usual CSS Caveats) on Firefox by setting e.g.
img { background: white; color: white; }
in CSS. This implies that the alt texts are invisible also in case the browser never gets the image, or the browser has been configured not to display images.
From the reference of all the above answers, I figured out best one is to use
img:-moz-loading {
visibility: hidden;
}
Suppose there is no image and we use color as white or transparent then alt attribute no more use so, we need this attribute if there is no image to show which image here to load and to show alternative text to display.
Old question, but as of 2020, the img:-moz-loading {visibility: hidden;} does not work any longer.
Instead of doing img {background: white; color: white;}, I think it makes a lot more sense to do this:
img {
color: transparent;
}
That way it doesn't mess up images that are supposed to have some transparency. Also, it doesn't affect the rarer cases when you need to set a background color for an img.
For bonus points you could do this:
<img src="src.com/src" onerror="this.style.color='black'"/>
That would revert it to the normal alt color in the event that the browser fails to fetch the image.
Of course this is tedious to add to every image, but easier if you are using a JS framework with a global <Image/> component.
In addition to setting to:
img {
background: white;
color: white;
}
I like to disable Firefox's default image behavoir as well:
img:-moz-loading {
visibility: hidden;
}
Could you place the dynamic names in the title attribute?
You could try a black background or black background image; maybe Firefox still uses a black text color.
Maybe img { color: white; } would do?
If you don't mind adding a little extra, here it is:
<img src = "283414_2114217089554_728204_nn.jpg" onload="this.setAttribute('alt','this is the alt of my image');" />
Hope that helps... :))
Rather than worrying about the alt function, you can give all your images a common class, say image-to-show and create a loading div absolutely positioned over this image. So, when the page loads, you only show the loading div, with a loading gif, something like this:
// show loading image
$('.loader').show();
Once the image is loaded, you can hide the div and show the image.
// main image loaded ?
$('.image-to-show').load(function(){
// hide/remove the loading image
$('.loader').hide();
});
You can further enhance this code by using specific image ID's. Another, cleaner way to do it would be to set data-loading to true for the images that are loading and once the images are loaded, set $('.image-to-show').data('loading', false)
There are multiple ways of tackling this, let me know if you need further clarification.
I'd start by adding this CSS, which will hide all images with alt text (not display: none because we want to undo this and we won't know what to undo to):
img[alt] {
width: 0;
height: 0;
}
And then showing it once it's all loaded (this uses jQuery):
$(document).ready(function() {
$('img[alt]').on('load', function() {
this.style.width = 'auto';
this.style.height = 'auto';
});
});
I am working with jquery draggables and droppables, and can't figure out why it appears that a div I have,
<li class="ui-widget-header"><img style="position: relative; left: 10px; top: 50px;" src=""></img></li>
does not seem capable of displaying both an image and text at the same time. The div above is my droppable; I am trying to drag both images and text to it. When I drag the images first, they work fine, but once I try to drag text, the images no longer display (although the droppable does acknowledge that the image was dragged there).
Here is my droppable code, although I'm not sure whether the problem stems from something in my html or from this (note: the 'li' above is the droppable):
drop: function(event,ui) {
if (ui.draggable.find("img").length) {
$(this)
.addClass("ui-state-highlight");
$("img", this).attr("src", ui.draggable.find("img").attr("src"));
} else {
$(this)
.addClass("ui-state-highlight")
.text(ui.draggable.text());
}
}
Any suggestions would be appreciated. Thanks!
This is because of your Javascript code. On text drop, you're setting the .text value of your <li> tag to the dragged text, which overwrites the <img> tag you had in there. Do you just want this to append text to whatever is in the <li> then?
This change below to your else block should append a new paragraph with the included text below your image. Obviously, feel free to change the paragraph to whatever you want.
} else {
$(this)
.addClass("ui-state-highlight")
.append('<p>' + ui.draggable.text() + '</p>');
}
$(this).text(...); is going to replace the contents of the li. Instead, use append to add it to the existing content.