i have 2 problem with object element in html,
i use this object
<object id='obj1' data='Manager/First_Manager.aspx' type='text/html' width='100%' height='1000' style='background:#FBFBFB;text-align:center;overflow:hidden;'></object>
problem 1: i force determinate height for object, what do i do for growing object element auto?
problem2: when i move between two big pages, at the return to first page scroll not return to top of page. it stay in the place of the before page.
for problem1: height:auto will helps....(Need some more code structure to dig the issue)
for your problem two put this javascript in your page for take the page to top.
(Note: Below code using jQuery you must refer jQuery.js in your page. )
<scripttype="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
$(document).ready(function(){
$(this).scrollTop(0);
});
</script>
Related
I'm inserting a jsp page on an existing jsp page (left menu) to simplify my deployment and mutualize my menu in any page of my site.
Here is the insertion I'm performing:
<body>
....
<div style="overflow-y:scroll;" id="leftMenu"></div>
....
<script>
$(document).ready(function() {
$("#leftMenu").load("leftMenu.jsp");
.....
</script>
insertion is working well but I would need to get the y scroll available systematically but it is not working properly (on Chrome and Firefox and IE). Sometimes when I refresh the page I can see the vertical scrolling but this is not systematic.
I also tried to insert as well tag
height: 100%
but same result, how can I get the vertical scrolling on this jsp page I'm inserting ?
If I am right then:
If you always want a scrollbar whether it’s needed or not,
use overflow:scroll.
Change the styles overflow style when you loading new JSP page
Keep the style "overflow: hidden". If you don't want to scrollbar initially
eg. when loading the new jsp
$(document).ready(function() {
$("#leftMenu").load("leftMenu.jsp");
$("#leftMenu").css("overflow-y", "scroll");
Chrome flickers when reloading content in iframes. Can this be avoided in any way, thinking of:
Wrapping a-links with js that does some magic.
Meta-tags in content-html. (I have source control over the html in the iframes)
Please note that the content-type in the iframe may vary (pdfs, html, images) so if ajax is the only way out here, does it reflect the http-content-type back to the iframe?
Please visit the demo at http://jsfiddle.net/2tEVr/
Excerpt of fiddle:
<iframe name="if" width="800" height="600"></iframe>
UPDATE
The solution that worked best for me was to replace regular href's with ajax-requests, repopulating the body-area, (solution 4 below) Flickering is gone but comes at a price of akward debugging since sync between content and "view-source" is lost on ajax-request.
Also, since the content-type in my case may change, the method for performing the ajax-request had to have some brains and possibly fall back to regular location request.
regards,
#user247245: From your question, its not entirely clear how you (want to) use the iframe. Does it reload periodically, or once when the whole webpage loads?
Solution 1: Different background color
In case you just want to avoid the ugly white, and avoid over-complication. Set a different background color in your HTML header of the framecontents.html file, like so:
<!DOCTYPE html>
<html style="background-color: #F48;">
This way, while the CSS file loads,parses, and gets applied, the background is not #fff.
Solution 2: Transparent iframe
While there is no content, the iframe should simply not be visible. Solution:
<iframe src="/framecontents.html" allowTransparency="true" background="transparent"></iframe>
Ofcourse dont use this in combination with solution 1, you'll shoot yourself in the foot.
Solution 3: Preload iframe page
In case you are loading the iframe later (such as user clicking a link), consider preloading its contents. Hide this in near the top of your (parent) page:
<iframe src="/framecontents.html" style="position: absolute; width: 0px; height: 0px"></iframe>
But i'd advise using solution 2 instead.
Solution 4: If doing a mobile web interface:
See how jQuery Mobile did it. We built a web interface that had to feel like a native app, so without reload flashes. jQM fixed that. Basically does a background ajax call to retrieve the full HTML contents, then extracts the body (the "page" div to be more precise) and then replaces the contents (with a transition if you like). All the while a reload spinner is shown.
All in all this feels like more like a mobile application: no reload flashes. Other solutions would be:
Solution 5: Use JS to inject CSS:
See answer by jmva, or http://css-tricks.com/prevent-white-flash-iframe/ .
Solution 6: use JS to inject CSS (simple version)
<script type="text/javascript">
parent.document.getElementById("theframe").style.visibility = "hidden";
</script>
<iframe id="theframe" src="/framecontents.html" onload="this.style.visibility='visible';"></iframe>
You could ofcourse leave out the <script> part and add style="visibility:hidden;" to the iframe, but the above would make sure that the frame is visible for visitors with JS disabled. Actually, i'd advise to do that because 99% of visitors has it enabled anyway, and its simpler and more effective.
A common trick is to display the iframe just when it's full loaded but it's better to not rely on that.
<iframe src="..." style="visibility:hidden;"
onload="this.style.visibility='visible';"></iframe>
The same trick a bit optimized using JS.
// Prevent variables from being global
(function () {
/*
1. Inject CSS which makes iframe invisible
*/
var div = document.createElement('div'),
ref = document.getElementsByTagName('base')[0] ||
document.getElementsByTagName('script')[0];
div.innerHTML = '<style> iframe { visibility: hidden; } </style>';
ref.parentNode.insertBefore(div, ref);
/*
2. When window loads, remove that CSS,
making iframe visible again
*/
window.onload = function() {
div.parentNode.removeChild(div);
}
})();
Extracted from css-trick
If you have to switch between different sites and that trick of onload isn't working the only viable solution would be destroy and create the iframe programatically.
Try adding transform: translate3d(0, 0, 0); on a parent element.
I had an issue where the iframe was taller than its parent (parent has overflow: hidden). The iframe's overflown portion was flickering on each video loop on Chrome (YouTube iframe API).
Forcing hardware acceleration this way was the only thing that worked for me.
A simpler solution that worked in my case was just adding this CSS to the iframe
will-change: height;
min-height: 400px;
I have a simple HTML page to display other pages. When a request comes to the page the page internally calls to another page and views called page content.
I have tried it to be done with IFrame but IFram has width and height problem. We must specify width or height of IFrame element. Because called page width and height is unknown we can't specify width and height of IFrame.
I want to get HTML of called page and put this in div or another element to display in caller page.
Any help will be appreciated.
Use the JQuery load() method. Its still an IFrame in the background, but has more options.
jQuery solution
function fetch_archive(event) {
$.ajax({
url:thePage.html,
cache:false,
success:function(data){
$("#monthly-post-container").html(data);
},
error:ajaxFailure
});
}
function ajaxFailure(){
alert("oops something went wrong");
}
I'm doing some documentation where I make heavy use of anchors for linking between pages on a wiki.
see here:
http://code.google.com/p/xcmetadataservicestoolkit/wiki/ServicesExplained#Platform_Data_Structures
The feature that really makes this work well is when the browser shows the anchor at the absolute top of the pane. When it gets confusing is when linking to an anchor shows the anchor half-way down the page since the page is scrolled down all the way
see here:
http://code.google.com/p/xcmetadataservicestoolkit/source/browse/trunk/mst-common/src/java/xc/mst/utils/Util.java#227
My solution in the wiki (first link) was to put a blank image at the bottom of the page simply to make the browser show the anchor right at the top. Is there a better way to do this? Is there a way to do it in the second link (in which I can't add a blank image)?
Putting a blank image at the bottom of your page is a bad idea, since it will expand your document to a unnecessary height.
You could throw in some javascript to apply an effect to the anchor you just travelled to, to highlight it wherever it is.
Without altering the height of your document (i.e. adding extra padding at bottom), you'll always have this issue.
However, using bit of JS/jQuery, the user experience can be improved considerably:
On clicking a named anchor:
Instead of jumping in a flash (broswer's default behavior), add a smooth scroll
add an highlight to indicate current selection (this helps tremendously in 2nd case as the user can clearly see what is current)
Created a demo to illustrate the concepts: http://jsfiddle.net/mrchief/PYsyN/9/
CSS
<style>
.current { font-weight: bold; }
</style>
JS
function smoothScroll(elemId) {
// remove existing highlights
$('.current').css({backgroundColor: "transparent"}).removeClass('current');
var top = $(elemId).offset().top;
// do a smooth scroll
$('html, body').animate({scrollTop:top}, 500, function(){
// add an highlight
$(elemId).animate({backgroundColor: "#68BFEF" }, 500, function () {
// keep tab of current so that style can be reset later
$(elemId).addClass('current');
});
});
}
// when landing directly
if (document.location.hash) {
smoothScroll(document.location.hash);
}
$('a[href*="#"]').click(function() {
// utilizing the fact that named anchor has a corresponding id element
var elemId = $(this).attr('href');
smoothScroll(elemId);
});
You can create a absolutre positioned pseudo-element with a great height to targeted block using just the following CSS (for the second link in your post:
#nums td:target a::before {
content: '';
position: absolute;
height: 700px;
}
The height must be around the height of the viewport, so the best solution is to create these styles on the fly using js. But if you don't wan't to use js, just use height: 1000px or more — if you don't mind a gap at the bottom of course.
The best part: it's only CSS and there would be no gap when no anchors are targeted.
Edit: just a sneak peek into the future: if the vw/vh units would come to other browsers (now it's only in IE9), this could be awesomely done with just CSS using height: 100vh :)
You could use Javascript / jQuery to create a white div that has the necessary height needed to put your element at the top of the browser window, and you could even remove this upon scrolling away.
However I would highly recommend against doing so as this will expand your page where it isn't needed. It's a lot smarter to simply style the tag upon going there (through Javascript / jQuery) so it pops out to the viewer, for instance by setting the font-weight to bold or changing the background-color.
I would probably use a combination of jQuery and PHP for this:
PHP(somewhere right after your <body> element):
<?php
$anchor = explode('#', $_SERVER['REQUEST_URI']);
$anchor = $anchor[1];
echo '<div id="selected-anchor" anchor="'.$anchor.'"></div>';
?>
And then the jQuery:
<script type="text/javascript">
$(function(){
$('#selected-anchor').css('background-color', '[Whatever highlight color you want]');
});
</script>
Hope this helps.
I have a web page that displays a long line graph inside a div with overflow-x: scroll.
This works well as a web page allowing the use to scroll back and forward through the graph.
However, when printing the page the scroll position is reset to zero.
Is there a way to overcome this?
I think you're going to have to specify an alternate CSS for printing where you somehow need to remove the overflow:
<link rel="stylesheet" type="text/css” href="sheet.css" media="print" />
However, maybe there is an approach with JavaScript or even Flash? If I understand correctly, you only want to have a part of the graph printed (the one "selected" by the user?) and not the full one? I'm pretty sure that's not possible with plain HTML/CSS, but I strongly believe that Flash or maybe JavaScript/AJAX (to only load a part of the image at a time) can solve it.
You can't do this in plain CSS -- you will have to reimplement the scrolling using your Javascript UI library of choice to get what you want.
The user state of the scrollbar isn't used when printing (think about it, if you're scrolled 3 screens down a page and hit "print" does it make sense for the browser to only print the part of the document that's in your window at the time?). However, if you use JS, which actually manipulates the DOM (i.e. sets the x-position offset to -293 if the person has scrolled right 293 pixels, just like style="left: -293px; overflow: hidden;" in CSS), then it will show up as such in printed documents.
My suggestion is, unless the graphs are very wide, just skip all of this nonsense and use a printer stylesheet with width: 100% for the graph's <div> so the graph just shrinks to page width.
A simple approach would be to have some javascript which posts back to your page with the user's selected scroll position on a link saying something like 'setup for printing'. Then the server side returns a page with the graph relatively positioned at the scroll position with overflow:hidden to clip the graph appropriately.
Of course this would not work for users with javascript disabled - if you want to support this you would need the user to specify the scroll position in something like a text input element and submit button which you hid with javascript when enabled.
You need to temporarily turn the scroll position of the parent into a negative margin of the child, and put that parent as overflow:hidden.
Here's how to do it in Javascript (which is the only way, css cannot do that)
Note that you will need something to execute printDone() after the printing to restore everything as normal. You could trigger it with a wheel event e.g. because the user will only have a problem when trying to scroll. Or you can just put a button as I did, and show it only when printGo() is called.
<html>
<head>
<style>
#wrapper {
width:800px;
overflow-x:scroll;
}
#content {
width:2000px;
border:2px solid red;
}
#media print { /* This overwrites the css when printing */
#wrapper {
overflow-x:hidden;
}
}
</style>
</head>
<body>
Print<br>
I'm done printing!
<div id=wrapper>
<div id=content>
Hello this is my content.
</div>
</div>
<script>
var wrapper = document.getElementById('wrapper');
var content = document.getElementById('content');
var scrollPos;
function printGo(){
scrollPos = wrapper.scrollLeft; // Save scroll position
wrapper.scrollLeft = 0;
wrapper.style.overflowX = 'hidden'; // Optional since css does it
content.style.marginLeft = -scrollPos+'px'; // Put it as a negative margin of child instead
window.print();
}
function printDone(){
wrapper.scrollLeft = scrollPos; // Restore scroll position
wrapper.style.overflowX = 'scroll'; // Optional since css does it
content.style.marginLeft = '';
}
</script>
</body></html>