How to render the following html in UIwebview using loadHTMLString.
The webview is showing blank screen.
<html>
<head>
</head>
<frameset rows="1,*" frameborder=0 framespacing=0 cols="*">
<frame src="blank.html"
marginwidth="0" marginheight="0"
scrolling="no noresize">
<frame src="index1.html"
marginwidth="0" marginheight="0"
scrolling="yes noresize">
<noframes></noframes>
</frameset>
</html>
Related
I created a code for collapse it is expanded on large and mobile screen How do i collapse it on mobile screen.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>
<body>
<div class="container py-5">
<div class="py-5">
<a href="#" data-bs-target="#mycollapse" data-bs-toggle="collapse"
class="btn btn-primary">collapse button</a>
</div>
<div id="mycollapse" class="collapse collapse-horizontal show hide-sm border rounded p-5 bg-light">
<span>here is content of collapse</span>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>
Guide me please show collapse and hide-sm screen
I want to know how to show and hide collapse on large screen and mobile screen.
I've written this to a html page and the output is like this
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
<div style="margin: 0 auto; width:100%; height:1200px;">
<object type="text/html" data="http://www.live24sports.com"
style="width:100%; height:100%; margin:1%;">
</object>
</div>
<div style="margin: 0 auto; width:100%; height:1200px;">
<object type="text/html" data="http://paste.hgcommunity.net"
style="width:100%; height:100%; margin:1%;">
</object>
</div>
</body>
</html>
i think you want to get data attribute. you can use the below method to get any attribute.
if you can use jquery
$('object').attr('data');
or with plain javascript
document.querySelector('object').getAttribute("data");
edit
since you have multiple objects you can use
document.querySelectorAll('object')
to get a list of all objects and then use a loop to getAttribute('data'); on each item.
I want to create a very simple layout with buttons on bottom of screen and some centered content.
How may I achieve this with Intel app Framework UI.
I need to support all screen sizes of course.
Here is example in Intel App Framework: http://jsbin.com/valuc/1/edit
<!DOCTYPE html>
<html>
<head>
<title>App Framework</title>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0;" />
<link rel="stylesheet" type="text/css" href="http://cdn.app-framework-software.intel.com/2.0/af.ui.css" />
<link rel="stylesheet" type="text/css" href="http://cdn.app-framework-software.intel.com/2.0/icons.css" />
<script type="text/javascript" charset="utf-8" src="http://cdn.app-framework-software.intel.com/2.0/appframework.ui.min.js"></script>
<style>
#page1 {text-align: center}
</style>
</head>
<body>
<div id="afui">
<div id="content" style="">
<div class="panel" title="Welcome" id="page1" selected="true">
<p>This is come content</p>
<p>This text is centered in the panel</p>
</div>
</div>
<div id="navbar">
<a class="icon home" href="#button1">Button 1</a>
<a class="icon settings" href="#button2">Button 2</a>
</div>
</div>
</body>
</html>
You also refer to some basic templates created using Intel App Framework to get started: https://github.com/krisrak/appframework-templates
can you please tell me How to show and hide header when user click anywhere in page?
I think i need to use toggle class and ('.header').show('slow'); or hide .i don't know how to use that?
http://jsfiddle.net/ravi1989/YcxtS/
<div data-role="header">
<h1>Add Images</h1>
</div>
This is basis header .But I need to implement header having multiple images scrolling horizontally .
how to scroll images horizontally in jquery mobile?
Just add these attributes to your header: data-position="fixed" and data-fullscreen="true".
Working example: http://jsfiddle.net/uTpH4/
HTML:
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<!--<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>-->
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="b" data-role="header" data-position="fixed" data-fullscreen="true">
<h1>Index page</h1>
Next
</div>
<div data-role="content">
</div>
</div>
</body>
</html>
I am a fresher in jquery mobile. I using the code get from stackoverflow. My problem is, this solution works well in samsung and other but not works in iphone and sonyericsson. Please help anyone...
I want to go back at the top of the page while scroll-down at bottom of the page by clicking link..
Here is my code:
<a id="uptotop" class="ui-btn-right" data-icon="arrow-u" data-theme="a">▲TOPにもどる </a>
<script type="text/javascript">
$('div').live('pagebeforecreate',function(event, ui){
$('#uptotop').live('click',function() {
$('html, body').animate({scrollTop: '0px'}, 800);
});
});
</script>
what about using a simple anchor? example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1><a name="top"></a>Header</h1>
</div> <!-- /header -->
<div data-role="content">
<p>lots of content here...<br>scroll down to find the button...
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
Back to top of page ...
</p>
</div> <!-- /content -->
</div> <!-- /page -->
</body>
</html>