Neither the <blink> tag nor the text-decoration:blink; style in css are supported in Internet Explorer.
Is there any technique available for making blinking text in IE?
Avoid blinking, if possible - it annoys people.
But you can do it with JS/jQuery like this:
setInterval(jQuery('.blinking').toggle, 1500 );
That'll show/hide anything with the blinking class every 1.5 seconds.
So in the HTML you would do:
<span class="blinking">hello!</span>
But again, think very carefully about whether it should be blinking!
If you need something to specifically draw a user's attention (and for whatever reason regular emphasis/highlighting/etc isn't good enough), then instead of on-off blinking (where the text dissappears for half the time), consider changing the colour, or a blinking underline/border, or similar.
The key thing is, if something is important enough to visually annoy the user then it should remain readable.
You can use this code:
$(document).ready(function () {
setInterval("$('.blink').fadeOut().fadeIn();",1500);
});
and a class link this
<div class="blink">BLING BLING...</div>
see working demo http://jsfiddle.net/SGrmM/
You can also use this code:
$(document).ready(function () {
setInterval("$('.blink').fadeOut(150).fadeIn(150);",1000);
});
see working demo http://jsfiddle.net/SGrmM/1/
see booth examples in the same fiddle http://jsfiddle.net/SGrmM/2/
Related
Today I was trying to create a dummy css rule for testing and investigation.
.dummy {
some-style : somevalue;
}
Ideally the class should have no visible effect. I want to be able to apply the class to elements but cause the least visible effect possible on any elements it is applied to. For example
<div class="dummy"> should look and behaves as much as possible like <div>
I did not want the class to be empty. Can anyone suggest a style that I could add to the class that would have the least visible impact when applied to a general html element? I can't think of anything completely harmless.
UPDATE: I wanted to add the style to some existing html. The reason was to use the style as a marker for diagnostic purposes. It would help me see when and where styles and stylesheets were getting loaded/cached and where and why some styles were getting overridden, sometimes by the browser defaults which seemed odd. At the time I didn't have exclusive use of the system I was working on so I wanted something that was going to be invisible to other users but I could see in Developer Tools.
UPDATE 2 : the html/css wasn't written by me and I didn't have my own environment in which to work. I was trying to investigate some problems in-situ in someone else's system. I had tried using DevTools in the browser but wasn't getting anywhere with that. I wanted to be able to make some small changes to their html/css to aid my diagnostics. I didn't want them to have any obvious effect on the system for other people (except in DevTools, viewed by me).
It was a Wordpress site and they only had two environments, one for live and one for testing. I was working with the test system. There were other people testing at the time, though mainly checking content.
The real thorny problem was why was the font-size in the calendar widget much larger than everything else on the site? Inspecting using DevTools I could see the font-size style was getting overridden by the browser default style when it seemed to me there were other css selectors that should have taken precedence. It looked bizarre. In the end it turned out to be a missing !DOCTYPE tag in the html. So nothing to do with the css itself.
I didn't like this way of working, fiddling in someone's system, but there wasn't much else to do and it did help to resolve the problem for them.
Hopefully I don't have to do this again, but ever since I have been wondering what was the most harmless style that I could have used?
I thought I would ask here as there must be people who know CSS better than me.
You can use this:
.dummy{
min-width: 0;
min-height: 0;
}
If you just need anything beeing set you could assign rules that are default anyway. For block elements like div set
.block-class { display: block; }
And for inline elements like span
.inline-class { display: inline; }
Of course it could be an issue doing so in some rare cases but in general it's quite harmless I guess.
In principle, for any property you can have an arrangement like this:
div {
some-style : a-valid-value-for-some-style;
}
.dummy {
some-style : a-different-valid-value-for-some-style;
}
And .dummy's style will have an effect, no matter what some-style is.
Your best bet is to make use of CSS variables. These are custom properties and start with a double hyphen. so
.dummy {
--dummy-style: foo;
}
will make --dummy-style a property with value "foo". So long as you don't employ the variable as the value in another property, it will have no visible effect.
I am using the following code to toggle my mobile navigation
html
<p>toggle</p>
I have a function which attaches the proper code/css and just need it to act as a button but not go anywhere (hence the '#').
However I want nothing to show up when it clicks/hover, since the browser usually indicates where the link is going, I don't want that (or anything else) to show
As Michael suggested, why not try using a button instead? Your code would look like this
<button class="toggle-nav"><p>toggle</p></button>
All you'd have to do is change any CSS/JS you have to reference the button instead of an a tag.
You may style the link with pointer-events.
.toggle-nav {
pointer-events: none
}
<p>toggle</p>
Consider the following fiddle: http://jsfiddle.net/GMA76/
On the links active state I want to replace the content of the a tag, then it should continue to follow the link. However when I style it as shown in the fiddle and here:
a div:first-child{
display:block;
}
a div:last-child{
display:none;
}
a:active div:first-child{
display:none;
}
a:active div:last-child{
display:block;
}
The link doesn't work the first time you click it. It only replaces the content and then it seems the redirection fails.
How would I fix that?
Browsers don't take well to content changing on the :active event. Even if it did work, a CSS-only solution would likely mean that the user wouldn't even see the change in content before the new page had loaded (or started to load with a white screen). I tested a lot with the :after pseudo-selector and the content property, but this didn't work either.
And rightly so. Changes to content should only be done with a language like Javascript. This is a logic issue and is outside of the scope of a styling language. Therefore, I would suggest using Javascript.
I've created a quick fiddle here using Javascript with jQuery (doesn't need jQuery it but it's easier) to switch the text in the link and then go to the new page exactly 1 second afterwards. This way you only need to have the original link in the HTML rather than hiding separate links with CSS. There are more flexible and extensible ways to do this if it's not just for one or two links but for the sake of an example, take a look at the fiddle.
This is the jQuery:
$(".switch-link").click(function(){
$(this).text("Test Two");
var href = $(this).attr('href');
setTimeout(function(){
window.location = href
}, 1000);
return false;
});
1000 is the delay between the text changing and the browser starting to load the new page, you can change this to suit your needs.
There's a weird behavior that I've been experiencing with only the webkit browsers since last year, and it is driving me nuts.
I've tried doing searches on this, but I don't seem to be able to hit the keywords relating to this issue.
I have a html structure as below:
<div style="border: 1px solid #000; width:200px;height:200px; overflow:hidden;position:relative">
<div style="width:200px;position:absolute">
<p>long line</p>
<p><input type="text" value=""/></p>
<p>long line</p>
</div>
</div>
You can visit the live example in the jdfiddle link:
jsfiddle
For me, using Chrome(18), when one clicks and drag-selects text in the text input field out of the input box, you are able to "scroll" the parent element, although the CSS overflow is set to hidden.
You can try it from the fiddle by click select-dragging right, top, bottom, left. Works wonders.
More complex html structure yields more bizzare scrolling behaviors. In fact, I can almost do a slide show animation with elements sliding in and sliding out in sequence, just by drag selecting.
This behavior isn't experienced in firefox, fortunately.
Is anyone experiencing this behavior as well?
Is this supposed to be a feature of webkit?
Does anyone knows how to disable this "scrolling" behavior?
Thanks!
edit:
Thanks to #PhilipK, he has found a related post with a javascript solution answered below.
As my webpage is heavy with javascript I would like to find out if there are there any possible CSS solutions.
edit2:
Thanks to #tiffon, he found another javascript solution. His solution could be implemented in CSS (but with some limitations to mouse events, so the CSS solution is kind of incomplete).
I think abusing pointer-events: none; might be another option:
Dupe question: https://stackoverflow.com/a/13897395/1888292
http://jsfiddle.net/7CuBV/21/
So this worked for me - see here - basically listen to the onscroll event and set both scrollTop and scrollLeft to 0.
I found this problem too, after a bit of experimentation I removed an overflow:hidden from one of the parent divs (the very outer div which was scrolling), and it appears to have solved it. I wasn't using any iframes.
I know this an old thread, but I've just faced the same problem.
I created this fix:
// DISABLE INPUT DRAG SCROLL (CHROME BUG FIX)
var disableScrollDrag = false;
$('input, select, textarea').unbind('mousedown').mousedown(function(e) {
disableScrollDrag = true;
$(this).css('pointer-events', 'none').addClass('disable-scroll-drag');
});
$('body').mousemove(function() {
if (disableScrollDrag === true) {
$('.disable-scroll-drag').each(function () {
$(this).css('pointer-events', 'auto');
});
disableScrollDrag = false;
}
});
Just wrestled with this strange one for the first time. I found that if I set the width of the text field to something less-than-or-equal-to the container, the parent element didn't scroll in relation to the text input value.
The example linked to above gives the basic idea, but it's about an iframe and can be a little confusing to implement on a text input within a div, which is what I (and the original poster) were facing.
Here's what I ended up doing, using jquery;
$('body').on('select', '.my_text_input', function(e) {
$('.div_that_was_moving_weirdly').scrollLeft(0);
return false;
});
This is still imperfect, as there will be a jarring scroll over and then jump back, since the select event doesn't seem to kick in until you're done selecting. I tried various events but this is the best I could do.
When using IE, you cannot put an absolutely positioned div over a select input element. That's because the select element is considered an ActiveX object and is on top of every HTML element in the page.
I already saw people hiding selects when opening a popup div, that leads to pretty bad user experience having controls disappearing.
FogBugz actually had a pretty smart solution (before v6) of turning every select into text boxes when a popup was displayed. This solved the bug and tricked the user eye but the behavior was not perfect.
Another solution is in FogBugz 6 where they no more use the select element and recoded it everywhere.
Last solution I currently use is messing up the IE rendering engine and force it to render the absolutely positioned <div> as an ActiveX element too, ensuring it can live over a select element. This is achieved by placing an invisible <iframe> inside the <div> and styling it with:
#MyDiv iframe
{
position: absolute;
z-index: -1;
filter: mask();
border: 0;
margin: 0;
padding: 0;
top: 0;
left: 0;
width: 9999px;
height: 9999px;
overflow: hidden;
}
Does anyone have an even better solution than this one?
EDIT: The purpose of this question is as much informative as it is a real question. I find the <iframe> trick to be a good solution, but I am still looking for improvement like removing this ugly useless tag that degrades accessibility.
I don't know anything better than an Iframe
But it does occur to me that this could be added in JS by looking for a couple of variables
IE 6
A high Z-Index (you tend to have to set a z-index if you are floating a div over)
A box element
Then a script that looks for these items and just add an iframe layer would be a neat solution
Paul
Thanks for the iframe hack solution. It's ugly and yet still elegant. :)
Just a comment. If you happen to be running your site via SSL, the dummy iframe tag needs to have a src specified, otherwise IE6 is going to complain with a security warning.
example:
<iframe src="javascript:false;"></iframe>
I've seen some people recommend setting src to blank.html ... but I like the javascript way more. Go figure.
As far as I know there are only two options, the better of which is the mentioned usage of an iframe. The other one is hiding all selects when the overlay is shown, leading to an even weirder user experience.
try this plugin http://docs.jquery.com/Plugins/bgiframe , it should work!
usage: $('.your-dropdown-menu').bgiframe();
I don't think there is. I've tried to solve this problem at my job. Hiding the select control was the best we could come up with (being a corporate shop with a captive audience, user experience doesn't usually factor into the PM's decisions).
From what I could gather online when looking for a solution, there's just no good solution to this. I like the FogBugz solution (the same thing done by a lot of high-profile sites, like Facebook), and this is actually what I use in my own projects.
I do the same thing with select boxes and Flash.
When using an overlay, hide the underlying objects that would push through. It's not great, but it works. You can use JavaScript to hide the elements just before displaying an overlay, then show them again once you're done.
I try not to mess with iframes unless it's absolutely necessary.
The trick of using labels or textboxes instead of select boxes during overlays is neat. I may use that in the future.
Mootools has a pretty well heshed out solution using an iframe, called iframeshim.
Not worth including the lib just for this, but if you have it in your project anyway, you should be aware that the 'iframeshim' plugin exists.
There's this simple and straightforward jquery plugin called bgiframe. The developer created it for the sole purpose of solving this issue in ie6.
I've recently used and it works like a charm.
When hiding the select elements hide them by setting the "visibility: hidden" instead of display: none otherwise the browser will re-flow the document.
I fixed this by hiding the select components using CSS when a dialog or overlay is displayed:
selects[i].style.visibility = "hidden";
function showOverlay() {
el = document.getElementById("overlay");
el.style.visibility = "visible";
selects = document.getElementsByTagName("select");
for (var i = 0; i < selects.length; i++) {
selects[i].style.visibility = "hidden";
}
}
function hideOverlay() {
el = document.getElementById("overlay");
el.style.visibility = "hidden";
var selects = document.getElementsByTagName("select");
for (var i = 0; i < selects.length; i++) {
selects[i].style.visibility = "visible";
}
}