Hi i want to select multipe areas in containment using jQuery UI draggable while usinf drag and drop. I have used containment:["#area1","#area2","#area3"], also made single class with name area and applied to all divs but still not working, even tried containment: '#area1, #area2, #area3' but still not working. Its taking only the first container only. Please suggest
you can use the ui containment options like following:
containment:'selector1, selector2,selector3...'
Related
I have list of html ids for for mat-cards that needs to be animated up or down as an whole.
I see angular group function, not sure how to use it in for loop because all these cards need to move up or down parallelly.
Any reference will be great, thanks.
Try just adding animation on single mat card first , try using ngdeep - angular way(can search if you have doubt how to use that) , if css is not applying on mat elements.
You can add a 3rd party css library :
https://css-tricks.com/css-animation-libraries/
i will prefer https://animate.style/ animate one.
this will make your life easier if your site has lot of animation requirements
How can I go about creating a form which pops up when the user clicks a button on a Jade template? I tried the following in HTML, which works:
http://www.formget.com/how-to-create-pop-up-contact-form-using-javascript/
Now to use this in my Node.js project would I need to create a separate Jade file for the form itself? That is what I tried and then I tried to display the form like this:
function div_show() {
alert("Test");
document.getElementById('abc').style.display = "block";
}
Unfortunately that does not work. What is the recommended approach for creating a pop up form in Jade? I am really confused with Jade and I can't seem to find a good tutorial for this, there are loads for HTML...
Thanks for the help!
Normally for this you would use:document.getElementById('abc').style.visibility="visible";
To hide your table use:document.getElementById('abc').style.visibility="hidden";
When using the 'style' attribute you are using plain css commands. Make sure your default div style settings have it 'hidden', if that is what you want.This display:block;visibility:hidden;' must exist in your default settings for that div style so the DOM has a clear path to what it is controlling. By itself 'display:block;' does not hide or make objects visible, it is mostly about the shape the div creates as a container for objects.
As an option you can use:
document.getElementById('abc').style.display="block";
To hide your table use:document.getElementById('abc').style.display="none";
For this you would set your div style settings to 'display:none;visibility:visible;.
In this case 'display="none"' removes the object from all display layers and could allow other objects to fill in it's space. When it is visible it will push other objects on the same z-index out of the way. If it has a higher z-index, say +100 higher, it will pop-up above the other objects on the page. The 'visibility' attribute only controls the objects visibility, it does not remove it from the display memory. It can still take up space even though it is not visible. The 'opacity' attribute does about the same thing, except it allows you to also make an object as transparent as you like.
This seems dissimilar to the accordion functionality provided by bootstrap.
To give an example, let's take the "how to format" info starting me in the face right now. I'd want it so that it only displays up to X pixels deep, and then stops until expanded. So it might look like:
and then, once expanded,
I happen to be using bootstrap. Is there a bootstrap native or other HTML solution to create this kind of experience?
Assume that the thing that I only want to show of is a single element, such as an image, rather than a series of text. This means a solution like min-height:50px and overflow:hidden won't work, as it will simply hide the entire image rather than part of it.
We can use jQuery .height() to accomplish knowing the rendered height of an element then making conditional modifications.
Documentation and examples for jQuery .height().
A combination of height and overflow in combination with the toggling of a class should work here.
http://jsfiddle.net/fm56je84/1/
The click of the arrow is bound to the following function:
function expandCollapse() {
$("#container").toggleClass("expanded");
$(".glyphicon").toggleClass("glyphicon-arrow-down"); // Flip Arrow
}
I'm looking to create a component like an Alert but with a bunch of components inside the pane. How can I create the blur effect below a pane?
Have a look at the AS docs here, there's a good example that will do what you want. Any DisplayObject can have filters applied to it
Alternatively, you can use something like TweenMax's dropShadowFilter to do it quickly and easily
I'd like to conditionally hide a tab in a TabNavigator. It seems that setting visible doesn't work properly (presumably because this is how the TabNavigator hides the tabs that aren't currently selected).
What's the right way to do this?
You can do this by making use of TabNavigator's getTabAt() method which returns the Button that makes up the visual tab. You can then set that Button's visible property. It's a little tricky to get this setup with a bindings, but it's doable.
You could also consider just disabling the tab instead, which you can do by setting enabled on the corresponding TabNavigator child (for which visible didn't work).
What do you mean by hide? If you actually mean remove, then just take your array that's bound to the data in the TabNavigator, and remove the applicable element from it.
If you want to just have them removed temporarily, create a component of your own that encapsulates the TabNavigator and has an array of removed tabs and an array of actual tabs. Then handle this as you see fit.
You might want to check out the flexlib project. They have a component called SuperTabNavigator that adds a lot of functionality to the base Flex TabNavigator, including hiding tabs (I think).
If you do have to create your own component, though, it's a bit more tricky. The thing to know is that "tabs" are actually specially styled buttons, contained within a TabBar component (the TabBar is then contained within the TabNavigator). What you'll have to do then, is subclass TabNavigator and have some property on your views (i.e. the canvases, etc. that are added to the TabNavigator) that is bound to the visible and includeInLayout properties of the TabBar buttons.
In essence, what you'll have is something like:
BindingUtils.bindProperty( tabButton, "visible", view, "someProperty" );
BindingUtils.bindProperty( tabButton, "includeInLayout", view, "someProperty" );
I don't know about TabNavigator, but in other containers, you can set the includeInLayout property to false and it will be ignored. You probably still need to combine it with visible.
var secondTab = tabNavigator.removeChildAt(0);