I tried integrate wordpress in ONSEN UI but i dont know where i made a mistake.
I folowed this example
https://www.youtube.com/watch?v=YUpWq9_LeEo
Im trying to create almost same thing but i want to use ONSEN UI
This is my code.
I personaly think somthing wrong with index.js script.
I used INDEX.JS file to genarate feeds from my wordpress site
I'm getting error on line 2 when i delete this atribute ng-app="app" i'm getting error on line 181
ERROR
Uncaught SyntaxError: Unexpected token }
INDEX.JS
function listPost (data) {
var output='<ons-list>';
$.each(data.posts,function(key,val){
output+='<ons-list-item onclick="myNavigator.pushPage("page3.html", { animation : "slide" } )">';
output+='<img src="'+val.thumbnail_images.full.url+'" alt="" width="100%">';
output+='<h1>'+ val.title +'</h1>';
output+='</ons-list-item>';
});
output+='</ons-list>';
$('#postlist').html(output);
}
**INDEX.HTML**
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<title>My App</title>
<link rel="stylesheet" href="lib/onsen/css/onsenui.css">
<link rel="stylesheet" href="lib/onsen/css/onsen-css-components.css">
<link rel="stylesheet" href="styles/app.css"/>
<script src="lib/onsen/js/angular/angular.js"></script>
<script src="lib/onsen/js/onsenui.js"></script>
<script src="cordova.js"></script>
<script src="jquery.js"></script>
<script src="index.js"></script>
<script>
var module = angular.module('app', ['onsen']);
</script>
<style>
.page--menu-page__content {
background-color: #333;
color: white;
}
.menu-close,
.menu-close > .toolbar-button {
color: #999;
}
.menu-list,
.menu-item:first-child,
.menu-item:last-child,
.menu-item {
background-color: transparent;
background-image: none !important;
border-color: transparent;
color: #fff;
}
ul{
list-style: none;
margin: auto;
padding: 0;
}
.menu-item {
padding: 0 0 0 20px;
line-height: 52px;
height: 52px;
text-shadow: rgba(0, 0, 0, 0.4) 0px 1px 0px;
}
.menu-item:active {
background-color: rgba(255, 255, 255, 0.1);
}
.menu-notification {
display: inline-block;
margin-top: 12px;
font-size: 14px;
height: 16px;
line-height: 16px;
min-width: 16px;
font-weight: 600;
}
.bottom-menu-list,
.bottom-menu-item:first-child,
.bottom-menu-item:last-child,
.bottom-menu-item {
border-color: #393939;
background-color: transparent;
background-image: none !important;
color: #ccc;
}
.bottom-menu-item:active {
background-color: rgba(255, 255, 255, 0.1);
}
</style>
</head>
<body>
<ons-sliding-menu
above-page="page1.html"
behind-page="menu.html"
side="left"
max-slide-distance="250px"
var="menu">
</ons-sliding-menu>
<!-- PAGE--><!-- PAGE--><!-- PAGE--><!-- PAGE--><!-- PAGE-->
<ons-template id="page1.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button ng-click="menu.toggleMenu()"><ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em;"></ons-icon></ons-toolbar-button>
</div>
<div class="center">Page 1</div>
</ons-toolbar>
<p style="text-align: center; color: #999; padding-top: 100px;">Page1 Contents</p>
</ons-page>
</ons-template>
<!-- PAGE--><!-- PAGE--><!-- PAGE--><!-- PAGE--><!-- PAGE-->
<ons-template id="page2.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="menu.toggleMenu()"><ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em;"></ons-icon></ons-toolbar-button>
</div>
<div class="right"><ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em;"></ons-icon></div>
</ons-toolbar>
<!--Listas 2 puslapyje-->
<ons-navigator title="" var="myNavigator">
<ons-page>
<div id="postlist">
</div>
</ons-page>
</ons-navigator>
</ons-page>
</ons-template>
<ons-template id="menu.html">
<ons-list>
<ons-list-item modifier="chevron" onclick="menu.setAbovePage('page1.html', {closeMenu: true})">
page1.html
</ons-list-item>
<ons-list-item modifier="chevron" onclick="menu.setAbovePage('page2.html', {closeMenu: true})">
page2.html
</ons-list-item>
</ons-list>
</ons-template>
<script src="http://kksa.lt/?json=get_recent_posts&callback=listPost" type="text/javascript"></script>
</body>
</html>
The problem you have is how you used the single quote (') and double quote ('') incorrectly. Copy and paste below code to your index.js file, then there will be no more error.
function listPost (data) {
var output='<ons-list>';
$.each(data.posts,function(key,val){
output+='<ons-list-item onclick="myNavigator.pushPage(\'page1.html\', { animation : \'slide\' } )">';
output+='<img src=\"'+val.thumbnail_images.full.url+'\" alt="" width="100%">';
output+='<h1>'+ val.title +'</h1>';
output+='</ons-list-item>';
});
output+='</ons-list>';
$('#postlist').html(output);
}
Tip: If you want to use (') inside ('), please write it as (/'). Same goes for (""), you need to write as (/").
I hope it helps. Good luck.
Related
Basically Here is the HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>movieCard</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<style>
img.mal {
-webkit-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
user-drag: none;
}
img.mal {
pointer-events: none;
}
.movie_card.mal{
padding: 0 !important;
width: 22rem;
margin:14px;
border-radius: 10px;
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.2), 0 4px 15px 0 rgba(0, 0, 0, 0.19);
}
.movie_card.mal img.mal{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
height: 33rem;
}
.movie_info.mal{
color: #5e5c5c;
}
.movie_info.mal i.mal{
font-size: 20px;
}
.card-title.mal{
width: 80%;
height: 4rem;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
<script>
axios.get(`https://api.jikan.moe/v3/user/humzaa-senpai/animelist/watching`, { headers: { Accept: "application/json" } }).then(list => {
list.data.anime.forEach(item => {
var date = new Date(item.start_date)
var year = date.getFullYear()
console.log(item)
document.getElementById('watch_list')
.insertAdjacentHTML(
'beforeend',
`
<a href="${item.url}">
<div class="container mt-5">
<div class="row justify-content-center">
<div class="card movie_card">
<img src="${item.image_url}" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">${item.title}</h5>
<span class="movie_info">${year}</span> </div>
</div>
</div>
</div>
</a>
`
);
i++;
});
})
</script>
<div id="watch_list"></div>
</html>
But Whenever I Open the HTML it shows the formatting Properly But It is only Showing 1 Result Instead of all of them!!!
I've Done this With nodejs Before (With a CLI Application) Before but It Doesn't Work Now
How can I Fix This?
Should I add a Loop?
Here is the
Output
I Really Don't Have any other words because I am a novice so Please stop saying "It looks like your post is mostly code, please add some more details"
Just remove the line
i++ (6th line from end), your code will run fine. i is not defined so it is creating the error ReferenceError: i is not defined
Code snippet after removing the line i++
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>movieCard</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<style>
img.mal {
-webkit-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
user-drag: none;
}
img.mal {
pointer-events: none;
}
.movie_card.mal{
padding: 0 !important;
width: 22rem;
margin:14px;
border-radius: 10px;
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.2), 0 4px 15px 0 rgba(0, 0, 0, 0.19);
}
.movie_card.mal img.mal{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
height: 33rem;
}
.movie_info.mal{
color: #5e5c5c;
}
.movie_info.mal i.mal{
font-size: 20px;
}
.card-title.mal{
width: 80%;
height: 4rem;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
<script>
axios.get(`https://api.jikan.moe/v3/user/humzaa-senpai/animelist/watching`, { headers: { Accept: "application/json" } }).then(list => {
list.data.anime.forEach(item => {
var date = new Date(item.start_date)
var year = date.getFullYear()
console.log(item)
document.getElementById('watch_list')
.insertAdjacentHTML(
'beforeend',
`
<a href="${item.url}">
<div class="container mt-5">
<div class="row justify-content-center">
<div class="card movie_card">
<img src="${item.image_url}" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">${item.title}</h5>
<span class="movie_info">${year}</span> </div>
</div>
</div>
</div>
</a>
`
);
});
})
</script>
<div id="watch_list"></div>
</html>
I have been trying/learning to use fullpagejs to create a website but i'm having problem creating autoplay slider. i've only been able to create
horizontal scroll which isnt really what i wanted to achieve here. Any help on how to achieve this without using horizontal scroll?
Hi guys, I have been trying/learning to use fullpagejs to create a website but i'm having problem creating autoplay slider. i've only been able to create
horizontal scroll which isnt really what i wanted to achieve here. Any help on how to achieve this without using horizontal scroll?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://rawgit.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script>
<!--Custom script -->
<script type="text/javascript" src="js/fullpage.js"></script>
<script type="text/javascript">
window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;
ga('create','UA-XXXXX-Y','auto');ga('send','pageview')
$(document).ready(function(){
// $('#fullpage').fullpage({
// sectionSelector: '.vertical-scrolling',
// slideSelector: '.horizontal-scrolling',
// controlArrows: false
// // more options here
// });
// variables
var $header_top = $('.header-top');
var $nav = $('nav');
// toggle menu
$header_top.find('a').on('click', function() {
$(this).parent().toggleClass('open-menu');
});
// fullpage customization
$('#fullpage').fullpage({
sectionsColor: ['firstSection'],
// sectionSelector: '.vertical-scrolling',
// slideSelector: '.horizontal-scrolling',
navigation: true,
slidesNavigation: true,
controlArrows: false,
afterLoad: function(anchorLink, index) {
$header_top.css('background', 'rgba(0, 47, 77, .3)');
$nav.css('background', 'rgba(0, 47, 77, .25)');
if (index == 5) {
$('#fp-nav').hide();
}
},
});
});
</script>
#homepage {
position: relative; }
#homepage .slider {
background-size: cover !important; }
#homepage .slider .hero {
padding: 0 25px;
display: flex;
flex-direction: column;
height: calc(100vh - 10%); }
#homepage .slider .hero .header {
padding-top: 20px;
flex: 1 1 70px;
display: flex;
align-items: center;
justify-content: space-between; }
#homepage .slider .hero .header .logo img {
cursor: pointer;
image-rendering: -webkit-optimize-contrast; }
#homepage .slider .hero .header i {
color: #fff;
cursor: pointer; }
#homepage .slider .hero .welcome {
display: flex;
justify-content: center;
flex: 10 10 300px;
text-align: center;
align-items: center; }
#homepage .slider .hero .welcome div {
align-self: flex-end; }
#homepage .slider .hero .welcome div .hero-headings {
line-height: 90px;
font-size: 155px;
color: #fff;
font-family: '__ITC Avant Garde Gothic Pro_5';
font-weight: 700;
letter-spacing: -5px;
text-shadow: 0px 0px 30px rgba(0, 0, 0, 0.8); }
#homepage .slider .hero .welcome div .hero-description {
padding-bottom: 50px;
font-family: Georgia;
font-size: 20px;
line-height: 22px;
font-weight: bold;
letter-spacing: 5px;
color: #fff;
text-transform: uppercase;
/*text-shadow: 0px 0px 15px rgba(0,0,0,0.8);*/ }
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>branding</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!-- Place favicon.ico in the root directory -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link rel="stylesheet" type="text/css" href="https://rawgit.com/alvarotrigo/fullPage.js/master/jquery.fullPage.css" />
</head>
<body>
<div class="container">
<div id="homepage" class="main">
<div id="fullpage">
<section class="slider section" style="background: url('http://neonrobot.com/wp-content/uploads/2014/09/unsplash-1.jpg') center center;">
<div class="hero">
<div class="header">
<div class="logo"><img src="assets/img/logo.png" alt="logo"></div>
<i id="menu-open" class="fa fa-bars fa-lg"></i>
</div>
<div class="welcome">
<div>
<div class="hero- headings">Hello.</div>
<div class="hero-description"></div>
</div>
</div>
</div>
<div class="clients">
<div class="padding25">
<div class="clients-intro">Our Clients. <i class="fa fa-angle-right"></i><i class="fa fa-angle-right"></i></div>
<div class="clients-logos">sds</div>
</div>
</div>
</section>
</div>
</div>
</div>
<script src="https://www.google-analytics.com/analytics.js" async defer></script>
</body>
</html>
You need to change your afterLoad callback function like this:
I have used setInterval function to make it automated by calling moveSlideRight function at interval of 1 sec.
afterLoad: function(anchorLink, index) {
$header_top.css('background', 'rgba(0, 47, 77, .3)');
$nav.css('background', 'rgba(0, 47, 77, .25)');
setInterval(function () {
$.fn.fullpage.moveSlideRight();
}, 1000);
if (index == 5) {
$('#fp-nav').hide();
}
},
Here is an example link: codepen link
I am trying to set up a grid view for a widget I'm building with angular matirial.
Basically I want a side bar with fixed width on the left, and on the right the content with three sections in a column: a header with fixed height (60px), a content which should fill the widget, and a footer with fixed height (60px);
Here is a plunker I have setup.
Plunker
<!DOCTYPE html>
<html ng-app="main">
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="widget" class="widget-container box-shadow">
<div layout="row" layout-fill flex>
<div class="my-main" layot="column" layout-fill flex>
<div class="my-header" ></div>
<div class="my-content" flex></div>
<div class="my-footer" ></div>
</div>
<div class="my-sidebar" layot="column" ></div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<!-- Angular Material Javascript now available via Google CDN; version 0.10 used here -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.js"></script>
<script src="script.js"></script>
</body>
</html>
CSS:
*{
direction: rtl;
}
.widget-container{
position: absolute;
top:20%;
left: 30%;
width: 40%;
height: 40%;
}
.box-shadow{
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}
.my-main{
width: 100%;
}
.my-header{
background-color: brown;
width:60px;
}
.my-content{
background-color: blue;
}
.my-footer{
background-color: chartreuse;
width:60px;
}
.my-sidebar{
width: 60px;
background-color: aqua;
}
JS:
angular.module("main", ["ngMaterial"]);
angular.module("main")
.run(function (){
$("#widget").draggable();
$("#widget").resizable();
});
Right now my content view does not appear at all (width of 0). I think I am missing something with angular material, but what?
Also I added draggable and resizable options from jquery-ui but I dont think that is the problem.
Thanks for the help.
Edit 1:
Just a typo, the plunker is fixed and working, hope it would help someone.
You made a typo.
In the div which has class my-main change layot="column to layout="column". The same mistake is made in the div which has class my-sidebar.
angular.module("main", ["ngMaterial"]);
angular.module("main")
.run(function (){
$("#widget").draggable();
$("#widget").resizable();
});
*{
direction: rtl;
}
.widget-container{
position: absolute;
top:20%;
left: 30%;
width: 40%;
height: 40%;
}
.box-shadow{
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}
.my-main{
width: 100%;
}
.my-header{
background-color: brown;
width:60px;
}
.my-content{
background-color: blue;
}
.my-footer{
background-color: chartreuse;
width:60px;
}
.my-sidebar{
width: 60px;
background-color: aqua;
}
<!DOCTYPE html>
<html ng-app="main">
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="widget" class="widget-container box-shadow">
<div layout="row" layout-fill flex>
<div class="my-main" layout="column" layout-fill flex>
<div class="my-header" ></div>
<div class="my-content" flex></div>
<div class="my-footer" ></div>
</div>
<div class="my-sidebar" layout="column" ></div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<!-- Angular Material Javascript now available via Google CDN; version 0.10 used here -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.js"></script>
<script src="script.js"></script>
</body>
</html>
I'm porting iOS PhoneGap project to android.
However, ng-click event in OnsenUI does not fire on Android simulator.
Here is an example code.
module.controller('LCtrl', function($scope) {
$scope.login = function() { // doesn't work!!!
// some process...
};
ons.ready(function() {
// works
});
});
<ons-navigator var="loginNavigator">
<ons-page ng-controller="LCtrl" id="loginPage">
<ons-list>
<ons-list-item class="list__item ons-list-item-inner" modifier="tappable" ng-click="login()">
<ons-icon icon="link" size="20px" fixed-width="false"></ons-icon>
</ons-list-item>
</ons-list>
</ons-page>
</ons-navigator>
And also, sliding-menu on OnsenUI doesn't work.
<!doctype html>
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="viewport" content="user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1, width=device-width"/>
<link rel="stylesheet" href="lib/onsen/css/onsenui.css">
<link rel="stylesheet" href="styles/onsen-css-components.css">
<link rel="stylesheet" href="styles/app.css"/>
<link rel="stylesheet" href="css/ext/style.ccs" type="text/css" />
<link rel="stylesheet" href="css/ext/github.css" type="text/css" />
<link rel="stylesheet" href="css/ext/widearea.css" type="text/css" />
<script src="lib/onsen/js/angular/angular.js"></script>
<script src="lib/onsen/js/onsenui.js"></script>
<script type="text/javascript" src="js/ext/zepto.js"></script>
<script type="text/javascript" src="js/ext/forcetk.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/ext/mustache.js"></script>
<script type="text/javascript" src="js/ext/marked.js"></script>
<script type="text/javascript" src="js/ext/highlight.pack.js"></script>
<script type="text/javascript" src="js/ext/widearea.js"></script>
<style>
.page--menu-page__background {
background-color: #333;
}
.page--menu-page__content {
color: white;
}
.menu-close,
.menu-close > .toolbar-button {
color: #999;
}
.menu-list,
.menu-item:first-child,
.menu-item:last-child,
.menu-item {
background-color: transparent;
background-image: none !important;
border-color: transparent;
color: #fff;
}
.menu-item {
padding: 0 0 0 20px;
line-height: 52px;
height: 52px;
text-shadow: rgba(0, 0, 0, 0.4) 0px 1px 0px;
}
.menu-item:active {
background-color: rgba(255, 255, 255, 0.1);
}
.menu-notification {
display: inline-block;
margin-top: 12px;
font-size: 14px;
height: 16px;
line-height: 16px;
min-width: 16px;
font-weight: 600;
}
.bottom-menu-list,
.bottom-menu-item:first-child,
.bottom-menu-item:last-child,
.bottom-menu-item {
border-color: #393939;
background-color: transparent;
background-image: none !important;
color: #ccc;
}
.bottom-menu-item:active {
background-color: rgba(255, 255, 255, 0.1);
}
</style>
</head>
<body>
<ons-sliding-menu
menu-page="menu.html" main-page="login.html" side="left"
var="menu" type="reveal" max-slide-distance="260px" swipeable="false">
</ons-sliding-menu>
</body>
</html>
I have no idea to solve these problems.
If you have any idea, please tell me how to solve them.
Thanks.
Thanks!!
It's a problem in swipeable=false.
<ons-sliding-menu
menu-page="menu.html" main-page="login.html" side="left"
var="menu" type="reveal" max-slide-distance="260px" swipeable="true">
</ons-sliding-menu>
But, I couldn't page transition when revealed menu.
For example, page transition doesn't occur when I tapped "Tapped" menu.
<ons-page modifier="menu-page" ng-controller="Tapped">
<ons-toolbar modifier="transparent"></ons-toolbar>
<ons-list class="menu-list">
<ons-list-item class="menu-item" ng-click="menu.setMainPage('tapped.html', {closeMenu: true})">
Tapped
</ons-list-item>
</ons-list>
</ons-page>
Please give me ideas.
I am trying to use this sliding panel, done using jquery mobile. It works perfectly.
I would like to put a small button, like a tick, on the border of the sliding panel. This button should slide also, with the panel. Pressing this button would open the panel and it should be always visible. I don't know how to do it and I don't know if it is even possible.
<div data-role="panel" id="left-panel" data-display="overlay" data-position="left" data-theme="c">
<img src="small_image_as_button" /><!-- click here to open the panel -->
<nav id="indice">
<!-- content here -->
</nav>
</div>
Working example: http://jsfiddle.net/Gajotres/qgDst/
HTML :
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="b" data-role="header">
<h1>Index page</h1>
</div>
<div data-role="content">
</div>
<div data-role="panel" id="left-panel" data-display="overlay" data-position="left" data-theme="c">
<img src="small_image_as_button" /><!-- click here to open the panel -->
<nav id="indice">
<!-- content here -->
</nav>
<div data-role="button" id="tick-button">>></a>
</div>
</div>
</body>
</html>
Javascript :
$(document).on('pagebeforeshow', '#index', function(){
$(document).on('click tap', '#tick-button', function(){
$("#left-panel").panel( "open");
});
});
CSS :
.ui-panel-closed {
visibility: visible !important;
width: 100px !important;
left: 160px !important;
overflow: visible !important;
}
.ui-content {
padding: 0 15px 15px 15px !important;
}
#tick-button {
position: absolute;
top: 100px;
right: -27px;
width: 25px;
height: 100px;
margin: 0 0 !important;
border-radius: 0 1em 1em 0;
}
#tick-button .ui-btn-inner {
padding: 0 0 !important;
height: 100% !important;
font:10px 'Courier New', 'Verdana',serif;
line-height: 100px;
color: #555;
text-shadow: 1px 1px #fff;
}