I'm developing a phonegap app and trying to use iScroll 4 for scrolling on my pages. It works fine on web, but when I test on device/simulator the scroll doesn't work smoothly. When I touch the device screen it already click on my li element, and if I scroll down it doesn't look like an scroller.
Here's the script that I've take form iScroll website:
function onDeviceReady(){
var myScroll;
function loaded() {
myScroll = new iScroll('wrapper');
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);
}
and here's how my list style looks like:
<div id="wrapper">
<div id="scroller">
<ul id="thelist">
<li>
<div class="item">
<div class="arrow"></div>
<div class="score">98 <span>score</span></div>
<div class="job-title">Expert UI/UX Designer</div>
<div class="detail">
at <span>Hewlett Packpard</span> - 30 connections
</div>
<div>
</div>
</div>
</li>
</ul>
</div>
</div>
I think everything is right, take a look at the live page:
http://rodrigoparra.com/bright/pages/dashboard.html
and here a sample of iScroll on the same app:
http://rodrigoparra.com/bright/simple/index.html
If you test on your device, you will see the first one doesn't work and second one works fine.
Not sure what is wrong :\
Any ideas of how I could fix it?
Thanks Guys
Hi as per my knowledge you need to set your scroll view content size.
Related
I use Materializecss 0.100.2 and i need to open a modal on page load or document ready. But not work, it will be work only if i click on button, i don't know why.
The modal has class "open" but the modal have "display: none" and the div modal-overlay is hidden. It work but not completely.
jQuery(document).ready(function () {
jQuery('#modalInfo').modal();
jQuery('#modalInfo').modal('open');
});
This thing works with vanillaJS. You need to get the modal class using querySelector() and then pass it in M.Modal.init(), and with the help of this instance you can call open() method.
HTML -
<div class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
Agree
</div>
</div>
JS -
document.addEventListener('DOMContentLoaded', function () {
var Modalelem = document.querySelector('.modal');
var instanceModal = M.Modal.init(Modalelem);
instanceModal.open();
});
I want to close modal ONLY when user clicks on close button. I know, how to do this in Bootstrap. Could you help with Materialize?
You can customize the behavior of Materialize modal using Options which can be found Here at the bottom of the page
change option dismissible to false (which by default in modal plugin is true) so modal only get closed when click on close button.
$('.modalselector').leanModal({
dismissible: false
);
Example Modal
$(document).ready(function(){
$('.modal-trigger').leanModal({
dismissible: false
});
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/css/materialize.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/js/materialize.min.js"></script>
<!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
Close
</div>
</div>
You can close the modal with the following code:
$('#modalname').closeModal(); or $('#modalname').modal('close');
$(document).ready(function(){
$('#modal1').openModal({
dismissible:false
});
});
Try This It worked for me
Below code worked for me with materialize.css 1.0.0
$(document).ready(function(){
var elems = document.querySelectorAll('.modal');
var instances = M.Modal.init(elems,{
dismissible:false
});
var singleModalElem = document.querySelector('#login-page');
var instance = M.Modal.getInstance(singleModalElem);
instance.open();
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<div id="login-page" class="modal">
<form class="login-form">
<div class="row">
</div>
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">account_circle</i>
<input class="validate" id="nick_name" type="text">
<label for="nick_name" data-error="wrong" data-success="right">Nick Name</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
Entra
</div>
</div>
</form>
</div>
None of the methods worked for me. However, this did,
$('#modal1').closeModal({ dismissible: true});
The leanModal(), openModal(), and closeModal() all failed for me. Things must have changed since then. Instead:
$("#modal1").modal({
dismissible: false
});
or even just calling the modal a second time:
$("#modal1").modal();
Just set the data-backdrop property to static.
If you only want to insert button for closing the modal (sometime CSS conflict won't allow the modal to close) use this:
<span
class="modal-action modal-close"
style="float:right; font-size:30px;"
onclick="$('#myModal2').closeModal();"
>
X
</span>
Came across the need to do something similar and thought I'll share this for others who are looking for it too. I'm using Materialize 1.0.0 and none of the suggestions above worked for me. Basically, we want to be able to have control over the modal's 'dismissible' property and change it whenever we want, from wherever we want and it shouldn't matter if it is before or after the modal is open. The most elegant way I found was to do it this way. This will control the modal's behavior from disappearing when a user clicks outside of its area.
var m = M.Modal.getInstance(modal);
m.options.dismissible = true|false;
where the modal param is your modal div.
Hope that helps.
Pure JavaScript, this is the way.
The span element that will close the modal.
var span = document.getElementsByClassName("close")[0];
When you want to click the X to close the modal you can use this.
span.onclick = function() {
modal.style.display = "none";
}
If you are clicking outside of modal this will close the modal.
window.onclick = function(event) {
if(event.target == modal) {
modal.style.display = "none";
}
}
$(".modal4").addClass('modal-close');
Where modal4 is class of modal you want to close
In Vue Js, By using materialize-css package
Install package npm i materialize-css
import the package import M from 'materialize-css';
Attach the code below in your eventListener such as click
methods: {
closeMaterializeModal(){
var elem = document.getElementById("modal4");
var instance = M.Modal.getInstance(elem);
instance.close();
}
}
Below code worked for me.
$('#modal1').closeModal();
Reference: materializecss
I am using magnific popup for popup image slideshow. Below is what i have done.
$('.parent-container').magnificPopup({
type:'image',
delegate: 'a',
gallery: {
// options for gallery
enabled: true
},
image: {
// options for image content type
titleSrc: 'title'
}
});
And this is my HTML Markup
<div class="parent-container">
<ul class="row carousel-inner" style="margin:0; padding:0; background:red;">
<li class="active item gallery-photo" style="margin:0; padding:0; background:red;">
<img class="img-responsive" src="images/gallery-1.jpg">
</li>
<li class="item">
<img class="img-responsive" src="images/gallery-2.jpg">
</li>
<li class="item">
<img class="img-responsive" src="images/gallery-3.jpg">
</li>
</ul>
</div>
Now, everything is working fine, but i want the image to change automatically, like when i launch the popup first image will be displayed and then it should change automatically. I am not able to fine anything to make it auto in the documentation .
Your efforts will be greatly apprecialted.
I have found it, i am adding this as an answer so that someone else also can benefit out of it.
You just need to add callbacks.
I have added below code after magnificPopup({}) function. And that will solve the problem images will start moving automatically.
callbacks: {
open: {
setInterval(function() {
$.magnificPopup.instance.next();
}, 2000);
}
}
In my JQUerymobile pages, I have embedded popup div.
Here is an example of my pages content :
<html>
<head>...</head>
<body>
<div data-role="page" id="myPage" data-dom-cache="true" data-theme="a">
<div data-role="content" data-theme="a" >...</div>
<div data-role="footer" data-theme="a" data-id="footer-sante" data-position="fixed">...</div>
<div data-role="popup" id="popupOne" data-dom-cache="true" data-theme="b">
</div>
</div>
<div data-role="popup" id="popupTwo" data-dom-cache="true" data-theme="b">
...
</div>
</body>
</html>
I navigate from pages to anothers. Suddently, my embedded popups disappear from my DOM when I inspect my code.
As shown in my example, the popup location in the source code doesn't seem to change anything to the problem.
Since popups are removed from DOM, the code bellow does nothing (it actually worked before) :
$('#popupOne').trigger('create');
$('#popupOne').popup({ transition: "slidedown", position:"position-header" });
$('#popupOne').popup('open');
Is there a solution to keep my popups in my DOM ?
Is there a better location to embed popups in source code ?
Another way could be to load a popup from an external (cached) page but i never achieved to do that by javascript.
Any idea to solve the problem (or a workaround) ?
(Both) your HTML placements might be incorrect here. Remove the popupOne markup from the end of the page and paste it inside the div with data-role=content like this :
<div data-role="page" id="myPage" data-dom-cache="true" data-theme="a">
<div data-role="content" data-theme="a" >
<div data-role="popup" id="popupOne" data-dom-cache="true" data-theme="b"></div>
</div>
<div data-role="footer" data-theme="a" data-id="footer-sante" data-position="fixed">...</div>
</div>
And if you want to reuse popups, I suggest you go the JS way. You could create popups n the fly and open them. Here's some code which does just that. Feel free to alter it to any thing you want :)
$.extend({
"makePopup": function (text) {
var $popup;
//creat popup element
$popup = $("<div/>", {
"data-role": "popup",
"data-theme": "a",
"data-overlay-theme": "a",
"data-transition": "pop"
}).popup();
//create close element
var $close = $("<a/>", {
"data-role": "button",
"html": "Close",
"href": "#",
"data-theme": "e"
}).on("click", function () {
//click event of close element
$(this).closest("[data-role=popup]").popup("close");
}).buttonMarkup();
//create content div - makes a nice jQM page structure.
var $content = $("<div/>", {
"data-role": "content",
//change this any way you want- Im just adding the text from clicked link here.
"html": "<span>" + text + "</span>"
});
//append $close to $content, then append $content to $popup
$content.append($close).appendTo($popup);
return $popup;
}
});
And when you want to use this, just do this,
var popupEl = $.makePopup("Some HTML");
And then you could, say, open it :
popupEl.popup("open");
Or simply,
$.makePopup("Some HTML").popup("open");
Here's a demo : http://jsfiddle.net/hungerpain/xjz3V/
Hope this is what you wanted :)
I was impressed by the smoothness of the iScroll on iOS so i tried to implement it in my iPhone application.
The iScroll Demo works real fine on my iPhone. But only when the scrollable content is as simple as short text in <li> elements:
<ul id="thelist">
<li>Pretty row 1</li>
<li>Pretty row 2</li>
<li>Pretty row 3</li>
etc..
</ul>
When i tried to put a slightly more complex contents :
<ul>
<li class="GOE-WOTBDO GOE-WOTBIO GOE-WOTBEO " __idx="0">
<div class="cssDivStyle">
<img width="120px" height="74px" src="http://some_jpg_image.jpg">
</div>
<div>
<p>Some long text ....</p>
</div>
</li>
The smoothness is completely gone, and the list hardly scrolls ..
Is there a way to make my contents lighter ?
Any suggestions whatsoever ? Thank you very much !
Here's how i declare my iScroll element:
myScroll = new $wnd.iScroll(
elem,
{
useTransition : true,
topOffset : pullDownOffset,
hScroll : false,
onRefresh : function() {
if (pullDownEl.className.match('loading')) {
pullDownEl.className = 'pullDown';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
}
},
onScrollMove : function() {
if (this.y > 5 && !pullDownEl.className.match('flip')) {
pullDownEl.className = 'flip pullDown';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Release to refresh...';
this.minScrollY = 0;
}
},
onScrollEnd : function(response) {
if (pullDownEl.className.match('flip')) {
pullDownEl.className = 'loading pullDown';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading...';
app.#ma.xxx.xxxxx.clientcommon.utils.IPhoneScroller::callbackSuccess(Lcom/google/gwt/user/client/rpc/AsyncCallback;Lcom/google/gwt/core/client/JavaScriptObject;)(pullDownCallback,response);
}
}
});
[EDIT]
only by removing divs from:
<ul>
<li class="GOE-WOTBDO GOE-WOTBIO GOE-WOTBEO " __idx="0">
<div class="cssDivStyle">
<img width="120px" height="74px" src="http://some_jpg_image.jpg">
</div>
<div>
<p>Some long text ....</p>
</div>
</li>
and making it to:
<ul>
<li class="GOE-WOTBDO GOE-WOTBIO GOE-WOTBEO " __idx="0">
<img class="cssDivStyle" width="120px" height="74px" src="http://some_jpg_image.jpg">
<p>Some long text ....</p>
</li>
Made the scrolling much, much faster !! I have no idea why!
The code below will render your page the way webkit expects it. So redrawing will be massively quicker.
The HTML
<body>
<div class="headerFix">
<div class="header">
<!-- The content in header...logo/menu/e.t.c -->
</div>
</div>
<div class="content"><!-- you dont need this extra div but it keeps structure neat -->
<ul>
<li>List content here which can be as complex as needed</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</div>
<div class="footerFix">
<div class="footer">
<!-- The content in footer -->
</div>
</div>
...
The css
.headerFix, .header {
height:50px; /*important to share width in both divs*/
width:100%;
background:red;
}
.headerFix, .footerFix {
position:relative;
}
.header {
position:fixed;
top:0;
left:0;
/*this is now fixed, but the parent being in flow keeps this div from overlapping your list which is why the height had to be the same for both*/
}
ul li {
/*basic list look for sample purposes*/
display:block;
min-height:40px;
border-bottom:solid 1px #777;
}
.footerFix, .footer {
height:50px; /*important to share width in both divs*/
width:100%;
background:red;
}
.footer {
position:fixed;
top:0;
left:0;
/*you will need to use javascript to find the height of device screen to know what the css value for "top" should really be. This will take some work on android where getting screen sizes is funky if you plan to support it. */
/*If its iphone only you can assume the size which has always been the same, and make an exception for the new iphone 6. I say use javascript to position this footer if you plan to support many platforms*/
}
By the way I recommend using this meta tag in your html head to make sure you use the screen at its best
<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />
When I use 'iscroll-lite.js' library in my mobile application, I fall same problem. Then I had little change in 'iscroll-lite.js' library.
Simply add e.preventDefault() to '_move:' function in 'iscroll-lite.js';
It resolve my problem.