When using the Bootstrap collapse plugin, I notice in the Elements panel that there is an inline height property of the element animated. I would like to remove this (from the actual core Collapse.js / Transition.js plugin) as I'm using pure CSS3 animations/transitions.
the reason is two fold : a/ I don't need it, b/ it's conflicting with my own animation, the element firstly expands to the height calculated by the script, and then after a 15ms pause folds down to height: 100% (as I wish)
I emphasize: I don't want to override it, I want to remove it completely (please no answers with overriding)
Height is being set by anything that looks like:
this.$element[dimension](0)...
You'll need to hunt those down in both .hide and .show plugin methods.
Related
I have some elements whose properties are altered via the jQuery animate() method like that:
$('#mySidenav').animate({"width": '-=190'});
$('#main_address').animate({"padding-left": '-=190'});
$('.oberflaeche').animate({'margin-left':'-=190'});
Additionally I have another absolute positioned element within the .oberflaeche element which needs to be extended after the content moves to the left due to the operations named above in order to still properly fit into its container.
To do so I use the css property clip-path which works fine:
clip-path: inset(0px var(--clipSize) 0px 0px);
The only problem that occurs is that I have to alter the clip-path property dynamically as the window sizes are differing. Currently I am doing that via class-based css as I am not sure if it is possible with jQuery. Because of the different approaches (jQuery vs. css) the two effects are not being displayed simultaneously - the css clip-path effect is incongruous. I already tried to cover that problem using the transition-delay property as well as a transition-timing-function but I had no luck.
So the question is: Is it possible to animate the clip-path property like it can be done with the css properties of width or padding to achieve a consistent effect? I am looking for something like
$('#dynamic_element').animate({'clip-path': 'inset(0px '+variable_pixel+' 0px 0px)'});
which I can call where I also call the other animations.
Any help is highly appreciated. Thanks in advance!
Based on georg's proposal (see: https://stackoverflow.com/a/16857838/7323120) I was able to figure it out myself. Using the animate method you can iterate over custom value ranges and adjust the respective css in the method's callback like:
$({step: 0}).animate({step: 80}, {
step: function(val) {
// val equals the current step
$('#target').css('clip-path', "inset(0px "+val+"px 0px 0px)")
}
});
I'm looking for a way to increase the width of the container so that the text fits, instead of having it be truncated with ...
I can't seem to get the container css attributes working e.g. containerCss. I get the error Uncaught Error: No select2/compat/containerCss.
I'm using select2 via npm
Right click and inspect the html text input and look at its class name. use chrome inpector and experement setting the width css attribute on those generated elements. Find the corresponding css class. Also look at the class names of its container element. Set the css of those elements to find a desired result. Then on the html page with the jquery selector library use the relevant class names and set the width. Alternitevly read the docs on jquery select library on css styling.
I have a weird problem and i cant find a solution no matter what i tried.
I have a simple menu that toggles few divs (slide up/down), like this:
<div class="navigation">
<ul class="left">
<li>lorem1</li>
<li>lorem2</li>
<li>lorem3</li>
</ul>
</div>
and a few divs that are being toggled.Pretty simple but there is a lot of code, so i wont paste it here.
Script that makes it work is:
$('.navigation a').click(function() {
var $requested = $(this.getAttribute('href'));
$('.top-drawer').not($requested).slideUp('slow');
$requested.slideToggle('slow')
});
Once the user clicks on the link, the div slides down more than it should, flickers and then it becomes the real height (the height is should be).
Here is a Fiddle. Please be sure to have the "Result" Window at at least 1000+ px wide otherwise it wont work (the error wont be shown).
See my suggestion on this JSFIDDLE
Here an explanation of the changes in there:
The Problem
With all those floating elements inside each .top-drawer jQuery has a lot of issues calculating the height of the div because the elements will move around while sliding up and down.
Suggestion
Switching to inline-block instead. But for that to work with your CSS, particularly with the padding on each .top-drawer, you need to use box-sizing: border-box; on anything that is using padding, inline-block and width with %. If curious you can read about this HERE.
New problem
If you go the route of inline-block (best practice now). You will need to use jQuery 1.8.xx or higher. I noticed in your fiddle you use 1.7.2, which has a bug with border-box that was fixed in versions after that.
Try to understand the code you are using.
This is the way I think jQuery's slideUp(), and slideDown() works; mainly the algorithm changes the height of the element, and display after the height is equal to the height of the element or at "0".
So when you will have your element's position set to relative you will see what you're calling "flickers", specially when you have multiple element at the same position. You will also see these "flickers" when you use fadeIn(), fadeOut() etc, because the display of the element is not instantly set to "none" or anything visible in these cases, but after the animation completes.
Solution:
Set the element's position to absolute. That should solve your issue;
example.
I am working on a site where the html cannot be modified, and need to override some inline onclick code for colorbox modal content.
Such as:
<span data-colorbox-theme="white" data-colorbox-options="{"href":"#joinTheClub-moreDetails", "inline":true, "iframe":false, "width":"430", "height":"340", "scrolling":false}" class="colorboxWindow more-details cboxElement">More details</span>
Each link across the site has different widths and heights which I would like to override in the head (which I do have access to) for a standard percentage width and height (different values for both desktop and mobile views).
My JQuery is fairly rudimentary and google hasn't yet yielded any definitive answers.
How should this be done?
after adding or changing any css proprety just add !important to it it will NOT be ovrrided by jquery or any exemple :
.someclass{
width:150px !important;
}
this will set the width of any object with the class someclass to 150 and prevent any other style to ovrride it(jquery styles,browser styles,another predefined styles in the site.....).
hope it helps
I have one popup subMenu using dijit.menu that can be very long due to dynamic input. I want to set a max Height and overflow-y:auto to dijit.menu. So it will has a scroll bar when becoming too long.
var subMenu = new dijit.Menu({ parentMenu: this.mainMenu});
//....add a lots of submenu items here
this.mainMenu.addChild(new dijit.PopupMenuItem({label: "some label", popup: subMenu}));
The problem is the top level of dijit.menu is a <table>, and max-height won't work on it. Also, unlike dijit.form.select, the dijit.menu does not take maxHeight as a parameter.
I noticed there is a ticket describing this problem on dojo long time ago and marked as fixed. However, I still have no idea how to set maxheight on the menu.(The fix seems no longer exsits too)
Ticket #9086 (Allow CSS height on dijit.Menu)
Any hint on how I might able to do this would be apperciated.
As you noted, there is an issue with the way that Dojo handles the DOM creation of the dijit.Menu widget. The problem isn't that maxHeight isn't accepted as a parameter (as you can just pass it into the widget's style property as part of an Object or String), rather how the styling is applied.
You mentioned that the "top level" of a Menu widget is the <table> node. However, this is not the whole truth. That node is what Dojo presents to the client (you) as the "top level" domNode, but the Menu actually wrapped in another <div> that you cannot access directly from the widget, and it is this node that your styles should be applied to.
This <div> has the attribute class="dijitPopup dijitMenuPopup", but I doubt you want to set your styles to Dijit popups/menus globally. To avoid this, you can set the baseClass property on your widget as follows:
new Menu({
baseClass: "myCustomMenu",
targetNodeIds: ["myTarget"]
});
This will change that top level <div> attribute to read class="dijitPopup myCustomMenuPopup". This gives you a class that you can modify with the CSS styles you need to accomplish your goal:
.myCustomMenuPopup {
max-height: 200px;
overflow-y: auto;
overflow-x: hidden;
}
Here is a working example in jsfiddle.