When resizing jqxWindow, window body width and height not changing - javascript

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

Related

How to set width of image which is in jQuery?

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' });

JQuery UI resizable grid, inconsistent behavior depending on grid value

I need a resizable bar that can go all the way to no bar. Depending on how what I set the grid to, sometimes I can, sometimes I can't. The values I try are multiples of the initial size of the bar.
Here are examples
Working:
https://jsfiddle.net/dg851voo/
$("#app-interactionAdjustingTheFractionBarsSTART-question-bar-5").resizable({
handles: 'n',
grid: [0, 60]
});
Not working:
https://jsfiddle.net/xmzj3x54/
$("#app-interactionAdjustingTheFractionBarsSTART-question-bar-5").resizable({
handles: 'n',
grid: [0, 20]
});
I need to be able to go all the way to no height for any multiple of the initial bar size.
I was able to get this working horizontally but not vertically. Possibly a bug with jQuery itself? Instead I came up with a slightly hacky solution that should get the job done.
Basically, if your grid size is 20 then the min height seems to be 20px - even if minHeight is set to 0. You put the resizable div in a wrap div, shift the resizable div down 20px, then you set the wrap to be overflow: hidden. Then if you want to retrieve the perceived height of the div you will have to subtract 20 from the actual height. Example below.
var gridY = 20;
$("#resizable").resizable({
handles: 'n',
grid: [0, gridY],
minHeight: gridY,
maxHeight: 120,
resize: function(e, ui){
var actualHeight = ui.size.height;
var perceivedHeight = actualHeight - gridY;
$("p").text(`${perceivedHeight}%`);
// because the height of my div is
// 100 I dont have to convert it to
// percentage, but if it was anything
// other than 100 you would have to
}
});
#resizable-wrap{
width: 100px;
height: 100px;
border: 1px solid #000;
position: relative;
overflow: hidden;
}
#resizable {
position: absolute;
top: 0;
left: 25px;
width: 50px;
height: 120px;
background-color: #F3EF7D;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="resizable-wrap">
<div id="resizable" class="resizableBox"></div>
</div>
<p>100%</p>

What are the appropriate apis/css for styling extjs combobox heights

The extjs Ext.form.ComboBox item setting height is not working using the
maxHeight: 100
minHeight: 100
maxBoxHeight: 100
minBoxHeight: 100
Even the setting of height of the div of the list is not working.
By default the height of the contained div is set to 0px. Any idea how to manipulate the height.
The html structure would be of the form as its a list of divs within a div.
The setting you are searching for is listConfig. Here you can set configuration properties that will be passed to the Ext.view.BoundList's constructor.
Ext.create('Ext.form.ComboBox', {
//[...]
listConfig: {
minWidth: 300,
maxHeight: 40
}
});
Here is a full example:
https://fiddle.sencha.com/#view/editor&fiddle/21bc
I done this before and it worked for me.
You can give cls config to your comboBox.
cls: 'textTransparent'
and you can give height in cls.
.textTransparent {
height: 25px !important; // this will give the height
font-size: 12px;
font-weight: bold;
color: white;
margin: 0 !important;
}

How to set width 100% in percentage in jquery

jQuery(document).ready(function($) {
$(".slider").slideshow({
width: 1920,
height: 710,
transition: 'SquareRandom'
});
$(".caption").fadeIn(500);
// playing with events:
$(".slider").bind("sliderChange", function (event, curSlide) {
$(curSlide).children(".caption").hide();
});
$(".slider").bind("sliderTransitionFinishes", function (event, curSlide) {
$(curSlide).children(".caption").fadeIn(500);
});
});
I am using this code for my complete page slider i want to rotate my full page with logo and mwnues and here in this code i have fixed height and width i dont want to make it fixed i want to it 100%.
Try changing your width and height options to equal the width and height of the parent window:
$(".slider").slideshow({
width: $(window).width() +"px",
height: $(window).height()+"px",
transition: 'SquareRandom'
});
Also you can do this with Pure CSS:
.slider {
width: 100%!important
}
Try
$('.slider').css('width', '');
Remove the width property give the element full width with its container

Owl carousel full screen doesn't work

I am trying to make owl carousel slider full screen for my site.
This is what I need, feel free to resize Your browser
And this is what I have,
fiddle
$(document).ready(function() {
// carousel setup
$(".owl-carousel").owlCarousel({
navigation : false,
slideSpeed : 300,
paginationSpeed : 400,
singleItem: true,
autoHeight: true,
afterMove: top_align,
});
function top_align() {
$(window).scrollTop(0);
console.log('move');
}
});
is there any solution to fix it?
Thx
When using % for heights, you have to work your way down the DOM chain to your child element for the height to apply.
Another option is to take advantage of vh units. 100vh = 100% of the window height.
Just add 100vh to .owl-item and your div item.
.owl-item, .item {
height: 100vh;
}
A vh unit is defined as:
Equal to 1% of the height of the viewport's initial containing block.
Try this:
html, body {
height: 100%;
margin: 0;
}
.owl-wrapper-outer {
height: 100% !important;
}
.owl-wrapper {
height: 100%;
}
.owl-item {
height: 100%;
}
.b-Amarelo {
height: 100%;
}
.owl-item h1 {
margin: 0;
}
Demo: Fiddle

Categories

Resources