To apply behavior: url(PIE.htc); to all css files in the project seams to be very long story and with each new version i need to repeat it again.
Is there jquery ui CSS3Pie versions i can find somewhere?
OR
Is it possible to add CSS3Pie support in separate css file, so in such case it will be possible to use that css for any new jquery ui version.
I am trying to do such fix for jquery UI that in my custom css:
.ui-corner-top, .ui-corner-left, .ui-corner-right, .ui-corner-bottom { behavior: url("PIE.htc"); }
.ui-corner-all, .ui-corner-tl, .ui-corner-tr, .ui-corner-bl, .ui-corner-br { behavior: url("PIE.htc"); }
But it is not working.
At the same time such fix working for my styles, for example if a have style
.mystyle
{
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border: solid 2px #36405c;
}
Than i could define this and it will be working:
.mystyle
{
behavior: url("PIE.htc"); /*it will be working*/
}
So i am assuming that it is not working in jquery UI case because jquery UI has multiple places with .ui-corner-* declarations with different radiuses.
Anyway is it possible to do something with that?
Any ideas someone?
You could create your own theme with http://jqueryui.com/themeroller/, set all the border-radius to 0 and then apply your styles to ".ui-corner-all"
Related
I am creating a code slide using GitPitch: https://github.com/gitpitch/gitpitch/wiki/Code-Slides
For my code slides, I would like the text to be as large as possible.
I see that the GitPitch service makes use of Reveal.js.
https://github.com/gitpitch/gitpitch/wiki/Slideshow-Custom-CSS
In Reveal.js CSS classes, is there a recommended way to stretch/expand/enlarge the font of a code sample?
The following CSS seems to work well in full-screen mode.
.reveal pre code {
font-size: 1.3em;
line-height: 1.2;
}
.reveal pre {
width: 120%;
margin-left: -10%;
}
Is there a proper way to have 2 differently styled jquery ui buttons on the same page?
I am able to copy css around for the second button but there are a lot of different !important styles that I keep needing to add a second !important after the first in order to change the style.
for ex:
.ui-state-active {
background:none !important;
background-color:#E1E1E1 !important;
color:#000 !important;
}
I will then have to go and add right after (and it needs to be after
.new-theme.ui-state-active {
background:none !important;
background-color:red !important;
color:#000 !important;
}
the problem is these important styles are all over for each state so I have to mind where they go. Is this normal or is this usually handled a different way?
Are you using an older version of jQuery UI that requires you to use !important to override their styles? Newer version have fixed this: Use of !important in jquery-ui.css should be avoided.
If you can/are using a newer version, try getting rid of !important and instead rely on selector specificity to get your desired results.
I would recommend using jqueryui-speciffic css. Except difficulties with different button stylings, there may be performance problems while rendering larger amounts of buttons.
This resource is relatively old but I found it very valuable while using jqueryui css.
The resize handles don't show on dialog or in anything I try to resizablify inside a dialog. I know this is by design that they are disabled in the themes, but how do I get them visible? I need to see them in the dialog content and the ones for the dialog would not hurt either.
<p>Dialog
<div id="dialog" style="display:none;">
<p>foobar</p>
<div style="width:100px; height:100px; border:1px solid;" id="bar">BAR</div>
</div>
<script>
$(function(){
$('a[href=#dialog]').click( function(e) {
e.preventDefault();
$('#dialog').dialog({
open: function() {
$('#bar').resizable({handles:'sw,se,e'});
}
});
});
});
</script>
Also in JSFiddle: http://jsfiddle.net/s22nx/
There are a couple of things going on here contributing to the problem, one of them could be a bug.
Firstly, you are correct that the south-east handle was hidden intentionally, however all 8 handles still exist as elements in the dialog. This is good news since you can add the following CSS to bring the se handle back. It's a bit of a hack to get around the intentional hiding and you might want to adjust the right and bottom positioning to suit your needs.
.ui-dialog .ui-resizable-se {
right:0 !important;
bottom:0 !important;
background-position: -64px -224px !important;
}
The other grabbers seem to by design have no style associated with them. None of the themes I checked have any visible style (aside from the cursor). Search for .ui-resizable- in the jquery-ui.css to see this.
This is sort of covered in the documentation but only mentioned in the context of generating your own handles. There is nothing explicit about existing theme support. Luckily all the handles share a class, so we can make them all visible by adding:
.ui-resizable-handle {
background-color:lightblue;
}
Or just one side, for example:
.ui-resizable-s {
background-color:lightblue;
}
The possible bug I mentioned was to do with controlling the generation of handle elements. The code in question $('#bar').resizable({handles:'sw,se,e'}); should be correct and result in only 3 handle elements but all 8 always appear.
In the _makeResizable function in jquery-ui.js (v1.10.2) the line:
resizeHandles = typeof handles === "string" ? handles : "n,e,s,w,se,sw,ne,nw";
should set the correct resizeHandles to the value you supply as an options parameter but typeof handles = 'object' for me, so jQueryUI is using the else part of the ternary.
In the css file, I had to change:
.ui-dialog .ui-resizable-se {
width: 12px;
height: 12px;
right: -5px;
bottom: -5px;
background-position: 16px 16px;
}
to:
.ui-dialog .ui-resizable-se {
width: 12px;
height: 12px;
right: 3px;
bottom: 3px;
}
Or you just forget to include required css
<script src="js/jquery-ui.min.js"></script>
Check this
UPD
They do get handles, they're just not visible with the default theme. This isn't something specific to jQuery UI. Many resizable windows work this way.
I have attached two pictures, the first shows the "desktop" of the webapp I work on, some of the icons you see open dialogs made of a <div/> containing an <iframe/>, but while on a normal pc it all works properly, on the iPad it seems there is a problem with the z-index of some elements, as shown in second picture.
The small red rounds with number inside are defined as follows:
.countComunicazioni {
position: relative;
background: url(/images/admin/menu_sgs/counter.gif) no-repeat center center;
height: 35px;
width: 35px;
color: #FFF;
top: -105px;
left: 120px;
z-index: 0;
font-weight: bold;
display: none;
}
.countComunicazioni p {
margin-top: -5px;
padding-top: 10px;
}
The markup is a <div class="countComunicazioni"/> tag and a <p/> tag inside.
I also noticed that now the problem also appears in Google Chrome V22, the numbers in red circles are always on top even if they have z-index == 0 and the dialogs have z-index > 1000.
As per this bug report ( http://code.google.com/p/chromium/issues/detail?id=144518 ), the change seems to be intended, even if I would bet it'll broke many layouts, not only ours.
This problem was not present in previous versions of Google Chrome, nor is present on Firefox V15 or Internet Explorer V9, where everything is rendered problem.
How can this problem be solved? I'm no CSS expert, so I must admit I have tried little, if anything, so far... And also, who is "right" here? Is our markup incorrect, or does the problem lie in google chrome new rendering strategy?
EDIT
It seems I've been able to solve the issue shown in the two pics: all the dialogs generated from my web app are placed inside a <div/> with position:fixed placed on the very top of the body, now I tried to move the div to the very bottom of the page, and the layout seems now correct.
There is one more problem though: when opening a modal dialog, the opaque layer that is supposed to be created between the dialog and the below content, is actually created above it, see new screenshot.
How could this problem be solved? Does it require modifying our javascript or is it an issue with jquery ui itself?
Just found out myself that the way that chrome 22+ handles z-index has been altered.
Check out this awesome explanation here that I didn't write here...
http://updates.html5rocks.com/2012/09/Stacking-Changes-Coming-to-position-fixed-elements
Basically the way I understand it is that elements which have
position: fixed
now get counted with their own z-index layer so you'll have to adjust your pages accordingly to suit.
Hope that helps!
Considering this proof of concept, would it be possible to animate margin-left (both negative and positive values) through JavaScript?.. And how would you go about doing so?
Note: I know this is WebKit-only. And I'm fine with that, seeing as I am developing for iOS Safari.
Update
Thanks for the answers, but jQuery's animate function doesn't support pure CSS animations, which is what I need.
I know that you specifically say "can you do this in JavaScript", but you shouldn't need to use JavaScript. I'm fairly certain that the proof of concept you link to only uses jQuery as a way to make the animations fall back to JavaScript so that all browsers play nice with the animation. Since you're specifically developing for Mobile Safari, you shouldn't need to use jQuery for this except to use a history plugin to push and pop states to make the browser's back button work; this is entirely doable via CSS transition properties and the :target pseudo-selector.
So as an alternative, you should be able to do something like this:
In HTML:
<div id="thing-that-will-transition">
<a href="#thing-that-will-transition>click this to transition the div</a>
</div>
In CSS:
#thing-that-will-transition
{
(bunch of properties)
-webkit-transition: margin-left [the rest of your transition values]
}
#thing-that-will-transition:target
{
margin-left: [your properties]
}
As long as your fragment URL matches up with the name of the element that you want to transition then you should be able to push the fragment in to the URL using JavaScript if you absolutely have to instead of using anchor with a fragment href while still having the transition take place. And if you use a jQuery history plugin or do your own pushing and popping of the history stack then you still get back-button behavior for your app.
I know you specifically asked for a JavaScript solution to trigger the CSS animation, but I'm just not sure why this is what you need. Sorry if this doesn't help you at all.
UPDATE: Here's a jsFiddle demonstrating the above. It uses this jQuery history plugin to manage the history stack, so that you can still get acceptable back/forward button behavior from the fragment URL's. The anchor tag uses the plugin's "push" or "load" method in its onClick with a standard fragment in the href attribute as a fallback for browsers without JS enabled.
UPDATE 2: Here's another jsFiddle that uses transforms/translations instead of transitions.
UPDATE 3 (by roosteronacid):
And as for getting the animations going through JavaScript, you can do:
var element = document.getElementById("...");
setTimeout(function ()
{
element.style.webkitTransitionDuration = "0.3s";
element.style.webkitTransitionTimingFunction = "ease-out";
element.style.webkitTransform = "translate3d(300px, 0, 0)";
}, 0);
You can set a transition in css3, and then subsequent changes to the element will be animated.
.MY_CLASS {
-moz-transition: all 0.3s ease-out; /* FF4+ */
-o-transition: all 0.3s ease-out; /* Opera 10.5+ */
-webkit-transition: all 0.3s ease-out; /* Saf3.2+, Chrome */
-ms-transition: all 0.3s ease-out; /* IE10 */
transition: all 0.3s ease-out;
}
This specifies a nearly cross browser (damn IE) transition that applies to all css changes, lasts 0.3 seconds and eases, so it will slow down towards the end of the transition. Therefore, to animate it to the left/right, simply change the css:
$(".MY_CLASS").css("margin-left", "-300px");
Note this will animate it to a fixed position of 300px, if you want to animate to a position relative to its current location use:
var mleft = $(".MY_CLASS").css("margin-left");
var newleft = mleft.substr(0, mleft.length-2) + 50;
$('.MY_CLASS').css("margin-left", newleft+"px");
See a working example here (jsFiddle)
Better use transitions, that are almost cross-browser supported (except IE), and set the keyframes through JS.
This works using CSS, HTML and WebKit only:
#wrapper {
width: 700px;
text-align: left;
border-radius:10px;
-moz-border-radius:10px;
border-style:solid;
border-width:1px;
border-color:#ccc;
padding:30px 30px;
-moz-box-shadow: 0px 0px 5px #BBB;
-webkit-box-shadow: 0px 0px 5px #BBB;
box-shadow: 0px 0px 5px #BBB;
-webkit-transition-property: -webkit-transform, margin-left;
-webkit-transition-duration: 3s;
-webkit-transition-timing-function: ease-in;
-webkit-transform: translate(100px);
}
Just make a <div id="wrapper">Placeholder text</div> in an HTML file to test it out. Worked for me in Google Chrome 12.0.742.112 and Safari 5.0.5 (6533.21.1). If it doesn't do the animation right away, it may be due to your browser processing the translation too quickly (or caching, perhaps?). You might consider adding a delay somehow. I just pressed the refresh button a few times really fast. Worked for me.
Edit:
Check out the source behind girliemac's test page. Some insightful stuff there. Also see this SO post.
you can use jqueries .animate() - http://api.jquery.com/animate/
Check my example - http://jsfiddle.net/ajthomascouk/jS83H/ - Press the + and -
Animating css margins with jQuery works like this:
$( '#mydiv' ).animate({
'margin-left': 'new margin value'
});
To use webkit's css animations, you'd create a class that has the transform property, then you can use jQuery to add/remove said class as needed.