JSSOR my slider is too small in small resolution - slider
My problem is in the title.
My slider is responsive but nothing can be read correctly in small resolution.
For the moment I put it inside a test page of my website:
https://www.assistante-34.com/test.html
You will find the code inside my page.
<!-- #region Jssor Slider Begin -->
<!-- Generator: Jssor Slider Maker -->
<script src="/jssor/jssor.slider-27.5.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
jssor_1_slider_init = function() {
var jssor_1_SlideshowTransitions = [
{$Duration:1000,x:-1,y:2,$Rows:2,$Zoom:11,$Rotate:1,$SlideOut:true,$Assembly:2049,$ChessMode:{$Row:15},$Easing:{$Left:$Jease$.$InExpo,$Top:$Jease$.$InExpo,$Zoom:$Jease$.$InExpo,$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$InExpo},$Opacity:2,$Round:{$Rotate:0.85}},
{$Duration:1000,$Zoom:11,$SlideOut:true,$Easing:{$Zoom:$Jease$.$InExpo,$Opacity:$Jease$.$Linear},$Opacity:2}
];
var jssor_1_options = {
$AutoPlay: 1,
$SlideDuration: 900,
$FillMode: 1,
$SlideshowOptions: {
$Class: $JssorSlideshowRunner$,
$Transitions: jssor_1_SlideshowTransitions,
$TransitionsOrder: 1
},
$BulletNavigatorOptions: {
$Class: $JssorBulletNavigator$,
$SpacingX: 2,
$SpacingY: 2
}
};
var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);
/*#region responsive code begin*/
var MAX_WIDTH = 3000;
function ScaleSlider() {
var containerElement = jssor_1_slider.$Elmt.parentNode;
var containerWidth = containerElement.clientWidth;
if (containerWidth) {
var expectedWidth = Math.min(MAX_WIDTH || containerWidth, containerWidth);
jssor_1_slider.$ScaleWidth(expectedWidth);
}
else {
window.setTimeout(ScaleSlider, 30);
}
}
ScaleSlider();
$Jssor$.$AddEvent(window, "load", ScaleSlider);
$Jssor$.$AddEvent(window, "resize", ScaleSlider);
$Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
/*#endregion responsive code end*/
};
</script>
<link href="//fonts.googleapis.com/css?family=Roboto:100,100italic,300,300italic,regular,italic,500,500italic,700,700italic,900,900italic&subset=latin-ext,greek-ext,cyrillic-ext,greek,vietnamese,latin,cyrillic" rel="stylesheet" type="text/css" />
<style>
.jssorl-004-double-tail-spin img{animation-name:jssorl-004-double-tail-spin;animation-duration:1.6s;animation-iteration-count:infinite;animation-timing-function:linear}#keyframes jssorl-004-double-tail-spin{from{transform:rotate(0);}to{transform:rotate(360deg);}}.jssorb032{position:absolute}.jssorb032 .i{position:absolute;cursor:pointer}.jssorb032 .i .b{fill:#fff;fill-opacity:1;stroke:#000;stroke-width:1200;stroke-miterlimit:10;stroke-opacity:.25}.jssorb032 .i:hover .b{fill:#bfce00;fill-opacity:.6;stroke:#fff;stroke-opacity:.35}.jssorb032 .iav .b{fill:#000;fill-opacity:1;stroke:#fff;stroke-opacity:.35}.jssorb032 .i.idn{opacity:.3}
</style>
<div id="jssor_1" style="position:relative;margin:0 auto;top:0px;left:0px;width:1300px;height:339px;overflow:hidden;visibility:hidden;">
<!-- Loading Screen -->
<div data-u="loading" class="jssorl-004-double-tail-spin" style="position:absolute;top:0px;left:0px;width:100%;height:100%;text-align:center;background-color:rgba(0,0,0,0.7);">
<img style="margin-top:-19px;position:relative;top:50%;width:38px;height:38px;" src="/jssor/everlia2/double-tail-spin.svg" />
</div>
<div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:1300px;height:339px;overflow:hidden;">
<div>
<img data-u="image" src="/jssor/everlia2/maison-container-equitable.jpg" />
<div style="position:absolute;top:9px;left:84px;width:663px;height:102px;font-family:Roboto,sans-serif;font-size:50px;color:#ffffff;line-height:1;text-align:left;text-shadow:0px 0px 4px;background-color:rgba(255,255,255,0);">
<div>La construction équitable,</div>
<div>nouvelle génération</div>
</div>
<div style="position:absolute;top:9px;left:84px;width:637px;height:107px;font-family:Roboto,sans-serif;font-size:50px;color:#050505;line-height:1;text-align:left;background-color:rgba(255,255,255,0);">
<div>La construction équitable,</div>
<div>nouvelle génération</div>
</div>
<a href="http://www.everlia.com" style="display:block; position:absolute;top:127px;left:87px;width:84px;height:26px;max-width:84px;">
<img style="width:100%;height:100%;" border="0" src="/jssor/everlia2/bouton2.png" />
</a>
</div>
<div>
<img data-u="image" src="/jssor/everlia2/maison-container-evolutive.jpg" />
<div style="position:absolute;top:9px;left:84px;width:897px;height:114px;font-family:Roboto,sans-serif;font-size:50px;color:#ffffff;line-height:1;text-align:left;text-shadow:0px 0px 4px;background-color:rgba(255,255,255,0);">
<div>Construction évolutive,</div>
<div>create your fashion design<br />
</div>
</div>
<div style="position:absolute;top:9px;left:84px;width:870px;height:112px;font-family:Roboto,sans-serif;font-size:50px;color:#050505;line-height:1;text-align:left;background-color:rgba(255,255,255,0);">
<div>Construction évolutive,</div>create your fashion design
</div>
<a href="http://www.everlia.com" style="display:block; position:absolute;top:129px;left:88px;width:84px;height:26px;max-width:84px;">
<img style="width:100%;height:100%;" border="0" src="/jssor/everlia2/bouton2.png" />
</a>
</div>
<div>
<img data-u="image" src="/jssor/everlia2/maisoncontainerclimatique.jpg" />
<div style="position:absolute;top:9px;left:84px;width:962px;height:117px;font-family:Roboto,sans-serif;font-size:50px;color:#ffffff;line-height:1;text-align:left;text-shadow:0px 0px 4px;background-color:rgba(255,255,255,0);">
<div>Une construction climatique<br />et écologique<br />
</div>
</div>
<div style="position:absolute;top:9px;left:84px;width:943px;height:154px;font-family:Roboto,sans-serif;font-size:50px;color:#050505;line-height:1;text-align:left;background-color:rgba(255,255,255,0);">
<div>Une construction climatique</div>
<div>et écologique<br />
</div>
</div>
<a href="http://www.everlia.com" style="display:block; position:absolute;top:129px;left:89px;width:84px;height:26px;max-width:84px;">
<img style="width:100%;height:100%;" border="0" src="/jssor/everlia2/bouton2.png" />
</a>
</div>
<div>
<img data-u="image" src="/jssor/everlia2/maison-container-rapide.jpg" />
<div style="position:absolute;top:9px;left:84px;width:1093px;height:147px;font-family:Roboto,sans-serif;font-size:50px;color:#ffffff;line-height:1;text-align:left;text-shadow:0px 0px 4px;background-color:rgba(255,255,255,0);">
<div>Construction rapide, économique</div>
<div>et performante<br />
</div>
</div>
<div style="position:absolute;top:9px;left:84px;width:1090px;height:107px;font-family:Roboto,sans-serif;font-size:50px;color:#050505;line-height:1;text-align:left;background-color:rgba(255,255,255,0);">
<div>Construction rapide, économique</div>
<div>et performante<br />
</div>
<div></div>
</div>
<a href="http://www.everlia.com" style="display:block; position:absolute;top:129px;left:86px;width:84px;height:26px;max-width:84px;">
<img style="width:100%;height:100%;" border="0" src="/jssor/everlia2/bouton2.png" />
</a>
</div>
<div>
<img data-u="image" src="/jssor/everlia2/maison-container-techno.jpg" />
<div style="position:absolute;top:9px;left:84px;width:1043px;height:153px;font-family:Roboto,sans-serif;font-size:50px;color:#ffffff;line-height:1;text-align:left;text-shadow:0px 0px 4px;background-color:rgba(255,255,255,0);">
<div>Construction container haute</div>
<div>technologie</div>
</div>
<div style="position:absolute;top:9px;left:84px;width:1059px;height:155px;font-family:Roboto,sans-serif;font-size:50px;color:#050505;line-height:1;text-align:left;background-color:rgba(255,255,255,0);">
<div>Construction container haute</div>
<div>technologie</div>
<div></div>
<div></div>
</div>
<a href="http://www.everlia.com" style="display:block; position:absolute;top:129px;left:88px;width:84px;height:26px;max-width:84px;">
<img style="width:100%;height:100%;" border="0" src="/jssor/everlia2/bouton2.png" />
</a>
</div>
</div>
<!-- Bullet Navigator -->
<style>
/* swiper slide*/
.jssorb032 {position: absolute;}
.jssorb032 .i {position:absolute;cursor:pointer;fill:#fff;fill-opacity:1;}
.jssorb032 .1 .b {fill:#bfce00;fill-opacity:1;stroke:#fff;}
.jssorb032 .i:hover .b {fill: #bfce00;}
.jssorb032 .iav .b {fill:#bfce00;}
</style>
<div data-u="navigator" class="jssorb032" style="position:absolute;bottom:12px;right:12px;data-scale="0.5" data-scale-bottom="0.75">
<div data-u="prototype" class="i" style="width:15px;height:15px;">
<svg viewbox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
<circle class="b" cx="8000" cy="8000" r="5800"></circle>
</svg>
</div>
</div>
</div>
<script type="text/javascript">jssor_1_slider_init();</script>
<!-- #endregion Jssor Slider End -->
May be I do a mistake.
Thank you for your help.
Regards,
Danielle F.
May be I don't understand where I have to change "layer larger with larger font size". I made several tests and if I change something in my slider:
1/ a scroll bar appears in the bottom of the slider
2/ pictures are too large
3/ the button/link is under main text
Furthermore, bullets keeps their small size.
See in my website https://www.assistante-34.com/test.html.
I also precise to you that I'm obliged to add this in the properties of my page so my slider is in full width:
<style>
#imPageRowContent_2,
#imPageRow_2 div[id^="imCell"] {
padding: 0;
width: 100%!important;
height: 100%!important;
}
</style>
Thank your for your enlightened help. I'm not used to using code you know. Regards.
Danielle
Yes, the logic is correct, layers will scale along with the slider.
You can fix it in one of two ways,
Make the layer larger with larger font size.
Specify a class name (e.g. yourlayer) of the layer, write manual media query css code to control the display size of the layer on various resolutions.
<style>
#media screen and (min-width: 1200px) {
.yourlayer {
font-size: 50px !important;
}
}
#media screen and (min-width: 600px) {
.yourlayer {
font-size: 80px !important;
}
}
#media screen and (min-width: 300px) {
.yourlayer {
font-size: 200px !important;
}
}
</style>
Related
If Vue transition-group shows no impact, what am I doing wrong?
I'm still pretty new to Vue but I'm trying to apply a transition-group wrapper to a v-for group of divs and there is no impact at all after adding the following.
Is anyone able to see something wrong here?
This is a simplified version of the template:
<template>
<main>
<div class="notes">
<transition-group name="sort" tag="div" appear>
<div v-for="post in posts" :key="post.id">
<SinglePost :post="post" />
</div>
</transition-group>
</div>
</main>
</template>
And the styles tag:
<style scoped>
/* TRANSITION */
.sort-enter-active, .sort-leave-active {
transition: opacity .5s;
}
.sort-enter {
transform: translateY(10px);
opacity: 0;
}
.sort-move {
transition: transform .5 ease-out;
}
</style>
Navbar transparent in buefy
I am creating a landpaging and I am facing some style difficulties due to lack of practice.
I want to modify the backgroud of the navbar, so I wanted to make the background transparent so that the bottom of the page appears. How can I do this?
enter image description here
<template>
<div class="Shellhub-LP-1280">
<div class="textura Nuvem">
<b-navbar>
<template slot="brand">
<b-navbar-item tag="router-link" :to="{ path: '/' }" transparent="true">
<img
src="https://raw.githubusercontent.com/buefy/buefy/dev/static/img/buefy-logo.png"
alt="Lightweight UI components for Vue.js based on Bulma"
>
<!-- <img src="#/static/logo-inverted.png"> -->
</b-navbar-item>
</template>
...
</b-navbar>
</div>
</div>
</template>
<style>
.Shellhub-LP-1280 {
/* width: 100%; */
height: 2283px;
background-color: #333640;
}
.textura {
/* width: 100%; */
height: 771px;
}
.Nuvem {
width: 100%;
height: 755px;
object-fit: contain;
opacity: 0.9;
float: right;
background: url('../static/nuvem.png');
background-repeat: no-repeat;
background-position: right;
}
Thanks
buefy navbar API:
https://buefy.org/documentation/navbar/#api-view
Passing this props:
<b-navbar :fixed-top="true" :transparent="true" >
Vue docs - components props (recommend to read):
https://v2.vuejs.org/v2/guide/components-props.html
transparent "bug":
Open github issue:
BUG: navbar is-transparent not working .
IMPORTANT: transparent affect navbar items (Not the navbar wrapper himself).
Remove any hover or active background from the navbar items
So add simple CSS styling:
nav.navbar.is-fixed-top {
background: transparent;
}
body top padding issue
I won't find a way to remove body top padding. I added this style:
body{
padding-top: 0px!important;
}
Basic example:
const app = new Vue()
app.$mount('#app')
img.responsive_img{
width: 100%;
height: auto;
}
body{
padding-top: 0px!important;
}
/* change navbar background color */
nav.navbar.is-fixed-top {
background: transparent;
}
<link href="https://unpkg.com/buefy/dist/buefy.min.css" rel="stylesheet"/>
<div id="app">
<b-navbar class="is-link" :fixed-top="true" :transparent="true">
<template slot="brand">
<b-navbar-item tag="router-link" :to="{ path: '/' }">
<img
src="https://raw.githubusercontent.com/buefy/buefy/dev/static/img/buefy-logo.png"
alt="Lightweight UI components for Vue.js based on Bulma"
>
</b-navbar-item>
</template>
<template slot="start">
<b-navbar-item href="#">
Home
</b-navbar-item>
<b-navbar-item href="#">
Documentation
</b-navbar-item>
<b-navbar-dropdown label="Info">
<b-navbar-item href="#">
About
</b-navbar-item>
<b-navbar-item href="#">
Contact
</b-navbar-item>
</b-navbar-dropdown>
</template>
<template slot="end">
<b-navbar-item tag="div">
<div class="buttons">
<a class="button is-primary">
<strong>Sign up</strong>
</a>
<a class="button is-light">
Log in
</a>
</div>
</b-navbar-item>
</template>
</b-navbar>
<header style="min-height: 200vh;">
<img class="responsive_img" src="https://picsum.photos/2000/600"/>
</header>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/buefy/dist/buefy.min.js"></script>
Change navbar background color on scroll
only by custom code
See this codepen (I added a class on scroll):
https://codepen.io/ezra_siton/pen/jOPZgmR
Change the background color on scroll her:
nav.navbar.is-fixed-top.isActive{
transition: background-color 0.5s ease;
background: red; /* change color on scroll */
}
Change navbar links color to white (For dark hero) - add "is-link" modifier:
https://bulma.io/documentation/components/navbar/#colors
<b-navbar class="is-link" :fixed-top="true" :transparent="true" >
Remove hover/active
:transparent="true"
Remove any hover or active background from the navbar items.
How to make layout for dgrid with dijit/Toolbar?
I place dgrid table into widget, but grid overlapped my toolbar. How to fix broken layout?
Here current layout for my custom widget:
<div data-dojo-type="desktop/users/UsersWidget">
<div data-dojo-type="dijit/layout/LayoutContainer">
<div data-dojo-type="dijit/Toolbar" data-dojo-props="region: 'top'">
<!-- Here buttons, separators, etc -->
</div>
<div data-dojo-type="desktop/grids/UsersGrid" data-dojo-props="region: 'center'"></div>
</div>
</div>
Also, CSS:
html, body, .layout-container {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
index.html
<body class="Claro">
<div data-dojo-type="dijit/layout/LayoutContainer" class="layout-container" id="layoutContainer">
<div data-dojo-type="desktop/menus/MainMenu" data-dojo-props="region: 'top'"></div>
</div>
</body>
My widget initialized when user select one of main menu items and added as child of layoutContainer widget.
Bootstrap - Use of different classes depending on the screen size
<input type="submit" class="form-control"> I want to add the form-control class only when the screensize is xs. Right now form-control gets added in all screensizes. How can I make it so that form-control class only gets added when screen size is xs?
You could use two different inputs like so: <input type="submit" class="form-control hidden-lg hidden-md hidden-sm"> <input type="submit" class="hidden-xs"> This will hide the form-control when its anything but xs.
You can use #media
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
For example, to do hide sidebar id tagged div when size screen is less than 768:
#media (here is some true value...)
#media (max-width: 768px) {
#sidebar {
display: none;
}
}
jQuery is another way to do this by adding/removing the class based on the window width. See Docs.
*See working example at Full Screen, then re-size to view the change.
function checkWidth(init) {
if ($(window).width() < 480) {
$('input').addClass('form-control');
} else {
if (!init) {
$('input').removeClass('form-control');
}
}
}
$(document).ready(function() {
checkWidth(true);
$(window).resize(function() {
checkWidth(false);
});
});
body,
html {
padding-top: 40px;
padding-bottom: 40px;
}
#loginForm {
max-width: 500px;
padding: 15px;
margin: 0 auto;
background: #ddd;
}
#media (max-width: 480px) {
#loginForm {
background-color: red;
color: white;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<form id="loginForm">
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" id="email" name="email" placeholder="Email address" />
</div>
<div class="form-group">
<label for="pw">Password</label>
<input type="password" id="pw" name="pw" placeholder="Password" />
</div>
<div class="form-group">
<input type="submit">
</div>
</form>
</div>
<!-- /container -->
Responsive text alignment has been added in Bootstrap V4: https://v4-alpha.getbootstrap.com/utilities/typography/#text-alignment For left, right, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system. <p class="text-xs-center">Center aligned text on all viewport sizes.</p> Copied.
You should use both .xs and .form-control classes together as below:
.form-control.xs {/*Write your declerations.*/}
Bootply: offcanvas row hight 100%
I'm trying to use the offcanvas row to create a slide-in side menu for a mobile device.
I would like the menu to have a fixed position so that it will occupy the entire length of the screen in both small and larger screens. It's a bit tricky to play with position:fixed because the whole structure seems to fall apart when I do so. I use the following structure
<div class="container">
<div class="row row-offcanvas row-offcanvas-left">
<!-- sidebar -->
<div class="col-sm-3 col-lg-2 col-xs-6 sidebar-offcanvas" id="sidebar" role="navigation">
<!-- menu left content -->
</div>
<!-- main right col -->
<div class="col-sm-9 col-lg-10 col-xs-12" id="main">
<div class="navbar navbar-inverse navbar-main navbar-static-top collapse-group" role="navigation" id="mobile-main-nav">
<div class="collapse in no-ani">
<div class="nav-buttons">
<button type="button" class="btn btn-success icn-only visible-xs pull-left offcanvas-toggle" data-toggle="offcanvas"><i class="icon-th"></i></button>
<!--- top menu content --->
</div>
</div>
</div>
<div class="row navbar-top-padding">
<div class="col-md-12 page" id="col3">
<!--- main content --->
</div>
</div>
</div>
</div>
</div>
With the following LESS styles
#media screen and (max-width: #screen-xs-max) {
/*
* Off Canvas
* --------------------------------------------------
*/
.row-offcanvas {
position: relative;
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
transition: all .2s ease-out;
left:0;//necessary to make the animation work
}
.row-offcanvas-right .sidebar-offcanvas {
right: -87%; /* 6 columns */
}
.row-offcanvas-left .sidebar-offcanvas {
left: -87%; /* 6 columns */
}
.row-offcanvas-right.active {
right: 87%; /* 6 columns */
}
.row-offcanvas-left.active {
left: 87%; /* 6 columns */
}
.sidebar-offcanvas {
position: absolute;
top: 0;
width: 87%; /* 6 columns */
}
}