I have an app using appmobi/xdk/appframework when I put in the package
It disables the scrollinf of the page vertically on the iPhone. However, it also disables the scrolling of the Google map on the page. Any ideas on how to re-enable the map scrolling?
Just add scrolling="no" in your panel and data-footer="none" if u want more space for map
<div id="main" class="panel" selected="true" scrolling="no" data-footer="none">
<!--If your are using the appmobi 3.4.0 platform -->
<div id="#pagetitle" title="Yourtitle" class="panel" scrolling="no">
<div id="map-google" style="overflow:visible;">
</div>
</div>
<!--If your are using the appmobi/intel XDK 4.0 platform-->
<div id="#pagetitle" title="Yourtitle" class="panel" style="overflow:hidden;">
<div id="map-google" style="overflow:visible;">
</div>
</div>
the key is to add style="overflow:hidden" on your panel.
Here is sample code with appframework + google maps: http://jsbin.com/UKaQetO/1/edit
works on iphone,android and windows phone.
Related
I have a view in my ASP.NET Core application.The view split into 2 div containers Left and right containers in the 1st container i load some stuff with java script Now in my seconded container i want to load a different website example http://example.com
<div class="page-container">
<div class="panel-container">
<div class="panel-left">
panel-left
</div>
<div class="splitter">
</div>
<div class="panel-right">
I want to load a website here (http://example.com)
</div>
</div>
</div>
You can use an iframe tag:
<iframe src="https://www.w3schools.com"></iframe>
I am creating a site with the fullPage.js plugin. I got it to work on the desktop browser but it's not working as expected in mobile.
this is my HTML
<div id="fullpage">
<section id="red" class="section"></section>
<section id="blue" class="section"></section>
<section id="green" class="section"></section>
</div>
and this is my jquery
$(document).ready(function(){
$('#fullpage').fullpage({
navigation: true,
});
});
while navigation:true I can skip (i wouldn't say scroll) to different sections by touching the navigation dots. I can swipe to scroll up from there as seen in this video. it works in the chrome device emulator though
video of scroll in the works
P.S. I don't think scrollOverflow:true would serve my purpose as there is not much content to scroll in the site.
I figured out the problem. it was not with fullPage.js. In my HTML, I included jquery.slim.min.js instead of regular jquery.min.js
Apparently, fullPage.js only works with jquery.min.js
make it your code like this and try with that jquery
<div id="fullpage">
<div class="section">
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
</div>
</div>
So I have a strange problem regarding the, play icon on click event on Samsung S7.
On other phones everything is working correctly but, on Samsung S7 I have strange issue, so when user clicks on icon it doesn't recognize the click event, it just opens google search.
Here is my html
<div id="video-blurb" class="et_pb_blurb et_pb_module et_pb_bg_layout_light et_pb_text_align_left et_pb_blurb_0 et_pb_blurb_position_top">
<div class="et_pb_blurb_content">
<div class="et_pb_main_blurb_image"><span class="et-pb-icon et-waypoint et_pb_animation_off et-animated" style="color: #23282d;">I</span></div>
<div class="et_pb_blurb_container">
<h4>Play Video</h4>
<div id="cover-video">
<span class="closer">X</span><br>
<div class="fluid-width-video-wrapper" style="padding-top: 56.25%;"><iframe id="youtube-vid" src="https://www.youtube.com/embed/AoHDeBBx4og?wmode=opaque" frameborder="0" allowfullscreen=""></iframe></div>
</div>
</div>
</div> <!-- .et_pb_blurb_content -->
</div>
And also Js
$('#video-blurb .et-pb-icon').click(function(ev) {
$('#cover-video').fadeIn();
$(videoBlure).attr('src','https://www.youtube.com/embed/AoHDeBBx4og?wmode=opaque');
$('#youtube-vid')[0].src += "&autoplay=1";
ev.preventDefault();
});
I hope you understood the question
Here is screenshot:
My jQuery mobile popup header doesn't have the same size as the content.
jQuery 1.8.3 and jQuery mobile 1.2.0.
<div data-role="popup" id="commentPopup" style="width: 800px;" class="ui-corner-all">
<div data-role="header" data-theme="b" class="ui-corner-top">
<h1>Please enter your comment</h1>
</div>
<div data-role="content" data-theme="b" class="ui-corner-bottom ui-content">
<textarea></textarea>
OK
CANCEL
</div>
</div>
For info, I open it with $('#commentPopup').popup("open");.
Is it possible to disable the scroll while the popup is opened?
Is it possible to prevent the user from closing the popup when clicking in another place of the page?
Thanks
I was overriding a CSS .ui-content class as #Omar found it.
The problem is solved.
Concerning the dismissible, this is not possible with jQM version < 1.3.0.
I am using scrollview plugin on a jquery mobile file and works great on iOS. However when I use an iframe, scroll y is not applied and its content remains fixed. How to apply scroll y on an iframe? Thank you
<div data-role="page" id="init" data-theme="a">
<div data-role="header" id="head" data-position="fixed" data-tap-toggle="false">
</div>
<div data-role="content" data-scroll="y" id="cont" data-theme="a" style="border:none;">
<iframe data-scroll="y" src="http://www.abcd.com" style="border: 0px none;" height="100%" width="100%">
</iframe>
</div>
<div id="id3">
</div>
</div>
all necessary jquery mobile and scrollview plugins are attached.
Please #Jaume try this,
$(function() {
$('#cont').scrollview({
direction:'y'
})
})
Else, you need to include the jquery.mobile.scrollview.js file.