Show pdf in iframe inside uiwebview IOS - javascript

I am experimenting some issues while trying to display a pdf in an iframe. On android it works fine but on ios, I have problems because you cannot scroll the pdf. You just see what appears in screen and not anymore. If you try to move the screen you see white. I am loading a webpage inside a uiwebview on ios.
This is a bucle in which I load many pages with many pdfs. So that is why there are a val.id... on id and urls.
This is my code in html:
<div data-theme="e" data-role="page" id="PDFSHOW'+ val.id_boletin + '" data-url="PAGE' + val.id_boletin + '">
<div data-theme="f" data-role="header">
<h1>'+ val.title +'</h1>
</div>
<div data-role="content">
<iframe class="testIframe" src="'+val.link+'" style="width: 600px; height: 5000px; border: medium none;visibility: visible;" >
</div>
</div>
)
I don't know what to do because I always find out that this is the correct way to display it.Any idea

Related

firefox custom video controllers do not show

I`m having an issue with my custom video controller.
When the video is opened in firefox the controllers do not show in fullscreen mode.
I tried everything i found in regards to the topic, but no luck so far.
Here is the html:
<div id="contentContainer" class="border">
<div id="videoStreamed">
<video autoplay="" name="media" src="blob:https://****/f3213f7c-2955-46f6-94d5-e737dc8d619e" title="Customer Centricity" width="100%" height="100%">
Your browser does not support the video tag.
</video>
</div>
<div id="videoController">
<div id="videoProgress">
<div class="progress-bar">
<div id="progress-fill-video" style="width: 7.77856%;">
</div>
</div>
</div>
<div id="playOrPause" class="controllerTabs"><i class="activeController icon-pause"></i></div>
<div id="volume" class="controllerTabs"><i class="activeController icon-mute"></i></div>
<div id="subs" class="controllerTabs"><i class="icon-sub inactiveController"></i></div>
<div id="duration">
<span id="minutes">00</span>:<span id="seconds">12</span>
<span id="total">/ 02:39</span>
</div>
<div id="download" class="controllerTabs"><i class=" icon-download inactiveController"></i></div>
<div id="trascript" class="controllerTabs"><i class=" icon-transcript inactiveController"></i></div>
<div id="fullScreen" class="controllerTabs"><i class=" icon-fullscreen activeController"></i></div>
</div>
</div>
Here is the css :
#videoStreamed {
position: relative;
height: 90%;
width: 100%;
z-index: 1 !important;}
the video itself has the same z-index;
#videoController {
z-index: 2147483647;
position: fixed;
bottom: 0;
width: 100%;
}
That's a wild guess since you didn't shown any js, but I will assume you called Element.requestFullscreen() on your video.
While it works in other browsers, in FF, this will exclude all non descendants of the element on which you called it from being displayed in the fullscreen mode.
I left taking news of the fullscreen API a long time ago, since it was a mess, but at this time specs weren't clear on what should be the correct behavior.
Nevertheless, one thing that works for every browser is to wrap both your video and your controls inside a single container and call requestFullscreen on this container.
Then you will need to style all your elements accordingly in the fullscreen mode with the :fullscreen pseudo-class.
jsfiddle since stacksnippets don't allow fullscreen.
Sounds easy said like that? Well what I omitted is that still today, all browsers don't have a stable version of this API and that you will have to repeat your code like 5 times to deal with vendor-specifics quirks...

Angularjs:-Slick not working for dynamic data in Bootstrap

I am trying to implement a slick carousel in which we can display images of various friends.
The issue I am facing is that when I am working on slick on desktop it is working fine, but as soon as I move into mobile mode/mobile screen the slick carousel breaks. I am not sure whether it is the problem with the image width or size for that matter
The below is the image of what issue I am facing:
As you can see the images are coming one below the other instead of a default carousel.
I am making an API call to fetch the data and display the result. This is my HTML file:
<div class="col-xs-6 col-sm-4 col-sm-pull-4" style="border: 1px solid;height: 400px;">
<slick settings="jumboSlickPanel" style="position: inherit !important;">
<img class="thumbnail_fan" ng-repeat="fanbook in fan" src="{{'https://files.bewakoof.com/uploads/fanbook/thumbs/'+fanbook.image.image_file_name}}" style="line-height: 0px;">
</slick>
</div>
I have used the below code to stop the element getting overflowed. But now the images are not loading by default. If I change the width of the screen it then seems to work perfectly fine. I have added the following:
<slick class="slick_conf" settings="jumboSlickPanel" ng-if="dataLoaded" data="dataLoaded" init-onload="false" style="position: inherit !important;">
<img class="thumbnail_fan" ng-repeat="fanbook in fan" src="{{'https://files.bewakoof.com/uploads/fanbook/thumbs/'+fanbook.image.image_file_name}}" style="line-height: 0px;width: 96%;">
</slick>
Can someone please help me out and tell me how to trigger the carousel?
Thanks for the help.

iscrollview and jquery mobile popups bottom content hidden

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/

how to vary the content height dynamically

I am loading the tab content using
tabbar.setContentHref("a1","Home/About");
I have anothar alternation is to load the content using .,
tabbar.setContentHtml("<iframe src='/Home/About'>")
What I want is that vary the content height dynamically while loading.
I have googled ,but no solutions are working for me.
Is there any other ways to load the content ??.
can any one help me how to fix this.
If you will know the height, you can use the next approach:
<div id="a_tabbar" class="dhtmlxTabBar" tabstyle="silver" imgpath="../dhtmlxTabbar/codebase/imgs/" style="width:755px; color:#FFFFFF;" onbeforeinit="a_tabbar.enableAutoSize(true,true)" oninit="a_tabbar.normalize(755,true); a_tabbar.setTabActive('a1');" offset="15">
<div id="a1" name="Tab 1-1" style="height: 300px; background-color: black;">Content 1</div>
<div id="a2" name="Tab 1-2" style="height: 600px; background-color: #556b2f;">Content 2</div>
</div>

IOS 5 IFrame with a PDF, Display and scroll issues

I am running IOS 5.1.1 on an IPad One. My application is a HTML5 App and uses JQuery Mobile. I have an IFrame that is programmatically inserted. The IFrame has some criteria that is then used to generate a PDF inside the IFrame.
the PDF won't display unless the I-Pad is rotated.
I cannot scroll the IFrame
On I-Pad 2 (running 4.1.3) I have no problems it displays and (two finger) scrolls fine.
The code is as follows:
JQM Page, Content Section
<div class="content overflowScroll" data-role="content">
</div><!-- /content -->
CSS
.overflowScroll {
height: auto;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
The IFrame Insert
strHtml = '<iframe src="' + fullUrl + '" width="100%" height="95%" style="background-color: #FFFFFF;"></iframe>';
$page.find(".content").empty().html(strHtml);
Update
The problem looks to be IOS5 as the same thing happens on a mobile running IOS5. Is there a good alternative here? Perhaps If i remove dependancy from an iframe?

Categories

Resources