I want to preview pptx,docs,pdf by calling view.officeapps.live.com from an iframe. Now I want to modify it. I don't need menu option in iframe or if I can hide some option from menu than its better.
How Can I remove menu option where my code is like below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<iframe
src="https://view.officeapps.live.com/op/embed.aspx?src=https://teachers.gov.bd/contents/2022/August/2/presentation/file_3391_1659433179.pptx&embedded=true&toolbar=0&navpanes=0"
style="height:500px; margin:auto; display:block; width:100%;"></iframe>
</body>
</html>
Expected Result: hide menu option or hide submenu from menu option.
Related
I have a website which must be responsive for mobile phones. I've created it using my desktop. When I adjust browser windows it's working perfectly for mobile phone but when I check it on my real mobile phone: HTC E9 it's not responsive to the mobile view.i have use wordpress please give the solution
which framework are you using "BOOTSTRAP 3.0" and simple media query. and
Check meta tags also in your headers those support mobile platform:-
<meta name="viewport" content="width=device-width, initial-scale=1">
use this css also :-
#-ms-viewport{
width: device-width;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title> responsive layout </title>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</body>
</html>
you can use this markup for responsive and use media query #media (min-width:1600px) and (max-width:3600px) { according to media screen .
I have an absolute positioned div with an image inside it. It is positioned using top and left, and the width of the element is relative, I am using percentages. I am using Bootstrap as responsive framework.
The trouble is, that I can not avoid horizontal scroll, either computer and smartphone is doing horizontal scrolling.
I thought that in absolute positioning this doesn't affect. But it is making the viewport bigger so the horizontal scrolling is appearing.
I have not idea what to do to solve this, or where to start.
You can put
overflow-x: hidden;
on the body tag.
This avoids horizontal scrolling by mistake caused by absolute positioned elements somewhere.
Use this 'meta' tag in your :
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
and then your will look more or less like this :
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=no">
<title>Menu Page</title>
<link rel="stylesheet" href="css/style.css">
</head>
I m trying to do a responsive page using bootstrap latest. My page layout looks like this :
as you can see the image at the back and the heading text with "Selling ...." are overlapeed but when u resize it doent keept its responsive and it mess up , please help.
my css:
<meta charset="utf-8">
<title> | Home </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link href="//fonts.googleapis.com/css?family=Lato:100italic,100,300italic,300,400italic,400,700italic,700,900italic,900" rel="stylesheet" type="text/css">
<!-- Le styles -->
<link href=<?php echo base_url()."assets/css/bootstrap.min.css";?> rel="stylesheet">
<link href=<?php echo base_url()."assets/css/bootstrap-responsive.css";?> rel="stylesheet"
Without media queries the best way to ensure that the image scales is to use width: 100%; height: auto; which will force its width to the size of its container. An alternative is to wrap the image in a div container and then make the div responsive with an overflow: hidden to chop off any part of the image that spills out. This is pretty hacky though.
Otherwise use media queries for specific breakpoints. This is pretty much the only way to do it if you're wanting to control exactly what part of the image the user sees at specific sizes.
We can give more helpful advice if we can see the specific CSS for the image as well as how it's getting messed up.
Did you set the class of the image to img-responsive?
<img class="img-responsive" src="myimage.jpg"/>
I use zurb-foundation version 3.2.3 in a website design. It works perfect on Chrome but there is an issue with FireFox represented in the attached screen shot image. Simply, when I re-size the browser's window to some small width, In FirFox, some parts of the right hand-side does not be shown as you see in the image below. Also the vertical scroll bar in FireFox is disappeared.
The following is the code of the page's head:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="rtl" lang="ar" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Set the viewport width to device width for mobile -->
<meta name="viewport" content="width=device-width" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" type="text/css" href="/quran/themed/slate/css/imports.css" />
<script type="text/javascript" src="/quran/themed/slate/js/libs/modernizr-2.0.6.min.js"></script>
<!--[if lt IE 9]>
<![endif]-->
<!-- IE Fix for HTML5 Tags -->
<!--[if lt IE 9]>
<![endif]-->
<title></title>
It is FireFox version: 16.0.2 on Windows 7 64 bit with screen resolution 1366 x 768.
I need to know how to solve this issue.
It seems that it was a bug in FireFox 16.0.2, when I upgraded the browser to version 17.0. It works fine like shown in the following screen shot:
When I run the code below, I see a blue box on screen.
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style type="text/css">
a {display:block;background:blue; text-indent:-9999px; float:left;}
</style>
</head>
<body>
<a>Hello World</a>
</body>
</html>
How come if I change the text Hello World to HelloWorld, the blue box disappears?
Additional Notes - I am seeing this in google chrome.
As I said in a comment, white-space: nowrap makes it disappear.
However, I'm not sure what's actually going on here. Chrome/Safari + Opera all behave in the same way and show the "blue box", whereas Firefox and IE7-9 do not show the blue box.
Your code: http://jsbin.com/igewuy
With the white-space: nowrap "fix": http://jsbin.com/igewuy/2