Fullpage.js : Sections have higher height than content - javascript

I'm currently working on a single page website using Bootstrap and fullpagejs :
I've followed the required HTML structure, but each sections of my website have got a huge height. So the sections don't fit with their content.
I noticed that if I add the fp-auto-height class, everything is ok. The content fits with the sections. But this is not the right way to do that.
I have no idea about what happens.
Here is my first section for example
<div id="fullpage">
<!-- section 1 begin -->
<div data-anchor="p1-a" class="section">
<div class="container-fluid">
<div id="p1" class="row vertical-align">
<div class="col-md-offset-5 col-md-6">
<div class="row">
<div class="col-xs-12">
<h1 id="title-p1" class="reduce-space text-center">ANTHONY<span style="color: #E28509;">ROANI</span></h1>
</div>
</div> <!-- end row title intro -->
<div class="row">
<div class="col-md-6">
<p class="intro-text">
...
</p>
</div><!-- end left intro -->
<div class="col-md-6">
<p class="intro-text">
...
</p>
</div> <!-- end right intro -->
<div class="container-fluid">
<i class="intro-text"> ...</i>
<p class="intro-text">- Luc Fayard </p>
</div><!-- end citation intro -->
</div> <!-- end row content text intro -->
</div> <!-- end colonnes + offset page 1 -->
</div><!-- end bigrow page 1 -->
</div>
</div> <!-- SECTION 1 END -->
[... other sections]
</div> <!-- end fullpage -->

Make sure you are not forgetting to add the compulsory <!DOCTYPE html> declaration at the very start of your document as detailed in this tutorial.
For example:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Demo
</body>
</html>
Doctype is necessary in any website.

Related

How to make this DIV scroll down ONLY to end of its section?

Consider the code below:
What I need to do is to have <div class="col-lg-12 kip"> and all it's content scroll down only to the end of section workOne and NOTHING BEYOND THAT ..
I have attached an image here that will show you what happens now to this fixed div,
as you can see in the image, it leave its section and goes beyond the button / what I need to do is that have it stop and the end of the section or RIGHT ABOVE THE BUTTON.
How can I do this either in CSS or JS / please be detailed as much as you can because as a beginner I may need illustration.
IMAGE TO SHOW THE ISSUE
<section id="workOne">
<div class="container">
<div class="row">
<!-- #### DIV CLASS "kip" is what need to be fixed and scroll down to end of this section#### -->
<div class="col-lg-12 kip">
<h2>Kipeesh Language Check // Version 1.0</h2>
<p>Client asked to develop a simple language learning app.</p>
<ul class="kipul">
<li>Development in progress</li>
<li>Will be made to fit Wordpress</li>
<li><mark>html</mark> <mark>css</mark> <mark>javascript</mark> <mark>php</mark></li>
</ul>
</div>
<!-- #### ONE #### -->
<div class="col-lg-6">
</div>
<div class="col-lg-6 kip2">
<p>01. Overview</p>
<img src="assets/images/kip1.jpg">
</div>
<!-- #### TWO #### -->
<div class="col-lg-6">
</div>
<div class="col-lg-6 kip2">
<p>02. Create a button to hide elements.</p>
<img src="assets/images/kip2.jpg">
</div>
<!-- #### THREE #### -->
<div class="col-lg-6">
</div>
<div class="col-lg-6 kip2">
<p>03. Put the button to work / hide elements</p>
<img src="assets/images/kip3.jpg">
</div>
<!-- #### FOUR #### -->
<div class="col-lg-6">
</div>
<div class="col-lg-6 kip2">
<p>04. Add a reveal button to display one item at a time</p>
<img src="assets/images/kip4.jpg">
</div>
<button type="button" class="btn btnWork btn-outline-light btn-lg">View Version 1.0</button>
</div>
</div>
</section>
<!-- #### DIV CLASS "kip" must end here and and scroll down further to the next section #### -->
Done, fixed with the following:
.kip{
position: sticky;
top: 50%;
}

stylesheet is connected but nothing is happening while doing some changes

