after experimenting with jssor for a week or so, i did get the results i wanted on both desktop and mobile.
i used the code from
JSSOR Full height full screen slider
i changed this line (original code)
if (originalWidth / windowWidth > originalHeight / windowHeight) {
to (modified code)
if (originalWidth / windowWidth < originalHeight / windowHeight) {
the only question i have now is, can the slider1_container height and width be swapped when it on the mobile in vertical mode? i am asking this because when in horizontal mode the app looks great. but in vertical mode, it only fills the height in the original full height code and fills the width in the modified code. in vertical mode, original code have overflows and modified code is too small.
i hope you get what i mean.
Related
Can someone help me in understanding how to calculate the Height and Width of a Powershell Forms. For Example I Created a blank Powershell form of Height 500 and Width 700 and now If want to place a Text box a little below from the top of the form what will be the height and width that I need to enter? and If I want to place a Button at middle of the Form? what will be the height and width that I need to enter? I am struggling with this calculation.
You should get the screen size and use the ratio to set position. The ratio is useful for different screen size.
I have an UIimage which needs to fall down with tween animation. So the beginning point should be out of the screen. For Screen adaptation reasons, this image must keep it's anchors on top center, but at the same time, the image it self also needs to dock it's bottom at the top of the screen too(Users should not see any part of this image before the animation begin.).If I simply change it's PosY, it won't adapt to all resolutions.
So how to do that?
Try to tween RectTransform.anchoredPosition. Outside Y value will be rectTransform.sizeDeltra.y / 2, and inside will be -rectTransform.sizeDeltra.y / 2 + offset from top screen edge. If you need to match screen bottom and Image bottom, it will be rectTransform.sizeDeltra.y / 2 - Screen.height; If you need to match screen top and image top, it will be -rectTransform.sizeDeltra.y / 2; If you need it to be in the center, it would be -Screen.height / 2.
I have a GtkTextView, and I would like to be able to set a maximum line width for the text. If the width of the TextView exceeds the maximum text width, the extra space should be filled with padding on the left and right on the text. Although Gtk supports a min-width CSS property, there appears to be no max-width property. Instead I tried to dynamically set the margins whenever the TextView is resized by connecting size-allocate to
def on_textview_size_allocate(textview, allocation):
width = allocation.width
if width > max_width:
textview.set_left_margin((width - max_width) / 2)
textview.set_right_margin((width - max_width) / 2)
else:
textview.set_left_margin(0)
textview.set_right_margin(0)
This produces the desired text line width for any given TextView width, but leads to strange behavior when resizing the window. Resizing the window to a smaller width happens with a slow delay. Attempting to maximize the window makes the window jump to a width much larger than the screen. size-allocate may not be the correct signal to connect to, but I have not been able to find any other way to dynamically set margins when the TextView is resized.
What is the correct way to achieve a maximum text line width?
I came up with a solution. I created a custom container by inheriting from GtkBin, overrode do_size_allocate, and added my GtkTextView to that container:
class MyContainer(Gtk.Bin):
max_width = 500
def do_size_allocate(self, allocation):
# if container width exceeds max width
if allocation.width > self.max_width:
# calculate extra space
extra_space = allocation.width - self.max_width
# subtract extra space from allocation width
allocation.width -= extra_space
# move allocation to the right so that it is centered
allocation.x += extra_space / 2
# run GtkBin's normal do_size_allocate
Gtk.Bin.do_size_allocate(self, allocation)
I need to adjust the width and height to the width and height of my div which is width:250px height 170:px. I am using jssor slider and it keep giving me a full stretched width img Please kindly help me with this. this is the code below.
jssor_slider1_starter('slider1_container');
Please use $FillMode option.
var options = {
...
$FillMode: 2, //[Optional] The way to fill image in slide, 0 stretch, 1 contain (keep aspect ratio and put all inside slide), 2 cover (keep aspect ratio and cover whole slide), 4 actual size, 5 contain for large image, actual size for small image, default value is 0
...
};
Reference: http://www.jssor.com/development/reference-options.html
I used jssor slider v 17.0.
Slider height and width are set based on window size but not fixed sizes.
Please remove responsive code.
Look for the following code and remove it,
//responsive code begin
function ScaleSlider(...
...
//responsive code end