Trying to use html2canvas with some absolute position divs created with Gridstack.
Everything works great with Gridstack, but when I implement html2canvas, every div, or Gridstack item, gets sucked up to the top and stacked upon each other. If I turn of Gridstack and just use Bootstrap or something that doesn't applt position:absolute to each element it works fine.
Is there something I'm missing, or does html2canvas just not support absolute positioned elements?
Related
I'm using bootstrap-vue modals in a project and wan't them to be draggable.
I googled for this, but I'm fairly new to webdevelopment so I'm a bit overwelmed with the solutions for bootstrap without vue.
I think example-code is not necessary as I'm using standard bootstrap-vue modals. Tell me if i'm wrong.
Could you provide some examples for bootsrap-vue or explain how to use the bootstrap-only solutions?
Thanks
BootstrapVue <b-modal> uses Bootstrap v4.x CSS/SCSS styling to position the modals.
The styling uses absolute positioning for the viewport, and auto-left/right margins to center the modal horizontally and a top margin to position the modal partially down from the top of the page.
So unfortunately, out of the box, you can't position them absolutely in the viewport.
You would need to change the positioning of the modal dialog sub-container to absolute and control the left/top position based on dragging. This is not an overly easy task. You would need to create your own header (using the scoped slot for the header), and add event listeners for click/drag and if dragging, then switch the position of the .modal-dialog container to absolute, and then compute the left/top coordinates and used traditional DOM style adjustments to that element.
I'm having a little trouble getting my head around a Javascript animated scroll issue.
I'm using the SuperScrollorama Jquery plugin which is built on-top of the Greensock JS tweening library.
The fundamental effect I'm after is to "pin" a section down, then use vertical scrolling to expand some content, then "unpin" the section once the content is fully expanded, so the user can scroll on - i.e. http://blueribbondesign.com.au/example/
But when I try to apply this same effect to multiple sections one after the other, everything gets all broken: the "unpinned" content below the pinned element is pushed off screen and it seems to miscalculate the height of the element when it performs the animation in reverse (i.e. scrolling back up the page). - i.e. http://blueribbondesign.com.au/example2/
I've been endlessly fiddling with the "position:fixed" and "pin-spacer" div, and tried attaching the Superscrollorama plugin to various containing elements, but still cannot work out how to get it to work.
Any help from the brilliant crowd-sourced minds of the web would be much appreciated,
Cheers,
TN.
I've been working with this issue myself. What happens is there's a blank div spacer put above the section being pinned with a height that you've defined in the pin() function. Secondly, the pinned element gets a position:fixed assigned to it. Both of these things allow the scroll bar to continue down the page while the element stays affixed. In turn, whatever you had below that section gets bumped down because of that spacer div's height.
If your pinned element is centered horizontally, first give it a left:50%, margin-left:-{width/2}px to fix it from pushing to the left edge.
Next, you'll have to detect the pin/unpin events (which are offered by the plugin as parameters additional to "anim"), and change the section underneath to also toggle a fixed/relative position. When you change that underlying section to be at a fixed position, be sure to set its "top" property to whatever the pinned element's height is. Once the pinned element becomes unpinned, change it back to relative positioning. Does that make any sense?
It seems that different techniques will call for different fixes, but those things are what I'd pay attention to... fixed positioning, and then using the pin/unpin events for adjustment.
I need to cerate a layout where a div that is the scroll container is absolutely positioned on three sides ( left,right and bottom ) but sizes dynamically with it's sibling container above. Both the scroll container and the sibling are in a fixed dimension container. I have made a jsfiddle which demonstrates my problem.
http://jsfiddle.net/HKu4j/4
If you follow the click instructions there you will see that when you click the top container after clicking the second container it resizes which ideally would push the top of div.myscroll down. This doesn't happen since div.myscroll has top set to 20px; Is there some way with the new CSS3 flexible box layouts to make this work ? I am looking for a solution that uses CSS rather than setting geometry dimensions explicitly with javascipt as I have done in the past.
I'm not sure that this is possible using css alone.
Try this jQuery dynamic width setting example: jQuery/CSS: Set dynamic width by content, avoid inheritance
I have an issue, I am using jquery ui resizable. When I rotate the element in chrome, the controls get rotated too but when i resize the div with handles, they are inverted. I mean if i am using sw control, it acts in weird way i.e. i move towards top and the image gets bigger while in actual it should get smaller. This is the problem with rotated divs only not the normal ones.
Here is the js fiddle
http://jsfiddle.net/fahadnabbasi/2FLuf/11/
You will see two images, one rotated and one normal. Normal works fine for resizing while rotated one resizes as well but in opposite direction. Try to resize the rotated image from the bottom right control and you will see the problem.
I think you need jQuery UI Rotation http://vremenno.net/js/jquery-ui-rotation-using-css-transform/ (it's Russian). Here is a direct download: http://vremenno.net/examples/jquery-ui-rotation/jquery.ui.rotation.zip
Here is a fiddle I made up that implements the plugin: http://jsfiddle.net/MadLittleMods/4Vfm5/
After including the plugin just add. You can also add a parent div and apply it to that with .parent():
$('.resizable').rotatable();
Here is another topic that talks about rotating: jquery rotation plugin - that works like jquery ui resize
Does anyone know if it's possible to create a carousel of images in prototype and then drag+drop those images from the carousel onto a droppable div?
I've tried the same thing using jQuery UI's draggable/droppable plugins with jCarousel without luck. Thanks!
I think the trick to doing this is to carefully manage containment of the carousel. My experience of Drag and Drop with Prototype/Scriptaculous has been that if the source is contained within an element with overflow set to hidden or scroll then you can't drag out of it. Carousels are often contained in div's with the overflow set to hidden so if the animations to move from one image to another are not perfectly in sync the element size doesn't pulse.
One option would be to have your carousel use equally sized images which are absolutely positioned, to the same co-ordinates, and simply fade from one to the next, then the containment can be simple (or have none at all), then the scripty drag/drop should work ok.