I connected my templete.php to style.css but when I am changing anything in templete.php, it's showing the result but if I change anything in the stylesheet, it shows no result. what should I do?
My website is not live. i am doing it on wamp server.
templete.php
<!DOCTYPE html>
<html>
<head lang="en">
<title>SEO SOBER</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Merienda"
rel="stylesheet"
<head>
<body>
<header id="particles-js">
<?php
include "navbar.php";
?>
</header>
<!--..... header ends.......-->
<div class="clients">
<h3>Our Clients</h3>
<img class="client-img" src="images/clients.png">
</div>
<!--clients ends -->
<div class="container-About">
<div class="text">
<h3>SEO SOBER Digital Story</h3>
<p>about company</p>
</div>
<div class="button">
READ MORE
</div>
</div>
<!-- about ends -->
<div class="features">
<h3>Services</h3>
<div class="maincontainer">
<!-- first card-->
<div class="thecard">
<div class="thefront">
<div class="seo_card">
<img class="services-image" src="images/seo-gif-10.gif">
<h4>Search Engine Optimization</h4>
</div>
</div>
<div class="theback">back of the card</div>
</div>
<!-- second card-->
<div class="thecard">
<div class="thefront">
<div class="seo_card">
<img class="services-image" src="images/web-design-service.gif">
<h4>Web Design</h4>
</div>
</div>
<div class="theback">back of the card</div>
</div>
<!-- third card-->
<div class="thecard">
<div class="thefront">
<div class="seo_card">
<img class="services-image" src="images/Development.gif">
<h4>Web Development</h4>
</div>
</div>
<div class="theback">back of the card</div>
</div>
<!-- fourth card-->
<div class="thecard">
<div class="thefront">
<div class="seo_card">
<img class="services-image" src="images/social.gif">
<h4>Social Media Marketing</h4>
</div>
</div>
<div class="theback">back of the card</div>
</div>
<div class="clearfix">
</div>
</div>
</div>
<!-- services end-->
<script src="js/particles.js"></script>
<script src="js/particles.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
please tell me what to do...
I am trying to do changes for half an hour but nothing happenes.
I also add the particles effect. is that the problem?
i think you are loading your cache, you have to hard reset your page. Try reloading like this on your page:
> -Hold the Ctrl key and press the F5 key.
> -Hold the ⇧ Shift key and click the Reload button on the navigation toolbar.
> -Hold the Ctrl key and click the Reload button on the navigation toolbar.
> -Hold the ⇧ Shift key and press the F5 key.

fullCalendar time and date format symfony 3.0

