how to add min-height and max-height in slimScroll plugin? I applying this plugin in text area , the textarea max-height reach it need to be scroll, textarea by default min-height 120px and max-height 200px
<script>
$(".editTextarea").slimScroll({
color: '#e5e5e5',
position: 'right',
alwaysVisible: false
});
</script>
if you look at the source code you can see the default option
var defaults = {
//Add these lines in your plugin source code
minHeight:'auto',
minWidth:'auto'
width : 'auto',
height : '250px',
size : '7px',
color: '#000',
position : 'right',
distance : '1px',
start : 'top',
opacity : .4,
alwaysVisible : false,
disableFadeOut : false,
railVisible : false,
railColor : '#333',
railOpacity : .2,
railDraggable : true,
railClass : 'slimScrollRail',
barClass : 'slimScrollBar',
wrapperClass : 'slimScrollDiv',
allowPageScroll : false,
wheelStep : 20,
touchScrollStep : 200,
borderRadius: '7px',
railBorderRadius : '7px'
};
i think you cannot add min-height and min-width through the plugin there are two options
study the source code and then add extra style attribute
or/ try to use css
add the commented lines in your source line (164 and 176)
var wrapper = $(divS)
.addClass(o.wrapperClass)
.css({
position: 'relative',
overflow: 'hidden',
width: o.width,
height: o.height
/*
min-heigth:o.minHeight,
min-width:o.minWidth
*/
});
// update style for the div
me.css({
overflow: 'hidden',
width: o.width,
height: o.height,
/*
min-heigth:o.minHeight,
min-width:o.minWidth
*/
});
Your question is hard to understand but I think what you are saying is to make the textarea only scrollable when it exceeds the max-height you want to set? You can not do that by default but you can change some of the source code.
height: o.height and change to 'max-height': o.height (line: 156 and 163)
Described in more detail in this thread: https://github.com/rochal/jQuery-slimScroll/issues/70
set height: auto and set the parent min-height
<div class='parent' style='min-height:400px;'>
<div class='scroll'>
//content
</div>
</div>
<script>
$(".scroll").slimScroll({
height: 'auto'
});
</script>
Related
I am trying to add an image with a Webgl hover effect. The effect id working but, I am now trying to set a width for the image which is inside the jQuery,
new hoverEffect({
parent: document.querySelector('.ticket'),
intensity1: 0.1,
intensity2: 0.1,
angle2: Math.PI / 2,
image1: 'https://source.unsplash.com/Le7_qK9JaLU/500x500',
image2: 'https://source.unsplash.com/XAqaeyzj3NM/500x500',
displacementImage: 'https://cdn.rawgit.com/robin-dela/hover-effect/b6c6fd26/images/stripe1mul.png?raw=true'
});
.ticket{
width: 100%;
height: 100%;
position: absolute;
background: black;
}
If want to set width the image by using jquery.
just add this line
Example
$(".img1").css({ 'height': '200px', 'width': '210px' });
Here is JSFIDDLE to my problem. As you can see, divs displayed inside window have set width to 100%, and my goal si to foce this divs to automatically resize when I am manually resizing the window.
#container {
width: 100%;
display: table;
table-layout: fixed;
border: 5px solid #ccc
}
I was looking inside this element throught element inspection in chrome and I figured out, that windowBody div doesn't change its width and height and that is the problem. Does anyone know how to achieve what I want?
I have just found out, that the problem was that you cannot declare maxWidth and maxHeight to 100% in jqxWindow declaration. You need to set absolute numbers. In my case worked setting them to max width of the screen.
$('#jqxwindow').jqxWindow({
height: 200,
width: 340,
minHeight: 100,
minWidth: 200,
maxHeight: screen.height,
maxWidth: screen.width,
isModal: true,
autoOpen: true,
resizable: true
});
here is JSFIDDLE
So I have a .js file containing this:
var styles = {
wrap: {
left: 0
, top: 0
, overflow: 'hidden'
, margin: 0
, padding: 0
, height: '100%'
, width: '100%'
, zIndex: -999999
}
, img: {
position: 'absolute'
, display: 'none'
, margin: 0
, padding: 0
, border: 'none'
, width: 'auto'
, height: 'auto'
, maxHeight: 'none'
, maxWidth: 'none'
, zIndex: -999999
}
};
And the maxWidth line is being overridden by bootstrap. I want to override bootstrap by effectively making maxWidth !important, but am unsure about the correct syntax in doing so, for example:
, maxWidth: 'none !important'
Doesn't work. I can solve this problem by adding the rule as important in a stylesheet but am looking for a solution that doesn't require the use of the stylesheet.
Put the js containing those values after the bootstrap files. (Or just to be sure, put it at the end of the page)
I'm having a problem with Sly scrollbars.
I want to set up a timline in which I cann scroll by dragging with the mouse and with a scrollbar. Scrolling with the mouse works fine but I can't get the scrollbar to work and there is no proper documentation.
Also there are no errors on the console.
this is my scrollbar:
<div id="scrollbar">
<div class="handle"></div>
</div>
this is the css:
#scrollbar {
width: 100%;
height: 30px;
background: #f00;
margin-top: 10px;
line-height: 0;
}
#scrollbar .handle {
width: 50px;
height: 30px;
background: #00f;
position: absolute;
}
and the javascript call to initate the scrolling
$("#timeline").sly({
dragSource : '.frame',
horizontal : 1,
itemNav: 'basic',
smart : 1,
activateOn : 'click',
mouseDragging : 1,
touchDragging : 1,
releaseSwing : 1,
scrollBy : 1,
activatePageOn : 'click',
speed : 50,
easing : 'easeInOutBounce',
swingSpeed : 0.07,
elasticBounds : 1,
dragHandle : 1,
dynamicHandle : 1,
clickBar : 1,
scrollbar : '$("#scrollbar")',
dragHandle : 1
});
I need this for a university project, so it would be really cool if somebody has a solution to my problem.
There are two little mistakes.
Change the line
scrollbar : '$("#scrollbar")'
to
scrollBar : $("#scrollbar")
and everything should work as expected.
Im using fancybox version: 2.1.3 and what im trying to do is :
Set the width and height to 600px x 400px fixed.
If image is smaller than popup box make it center and dont resize.
For now this is my current setting :
index.html
$('.fancybox-buttons').fancybox({
minWidth: 600,
maxWidth: 600,
minHeight: 400,
maxHeight: 400,
width: 600,
height: 400,
autoScale : false,
fitToView : false,
jquery.fancybox.js
$.extend(F, {
// The current version of fancyBox
version: '2.1.3',
defaults: {
padding : 15,
margin : 20,
width : 600,
height : 400,
minWidth : 600,
minHeight : 400,
maxWidth : 600,
maxHeight : 400,
autoSize : false,
autoHeight : false,
autoWidth : false,
autoResize : false,
autoCenter : !isTouch,
fitToView : false,
aspectRatio : false,
and the result is something like this :
http://i.imgur.com/WX2ak.jpg but when i click next http://i.imgur.com/1HXhe.jpg .. you can see the size is not fixed that is the main problem ..
what i want if image is smaller the popup and image size should be like this
P/s : this is first time i try to modified fancybox maybe its a bit confusing for me.
I have "ugly way", but i do not have more time search for a suitable combination of options.
And so, adding jquery-options:
fitToView : false,
wrapCSS: 'myclass'
and add styles:
.myclass,
.myclass .fancybox-skin
{
width: 600px !important;
height: 400px !important;
text-align: center;
}
.myclass .fancybox-skin
{
line-height: 400px;
}
.myclass .fancybox-outer {
height: inherit;
width: inherit;
}
.myclass .fancybox-inner {
display: inline-block;
vertical-align: middle;
}