Is it possible to insert a web page into a html file using iframe but showing the this "inserted page" at all browser ?
I need a solution to insert a html with a expansive way.
Your question is a little unclear but I will try my best to answer.
if you want the entire page to be taken up with this <iframe>, you will have two options:
Use jquery's $().load function and "load" your other website
$(function(){
$("body").load("http://yourWebPageHere");
});
Use plain <iframe> tags and use the css top: 0; bottom: 0; left: 0; right: 0; to make it extent to the edges. Note, do not use width: 100%; because that will leave a margin around the edges of the page.
Related
I'm currently trying to get a single image (website under construction) to cover the entire Tumblr website I'm working on, temporarily, without losing any of the underlying HTML and CSS code. Additionally, I'm not sure where to put the image itself (head, body, etc) to get it to cover up the menus and other links that are above the content without changing the structure.
There are many ways to do this.
Option 1
The most efficient way would be to have a new page with just the image and put a temporary redirect on your DNS entry if that is accessible to you. If you do not have access you can add a redirect into the head tag. (If you are looking to eventually have good SEO(Search Engine Optimization) you should be wary how you perform this redirect. Hosting the site before its ready may negatively impact rankings.
Option 2
Add the image to a div or the body tag as the background with 100% height and give it a large z-score to raise it above the rest of the content.
I suggest you put a div in the body, then style it with the following rules:
.mask {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: lightgrey;
z-index: 100;
}
Then put the image in this mask div. The mask element will fill the page.
I only have access to the css code so i can't edit the html. here's the page: http://myanimelist.net/animelist/linodiogo and the css code can be found here: http://pastebin.com/Kyz3dkmB. What i wanted to do was attach a transparent picture to the table right top corner so it would look better.
If you have any other recommendation I'm here to listen.
You can use the following via CSS, however you would probably need access to the HTML to be able to incorporate this without affecting the layout of the rest of the table.
class/id {
content:url(http://example.com)
}
I'm not entirely sure from the question/site what your aim is, but if you don't have access to the HTML it sounds as though an absolutely positioned pseudo-element might be the way to go here (even if you do have access to the HTML, it's still a good way to avoid clogged markup). The absolute positioning may avoid disruption to the table element.
Add position: relative to the table (or whatever you want the parent to be), and use the following to position a transparent element in the top-right:
parent:before {
content: '';
width: ...
height: ...
background: transparent;
position: absolute;
top: 0;
right: 0;
}
I'm having some trouble getting a website to look the way I want it to. I have a footer that I want to have at the bottom of the page (but does not stick to the bottom of the viewport if the content is large). The current situation is almost fine, though I want the body and html tag to take up 100% of the viewport if the content is small. If I add height: 100%; to the html and body tags, the home page looks fine but the members page displays the footer somewhere in the middle of the page as the height of the html and body tags somehow seems to match the size of my viewport instead of the content. The footer has the color-footer class (you can verify this yourself by dynamically changing the css rules through your browser's developer tools).
OAS: this site was developed by an external and runs on Joomla. I'm not a web developer and I'm just getting a headache from trying to get this to work. I've gone through a dozen of guides but it looks like this time Google couldn't give me the simple solution. After hours of meddling in the developer mode with chrome I can't get it to work so I was wondering if anyone could figure out the correct css rules to add to my stylesheet so I get the desired behaviour.
A JavaScript/jQuery solution:
function CheckFooterPos() {
var Footer = $('.color-footer');
var BottomOfScroll = $('html').scrollTop() + $(window).height();
var BottomOfFooter = Footer.offset().top + Footer.height();
if (BottomOfFooter < BottomOfScroll) {
Footer.css('bottom', '-' + (BottomOfScroll - BottomOfFooter) + 'px');
} else {
Footer.css('bottom', '0px');
}
}
$(document).ready(function() {
$(window).scroll(function(){
CheckFooterPos();
});
$(window).resize(function(){
CheckFooterPos();
});
CheckFooterPos();
});
Because it's position:absolute so, it will so in the middle of the screen.
Just remove position: absolute; from .color-footer { will solved your issue.
.color-footer {
bottom: 0;
height: 66px;
margin-top: 50px;
padding-top: 0;
width: 100%;
// position: absolute; //remove it.
}
Hope it helps.
You can set footer position using javascript if you are not able to fix its position through css, though its possible through CSS too.
http://josephfitzsimmons.com/simple-sticky-footer-using-jquery/
and I guesss
How to keep footer at the bottom even with dynamic height website
this can also help you.
I am trying to convert HTML to image using HtmlRenderer. The page contains 2 images, where one image is on the top of the other. I tried following code
Bitmap m_Bitmap = new Bitmap(700, 900);
PointF point = new PointF(0, 0);
SizeF maxSize = new System.Drawing.SizeF(800, 1000);
string html = "<html><head></head><body> Test<div style=\"position: relative; left: 0; top: 0;\"><img style=\"position: relative; top: 0; left: 0;\" src=\"file:///C:/Users/crakhuc/Desktop/HappyBirthday.jpg\"><img style=\"position: absolute; left: 199px; top: 293px;\" src=\"file:///C:/Users/crakhuc/Desktop/Small.jpg\"></div><br></body></html>";
HtmlRenderer.HtmlRender.Render(Graphics.FromImage(m_Bitmap),html,point, maxSize);
m_Bitmap.Save(#"C:\Test.png", ImageFormat.Png);
Problem with this is that second image doesn't come on top of the first but comes at bottom of first image.
HTML Renderer currently doesn't support relative/absolute layout.
Depending on what you want to achieve you can either use one of the images as background image, or split the HTML into 2 parts using the resulted image from part one as the base for part 2 rendering.
You can use this wiki page for reference: Generate image from HTML markup.
I am not sure how complex the html can be using HtmlRenderer so providing an alternative if it helps. If the html is really complex and references external resources, you could use a Html to Pdf renderer then convert the PDF to an image.
i have a rather strange question:
Is there a possibility to open a only a specific div element of a website in my browser?
The reason why i want to know is, because i want to embed only the stream element of this website:
http://www.azubu.tv/channel/live_small.do?cn_id=2196420951001
The page is rather new, so they dont offer a share embed code function yet, therfore i thought about creating an Iframe which shows the stream, like this:
<iframe height="433" width="770" frameborder="0" src="http://www.azubu.tv/channel/live_small.do?cn_id=2196420951001"></iframe>
While this iframe shows the whole site, i want only to show the stream element. I checked the code of the side and the div element called "player-wrap" shows pretty much what i need.
Any ideas?
Your best option may be to contact them and request embed functionality. It's maybe not their top priority so if you must, a possible workaround could be this (modified from the SO post found here).
div{
width: 960px;
height: 424px;
overflow: hidden;
}
iframe{
position: relative;
top: -300px;
width:100%;
height:800px;
}
<div>
<iframe src="http://www.azubu.tv/channel/live_small.do?cn_id=2196420951001" autoscroll="false"></iframe>
</div>
http://jsfiddle.net/daCrosby/5PMyu/
I think the best way to do it is to use jQuery's load function to return the iframe.
For example your code would be this which would return the wrapping div of the video which is called .palyer_wrap and insert it into #target-div.
$('#target-div').load('www.azubu.tv/channel/live_small.do?cn_id=2196420951001 .palyer_wrap');