Rounded Border IE10 (Compatibility mode) - javascript

I am actually making a website where the main browser is Internet Explorer 10.
They set the website so the Navigation Mode is set to compatibility IE10. (you can see this when you press F12, the info are on the bottom)
So I don't want to switch to the Navigator mode IE10, because they made an interface already, and if I change it, it just goes weird.
So Im going to explain you what I tried to get my rounded border to work ... They work half of the time.
So first I tried border-radius, but no succes with it.
So I then look for a plugin on the internet to find a way to make some rounded border and I found CSS3PIE.
This is like a JS plugin that can make the rounded border.
Like I said, it work half of the time.
So my css with this pluggin look likes this:
width:100px;
padding:20px;
top:0px;
position:relative;
vertical-align:top;
border:1px solid black;
-webkit-border-radius: 4px 4px 4px 4px;
-moz-border-radius:4px 4px 4px 4px;
border-radius:4px 4px 4px 4px;
-webkit-box-shadow: 0px 0px 2px rgb(0, 0, 0);
-moz-box-shadow: 0px 0px 2px rgb(0, 0, 0);
box-shadow: 0px 0px 2px rgb(0, 0, 0);
behavior: url(http://blablabla/Pie2/PIE.htc) ;
So as you can see, I just need to add up the file to the css and it do everything automaticly.
The probleme I have right now, is when I load the page for the first times, everything loads correctly(the borders), but when I switch between tabs on the website, sometimes the borders appears, and some other time they just wont appear.
When they are not appeard, I need to mouse over the element to make them appear.
(I guess that's a function that they have in their JS)
That thing is really annoying and that's what I want to fix :)
I want my border to always be there when I switch tabs!
If you have any other solution, feel free to inform me about them!
Thanks for any help!
__________>
Thanks, they want to stay with IE10. Do you know any other apps like CSS3PIE that I could try to see if I get any difference?

You can put this on the <head> section of your website:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
This will disable the Compatibility mode and stop messing your site.

Related

Scrollbar not visible on iOS application, it appears when start scrolling. Any resolution for this?

Scrollbar in iOS when start sliding. Here we have a list and sublist. When we select a list we will get a corresponding list sub list. if this sub list overflows we are not able to see scrollbar it appears only when the user starts sliding on the sublist. is there any solution for this?
Well, the question is if you really want to change this default behaviour. Most iOS users are used to it.
However, this should do the job. Add it to the concerning element. It kind of "overwrites" the default behaviour.
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0,0,0,.5);
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

Have a Full Screen Width Background in a responsive grid site

I am working on a Responsive grid site for a client (a modified version of WP responsive theme), and they have a slideshow on the homepage with a main page that has a background that they want to extend the full width of the page/viewport overtop of the main background.
Currently I have this
#slideshow{
position: relative;
}
#slideshow:before {
content:"";
width:8000px;
height:100%;
position:absolute;
background-image:url('images/bground-tiled.jpg');
background-repeat: repeat-x;
left:-3530px;
z-index:-1;
box-shadow:
inset 0px 15px 8px -10px #222,
inset 0px -15px 8px -10px #222;
}
which works fine on a desktop but on mobile/tablet it shows the screen as 8000px wide with extending out to the right due to the margin. I need a solution that does not "ruin" mobile views in this manner
I also just want to know the proper way to accomplish this for future reference. The content is in a 960px container and I cannot rework the entire design of the site to have an outside 100% div on the slider section with an inner div that is 960px (unfortunately).
here is a crudely drawn example
EDIT: Fiddle: http://jsfiddle.net/7s44S/14/
In the end I could not find an answer so I had to redo the base structure of the theme, and do it the "right" way

Serving different css box shadows for different browsers without browser detection?

I noticed that each browsers renders box shadow blur radius slightly different so I want to even that out. However, as they use the unprefixed version I need to serve different stylesheets for different browsers. What is the most reliable method?
For example: Mozilla uses moz_style.css, Chrome uses chrome_style.css
Im doing this using user agent detection but I heared it is not very reliable:
<script>
if(BrowserDetect.browser=="Chrome") {
document.write('<link rel="stylesheet" href="css/chrome.css" type="text/css" media="all" />')
}
</script>
Surely box-shadow as a CSS property already makes use of vendor prefixes for a few different browsers. If you take a look at this random box-shadow snippet I pulled from elsewhere on the web you'll see that it uses different declarations for webkit, firefox on top of the primary box shadow property:
-moz-box-shadow: inset 0 0 10px #000000;
-webkit-box-shadow: inset 0 0 10px #000000;
box-shadow: inset 0 0 10px #000000;
I know for example that the Opera vendor prefix is -o so you may be able to append that vendor prefix to the box shadow property to cover Opera browsers although I am not sure if it's supported. Also you have IE specific box shadow rules as well:
.ieShadow{
display:block;
position:absolute;
z-index:2;
top:5px;
left:5px;
right:-5px;
bottom:-5px;
filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=5);
-ms-filter:"progid:DXImageTransform.Microsoft.Blur(pixelradius=5)";
background-color:#444;
}
Browser "Sniffing" with Javascript is not seen to be the way go anymore to detect browsers.
So yes all in all, surely your box shadow code can just vary from one vendor prefixed property to another?
EDIT: Some enlightenment on the subject reveals that it really isn't all that simple. Vendor prefixes are a bit of a mess really.
This gives you a good idea of the browsers using the webkit engine and the main box-shadow property:
.box_shadow {
-webkit-box-shadow: 0px 0px 4px 0px #ffffff; /* Android 2.3+, iOS 4.0.2-4.2, Safari 3-4 */
box-shadow: 0px 0px 4px 0px #ffffff; /* Chrome 6+, Firefox 4+, IE 9+, iOS 5+, Opera 10.50+
}
So I guess specific browser targeting is not achievable with vendor prefixes in CSS (??!)

