embed-responsive shows white border in bottom - javascript

I have a webpage, that shows another html page using iframe. Please see my code below.
<html>
<head>
<title>DotWifi</title>
<meta http-equiv="Pragma" content="no-cache">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="http://www.xxxx.com/xxxxxx/xxpage?xxxId=123&tok=$tok&authaction=$authtarget"></iframe>
</div>
</body>
</html>
I am try to show a responsive webpage using iframe using embed-responsive-item class. But it shows a white border in bottom. Please see the below image.

That's not a border, it's simply the background of the body.
The iframe's parent div, embed-responsive-4by3 is supposed to have a width to height ratio of 4 by 3. That's what this class does! So if the width is 416 pixels (the width of the window) then the height becomes 312 pixels.
That's all there is to it.
If you don't want that, the solution is to remove the embed-responsive-4by3 class from the div.
Or, if all your page ever does is show another page in an iframe, you can dispense with Bootstrap altogether and put only the iframe on the page!

Related

Why does my Chrome extension's browser action popup not show?

Here is my manifest.json file:
{
"browser_action" :
{
"default_icon" : "Assets/Chromium logosu.png",
"default_popup" : "main.html"
},
"description" : "Bu eklenti, Chromium'un güncelleştirmelerini denetler ve yükler.",
"manifest_version" : 2,
"name" : "Chromium Güncelleştirici",
"version" : "1.0"
}
And here is my main.html file:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Page</title>
<meta name="generator" content="WYSIWYG Web Builder 16 - https://www.wysiwygwebbuilder.com">
<link href="Chromium_Güncelleştirici_Eklenti_Projesi.css" rel="stylesheet">
<link href="main.css" rel="stylesheet">
</head>
<body>
<div id="wb_Image1" style="position:absolute;left:0px;top:0px;width:320px;height:50px;z-index:0;">
<img src="Assets/Başlık.png" id="Image1" alt=""></div>
<div id="wb_Image7" style="position:absolute;left:0px;top:160px;width:320px;height:35px;z-index:1;">
<img src="Assets/Telif Hakkı Metni.png" id="Image7" alt=""></div>
<div id="wb_Image2" style="position:absolute;left:0px;top:50px;width:320px;height:37px;z-index:2;">
<img src="Assets/Güncelleştirmeleri Denetle (Pasif).png" id="Image2" alt=""></div>
<div id="wb_Image3" style="position:absolute;left:0px;top:87px;width:320px;height:36px;z-index:3;">
<img src="Assets/Ayarlar (Pasif).png" id="Image3" alt=""></div>
<div id="wb_Image4" style="position:absolute;left:0px;top:123px;width:320px;height:37px;z-index:4;">
<img src="Assets/Hakkında (Pasif).png" id="Image4" alt=""></div>
</body>
</html>
When I click the extension's button, I get this:
My extension's popup menu
Actually, my popup page should be shown like this:
The UI of my popup file
So, what should I do in order to fix this issue?
Popup html takes height and width from the content of the html loaded.
In your case, all div elements inside body are position:absolute, which results in zero height and width to body tag, and hence the Popup UI appears as a small box when loaded as browser action popup.
You can verify this behaviour by giving fixed height or width to tag in your css.
Why it appears fine when main.html loaded directly to browser?
It actually appears fine, but over here as well the body results in zero height, but because the viewport is not depended on the content of body, it shows the content outside the body as depicted in sample screenshot below.
How to fix?
Fix your CSS such that body gets overall height of the actual content that you need to show. Not sure why every element here you have placed as position absolute, I feel you can avoid that approach and still get the UI as expected by you.
Worst case, you can hardcode the body with fixed height and width of what you need the actual popup html size to be.
#Junaid Hamza
Ok, I have fixed my issue via doing these things:
1- First of all, I have removed all of "position:absolute;"s. But, when I did this, I encountered another issue. This time, the order of images was broken.
2- In order to fix the second issue, I have used a weird method. I have merged last three images into one image.
Anyway, thank you for your answer.😊

Div size differes when viewport is used

