I make a simple html page and set it on facebook fan page tab but the tab which shows on fan page is shows a scroll bar buti already set to auto resize and the height of this html page is large i want to hide the scroll bar and show the complete page
The best solution I found, which works for me is:
You need to setup the Facebook app canvas settings, Canvas height to Fluid.

Then, add some javascript in the page header:
<script type="text/javascript" src="https://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript" charset="utf-8">
FB.Canvas.setAutoResize();
</script>
Finally, force our body and html tag to avoid scroll bars in css.
body, html {
overflow:hidden;
}
This has worked for me to remove all the scroll bars. It's working on the 18th of October 2011, but because Facebook keep changing their code, it may change in the future.
A full article about Facebook iframe is available on my blog: http://gpiot.com/facebook-page-tab-hide-scroll-bars-from-iframe/
Thanks to all of you.
Here is the answer of my question; I posted it here so that if any body find this question in future will also get the answer and his/her time is not wasted. I get the solution by adding the following code just before the </body> tag of my index page
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Canvas.setSize();
}
// Do things that will sometimes call sizeChangeCallback()
function sizeChangeCallback() {
FB.Canvas.setSize();
}
</script>
Once again, thanks to all.
This solution works for me
http://aarosant.com/2011/03/14/adjust-the-size-of-facebook-iframe-tabs/
GO TO the App Setting -> Advanced setting -> canvas page there you can change width and height to fixed from fluid
Related
I am trying to take the div #content of server list from here (same domain): http://bans.endlessgamers.com/index.php?p=servers
And embed it on a new page (same domain): http://www.endlessgamers.com/server-list/
The issue: I have managed to embed it fine with <iframe>, but the server list is responsive and expands/collapses when clicked. When I expand, I have to scroll in the <iframe> window to see the content. Is there a way to force my page to expand and collapse with the information in the <iframe> div?
Note: To replicate my issue click on hostname of server to expand or collapse it.
<head>
<script>
$("iframe").contents().find("#content").width()
</script>
</head>
<body>
<iframe src="http://bans.endlessgamers.com/index.php?p=servers#content"></iframe>
</body>
You can try set iframe height dynamic:
//Initially set iframe height on load
$($("#elCmsPageWrap iframe")[0]).css("height",+$("#elCmsPageWrap iframe")[0].offsetParent.clientHeight);
//Set iframe height again when collapse/expand in table
$(".listtable tbody tr td").click(function(){
$($("#elCmsPageWrap iframe")[0]).css("height",+$("#elCmsPageWrap iframe")[0].offsetParent.clientHeight);
});
Why don't you copy the code of the original #content div into a new file? Let's say: server-list.php
Then, you include this file on both pages:
<?php include 'server-list.php'; ?>
The include function basically pastes the code into the file.
iFrames are mostly used to embed external pages.
I have a social netowork coded in PHP and css. Ive realized that it looks so much nicer and cleaner when its zoomed out at 90% instead of 100%. Is there a piece of code I can implement into the php or css to make the webpage automatically zoom out when its visited? This is mainly only for the login page.
if you want to take a look at the site, heres the URL: social.flamboyantent.co.uk
Thank you in advance.
If I understood you right.
This should work:
<script type="text/javascript">
function zoom() {
document.body.style.zoom = "90%"
}
</script>
<body onload="zoom()">
To add zoom in Firefox read this object.Style.Zoom property not working in Firefox
Last answer will work for major browsers.
<script type="text/javascript">
function zoom() {
document.body.style.zoom = "90%"
}
This is the compatibility chart.
But as stated in THIS QUESTION
You could use the "proprietary" -moz-transform property in Firefox 3.5+.
So you could use:
div.zoomed {
zoom: 3;
-moz-transform: scale(3);
-moz-transform-origin: 0 0;
}
And there´s also a BUGZILLA ticket.
Bugzilla
I hope there's someone out there that can help. I am trying to use jQuery Backstretch to apply a different background image for each specific page within Bootstrap/Wordpress. e.g:
Home - bg image a
About - bg image b
News - bg image c
and so on...
I've managed to use the standard Backstretch script to display a single image for all pages, but I am totally lost (even after searching) on how to apply the the above.
My code so far:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://myurl.co.uk/wp-content/themes/wpbootstra/bootstrap/js/jquery.backstretch.min.js"></script>
<script>
$.backstretch("http://myurl.co.uk/wp-content/themes/wpbootstrap/bootstrap/img/test_bg.jpeg");
</script>
I have used this in my footer.php.
Does anyone have a solution?
You could try:
<?php
if(is_page(42))
{
echo '<script>$.backstretch("http://myurl.co.uk/wp-content/themes/wpbootstrap/bootstrap/img/test_bg.jpeg");</script>';
}
else if(is_page(41))
{
echo '<script>$.backstretch("http://myurl.co.uk/wp-content/themes/wpbootstrap/bootstrap/img/test_bg_b.jpeg");</script>';
}
?>
The number 42, 41 being the id of the page. Sp text_bg_b.jpeg will only display on the About us page (assuming its id is 41).
I think there is no need for using backstretch: Just add this css styles inline to your body or main container:
background: url(PATHTOYOURIMAGE) center center no-repeat;
background-size: cover;
You should consider using a custom field for giving the path to your image. I think the easiest way is to install Advanced Custom Fields and to add a field called bg_image to every site with the image url in it. Then you can replace PATHTOYOURIMAGE with
<?php the_field('bg_image'); ?>
It is another way but I think you should give it a try.
I have created a page in which I am showing A websites Page (situated some where on web );
I used iframe but puzzled with the height issues I solved width issues for 950px only with css3 but my need is full height as target website but that is not working with cross domain pages (I've done with same domain successfully).
Now I want to do it either with PHP using get_file_content() or some other putting it into div , iframe or in frames whatever works (and also pages must be accessible as it is from main sites)
The container will change its content with hyper link click.
Please help me to resolve the issues.
I've tried many more methods including jquery, js, php, css and blah blah blah with no success.
before commenting or answering please visit THIS LINK
I need some thing like this
Please check this and alter here
To See My page Click here
Note:
I have no access of target site so I can't put attributes on target
page and get back to iframe page.
I have 100+ pages to show so no
specific method can be used i need any generalized technology.
One more thing i don't want scrolling in my page.
Efforts done :
Ajax/Jquery
PHP Resize
In the "iframe'd" html, have:
<body onload="parent.resize_iframe(document.body.scrollHeight)">
and in the page that iframes:
<script type="text/javascript">
function resize_iframe(new_height) {
document.getElementById('iframed').style.height = parseInt(new_height, 10) + 60 + 'px';
}
</script>
I used 60px to fix potential padding etc.
Note that they have to be under the same domain for this to work, otherwise you might have to run:
<script type="text/javascript">
document.domain = "domain.com";
</script>
On either or both. This is required so that the browser may interact between them.
Do something like this:
<frameset rows="*">
<frame frameborder=0 src="http://www.discountautoparts.com/" scrolling="auto" noresize>
</frameset>
If you do that it should look like this picture
JS newbie here
I want to have a kind of profile preview page where people can select a color (could be clicking on an image or could be a radio button) and that changes the background colors in certain divs in the preview page.
IE someone clicks on the button for red then the gradients in the background of the title bar, info boxes etc will turn to reds.
Whats the best way to do this?
I think you'd be best off if you define specific stylesheets for each 'color' (read: style) you want to be available to the user. If the user clicks on something to make his color choice, you can change the stylesheet that is loaded. You probably will need a default.css or a main.css file that contains all positioning and default coloring stuff and for each color you have a separate css file like red.css that will load the colors for each element in your dom you want to be changed.
In simple Javascript this could look something like:
<link rel="stylesheet" href="style1.css" id="stylesheet">
<script type="text/javascript">
function changeStyle() {
document.getElementById('stylesheet').href = 'style2.css';
}
</script>
Of course, you can also include a library like jQuery to do this for you. Another option (non JS) is to do a POST when the user picks a color and change the stylesheet server side. But that will make the page refresh.
Use jQuery:
$(document).ready(function(){
$('#my-button').click(function(){
$('.title-bar').css({'background' : 'red'});
});
});
Edit:
I just hacked together a better (as in "programmatic") solution: http://jsfiddle.net/eNLs6/
$(document).ready(function(){
$('.colorchanger').click(function(){
$('#preview-div').css({'background' : $(this).val()});
});
});
I think the best way to achieve that is to have different div classes for each color (theme in general) and change the css class of the div when button or image clicked :
$('#myRedButton').click(function(){$('#myDiv').attr('class','red')});
$('#myBlueButton').click(function(){$('#myDiv').attr('class','blue')});
And you will have a html looking like
<div id="myDiv">....the div that will have it's color changed </div>
<img src="..." id="myRedButton"/>
<img src="..." id="myBlueButton"/>
Create a base stylesheet (base.css) for general stuff and then secondary ones for each colour, eg red.css, blue.css
When a users clicks the red image, it loads the red.css stylesheet.
$('#red').click(function() {
//load red.css
}
See this question on how to change a secondary stylesheet with jQuery for more details.
I would add a class to the body and then use that in the stylesheet to create different themes.
JS:
$('#red').click(function() {
document.body.className = 'red';
});
CSS:
body.red .title{background:url('red-gradient.png');}
body.red .color{color: red}
/* etc... */
You can of course put each theme in a separate CSS file, to make things easier to organize. But for performance reasons, I suggest you load all CSS at once and just swap classes onclick, instead of a dynamic stylesheet loader .