I have a Div with some prestyle that includes height: 100%
If I add jQuery draggable to the div, and moves it around it sets a fixed height on the div.
How can I disable the fixed height so it still works with the height from my stylesheet?
$('.DTable').draggable({
heightStyle: '100%'
}).draggable({
containment: "window",
});
use a parent element in your css
.parent .DTable {height:100px;}
or use the !important on the hight
.DTable {height:100px!important;}
Related
I am using slim scroll for a div. I want show the slim scroll only when the content of the div reach the max-height of the div. Is there any way i can achieve this?
$('#main-table-body').slimScroll({
height: '66px',
width: '100%',
size: '10px',
alwaysVisible: true,
distance: '7%'
});
Like this I have added slim scroll to the div.Div have a static height 66px. And content are getting added to the div dynamically. When content reach the max space in the div only slim scroll need to be showing. Otherwise don't need.
I'm using "perfect scroll bar" on my web page. To hide the default browser scroll bars it adds "overflow:hidden". (http://noraesae.github.io/perfect-scrollbar/)
I'm also using Jquery Sortable in the scrollable section. (http://jqueryui.com/sortable/)
The overflow hidden needed for perfect scroll is a barrier for sortable. When I drag a div it won't scroll down as needed because overflow is hidden. ( But when you scroll with the mouse wheel it will scroll ).
When I removed overflow:hidden the default scrollbar AND the perfect scroll bar shows. (Both of them work as expected)
So, how do I visually hide the scrollbar so that the overflow is not hidden but only the scrollbar is just not visible.
You can enclose your entire page inside a div whose height and width are equal to that of the window and then apply the perfect scroll bar on that div.
HTML:
<div class="body">
<!-- page content -->
</div>
JS
$(".body").css({
"width": $(window).width() + "px",
"height": $(window).height() + "px"
});
The short answer here, is that without using overflow: hidden you're not going to be able to hide the scrollbars.
While webkit browsers do support ::-webkit-scrollbar, ::-webkit-scrollbar-button, ::-webkit-scrollbar-track, ::-webkit-scrollbar-track-piece, ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-corner and ::-webkit-resizer in your CSS, targeting other browsers will be difficult.
A possible "hack" could be wrapping your content in a div with the same size as the window, applying PerfectScrollbars to said div, and placing your jQuery Sortable content inside a child div.
You can try this
HTML
<body>
<div id="scroll">
//Your all content
</div>
</body>
CSS
body{
overflow: hidden;
}
#scroll{
position: relative;
margin: 0px auto;
padding: 0px;
width: auto;
height: auto;
}
JS
$(window).resize(function(){
$("#scroll").css({
"width": $(window).width() + "px",
"height": $(window).height() + "px"
});
});
const ps = new PerfectScrollbar('#scroll', {
wheelSpeed: 2,
wheelPropagation: true,
minScrollbarLength: 20
});
ps.update();
I am creating a website I have divs which are resizable using jquery. When I resize them only the width of the child divs get resized. You can see the site and its code here. How can the height of the child divs get resized too?
Edit
Ok I solved it by adding this code:
$(".window").resize(function()
{
$(this).children('.inner').css(
{
height: $(this).height()-2
});
$(this).children().children('.content').css(
{
height: $(this).height()-$(this).children().children('.top').height()*2
});
});
you need to change the child div height to 100%
in your case the div with class = "inner" need to have css property
div.inner
{
height = 100%
}
The following code attributes the src to .ajax-loader which is an img but not the height or width. Am I doing something wrong?
$(".ajax-loader").attr({
src: "http://test.com/loading.gif",
height: 16,
width: 16
});
Edit: This is being loaded by Contact Form 7 which is a WordPress plugin. I don't understand because the src is changing fine. However, one thing I noticed was that the height and width attributes aren't present. I am trying to add them in. Is this why they aren't showing up?
Link to website
You could use .css():
$(".ajax-loader").attr("
"src", "http://keebs.com/wp-content/themes/keebs/images/ajax-loader.gif")
.css({
height: "16px",
width: "16px"
});
You'll need to update the CSS height and width properties: $(".ajax-loader").css({height:"16px", width:"16px"});
Use .height() and .width() to set the width and height.
$(".ajax-loader").width(16).height(16);
I want to reposition an entire div and its contents up about 10-15 pixels.
How can I do this?
Note: this is slider element, so when I click a button the slider slides down. Once it is finished I want to reposition it up about 15 pixels.
$('#div_id').css({marginTop: '-=15px'});
This will alter the css for the element with the id "div_id"
To get the effect you want I recommend adding the code above to a callback function in your animation (that way the div will be moved up after the animation is complete):
$('#div_id').animate({...}, function () {
$('#div_id').css({marginTop: '-=15px'});
});
And of course you could animate the change in margin like so:
$('#div_id').animate({marginTop: '-=15px'});
Here are the docs for .css() in jQuery: http://api.jquery.com/css/
And here are the docs for .animate() in jQuery: http://api.jquery.com/animate/
$('div').css({
position: 'relative',
top: '-15px'
});
In css add this to the element:
margin-top: -15px; /*for exact positioning */
margin-top: -5%; /* for relative positioning */
you can use either one to position accordingly.
you can also do this
margin-top:-30px;
min-height:40px;
this "help" to stop the div yanking everything up a bit.