I need to load a page with an iframe in a way that its header is hidden. I tried the following but for some reason it isn't working:
<div style="width:945px; height:600px; overflow:hidden;">
<iframe src="innerpage.html"
frameborder="0"
height="700"
scrolling="no"
width="945"
style="top:-100px" />
</div>
What meder said is true, but it could also be that your style wouldn't do anything. You'll need to set position: absolute or position: static in order for top to have any impact.
This will just move the whole iframe up though, not the content within the iframe.
It isn't working because you can't style the inside of an iframe from the parent, without accessing the document inside whether from the parent's javascript, or a stylesheet inside the iframe assuming said iframe is on the same domain as yours.
Related
I am using Map embed iframe with this code in my Website
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d4911422.152107185!2d-6.743420312530421!3d53.05351610420746!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487a5d16d99dac79%3A0xbd0539007f0aea54!2s27+Eddisbury+Dr%2C+Newcastle%2C+Staffordshire+ST5+7SL%2C+UK!5e0!3m2!1sen!2sin!4v1465471022612" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
it looks
It works good, But i want to set zoom level in this iframe, is it possible?
Guide me how do i set this. Thanks!!
when i am adding this
<iframe style="height:100%; width:100%;" src="https://www.google.com/maps/embed/v1/place?q=27+Eddisbury+Dr,+Newcastle,+Staffordshire+ST5+7SL,+UK&key=AIzaSyAN0om9mFmy1QN6Wf54tXAowK4eT0ZUPrU&zoom=15"></iframe></div>
then I am getting this
i mean it works , but disturb all page contents and div too.. And when i tried to set its height and width it remains same, means no change.
Back to my question i just want to set zoom level, no need to change height and width or map style.
I resolved my problem , here i am adding some screen-shots,
I opened the page ,and
then it opened like this
Now go to address bar i.e
and find out lat long and Z associated with lat long
you may change this Z as you want and refresh the page
or
After this go to cog button on top left side i.e
after this it will open a side bar like this
then look for share or embed map and click on that it will open
then
now copy iframe code from here and use.
Thats it. It will work for every one.
<html>
<head>
<title>Google map</title>
</head>
<body>
<iframe style="height:100%; width:100%;" src="https://www.google.com/maps/embed/v1/place?q=27+Eddisbury+Dr,+Newcastle,+Staffordshire+ST5+7SL,+UK&key=AIzaSyAN0om9mFmy1QN6Wf54tXAowK4eT0ZUPrU&zoom=15"></iframe></div>
</body>
</html>
you can use zoom variable for zoom level like bellow.
<iframe style="height:100%; width:100%;" src="https://www.google.com/maps/embed/v1/place?q=27+Eddisbury+Dr,+Newcastle,+Staffordshire+ST5+7SL,+UK&key=AIzaSyAN0om9mFmy1QN6Wf54tXAowK4eT0ZUPrU&zoom=15"></iframe></div>
You can try with the &z=nn Some value parameter. It works fine for me. Here is a reference code for you.
<iframe width="640" height="480" src="https://www.google.com/maps/d/embed?mid=1I8s3COxd2tY0wGKPiBxra1gkE6wpAEx1&z=19"></iframe>
I did it just by changing "pointer-events: all"
and then you have the same functions as in google map, zoom in-out, make a route and etc.
.map iframe {
pointer-events: all;
height: 100%;
width: 100%;
border: 0;
}
I'm using a podsnack mp3 player. However, every page refresh, refreshes random numerical div ID codes such as id="cover#some-random-number#
So it'll show up like this
covercontainer80191
covercontainer36190
And so forth. What I wanted to do is a display:none to hide the cover side and just display the song titles instead. Is there a way to do this in the CSS?
The code I'm using is actually an <iframe/>.
<iframe style="border:none;margin-bottom: 5px" src="http://files.podsnack.com/iframe/embed.html?hash=ah3fblli&t=1369709402" width="425" height="320" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true" ></iframe>
If it's in an iframe I don't think there's much you can do with only CSS. It's a separate document and won't inherit styles from the parent document.
However, in your case you can do a little trick to accomplish your goals. Wrap the iframe in another element with overflow:hidden, then position the iframe in a way that hides the unwanted content:
<div>
<iframe></iframe>
</div>
You'll have to tweak the numbers here, but this seemed good for your case:
div {
overflow:hidden;
width:199px;
height:260px;
position:relative;
}
iframe {
position:absolute;
top:-43px;
left:-200px
}
Demo, with just the playlist displayed: http://jsfiddle.net/sxyXF/
However, the "cover side" also contains the play button, so there's no way to play the tracks.
If i'm understanding your question you want to hide all of these instances...if that's the case you can do this in your CSS to hide them
div[class~="covercontainer"]{
display:none;
}
I'm working on a facebook tab that includes an iframe showing content from another website. I've narrowed the iframe down to only showing the part of the website that I want it to and disabled scrolling. In addition to that, I'd like to disable the links in the iframe content, and I've read that it should be possible by adding a transparent .png background image to a div containing the iframe and setting the iframe's z-index to -1, but the iframe is still in front of the image.
So far my css looks like this:
<style type="text/css">
iframe
{
z-index:-1;
}
.bgimg {
background-image: url('transparent.png');
}
</style>
and my html like this:
<div class="bgimg" style="overflow:hidden; width: 700px; height: 100%;margin:auto;">
<iframe src="http://www.url.com/site.html" width="1100" height="700" seamless="seamless" frameborder="0" scrolling="no" style="margin-top:-230px;"></iframe>
</div>
I'm using this to give a direct link to my amateur soccer team's league table, instead of manually having to update the tab each week with all the new information, but I don't want it to be possible to click on each team for team information - just the League table.
I've read several places that this should be possible, but haven't been able to find a functioning code - also read a few places saying it's impossible, and yet some others that say it can only be done using jQuery (which I know nothing about).
If anyone has any alternative solutions to what I'm doing now - please let me know.
Keep in mind that z-index only works for positioned elements (can be relative though.)
See: http://www.w3.org/TR/CSS21/visuren.html#z-index:
Applies to: positioned elements
I have a page located at:
http://localhost:8080/job/demo/865/parsed_console/?
Inside that page is an iFrame:
<iframe width="100%" scrolling="auto" height="600" frameborder="0" src="job/demo/865/parsed_console/log.html"></iframe>
Within the iFrame there are anchor tags which I can browse to with a link like the one below:
http://localhost:8080/job/demo/865/parsed_console/job/demo/865/parsed_console/log_content.html#ERROR1
The problem is that if I use the above link I am directed to a page that does not have the outer frame. I don't have source control over either page.
How can I make a link that will go directly to a specific location in the iFrame without losing outer frame?
I believe the solution to this is to change the src attribute of the iframe element to include the fragment which you wish to scroll into view. This would be achieved using Javascript.
http://localhost/ is only visible from your computer.
<iframe name="blah"></iframe>
<a href="http://www.yahoo.com" target="blah">
In your link add a target attribute for example: <a href="..." target="name_of_iframe"/> where name_of_iframe the value of the name attribute on the iframe tag for example: <iframe name=name_of_iframe"></iframe>
Look for an id tag in the html page at the specific spot you want the iFrame to open at. Then hash tag it in your iFrame
For instance the page you load in your iFrame may have - id="autolog" - or - input id="un"- etc.,
Hash tag the id in your iFrame like so:
<iframe src="https://sitethatloadsiniFrame.com#slogin;" frameborder="0" height="98"
width="225" style="float: right; frameborder="0"; SCROLLING=YES></iframe>
I need to have the links within my Content Editor Web Part open in the parent frame. The links are a part of the page the iframe is loading. I am editing the Home Page of the SharePoint site and cannot add a tag to the page. Here is my code:
<div style="overflow:hidden; width: 800; height:200; position:absolute; left:-170px; top:0px;">
<iframe src="/News/Pages/Default.aspx#OuterZoneTable" style="overflow:hidden; width:100%; height:550;" frameborder="0" marginheight="0" marginwidth="0" scrolling="no">
</iframe></div>
The widths and heights are different because I am offsetting the page to show a particular location in the page.
Unless I'm missing something about your requirements, wouldn't a TARGET attribute set to _top (or _parent) on your anchors be sufficient?
You'd need to edit the HTML source to accomplish this, so maybe you're asking if there's a way to set that behavior using the Content Editor WYSIWYG controls -- which I don't believe there is.
Another idea would be to use scripting to set the attribute values via the DOM. For example, if you had jQuery in play on your page of links, you could do something like:
$("#OuterZoneTable>a").attr("target","_top");
That example assumes the links you want to change are contained in an element with the HTML id of "OuterZoneTable".