Here is how i call the content from the iframe:
<iframe src="http://beta.sportsdirect.bg/checkout/onepage/" id="InnerIframe" class="FrameCSS" scrolling="no"></iframe>
Here is the CSS of the iframe:
.FrameCSS
{
position:absolute;
top:-350px;
left:-20px;
width:400px;
height:700px;
border:1px solid #ccc;
}
As you can see i use top:-350px to point from where i want the iframe to start showing content from page: http://beta.sportsdirect.bg/checkout/onepage/
I want to ask is there any way with jQuery or some other method that i can start the iframe showing content from <div id="StartIframe"></div> and and the iframe grabbing content at <div id="EndIframe"></div> ?
Basicly, am i able to make the an iframe get content from a page starting from specific div and ending with a specific div ?
Related
So I have my page with a top nav bar, a side bar and content at right. Now I have my pages designed, but i felt it to be repetitive, so I was trying to work out with iframes in the right side(the one that changes when any link in the sidebar is changed). I hope you get the idea.
Now, the issue is that I am able to navigate to second iframe tag from 1st but not from second to first iframe.
Here's the code.
HTML:
<div class="container-fluid side-content">
<iframe src="carsx-iframe.html" id="car-frame" height="100%" width="100%" style="outline: none; border:none; "></iframe>
<iframe src="edit-profile-iframe.html" id="edit-prof" height="1050px" width="100%" style="outline: none; border-style: none;"></iframe>
</div>
Js:
$(document).ready(function() {
$("#edit-prof-click").click(function() {
$("#edit-prof").show();
});
});
$(document).ready(function() {
$("#cars").click(function() {
$("#car-frame").show();
});
});
CSS
#edit-prof{
display: none;
}
#car-frame{
display: none;
}
You need to hide the second div to show the first one and you arent doing that when trying to show the first.
Try adding something like
$("#car-frame").hide();
Before showing the first iframe.
I have seen many ajax loader which shows until an iframe finishes loading.But my question is there anyway I could show an ajax loader each time the content inside the iframe loads?
Example:
If I loaded a webpage in an iframe,it shows the loader.But after it been loaded,I clicked on another link inside the iframe webpage and when the page inside the iframe is loading it should show the loader again.
Is there anyway I could do this?
Dear You can show the loaded by adding a div on parent page and create a javascript function on parent page and then call that function from iframe using parent.methodonpareentpage
Parent Page
<iframe id="iframe" src="url" style="height:600px; width:700px; display:none;"></iframe>
<div id="divIframeLoader" style="height:600px; width:700px;">
<img src="Images/loading_async_big.gif" style="position:relative; top:12%; left:40%;" />
</div>
<script type="text/javascript">
function showIframeLoader(btrue)
{
if (btrue)
{
jQuery("#divIframeLoader").show();
jQuery("#iframe").hide();
}
else {
jQuery("#divIframeLoader").hide();
jQuery("#iframe").show();
}
}
</script>
iframe page
parent.showIframeLoader(true);
Is it possible to hide the text "Facebook social module" in Facebook IFRAME like box ?
Ps: The text div belong to a class "clearfix pvs phm" so here is what I tried in my CSS:
.clearfix.pvs.phm{visibility:hidden;}
<!-- HTML -->
<iframe src="http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FFacebookDevelopers&width=180&height=258&colorscheme=light&show_faces=true&header=false&stream=false&show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:180px; height:258px;" allowTransparency="true"></iframe>
Sure. First of all, find it's div, table etc. via DOM. Second, add css it's div id (for example face-social), class etc. to these lines;
#face-social{
display: none;
}
if you don't like that solution. You must try iframe. That's why you have to use again CSS and iframe width, height values.
Edit: Change it to;
.clearfix.pvs.phm
{display:none
}
Currently I am using iframes to create tabular navigation for one module.
On module main page I have two tabs, inside one of those frames I have another two tabs after a single selection box. The content inside frames for 3rd and 4th tab will contain most of the content, that will get the frame to overflow. So.. what I want is to start the scroll bar not from 1st/2nd tab (or not first frames created) but from 3rd and 4th tab instead.
1st Tab| 2nd Tab
(SelectBox)
3rdTab | 4th Tab
(The rest of content)
Below is some code example (first frame):
<table>
<tr>
// create tab with td
</tr>
<tr>
// create tab with td
</tr>
</table>
<div id="newstabs" class="bg2" style="border-left:0px; border-right:0px; border-bottom:0px;">
<iframe src ="Download.asp" width="158" height="274" id="download3" frameborder="0"></iframe>
</div>
<div id="newstabs0" style="position:absolute; top:0; left:0; visibility: hidden; margin: 10px;">
<iframe src ="Download.asp" width="158" height="274" id="download2" frameborder="0"></iframe>
</div>
<div id="newstabs1" style="position:absolute; top:0; left:0; visibility: hidden; margin: 10px;">
<iframe src ="Upload.asp" width="158" height="274" id="upload" frameborder="0"></iframe>
</div>
The Download.asp has similar iframe setup, which is where I want the scrolling to work, not from the main page.
How can I do this? Setting scrolling="no" in the main page's iframs disables scrolling on Download.asp page as well.
My HTML markup looks like that
<html>
<body>
<div id="loading"><img src="core/design/img/load/load.gif" /></div>
<div id="wrap"></div>
<div id="footer"></div>
</body>
</html>
I'm trying to hide whole page loading process with following solution.
CSS Rules:
#loading {
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
background-image:url("img/load/tr.png");
z-index:100;
}
#loading img {position: absolute; margin-left:-110px; margin-top:-9px; left:50%; top:50%}
And Jquery
$(document).ready(function(){
$('#loading').fadeOut(500);
});
Now, the problem is page loads like that:
first ugly draft of page (for 1-2 seconds)
appears loading div
loading whole content
disappears loading div
You can see it in action
I don't understand why loading div appears after 1-2 seconds?
I want to prevent 1).
I think this is a pretty simple one.
First make sure jQuery is called in your section.
First, wrap all the content of your page (except the loading div) in a div called
<div id="content-wrapper">
CONTENT HERE
</div>
Then using CSS set:
#content-wrapper {
visibility:hidden;
}
Then just make the jQuery into a function like this:
$(window).load(function(){
document.getElementById("content-wrapper").style.visibility="hidden";
$('#loading').fadeOut(500, function()
{
document.getElementById("content-wrapper").style.visibility="visible";
});
});
and I can see you're using Nivo Slider. Me too ;)
Edit: I fixed it, now it works perfectly. (You don't need the onload event in your body tag anymore)
Check out the example here: JSFiddle
Try moving the styles for loading to be inline instead of relying on the full external css file to load. If you look at Google Chrome Developer Tools and the Network tab, or a similar tool, you'll see the content of the page loads first, as expected, but then you have to wait until the external css is loaded and downloaded, and then the referenced image in the css file is loaded. Placing the style inline should assist in getting the loading element to display as soon as it can, or at least sooner.
<div id="loading" style="position: fixed;left: 0;top: 0;
width: 100%;height: 100%;background-image: url(core/design/img/load/tr.png);z-index: 100;"><img src="core/design/img/load/load.gif"></div>
Why not start everything else inside a <div style="display: none;" id="loaded">, and then when the loading has finished use $("#loaded").fadeIn()?