CODEWITHSUNDEEP
htmliframe
Elye M.
Elye M.

Reputation: 2747

Iframe scrollbar align to right

There is a way to align the scroll bar from an iframe to right? its by default to left.
any idea?

take a look here i wanna see the search box when i load the page!

i have an application that has an ifram, in the ifram I'm loading a website that the search box is on the upper right,
and i want that when the page loads i should be able to see the search box right away without having to scroll to the right.... something not clear?

Upvotes: 3

Views: 3847

Answers (1)

Alan Han
Alan Han

Reputation: 960

can you use jquery? if yes, you can do the following: 

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>This is some text. This is some text. This is some text.
<div id="frame" style="width: 200px; height: 200px; overflow: scroll";>
<iframe src="http://www.w3schools.com/default.asp" width="1024" height="768" scrolling="no">
<p>Your browser does not support iframes.</p>
</iframe>
</div>
This is some text. This is some text. This is some text.</p>
<p>The align attribute was deprecated in HTML 4, and is not supported in HTML 4.01 Strict DTD or in XHTML 1.0 Strict DTD. Use CSS instead.</p>
<script type="text/javascript">
jQuery(document).ready(function () {
$("#frame").scrollTop(10).scrollLeft(750);
});
</script>
</body>
</html>

If you copy and paste the code into a html file and open it in your browser, you'll see that the iframe is automatically scroll to the very right.

The key changes are:

  1. import jquery in your html file
  2. add scrolling="no" to your iframe
  3. specify the width and height of your iframe, it should be roughly the same as the actualy width & height of the embedded page
  4. wrap your iframe in a <div>, be sure to specify the width & height (less than the iframe width & height)

  5. add the javascript code before the closing </body> tag

    <script type="text/javascript"> jQuery(document).ready(function () { $("#frame").scrollTop(10).scrollLeft(800); }); </script>

Upvotes: 2

Related Questions