So, I'm developping a firefox plugin based on page mod and iframe. The chrome version using iframe within content script is working perfectly.
So basically, I inject a button, when the button is pressed he change the display type of a div containing some windowing stuff (to make a movable window within the browser and a close button) and this window contain an iframe. The iframe contain the application which is entirely contained within the plugin package, just make few ajax calls to a server to refresh the local storage datas.
I can inject the open button, the windowing stuffs and the iframe but whenever what I put in the iframe, the content is not loading. (excepted in one case, but not what I want).
To set the content of the iframe I basically :
retrieve the url within the resources : require("sdk/self").url("index.html")
Send it to my injector with a message
Set it in the iframe with : iframe.setAttribute("src", iframeSource);
Here's what's injected in the page :
<div id="iframeContainer" style="border: medium none; width: 550px; height: 600px; background…olute; top: 50px; right: 10px; z-index: 200; display: block;">
<iframe id="master" frameborder="0" scrolling="no" src="resource://jid1-83zazep6ncytaa-at-jetpack/myaddon/data/index.html" style="border:none; width:550px; height:600px; background-color: transparent; position:absolute; z-index: 100; cursor:default;">
#document
<html>
<head></head>
<body></body>
</html>
</iframe>
<div id="clsBtn" style="border:none; width:25px; height:25px; position:absolute; top: 8px; right: 20px; z-index: 301;">
<div id="closeShadow" style="width: 0px; height: 0px; box-shadow: 12px 12px 8px 8px rgb(255, 255, 128); z-index: 302; display: none;"></div>
<img src="resource://jid1-83zazep6ncytaa-at-jetpack/myaddon/data/images/cross.png" style="border:none; width:25px; height:25px; position:absolute; z-index: 303; cursor:pointer;" title="Close"></img>
</div>
</div>
<div id="openBtn" style="border:none; width:50px; height:50px; position:absolute; bottom: 5px; right: 10px; z-index: 301;">
<div id="openShadow" style="width: 0px; height: 0px; box-shadow: 25px 25px 25px 15px rgb(255, 255, 255); z-index: 302; display: none;"></div>
<img src="resource://jid1-83zazep6ncytaa-at-jetpack/myaddon/data/images/icon.png" style="border:none; width:50px; height:50px; position:absolute; z-index: 303; cursor:pointer;" title="Open TSO trade"></img>
</div>
<div id="headerDiv" style="border: medium none; width: 480px; height: 23px; position: a…peat scroll 0% 0% transparent; cursor: move; display: block;"></div>
If I browse resource://jid1-83zazep6ncytaa-at-jetpack/myaddon/data/index.html I get the page rendered correctly (css and js functionnal).
Also the two buttons and the header are displayed correctly (images, style and associated js). So it's really on the iframe that is not loading and rendering.
In the Console I don't get any js error or security error.
If I replace the iframe content with google (and inject it on google), the iframe don't render too.
So do you have any ideas ?
PS : There's one method that is working but not as I want. The problem with the method I've found is that the javascript is not running and I still have some styling issue. So not the way to go I think.
// Load the document
var source = data.load("index.html");
// Replace the relative path with the packed paths
source = source.replace("css/style.css", data.url("css/style.css"));
source = source.replace("css/ico.css", data.url("css/ico.css"));
source = source.replace("css/jquery-ui.css", data.url("css/jquery-ui.css"));
source = source.replace("js/external/jquery-1.9.1.js", data.url("js/external/jquery-1.9.1.js"));
source = source.replace("js/external/jquery-numeric.js", data.url("js/external/jquery-numeric.js"));
source = source.replace("js/external/jquery-ui.js", data.url("js/external/jquery-ui.js"));
source = source.replace("js/trade/data.js", data.url("js/trade/data.js"));
source = source.replace("js/trade/main.js", data.url("js/trade/main.js"));
console.log(source);
// Encode the content
let content = encodeURIComponent(source);
let binarySource = "data:text/html;charset=utf-8," + content;
// When in the injector, set the "binary source" as content
iframe.contentWindow.location.href=iframeSource;
Related
I wanted to know why my image isn't showing up in the Buildfire platform when i place the code into the source area.....I've tested it on everything else and it works perfectly...dreamweaver and everything.... Need help to help get the image to show up in buildfire. The code i am using is below:
<p class="bf-wysiwyg-hide-app bf-wysiwyg-top"><img src="blob:https://pluginserver.buildfire.com/890db794-346d-4428-be1f-aa8dd5f5efdc" style="display: none;" onload="typeof buildfire !== 'undefined' && buildfire.dynamicBlocks.execute(this);" data-type="dynamic-expression" /></p>
<div id="bf_mce_layout_2" class="bf-wysiwyg-top bf-wysiwyg-hide-app" data-bf-layout="%7B%22id%22%3A%22bf_mce_layout_2%22%2C%22cssUrl%22%3A%22layouts/bf_mce_layout2.css%22%2C%22htmlUrl%22%3A%22layouts/template_a.html%22%7D" data-layout-name="bf_mce_layout_2"><!-- This template should not be changed once is live -->
<div class="bf_mce_img-container"><img src="https://dallasexaminer.com/wp-content/uploads/2023/01/Preparing-for-Legislative-Session.jpg" onclick="buildfire.actionItems.execute(JSON.parse(unescape(this.getAttribute("data-execute"))), ()=>{})" data-bf-image="%7B%22originalSrc%22%3A%22https%3A//s3-us-west-2.amazonaws.com/imageserver.prod/71e97b33-4374-11ec-9fe6-12a56cc33887/karen-bass.jpg%22%7D" data-execute="%7B%22action%22%3A%22linkToApp%22%2C%22instanceId%22%3A%22665ce2b8-7ce6-4cb5-bbfc-282dc22cdd6c-1651251310477%22%2C%22title%22%3A%22Current%20News%22%2C%22iconUrl%22%3A%22https%3A//pluginserver.buildfire.com/plugins/60/resources/icon.png%22%2C%22queryString%22%3Anull%2C%22deeplinkId%22%3Anull%7D" /></div>
<div class="bf_mce_copy">
<h1>Current News</h1>
<p class="bf_mce_caption">Check out the current news from The Dallas Examiner today by clicking the button below</p>
</div>
<button class="bf-btn bf-btn-primary" onclick="buildfire.actionItems.execute(JSON.parse(unescape(this.getAttribute('data-execute'))), ()=>{})" data-execute="%7B%22title%22%3A%22Current%20News%22%2C%22iconUrl%22%3A%22https%3A//pluginserver.buildfire.com/plugins/60/resources/icon.png%22%2C%22action%22%3A%22linkToApp%22%2C%22instanceId%22%3A%22665ce2b8-7ce6-4cb5-bbfc-282dc22cdd6c-1651251310477%22%2C%22queryString%22%3Anull%2C%22deeplinkId%22%3Anull%7D">Current News</button></div>
<p class="bf-wysiwyg-top bf-wysiwyg-hide-app"> </p>
<style class="bf-wysiwyg-top bf-wysiwyg-hide-app" data-layout-name="bf_mce_layout_2">
#bf_mce_layout_2 * > span{
color: currentColor;
}
#bf_mce_layout_2{
font-size: 16px;
margin: 1rem;
border-radius: 1rem;
overflow: hidden;
position: relative;
text-align: center;
box-shadow: 0 .5rem 1rem rgba(77, 77, 77, 0.5);
}
#bf_mce_layout_2 .bf_mce_img-container{
position: relative;
left: 0;
top: 0;
height: 200px;
width: 100%;
}
#bf_mce_layout_2 .bf_mce_img-container img{
width: 100%;
height: 100%;
object-fit: cover;
}
#bf_mce_layout_2 .bf_mce_copy{
padding: 1rem;
}
#bf_mce_layout_2 .bf_mce_copy h1{
margin-top: 0;
margin-bottom: .5rem;
}
#bf_mce_layout_2 .bf_mce_copy .bf_mce_caption{
font-size: .75rem !important;
margin-bottom: 2rem;
}
#bf_mce_layout_2 .bf_mce_copy p{
line-height: 1.5;
}
#bf_mce_layout_2 button{
position: relative;
margin-bottom: 2rem;
min-width: 150px;
z-index: 1;
}</style>
[[[enter image description here](https://i.stack.imgur.com/MAJs2.jpg)](https://i.stack.imgur.com/kIJKs.jpg)](https://i.stack.imgur.com/hM7uY.jpg)
I placed in a code that works perfectly in dreamweaver into the source code area of Buildfire and for some reason the image is not showing up. I need help with this The code is below:
Your code seems to run just fine, screenshot below:
Maybe a problem retrieving the image? I'd check the network traffic in Safari or Google Chrome and see if the image being requested or not.
If it is being requested then check if you're getting any status code errors. If it is not being requested try adding more information.
/How to set width and height of image to be 150px and to be responsive/
/HTML/
<div class="tabs__tab-image-container">
<img src="https://pbs.twimg.com/profile_images/1208234904405757953/mT0cFOVQ_400x400.jpg" class="tabs__tab-content-img">
</div>
/CSS/
.tabs__tab-image-container {
max-width: 150px;
min-height: 150px;
height: 100%;
width: 100%;
}
tabs__tab-content-img {
border-radius: 50%;
max-width: 150px;
height: auto;
display: block;
object-fit: cover;
}
You need to be clearer in your question. You want an image to ALWAYS be 150px square but the DIV to be responsive? Or do you want the IMAGE to be responsive within the DIV? As you're only showing a DIV with a single image in it, it's hard to tell what the goal is.
A responsive page is one that changes based on the viewport size; locking the image down to a fixed size kinda defeats the purpose in that case. Your CSS also isn't using the image class as it's incorrectly formatted.
The following fixes the image class as you've specified it, but all this does is round the image corners; the content won't be responsive:
CSS:
.tabs__tab-image-container {
max-width: 150px;
min-height: 150px;
height: 100%;
width: 100%;
}
.tabs__tab-content img {
border-radius: 50%;
max-width: 150px;
height: auto;
display: block;
object-fit: cover;
}
HTML:
<div class="tabs__tab-image-container">
<div class="tabs__tab-content"><img src="https://pbs.twimg.com/profile_images/1208234904405757953/mT0cFOVQ_400x400.jpg">
</div>
</div>
To make the page responsive, you can add viewports in CSS for different page sizes, or if it's just the image displaying (with a line of text in the div for example) use the following:
CSS:
.tabs__tab-image-container {
text-align:center;
font-family: "Comic Sans MS", cursive;
font-size: 10.0vw;
font-weight:700;
}
.tabs__tab-content img {
border-radius: 50%;
width: 100%;
}
HTML:
<div class="tabs__tab-image-container">
<div class="tabs__tab-content"><img src="https://pbs.twimg.com/profile_images/1208234904405757953/mT0cFOVQ_400x400.jpg">
Text Here
</div>
</div>
If you only need the image, you don't even need the tabs__tab-image-container class, just use the tab content class targeting the image.
I have a slider on a homepage I am currently working on. I am trying to achieve a full viewport height that takes up the whole width for the screen.
The only way I can currently achieve this is by either stretching the image, or the image isn't centred.
The image needs to be aligned roughly centred horizontally and vertically, so customers can see the centre of the image on any width of browser, and without stretching the image out of proportion.
I have tried the background-size: cover; on the element with no success as its not a background img. the containers have 100vh currently, but the width is the issue.
The issue is located here http://joeybox.info/ . I realise with the menu and the logo above the image the 100 viewport height will rest under the "fold", however I am placing the logo and menu over the image eventually, once I have figured out the css.
I have tried many solutions found within the stack overflow forum and none work in my scenario.
My current css, after deleting the in-correct code, is:-
.bx-wrapper img {display: inherit;
height: 100vh;
max-width: inherit;}
.ewic-wid-imgs {height: 100vh;
max-width: unset;
width: unset;}
.bx-wrapper img {display: inherit;
height: 100vh;
max-width: inherit;}
html=
<div class="slider-box">
<div id="ewic-con-385">
<div style="display: none;" id="preloader-385" class="sliderpreloader">
</div>
<div style="max-width: 100%; margin: 0px auto;" class="bx-wrapper">
<div style="width: 100%; overflow: hidden; position: relative; height: 633px;" class="bx-viewport">
<ul style="width: 315%; position: relative; left: 0px;" class="bxslider-385">
<li style="float: left; list-style: outside none none; position: relative; width: 1349px; margin-right: 10px;" class="ewic-slider bx-clone">
<img title="Qw Direct Leather Keyrings" class="ewic-wid-imgs" src="http://joeybox.info/wp-content/uploads/2015/07/qw-direct-leather-keyrings.jpg">
<div class="ewic-caption"><span>Qw Direct Leather Keyrings</span></div>
</li><li style="float: left; list-style: outside none none; position: relative; width: 1349px; margin-right: 10px;" class="ewic-slider">
<img title="Qw Direct Leather Keyrings" class="ewic-wid-imgs" src="http://joeybox.info/wp-content/uploads/2015/07/qw-direct-leather-keyrings.jpg">
<div class="ewic-caption"><span>Qw Direct Leather Keyrings</span>
</div></li><li style="float: left; list-style: outside none none; position: relative; width: 1349px; margin-right: 10px;" class="ewic-slider bx-clone">
<img title="Qw Direct Leather Keyrings" class="ewic-wid-imgs" src="http://joeybox.info/wp-content/uploads/2015/07/qw-direct-leather-keyrings.jpg"><div class="ewic-caption">
<span>Qw Direct Leather Keyrings</span>
</div></li></ul></div>
<div class="bx-controls bx-has-controls-direction bx-has-controls-auto">
<div class="bx-controls-direction"><a class="bx-prev disabled" href="">Prev</a>
<a class="bx-next disabled" href="">Next</a></div><div class="bx-controls-auto"><div class="bx-controls-auto-item"><a class="bx-start active" href="">Start</a></div>
<div class="bx-controls-auto-item"><a class="bx-stop" href="">Stop</a></div></div></div></div><br>
</div>
</div>
To achieve this you could add to your image inside .bx-wraper:
.bx-wrapper img {
display: inherit;
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
max-width: inherit;
}
now you need to set the parent li to relative:
.bx-wrapper ul li {
position:relative;
width:100%;
height:100%;
list-style: none !important;
margin: 0 !important;
}
and change your parent ul:
.bx-wrapper ul{
width:100%;
}
I have solved the above by changing my image slider. My new slider plugin (Envoke Supersized) uses a background image and was easier to use background-size:cover; css. Although after this full viewport height on mobile widths didn't look good with my images so I used 40vh on mobile widths.
I would recommend anyone trying to do the same to ensure your image is a background image, or replace the slider with a static background image for small browser widths.
I have a loop to loaded logo image in floated div block, I been tried few tips from stackoverflow but have no luck to make the logo align center and middle within the div, all logo height are not fixed and might have different height for each:
<div style="float:left; width:80px; height:80px; padding:8px; border:1px solid #ccc;">
<img width="78px" align="left" src="images/logo/logo1.jpg">
</div>
Please help, thanks.
Use positioning. The following worked for me...
With zoom to the center of the image (image fills the div):
div{
float:left;
display:block;
overflow:hidden;
width: 70px;
height: 70px;
position: relative;
}
div img{
min-width: 70px;
min-height: 70px;
max-width: 250%;
max-height: 250%;
top: -50%;
left: -50%;
bottom: -50%;
right: -50%;
position: absolute;
}
Without zoom to the center of the image (image does not fill the div):
div{
float:left;
display:block;
overflow:hidden;
width: 100px;
height: 100px;
position: relative;
}
div img{
width: 70px;
height: 70px;
top: 50%;
left: 50%;
bottom: 50%;
right: 50%;
position: absolute;
}
You really should move your CSS out of the style attribute and into a file like style.css if you have not done so. But if you really have to you can place the code below into inline styles like you have now.
Remove the align="left" attribute from your image tag and set the image's display to block. This will allow margin: 0 auto; to center your image for you inside the containing DIV.
Looks like you'll have to replicate a <table> with CSS to get the vertical centering you desire. Table cells allow vertical centering. To do this I've added and additional DIV with a class of .container. The .container DIV has it's display set to table and the .image-container DIV, which is acting like a table cell, has it's display set to table-cell.
CSS
.container {
float: left;
width: 80px;
height: 80px;
padding: 8px;
border: 1px solid #ccc;
display: table;
}
.image-container {
display: table-cell;
vertical-align: middle;
}
.image-container img {
display: block;
margin: 0 auto;
}
HTML
<div class="container">
<div class="image-container">
<img src="images/logo/logo1.jpg">
</div>
</div>
JSFiddle: http://jsfiddle.net/MJ5j4/
just create a class "centerImgWrapper", and wrap all your "center" Images anywhere in the Code with divs.
Thats pure CSS
.centerImgWrapper {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;}
.centerImgWrapper img {
left: 0;
right:0;
top: 0;
bottom:0;
max-height: 100%;
max-width: 100%;
margin:auto;
position:absolute;
}
Just Check out the Fiddle.
MyFiddle
Dave
If you are trying to get it in the middle inside the div, have you tried:
<div style="width:800px; height:800px; padding:8px; border:1px solid #ccc;">
<img width="78px" src="mobiIconGreenGray.gif" style="margin-left:50%; margin-top:50%;">
</div>
I used "margin-left:50%; margin-top:50%;" INSIDE the IMG tag and got rid of the "align" and "float" attribute. I probably wouldn't want to use "align" in this case.
Either way, I hope it helps.
Images are more or less displayed as inline-blocks. So you can just set text-align: center; on the styles of the container div.
Getting something to be vertically aligned in the middle is complicated with css. If you're going to be dynamically placing the logo with JavaScript anyway, you can save yourself trouble and just center it vertically by specifying the margins with JavaScript.
Check out this demo: http://jsfiddle.net/jyvFN/1/
HTML
<div id="container">
<img id="logo" src="http://placekitten.com/100/100" />
</div>
CSS:
#container {
float: left;
background-color: blue;
width: 200px;
height: 150px;
text-align: center;
border: 1px solid red;
}
JavaScript
var logo = document.getElementById('logo');
var container = document.getElementById('container');
var margin = (container.clientHeight - logo.clientHeight) / 2;
logo.style.marginTop = margin + "px";
logo.style.marginBottom = margin + "px";
Why didn't you set align of the image center?
Then your code should be:
<div style="float:left; width:80px; height:80px; padding:8px; border:1px solid #ccc;">
<img width="78px" align="center" src="images/logo/logo1.jpg">
And I think it's also problem of the ratio of the image width vs the div block + it's padding and border.
Try to set it balance.
I am trying to create a pdf report using dompdf. The report needs to have the company logo on the top of the first page as well as a header and footer on every page. I have found solutions for adding a header and footer to a dompdf document elsewhere on stackoverflow. The problem I'm running into is that the company logo needs to be above the page header on the first page and not displayed on other pages
something like this
Company Logo
- header
- content here
- footer
------
- header
- content here
- footer
Is there any way of doing this using dompdf?
This is kludgey, but it works. You can basically fake the different headers by creating a normal header using fixed positioning and the special page 1 header using absolute positioning. If you set things up in the right order the page 1 header will be rendered on top of the standard header, obscuring it.
<html>
<head>
<style>
#page {
margin: 0px;
}
#page :first {
margin-top: 100px;
}
body {
margin: 100px 20px 50px 20px;
}
#headerA {
position: fixed;
left: 0px; right: 0px; top: 0px;
text-align: center;
background-color: orange;
height: 90px;
}
#headerB {
position: absolute;
left: -20px; right: -20px; top: -200px;
text-align: center;
background-color: orange;
height: 190px;
}
#footer {
position: fixed;
left: 0px; right: 0px; bottom: 0px;
text-align: center;
background-color: orange;
height: 40px;
}
</style>
</head>
<body>
<div id="headerA">
<h1>Widgets Express</h1>
</div>
<div id="headerB">
<img class="logo" src="http://eclecticgeek.com/images/macro/ants.jpg" height="100" width="500">
<h1>Widgets Express</h1>
</div>
<div id="footer">
<p>Copyright, all rights reserved, yadda yadda</p>
</div>
<div id="content">
...
</div>
</body>
</html>