The following is a code taken form Owl Carousel's own site. I don't know why the callback functions(here afterMove) are not called! Could anybody get the afterMove function called? For me it's not just afterMove, but none of the callbacks works!
<html>
<head>
<!-- Owl Carousel -->
<link rel="stylesheet" href="js/vendors/owl-carousel-2/assets/owl.carousel.min.css">
<!-- Owl Default Theme -->
<link rel="stylesheet" href="js/vendors/owl-carousel-2/assets/owl.theme.default.min.css">
<style type="text/css">
#owl-demo .item {
background: #3fbf79;
padding: 30px 0px;
margin: 10px;
color: #FFF;
border-radius: 3px;
text-align: center;
}
</style>
</head>
<body>
<div id="owl-demo" class="owl-carousel">
<div class="item"><h1>0</h1></div>
<div class="item"><h1>1</h1></div>
<div class="item"><h1>2</h1></div>
<div class="item"><h1>3</h1></div>
<div class="item"><h1>4</h1></div>
<div class="item"><h1>5</h1></div>
<div class="item"><h1>6</h1></div>
</div>
<!-- jQuery -->
<script src="js/jquery/1.9.1/jquery.min.js"></script>
<!-- Owl Carousel -->
<script src="js/vendors/owl-carousel-2/owl.carousel.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var owl = $("#owl-demo");
owl.owlCarousel({
navigation : true,
afterMove : afterMove
});
function afterMove(){
alert("Hey!");
}
});
</script>
</body>
</html>
you need to use new events with .on(), as per mentioned in its docs, as:
var owl = $("#owl-demo");
owl.owlCarousel({
navigation : true
});
//register `change` event
owl.on('changed.owl.carousel', function(e) {
alert("changed");
});
Demo :: jsFiddle
Related
I'm a absolute beginner to Tizen. I want to make a little app. For this app, I want to add "More Options". It's not working and I really don't know. I followed each step in the documentation (I also followed this: https://developer.tizen.org/ko/development/guides/web-application/user-interface/tizen-advanced-ui/applications-circular-ui/implementing-more-options) but this didn't help me either. Here's my code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,user-scalable=no">
<title>List</title>
<link rel="stylesheet" href="lib/tau/wearable/theme/default/tau.min.css">
<link rel="stylesheet" href="lib/tau/wearable/theme/default/tau.circle.min.css">
<link rel="stylesheet" href="css/more_options.css">
</head>
<body>
<div id="moreoptionsPage" class="ui-page">
<header class="ui-header ui-has-more">
<h2 class="ui-title">Einkaufsliste</h2>
<button type="button" class="ui-more ui-icon-overflow">More Options</button>
</header>
<div class="ui-content">
<ul class="shopping_list ul-listview">
</ul>
</div>
<!--Rectangular profile-->
<div id="moreoptionsPopup" class="ui-popup" data-transition="slideup">
<div class="ui-popup-header">Options</div>
<div class="ui-popup-content">
<ul class="ui-listview">
<li>Hinzufügen</li>
<li>Entfernen</li>
</ul>
</div>
</div>
<!--Circular profile-->
<div id="moreoptionsDrawer" class="ui-drawer" data-drawer-target="#moreoptionsPage" data-position="right" data-enable="true" data-drag-edge="1">
<div id="selector" class="ui-selector">
<div class="ui-item add-icon" data-title="Hinzufügen"></div>
<div class="ui-item remove-icon" data-title="Entfernen"></div>
</div>
</div>
</div>
</body>
<script src="lib/tau/wearable/js/tau.min.js"></script>
<script src="js/circle-helper.js"></script>
<script src="js/app.js"></script>
<script src="js/lowBatteryCheck.js"></script>
<script src="js/more_options.js"></script>
</html>
here's my more_options.js:
(function() {
var page = document.querySelector('#moreoptionsPage'),
popup = page.querySelector('#moreoptionsPopup'),
handler = page.querySelector('.ui-more'),
drawer = page.querySelector('#moreoptionsDrawer'),
selector = page.querySelector('#selector'),
helper,
clickHandlerBound;
function clickHandler(event) {
alert("calling");
if (tau.support.shape.circle) {
tau.openPopup(popupCircle);
} else {
tau.openPopup(popup);
}
}
page.addEventListener('pagebeforeshow', function() {
if (tau.support.shape.circle) {
helper = tau.helper.DrawerMoreStyle.create(drawer, {
handler: '.drawer-handler'
});
} else {
/* Shape is square */
clickHandlerBound = clickHandler.bind(null);
handler.addEventListener('click', clickHandlerBound);
}
});
page.addEventListener('pagebeforehide', function() {
if (tau.support.shape.circle) {
handler.removeEventListener('click', clickHandlerBound);
helper.destroy();
}
});
})();
and here's my more_options.css:
#moreoptionsDrawer {
display: none;
}
#media all and (-tizen-geometric-shape: circle) {
#moreoptionsDrawer {
display: block;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 100%;
}
#moreoptionsPopup {
display: none;
}
}
I get errors when using tau.helper.DrawerMoreStyle.create and in the examples on Github it is not used at all. Check it out:
https://github.com/Samsung/TAU/tree/tau_1.2/examples/wearable/UIComponents/contents/assistviews
I'm building a males fashion site with a slider that have both images and a video in it. I'm using owl.carousel as a slider. The video is an plane HTML5 video tag.
I'm trying to start the video whith jquery like this: $('#video')[0].play();
It works perfectly when the video is outside the slider/carousel, but how do I start it inside?
Codepen link
I just look your codepen. After few tests, I saw two containers with class video-slider with a video tag with the same id "video" inside. (Check with debug console on the render view and the jquery code $(".video-slide").children()).
You can start the videoS with the jquery code $(".video-slide").children().each(function() { this.play(); }); but before you need to find where and why your blocks are duplicated.
I hope it helps
Created a snippet
$(function(){
var owl;
$(document).ready(function () {
owl = $(".stage");
owl.owlCarousel({
autoplay: true,
autoplayHoverPause: true,
loop: true,
items: 1,
navigation: true, // Show next and prev buttons
slideSpeed: 300,
paginationSpeed: 400,
singleItem: true,afterAction: function(current) {
current.find('video').get(0).play();
}
});
});
});
body {
background-color: #91a8d2;
}
.container {
margin-top: 50px;
max-width: 500px;
}
.stage .image-slide, .stage .video-slide {
display: block;
width: 100%;
height: 100%;
}
.stage .video-slide > video {
width: 100%;
height: auto;
}
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css">
<link rel="stylesheet" type="text/css" href="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.theme.css">
<script type="text/javascript" src="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.js"></script>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="stage">
<div class="image-slide">
<img src="http://imyourman.dk/demo/slide1.jpg">
</div>
<div class="image-slide">
<img src="http://imyourman.dk/demo/slide2.jpg">
</div>
<div class="item">
<video id="video">
<source src="http://imyourman.dk/demo/fashion.mp4" type="video/mp4" autoplay>
<source src="http://imyourman.dk/demo/fashion.ogg" type="video/ogg">
</video>
</div>
<div class="image-slide">
<img src="http://imyourman.dk/demo/slide3.jpg">
</div>
</div>
</div>
</div>
</div>
</body>
I have created a sample HTML code.
Please check it.
set your CSS accordingly.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css">
<link rel="stylesheet" type="text/css" href="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.theme.css">
<script type="text/javascript" src="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.js"></script>
<style class="cp-pen-styles">
body {
background-color: #91a8d2;
}
.container {
margin-top: 50px;
max-width: 500px;
}
.stage .image-slide, .stage .video-slide {
display: block;
width: 100%;
height: 100%;
}
.stage .video-slide > video {
width: 100%;
height: auto;
}
</style>
<title></title>
<script type='text/javascript'>
$(function(){
var owl;
$(document).ready(function () {
owl = $(".stage");
owl.owlCarousel({
autoplay: true,
autoplayHoverPause: true,
loop: true,
items: 1,
navigation: true, // Show next and prev buttons
slideSpeed: 300,
paginationSpeed: 400,
singleItem: true,afterAction: function(current) {
current.find('video').get(0).play();
}
});
});
});
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="stage">
<div class="image-slide">
<img src="http://imyourman.dk/demo/slide1.jpg">
</div>
<div class="image-slide">
<img src="http://imyourman.dk/demo/slide2.jpg">
</div>
<div class="item">
<video id="video">
<source src="http://imyourman.dk/demo/fashion.mp4" type="video/mp4" autoplay>
<source src="http://imyourman.dk/demo/fashion.ogg" type="video/ogg">
</video>
</div>
<div class="image-slide">
<img src="http://imyourman.dk/demo/slide3.jpg">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I wrote the javascript, which is working absolutely fine on my computer. It shows popup window with some text and image when you press on iv element. But with wordpress it does not work. On wordpress it adds the image, which should be in popup window, bellow the content of the website.
In developer tool it shows the error:
TypeError: undefined is not an object (evaluating '$j('[data-q_id="'+a+'"]').offset().top')
Here is the code
<body>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
$(function() {
$('#clickMe1').click(function(event) {
var mytext = $('#literOne').val();
$('<div id="dialog">'+mytext+'</div>').appendTo('body');
event.preventDefault();
$("#dialog").dialog({
width: 600,
modal: true,
close: function(event, ui) {
$("#dialog").remove();
}
});
}); //close click
});
</script>
<script type="text/javascript">
$(function() {
$('#clickMe2').click(function(event) {
var mytext = $('#literTwo').val();
$('<div id="dialog">'+mytext+'</div>').appendTo('body');
event.preventDefault();
$("#dialog").dialog({
width: 600,
modal: true,
close: function(event, ui) {
$("#dialog").remove();
}
});
}); //close click
});
</script>
<style>
.pi_liter{
cursor: pointer;
}
</style>
<!-- begin planirovki -->
<div class="planirovki">
<div class="plan_img_main">
<div class="plan_img" id="plans">
<div class="wmain" id="ankor1">
<div class="pi_liter pl1" section="1" id="clickMe1">
Литер 1
<textarea cols="0" rows="0" id="literOne" style="display:none">Some hidden text display none <img src="http://cu33132.tmweb.ru/domnasobornoy/wp-content/uploads/2016/03/400.jpg" />
</textarea>
</div>
<div class="pi_liter pl2" section="2" id="clickMe2">
Литер 2
<textarea cols="0" rows="0" id="literTwo" style="display:none">Some hidden text display none two <img src="http://cu33132.tmweb.ru/domnasobornoy/wp-content/uploads/2016/03/400.jpg" />
</textarea>
</div>
</div>
</div>
</div>
</div>
<!-- end planirovki -->
</div>
<!-- end container_main -->
<link rel="stylesheet" type="text/css" href="css/style_adapt.css">
</body>
CSS
.wmain{max-width:1180px;margin:0 auto;}
.planirovki{}
.planirovki .tm{padding-top:88px;}
.planirovki .tm span{padding-bottom:0;padding-top:15px;}
.plan_head{padding-bottom:67px;}
.plan_img{background:url(http://cu33132.tmweb.ru/domnasobornoy/wp-content/uploads/2016/03/400.jpg) no-repeat center top;}
.plan_img .wmain{height:1144px;position:relative;}
.pi_liter{text-align:center;font-size:24px;color:#003d7f;text-transform:uppercase;font-family:'Kudrashov Plain:001.001', arial;width:171px;height:125px;background:url(http://cu33132.tmweb.ru/domnasobornoy/wp-content/uploads/2016/07/plan_plashka.png) no-repeat;line-height:42px;position:absolute;cursor:default;padding-top:44px;}
.pi_liter span{font-size:17px;}
.pl1{left:73px;top:11px;}
.pl2{left:821px;top:11px;}
.pi_liter{-webkit-transition:0.3s;-moz-transition:0.3s;-ms-transition:0.3s;-o-transition:0.3s;transition:0.3s;}
.pi_liter:hover{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1);}
related url is http://cu33132.tmweb.ru/domnasobornoy/#plan
Thank you in advance!
Hope you can help me
I'm teaching myself JavaScript and I'm trying to make a random background color appear when a button is clicked. Below you can find my code:
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>Day 4</title>
<link rel="stylesheet" type="text/css" href="css/foundation.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body id="background">
<div class="row">
<div class="columns small-12">
<ul class="menu">
<li>Home</li>
<li>Blog</li>
</ul>
</div>
<div class="row">
<div class="columns small-12">
<div class="container center">
<button id="button"class="button center" onclick="randomColors">Click Here for Color of the Day</button>
</div>
</div>
</div>
</div>
<script src="js/random-color.js"></script>
</body>
</html>
Here is my CSS Code:
.background{
background-color: #ECECEA;
}
.text-padding{
padding: 50px;
}
input{
width:250px !important;
padding-left: 50px;
}
.inline{
list-style-type: none;
}
.container{
margin-left: 500px;
}
And lastly, my JavaScript Code. This is where I'm having most of my trouble to be honest.
function randomcolor(){
document.getElementById('background').style.color =randomColors();
}
function randomColors(){
return '#' + Math.floor(Math.random() * 16777215).toString(16);
console.log("I'm working now")
}
Any help you can provide would be extremely helpful as this is all a learning experience for me. Thanks in advance!
It seems like its basically already been answered by others, but there is nothing wrong with repetition.
You are calling randomColors() instead of randomcolor().
You really shouldn't be using getElementById on the body tag. You can just use document.body to get the body.
You need to use style.background or style.backgroundColor to get the background color instead of text color.
You should be including your js scripts in <head> instead of near the bottom of your html document to ensure they are loaded before functions from them are called.
What happened is when your html loads, the onclick handler is undefined because your script hasn't been loaded as yet.. .hence you will get an an error in your console.log stating that your function is undefined. Move script tag above your onclick handler.
Snippet using .onclick
document.getElementById('button').onclick=randomcolor;
function randomcolor(){
document.getElementById('background').style.backgroundColor =randomColors();
}
function randomColors(){
var result='#' + Math.floor(Math.random() * 16777215).toString(16);
console.log(result);
return result;
}
.background{
background-color: #ECECEA;
}
.text-padding{
padding: 50px;
}
input{
width:250px !important;
padding-left: 50px;
}
.inline{
list-style-type: none;
}
.container{
margin-left: 500px;
}
<title>Day 4</title>
<link rel="stylesheet" type="text/css" href="css/foundation.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<body id="background">
<div class="row">
<div class="columns small-12">
<ul class="menu">
<li>Home</li>
<li>Blog</li>
</ul>
</div>
<div class="row">
<div class="columns small-12">
<div class="container center">
<button id="button"class="button center">Click Here for Color of the Day</button>
</div>
</div>
</div>
</div>
</html>
Snippet using addEventListener
document.getElementById('button').addEventListener('click',randomcolor,false)
function randomcolor(){
document.getElementById('background').style.backgroundColor =randomColors();
}
function randomColors(){
var result='#' + Math.floor(Math.random() * 16777215).toString(16);
console.log(result);
return result;
}
.background{
background-color: #ECECEA;
}
.text-padding{
padding: 50px;
}
input{
width:250px !important;
padding-left: 50px;
}
.inline{
list-style-type: none;
}
.container{
margin-left: 500px;
}
<title>Day 4</title>
<link rel="stylesheet" type="text/css" href="css/foundation.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<body id="background">
<div class="row">
<div class="columns small-12">
<ul class="menu">
<li>Home</li>
<li>Blog</li>
</ul>
</div>
<div class="row">
<div class="columns small-12">
<div class="container center">
<button id="button"class="button center">Click Here for Color of the Day</button>
</div>
</div>
</div>
</div>
</html>
First, you're using the wrong function in your callback. Use onclick='randomcolor()'. Make sure your JS functions are defined in the <head> of the document. Finally, document.getElementById('background').style.color is the text color, not the background color. Use document.getElementById('background').style.background = randomColors();
Good evening, i'm trying to use jScrollPane in a Wordpress template and i'm going crazy, always shows a "non-skinned" scrollbar...
This code is loaded in the header.php, .portfolio-post-content contains only text:
<script type="text/javascript" charset="utf-8">
$(function() {
$('.portfolio-post-content').jScrollPane();
});
</script>
The element in style.css:
.portfolio-post-content { width:130px; float:left; overflow: auto; height: 500px; }
The HTML out:
<!-- Main Page Content Begin -->
<div id="main">
<div id="page-content" class="portfolio-container main-container-single-portfolio" style="position:relative;">
<div class="container sidebar-left single-project">
<!-- Media Begin -->
<div class="portfolio-post-media twelve columns"></div>
<!-- Media End -->
<!-- Content Begin -->
<div class="portfolio-post-content four columns">text...</div>
<!-- Content End -->
The header file loads jScrollPane.css before the other .js files.
It sounds like a problem related to the nested div elements.
Thanks,
1:
<script type="text/javascript" charset="utf-8">
var $ = jQuery.noConflict();
$(function() {
$('.portfolio-post-content.four.columns').jScrollPane();
});
</script>
2: http://www.radiospeck.it/barchitects/wp-content/themes/spacing/js/jquery.mousewhell.js?ver=3.4.2
Not loaded
3:
.portfolio-post-content.four.columns {
height: 200px;
}
you can test with:
jQuery('.portfolio-post-content.four.columns').css({
height: '200px'
}).jScrollPane();