I have one backbone view (view 1) that renders another (view 2). View 1 also adds a click event to category links in view 1 that triggers an event in view 2 (view2.trigger("elementAdded")). The event function in view 2 checks for the width and offset left of image elements to display them in a carousel. View 1 passes the image links to view 2, which displays them in a carousel. I have trouble retrieving the width and offset left (left position on the page) of these images in view 2 event function because they have not yet been added to the DOM (using $('.image').offset().left and $('.image').width() gives me the wrong information sometimes). How do you handle situations like that when you're using Backbone to render HTML elements? How can I trigger the event once I know that the elements have been added to the DOM? How can I make sure the elements were added to the DOM so that I get the right info?
You can't reliably get the width before it's in the DOM. It may be affected by CSS, etc. that aren't applied until the element is in the DOM.
Related
I have a Vue3 app with vue-draggable and I have a list of sortable cards which possibly contain long text inside. To make dragging easier, I want to hide the text contained in the cards and only show their title when one is being dragged. This makes it easier to drop the card into the right position.
In order to achieve this, the elements which I want to hide inside of the cards while one is being dragged are given a CSS class hidden-while-dragging and the whole collection receives a class dragging while an item is being dragged. This is achieved by setting a boolean variable to the correct value upon receiving the events start and end and conditionally setting the class on the whole <draggable> element. Then I have this CSS rule:
.dragging .hidden-while-dragging {
display: none;
}
This works fine except for one case: if I drag an element and, upon dragging, the height of the parent container changes (due to the disappearing of the content inside of the cards), I am not able to drag the item: it instantly gets dropped in place, and no end event is emitted, so for example the collection keeps the class dragging.
Afterwards, I am able to drop the element once again: the issue doesn't occur this time, because no change in height occurs, and after I drop the element, everything goes back to "normal".
I made this repo in order to have a reproducible example: https://github.com/samul-1/vue-draggable-bug-demo
Here's a codepen as well: https://codepen.io/samul-11/pen/mdjKvZa try and drag the first or last element and you'll see the issue.
You can observe the height of the #app element changing when dragging an element. An interesting thing is that this only happens if dragging the first or third item in my example, not the second. So apparenly the issue is with elements at the edge of the parent.
Is this a bug with the library or is there a way around it?
I'm writing my own directive which controls a child div (widget to be exact) within a larger screen. The view for the directive contains a scroll bar, separate from the scroll bar on the larger webpage.
When a user clicks a button to calculate results I want to jump down to the results part of the view IFF results come back, but not move the screen if we don't get any results back for his query.
I'm having trouble doing this. $anchorScroll doesn't seem to work, it scrolls the entire screen down instead of just the content of my directive's child div, and in fact doesn't scroll at all if the value I want to scroll to doesn't yet show on the child div.
I've seen plenty of examples of a directive that can be added to an HTML element to handle scrolling but they function on-click without the extra programmatic control I want, deciding when to actually scroll from within a controller method. I don't know how to generalize this logic to work within my larger directive unfortunately.
How would I go about scrolling a child div programmatically without scrolling the larger div?
You could use element.scrollTop = x. You can see a basic demo here - it will automatically scroll the child div's content after 2 seconds.
The demo uses $timeout, obviously you'll need to put that logic in your $http calls success part.
Assuming you have everything else done, the relevant part is the following:
var target = angular.element(document.querySelector('#result'));
// #result is your directive's child div
target[0].scrollTop = 200;
// You'll have to calculate the exact number if it's not a fix one.
I am trying to build a layout for my Sencha Touch 2.4 app.
I want a page with :
a panel
a list of data
another panel
And i want a global scroll. I don't want to get a scroll on the list itself. The list should take all the height it needs to contains all data.
I created a fiddle for that : here it is.
To see my problem, reduce the height of your brower window. All items are not visible anymore.
If you replace flex:1 by height:'400px', you will see what i try to obtain.
I tryed to set this size of the list when the painted event is triggered, with something like this :
listeners: {
painted: function() {
this.setHeight(this.itemsCount*(this.getItemHeight()+3));
}
but getItemHeight return a size that doesn't match the real size of each element.
Is there a clean way to get what i'm trying to achieve ?
I'm having an issue with three custom controls I have created for a map application.
According to the API documentation:
The API places controls at each position by the order of an index property; controls with a lower index are placed first. For example, two custom controls at position BOTTOM_RIGHT will be laid out according to this index order, with lower index values taking precedence. By default, all custom controls are placed after placing any API default controls. You can override this behavior by setting a control's index property to be a negative value. Custom controls cannot be placed to the left of the logo or to the right of the copyrights.
Therefore, I added the three controls to the same position, giving each an index value, and expected them to fit accordingly.
When the controls are first loaded, they are on top of one another, instead of fitting to match their respective index values.
However, when I perform an action such as hovering over another default control (such as the zoom control), the custom controls appear correctly.
Here is what I have tried to fix the problem:
Setting the position of the controls in CSS (does not work since control positioning can only be custom if you wrap the controls)
Delaying the time for each control button to be added
Tried triggering mouseover actions of other controls since this manually shows the controls in the correct position
Any help or insight in appreciated. I know I mentioned wrapping the controls allows for custom position (according to here), but is there any other way I can get this to work without doing so?
My apologies, I tried uploading screenshots but apparently I am not popular enough. Here is a JsFiddle.
The JsFiddle shows how I am adding these controls only when the user has selected a specific input:
$('#toggle').on('click', function(){
if ($(this).is(':checked')){
$(pointSelDiv).css('display', 'block');
$(polySelDiv).css('display', 'block');
$(circSelDiv).css('display', 'block');
}else{
$(pointSelDiv).css('display', 'none');
$(polySelDiv).css('display', 'none');
$(circSelDiv).css('display', 'none');
}
});
Thanks again!
This is happening because Google Maps API needs to know the width and the height of your control elements to know where to position them - when the map is rendered. By initially setting them to display: none, you are hiding it from the actual layout of your page as well - it's as if the element's not there. Use visibility: hidden instead - setting the visibility to hidden will still hide the element on the screen, but it is still present in the layout. For reference: http://www.w3schools.com/css/css_display_visibility.asp
Also, I suggest rather than individually setting these CSS attributes to your custom control elements, add a class (you can do this via jquery's .addClass()) to these elements and toggle just by targeting the class. I've updated your jsfiddle here.
I have a javascript heavy app which has widgets like autocomplete dropdowns and tabs and so forth. Sometimes when dropdowns appear and disappear, or when you switch between tabs, it changes the height of the document. This can cause annoyances if the scrollbar appears and disappears rapidly, because it shifts the page. I would like to detect when a page changes its height, so I can fix the height to the maximum so far, so that if the scrollbar appears it won't disappear only a second later. Any suggestions?
Update: onresize won't work because that's for changes in the size of the viewport/window - I want changes in the length of the document. I hadn't known about the watch function, looks like it will work at least for FF, but IE doesn't support it.
I belive this question has already been answered on stackoverflow here:
Detect Document Height Change
Basically you have to store the current document height and keep checking for a change via a timeoutcall
The element to watch here is document.body.clientHeight (or in jquery $(document).height() )
I think you can trap "onresize" events
here is a link to the w3schools.com description
You can user resize event to trap the change of the size of window using jquery as follows:
$(window).resize(function(){
// your code to check sizes and take action
}
);
Alternately you can track the change in document (not tested)
$(document).resize(function(){
// your code to check sizes and take action
}
);
One idea would be to use the watch() method on the clientHeight property:
document.body.watch("clientHeight", function(property, oldHeight, newHeight) {
// what you want to do when the height changes
});
The function you specify will get executed whenever the specified property changes. At any point you can use the unwatch() method to get it to stop.