With html2canvas the screenshot start always at the top left of the body.
But I need to capture only a part of the body.
Could it be possible to introduce a variable to define a "left and top" to make just a small screenshot of the middle of the body?
I do not know much about the programming... and I'm completely lost!
Thanks for your help.
You should pass the identity of a screen element (e.g. #container) to the html2canvas function. For example:
$('#goButton').click(function() {
html2canvas($('#container'), {
onrendered: function(canvas) {
myImage = canvas.toDataURL("image/png");
$('#image').append(canvas);
}
});
});
#container {
width: 300px;
height: 200px;
border: 2px solid #888888;
overflow: scroll;
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<div id="container">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et ex neque. Vivamus vulputate libero magna, quis porttitor libero faucibus eu. Aenean pharetra eleifend leo nec varius. In facilisis enim quis tellus egestas, ut euismod orci eleifend. Vestibulum
eget enim dapibus, sollicitudin ante a, bibendum purus. Fusce nec condimentum sapien. Aliquam lacus mauris, iaculis iaculis elit vel, tincidunt dapibus neque.</div>
<br>
<button id="goButton">Snap</button>
<br>
<br>
<div id="image"></div>
Just position the element wherever you want it. You should note that html2canvas doesn't actually do a screen shot - it actually renders the element (and all child elements and CSS), so you can't just specify an area of the screen.
Related
I'm trying to design a small menu and I really like this code. As you normally know, menus are closed when the page is first loaded. How can I make this animation closed when the page is first loaded? How can I start this animation in reverse?
$(document).ready(function(){
$(".slide-toggle").click(function(){
$(".box").animate({
width: "toggle"
});
});
});
.box{
float:left;
overflow: hidden;
background: #f0e68c;
}
/* Add padding and border to inner content
for better animation effect */
.box-inner{
width: 400px;
padding: 10px;
border: 1px solid #a29415;
}
<html>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<body>
<button type="button" class="slide-toggle">Slide Toggle</button>
<hr>
<div class="box">
<div class="box-inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula.</div>
</div>
</body>
<html>
You can start with hidden .box by adding display: none:
$(document).ready(function() {
$(".slide-toggle").click(function() {
$(".box").animate({
width: "toggle"
});
});
});
.box {
float: left;
overflow: hidden;
background: #f0e68c;
display: none;
}
/* Add padding and border to inner content
for better animation effect */
.box-inner {
width: 400px;
padding: 10px;
border: 1px solid #a29415;
}
<html>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<body>
<button type="button" class="slide-toggle">Slide Toggle</button>
<hr>
<div class="box">
<div class="box-inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse
varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. Integer aliquet quam
ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula.</div>
</div>
</body>
<html>
<div class="box" style="display:none">
When the menu is closed, it adds display: none property to the .box element. You have to add this style property to the .box element in HTML to make it look trapped on boot.
I am searching for a solution for text overflow inside a html.
in my project I am using angularjs, so basicly I tried to make a directive without any success.
for example lets say i have the following html tag:
<div style="height=10px;witdh=5px"> text text
sLorem ipsum dolor sit amet, consectetur adipiscing elit.
Duis quis iaculis tellus, et feugiat orci. Interdum et malesuada
fames ac ante ipsum primis in faucibus. Vestibulum id condimentum neque. Vivamus nec
bibendum tortor. Donec mi sapien, rutrum sit amet sagittis eu, consectetur non lectus.
Cras vitae porttitor assa. Phasellus odio mauris, placerat in luctus nec, malesuada et
mauris. Donec neque dui, gravida sit amet iaculis vitae, ultrices a enim. Sed mi mauris,
pharetra eget facilisis id, vestibulum laoreet quam. Etiam interdum nisi non massa
pellentesque
</div>
i am looking to get some text from the innerHTML text and then 3 point such as ... if there is a height overflow
Here's a quick snippet I just wrote up.
JSFiddle
This allows for multi-line ellipsis checking by using the width and height of the box and continuing to remove characters until the contents fit inside the box.
$(function(){
$(".overflow-box").each(function(){
$("body").append("<div class='overflow-hidden'/>");
$(".overflow-hidden").css("width", $(this).width()+"px");
var i = $(this).html().length;
while($(".overflow-hidden").html($(this).html().substring(0, i--)+"...").height() > $(this).height())
{}
$(this).html($(".overflow-hidden").html());
$(".overflow-hidden").remove();
});
});
To accomplish this for your <div> above you'll need the following:
height: 10px;
width: 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
On a slightly different note, your inline CSS is incorrect. CSS property-value pairs are separated by a colon like so:
<div style="height: 10px, width: 5px, white-space: nowrap, overflow: hidden, text-overflow: ellipsis;">
I'm using jquery cycle to fade between a few slides. These slides are of a fixed height but they contain p tags that contain text of varying lengths. I've created this jsfiddle to show you what I mean.
The problem I'm having is that I want the p tags within these slides to be vertically aligned - I want the copy to sit nicely in the center of the div. Usually when working with dynamic content like this, I'd put the p tags in a wrapper, then calculate the height of the wrapper on page load using js and position accordingly (which is why I've tagged this as javascript - I may need to use it for the solution if I can't use css).
Anyway the reason I can't seem to use js is because the p tags are within hidden panels. I can only access the size of the elements once the parent becomes visible which means I'd no doubt have to set up a callback just after a slide is made visible to do the positioning then. The downside of that is the content will jump while the js calculates the position.
One solution would be to use a table with vertical-align in the table cell, but I'm not sure it'd be semantically correct to put p tags within a td? (someone correct me if I'm wrong). Is there a purely css solution I can use here, that'll also work in ie7?
Here is the html I have:
<script src="http://ajax.aspnetcdn.com/ajax/jquery.cycle/2.99/jquery.cycle.all.js"></script>
<div id="cycle-wrapper">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut placerat dolor. Maecenas tempor nunc eu justo venenatis ullamcorper. Vestibulum ac turpis id quam dapibus adipiscing. Donec semper turpis at tortor tincidunt viverra.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut placerat dolor. Maecenas tempor nunc eu justo venenatis ullamcorper.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut placerat dolor. Maecenas tempor nunc eu justo venenatis ullamcorper. Vestibulum ac turpis id quam dapibus adipiscing. Donec semper turpis at tortor tincidunt viverra. Praesent iaculis sem vitae arcu dictum, quis dictum arcu cursus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut placerat dolor. Maecenas tempor nunc eu justo venenatis ullamcorper. Vestibulum ac turpis id quam dapibus adipiscing. Donec semper turpis at tortor tincidunt viverra. Praesent iaculis sem vitae arcu dictum, quis dictum arcu cursus.</p>
</div>
</div>
The css:
#cycle-wrapper { width: 340px; height: 300px; border: 2px solid red; }
#cycle-wrapper div { width: 340px; height: 300px; text-align: center; }
The script:
$(function() {
$('#cycle-wrapper').cycle();
});
Thanks
EDIT: I have got it working with tables here but I'd love to find a purely css solution if possible!
You can make your <p> visible only after the alignment has been calculated, so there is no "jumping" paragraph.
If you don't mind use the css display property and add separating elements,
Check my perfect version on http://jsfiddle.net/m29uu/3/
#cycle-wrapper {
width: 340px;
height: 300px;
border: 2px solid red;
display:table;
}
#cycle-wrapper p {
width: 340px;
height: 150px;
display:table-row;
}
#cycle-wrapper span {
text-align: center;
display:table-cell;
vertical-align:middle;
}
PURE CSS WAY
Not sure i understand your req. but i think this achieves what you want, one way of doing it would be to push the upper-most div using margin-top to the middle of parent div, which will automatically push the other div below it!
DEMO : http://jsfiddle.net/logintomyk/YTZYQ/
HTML
<div class="divCent">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut placerat dolor. Maecenas tempor nunc eu justo venenatis ullamcorper. Vestibulum ac turpis id quam dapibus adipiscing. Donec semper turpis at tortor tincidunt viverra.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut placerat dolor. Maecenas tempor nunc eu justo venenatis ullamcorper. Vestibulum ac turpis id quam dapibus adipiscing. Donec semper turpis at tortor tincidunt viverra. Praesent iaculis sem vitae arcu dictum, quis dictum arcu cursus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut placerat dolor. Maecenas tempor nunc eu justo venenatis ullamcorper. Vestibulum ac turpis id quam dapibus adipiscing. Donec semper turpis at tortor tincidunt viverra. Praesent iaculis sem
CSS
#cycle-wrapper .divCent { width: 340px; height: 300px; text-align: center;
margin-top:25% /* this is what i added **/
}
EDIT
After comments from Onimusha, here is another fiddle, implemented on his link http://jsfiddle.net/logintomyk/7AJy5/1/
Quick CSS Solution
Add the following css
#cycle-wrapper div > div {
display: table-cell;
vertical-align: middle;
}
and add a second div wrapper around the paragraph tags for the new css to apply to. It worked on the fiddle.
See this link http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
It is possible to vertically center without the jQuery cycle element.
But when the plugin is added the alignment was not proper.
I am not very much aware of this plugin but try changing the default options as mentioned in jQuery Cycle Plugin's option reference.
your Div have id "cycle-wrapper". and all the paragraph within this Div..
use
$("#cycle-wrapper").css("vertical-align:middle");
you can apply any css like the following way
$("element").css("propertyname","value");
Set multiple properties and values:
$(selector).css({property:value, property:value, ...})
I need to hide the scrollbar on a div that has overflow:scroll; enabled so that the div will scroll with mouse and keyboard but the scrollbar itself will not be displayed.
is there a way of doing this with css or is javascript the way to go?
You can do this with pure CSS (at least in webkit browsers). You have to use special scrollbar pseudo-classes to achieve this
::-webkit-scrollbar {
display: none;
}
Read this excellent blogpost for further information.
You could put the scrolling div inside of a second div with overflow hidden, then just make the inner div a little wider and taller (the amount may vary depending on the browser, however).
Something like this:
#outer {
overflow:hidden;
width:200px;
height:400px;
border:1px solid #ccc;
}
#inner {
overflow:scroll;
width:217px;
height:417px;
}
Full example at http://jsfiddle.net/uB6Dg/1/.
Edit:
Unfortunately you can still get to the scrollbars by highlighting the text and dragging, and it does make padding etc a bit more of a pain, but other than this I think javascript is the way to go.
#Maloric answer pointed me in the correct direction, however I needed fluid width, and I also wanted to be more accurate on the width of the scrollbar.
Here is a function that will return the exact width of the scrollbar based on what the browser reports.
var getWidth = function () {
var scrollDiv = document.createElement('div'),
scrollbarWidth;
scrollDiv.style.overflow = 'scroll';
document.body.appendChild(scrollDiv);
scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
document.body.removeChild(scrollDiv);
return scrollbarWidth;
};
var width = getWidth();
var container = document.querySelector('.overflowing-container');
container.style.paddingRight = width + 'px';
container.style.marginRight = (width * -1) + 'px';
// Just for testing purposes
document.querySelector('.scrollbar-width').innerHTML = 'scrollbar height: ' + getWidth()
.container {
height: 200px;
overflow-x: hidden;
overflow-y: auto;
width: 500px;
}
.overflowing-container {
height: 100%;
overflow-y: auto;
width: 100%;
}
<div class="container">
<div class="overflowing-container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique feugiat metus, eget mollis nibh vestibulum eu. Nullam eros orci, gravida eu quam nec, maximus posuere dui. Maecenas erat magna, elementum eget nunc eget, tincidunt varius nisl. Phasellus pretium congue consectetur. Donec rutrum nisi sed eros posuere, vel pretium nunc viverra. Praesent consequat sagittis urna, quis convallis magna gravida et. In sed eleifend arcu.
Duis ornare condimentum est luctus malesuada. Morbi nec sodales nunc. Morbi vehicula tristique massa, nec lacinia tellus vulputate fringilla. Nam eget pulvinar libero. Vestibulum ligula mi, tincidunt ac pellentesque vitae, convallis eu tortor. Cras varius dolor sit amet libero rhoncus, mattis aliquet augue porttitor. Etiam sollicitudin, sem ut mollis imperdiet, erat enim gravida tortor, et imperdiet sem nibh in ex. Aliquam ac aliquam risus. Suspendisse gravida suscipit sapien, et ultrices massa ornare eget. Nulla venenatis pellentesque arcu at auctor. Sed libero ligula, pretium in metus a, malesuada ullamcorper leo. Vivamus tempor velit in ante fringilla rhoncus. Nam ac iaculis arcu. Mauris a nisi quis arcu feugiat posuere.
</div>
</div>
<div class="scrollbar-width"></div>
The above snippet shows this in action.
You need to make use of the jquery plugin from this site http://jscrollpane.kelvinluck.com/
How can the scrollbar be hidden? I want to do this because the scrollbar is not nice.
overflow:hidden is not useful, because my div element has many other elements.
So setting overflow does not solve my problem.
You can hide the scrollbar with this...
document.body.style.overflow = 'hidden';
...and unhide it with this:
document.body.style.overflow = 'visible';
However, you have to question yourself whether this is really what you want. Scrollbars appear for people to be able to view things that are outside of their small screens.
You have to overwrite the CSS settings as follows:
<style type="text/css">
#YourSpecialDiv { overflow: hidden !important; }
</style>
And the div you should add the id tag i.e.
<div id="YourSpecialDiv"...>...</div>
I don't think there is actually a way to just hide scrollbars properly.
What overflow:hidden, overflow-x:hidden and overflow-y:hidden do is actually 'if it goes outta 100vw/100vh/100vw an 100vh then do not display it'. Overflow is only do not display what's outside of the current(initial tbh) view.
It hides scrollbar because everything that is in the HTML that should be outside will not be on the page when viewing it (nothing needing scroll so no scrollbar).
The only hide available is (here to hide the Y-axis scrollbar) :
[container]{
overflow:scroll;
overflow-x:hidden;
}
[container]::-webkit-scrollbar{
width:0;
background-color:transparent;
}
Which is a real hide of scrollbar, and sadly works only on webkit-based browsers.
If one day all vendors accept this then it will be amazing and we'll finally be able to hide scrollbars.
You can use the following on any element:
::-webkit-scrollbar {
width: 0px;
}
Source
This only works on webkit browsers, so no IE and Firefox.
You have to use the CSS property overflow, which 'manages' what should happen when the content of a certain element exceeds its boundaries. Setting it to hidden hides the scrollbars.
overflow: hidden;
or
someElement.style.overflow = 'hidden';
The best way to do this would be some sort of pseudo element css selector. But I think only webkit (Chrome/Safari) has one for the scrollbar, so it isn't very cross browser.
A hacky alternative is to wrap it in a div that hides away the scrollbar, by setting the width smaller than the contained div by the scrollbar's size
DEMO (may take a while to get the css perfect, but you get the gist)
The problem here is that scrollbar sizes differ per-browser, so you'll have to make the outer div the largest of the scrollbars' width's smaller. And to not cut off any content in the browsers with the smaller scrollbars, it'd be best to add padding of the biggest size difference for scrollbars.
var container = document.querySelectorAll("div.container")[0];
container.addEventListener("wheel", function(event) {
/*Mouse wheel scrolled down*/
if (event.deltaY > 0)
container.scrollTop += 30;
/*Mouse wheel scrolled up*/
else
container.scrollTop -= 30;
}, false);
div.container {
height: 15rem;
width: 20rem;
overflow: hidden;
padding: 1rem;
border: 1px solid;
font-family: "Seoge UI", "Calibri", sans-serif;
font-size: 1.25rem;
line-height: 1.5rem;
}
<div class="container">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus odio, scelerisque vel sollicitudin sed, ullamcorper sed dolor. Vivamus sed egestas nisl. Ut sollicitudin finibus tortor sit amet posuere. Cras erat massa, auctor non urna quis, interdum sollicitudin sapien. Pellentesque gravida ullamcorper est. Maecenas accumsan lobortis mauris, et auctor urna mattis et. Fusce venenatis, magna blandit faucibus sodales, tortor nunc lacinia ligula, bibendum euismod leo felis placerat velit. Fusce sed arcu vitae metus ultricies tincidunt auctor a diam. Duis at augue efficitur eros rutrum iaculis. Praesent eu maximus orci. Praesent lobortis semper elit vitae convallis. Donec consequat lectus tortor, vel aliquam diam fringilla ut. Sed ac tempus justo. Ut bibendum euismod magna, id egestas lacus pulvinar ut. Sed sit amet felis ornare, gravida leo ac, semper dui.</span> Pellentesque efficitur eget nisl tincidunt gravida. Aenean sed nisl commodo, porta lectus in, tincidunt dui. Vivamus eget nunc ipsum. Praesent sed quam odio. Proin aliquam dapibus dictum. Maecenas tristique lorem id erat venenatis, a varius nibh accumsan.
Nulla tempor sagittis odio, nec ultricies sem posuere ornare. Vestibulum sit amet consequat neque. Cras iaculis eleifend nisi. Sed erat mauris, fringilla nec congue quis, lobortis in justo. Quisque sit amet metus id ligula mattis elementum. Morbi sodales,
dui eget fringilla pretium, sem tellus posuere dolor, id pharetra neque elit ac nisl.<br /> Quisque <br />nibh<br />enim,<br />mattis<br />a<br />aliquam<br />eget,<br />luctus<br />id<br />velit.<br />Pellentesque<br />sodales<br />eros<br />eget<br
/>diam<br />gravida<br />porta.<br />Maecenas<br />leo<br />tortor,<br />malesuada<br />quis<br />euismod<br />sed,<br />dictum<br />ut<br />nulla.<br />Vestibulum<br />in<br />massa<br />a<br />quam<br />vehicula<br />placerat<br />in<br />quis<br
/>libero.<br />Maecenas<br />convallis<br />bibendum<br />faucibus.<br />In<br />porttitor<br />quis<br />justo<br />non<br />tincidunt.<br />Pellentesque<br />at<br />justo<br />tincidunt,<br />auctor<br />tortor<br />at,<br />tempus<br />eros. <br
/>Generated: 5 paragraphs, 414 words and 2814 bytes of Lorem Ipsum
</div>