take a look at this site www.naamdesigns.com
view this site with desktop and also with mobile. In mobile, the header div in blue does not fit the screen entirely, it covers only 50%.
why this problem occur?
Why did you set overflow-x: hidden; on body tag? I guess on mobile 100% width is only the visible part, where the whole content doesn't fit, but just half of it.
lets try to put this in your head tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Added :
this is my idea, i dont know it's would works. Lets make a container to wrap all yor contents.
<body>
<div id="wrapper" style="width:100%">
<div id="your_header"style="width:100%"></div>
<div id="your_body" style="width:100%"></div>
</div>
</body>

How to set div margins for slide animation

I am trying to make an animation that must only be shown within a specific margin. For example, I have a square div from left to right(100px to 500px) and top to bottom(100px and 500x). A picture is inside this square, the picture will animate from left to right. What I want is to progressively hide the picture when it reaches the square left corner until the picture is completely hidden. This is something similar to a sliding banner. I have tried by setting div margins, but did not work. I am using jquery, but I am open to other libraries. Any suggestion, page or anything will be helpful.
This is an example of what I am doing. The id=picture is sliding to 900px, but what I want is to progressively hide the picture once it has reached the 500px of the id=square.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="js/jquery-1.10.1.js"></script>
<style>
body{ background-color:#94B8B8;}
</style>
</head>
<body><!--border-color:white-->
<div id="square" style = "width:500px;height:500px;background-color:blue;position:relative;">
<div id="picture" style = "width:100px;height:100px;background-color:white;position:relative;top:50px;left:50px;"></div>
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
$('html').mousedown(function(e){
$("#picture").animate({left:"900px"},1000);
});
});
</script>
Thanks,
Joe|_
jsfiddle: http://jsfiddle.net/jZaxW/1/
You need to add overflow hidden to the square.
CSS:
body{ background-color:#94B8B8;}
#square{overflow:hidden;}
Also, you are loading your libraries in the wrong order. jQuery must be loaded before jQueryUI, although that isn't the issue at hand.
http://jsbin.com/unoqew/1/edit
$(document).ready(function(){
$('html').mousedown(function(e){
$("#picture").animate({left:350, opacity:0},1000);
});
});

Div display:none - want to only load content when it's visible

I have a series of divs with images as backgrounds, fairly large images at that, 1-2 MBs.
What I'd like to do is only load the content within them when they're visible.
(They're display:none by default and onclick of various links I use jquery to slide them down/up).
you should post your code, but I think this might be what you are looking for.
html
Link to click
<div id="imgname"></div>
jquery
$('a').click(function(){
$('div#imgname').html('<img src="image.path" />');
});
send html and slide the div block down
Link to click
<div id="imgname"><img src="image.path" /></div>
Below is a rough sketch of an idea which might work. Create hidden image tags for each of the photos you want to load, attaching onload event handlers directly. insert simply takes the image which just loaded and creates a css background rule to be inserted into the appropriate div.
<!DOCTYPE html>
<html>
<head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type="text/javascript" charset="utf-8"></script>
<style type="text/css" media="screen">
div.placeHolder {
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<img data-id='imageA'
src='http://some-large-image.jpg'
style='display:none;'
onload='insert(this);' />
<div data-id='imageA' class='placeHolder' style='display:none;'></div>
<script>
function insert(img){
$img = $(img);
$div = $('div.placeHolder[data-id='+$img.attr('data-id')+']');
var cssSnippet = "transparent url("+ $img.attr('src') +") no-repeat 0 0";
$div.css('background', cssSnippet).show();
}
</script>
</body>
</html>

enlarge image in new window - centered?

enlarging an image in a new window when a user clicks on it. Here's the Javascript I used:
<html>
<head>
<SCRIPT language="JavaScript">
<!--
function PopUp(pPage) {
window.open(pPage,'popWin','resizable=yes,scrollbars=yes,width=580,height=460,toolbar=no');
}
//-->
</SCRIPT>
</head>
<body>
<img src="thumbnail.jpg" alt="" border=0>
</body>
</html>
This has worked great for me but I need to have the large image in the new window centered. I've tried adding "align=center" to various parts of both the part of the code as well as the part of the code. Nothing has worked.
You have to load a HTML document to achieve that. You are loading only a plain images. In this case, you have no influence to its position, because the browser only renders an image.

Categories

Resources