i cannot get fullpage.js vertically align any content i give. first i tried to implement it on an existing code but afterwards i just opened anew and tried to put it in just as simple as:
<body>
<div id="fullpage">
<div class="section">
<div class="first">
<img src="img/logo.svg" alt="">
</div>
</div>
<div class="section">b</div>
<div class="section">c</div>
<div class="section">d</div>
</div>
<script src="js/jquery.min.js"></script> <!-- Jquery -->
<script src="js/bootstrap.min.js"></script> <!-- bootstrap js -->
<script src="js/jquery.fullPage.js"></script> <!-- Jquery FullPage-->
<script src="js/main.js"></script> <!-- Site Library -->
</body>
my css dependencies are simple : reset.css, bootstrap and animate.css
i appreciate any kind of help, thanks in advance
Try with this, copy paste to a html page and make sure your js and css calling path is right
<script>
$(document).ready(function() {
$('#fullpage').fullpage({
sectionsColor: ['#999', '#666', '#262626', '#000'],
navigation: true,
verticalCentered: true,
navigationPosition: 'right',
navigationTooltips: ['About', 'Security', 'Industries', ' security', 'footer'],
});
});
</script>
body {
float: left;
width: 100%;
padding-bottom: 0px;
}
* {
color:#F00;
text-align:center;
font-size:30px;
}
<link rel="stylesheet" href="css/jquery.fullPage.css" >
<div id="fullpage">
<div class="section" id="section0">
<span class="middle">Vertical align</span>
</div>
<div class="section" id="section1">
<span class="middle">b</span>
</div>
<div class="section" id="section2">
<span class="middle">c<span>
</div>
<div class="section" id="section3">
<span class="middle">d</span>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/jquery.fullPage.js"></script>
Related
I have a semantic-UI lefside menu that I want to be persistent. I am trying to make 2 states - a wide one with type for each item, and a compact one with an image for each item.
Currently there are a few issues that I am totally stumped on!
1) Why does the menu completely go away on click?
2) How can I make the page NOT do dim?
3) Can the page collapse in width instead of getting pushed to the right?
4) is it possible to have two menu states, as described, and toggle between them on click?
Thank you very much!
My site is here: http://itp.evejweinberg.com/left/
And my html:
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="semantic/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,800" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<!-- my json of content -->
<script type="text/javascript" src="list.js"></script>
<!-- jQuery to build that content -->
<script type="text/javascript" src="buildScene.js"></script>
<script src="semantic/semantic.min.js"></script>
</head>
<!--//do I need this class? -->
<body class="pushable">
<!-- semantic says to put everything in pusher -->
<div class="pusher">
<div class="all">
<div id="main"></div>
<div class="title-holder">
<div class="animatedDiv"></div>
</div>
<div class='container'>
<div class='header'></div>
<div class="all-books"></div>
</div>
</div>
</div>
<!-- menu -->
<div class="ui vertical left labeled menu fixed small sidebar">
<div class="header link item" onclick="scrollTo(captology)">Intro</div>
<div class="item">
<div class="header link item">Emotions</div>
<div class="menu">
<a class="item link" onclick="scrollTo(hope)">Hope</a>
<a class="item link" onclick="scrollTo(anxiety)">Anxiety</a>
<a class="item link" onclick="scrollTo(fear)">Fear</a>
</div>
</div>
<div class="item">
<div class="header link item">Psychology</div>
<div class="menu">
<a class="item link" onclick="scrollTo(transparency)">Transparency</a>
<a class="item link" onclick="scrollTo(loss)">Loss Aversion</a>
<a class="item link" onclick="scrollTo(dark)">Dark Patterns</a>
<a class="item link" onclick="scrollTo(social)">Social Pressure</a>
</div>
</div>
<div class="item">
<div class="header link" onclick="scrollTo(fogg)">Fogg</div>
<div class="menu">
<a class="item link" onclick="scrollTo(motivation)">Motivation</a>
<a class="item link" onclick="scrollTo(ability)">Ability</a>
<a class="item link" onclick="scrollTo(trigger)">Trigger</a>
</div>
</div>
<div class="item">
<div class="header link" onclick="scrollTo(flow)">Flow</div>
<div class="menu">
<a class="item link" onclick="scrollTo(chunking)">Chunking</a>
<!-- <a class="item">FAQs</a> -->
</div>
</div>
<div class="item">
<div class="header">Ethics</div>
<div class="menu">
<div class="nav-rect" id="e"></div>
<div class="nav-rect" id="e"></div>
<div class="nav-rect" id="e"></div>
<div class="nav-rect" id="e"></div>
</div>
<div class="header link" onclick="scrollTo(sources)">Sources</div>
</div>
<div class="header">About</div>
<div class="ui category search item">
<div class="ui transparent icon input">
<input class="prompt" type="text" placeholder="Search...">
<i class="search link icon"></i>
</div>
<div class="results"></div>
</div>
</div>
</div>
<script type="text/javascript" src="content.js"></script>
<script type="text/javascript" src="sketch.js"></script>
<script type="text/javascript" src="js/intro.js"></script>
<script type="text/javascript" src="js/hope.js"></script>
<script type="text/javascript" src="js/lossAversion.js"></script>
<script type="text/javascript">
$('.sidebar').sidebar('show');
// $('.sidebar')
// .visibility({
// type : 'fixed',
// offset : 45 // give some space from top of screen
// });
// $('.menu').click(function(){
// $('.ui.labeled.icon.sidebar').sidebar('toggle');
//
// })
// $('.ui.sidebar').click(function(){
// sidebar('toggle');
// })
</script>
</body>
</html>
Mystery solved! Semantic-UI was dynamically adding to my html on build. I removed the class 'sidebar' and all pusher and dimmer css went away. That solves #1 and #2. For the rest, i'm just going to go back to jQuery animations to slide the left nav to the left and collapse it's width. Thx All!
Is there any feature about animation on multiple slide item? I have tried its fine on single slide but not working on multiple item slide.
You can use JSFiddle or below code to debug.
$('.loop-test').owlCarousel({
center: true,
items: 2,
loop: true,
margin: 10,
animateOut: 'slideOutDown',
animateIn: 'flipInX',
dots: true
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.theme.green.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.theme.default.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.carousel.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/owl.carousel.min.js"></script>
<div class="owl-carousel loop-test">
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
</div>
Any pointers would be appreciated!
Thanks.
According to my understanding, you are looking for different slide transition.
Each slide is going to get the animation class and add it to the item thus giving different animation for each slide.
Here is the updated fiddle
<div class="owl-carousel loop-test">
<div data-animate="flipInX animated"> Your Content </div>
<div data-animate="bounceIn animated"> Your Content </div>
<div data-animate="fadeIn animated"> Your Content 2 </div>
<div data-animate="flipInX animated"> Your Content </div>
<div data-animate="fadeIn animated"> Your Content </div>
<div data-animate="flipInY animated"> Your Content </div>
<div data-animate="fadeIn animated"> Your Content </div>
</div>
Try auto play
var owl = $('.owl-carousel');
owl.owlCarousel({
items:4,
loop:true,
margin:10,
autoplay:true,
autoplayTimeout:1000,
autoplayHoverPause:true
});
$('.play').on('click',function(){
owl.trigger('play.owl.autoplay',[1000])
})
$('.stop').on('click',function(){
owl.trigger('stop.owl.autoplay')
})
JSFiddle link
$('.loop-test').owlCarousel({
loop: true,
items: 2,
nav: true
});
$('.loop-test').on('translate.owl.carousel', function(event) {
$(this).find(".item").hide();
});
$('.loop-test').on('translated.owl.carousel', function(event) {
$(this).find(".item").fadeIn(800);
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.theme.green.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.theme.default.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.carousel.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/owl.carousel.min.js"></script>
<div class="owl-carousel owl-theme loop-test">
<div class="item"> Your Content </div>
<div class="item"> Your Content </div>
<div class="item"> Your Content </div>
<div class="item"> Your Content </div>
<div class="item"> Your Content </div>
<div class="item"> Your Content </div>
<div class="item"> Your Content </div>
</div>
This question already has answers here:
Where do you include the jQuery library from? Google JSAPI? CDN?
(16 answers)
Closed 4 years ago.
I am trying to set up JQuery Scrollify on my website to get a smooth scroll from one section to the others but cannot make it work! I tried different ways and think I might just be missing something? I think I might not be implementing the script correctly or not giving the sections good class name..Or maybe because I am using Bootstrap??
Need help here!! Thank you so much!
Here is my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>...</title>
<link href="css/magicledger.css" rel="stylesheet" type="text/css">
<link href="css/normalize.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap.min.css" rel="stylesheet">
<script>
$(function() {
$(".section").css({"height":$(window).height()});
$.scrollify({
section:".section"
});
$(".scroll").click(function(e) {
e.preventDefault();
$.scrollify("move",$(this).attr("href"));
});
});
</script>
</head>
<body>
<section class="section section1">
<header class="jumbotron vertical-center">
<div class="container">
<h1>...</h1>
<h3>...</h3>
<script type="text/javascript">
window.Maitre = { uuid: "MF301766dea0" };
</script>
<script data-maitre src='https://maitreapp.co/widget.js' async></script>
</div>
</header>
</section>
<div class="container-fluid">
<section class="section section2">
<div class="row"> <!------- Row 1 ----->
<div class="col-md-6">
<div class="inside-row">
<img src="icons/animat-bezier-color-2.gif" alt="icon1">
</div>
</div>
<div class="col-md-6">
<div class="inside-row">
<h3>...</h3>
<p>...</p>
</div>
</div>
</div>
</section>
<section class="section section3">
<div class="row"> <!-- Row 2 -------->
<div class="col-md-6">
<div class="inside-row">
<img src="icons/animat-layers-color-2.gif" alt="icon2">
</div>
</div>
<div class="col-md-6">
<div class="inside-row">
<h3>...</h3>
<p>...</p>
</div>
</div>
</div>
</section>
<section class="section section3">
<div class="row"> <!-- Row 3 ---------->
<div class="col-md-6">
<div class="inside-row">
<img src="icons/animat-network-color-2.gif" alt="icon3">
</div>
</div>
<div class="col-md-6">
<div class="inside-row">
<h3>...</h3>
<p>...</p>
</div>
</div>
</div>
</section>
</div> <!-- ENd of container fluid ------>
and my javascript extrernal sheet:
jQuery(document).ready(function($) {
$.scrollify({
section : ".section-class-name",
sectionName : "section-name",
easing: "easeOutExpo",
scrollSpeed: 1100,
offset : 0,
scrollbars: true,
standardScrollElements: "",
setHeights: true,
before:function() {},
after:function() {},
afterResize:function() {},
afterRender:function() {}
});
Where are you including your .js files? You are probably running your javascript in the head section for your page before you are loading jquery and scrollify.
Load all of your .js files in the head before you run any of your javascript on the page or move your javscript into your .js file.
You might need to add <script src="script/jquery-2.2.1.min.js"></script> inside your HTML body element.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">< /script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/scrollify/1.0.19/jquery.scrollify.js">< /script>
Paste this right under the <head> tag
I'm having trouble on a project I mentioned earlier, now the problem is that I want to drag a div and drop it to another div. If I drag a div then it should be added below the previously dropped div. How can I achieve that? My current code is not appending the next div dropped, it overwrites the first one. I have tried many solutions but all end up doing more damage than good. Can anybody please help me, Thank you.
<html>
<head>
<title>CRM</title>
<link rel="stylesheet" href="style/style.css" type="text/css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<script>
$(document).ready(function(){
$(".dragable").draggable({
cancel:"a.ui-icon",
revert:true,
helper:"clone",
cursor:"move",
revertDuration:0
});
$('.droppable').droppable({
accept: ".dragable",
activeClass: "ui-state-highlight",
drop: function( event, ui ) {
// clone item to retain in original "list"
var $item = ui.draggable.clone();
$(this).addClass('has-drop').html($item);
}
});
});
</script>
</head>
<body>
<div class="main-container">
<div class="wrapper">
<div class="tb-head">
<div class="target">
<span class="target-span">Target</span>
</div>
<div class="user1">
<span class="user1-span">User1</span>
</div>
<div class="user2">
<span class="user2-span">User2</span>
</div>
<div class="user3">
<span class="user3-span">User3</span>
</div>
<div class="user4">
<span class="user4-span">User4</span>
</div>
<div class="clear"></div>
</div>
<div class="tb-body">
<div class="inner-target">
<div class="dragable">
<span class="targetinn-span">Target Lead</span>
</div>
<div class="dragable">
<span class="targetinn-span">Assign1 Lead</span>
</div>
<div class="dragable">
<span class="targetinn-span">Assign2 Lead</span>
</div>
<div class="dragable">
<span class="targetinn-span">Assign3 Lead</span>
</div>
</div>
<div class="inner-user1">
<div class="droppable">
<span class="user1inn-span"></span>
</div>
</div>
<div class="inner-user2">
<div class="droppable">
<span class="user2inn-span"></span>
</div>
</div>
<div class="inner-user3">
<div class="droppable">
<span class="user3inn-span"></span>
</div>
</div>
<div class="inner-user4">
<div class="droppable">
<span class="user4inn-span"></span>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</body>
</html>
Just change this line of code
$(this).addClass('has-drop').html($item);
to this
$(this).addClass('has-drop').append($item);
By calling .html() you replaced the original html just with last dropped element.
My carousel doesn't slide automatically. I can click through my pictures only.
The strange thing is that at one point I could of sworn it did work. I just dont know what I could have changed since.
Here's my code:
<div class="row-fluid">
<div id="slider" class="span5" style="padding:15px;" >
<div class="carousel slide" style="border:#fff 3px solid;" id="treatments">
<div class="carousel-inner">
<div class="item active">
<img src="img/sliderpic1.jpg" alt="massage">
</div>
<div class="item">
<img src="img/sliderpic2.jpg" alt="pedicure">
</div>
<div class="item">
<img src="img/sliderpic3.jpg" alt="waxing">
</div>
</div>
</div>
‹
»
</div>
<img src="img/logos.png" class="img-rounded">
</div>
Then just before the close body tag:
<script type="text/javascript">
$('.carousel').carousel({
interval: 1200
});
</script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.js"></script>
Thanks in advance for all of your help, it's much appreciated!
You're setting up the carousel before you've included jQuery. Swap the <script> tags around:
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.js"></script>
<script type="text/javascript">
$('.carousel').carousel({
interval: 1200
});
</script>