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
}
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.
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 ?
I have a set of tabs that load the content inside iframes. When I select one of the tabs which its frame was loaded before making the container div show I get the following behavior occurs in IE10:
Images:
I was able to reproduce the issue using the following code:
Html:
<div style="display: none;">
<iframe src="http://demos.telerik.com/kendo-ui/grid/index" frameborder="0" style="height:1000px; width:100%; z-index: -1;"></iframe>
</div>
Javascript:
$(function() {
setTimeout(function () {
$("div").css('display', 'block');
}, 2500);
}
I have an embed tag on a site with an external source.
I'd like to hide a div on the external source that I'd like to hide.
The embed code is this:
<embed src="https://www.site.com" width='100%' height='1000px'/>
And the div has a class and inline style
<div class="button" style="display:block !important;">
Is it possible to hide with javascript or CSS?
I know that I can't do it with an iframe for security issues, is it the same with embed tag?
Or do I have other ways to do that?
First, define ID for both control as:
<embed id="embedID" src="https://www.site.com" width='100%' height='1000px'/>
<div id="divID" class="button" style="display:block !important;">
After that write below code:
$("#embedID #divID").remove();
Try this:
document.getElementsByClassName('button')[0].style.visibility='hidden';
This may help you.
Give the button an ID. For example: button1
<div class="button1" style="display:block !important;">
$("#button1").remove();
or
$("#button1").hide();
if you want to define multiple ID's at once, you can use:
$("#button1 #button2").remove();
or
$("#button1 #button2").hide();
Both should work!
For external links like you mentioned in the comments:
Using JQuery you should be able to exactly that with the load-function. Here is a small example to get a container with id "container" on a page called Test.html:
$('#contentDiv').load('/Test.hmtl #container');
You can visit the JQuery documentation here for more info
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()?