I am using Swiper by idangero.us on my jQueryMobile page.
My HTML-file consists of two "pages". One of them is supposed to have an image gallery. It works fine to view the images, and the slider is functional, without jQueryMobile. But as soon as I use jQueryMobile, the images are no longer showing up.
The most similar problem I've found is this: Swiper not working in Jquery Mobile
but it didn't help me find a solution. Can someone explain to me why this doesn't work?
This is my HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/idangerous.swiper.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<style>
/* Demo Styles */
html {
height: 100%;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 1.5;
position: relative;
height: 100%;
}
.swiper-container {
width: 100%;
height: 100%;
color: #fff;
text-align: center;
}
.swiper-slide .title {
font-style: italic;
font-size: 42px;
margin-top: 80px;
margin-bottom: 0;
line-height: 45px;
}
.pagination {
position: absolute;
z-index: 20;
left: 10px;
bottom: 10px;
}
.swiper-pagination-switch {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 8px;
background: #222;
margin-right: 5px;
opacity: 0.8;
border: 1px solid #fff;
cursor: pointer;
}
.swiper-visible-switch {
background: #aaa;
}
.swiper-active-switch {
background: #fff;
}
</style>
</head>
<body>
<!-- Start page-->
<div data-role="page" id="page_start">
<article data-role="content">
<ul data-role="listview" data-inset="true" >
<li>
<a href="#page2">
<h1>Cabmontering</h1>
<img src="favicon.ico" alt="Min Pin" />
<p></p>
</a>
</li>
</ul>
</article>
</div> <!--End of startpage-->
<!--Page 2-->
<div data-role="page" id="page2">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="bilder/cabmontering/3_2.png" width="100%"/>
</div>
<div class="swiper-slide">
<img src="bilder/cabmontering/4_2.png" width="100%"/>
</div>
<div class="swiper-slide">
<img src="bilder/cabmontering/6_2.png" width="100%"/>
</div>
<div class="swiper-slide">
<img src="bilder/cabmontering/1.png" width="100%"/>
</div>
<div class="swiper-slide">
<img src="bilder/cabmontering/2.png" width="100%"/>
</div>
</div>
<div class="pagination"></div>
</div> <!--End of "swiper_wrapper"-->
</div> <!--End of page 2-->
<script src="js/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script src="js/idangerous.swiper-2.1.min.js"></script>
<script>
var mySwiper = new Swiper('.swiper-container',{
pagination: '.pagination',
paginationClickable: true,
loop: true
})
</script>
</body>
</html>
The plugin isn't being initialized at all, you need to wrap swiper code in pageshow and only one time .one(). Second of all, place JS libraries in head.
<head>
<script src="js/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script src="js/idangerous.swiper-2.1.min.js"></script>
<script>
$(document).one("pageshow", "#page2", function () {
var mySwiper = new Swiper('.swiper-container',{
pagination: '.pagination',
paginationClickable: true,
loop: true
});
});
</script>
</head>
Related
I have made this site(http://koulick-project.surge.sh/)as a project but cannot make it fully responsive. How to make it responsive, so that it looks good on mobile/tablets. So far, I could make the headings and text responsive. But cannot make the circles for the clock responsive.
Here is my Html file-
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="Pragmatic Mates s.r.o. - http://pragmaticmates.com">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://fonts.googleapis.com/css?family=Raleway:400,700" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="demo/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="demo/css/coming_soon.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==" crossorigin="anonymous" />
<title>JWOC Coming Soon</title>
</head>
<body>
<div class="centerdiv">
<a href="https://www.facebook.com/jwoc2k20" target="_blank">
<i class="fa fa-facebook fa-3x"></i>
</a>
<a href="https://www.linkedin.com/company/jwoc/" target="_blank">
<i class="fa fa-linkedin fa-3x"></i>
</a>
</div>
<div class="section">
<div class="section">
<div id="particles-js">
<break>
<h1 style="color:white"><b>JWOC</b></h1>
<h1 style="color:white"><b> COMMENCING SOON</b></h1>
<hr>
</div>
</div>
</div>
<div class="countdown countdown-container container">
<div class="clock row">
<div class="clock-item clock-days countdown-time-value col-xs-3 col sm-3">
<div class="wrap">
<div class="inner">
<div id="canvas-days" class="clock-canvas"></div>
<div class="text">
<p class="val">0</p>
<p class="type-days type-time">DAYS</p>
</div><!-- /.text -->
</div><!-- /.inner -->
</div><!-- /.wrap -->
</div><!-- /.clock-item -->
<div class="clock-item clock-hours countdown-time-value col-xs-3 col sm-3 ">
<div class="wrap">
<div class="inner">
<div id="canvas-hours" class="clock-canvas"></div>
<div class="text">
<p class="val">0</p>
<p class="type-hours type-time">HOURS</p>
</div><!-- /.text -->
</div><!-- /.inner -->
</div><!-- /.wrap -->
</div><!-- /.clock-item -->
<div class="clock-item clock-minutes countdown-time-value col-xs-3 col sm-3 ">
<div class="wrap">
<div class="inner">
<div id="canvas-minutes" class="clock-canvas"></div>
<div class="text">
<p class="val">0</p>
<p class="type-minutes type-time">MINUTES</p>
</div><!-- /.text -->
</div><!-- /.inner -->
</div><!-- /.wrap -->
</div><!-- /.clock-item -->
<div class="clock-item clock-seconds countdown-time-value col-xs-3 col sm-3 ">
<div class="wrap">
<div class="inner">
<div id="canvas-seconds" class="clock-canvas"></div>
<div class="text">
<p class="val">0</p>
<p class="type-seconds type-time">SECONDS</p>
</div><!-- /.text -->
</div><!-- /.inner -->
</div><!-- /.wrap -->
</div><!-- /.clock-item -->
</div><!-- /.clock -->
<hr>
</div><!-- /.countdown-wrapper -->
<!-- footer section -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="demo/js/kinetic.js"></script>
<script type="text/javascript" src="jquery.final-countdown.js"></script>
<script type="text/javascript" src="particles.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$('document').ready(function() {
'use strict';
$('.countdown').final_countdown({
'start': 2062139200,
'end': 2088461320,
'now': 2087461319
});
});
</script>
</body>
</html>
Here is my Css file-
*{
margin: 0;
padding: 0;
}
html, body {
background-repeat:no-repeat;
height: 100vh;
overflow:hidden;
}
html {
background-image: url('../img/open.jpeg');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
body {
background-color: rgba(44,62,80 , 0.6 );
background-image: url('../img/open1.jpg');
background-position: center;
background-repeat: repeat;
font-family: 'Raleway', 'Arial', sans-serif;
margin: 0;
padding: 0;
height: 100vh;
}
#particles-js
{
z-index: 99999;
height: 500%;
display: flex;
justify-content: center;
align-items: left;
}
.particles-js-canvas-el{
position: absolute;
width: 100%;
height: 100%;
z-index: 99999;
}
h1{
font-size: 70px;
letter-spacing: 15px;
text-align: center;
}
a{
height: 100px;
width: 100px;
border-radius: 50px;
text-align: center;
margin: 10px;
line-height: 110px;
}
a i{
transition: all 0.3s linear;
}
a:hover i{
transform: scale(1.4);
}
.fa-linkedin{
color: #0097e6;
}
.fa-facebook{
color: #3b5998;
}
/*
.countdown-container {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
}
*/
.clock-item .inner {
height: 0px;
padding-bottom: 100%;
position: relative;
width: 100%;
}
.clock-canvas {
background-color: rgba(255, 255, 255, .1);
border-radius: 50%;
height: 0px;
padding-bottom: 100%;
}
.text {
color: #fff;
font-size: 30px;
font-weight: bold;
margin-top: -50px;
position: absolute;
top: 50%;
text-align: center;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
width: 100%;
}
.text .val {
font-size: 50px;
}
.text .type-time {
font-size: 20px;
}
#media only screen and (min-width: 393px) and (max-width: 767px) {
h1{
font-size: 40px;
letter-spacing: 10px;
}
.text {
font-size: 15px;
}
.text .val {
font-size: 15px;
}
.text .type-time {
font-size: 15px;
}
.clock-item .inner {
width: 150%;
}
}
Can anyone please help.
Try using a column break to split up the timer into multiple rows on smaller screen sizes.
https://getbootstrap.com/docs/4.0/layout/grid/#column-breaks
Tablet+
D H M S
Phone
D H
M S
In my project, I have a web homepage.
I want to set a more link to the news page. But the more <a> link is exceeding the lm_more `.
The picture is like:
[![enter image description here][1]][1]
The code is like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Web home page</title>
<link rel="stylesheet" href="css/format.css" media="screen">
<link rel="stylesheet" href="css/owl.carousel.css">
<link rel="stylesheet" href="css/owl.theme.css">
<link rel="stylesheet" href="css/main.css" media="screen">
<link href="./css/video-js.css" rel="stylesheet">
<link rel="stylesheet" href="swiper-4.5.0/dist/css/swiper.min.css">
<script src="js/jquery_min.js"></script>
<script src="js/jquery.svg.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="./js/video.js"></script>
<script src="swiper-4.5.0/dist/js/swiper.min.js"></script>
</head>
<script>
$(document).ready(function() {
var mySwiper = new Swiper ('.swiper-container', {
direction: 'horizontal',
loop: true,
history: 'love',
roundLengths : true,
parallax : true,
pagination: {
el: '.swiper-pagination',
clickable :true,
},
autoplay: {
stopOnLastSlide: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
paginationClickable :true,
})
})
</script>
<body style="background:url(./image/taiyi.jpg); height:100%;width:100%;background-repeat:no-repeat">
<style>
body{
margin:0;
}
.content{
margin-left:auto;
padding: 20px;
margin-right:auto;
width: 1400px;
height:850px;
background-color:white;
box-sizing: content-box;
}
.content .uprow{
width: 1400px;
height: 400px;
text-align:center;
border: 1px solid #e5e5e5;
}
.content .uprow .upright{
width: 600px;
height: 400px;
float: right;
background-color: white;
border: 1px solid #999;
}
.lm_title_con{
width: 600px;
height: 50px;
padding: 10px 20px;
}
.lm_title_con .lm_title{
width: 85px;
line-height: 45px;
height: 30px;
float: left;
line-height: 30px;
color: #3E6BC0;
font-size: 16px;
text-align: center;
border-bottom: 1px solid #3E6BC0;
}
.lm_more{
float: right;
height: 30px;
width: 30px;
line-height: 30px;
background-color: blue;
}
.lm_more a{
text-align: center;
color: red;
font-size: 13px;
text-decoration: none;
}
.swiper-container{
width: 595px;
height: 340px;
margin-top: 10px;
background-color: blue;
}
</style>
<div class="content">
<div class="uprow">
<div class="upright">
<div class="lm_title_con">
<div class="lm_title">
news
</div>
<div class="lm_more">
more
</div>
</div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-color:red"><a href='' ><img src='image/news/20190819-1png' style="width:595px;height:340px" alt=''></a></div>
<div class="swiper-slide" style="background-color:blue"><a href='../newsdetail/news20190729.html' ><img src='image/news/20190729-1jpg' style="width:595px;height:340px" alt=''></a></div>
<div class="swiper-slide" style="background-color:green"><a href='../newsdetail/news20190530.html' ><img src='image/news/20190530-1png' style="width:595px;height:340px" alt=''></a></div>
<div class="swiper-slide" style="background-color:yellow"><a href='../newsdetail/news20190529.html' ><img src='image/news/20190529-1png' style="width:595px;height:340px" alt=''></a></div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
</div>
</div>
</body>
</html>
But when I Comment the content div, It is OK
<!--<div class="content">-->
<div class="uprow">
</div>
<!--</div>-->
The result picture is like:
But the other <div> position is changed, and the homepage size is messed up! Who can help me?
Please add "box-sizing" property in your ".lm_title_con" class selector.
Please try below CSS.
.lm_title_con {
width: 600px;
height: 50px;
padding: 10px 20px;
box-sizing: border-box; /* new added */
}
My ultimate goal is to be able to fit my grid in 2 columns perfectly and also so it fits entire screen on my mobile devices. Right now, I still have to scroll down a bit, however that is not what I wanted. I want my screen to be not scrollable but have images/screen fit in perfectly the way I desire. Getting rid of spaces in between 2 columns perhaps. Right now my screen looks bit off and needs a little scrolling. The 2 pictures on the bottom doesn't fit and requires scrolling like shown on the picture.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="../dist/css/swiper.min.css">
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='styles/swiper.min.css') }}">
<!-- Demo styles -->
<style>
html,
body {
position: relative;
height: 100%;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
top: 0;
left: 0;
top: 0;
bottom: 0;
right: 0;
overflow-y: auto;
height: 100%;
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
body {
margin: 0;
padding: 0;
background-color: white;
font: 10px/13px 'Lucida Sans', sans-serif;
}
.wrap {
overflow: hidden;
margin: 10px;
}
.box {
float: center;
position: relative;
width: 200%;
padding-bottom: 100%;
}
.boxInner {
position: absolute;
left: 50px;
right: -5px;
top: -10px;
bottom: 10px;
overflow: hidden;
}
.fixed {
position: absolute;
left: 30px;
right: 10px;
top: -10px;
bottom: 10px;
overflow: hidden;
}
.boxInner img {
width: 79%;
height: 75%
}
.boxInner img.img2 {
width: 100%;
height: 50%
}
body.no-touch .boxInner:hover .titleBox,
body.touch .boxInner.touchFocus .titleBox {
margin-bottom: 100;
}
#media only screen and (max-width: 480px) {
/* Smartphone view: 1 tile */
.topnav a:not(:first-child) {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
.box {
width: 50%;
padding-bottom: 30%;
}
}
.topnav {
overflow: hidden;
background-color: #66CDAA;
}
.topnav a {
float: center;
display: block;
color: #f2f2f2;
text-align: center;
padding: 10px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #98FB98;
color: white;
}
.topnav .icon {
display: none;
}
.header1 {
margin: auto;
float: center;
padding: 15px;
font-size: 20px;
}
</style>
</head>
<body class="no-touch">
<!-- Swiper -->
<div class="topnav" id="myTopnav">
Let's Get To Know You!
</div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<!-- Define all of the tiles: -->
<div class="header1">What's your skin color?</div><br><br>
<div class="box">
<div class="boxInner">
<img class='img1' src="http://i.imgur.com/U8pJVY0.png" />
</div>
</div>
<div class="box">
<div class="boxInner">
<img class='img1' src="http://i.imgur.com/Kz06qEO.png" />
</div>
</div>
<div class="box">
<div class="boxInner">
<img class='img1' src="http://i.imgur.com/43tH7Td.png" />
</div>
</div>
<div class="box">
<div class="boxInner">
<img class='img1' src="http://i.imgur.com/3uZKpV2.png" />
</div>
</div>
<div class="box">
<div class="boxInner">
<img class='img1' src="http://i.imgur.com/SF3vYC9.png" />
</div>
</div>
<div class="box">
<div class="boxInner">
<img class='img1' src="http://i.imgur.com/8hujzfl.png" />
</div>
</div>
<div class="box">
<div class="boxInner">
<img class='img1' src="http://i.imgur.com/cxvELu2.png" />
</div>
</div>
<div class="box">
<div class="boxInner">
<img class='img1' src="http://i.imgur.com/zLD3Nv1.png" />
</div>
</div>
<div class="box">
<div class="boxInner">
<img class='img1' src="http://i.imgur.com/baYebAV.png" />
</div>
</div>
<div class="box">
<div class="boxInner">
<img class='img1' src="http://i.imgur.com/iLd0ukK.png" />
</div>
</div>
</div>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<!-- Swiper JS -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="../dist/js/swiper.min.js"></script>
<script type="text/javascript" src="{{ url_for('static', filename='swiper.min.js') }}"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
spaceBetween: 30
});
</script>
<script type="text/javascript">
$(function() {
// See if this is a touch device
if ('ontouchstart' in window) {
// Set the correct body class
$('body').removeClass('no-touch').addClass('touch');
// Add the touch toggle to show text
$('div.boxInner img').click(function() {
$(this).closest('.boxInner').toggleClass('touchFocus');
});
}
});
</script>
</body>
</html>
It's because your "swiper container" is height:100%, but starts 33px down because of the element above it. You could try calc() css if your browser target range allows it in order to make it 100% height minus the height of the element above. Something like:
height: calc(100% - 33px);
i cant get the image cover my whole jumbotron with text over it. Here is my html and CSS. Im trying to get the whole image; "img/newyork.jpg" cover my jumbotron. I know there is an easy way but i cant figure what im missing. Please help.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/stylesheet.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<title> Marketing Plus </title>
</head>
<body>
<div class="header">
<div class="container">
<ul class="nav">
<div class="logo">
<img src="img/logo_mplus.png" alt="logo for marketing plus">
</div>
<li>Contact</li>
<li>Industries</li>
<li>Company</li>
<li>Home</li>
</ul>
</div>
</div>
<div class="jumbotron">
<div class="container">
<div class="main">
<img src="img/newyork.jpg" class="img-responsive" />
<div class="container" id="content">
<div class="row">
Marketing Plus
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
</html>
/*CSS starts here*/
.nav {
list-style-type: none;
margin: 0;
padding: 20px 0;
}
.nav li {
color: 00000;
display: inline;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 12px;
margin-right: 25px;
text-transform: uppercase;
}
.logo img {
margin-left:120px;
margin-right:auto;
margin-top:0px;
border:0px ridge #E80000;
background-image: url("img/logo_mplus.png");
background-size:199px 101px;
width:199px;
height:101px;
background-repeat:no-repeat;
background-position:center;
float: left;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: right;
padding: 10px;
}
.container {
max-width: 940px;
margin: 0 auto;
padding: 0 10px;
}
.img-responsive {
background: url(img/newyork.jpg);
background-size: cover;
}
this is for sure a noobish html question, because i am new at this stuff.
Anyways lets get to it:
1st, check the fiddle:
http://jsfiddle.net/d6767uur/
<!DOCTYPE html>
<html>
<head>
<link type="text/css" href="frontpage.css" rel="stylesheet">
</head>
<body>
<div class="navBar">
<div class="greyline"> </div>
<div class="menu"> smoothies </div>
<div class="greyline"> </div>
<div class="menu"> milkshakes </div>
<div class="greyline"> </div>
<div class="menu"> juicy facts </div>
<div class="greyline"> </div>
<div class="menu"> about us </div>
<div class="greyline"> </div>
<div class="stuffwithsmall"> © All rights reserved.. </div>
</div>
<div class="frontWrapper">
<h1> HELLO </h1>
<div style="margin-left: 750px; margin-top: -435px;"> <img src="frontfruit.jpg"> </div>
</div>
</body>
</html>
CSS:
#font-face { font-family: SourceSansPro-Regular; src: url('SourceSansPro-Regular.otf'); }
body {
margin: 0px;
padding: 0px;
}
.navBar {
width: 205px;
height: 667px;
background-color: #55AE3A; //hover = 398a20
}
.greyline {
width: 205px;
height: 1px;
background-color: darkgrey;
}
.menu {
font-family: 'SourceSansPro-Regular';
color: white;
font-size: 25px;
opacity: 0.64;
height: 40px;
text-decoration: none;
}
.menu:hover {
background-color: #398a20;
}
.stuffwithsmall {
color: #75715e;
font-family: helvetica;
margin-top: 320px;
}
Question: why is that header going down below the main menu, and how do i change it, so that it goes to the right of the menu?
Your navbar div goes down that far because .stuffwithsmall class is inside it and has a huge margin-top. You can fix that by moving it lower, after the closing tag of navbar div.
In css, change:
.navbar {
height: auto;
width: 100%;
}