I'm using iscrollview in a jqm app. I have various popups that use the native jqm popup widget. With iOS7 (had same problem with 6.0) on an iPhone 4 the proper scrolling is only activated on changing the orientation?? When the app first loads, in portrait orientation, the lower part of the content won't scroll into view but changing orientation the popup changes size and position as it should and all the content is scrollable. Change back to portrait - the popup content is now scrolling properly?
<div data-role="popup" id="popupBasic">
<div class="header" data-role="header">
<h1>Stuff</h1></div>
<div class="content" data-role="content" data-iscroll>
<h3>Heading here</h3>
<p>Lots of copy here</p>
<p>Lots of copy here</p>
<p>Lots of copy here</p>
<p>Lots of copy here</p>
<p>Lots of copy here</p>
</div>
</div>
Some basic css:
.ui-content {
padding: 0 !important;
}
.ui-listview {
margin: 0 !important;
}
div.iscroll-scroller {
width: 100% !important;
}
.ui-popup .ui-content {
height: 150px !important;
}
I've read a lot of the documentation for iscrollview, particularly about the refresh() of iscrollview but I'm not sure how to implement this. Do I need to make changes to the various parameters in the js file or do I need to implement some other workaround?
You have to give the popUp fixed size! Look here: http://www.gajotres.net/using-iscroll-with-jquery-mobile/
Related
Is there a way to use the browser native scrollbar when scrollOverflow:true instead of the additional scrolloverflow.js file?
I want to use fullPage.js only on the home page of a WP site and I want all pages to have the default scrollbar.
I managed to solve it by setting scrollOverflow:false (default value) and defining an extra container inside the desired fullpage section like this:
<div id="fullpage">
<div class="section">
<div class="inner-section">...</div>
</div>
...
</div>
CSS:
.inner-section {
height: 100%;
overflow-y: scroll;
}
This seems to work fine on desktop screens, but on mobile screens, there are problems with swiping.
I'm currently on a MacBook with the display dimensions of 15.4-inch (2880 x 1800) here is a screenshot of how each section of my website looks for my homepage.
#app (section1)
#section2 (section2)
#section3 (section3)
----------
ISSUE ONE
How can I fix my h3 text to ensure it's responsive on a mobile device and it fits to be seen on a mobile device. Here is a screenshot below of how it looks as you can see it doesn't adjust and fit on the screen correctly. If you look at the JSFIDDLE link to my site at the bottom of the post you can see I have used <div class="col-lg-12"> to ensure it's responsive therefore, no idea why it's going this on mobile devices.
<h1 class="maintxt bounceInUp animated">Hi, welcome to my portfolio</h1>
<h2 class="maintxt bounceInUp animated">My name is Liam Docherty</h2>
<h3 class="cd-headline bounceInUp animated loading-bar">
<span>I'm a</span>
<span class="cd-words-wrapper">
<b class="is-visible">Front-End Web Developer</b>
<b>Graphic Designer</b>
</span>
</h3>
Here is a screenshot of a mobile device view of my website showing the issue.
JSFIDDLE
white-space: nowrap will prevent the text from wrapping on small screens. Remove that from .cd-words-wrapper b:
.cd-words-wrapper b {
display: inline-block;
position: absolute;
width: 100%;
text-align: center;
left: 0;
top: 0;
}
https://jsfiddle.net/wdafatrx/8/
You could also use vw and vmin units to keep them inside the screen.
.cd-words-wrapper b has white-space:nowrap set - this will cause all text inside it to stay on one line. Removing that is the fix to your responsiveness issue.
Use a media call in your css;
#media screen(max-width: 480px) {
<!--your div class name--> h3 : <!--new font size--> }
As far as I understand it is not possible to execute JS whilst scrolling. All working iOS parallax scroll scripts that it know of recreate the native scrolling effect in js to achieve this eg. Iscroll
How then have apple achieved it on their own website.
Look at the blurred background images as you scroll on this page.
http://www.apple.com/ios/carplay/
It is possible to create a CSS purely on iOS devices without JS. There are some great examples such as Keith Clark's you can find here
However i personally found that this did not have the desired effect on iOS devices. As i expected the page to continue to scroll after i have released my touch, but it seems this didn't happen - almost as though the page was 'sticky'. I found this was the case with a number of Pure CSS solutions i came across.
I am usually working with Bootstrap so the following example is what i use to produce the parallax effect i was after.
In your CSS add this:
#fixedbg {
background:url(../img/yourparallax-image.jpg) no-repeat center center;
background-size:cover;
height:100%;
position:fixed !important;
width:100%;
z-index:-2;
top:0;
}
.header {
display: table;
position: relative;
width: 100%;
height: 100%;
}
Then in your html add this:
<div id="fixedbg"></div>
<header id="top" class="header">
</header>
<section id="article" class="article">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-10 col-md-12">
<p class="text">Example text content goes here</p>
</div>
</div>
</div>
</section>
The #fixedbg calls the correct image from the CSS and then the header section sets up my full page image that i want to run the parallax effect on.
I usually place the #fixedbg css insude media queries for various device screen sizes as i like to use different ones depending on the content.
Please note this is a simple parallax and to date i have not 'stacked' with multiples on the same page, but between the above code and that sampled in Keith Clark's example above, this should provide a good starting point.
After a long time working on a jQM project, almost complete in functionality. Now working on UI. When I try to set full cover CSS image background for jQM Page, it either doesn't work as expected.
I google/stackoverflow a lot on this matter. To my surprise, there is no official documentation, direct/simple way to solve this problem.
Many suggestion will work for some people and not for others (even all in supported browser). For me, at first I can't get the 100% height, then after some google and help from other programmer, I can get the 100% height but now its bouncing background before and after transition.
The question for this post, is there any correct way/proper way, official way to set jQM Page background image WITHOUT all the PROBLEMs?
I'm sure this correct/proper/actual way can help and benefits many other developers.
Please advice, thank you.
Working example: http://jsfiddle.net/Gajotres/vds2U/51/
Content background image
HTML
<div data-role="page" id="index" data-theme="a" >
<div data-role="header">
<h3>
First Page
</h3>
Next
</div>
<div data-role="content" id="content">
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
CSS
#content {
padding: 0;
position: absolute !important;
top : 40px !important;
right : 0;
bottom : 0 !important;
left : 0 !important;
background:url(http://htc-wallpaper.com/wp-content/uploads/2013/11/bulldog-puppy1.jpg);
background-size:cover;
background-repeat:no-repeat;
}
Read more about this solution here.
Page background image
CSS
.ui-page {
background:url(http://htc-wallpaper.com/wp-content/uploads/2013/11/bulldog-puppy1.jpg);
background-size:cover;
background-repeat:no-repeat;
}
I just finished a website, everything was working fine (what I thought)
Until I discover a huge BUG that couldn't fix:
I have a navigation BAR (png file) and added on it buttons (simple DIVs elements), When the page is openned 1st, all is fine, but if you scroll the page a bit, the buttons aren't working as they should.
Please check this link: (scroll the page a bit down and you'll notice that button aren't interacting anymore)
http://www.genius-solutions.net/GSIS/index.html
But if you move the cursor a bit above the buttons, you'll find them:
(HTML - JavaScript)
here the CSS part:
#btn {position:absolute;left:0px;top:0px;z-index:4;}
#btn1 {position:absolute;left:80px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0.0;cursor:pointer;}
#btn2 {position:absolute;left:230px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0.0;cursor:pointer;}
#btn3 {position:absolute;left:380px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0;cursor:pointer;}
#btn4 {position:absolute;left:530px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0;cursor:pointer;}
#btn5 {position:absolute;left:680px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0;cursor:pointer;}
#btn6 {position:absolute;left:830px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0;cursor:pointer;}
#html, body {
background:#002a4c;
overflow:scroll;
width:1024px;
height:768px;
margin: 20px auto; /* center */ padding: 20px;
}
and here the HTML part:
<body >
<div id = 'applet' home='579' services='1437' solutions='1192' partners='100' aboutus='654' contacts='216'>
<div id='applet_t'>
<div id='btn'>
<div id='btn1'></div>
<div id='btn2'></div>
<div id='btn3'></div>
<div id='btn4'></div>
<div id='btn5'></div>
<div id='btn6'></div>
</div>
</div>
<div id='inf'></div>
</div>
</body>
Your issue lies in IMO very improper use of absolute positioning of your elements. As soon as you scroll the page the location of the actual "hit" placeholder moves with the page but not your background.
Test case: try to move your page up a little bit and you will be able to "click" above the actual buttons.
Unless you have a good reason for absolutely positioned element use static == default positioning for most of your elements.