I want to resize a textarea in IE in a manner similar to the built in resize in FF and Chrome. So I have applied the jquery ui resizable to the textarea using an se handle. All is good when expanding the textarea. But when reducing the size of the text area somehow the handle gets separated from the corner of the textarea. Like this:-
I am thinking that perhaps some combination of delay and distance could solve this. But the basic demos don't appear to employ these options and their handles don't get separated. So I am beginning to doubt if I am on the right line. Thus far my tinkering with the options has not been successful.
Any thoughts gratefully received.
This is probably NOT the correct answer but it works so I am good for now.
By restricting the expand to the vertical plane only I stopped this behaviour.
$("document").ready(function() {
if ($.browser.msie){
$("textarea").resizable({
handles: "se", maxWidth: 465, minWidth: 465, maxHeight: 350, minHeight: 22
});
}
});
Obviously it is possible to expand in any direction as given in the demos. When a little more time I may review this again.
Related
I'd really like to be able to decrease the amount of padding at the top of all my level 2 reveal.js slides (version 2.6.2). It doesn't appear to be possible to customise this with CSS because the offset is a negative number calculated dynamically.
e.g. in http://fommil.github.io/scalax14/#/5/1 I would like to reclaim at least 200 pixels at the top. The top parameter is currently being calculated to be -350px but I'd really rather it was closer to -500px.
Is there a way to do this with config?
Reveal keeps the aspect ratio of the resolution you entered in the config.
If you want your slides to have less padding, there are multiple ways:
disable centering:
center: true, // add this in init or config
slides get positioned at the top of the page, and all the padding happens at the bottom
use a 4:3 format for your slides
width: 1024, // add this in init or config
height: 768,
this will move all padding to sides of the page (well, assuming the browser window is not resized) as long as the page ratio is wider than 4:3
create fully responsive slides:
var resizeSlide = function() {
Reveal.configure({
width: window.innerWidth,
height: window.innerHeight
});
}
setInterval(resizeSlide, 1000);
you will then need to make your slides responsive to changes in slide format, but this will make them utilize the full page for the presentation.
I'm using setInterval and not onResize because onResize just don't work on mobile and some browser/os combination (i.e. chrome on windows 8.1 when using keyboard shortcut and desktop hotspots to resize the window)
If I add too many/too long captions to a vaadin7 timeline, they will only be displayed partially (i.e. the part we have space for is displayed and the remainder is truncated)
How can I increase this area in order to allocate enough space for all?
timeline.setGraphCaption(container, h.toString());
You need to add these rules in your scss file:
.v-timeline-widget .v-timeline-widget-modelegend{
background: inherit;
}
.v-timeline-widget-legend-label{
height: auto !important;
white-space: normal !important;
}
Before:
After
3 points:
While these rules may not met criteria of well-written CSS or good practice rules (I am looking at you !important), they do the trick. Still, better approach would be to get your hand dirty by editing Vaadin Timeline addon sources.
As you surely noticed text background has changed. That's because we override default background which was designed for only one line (you should provide your own background image)
Bottom of the widget is cut off by few pixels. Well, the only way to fix it is to jump into DOM and css and try fix it. Doable but I haven't tried.
I fixated the two first left columns in my tables based on https://stackoverflow.com/a/17557830/1272712. The columns is only fixated, when the screen size is less than 768px - at which point the table is scrollable (see jsFiddle). It works great on Android, desktop Chrome and desktop Safari, but it doesn't work on iOS Safari and Chrome. Does iOS not support position:absolute?
If anybody else have any alternative implementations, I'll accept that as an answer.
http://jsfiddle.net/98hk3/
I was able to get this working by overriding the -webkit-overflow-scrolling property to be unset.
I believe it defaults to touch in iOS which for some reason was throwing off the position:absolute I was trying to set.
I think you have stuck in min-width problem,
I will say that its simple to solve this in case you will convert pixel to em,
if you base size is 16px (by default it is same in all browsers)
then your PX to Em will be (px)768 / 16 = 48(em)
Now try changing Px to Em in the code Fiddle 0
also if you must stay with PX, then do something like this,
#media(max-width:768px !important)
fiddle 1
or
#media(max-width:99%)
Fiddle 2
Note:I suggest we keep 1 or 2 % spare(by applying 99%) because if we have applied padding some where within body that will create overflow to top level.
Also try adding zoom:1; under .table-responsive class that might help in case of iOS fiddle 3
if this does not work out please reply..
Can you tell me how to insert image which will be a link to for example page 20? I know how to make with normal text:
text "<link anchor='page20'>Go to page 20</link>", :inline_format=>true
and then on page 20 I have
add_dest('page20', dest_fit(page.dictionary))
but how to do this with image ?
Partly thanks to lightswitch05 for some prodding in the right direction, I've found a way to get the effect I want through this inelegant way:
Insert an image in a bounding_box (the page cursor is at this point at the bottom of the image)
Move the cursor back up to the top of the image
Insert a text link over the image (in my case I just used however many vertical bars '|' were needed to cover the image)
Confirm visually that the clickable link area is about the same as the boundaries of the image
Make the text link transparent, and voilà, it looks like you're clicking the image.
Here's some example code (measurements not exact; there was a lot of tweaking involved):
bounding_box([0, cursor], width: 35) do
image open("http://mysite.com/remote_image.jpg"),
fit: [35, 35],
align: :center
move_up 35
transparent(0) do
formatted_text([{
text: "|||", # placeholder
size: 40,
link: "http://example.com/"
}], align: :center)
end
# stroke_bounds
end
Needless to say, this experience has got me looking a bit more at Wicked PDF in order to do what I think I want to do with PDFs.
I'm sure a better/more elegant solution exists, so I'm not planning on considering this my final answer.
Prawn does not support this functionality. In fact, even if you placed a formatted_text_box over an image and fill it with white space, it still will not work. An anchor has to include text to work. If you don't mind having text over your image, then that might be a solution.
Prawn's own readme states:
One thing Prawn is not, and will never be, is an HTML to PDF generator.
After dealing with many of Prawn's shortcomings, I've switched to using wicked_pdf for my Ruby on Rails PDF generation and have been very happy with it. If you can do it in html & css, it can be done with wicked_pdf.
I trying to create a fixed border to the site that dynamically change size with the browser window from this sprite (it isn't perfect I know.): http://fc07.deviantart.net/fs70/f/2011/269/7/0/bordersprite_by_nakos-d4ayzne.png
DEMO on jSFiddle
My problem as you can see is the vertical wall part. As the #falJ and #falB are height:100% they include the bottom wall's end too with the space between the two wall sprites. Is there a way to force backround-position to only use vertical wall part without bottom wall's end?
Thanks in advance.
Solution: http://jsfiddle.net/vonkly/Ld43B/
It's not the prettiest thing in the world, but it achieves what you want. Check out the source code & direct link for the background images to see what you'll need to do. It's currently set at 299px wide; I imagine you'll be using something wider.
I'd also suggest adding some padding around your content (either with a p tag, span, another div, etc.) - the way it is currently set up isn't what I'd recommend for readability.
EDIT
The only way I can imagine achieving a fluid width + height box with the borders that you have in the way that you want is to use a second image for the west and east containing divs. This should work with your current method.