http://tympanus.net/codrops/2011/09/05/slicebox-3d-image-slider/
I'm trying to implement Slicebox into my website and I'm having issues. I always want to offer users the option of Shadowbox within the same page, so I'm initializing both.
<!-- Shadowbox code. -->
<link href="javascript/shadowbox-3.0.3/shadowbox.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
Shadowbox.init();
</script>
<!-- Slicebox Code -->
<script type="text/javascript">
$('.sb-slider').slicebox();
</script>
But I'm not sure how to get it to work within the actual page. I have this linking, as well as these images.
<script type="text/javascript" src="javascript/scripts.js"></script>
<script type="text/javascript" src="javascript/shadowbox-3.0.3/shadowbox.js"></script>
<script type="text/javascript" src="javascript/slicebox/js/jquery.slicebox.min.js"></script>
<script type="text/javascript" src="javascript/slicebox/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="javascript/slicebox/js/jquery.slicebox.js"></script>
<script type="text/javascript" src="javascript/slicebox/js/modernizr.custom.13303.js"></script>
And
<div class="sb-slider">
<img src="media/community/thumbnails/abed_annie_troy.jpg" alt="Abed, Annie and Troy" />
<img src="media/community/thumbnails/season_3.jpg" alt="Intro to season three" />
<img src="media/community/thumbnails/cast_class.jpg" alt="The cast in a classroom" />
</div>
Do I have it in the right directory?
Any help would be appreciated, thanks.
FULL HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<!-- This tag is required to make the page valid XHTML. -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!-- Give your page a title. -->
<title>Photo Gallery for NBC's Community</title>
<!-- Put your name and a description of the assignment or project here. -->
<meta name="author" content="" />
<meta name="description" content="A collection of photos regarding NBC's Community television show." />
<!-- This links to a sample CSS file. -->
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<!-- This include a standard jQuery library and a sample JS file for your own code. -->
<script type="text/javascript" src="javascript/jquery-1.6.3.min.js"></script>
<script type="text/javascript" src="javascript/scripts.js"></script>
<script type="text/javascript" src="javascript/shadowbox-3.0.3/shadowbox.js"></script>
<script type="text/javascript" src="javascript/slicebox/js/jquery.slicebox.min.js"></script>
<script type="text/javascript" src="javascript/slicebox/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="javascript/slicebox/js/jquery.slicebox.js"></script>
<script type="text/javascript" src="javascript/slicebox/js/modernizr.custom.13303.js"></script>
<!-- Shadowbox code. -->
<link href="javascript/shadowbox-3.0.3/shadowbox.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
Shadowbox.init();
</script>
<!-- Slicebox Code -->
<script type="text/javascript">
$('.sb-slider').slicebox();
</script>
</head>
<body>
<div id="wrap">
<div id="header">
<img src="media/header.png" alt="Community Header" />
</div>
<p>Community is an American television comedy series created by Dan Harmon that airs on NBC. The series is about a group of students at a community college in the fictional locale of Greendale, Colorado. The series heavily uses meta-humor and pop culture references, often parodying film and television clichés and tropes. The series premiered Thursday, September 17, 2009, and airs in the 8:00 pm ET time slot. It previously aired in the 9:30 pm ET time slot, beginning with its premiere, but later relocated with its fourth episode. On March 17, 2011, NBC renewed Community for a third season, which premiered on September 22, 2011.</p>
<div class="sb-slider">
<img src="media/community/thumbnails/abed_annie_troy.jpg" alt="Abed, Annie and Troy" />
<img src="media/community/thumbnails/season_3.jpg" alt="Intro to season three" />
<img src="media/community/thumbnails/cast_class.jpg" alt="The cast in a classroom" />
</div>
<div id="gallery">
<table>
<tr><td><img src="media/community/thumbnails/abed_annie_troy.jpg" alt="Abed, Annie and Troy" /></td><td><img src="media/community/thumbnails/annie_paintball.jpg" alt="Annie during the first paintball episode" /></td><td><img src="media/community/thumbnails/annie.jpg" alt="Annie as a skeleton" /></td><td><img src="media/community/thumbnails/britta_dinosaur.jpg" alt="Britta's and Jeff's Halloween costumes" /></td></tr>
<tr><td><img src="media/community/thumbnails/cast_cafeteria.jpg" alt="The cast in the cafeteria" /></td><td><img src="media/community/thumbnails/cast_class.jpg" alt="The cast in a classroom" /></td><td><img src="media/community/thumbnails/cast_cloud.jpg" alt="The cast thinking" /></td><td><img src="media/community/thumbnails/cast_mural.jpg" alt="Cast in front of a chalkboard" /></td></tr>
<tr><td><img src="media/community/thumbnails/cast_study_room.jpg" alt="The cast in their study room" /></td><td><img src="media/community/thumbnails/cast.jpg" alt="The cast" /></td><td><img src="media/community/thumbnails/christmas_episode.jpg" alt="Claymation Christmas episode" /></td><td><img src="media/community/thumbnails/pierce.jpg" alt="Pierce with other students" /></td></tr>
<tr><td><img src="media/community/thumbnails/season_3.jpg" alt="Intro to season three" /></td><td><img src="media/community/thumbnails/show_poster.jpg" alt="Poster for the show" /></td><td><img src="media/community/thumbnails/troy_and_abed.jpg" alt="Troy and Abed In The Morning" /></td><td><img src="media/community/thumbnails/trio_paintball.jpg" alt="Troy, Annie and Abed after paintball" /></td></tr>
</table>
</div>
</div>
</body>
</html>
You trying to use DOM element when DOM is not ready. Please do following changes. It should work like this.
First of all, remove these two script tag. They are unnecessary, we just combine them to only one script tag.
<script type="text/javascript">
Shadowbox.init();
</script>
<!-- Slicebox Code -->
<script type="text/javascript">
$('.sb-slider').slicebox();
</script>
Then just write these lines
<script type="text/javascript">
$(function(){
Shadowbox.init();
<!-- Slicebox Code -->
$('.sb-slider').slicebox();
});
</script>
Related
I am trying to use the bootstrap datetime picker. The input box with the glyphicon is displayed; however, no calendar appears when I click in the input and manually entering the date does not result in it being formatted. I have copied this from sample code and spent a lot of time ensuring I have the libraries required.
This is displayed:
The HTML and js is:
<!DOCTYPE html>
<html>
<head>
<title>Cub Award Overview</title>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A Scout award tracking application">
<meta name="author" content="Glyndwr (Wirrin) Bartlett">
<script src="resources/jquery/jquery.js"></script>
<script src="resources/jquery/jquery.min.js"></script>
<script src="resources/jquery/jquery.validate.js"></script>
<script src="resources/jquery/jquery.validate.min.js"></script>
<script src="resources/jquery/additional-methods.js"></script>
<script src="resources/jquery/additional-methods.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="resources/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<script src="resources/jquery/moment-with-locales.js"></script>
<!-- Le styles -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<link href="resources/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet"/>
<link href="resources/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="resources/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="resources/bootstrap-3.3.7-dist/css/bootstrap-responsive.css" rel="stylesheet"/>
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="../assets/js/html5shiv.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link rel="shortcut icon" href="resources/favicon.png">
</head>
<body>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
</div>
</div>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="resources/bootstrap-3.3.7-dist/js/bootstrap-transition.js"></script>
<script src="resources/bootstrap-3.3.7-dist/js/bootstrap-alert.js"></script>
<script src="resources/bootstrap-3.3.7-dist/js/bootstrap-modal.js"></script>
<script src="resources/bootstrap-3.3.7-dist/js/bootstrap-dropdown.js"></script>
<script src="resources/bootstrap-3.3.7-dist/js/bootstrap-scrollspy.js"></script>
<script src="resources/bootstrap-3.3.7-dist/js/bootstrap-tab.js"></script>
<script src="resources/bootstrap-3.3.7-dist/js/bootstrap-tooltip.js"></script>
<script src="resources/bootstrap-3.3.7-dist/js/bootstrap-popover.js"></script>
<script src="resources/bootstrap-3.3.7-dist/js/bootstrap-button.js"></script>
<script src="resources/bootstrap-3.3.7-dist/js/bootstrap-collapse.js"></script>
<script src="resources/bootstrap-3.3.7-dist/js/bootstrap-carousel.js"></script>
<script src="resources/bootstrap-3.3.7-dist/js/bootstrap-typeahead.js"></script>
<script src="js/groupSummary-ajax.js"></script>
</body>
I know it is frowned upon to have the script with the HTML and will separate when working.
Try to swap the order of loading datetimepicker and moment.js, so that moment.js is loaded first
<script src="resources/jquery/moment-with-locales.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
Edit
As your code examples has some local resources which we can not check, here is a simple working example with external resources only:
<!DOCTYPE html>
<html>
<head>
<title>Cub Award Overview</title>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A Scout award tracking application">
<meta name="author" content="Glyndwr (Wirrin) Bartlett">
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
</div>
</div>
</body>
</html>
You maybe want to try to adapt that. If it doesn't work inside your code, try to check for errors on the console. Another try would be to implement my code, comment out all of your initial includes and un-comment them step by step to find the source of evil.
Checked your code and it seems like you have not included the moment.js file first before jquery library and bootstrap js file. Also you have not included the moment.js file in your code. Please try as mentioned below
Ex :
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
Another thing I noticed is, you didn't provided an id to the input field. Try to provide an id to input field and use in jquery
Ex :
<div class='input-group date' id='datetimepicker'>
<input type='text' class="form-control" id="datetimepicker1" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
Now in script
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
Its worked for me and hope it works for you.
I've tried many times to run this code but every time it appears incorrectly I want angular to make its affect like this demo:
http://wowslider.com/angular-slider-collage-demo.html.
Please help, I've tried too many times without the intended result.
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<title>Http://wowslider.net/</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="Made with WOW Slider - Create beautiful, responsive image sliders in a few clicks. Awesome skins and animations. Http://wowslider.net/" />
<!-- Start WOWSlider.com HEAD section --> <!-- add to the <head> of your page -->
<link rel="stylesheet" type="text/css" href="engine1/style.css" />
<script type="text/javascript" src="engine1/jquery.js"></script>
<!-- End WOWSlider.com HEAD section -->
</head>
<body style="background-color:#d7d7d7;margin:0" >
<!-- Start WOWSlider.com BODY section --> <!-- add to the <body> of your page -->
<div id="wowslider-container1" >
<div class="ws_images" ng-controller="HelloController">
<ul>
<li ng-repeat="img in allimages"><img ng-src="data1/images/{{img.name}}" alt="2016-chevrolet-cruze-spied-completely-uncovered-news-car-and-driver-photo-658949-s-217x132" title="2016-chevrolet-cruze-spied-completely-uncovered-news-car-and-driver-photo-658949-s-217x132" id="wows1_0"/></li>
</ul>
</div>
<div class="ws_bullets">
<div>
<a ng-repeat="img in allimages" href="#" title="2016-chevrolet-cruze-spied-completely-uncovered-news-car-and-driver-photo-658949-s-217x132"><span><img ng-src="data1/tooltips/{{img.name}}" alt="2016-chevrolet-cruze-spied-completely-uncovered-news-car-and-driver-photo-658949-s-217x132"/>1</span></a>
</div>
</div>
<div class="ws_script" style="position:absolute;left:-99%">http://wowslider.net/ by WOWSlider.com v8.7</div>
<div class="ws_shadow"></div>
</div>
<!-- End WOWSlider.com BODY section -->
<script type="text/javascript" src="engine1/angular.js"></script>
<script>
angular.module("myapp", [])
.controller("HelloController", function($scope) {
$scope.allimages = [{name:'2016chevroletcruzespiedcompletelyuncoverednewscaranddriverphoto658949s217x132.jpg'},{name:'2016chrysler300srtspieditsalivenewscaranddriverphoto658864s217x132.jpg'}];
});
</script>
<script type="text/javascript" src="engine1/wowslider.js"></script>
<script type="text/javascript" src="engine1/script.js"></script>
</body>
</html>
I cant get the greenbar to slidedown when the page loads. Can anyone tell me what's wrong with my code?
HTML
<html>
<head>
<title>
Live Green Plants
</title>
<link rel="stylesheet" type="text/css" href="home.css">
<script src="home.js"></script>
</head>
<body>
<div class="headerBar">
<img src="headerBar.png" width="657" height="34" alt=""/>
</div>
<script type="text/javascript" src="Script/jquery-1.9.2.min.js"></script>
<script type="text/javascript" src="Script/jquery-ui-1.8.18.min.js"></script>
</script>
</body>
</html>
Javascript
$(document).ready(function(){
$('.headerBar').slideDown('slow');
});
It needs to start off as invisible, using style="display:none"
See it in action: http://jsfiddle.net/jas6H/5/
I'm using bootstrap in my application. I'm trying to show a table of contents as tooltip using data-html="true". but its not working.
Here is my code:
<div title="<table><tr><td>Column1</td><td>Value1></td><tr><td>Column2</td><td>Value</td></tr></table>"
data-html="true" rel="tooltip" style="cursor:pointer;"
class="infobox infobox-red infobox-dark " onclick="OpenDetails(this)">
<div class="infobox-icon"><i class="logo-box boa"></i></div>
<div class="infobox-data"><span class="infobox-data smaller">BOA</span>
<div class="infobox-content">(0/0/0/0 )</div>
</div>
</div>
$(function () {
$("[rel='tooltip']").tooltip();
});
function OpenDetails(Obj){
}
Thank you all in advance for your response.
using
data-original-title
Html:
<div rel='tooltip' data-original-title='<h1>big tooltip</h1>'>Visible text</div>
Javascript:
$("[rel=tooltip]").tooltip({html:true});
Just use the following files if you are going to use all bootstrap functions:
-bootstrap.css
-bootstrap.js
using
<script>
$(function () {
$('[rel="tooltip"]').tooltip();
});
</script>
at the end of the body tag (after jQuery and Bootstrap)
Aslo use
title="Column1 | Column2 <br> Value1 | Value2"
instead of
title="<table><tr><td>Column1</td><td>Value1></td><tr><td>Column2</td><td>Value</td></tr></table>"
the final version could be like this:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
crossorigin="anonymous"
/>
<title>Hello, world!</title>
</head>
<body>
<div
title="Column1 | Column2 <br> Value1 | Value2"
data-html="true"
rel="tooltip"
style="cursor: pointer"
class="infobox infobox-red infobox-dark"
onclick="OpenDetails(this)"
>
<div class="infobox-icon"><i class="logo-box boa"></i></div>
<div class="infobox-data">
<span class="infobox-data smaller">BOA</span>
<div class="infobox-content">(0/0/0/0 )</div>
</div>
</div>
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
crossorigin="anonymous"
></script>
<script>
$(function () {
$('[rel="tooltip"]').tooltip();
});
</script>
-->
</body>
</html>
html file:
// <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Coming Soon</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link href="tools/style.css" rel="stylesheet" type="text/css" />
<link href="tools/jquery.countdown.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="tools/jquery.min.js"></script>
<script type="text/javascript" src="tools/jquery.countdown.js"></script>
<!-- <script type="text/javascript" src="tools/bg.js"></script> -->
<script type="text/javascript">
$(function () {
var austDay = new Date();
austDay = new Date(2013, 10, 18, 12, 00);
$('#defaultCountdown').countdown({until: austDay});
$('#year').text(austDay.getFullYear());
});
$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){
$('.fadein :first-child').fadeOut(3000)
.next('img').fadeIn(3000)
.end().appendTo('.fadein');},
3000); // change this to change the transition timing
});
</script>
</head>
<body>
<div id="shim"></div>
<div class="fadein">
<img src="images/photo1.jpg">
<img src="images/photo2.jpg">
<img src="images/photo3.jpg">
<img src="images/photo4.jpg">
<img src="images/photo5.jpg">
</div>
<div id="content">
<div class="logo"><h1>Sva Spa and Salon</span></h1></div>
<div class="right_side">
<div class="right_content">
<h2>Watch For Our Brand New Website</h2>
<div id="defaultCountdown"></div>
<form class="email" action="">
<input class="get_notified" type="text"
onfocus="if(this.value=='Provide EMAIL for Reminder') this.value='';"
onblur="if(this.value=='' || this.value==' ') this.value='Provide EMAIL for
Reminder';"
value="Provide EMAIL for Reminder"/>
<input type="button" class="go" />
</form>
</div>
</div>
</div>
</body>
</html>
I get images rotating as well as the text of the counter coming up but it only decreases when I refresh the page. Also I wanted to add a php code for the submit button to send the email address to another email address how can I do this? Please help im stuck....
Three things:
There is nothing with id year, this is intentional?
Countdown should working good, but it's your job to debug rest of your code
Put your code inside .ready() function
code:
$(document).ready(function() {
//your code
});