iPhone-like jQuery Scrollbar

I'm trying to find a jQuery scrollbar that looks like the one of the iPhone: a simple black bar without the up or down buttons. I've found a few scripts but most tend to do so much more than I need. I basically have a div with a fixed height that is set on overflow:auto to which I would like to apply this scrollbar. Help would greatly be appreciated!
Matteo Spinelli has an iPhone-like scrollbar inside of his iScroll library. You should try looking into whether or not you can adopt it to your needs.
What are your browser requirements?
You should try to avoid javascript solutions since they will increase the complexity of your page. If a third-party scrollbar javascript library breaks, you will have to debug it yourself (been there, done that).
Chrome has full support for CSS3 scrollbars, something like this should make an iPhone like scrollbar
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
IE allows styling scrollbars with vendor specific tags, but its very limited. e.g.:
scrollbar-base-color: #663366;
scrollbar-face-color: #99CCCC;
scrollbar-track-color: #996699;
scrollbar-arrow-color: #330033;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #CCCCCC;
scrollbar-shadow-color: #663366;
scrollbar-darkshadow-color: #000000;
Here is a jsFiddle with the styled scrollbars:
http://jsfiddle.net/APmLZ/3/

How to make JSF / Seam pages accessible without JavaScript

I'm currently checking a complex web application for accessibility without JavaScript. We heavily rely on JSF and Seam to render the pages and I'm more than annoyed about the overall behaviour when JavaScript is turned off. Many links and buttons rely on JavaScript to perform even the most basic operations.
Is there some general documentation about that topic?
Has any of you some advise how to maintain accessibility?
My first investigations showed that tags like <s:button> can be replaced with <h:commandButton>. But a few minutes later I've realized that even <h:commandLink> doesn't seem to work without JavaScript. I'd love to have some documentation that describes what parameters that make JS mandatory and showing alternate ways to achieve the same elements.
It's understood that things like onClick and others won't work without JS. But I really need to make at least the basic actions behind those links and buttons work. Currently much of the webapp can't be navigated without JS and that's unacceptable.
I had the same accesibility requirements for my previous project.
What I've done is the following:
Just use s:link or h:commandlink for users who have JS and put there a noscript tag with a h:commandbutton styled like your link (as good as possible).
And also make sure that s:link or h:commandlink is default hidden in the CSS and made visible with JS. This way you only get one link or button seen when JS is off.
You can do this easily with Jquery.
Cheers.
<>
One possibile replacement for the <rich:modalPanel> is the following CSS only solution - maybe it helps others.
div.modal {
position: absolute;
margin: 0;
padding: 0;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 99;
}
div.modal div.wrapper {
background-color: white;
border: 5px solid black;
width: -moz-fit-content; /* Mozilla Optimization */
max-width: 90%;
max-height: 90%;
overflow-y: scroll;
margin : 50px auto;
padding: 10px;
-moz-box-shadow: 0 10px 10px rgba(0, 0, 0, 0.25);
-webkit-box-shadow: 0 10px 10px rgba(0, 0, 0, 0.25);
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.25);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
Simply replace <rich:modalPanel> with <s:div rendered="..." styleClass="modal"><div class="wrapper"> content </div></s:div>. The CSS is a bit stylish... you may strip some of the cosmetic things though.
A possible replacement for <rich:tabPanel> might be Tomahawk's <t:panelTabbedPanel> which should work without JavaScript - at least that's what has been told me... but I still have to verify this.
Another alternative is the <noscript> tag... as mentioned by Serkan. For the tab panel this could look like the following (just a quick wireframe):
<noscript>
<h:form id="formTasksNoJS">
<fieldset>
<legend>Alternative Steuerung ohne JavaScript</legend>
<h:commandButton action="#{taskManagerSettings.setSelectedTab('eingang')}" value="Eingang" id="noJS1"/>
<h:commandButton action="#{taskManagerSettings.setSelectedTab('ausgang')}" value="Ausgang" id="noJS2" />
<h:commandButton action="#{taskManagerSettings.setSelectedTab('archiv')}" value="Archiv" id="noJS3" />
</fieldset>
</h:form>
</noscript>
<h:form id="formTasks">
<rich:tabPanel switchType="server" selectedTab="#{taskManagerSettings.selectedTab}" >
<rich:tab name="eingang" label="Eingang">
...
</rich:tab>
<rich:tab name="ausgang" label="Ausgang">
...
</rich:tab>
<rich:tab name="archiv" label="Archiv">
...
</rich:tab>
</rich:tabPanel>
</h:form>
This allows clients without JavaScript to activate the desired tab. A better solution would hide the unusable tab panel navigation and present a cleaner interface. But you'll get the point.

Categories