I am using fullpage js in a website and i need to stop a particular slide to scroll down on mouse wheel scroll. Rest slides will slide normally. On 4th slide(slide in my case), i have two images which i want to display on scroll one by one. First image will be visible by default and on scroll 2nd image will display and first will be hidden. During this, slide will not scroll down. Once 2nd image is displayed then slide will scroll down to next slide. and reverse function will be performed on 4th slide while scrolling up.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Fullpage</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.8/jquery.fullPage.min.css" rel="stylesheet">
<style>
#fullpage img{width: 100%;}
#fullpage .section{overflow: hidden;}
</style>
</head>
<body>
<div id="fullpage">
<section class="section slide1">
<div class="image"><img src="https://placeimg.com/1000/750/arch" alt=""></div>
</section>
<section class="section slide2">
<div class="image"><img src="https://placeimg.com/1000/750/tech/sepia" alt=""></div>
</section>
<section class="section slide3">
<div class="image"><img src="https://placeimg.com/1000/750/tech" alt=""></div>
</section>
<section class="section slide4">
<div class="image image1"><img src="https://placeimg.com/1000/750/natureg" alt=""></div>
<div class="image image2"><img src="https://placeimg.com/1000/750/people" alt=""></div>
</section>
<section class="section slide5">
<div class="image"><img src="https://placeimg.com/1000/750/animals" alt=""></div>
</section>
<section class="section slide6">
<div class="image"><img src="https://placeimg.com/1000/750/tech/grayscale" alt=""></div>
</section>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.8/jquery.fullPage.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.8/vendors/scrolloverflow.min.js"></script>
<script>
jQuery(document).ready(function(){
jQuery('#fullpage').fullpage({
verticalCentered: true,
navigation: true,
navigationPosition: 'right',
scrollingSpeed: 800,
scrollBar: true,
responsiveWidth: 1024,
afterResponsive: function(isResponsive){}
});
});
</script>
</body>
</html>
Read how to cancel a movement before it takes place.
Related
I have a laravel application.
I am using bootstrap in the frontend alongwith blade templates.
I want to add a background image to my landing page.
I am trying to style the page by putting a background image to the body. But its not working as in the image is not showing
Below is my code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<!-- Latest compiled and minified CSS -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Arizonia' rel='stylesheet' type='text/css'>
</head>
<style>
body {
background-image: {{url('/images/gym_background.jpg')}};
}
</style>
<body>
#include('partials.header')
<div class="container">
#yield('content')
</div>
</body>
</html>
In My chrome console i don't see any error of not loading the image.
The code for content section
#extends('layouts.master')
#section('content')
<div class="row">
<div class="col-md-12">
<h3>Welcome to your neighourbood Gym</h3>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<h1 class="post-title">Plans</h1>
<p>Plans available in our gym!</p>
<p>Click to view</p>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-12 text-center">
<h1 class="post-title">Gallery</h1>
<p>Have a look around our gym</p>
<p>Click to view</p>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-12 text-center">
<h1 class="post-title">Contact us</h1>
<p>Click for more details</p>
</div>
</div>
#endsection
Best Regards,
Saurav
Given the following folder structure:
`/public/images/gym_background.jpg`
Change this:
<style>
body {
background-image: {{url('/images/gym_background.jpg')}};
}
</style>
To this:
<style>
body {
// Add a . in front to look in the right folder + dropping the double {{ }}
background-image: url('./images/gym_background.jpg');
}
</style>
Here is a good read on relative vs absolute paths for the extra curious.
If you don't see the image and there's no 404 error in the network inspector, then probably your image is hidden under some other element that takes all the screen and has solid (white?) background. Try setting the same CSS on div.container, then it should work.
UPD: Scratch that, the problem is curly braces. It will work if you remove those {{ and }}.
I decided to try Bootstrap 4. I have rather a simple HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<header class="container-fluid">
<div class="row">
<div class="col">
</div>
</div>
<div class="row">
<div class="col">
</div>
</div>
<div class="row">
<div class="col-1">
</div>
<div class="col-10">
</div>
<div class="col-1">
</div>
</div>
</header>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
But when I hover the latest col-1 element in the developer tools, the horizontal scrollbar appears. Look at the image below.
Firefox bug
Who have any ideas how to wrastle with it?
your code is okay
I tried it in Google chrome, and the horizontal scrollbar doesn't appear
also I download firefox and installed it, then tried what you made, and there is no horizontal scrollbar as well
You may have an error in your firefox, you may download the new version from here;
https://www.mozilla.org/en-US/firefox/new/
I have http://chessresearcher.com/test-02.html which should load http://chessresearcher.com/hello.html as a modal, but it doesn't display it! What am I doing wrong? I have kept the code to bare minimum. The code source is http://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=modal-with-remote-url which works.
http://chessresearcher.com/test-02.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of Twitter Bootstrap Modals with Remote URL</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script>
$('#button_id').click(function(){
$('#myModal').modal('show')
});
</script>
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<!-- Button HTML (to Trigger Modal) -->
Launch Demo Modal
<!-- Modal HTML -->
<div id="myModal" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Confirmation</h3>
</div>
<div class="modal-body">
<!-- Content will be loaded here from a remote source -->
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
</div>
</body>
</html>
and: http://chessresearcher.com/hello.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>untitled</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
<p>Hello, World!</p>
</body>
</html>
The problem is the combination of angular ui and bootstrap 3. I can't find the link that solved the problem for me, but the solution was to add this css:
.modal {
display: block;
height: 0;
overflow: visible;
}
See also this link.
I was facing performance problem while switching between the pages.I went to various forums and added something like faskclick and more.
First time, when i switch to different page, it takes around 3-4 seconds but from second time it is fast e.g. 1 - 1.5 sec. Now, sometimes, click does not work. Out of 5 clicks, only 2-3 clicks works. I am struggling to figure out what went wrong ?
If you can help me out finding why click is not working and how to improve performance when using jquery mobile, it would really be helpful. Following are my code snippets
<html>
<!-- head -->
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="viewport" content="user-scalable=yes, width=device-width, initial-scale=1.0" />
<title>Project</title>
<link rel="stylesheet" href="StyleSheet/jquery.mobile-1.3.0.css" />
<script src="StyleSheet/jquery-1.8.2.min.js"></script>
<script src="StyleSheet/jquery.mobile-1.3.0.js"></script>
<script src="StyleSheet/fastclick.js"></script>
<script type="application/javascript">
$.mobile.defaultPageTransition = 'none';
$.mobile.transitionFallbacks.slideout = 'none';
window.addEventListener('load', function() {
new FastClick(document.body);
}, false);
$( document ).bind( "mobileinit", function() {
$.mobile.buttonMarkup.hoverDelay = 500
});
</script>
</head>
<body>
<div id="container">
<div data-role="page" id="HomePage" class="jqm-demos">
<div class="ui-body ui-body-b">
CLick Me to go second page
</div>
</div>
<div data-role="page" id="SecondPage" class="jqm-demos">
<div class="ui-body ui-body-b">
<br> CLick Me to go first page
<div id="JQM" data-theme="b" data-content-theme="c"
data-role="collapsible" data-collapsed-icon="arrow-d"
data-expanded-icon="arrow-u">
<h3>
<span style="float: left;"> JQM is very slow </span> <a
href="#JQM_1" class="splitButtonClicked" data-rel="popup"> <span
style="float: right;"
class="ui-btn-up-b ui-btn-corner-all ui-icon ui-icon-arrow-r2"></span>
</a>
</h3>
<p>I sther any way so that page transition should happen just
like native applciation when using JQM ? Botton click also also
sometimes not responsive.</p>
</div>
</div>
<!-- content -->
<!-- footer -->
<div data-role="footer" data-theme="b" data-tap-toggle="false"
data-position="fixed">
<!--class="ui-bar ui-bar-b"-->
<a href="#" data-rel="back" data-role="button" data-icon="arrow-l"
data-iconpos="notext" class="ui-btn-left" data-theme="b">left</a>
<center>
<a href="#HomePage" data-role="button" data-icon="home"
data-iconpos="notext" data-theme="b">Home</a>
</center>
<a href="#" data-role="button" data-icon="arrow-r"
data-iconpos="notext" class="ui-btn-right" data-theme="b">Right</a>
</div>
<!-- /footer -->
</div>
</div>
</body>
</html>
Ok So almost everything works fine for me. When I try to use this as a template in Dreamweaver and create web pages, the links work and the drop down menu works too. But the drop down only works if the pages I've created are in the same root directory. If I create other folders and save web pages in there, I can get to those pages from the drop down, but once I'm at the page that's inside of another folder and try to use the drop down to navigate from there, I can't. It won't drop down again. I have to click on another link that isn't inside of the folder, like the home link for example. I thought maybe it was a path issue but I've also tried to make the paths absolute instead of relative but that hasn't worked either. I have been Googling for days to see if anyone else has had this same issue come up for them but haven't had any luck.
I have a feeling it's going to be something so easy and simple that I'm not thinking of or overlooking but I'm just not having any luck.
Below is the code that I've been using as an example from the download. If anyone can point me in the right direction, that would be so wonderful!
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="../css/bootstrap.min.css">
<style>
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<link rel="stylesheet" href="../css/bootstrap-responsive.min.css">
<link rel="stylesheet" href="../css/main.css">
<script src="../js/vendor/modernizr-2.6.1-respond-1.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.dropdown-toggle').dropdown();
});
</script>
<!-- This code is taken from http://twitter.github.com/bootstrap/examples/hero.html -->
<div class="navbar navbar-inverse navbar-static-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Project name</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>In the Root</li>
<li>In Subfolder</li>
<li>Absolute</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.2.min.js"> <\/script>')</script>
<script src="../js/vendor/bootstrap.min.js"></script>
<script src="../js/plugins.js"></script>
<script src="../js/main.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.dropdown-toggle').dropdown();
});
</script>
<script>
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>