Hi I'm just playing around a bit with polymer and got a problem.
First here is the Page I'm editing: http://beta.sgbvm.de/app/site/berichte.php
The most things works pretty well (e.g. transitions etc) but when i scroll down the list and then click on a card the site stays at the bottom, but i want it to scroll up.
By now i searched the for nearly 5 hours but i cant figure out how to scroll back to the top after i click on a card.
I read something about accessing the shadowDom but i didnt unterstand what they where talking.
<html>
<head>
<title>SG Bergedorf/VM - mobile Seite</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<script src="../components/platform/platform.js"></script>
<link rel="import" href="../components/core-drawer-panel/core-drawer-panel.html">
<link rel="import" href="../components/core-header-panel/core-header-panel.html">
<link rel="import" href="../components/core-toolbar/core-toolbar.html">
<link rel="import" href="../components/core-icon-button/core-icon-button.html">
<link rel="import" href="../components/core-icon/core-icon.html">
<link rel="import" href="../components/core-menu/core-menu.html">
<link rel="import" href="../components/core-item/core-item.html">
<link rel="import" href="../components/paper-fab/paper-fab.html">
<link rel="import" href="../components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../components/paper-ripple/paper-ripple.html">
<link rel="import" href="../components/font-roboto/roboto.html">
<link rel="import" href="../components/core-animated-pages/core-animated-pages.html">
<link rel="import" href="../components/core-animated-pages/transitions/cross-fade.html">
<link rel="import" href="../components/core-animated-pages/transitions/slide-up.html">
<link rel="import" href="../components/core-animated-pages/transitions/hero-transition.html">
</head>
<body style="background-color:#F0F0F0;" unresolved touch-action="auto">
<core-drawer-panel>
<core-header-panel drawer style="background-color:#fff;">
<core-toolbar style="background-color:#3a3a3a;"><div class="bottom titleDrawer">SG B/VM</div></core-toolbar>
<core-menu class="drawer">
<div class="headline"><b>Wähle:</b></div>
<core-item icon="mail" label="Nachrichten" onClick="self.location.href='index.php'"></core-item>
<core-item icon="content-paste" label="Spielberichte" onClick="self.location.href='berichte.php'"></core-item>
</core-menu>
</core-header-panel>
<core-header-panel id="mainContainer" mode="waterfall-tall" main>
<core-toolbar class="tall animate">
<core-icon-button icon="menu" class="buttonDrawer" onclick="document.querySelector('core-drawer-panel').togglePanel();"></core-icon-button>
<div flex></div>
<div class="bottom indent title">Berichte</div>
</core-toolbar>
<core-animated-pages class="content" style="background-color:#F0F0F0;" transitions="hero-transition cross-fade slide-up">
<section id="page1" style="background-color:#F0F0F0;" cross-fade horizontal layout wrap>
/** Left out a bit here **/
</section>
<section id="page2" style="background-color:#F0F0F0;">
<div id="ergebnisBig" style="width:100%" cross-fade>
<table cellpadding='0' border='0' cellspacing='0' style='width:100%; background-color:#3a3a3a;' id="placeholderTable" hero>
<tr style="width:100%;">
<td style="width:40px;">
<paper-fab icon="arrow-back" role="button" class="mini" onclick='changeBack();' slide-up></paper-fab>
</td>
<td class='ergebnisBig' id='placeholderErgebnis'>
</td>
<td style="width:40px;">
<a name="top" id="top"> </a>
</td>
</tr>
<tr>
<td id="placeholderHalbzeit" class='halbzeitBig' colspan="3"></td>
</tr>
<tr>
<td id="placeholderTeams" class='teamsBig' colspan="3"></td>
</tr>
</table>
</div>
<div style="width:100%;" horizontal center-justified layout>
<div id="placeholderText" class="card" style="width:93%;padding:10px;" slide-up>
</div>
</div>
</section>
</core-animated-pages>
</core-header-panel>
</core-drawer-panel>
</body>
</html>
core-header-panel provides a scroller property which gives you access to the internal scrolling div. From there, you can use vanilla JS to scroll it (using scrollTop).
document.querySelector('#mainContainer').scroller.scrollTop = 0;
Related
I have a table "karyawans" which contains 104 data and i want to display it all in a datatable. i have done all manual from datatable and here is the result
![datatable result][1]
here is my data
![my data][2]
here is the view
#extends('layout.main')
#section('container')
<!-- page content -->
<div class="right_col" role="main">
<div class="">
<div class="page-title">
<div class="title_left">
<h3><small>Daftar karyawan yang telah ditambahkan</small></h3>
</div>
</div>
<div class="clearfix"></div>
<div class="row">
<div class="col-md-12 col-sm-12 ">
<div class="x_panel">
<div class="x_title">
<h2>Karyawan <small>Users</small></h2>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-expanded="false"><i class="fa fa-wrench"></i></a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Settings 1</a>
</div>
</li>
<li><a class="close-link"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<div class="row">
<div class="col-sm-12">
<div class="card-box table-responsive">
<table id="datatable" class="table table-striped table-bordered"
style="width:100%">
<thead>
<tr>
<th>NIK</th>
<th>Nama</th>
<th>Username</th>
<th>Email</th>
<th>Unit</th>
<th>Jabatan</th>
<th></th>
</tr>
</thead>
<tbody>
#foreach ($karyawans as $karyawan)
<tr>
<td>{{ $karyawan->nik }}</td>
<td>{{ $karyawan->nama }}</td>
<td>{{ $karyawan->username }}</td>
<td>{{ $karyawan->email }}</td>
<td>{{ $karyawan->unit }}</td>
<td>{{ $karyawan->jabatan }}</td>
<td>
<div class="row d-flex justify-content-center">
Ubah
Hapus
</div>
</td>
</tr>
#endforeach
</tbody>
</table>
</div>
</div>
</div>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
#endsection
and here is where I store the css and js
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="{{ asset('images/rs.png') }}" type="image/png" />
<title>Sistem Manajemen Pekerjaan </title>
<!-- Bootstrap -->
<link href="{{ asset('../vendors/bootstrap/dist/css/bootstrap.min.css') }}" type="text/css"
rel="stylesheet">
<!-- Font Awesome -->
<link href="{{ asset('../vendors/font-awesome/css/font-awesome.min.css') }}" type="text/css"
rel="stylesheet">
<!-- NProgress -->
<link href="{{ asset('../vendors/nprogress/nprogress.css') }}" type="text/css" rel="stylesheet">
<!-- iCheck -->
<link href="{{ asset('../vendors/iCheck/skins/flat/green.css') }}" rel="stylesheet">
<!-- bootstrap-progressbar -->
<link
href="{{ asset('../vendors/bootstrap-progressbar/css/bootstrap-progressbar-3.3.4.min.css') }}"
type="text/css" rel="stylesheet">
<!-- JQVMap -->
<link href="{{ asset('../vendors/jqvmap/dist/jqvmap.min.css') }}" rel="stylesheet" />
<!-- bootstrap-daterangepicker -->
<link href="{{ asset('../vendors/bootstrap-daterangepicker/daterangepicker.css') }}"
type="text/css" rel="stylesheet">
<!-- Custom Theme Style -->
<link href="{{ asset('../build/css/custom.min.css') }}" type="text/css" rel="stylesheet">
<link rel="stylesheet" type="text/css"
href="{{ asset('//cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css') }}">
{{-- <link rel="stylesheet" type="text/css"
href="{{ asset('https://cdn.datatables.net/v/bs5/dt-1.11.3/af-2.3.7/b-2.0.1/cr-1.5.5/date-1.1.1/fc-4.0.1/fh-3.2.0/kt-2.6.4/r-2.2.9/rg-1.1.4/rr-1.2.8/sc-2.0.5/sb-1.3.0/sp-1.4.0/sl-1.3.3/datatables.min.css') }}"> --}}
</head>
<body class="nav-md">
<div class="container body">
<div class="main_container">
#include('partial.nav_bar')
<!-- top navigation -->
#include('partial.top_nav')
<!-- /top navigation -->
<!-- page content -->
<div class="container">
#yield('container')
</div>
<!-- /page content -->
<!-- footer content -->
#include('partial.footer')
<!-- /footer content -->
</div>
</div>
<!-- jQuery -->
<script type="text/javascript" src="{{ asset('../vendors/jquery/dist/jquery.min.js') }}">
</script>
<!-- Bootstrap -->
<script type="text/javascript"
src="{{ asset('../vendors/bootstrap/dist/js/bootstrap.bundle.min.js') }}"></script>
<!-- FastClick -->
<script type="text/javascript" src="{{ asset('../vendors/fastclick/lib/fastclick.js') }}">
</script>
<!-- NProgress -->
<script type="text/javascript" src="{{ asset('../vendors/nprogress/nprogress.js') }}"></script>
<!-- Chart.js -->
<script type="text/javascript" src="{{ asset('../vendors/Chart.js/dist/Chart.min.js') }}">
</script>
<!-- gauge.js -->
<script type="text/javascript" src="{{ asset('../vendors/gauge.js/dist/gauge.min.js') }}">
</script>
<!-- bootstrap-progressbar -->
<script type="text/javascript"
src="{{ asset('../vendors/bootstrap-progressbar/bootstrap-progressbar.min.js') }}"></script>
<!-- iCheck -->
<script type="text/javascript" src="{{ asset('../vendors/iCheck/icheck.min.js') }}"></script>
<!-- Skycons -->
<script type="text/javascript" src="{{ asset('../vendors/skycons/skycons.js') }}"></script>
<!-- Flot -->
<script type="text/javascript" src="{{ asset('../vendors/Flot/jquery.flot.js') }}"></script>
<script type="text/javascript" src="{{ asset('../vendors/Flot/jquery.flot.pie.js') }}"></script>
<script type="text/javascript" src="{{ asset('../vendors/Flot/jquery.flot.time.js') }}"></script>
<script type="text/javascript" src="{{ asset('../vendors/Flot/jquery.flot.stack.js') }}">
</script>
<script type="text/javascript" src="{{ asset('../vendors/Flot/jquery.flot.resize.js') }}">
</script>
<!-- Flot plugins -->
<script type="text/javascript"
src="{{ asset('../vendors/flot.orderbars/js/jquery.flot.orderBars.js') }}"></script>
<script type="text/javascript"
src="{{ asset('../vendors/flot-spline/js/jquery.flot.spline.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('../vendors/flot.curvedlines/curvedLines.js') }}">
</script>
<!-- DateJS -->
<script type="text/javascript" src="{{ asset('../vendors/DateJS/build/date.js') }}"></script>
<!-- JQVMap -->
<script type="text/javascript" src="{{ asset('../vendors/jqvmap/dist/jquery.vmap.js') }}">
</script>
<script type="text/javascript"
src="{{ asset('../vendors/jqvmap/dist/maps/jquery.vmap.world.js') }}"></script>
<script type="text/javascript"
src="{{ asset('../vendors/jqvmap/examples/js/jquery.vmap.sampledata.js') }}"></script>
<!-- bootstrap-daterangepicker -->
<script type="text/javascript" src="{{ asset('../vendors/moment/min/moment.min.js') }}"></script>
<script type="text/javascript"
src="{{ asset('../vendors/bootstrap-daterangepicker/daterangepicker.js') }}"></script>
<!-- Custom Theme Scripts -->
<script type="text/javascript" src="{{ asset('../build/js/custom.min.js') }}"></script>
<!-- dataTables -->
<script type="text/javascript"
src="{{ asset('//cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js') }}">
$(document).ready(function() {
$('#datatable').DataTable();
});
</script>
{{-- <script type="text/javascript"
src="{{ assset('https://cdn.datatables.net/v/bs5/dt-1.11.3/af-2.3.7/b-2.0.1/cr-1.5.5/date-1.1.1/fc-4.0.1/fh-3.2.0/kt-2.6.4/r-2.2.9/rg-1.1.4/rr-1.2.8/sc-2.0.5/sb-1.3.0/sp-1.4.0/sl-1.3.3/datatables.min.js') }}">
</script> --}}
</body>
</html>
here is the KaryawanController
public function daftar_karyawan()
{
return view('karyawans', [
"karyawans" => Karyawan::first()->filter(request(['cari']))->orderBy('id', 'asc')
->paginate(10)->withQueryString()
]);
}
FYI, I try to use the manual paginaton and searching before i know the 'datatables'
and this is the route
Route::get('/daftar_karyawan', [KaryawanController::class, 'daftar_karyawan']);
``
Sorry if there is an mistake in writing my question, because I am new to this forum and this is my first question, thank you
[1]: https://i.stack.imgur.com/GGQID.png
[2]: https://i.stack.imgur.com/R2X22.png
Remove Paginate(10) and replace with get() in KaryawanController
public function daftar_karyawan()
{
return view('karyawans', [
"karyawans" => Karyawan::first()->filter(request(['cari']))->orderBy('id', 'asc')
->get()
]);
}
You can't use Paginate() for the datatable because it will limit to 10 :)
Just use get() and datatable will auto paginate !
ps:
If retrieving more than 1000 rows then there is a high chances system will load slow. Recommended to use AJAX to prevent this issue :)
I am trying to implement lightbox in laravel but it doesn't load the arrows(left,right ...) from the lightbox css file.With Fancybox i have an issue when i click on the image, the size overflows for 1,2s and then it appears at the normal size in the center of the screen(I have image below).The arrows path public/lightbox/img.
Below is my code
default.blade.php
<title>My personal website</title>
<link rel="shortcut icon" href="{{ asset('favicon.png') }}" >
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="{{ asset('css/style.css') }}" type="text/css"/>
<link rel="stylesheet" href="{{ asset('css/lightbox.css') }}" type="text/css"/>
</head>
<body>
<div class="container">
<header>
#include('template.partial.nav')
</header>
#yield('content')
</div>
#include('template.partial.footer')
<!-- ***Scripts*** -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Add fancyBox -->
<script type="text/javascript" src="js/lightbox.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="{{ asset('js/test.js') }}"></script>
</body>
</html>
portfolio.blade.php
#extends('template.default')
#section('content')
<div id="portfolio">
<div class="row">
<p class="heading">Portfolio</p>
</div>
<div class="row">
<div class="col-md-12">
<p class="subheading">Java application</p>
<hr>
<h2 style="text-align:center">Lightbox</h2>
<a data-lightbox="roadtrip" href="{{ asset('lightbox/img/demopage/rsz_java1.png') }}">
<img src="{{ asset('lightbox/img/demopage/java1.png') }}" width="150" height="100">
</a>
<a data-lightbox="roadtrip" href="{{ asset('lightbox/img/demopage/rsz_java1.png') }}">
<img src="{{ asset('lightbox/img/demopage/java1.png') }}" width="150" height="100">
</a>
</div>
</div>
#endsection
Console errors:
portfolio:1 GET http://{projectname}/img/next.png 404 (Not Found)
portfolio:1 GET http://{projectname}/img/close.png 404 (Not Found)
portfolio:1 GET http://{projectname}/img/loading.gif 404 (Not Found)
portfolio:1 GET http://{projectname}/img/prev.png 404 (Not Found)
Thanks in advance!
Please, upgrade jQuery to the latest (see https://github.com/fancyapps/fancybox/issues/1504)
Also, fancyBox v3 does not use any images, all icons (including loading animation) are created using CSS only. Make sure you are not mixing multiple lightbox scripts.
I am using Ajax call in Spring Boot App, Not able to do Table sorting for the columns, Anyway of doing client side sorting in Ajax ?
Since you didn't include any client-side code I'll just make a few assumptions:
Solution 1: You may have additional unwanted divs in your table. The Bootstrap3 sortable table is picky when it comes to structure. Don't put any divs beneath or above the tr values. Do something like this:
<table id="example" class="table table-striped table-bordered table-hover" style="max-width: 85% !important;">
<thead>
<tr>
<th><b>Requested By</b></th>
<th><b>Request Type</b></th>
<th><b>Reason</b></th>
<th><b>Requested Date</b></th>
<th><b>Status</b></th>
</tr>
</thead>
<tbody>
<tr th:each="request : ${requests}" th:if="${request.get('requestStatus') == 'Pending'}">
<td th:text="${request.get('author').get('username')}" class="initial-name">Employee Initials</td>
<td th:text="${request.get('requestType')}">Request Type</td>
<td th:text="${request.get('requestText')}">Reason</td>
<td th:text="${request.get('dateRequested')}">Requested Date</td>
<td th:switch="${request.get('requestStatus')}">
<th:block th:case="Pending" th:text="${request.get('requestStatus')}"><span class="nnit">Pending</span></th:block>
<th:block th:case="Approved" th:text="${request.get('requestStatus')}"><span class="green">Approved</span></th:block>
<th:block th:case="Rejected" th:text="${request.get('requestStatus')}"><span class="nnit">Rejected</span></th:block>
</td>
</tr>
</tbody>
</table>
Solution 2: There's a small chance you included your scripts outside of your fragment if you're using Thymeleaf as a templating engine.
Template:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.thymeleaf.org ">
<head lang="en">
<title>Sample Springboot Application</title>
<!-- Bootstrap CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/css/dataTables.bootstrap.min.css" rel="stylesheet"/>
<!-- Internal Stylesheet -->
<link href="../static/css/style.css" th:href="#{/css/style.css}" rel="stylesheet" media="screen"/>
<!--Font Awesome-->
<link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css" integrity="sha384-dNpIIXE8U05kAbPhy3G1cz+yZmTzA6CY8Vg/u2L9xRnHjJiAK76m2BIEaSEV+/aU" crossorigin="anonymous"/>
</head>
<body>
<div class="container" style="width: 100% !important;">
<div th:replace="fragments/header :: header"></div>
<div th:replace="fragments/table:: table"></div>
<div th:replace="fragments/footer :: footer"></div>
</div>
</body>
</html>
Fragment (Correct):
<div th:fragment="table" xmlns:th="http://www.w3.org/1999/xhtml">
<!-- Get table code from this link and paste here: http://stackoverflow.com/questions/31888566/bootstrap-how-to-sort-table-columns -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable();
});
</script>
<!-- Include all scripts before closing fragment div -->
</div>
Fragment (Incorrect):
<div th:fragment="table" xmlns:th="http://www.w3.org/1999/xhtml">
<!-- Get table code from this link and paste here: http://stackoverflow.com/questions/31888566/bootstrap-how-to-sort-table-columns -->
<!-- Whoops! You included your scripts (below) after your fragment's closing div! -->
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable();
});
</script>
I have a fresh installed laravel project with all the components updated.
All I did is tried to add app.js in my welcome.blade.php file, after adding the following I get this error
[Vue warn]: Cannot find element: #app
I followed this thread, but it's not relevant as my script is at the bottom of the page.
https://laracasts.com/discuss/channels/vue/fresh-laravel-setup-and-vue-2-wont-work
Here's my file
<!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>{{$project}} | {{ $title }}</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
<!-- Styles -->
<link href="/css/app.css" rel="stylesheet" type="text/css"/>
<style>
...
</style>
</head>
<body class="sticky-nav">
<div id="nav">
<div class="display-sm">
<header class="top-header">
<span class="menu-icon">☰</span>
</header>
</div>
<div class="custom-container">
<div id="logo" class="float-left">
<img alt="xyz" src="/images/xyz.png"/><span> xyz</span>
</div>
<div id="btn-project" class="float-right">
<a title="project" href="#" class="btn btn-project">Project</a>
</div>
</div>
</div>
<div class="sub-container">
<h1 id="header-title">{{ $header_title }}</h1>
<h2 id="meta-data"><i class="fa fa"></i>{{$location}} <span id="category"> <i></i>{{$category}} </span></h2>
<div class="clear"></div>
</div>
<script src="/js/app.js"></script>
<script>
var wrap = $(".sticky-nav");
wrap.on("scroll", function (e) {
if (this.scrollTop > 147) {
wrap.find('#nav').addClass("fix-nav");
} else {
wrap.find('#nav').removeClass("fix-nav");
}
});
</script>
</body>
</html>
Error says it all. Vue can't find #app element, so you need to add it:
<div id='app'></div>
https://v2.vuejs.org/v2/guide/
Sometime everything seems got , but we are still getting same error then you have to copy this code and paste in app. blade.
<head>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
.
.
.
.
.
.
</div>
</body>
Verify that your main design file app.blade.php contains a div with the app id just after the <body> tag just like this:
<body>
<div id="app">
.
.
.
</div>
</body>
I am having difficulties with slicebox. I have checked every idea, followed the tutorial, but I'm missing the animation. I think it just doesn't start up, because the first picture in the slide appears, but nothing happens.
CSS included
<link rel="stylesheet" type="text/css" href="css/slicebox.css" />
<link rel="stylesheet" type="text/css" href="css/custom.css" />
JQuery is the latest version
<script type="text/javascript" src="js/modernizr.custom.46884.js"></script>
The html seems right
<div class="wrapper">
<ul id="sb-slider" class="sb-slider">
<li>
<a href="#" target="_blank">
<img src="slider/image1.jpg" alt="image1"/>
</a>
</li>
<li>
<a href="#" target="_blank">
<img src="slider/image2.jpg" alt="image1"/>
</a>
</li>
</ul>
</div>
And just before the /body tag at the end
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.slicebox.js"></script>
<script type="text/javascript">
$('#sb-slider').slicebox({
orientation : 'v',
autoplay : true,
});
</script>
What is wrong? I don't know much about the jquery but I have tried many variables, probably there is something I can't see. I appreciate any help.