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.
Related
So I have a SMF forum and I need to apply a background image only to the homepage. when I just simply add the style to the .body it does change the homepage background but also change in other sections as well, eg: forums boards and posts. So I just only want to display the background image on the homepage and it should not apply to the other forum sections. Is this possible ?
It is possible.
Simplest way to do this is to add a class in homepage body element.
<html>
---
<body class="has-background-img">
---
---
</body>
further, remove this class from other pages where you do not want background image to appear.
If you want the background only on your homepage, it's better you use the inline styling method.
<html>
...
...
<body style="background-image: url("gradient_bg.png");">
...
...
</body>
</html>
CSS Background
CSS How to
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
The reason I need to do this is that the website I'm working on uses the exact same template to display dynamic content for multiple pages. All pages replicate the exact same div id's because they display the content the same way (except for the header content!). The header content shortens however the div id's still remain within the source code.
The blog index page needs to display 1 background image while every other page on the website displays another background image.
Thanks in advance for any help.
This snippet of code will do what you want:
if (window.location.href.indexOf('somepart_of_the_url') != -1) {
//Change background to some div
$('#somediv').css('backgroundImage','url(images/mybackgroundimage.jpg)');
//Change background to page body
$("document.body").css('backgroundImage','url(images/mybackgroundimage.jpg)');
}
I often give the body class a name based on the template or request path. I know you said that they all use the same template, but that template takes params and one of the params should be
body_class
And whatever controller/dynamic thing you have populating your site and rendering the template, should pass in 'home' when you're at /. In my previous experience, I would pass in other things as well so that /blog/category/post might have a body class like
<body class="post two-column-a">
Then your selectors are something like:
body { ... }
body.home { ... }
This works:
<script language="javascript">
$(document).ready(function() {
if (window.location.href.indexOf('INDEX_URL') != -1) {
//Change background
$('#DIV_ID').css({'background-image': 'url(http://URL.com/images/BG.jpg)', 'background-repeat': 'repeat-x', 'background-position': 'center top', 'width': '100%!important', 'min-height': '400px'});
}
});
</script>
The flaw that this code has though is that if you insert a directory into "INDEX_URL" such as /folder/, any page after /folder/ will have that background.
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 .
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