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%;
}
Related
I have a div styled to truncate centered text with an ellipsis, with some padding on each side. It works when using a desktop browser, but on iPad the text seems to ignore the right padding and becomes centered incorrectly.
I'm using this for the styling:
div {
text-overflow: ellipsis;
width: 120px;
padding: 0 38px;
overflow: hidden;
white-space: nowrap;
border: 1px solid black;
text-align: center;
}
An example can be seen here. View on iPad to see the problem. http://jsfiddle.net/35Lyk9yp/
I'm thinking this might be some bug with the mobile browsers? It didn't work on iOS Safari or Chrome, but it's ok on Windows Safari and Chrome and Firefox. Is there a simple workaround for it?
Edit:
I found a workaround by using an inner div with the content that I used to do the ellipsis, and then used the outer div to set the padding. If there is a way around it with one element though, please let me know.
In order to get your code to work you need to have CSS overflow, width and display.
You are probably missing the display.
I am trying to finish my first website and thought it was pretty much finished but am having an issue with viewing some page layouts on an iPhone 5 (S and C). On my 4 it's fine and on an iPad I tested it on. Also fine on Android.
The issue is the fixed navbar (bootstrap) is bouncing around on the galley pages (it's a photography site) which have a horizontal scrolling div but it's ok on standard page layouts. I have disabled a mouse wheel plugin it's running to check if it's that and it has no effect on the iPhone 5 issue. Normal layout pages are fine.
the url is: http://www.pjrundle.co.uk
The problem occurs on any of the photography pages.
Sorry if this is a really obvious newbie question. Here is the css for the div containing the side scrolling gallery. I tried removing absolute positioning and no effect.
.scroll {
white-space: nowrap;
background-color: white;
padding-top: 73px;
position: absolute;
left: 0px;
}
Any advice greatly appreciated.
Thanks.
Thanks mijopabe, I fixed it in the end by adding:
.scroll {
white-space: nowrap;
background-color: white;
padding-top: 73px;
position: absolute;
left: 0px;
width: 100%;
overflow: auto;
}
Not really sure why it worked without this on other browsers to be honest but fixed anyway.
Cheers.
There's an iframe, which basically has more content than fits into the frame. The sizing of the frame is based on the browser screen size and lets the overflow scroll, which works perfectly on all browsers, except for iOS. On iOS, safari decides to resize the frame to fit the content. Not what you'd expect.
Example code on jsFiddle:
http://jsfiddle.net/R3PKB/2/
Try it out on your iOS devices:
http://jsfiddle.net/R3PKB/2/embedded/result
The HTML:
<div class="frame_holder">
<iframe class="my_frame">
// The content
</iframe>
</div>
The CSS:
body {
position: relative;
background: #f0f0f0;
}
.frame_holder {
position: absolute;
top: 50px;
bottom: 50px;
left: 50px;
right: 50px;
background: #ffffff;
}
.my_frame {
width: 100%;
height: 100%;
border: 1px solid #e0e0e0;
}
You can make it work by adding a wrapping div with overflow: auto; and -webkit-overflow-scrolling:touch;.
Here's your example with it: http://jsfiddle.net/R3PKB/7/
According to previous questions on SO it's a bug since iOS 4. I found more info here:
https://stackoverflow.com/a/6721310/1047398
iframe on iOS (iPad) content cropping issue
This is an old question, but since it comes first on google and the issue exists on nowadays ios devices, I repost a better fix that I found on this page:
How to get an IFrame to be responsive in iOS Safari?
Basically, if you have an iframe with scroll (let's say a twitter widget), the solution above won't work very well because it makes the parent scrollable. The fix that worked for me is replacing height: 100% with height: 1px; min-height: 100%;.
If iOS Safari is displaying your iframe content from a different origin than expected (i.e. it is shifted over by some pixels), try adding scrolling="no" as an attribute to the iframe. This should prevent it from automatically fitting its content.
More here.
using height: 1px; min-height: 100%; did not work for me, though I did not need a scrolling element. I had to use the overflow:auto; on a surrounding div instead. Note that this method is discouraged as it may have unintended consequences, but I tested on Android/iOS and desktop browsers and could not find any issues yet. fingers crossed.
This is a nice post from Andy Shora on some iOS iframe nuances: http://andyshora.com/iframes-responsive-web-apps-tips.html
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.
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"