Why doesn't my carousel work? - javascript

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>

Related

Semantic UI menu - disappearing on click

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!

fullpage.js vertical align issue

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>

How to drag and drop multiple divs in one div using javascript

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.

How do I build a carousel image slider using MVC cshtml?

I am trying to code a carousel image slider in MVC using cshtml, the pictures are only displaying in one vertical row and isn't populating into the Carousel slider itself?
Here is what I have attempted so far:
Html.Raw("<link href='../../Content/Site.css' rel='stylesheet'>")
#Html.Raw("<script src='../../Scripts/jquery-1.5.1.min.js'></script>")
Products
<script src="Scripts/jquery.cycle.all.js"></script>
<script src="Scripts/jquery.cycle.all.js"></script>
<script type="text/javascript"> $('#slider').cycle({ fx: 'fade', speed: 'fast', timeout: 0, next: '#next2', prev: '#prev2' });
</script>
<link rel="stylesheet" href="Content/css/feature-carousel.css" charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="Content/css/feature-carousel.css" charset="utf-8" />
<script src="~/Scripts/jquery-1.10.2.js" type="text/javascript" charset="utf-8"></script>
<script src="Content/js/jquery-1.7.min.js"></script>
<script src="Content/js/jquery.featureCarousel.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function ()
{
var carousel = $("#carousel").featureCarousel({
// include options like this:
// (use quotes only for string values, and no trailing comma after last option)
// option: value,
// option: value
});
$("#but_prev").click(function () {
carousel.prev();
});
$("#but_pause").click(function () {
carousel.pause();
});
$("#but_start").click(function () {
carousel.start();
});
$("#but_next").click(function () {
carousel.next();
});
});
</script>
<center>
<div class="carousel-container"></div>
<div id="carousel">
<div class="carousel-feature">
<img class="carousel-image" alt="Image Caption" src="~/Images/1.jpg" />
<div class="carousel-caption">
</div>
</div>
<div class="carousel-feature">
<img class="carousel-image" alt="Image Caption" src="~/Images/2.jpg">
<div class="carousel-caption">
</div>
</div>
<div class="carousel-feature">
<img class="carousel-image" alt="Image Caption" src="~/Images/3.jpg">
</div>
<div class="carousel-feature">
<img class="carousel-image" alt="Image Caption" src="~/Images/4.jpg">
<div class="carousel-caption">
</div>
</div>
<div class="carousel-feature">
<img class="carousel-image" alt="Image Caption" src="~/Images/5.jpg">
<div class="carousel-caption">
</div>
</div>
<div id="carousel-left"><img src="~/Content/images/arrow-left.png" /></div>
<div id="carousel-right"><img src="~/Content/images/arrow-right.png" /></div>
</div>
</center>
I found there are multiple jQuery references in view.
<script src='../../Scripts/jquery-1.5.1.min.js'></script>
<script src="~/Scripts/jquery-1.10.2.js" type="text/javascript" charset="utf-8"></script>
<script src="Content/js/jquery-1.7.min.js"></script>
Remove multiple jQuery references from the view.
Only one is enough.
<script src="~/Scripts/jquery-1.10.2.js" type="text/javascript" charset="utf-8"></script>

Bootstrap Carousel controls not working

twitter bootstrap carousel not working. I tried changing the id ('#mycarousel') to .carousel or .mycarousel but nothing is working. when I click on the controls it does not advance. what is wrong with this piece of code?
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js></script>
<script type="text/javascript">
function(){
$('#mycarousel').carousel();
}
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="span12 well">
<div id="mycarousel" class="carousel slide span8">
<div class="carousel-inner">
<div class="item active"><img src="car1.jpg"></div>
<div class="item"><img src="car2.jpg"></div>
<div class="item"><img src="car3.jpg"></div>
<div class="item"><img src="car4.png"></div>
<div class="item"><img src="car5.jpg"></div>
</div>
<a class="carousel-control left" href="#mycarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#mycarousel" data-slide="next">›</a>
</div>
</div>
</div>
</div>
<script src="js/carousel.js"></script>
<script src="js/bootstrap-transition.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
The following code will never gets executed, since you never actually call it.
$('#mycarousel').carousel();
You should change the following:
function(){
$('#mycarousel').carousel();
}
to:
$(function(){
$('#mycarousel').carousel();
});
This will make it execute when the dom is ready.
You also do not close you link tag that loads the bootstrap css from being loaded.The following:
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"
Should be:
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
You load the JS files in an order which I am not sure if it is correct. I suppose they should be in the reverse order.

Categories