I have an iframe loaded with dynamic datas. The page doesn't contains a postback. While deleting datas from this page its heights are not decreasing.
Why is it so?
Because the page is net being rendered again. Use JavaScript to decrease the height after data is removed.
Something like (untested):
parent.window.document.getElementById("<FRAME_NAME>").height = parent.window.document.getElementById("<FRAME_NAME>").height - 30;
If you mean that if you removed data from Iframe, the Iframe is not dynamically resizing it self to fit to content inside like span or div tags (if div size was not set).
if that so. sorry Iframe doesn't work like this.
it is inner page and its size is fixed and you must use Javascript if you want to give dynamic resizing.
that's how I understood it. clarify me if I miss understood
Related
So I've been tinkering with this site, and I've got my work cut out, but right now I cannot for the life of me workout why content is displaying beyond the width of the window.
-redacted-
I believe it's something to do with bootstraps row/col guttering but have been unable to fix it, even with dreaded '!important' use.
Furthermore i note that a carousel button is extending beyond the width of the screen.
This basically just makes the site flimsy and seem broken.
Any css whizz out there able to give me some tips of this shit?
If the problem is with one specific tag (e.g. a <div>), add a class/id to that div with the following CSS: .classname { overflow-x: hidden; If it's the whole page, you might want to do that for the body and HTML tag. Note: When you do this last thing, people aren't able at all to scroll horizontally. This is a but user unfriendly, so you want to use that only if it's the only way out in my opinion.
I am trying to change the width and height of smoothbox popup which in fact is the iframe. The traditional way of setting iframes width ain't working because of TB_Overlay.
I had just tried CSS way as listed below but not really as flexible as a normal iframe.
I have added no conflict and used jquery.
var $j = jQuery.noConflict();
$j('#TB_window').css('width','800px');
document.getElementById("TB_iframeContent").width = "800";
Is there any better way to set the smoothbox width and height? Hope many are looking for answer.
Thanks in advance
jquery will not work in iframe. It would be easy if you add new CSS according to the particular page
#page_id .particular_div_class #TB_windowcss
{
'width':'800px' !important;
}
I'm having a problem with a huge gap in between the content and the footer ad. I can't quite figure out how to fix it. I suspect it may be to do with the content on the right as it is generated by another site (indeed.com).
Here's the link:
http://www.immediatestarts.co.uk/
Much appreciated if anyone can help.
It is actually the Javascript file you are embedding within that is writing an iframe out to the screen with a height of 2000px. I'm guessing you don't have control over that since it's coming from a third-party site, so you could try writing a CSS rule on your page to control the iframe, such as
#indeedjobs iframe {
height: 1000px;
}
Edit: Alternatively if that isn't working, you could just set the height of #indeedjobs itself to height:1000px, then set overflow:hidden on the div as well if you want to prevent the iframe from spilling outside of it.
You're putting a height of 2000px onto the iframe, in an inline style (ie <iframe style="height: 2000px"> - remove that, and it'll be fine.
I have an editable iframe and I want to insert two DIVs at the [b]top [/b]and [b]bottom [/b]part(as header/footer) of iframe body respectively. Now, the question is : how to insert a div [b]at the top of iframe body[/b] and fix it there? (Will insertFirst() work?)
Also, how to fix the footer div always [b]at the bottom of the iframe body[/b]? I tried make its position absolute and gave a margin top/bottom, but the problem comes when the body height of the iframe increases and footer DIV position does not change.
I want the same thing google docs does, i.e. fixing separate part for header/footer (though google docs page is not an iframe).
Any work around?
I assume by "fixed" you don't mean position: fixed but "not editable"?
I don't know of a native way to do that, the only thing I do know is CKEditor's protectedSource configuration setting. It allows to specify regular expressions; content matching those expressions cannot be removed by the user.
If you mean "fixed" as in "position", the position: fixed CSS property should work for you (Doesn't work in IE6 though).
[Update]
I actually compromised on this problem for now by foregoing the fixed footer design.
It seems that there is no problem with dynamic content moving the footer and resizing containers appropriately unless the footer is fixed to the browser bottom initially.
I hope others will eventually provide a great solution that encompasses the best of both worlds.
I spent all day trying to get the footer to move down the page to accommodate dynamically added (via ajax) content. I really need some pointers or links because I haven't found anything that helps.
Basically:
My site has some pages that begin with only a text box and a button so that the total height of the content area is only a few inches beneath the header area.
I don't have any problem getting the sticky footer working so that the footer appears at the bottom of the browser window even when there is very little content on screen.
That same css layout works fine for other pages that have content that extends beneath the browser window.
The catch:
The content has to be rendered and passed to the browser with the initial load.
The Problem:
Any content that is added to the page via AJAX after the initial load paints down the page correctly -- but the footer remains in its initial location.
Please tell me there is a fix for this.
I can't post the css until checking with my boss first - if possible - and if needed, I will later - but it's just a very basic version of the many sticky footer css solutions floating around the web.
Thanks.
Currently fixed similar situation with small jQuery and CSS, where parameter is footer div object (i.e. $("#mainfooter")):
function positionFooter(obj){
if ($("body").outerHeight(true) > $(window).height()) {
obj.css("position","relative");
} else {
obj.css("position","fixed");
obj.css("bottom","0px");
}
}
Bound this function to $(document).ready and $(window).resize.
If ajax call resizes body, this should be called also after content load.
It sounds like your footer is using display: fixed or similar. Try changing the container of your footer to:
bottom: 0;
display: block;
position: absolute;
That will ensure it appears right at the bottom of whatever container it sits within (I'm assuming the <body> tag). Your problem now becomes ensuring that it appears at the bottom of the screen rather than the bottom of your document, which starts of being much shorter. You could accomplish this in a couple of ways, but perhaps the easiest would be to set a minimum height on your AJAX content container:
min-height: 600px;
height: auto !important /* This is a hack to make IE6 fix itself to a set height */
height: 600px; /* IE6 will always follow whatever instruction appears last, even if !important is specified */
The other approach is since you're using a JavaScript library (I assume?) to grab the required content, perhaps you could also adjust the height of the AJAX content container or change the footer's CSS once that content has loaded?
Without any code it´s hard to tell what the problem might be.
However, I´m using a sticky footer as described here that works very well although I haven´t added ajax content in it. Browser resizing works just fine though.
Use include in PHP and call the footer after the dynamic content appears.
I'm not sure you are looking for this, but I am also facing the same problem before and same CSS, where my content overlaps on the footer when i call the ajax through jQuery method.
Now I found the solution: Just get the div height through jQuery and apply the height to the div where you are returning your results from ajax.
var obj = $("#viewcomm").height();
if($.browser.msie) {
$("#viewcomm").height(obj).css({cursor:"auto"});
}
where here viewcomm is div ID.
I solved same kind of problem with following code, where content is the id of div where php pages load and footer is the footer tag.
var footerAdjustId = setInterval(adjustFooter, 2000);
function adjustFooter(){
$("footer").css("marginTop", $("#content").height() - $(window).height());
clearInterval(footerAdjustId);
}