I am junior in development and my mission is to make an agenda for doctors where they will be able to enter new appointments, view their planning, etc.
I am trying to do so with AdminLTE and Full Calendar on Symfony 3.0. The version of Full Calendar used by AdminLTE was 2.2.5.
As I needed my Calendar to return the list of events for a day ("listDay") and the older version did not implement this function, I updated Full Calendar version to v3.4.0.
Now I am having trouble with the axisFormat (timeFormat) et dateFormat.
I would like the date to be displayed like : day/month/year (e.g: 13/06/2017 or mar. 13/06) and the time like : HH:mm (e.g: 15h20 and not 3:pm).
But for now, the date and time are displayed like :
view of my calendar
I found a lot of solutions on the web and when my calendar is not on Symfony, the code works fine.
Does anybody have an idea of what I could do to solve my issue ? Here is the code content of my own js file :
<section class="content">
<div class="row">
<!-- /.col -->
<div class="col-md-12">
<div class="box box-primary">
<div class="box-body no-padding">
<!-- THE CALENDAR -->
<div id="calendar"></div>
</div>
<!-- /.box-body -->
</div>
<!-- /. box -->
</div>
<!-- /.col -->
{# <div class="col-md-2">
<div class="box box-solid">
<div class="box-header with-border">
<h4 class="box-title">Motifs de consultation</h4>
</div>
<div class="box-body">
<!-- type de consultations -->
<div id="legende">
<div class="bg-green">Première consultation</div>
<div class="bg-yellow">Visite de contrôle</div>
<div class="bg-aqua">Chirurgie réfractive</div>
<div class="bg-light-blue">Rééducation visuelle</div>
<div class="bg-red">Urgences</div>
</div>
</div>
<!-- /.box-body -->
</div>
<!-- /. box -->
</div>#}
</div>
<!-- /.row -->
</section>

Bootstrap Hidden Element Requires Place

I'm using Bootstrap and I have included a navbar at the bottom of the page.
But The notification bar element (look comment - it is the div element with the id warning.
The notification bar can change It's visibility. But when the visibility is 'collapsed' the div is still taking up all space.
My code:
<div class="navbar navbar-default navbar-fixed-bottom">
<!-- notification bar element can change visibility -->
<div class="row" id="warning" style="visibility: hidden;">
<h2>Bottom Notification</h2>
<small>Timestamp</small>
<h3>This is a message.</h3>
</div>
<!-- -->
<!-- element is static - can't change visibility -->
<div class="container row">
<p class="navbar-text pull-left">© 2016 - xxxx</p>
</div>
</div>
How can I change it so that the div is not taking any space away when the visibility is hidden?
That is correct. The visibility could be seen as an opacity... so the element is there but with opacity zero, when hidden.
If you don't want it to use the place, rather use display:
<div class="row" id="warning" style="display: none;">
Instead of visibility you can use hide class and toggle it
<div class="navbar navbar-default navbar-fixed-bottom">
<!-- notification bar element can change visibility -->
<div class="row hide" id="warning">
<h2>Bottom Notification</h2>
<small>Timestamp</small>
<h3>This is a message.</h3>
</div>
<!-- -->
<!-- element is static - can't change visibility -->
<div class="container row">
<p class="navbar-text pull-left">© 2016 - xxxx</p>
</div>
</div>
Change style="visibility: hidden;" to style="display: none;:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="navbar navbar-default navbar-fixed-bottom">
<!-- notification bar element can change visibility -->
<div class="row" id="warning" style="display: none;">
<h2>Bottom Notification</h2>
<small>Timestamp</small>
<h3>This is a message.</h3>
</div>
<!-- -->
<!-- element is static - can't change visibility -->
<div class="container row">
<p class="navbar-text pull-left">© 2016 - xxxx
</p>
</div>
</div>
Use
display: none
instead of
visibility: hidden
The difference is well explained on w3schools
that's the whole idea of visibility: hidden;, it keeps the space even it hides the element. But in display:none will leave the space .

Twitter Bootstrap Carousel Misaligning each Slide Transition

I integrated the Bootstrap Carousel (http://getbootstrap.com/examples/carousel/) in my 'comingsoon' homepage: http://247tutors.net/comingsoon/index.html
If you wait for the page to fully load, you will see that the automated slide transitions are not aligning properly (problem occurring in Chrome and Firefox). Each new slide comes in at a level and then once slide/img is covering carousel, i.e., at the end of the slide transition, the slide drops down by ~10px.
Notice my carousel's side panels onHover, leave a gap of about the same amount of pixels at the bottom.
..Can't tell it the error is caused by the navbar css (although, I do have the carousel-style.css being pulled in on the index.html after all other relevant css files (thus, giving carousel-style.css precedent over the class & div settings), or possibly, the error stems from loginDropdown.css (http://247tutors.net/comingsoon/css/loginDropdown.css)..?
Full source code url: view-source:http://247tutors.net/comingsoon/index.html
My Carousel css is here: http://247tutors.net/comingsoon/css/carousel-style.css
Carousel region snippet from index.html:
<script type="text/javascript">var switchTo5x=true;</script>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img src="images/slider/custom/main/a-advanced.png" alt="Advanced Subjects">
<div class="container">
<div id="custom247slider" class="carousel-caption">
<h1 id="textNormal">Advanced Subjects</h1>
<h4 id="textNormal">We specialize in college
<br />
courses and above.
</h4>
</div> <!-- END carousel-caption -->
</div> <!-- END container -->
</div> <!-- END item active -->
<div class="item">
<img src="images/slider/custom/main/a-available.png" alt="Tutors Available 247">
<div class="container">
<div id="custom247slider" class="carousel-caption">
<h1 id="textNormal" style="color:#222;">24/7 Availability</h1>
<h4 id="textNormal" style="color:#222;">Tutors whenever you need.</h4>
</div> <!-- END carousel-caption -->
</div> <!-- END container -->
</div> <!-- END item -->
<div class="item">
<img src="images/slider/custom/main/a-economical.png" alt="Affordable Pricing">
<div class="container">
<div id="custom247slider" class="carousel-caption">
<h1 id="textNormal">Economical</h1>
<h4 id="textNormal">Pay by the minute, the
<br />
week, or the month.</h4>
</div> <!-- END carousel-caption -->
</div> <!-- END container -->
</div> <!-- END item -->
<div class="item">
<img src="images/slider/custom/main/a-ivy.png" alt="Ivy League-level Tutoring">
<div class="container">
<div id="custom247slider" class="carousel-caption">
<h1 id="textNormal">Exceptional Tutors</h1>
<h4 id="textNormal">College graduates from top schools
<br />
in a wide range of disciplines.
</h4>
</div> <!-- END carousel-caption -->
</div> <!-- END container -->
</div> <!-- END item -->
</div> <!-- END carousel-inner -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div> <!-- END myCarousel -->
You have to remove the absolute positioning of the .carousel-inner > .item > img class on line 11 of your carousel-style.css style sheet. It should remove the skipping effect! ;)

Categories