I included modernizr in my page, but how will I test that it's working in IE 6-7 if I don't have access to those browsers? Doing something similar to:
http://designshack.net/articles/css/build-a-freaking-awesome-pure-css-accordion/
The essential CSS:
.accslide {
height: 0px;
width: 0px;
overflow: hidden;
}
input[type="radio"]:checked+label ~ .accslide {
width: 100%;
height:auto;
}
If that second selector doesn't fire, the content will be invisible.
Is there a method to only load Modernizr if CSS3 is unsupported?
How do I test if Modernizr is working on my CSS selectors?
Modernizr doesn't add any functionality to the browser, simply checks for existing funcitionality. If you want to test for selector support you will need to add that. Here's a gist
However, even that isn't going to get you far for what you're trying to accomplish, which, I imagine, is showing the accslide element when you've checked the radio button. You will, most likely, need to use javascript if you expect to support IE6 & 7 -- IE6 doesn't even support the [type="radio"] selector, so you can't use that either.
You will need to add a click/change handler to the radio button and update it's container with a class to properly get your desired functionality, especially to support IE6.
Here's an example of what your CSS would look like:
#radioContainer .accslide {
height: 0px;
width: 0px;
overflow: hidden;
}
#radioContainer.on .accslide {
width: 100%;
height:auto;
}
Now, in javascript, when someone clicks/changes the radio button just add/remove an on class to the #radioContainer element. Note: I gave #radioContainer an ID b/c IE6 will not style an element from two css-class names (Ultimately, you would not be supporting IE6 and could simply provide .radio-container.on, which will not work for IE6)
Modernizr won't enable CSS features (like newer selectors) if the given browser doesn't support it. It's mainly a feature detection library.
Related
My goal
What is available
This is done using a simple calendar input.
<input type="date">
I have tried reducing the width of the input, but then it doesn't seem elegant as it deforms in different browsers. The previous images were on chrome. Below is how it appears in Mozilla.
I think I could specify the width for each browser. That however seems inelegant and convoluted.
In most modern browsers you can use the showPicker() method of an input[type=date] element to make the widget appear.
So, with that in mind, you could move the <input> outside of a container with overflow:hidden and trigger the widget from a click event on another element.
Something like the snippet below might work, though I wouldn't really suggest using this in a public facing web app due to the limited support :
let cal = document.querySelector('label.calendar');
let ci = document.querySelector('label.calendar input[type=date]');
cal.addEventListener('click', event => ci.showPicker());
label.calendar {
overflow: hidden;
user-select: none;
cursor: pointer;
}
label.calendar input {
position: absolute;
bottom: 100%;
left: 0;
border: 0;
padding: 0;
outline: none;
}
<label class="calendar">
<input type="date">
<span>🗓</span>
</label>
Instead, I would recommend you look into other (more mature) options like Smart HTML Calendar which is a Custom HTML Element.
What are you trying to achieve is not possible to do in one solution for every browser because the "date" input type is rendered by the browser and every one of them has their own specification on how to render things. You could try to use a custom component or plugin that renders a calendar using javascript/CSS/HTML that is the only way to have a consistent look and feel across different browsers.
I have a css class "buttonClass". I have a few pseudo-classes, of note: "buttonClass:hover".
In one case I have used two different images, and the hover feature works at switching between images.
In another case I'm using sprite style images and the pseudo class should adjust the background position appropriately.
When I used object-position the hover feature worked great in Chrome, but wasn't working in IE11, just to find out that IE doesn't support object-position.
So I switched to background-position. In the debugger switching the position values gets me the effect I need, but for some reason in the modal window where the button is, the hover feature is not working.
Classes are:
.buttonClass {position:absolute; bottom:15px; left:340px; background-position:0 0; background-repeat: no-repeat; width:118px; height:60px; }
.buttonClass:hover {position:absolute; bottom:15px; left:340px; background-position:-120px 0; background-repeat: no-repeat; width:118px; height:60px;
JavaScript file excerpt:
g = document.createElement('button'); g.className = 'buttonClass';
Other attempts have used the following in the JavaScript to no avail:
g.onmouseover = function () {
g.classList.remove("buttonClass")
g.classList.add("buttonClass:hover")
}
g.onmouseout = function () {
g.classList.add("buttonClass")
g.classList.remove("buttonClass:hover")
}
Adding a breakpoint has no effect...as thought the code is never implemented, However, changing values in the JS file and in the css does impact the contents if the div tag being used as a button.
Sites I've tried:
https://www.quora.com/Can-I-add-the-hover-pseudo-class-to-an-element-using-JavaScript
Setting CSS pseudo-class rules from JavaScript
https://www.w3schools.com/css/css_pseudo_classes.asp
Unfortunately, the code I'm working with is already existent and too large to paste a miniature functional piece. I'm trying to debug it so the features work "as advertised" so to speak.
Answers can come in the form of direct suggestions or references to sites or already answered questions that I've missed due to my particular formatting of inquiry.
Sorry, this wasn't a pseudo-class or browser issue. It was an inheritance issue. The button inherited from several divs up a pointer-events:none attribute. So adding pointer-events:all to the button class resolved the hover issue.
I am using ShadowBox for showing media. It has some property showOverlay, which i setted to false, because dont need it.
Problem is that background is not accesible as if ShadowBox is modal dialog although Visibility in CSS is setted as hidden.
In Chrome and Mozilla it will be changed to visible and is modal. It works manually if me changing it back again to hidden.
BUT WHY it is always setted to visible in Chrome and Mozilla browsers sourcepage/css????
Here are my CSS of ShadowBox:
#sb-container {
position: fixed;
margin: 0;
padding: 0;
top: 0;
left: 0;
z-index: 999;
text-align: left;
visibility: hidden;
display: block;
}
#sb-overlay {
position: relative;
height: 100%;
width: 100%;
visibility:hidden;
}
#sb-wrapper {
position: absolute;
visibility: hidden;
width: 100px;
}
and it is what Chrome and Mozilla does! in Explorer it works!
Inline styles (the ones on element.style) have a greater "priority" over CSS styles defined in a stylesheet.
What you can do:
It's a good advice to actually avoid inline styles if possible. Style your elements with the least specificity at best. That way, they're easily overridable later on.
Note that changing styles via JS (someElement.style.someStyleHere) counts as an inline style as well.
If you are changing styles dynamically, it is better to define the styles in CSS classes, and use JS to dynamically add or remove these classes on the target elements.
If you are familiar with jQuery, the addClass and removeClass are the functions I'm referencing. Of course, you can come up with your own function that parses the element's className, and add or remove the said classes.
If avoiding inline styles isn't an option (due to some framework you use that does it that way), you can override inline styles by placing !important on your styles defined in your stylesheet. It's a bit rash, and usually used as a last resort to overthrow inline styles.
Based on your screenshot it appears that visiblity: visible is set as a style inside the style attribute on the element. The style attribute always overrides what is inside any stylesheets.
try using visibility: hidden !important;
This is a very simple and interesting concept in CSS called CSS Specificity
It defines to the browser which CSS rule to be applied in case of overriding of rules.
In your case, you have applied inline CSS style to your html elements. Since it has the highest priority, whatever your write in your external .css file will be ignored.
To avoid this, remove all inline css from your html code and try to incorporate them in the external css file you having. OR as many people already suggested, you can use the "!important" to your greatest advantage.
Hope this clears out the problem.
Currently I'm working on a website where I'd like to show some toolstips for specific DIV elements. My weapon of choice is jQuery Tools.
So when I use $(".toolTipMe").tooltip(); it works quite nice. As soon as I hover the element a new DIV appears in the DOM:
<div class="tooltip" style="display: none; position: absolute; top: 313.65px; left: 798.5px;">foo</div>
However the design is done by our very own css-monster (you should this this guy!) and he's using a a lot of z-indexes so the .tooltip-DIV is behind the other elements.
Now the question:
The following code in our .css File is not having any effect:
.tooltip{
z-index: 9001;
}
In fact the attribute is not even showing up when debugging the website. But the following will work:
$(".toolTipMe").tooltip({
onShow: function(){
$(this).css("z-index","9001");
}
});
I'm not sure how CSS Rules are applied for dynamic inserted DOM Elements but what I really detest in the current workaround is the mixture of functionality and style. Any chance to clean up this mess? :C
I am not familiar with jquery tools, but if your z-index is not working you must need a !important tag or making it position:relative or position:absolute
In jquery tools tooltip you need to specify the z-index inside the tooltip constructor like:
$(".toolTipMe").tooltip({ z-index: '9001'});
I'm not sure if it is z-index or zindex.. check it out
I'm currently styling the scrollbar using Webkit's ::-webkit-scrollbar CSS properties and would like to change these properties on a mousemove event. The problem is that I can't seem to find a way to get to the scrollbar's CSS dynamically.
Is it possible to style the webkit scrollbar dynamically, through javascript (possibly using jQuery)?
There is a nice workaround for this problem, you can add multiple css classes with diffident styles for the scrollbar, and then change the classes dynamically with Javascript.
Example:
.red::-webkit-scrollbar { ... }
.blue::-webkit-scrollbar { ... }
A button that toggles between the classes red and blue:
$("#changecss").on("click", function(){
$(".red,.blue").toggleClass("red").toggleClass("blue");
});
Here is a working fiddle: http://jsfiddle.net/promatik/wZwJz/18/
Yes, you can do it.
You need to include dynamically css style rule into stylesheet.
And then to change it.
You can do it by this plugin
If you don't need to use jQuery - you can do it by pure Javascript:
link 1
link 2.
But there is cross-browser problems.
Also see Setting CSS pseudo-class rules from JavaScript
If you want to change a scrollbar properties when mouse is over it. You can do it with CSS, here an example http://jsfiddle.net/olgis/7Lg2R/ (sorry for ugly colorset).
If you want to change scrollbar colour if the mouse is over a container then look at this post Style webkit scrollbar on certain state . There are described several ways of doing it, with and without JavaScript.
REMARK: I do not know for which reason none of those example (with CSS neither JavaScript) do NOT work in my Firefox 11 for Mint, but all of them works perfectly in Chrome 18.0.1025.151.
i created page with four tabs each different color set as well as scroll bar
however this only worked by giving class to body tag
body.greenbody::-webkit-scrollbar {
width: 10px;
}
body.greenbody::-webkit-scrollbar-track {
background-color:rgb(0,50,0);
}
body.greenbody::-webkit-scrollbar-thumb {
background-image:url("../assets/ScrollGreen.png");
}
/
body.bluebody::-webkit-scrollbar {
width: 10px;
}
body.bluebody::-webkit-scrollbar-track {
background-color:rgb(0,0,50);
}
body.bluebody::-webkit-scrollbar-thumb {
background-image:url("../assets/ScrollBlue.png");
}
html
<body id="body" class="greenbody" bgcolor="#202020">
javascript for each tab button(only scroll bar section shown here)
document.getElementById("body").className="greenody";
.........other function()....
document.getElementById("body").className="bluebody";
ScreenShot1 GreenScrollBar Image
ScreenShot2 BlueScrollBar Image
For this you should replace the scrollbar altogether.
It's just a matter of picking whichever one gives you the easiest API.
You can style scrollbars with CSS3, these generally only work for internal scrollbars and not the actual browser main scrollbar. You can also add the MOZ attribute to the following.
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
display: none;
}
::-webkit-scrollbar-track-piece {
background-color: #3b3b3b;
-webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:vertical {
-webkit-border-radius: 6px;
background: #666 url(scrollbar_thumb_bg.png) no-repeat center;
}
Demo: http://geryit.com/lib/custom-css3-scrollbars
Download Source: http://geryit.com/lib/custom-css3-scrollbars/custom-css3-scrollbars.zip
you can make a <style> tag with id="scrollbar_style" and then add css inside it dynamicly like this :
document.getElementById('scrollbar_style').innerHTML = '::-webkit-scrollbar{width:15px;}';
just remember that using innerHTML on an element WILL NOT JUST ADD your new code, it WILL ALSO DELETE whatever was inside that element.
problem solved.
you can define a function in JavaScript with your own css.
function overFlow(el) {
el.style.cssText = "overflow: auto;";
}
using in html:
<style>
::-webkit-scrollbar{display = none;}
</style>
<div id="overFlow" onclick="overFlow(this);">Something</div>
More Info: https://css-tricks.com/almanac/properties/s/scrollbar/