In my template i have a layout as such:
<div id="container">
<div resizable id="subContainer1">
<div objWrapper id="objWrapper1"></div>
</div>
<div id="subContainer2">
<div id="objWrapper2"></div>
</div>
</div>
subContainer1 calls a directive that uses jqueryUI. resizable
objWrapper1 calls a directive that loads an object to the page. That object will auto resize itself to fit the containing div.
Also elsewhere on the page I have reference to another directive that loads up buttons to resize the dom elements to preset sizes.
I have 2 problems right now.
1) When I drag the corner of subContainer1 it will resize but its child dom elements do not.
2) Once I drag the corner to resize the preset buttons will change the size of the object but no longer affect the encasing dom elements
Related
I'm using gridstack with acceptWidgets to drag-and-drop widgets from a left side panel to the main panel, kind of similar to http://gridstackjs.com/demo/two.html
In my case, I want to set height, width and other item attributes to my "grid-stack-item". However, setting up those attributes won't affect when the item is dropped in the gridstack.
Here is a JSFiddle: https://jsfiddle.net/trevisan/wt7bg6s1/8/
Note that the "Drag me" element has data-gs-width="6" which I expected to make it stretch as my gridstack has 6 columns.
<div class="grid-stack-item" data-gs-width="6">
<div class="grid-stack-item-content">Drag me</div>
</div>
I have tried to call makeWidget method but then I end up having two widgets on my gridstack.
Does anyone have an idea how to figure that out?
Notice that Drag me element is not in gridstack even it has class name "grid-stack-item",
#grid element and #grid2 element has initialized by gridstack but sidebar element(Drag me element) didn't:
$('#grid1').gridstack(options);
$('#grid2').gridstack(_.defaults({
float: true
}, options));
So the data-gs-width attribute means nothing to Drag me element.
I have a div, called "wrapper", with responsive height and overflow-y auto (so scroll enabled). Inside this div are lots of other divs, called "box". So, for example, if there are 3 divs inside the wrapper and I see them all fully, nothing should happen. But if any of this divs inside the wrapper are not fully visible (on page load and page resize), an other div (called "button") should fadeIn.
I just found this post, but it doesn´t solve my problem:
stackoverflow post
HTML:
<div class="wrapper">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
<div class="button">
My Button
</div>
My fiddle:
HTML + CSS
How can I check, if all divs are fully visible inside an other div (on page load and page resize)?
#
UPDATE:
My problem is, that "viewport" doesnt work for me, because the script has also to check what happens outside the viewport (dynamically). The height of my divs is responsive and so not every time all of it is in the viewport ...
... but for me, I found an other solution. Now I check the height of my main div (my main content) and if this div is smaller than the "wrapper" div, I will fadeIn the "button" div.
You can try this my friend"
if ($(".wrapper div").css('visibility') === 'hidden') {
// ...
}
When hosting your HTML:
Right click on your wrapper and inspect element
Hover over the first div inside of the wrapper, and it should become highlighted
Check to see if that div is visible on the page
Continue the above steps for every div in your wrapper
This seems to solve a problem that's the same as, or very similar to, the problem you're describing:
zeusdeux/isInViewport
The "examples" folder includes various examples where DIVs react to whether or not they are contained within a defined viewport div.
EDIT: After reading comments on the question, this seems to be the best resource for reading up on the general problem and solutions (even though isInViewport looks very useful as well):
How to tell if a DOM element is visible in the current viewport?
I have a DOM element which contains a chart
<div id="plot1" class='plot-chart'></div>
This DIV can be nested in multiple DIVs
<div id="one" style="width:100%;height:100%;zoom:0.9;">
<div id="two">
<div id="three">
<div id="plot1" class='plot-chart'></div>
</div>
</div>
</div>
</div>
I need a way to detect any changes to size/zoom to all the ancestors(parents) of the plot DIV so I can zoom or resize it accordingly.
window.onresize
this works to detect any change to the overall browser window, but there maybe instances where DIV two or DIV three maybe changed without the window itself being manipulated. The Chart DIV is the one which I am creating and can be placed in any location, so calling a function from the outside when a resize happens is not a solution.
To simplify the question, is there any way to detect changes to any of the parent DIV's of my object so I can call a function internally?
So the short answer is "no". However, if you have any control over the cases where those container divs would be resized, then they could trigger custom events, (for instance, using jQuery) that your chart could listen to and react appropriately.
Hope this helps!
No, but you can easily use Twitter's Bootstrap to do resizing.
You can use the Grid System in BootStrap for this!
I have created a button using the <button></button> tags. I applied .resizable() jQuery and it looks fine. But when I inspect element the button, it occupies the whole div with its margin-right though the margin-right is set to 0px. I've looked in the css and overrode some parts to fix it but I didn't succeed. What's causing it?
It is very similar to this: http://jsfiddle.net/nagwW/13/
If you inspect element the button, it occupies the whole row but how could I just limit the width with respect to its real width?
If you are using jQuery UI resizable function then you have to place the button element inside the element being resized, because jQuery UI's default functionality adds a div with class name "ui-resizable-handle". The clickable resize handle that you see.
<div id="resizable" class="ui-widget-content">
<button>Resizable</button>
</div>
See this JS Fiddle that I changed from jQuery UI:
http://jsfiddle.net/truthreveller/mX7Ej/3/
I am trying to write a zoom in/out feature on a web app I am making using the jqueryUI slider.
I am having difficulty handling when my parent div shrinks too much, and cramps its child containers.
<div class="puck originator inline-block" style="width: 310.5px; left: 0px;">
<div class="conflicted inline-block originator">
<div class="right-number">I should stay</div>
<div class="left-number">I should stay</div>
<div class="middle-number">I Should disapper</div>
</div>
</div>
Here is the relevant section of code I have
http://jsfiddle.net/aQKwE/
Basically I have the parent div (class 'puck') that is being shrunk using a jquery slider. For this code I just used a text box, but same idea.
When I shrink that div, the containing divs stick around and are very garbled.
I want to be able to remove the middle child div when it becomes to cramped, leaving the left and right child divs to occupy all the space
Furthermore, if it becomes to cramped yet after that, I want to remove the right div, leaving only the left.
Finally I want to be able to remove all contents so that nothing more than the background of the parent shows.
Is there a way to do this easily, preferably through CSS? I don't want to write more javascript code to set 'display:none' on each child div, since it seems like some CSS rules should handle this.
Any ideas?
There's not really any logic built into CSS to handle something like this. You can set rules based on viewport size, but that won't help in this case.
I updated your jsfiddle with this code so you can test it and see what you think, but essentially I just added some checks in your javascript function to hide based on the width submitted.
var newwidth = $('#text').val();
$(".middle-number").show();
$(".right-number").show();
if (newwidth < 280) {
$(".middle-number").hide();
}
if (newwidth < 180) {
$(".right-number").hide();
}
$('.puck').css('width',newwidth);