Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Iframe scrollbar align to right

Tags:

html

iframe

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?

like image 801
Elye M. Avatar asked Aug 05 '26 17:08

Elye M.


1 Answers

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>

like image 135
Alan Han Avatar answered Aug 08 '26 11:08

Alan Han