I have an desktop application using swiper to slide page, but when I put a select tag in slide page ,the select tag can not pop the drop-drown box, anyone has happend the problem?
Thanks advance!
here demo is:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="styles/swiper/idangerous.swiper.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"> </script>
<!-- 翻页 依赖jquery -->
<script type="text/javascript" src="js/swiper/idangerous.swiper-1.9.js"></script>
<title>swiper demo</title>
<script type="text/javascript">
$(function(){
$('.swiper-container, .swiper-slide').css({
height: ($(window).height()) + 'px',
width: '100%'
});
var mySwiper = $('.swiper-container').swiper({
//Your options here:
mode:'horizontal',
loop: false,
keyboardControl: true,
// mousewheelControl: true,
onSlideChangeStart: function(swiper){
pageCurrentNum = swiper.realIndex;
$('#currentPage').text(pageCurrentNum + 1);
gridster = null;
gridster = $('#gridster' + pageCurrentNum +'>ul').gridster(gridsterOpts).data('gridster');
if(!confingInfo.isDebug){
gridster.disable();
}
},
});
})
</script>
</head>
<body>
<div class="swiper-container responsive">
<div class="swiper-wrapper" style="background:red;">
<!--First Slide-->
<div class="swiper-slide ">
page1
<select>
<option>test1</option>
<option>test2</option>
<option>test3</option>
</select>
</div>
<!--Second Slide-->
<div class="swiper-slide">
page2
</div>
</div>
</div>
</body>
</html>
I solved the problem by using the codes underline:
$('.swiper-slide select').on('mousedown touchstart MSPointerDown', function(e){
e.stopPropagation();
});
Hope this can help you who has happened the same problem like me!
I know this is old question.
But on Swiper 3, Dean's answer does not work.
My solution is add class="swiper-no-swiping" to SELECT tag.
Hope this helps.
Or if you don't need the touch events on desktop, you can disable it with the option simulateTouch.
See: http://idangero.us/swiper/api/
Related
'my-layout' code :
<link rel="import" href="../bower_components/iron-icons/iron-icons.html" >
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html" >
<link rel="import" href="../bower_components/paper-drawer-panel/paper-drawer-panel.html" >
<link rel="import" href="../bower_components/paper-header-panel/paper-header-panel.html" >
<link rel="import" href="../bower_components/paper-toolbar/paper-toolbar.html" >
<polymer-element name="m-layout" >
<template>
<paper-drawer-panel>
<paper-header-panel drawer>
<paper-toolbar>
<div>Application</div>
</paper-toolbar>
<div> Drawer content... </div>
</paper-header-panel>
<paper-header-panel main>
<paper-toolbar>
<paper-icon-button icon="menu" style="color: white;" paper-drawer-toggle></paper-icon-button>
<div>Title</div>
</paper-toolbar>
<div> Main content... </div>
</paper-header-panel>
</paper-drawer-panel>
</template>
<script>
Polymer({
is: 'm-layout',
togglePanel: function() {
this.$.paper_drawer_panel.togglePanel();
}
});
</script>
</polymer-element>
If I add paper-drawer=toogle attribute, paper-icon-button in main drawer is disappear...
'main.jsp' code:
<%# page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<html>
<head>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="elements/m-layout.html" >
<style>
html, body {
height: 100%;
}
body {
margin: 0;
background-color:#E5E5E5;
}
</style>
</head>
<body>
<m-layout></m-layout>
</body>
</html>
If paper-drawer-toggle attribute remove and main.jsp run, I can see icon-button but toggle is not working..
I can't found reference about paper-drawer-panel toggle and behavior.....
What should I do to toggle paper-drawer-panel?
There are a few things I noticed in your code.
In your my-layout code you should also be importing polymer.html
Which version of Polymer are you using? Since you are using the webcomponents-lite.min.js and the title states Polymer 1.0, I am assuming you are using 1.0. In Polymer 1.0 elements are defined using <dom-module id="m-layout"> instead of <polymer-element name="m-layout">
the toggle function in your script is not necessary, the toggle works out of the box using the paper-drawer-toggle attribute on the paper-icon-button element.
I am not sure of your directory structure but the following code works for me. I am assuming you have bower_components (including all polymer, iron, and paper elements) inside of your root. Also in your root I am assuming you have an elements directory containing your m-layout.html file.
You should check your developer tools in your browser to check that all your resources are loading correctly and there are no errors. If so, then your import paths to the components are wrong.
In your elements/m-layout.html:
<link rel="import" href="../bower_components/iron-icons/iron-icons.html" >
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html" >
<link rel="import" href="../bower_components/paper-drawer-panel/paper-drawer-panel.html" >
<link rel="import" href="../bower_components/paper-header-panel/paper-header-panel.html" >
<link rel="import" href="../bower_components/paper-toolbar/paper-toolbar.html" >
<link rel="import" href="../bower_components/polymer/polymer.html">
<dom-module id="m-layout" >
<template>
<paper-drawer-panel>
<paper-header-panel drawer>
<paper-toolbar>
<div>Application</div>
</paper-toolbar>
<div> Drawer content... </div>
</paper-header-panel>
<paper-header-panel main>
<paper-toolbar>
<paper-icon-button icon="menu" style="color: white;" paper-drawer-toggle></paper-icon-button>
<div>Title</div>
</paper-toolbar>
<div> Main content... </div>
</paper-header-panel>
</paper-drawer-panel>
</template>
</dom-module>
<script>
Polymer({
is: 'm-layout'
// this is not needed
//togglePanel: function() {
// this.$.paper_drawer_panel.togglePanel();
//}
});
</script>
and this in main.jsp:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>My Test</title>
<!-- Load platform support before any code that touches the DOM. -->
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="elements/m-layout.html">
</head>
<body>
<m-layout></m-layout>
</body>
</html>
Also keep in mind, that the drawer (and therefore the toggle) is only activated when the screen is very small (mobile). To force the drawer behavior no matter what the screen size, you can force the narrow view by setting the force-narrow attribute: <paper-drawer-panel force-narrow="true">. Alternatively you can set the width at which the drawer should be activated, <paper-drawer-panel responsive-width="800px">.
http://jsbin.com/winedi/edit?html,output
<style>
</style>
<template>
<paper-drawer-panel id="drawer">
<div drawer>
drawer
</div>
<paper-header-panel main>
<paper-toolbar class="teal-500">
<paper-icon-button icon="menu" on-tap="menuToggle"></paper-icon-button>
<div class="title">{{toolBarTitle}}</div>
<paper-icon-button icon="search"></paper-icon-button>
</paper-toolbar>
</paper-header-panel>
</paper-drawer-panel>
</template>
<script>
Polymer({
is: "layout-inbox",
menuToggle: function() {
if (this.$.drawer.narrow && this.$.drawer.getBoundingClientRect().width < parseInt(this.$.drawer.responsiveWidth)) {
this.$.drawer.togglePanel();
} else {
this.$.drawer.forceNarrow = !this.$.drawer.forceNarrow;
}
},
properties: {
toolBarTitle: {
type: String,
value: "lucok"
}
}
});
</script>
</dom-module>
I think your code is working. The paper-drawer-toggle attribute is used to tell the browser to show the menu icon when the screen with is narrow. When you size the screen to a small enough width, you should seen the menu icon appear.
Maybe did you just miss the correct DocType in the head of main.jsp
<!DOCTYPE html>
I'm using jQuery 2.1.1 and jQuery UI 1.11.1. If the jQuery dialog is non-modal, then the date picker is dismissed automatically once a date is selected. However, if the dialog is modal, then the datepicker still stays open even once a date is selected.
This only happens with IE 10, not with Chrome or Firefox. Anyone knows how to fix this?
Here is my simple HTML page:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<script>
$(function() {
$("#showDialog").click(function(){
$("#mydate").datepicker();
$("#newdialog").dialog({modal: true});
});
});
</script>
</head>
<body>
<button id="showDialog">Show Modal Dialog</button>
<div id='newdialog' style="display: none; width: 300px; height: 200px;">
<h5>Test DatePicker in modal dialog</h5>
Enter name: <input type="text" id="myname" />
<br />
Select date:<input type="text" id="mydate" />
</div>
</body>
</html>
I want to make a redirection with jQuery mobile right just after the page loads.
Something like this
<?php
... some php stuff here
?>
<html>
<head>
<link rel="stylesheet" href="css/jquery.mobile-1.1.1.min.css" />
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery.mobile-1.1.1.min.js"></script>
</head>
<script>
$.mobile.changePage("index.php");
</script>
But nothing happens...
Thanks!
Nothing happens because jQueryMobile hasn't done it's magic yet.
Try:
$(document).bind('pageinit', function() {
$.mobile.changePage("index.php");
});
You could also try some of the events listed at http://jquerymobile.com/demos/1.1.1/docs/api/events.html
Edited following comment:
The following works as expected for me:
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script>
$(document).bind('pageinit', function() {
$.mobile.changePage("#pageTwo");
});
</script>
</head>
<body>
<div id="firstPageId" data-role="page">
Page One
</div>
<div id="pageTwo" data-role="page">
Page Two
</div>
</body>
</html>
You can use plain ol' JavaScript for this, you don't need jQuery:
window.location = "index.php";
To do it after the page loads, add a $(document).ready() handler:
$(document).ready(function () {
window.location = "index.php";
});
Try, adding your page-id in the script with .live, something like this:
$('#mainpage').live('pageinit', function (event) {
alert("hi");
//$.mobile.changePage("index.php");
});
Here is the full example: http://jsfiddle.net/KyKFE/
On the other hand, you can also use just plain javascript function or php (if .php page) to do the redirection. They are many different ways to do this.
Please try this to end of your page and before </body> tag,
<script>
$(window).load("index.php", function() {
// stuff or not
});
</script>
I hope help you. :)
file://localhost/C:/Users/kürşat/Desktop/yeni%20site/faq%20-%20Kopya/kopya.html
this is my photography tutorial page. I'm did manage to toggle on/off when someone clicks a question.
What I can't do : the top right button can expand all but it cannot contract all questions.
I should contract/expand all even if some of them were previously opened. At first my code was doing the opposite of previous state.
How can I do that?
Here is my code :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="styles.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("li").click(function(){
$(this).next().toggle("fast");
$(li).css("background-color","#999");
$(article).css("background-color","#FDFEE9");
});
$(document).ready(function(){
$("#expand").click(function(){
$("article").toggle(true);
$(this).text($(this).text() == 'Genişlet' ? 'Küçült' : 'Genişlet');
});
$("article").toggle();
});
});
</script>
</head>
<body>
<div id="page"><h1>Temel Fotoğrafçılık Bilgileri<button id="expand">Genişlet</button></h1>
<div class="faq">
<!-- The FAQs are inserted here -->
<ul>
<li>question 1?</li>
<article> <p>answer 1.</p></article>
<li>question 2?</li>
<article> <p>answer 2.</p></article>
<li>question 3?</li>
<article> <p>answer 3.</p></article>
</ul>
</div>
</body>
</html>
Here is the working JSfiddle version:
http://jsfiddle.net/reJu9/
Change the expand click callback to
$("#expand").click(function(){
var $this = $(this);
if($this.text() == 'Genişlet')
$('article').show();
else
$('article').hide();
$this.text($this.text() == 'Genişlet' ? 'Küçült' : 'Genişlet');
});
Demo: http://jsfiddle.net/joycse06/reJu9/1/
Maintain a variable, which tells you if the button should expand or collapse questions.
Check this updated fiddle
I would like to append some code to a page using jQuery/jQuery mobile,
but I am tripping up on some of the page() and pageshow and refresh methods.
Here is my code. you can cut, paste and run as is.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
<script>
//$(document).ready(function() // get error when I use this
$('div').live('pageshow', function () {
function fnCreateGroups(){
var section = "<p>and add a whole bunch of html code...</p>";
myClone = $(section);
alert((myClone).html()); // this works
myClone.appendTo("#placeholder").page(); // but not appending
}
fnCreateGroups();
});
</script>
</head>
<body>
<div data-role="page">
<div id="placeholder">
<div data-role="content">
<div id="placeholder">this is a small amount of html code.</div>
</div>
</div>
</div>
</body>
</html>
Beta2 release notes:
http://jquerymobile.com/blog/2011/08/03/jquery-mobile-beta-2-released/
instead of:
myClone.appendTo("#placeholder").page();
try
myClone.appendTo("#placeholder").trigger('create');
From your comment:
You are running the live() on all div's
$('div').live('pageshow', function ()
try using the page id instead
$('#change_this_page_only').live('pageshow', function ()
and this:
<div data-role="page">
to something like this:
<div data-role="page" id="change_this_page_only">