Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Problem with moving scroll bar in IFrame

    I have a paragraph of text which is embedded in an IFrame. when i search particular string in that paragraph, if the string is found then the string will be highlighted and the full paragraph is loaded in IFrame. but, if the searched text is at the bottom, then scroll bar in an iframe is not automatically moved to the hidden highlighted text position. any body help me to move the scroll bar automatically to the hidden text position in the IFrame?

    please run the code,

    type any text from the paragraph of text and click serach button.

    see the output. [if the searched text is at the bottom, move the scroll bar to see it in the iframe]

    code:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">

    <script language="javascript" type="text/javascript">
    var html = "Cascading Style Sheets (CSS) are an increasingly commmon way for website developers to control the look and feel of their web pages. A style ssheet allows the website developer to specify the size, font and color of text for an entire website without having to code the information in each page. Style sheets separate the stylle (or look and feel) of the document from the structure (or the content and ordering of information).<br/>1.This # 1 item in this loong list <br/>2.This # 2 in the list <br/>3.This # 3 item in thiis long list <br/>4.This # 4 in the list <br/>5.This # 5 item inx this long list CSS is a powerful way for content developers to preserve the desired fonts, colors, and text sizes of HTML documents. Howwever, students with disabilities can also benefit from sites designed using CSS. Individual users can choose to apply their own style sheets to documents, overriding any other style sheets. FFor example, a person with low vision could modify every CSS-enabled website to display texxt in yellow on a black background, if those colors enable her to read the text.";
    var iframe;
    var id;
    var doc;
    var index;
    var highlightStartTag = "<span style='color:#EE7A03'>";
    var highlightEndTag = "</span>";
    var wrong_word = "speltext";
    var afterHighlightText;
    var newText;
    var start = 0;

    function highlight() {
    iframe = document.getElementById('frame1');
    doc = iframe.document;
    if (iframe.contentDocument)
    doc = iframe.contentDocument;
    else if (iframe.contentWindow)
    doc = iframe.contentWindow.document;
    }
    function highlight1() {
    newText = html;
    var tid = document.getElementById('TextBox1');
    var text = tid.value;
    index = newText.indexOf(text);
    if (index >= start) {
    var length = 0;
    length = index + wrong_word.length;
    var before_delim = newText.charAt(index - 1);
    var after_delim = newText.charAt(length);
    var beforeHighlightText = newText.substring(0, index - 1);
    afterHighlightText = newText.substring(length + 1, newText.length);
    newText = beforeHighlightText + before_delim + highlightStartTag + newText.substr(index, text.length) + highlightEndTag + after_delim + afterHighlightText;
    doc.write(newText);
    }
    else {
    alert("Reached End");
    }
    return false;
    }
    </script>

    </head>
    <body onload="highlight()" >
    <form id="form1" runat="server">
    <div>
    <div>
    <b>Sample Text:</b>
    <br />
    Cascading Style Sheets (CSS) are an increasingly commmon way for website developers to control the look and feel of their web pages. A style ssheet allows the website developer to specify the size, font and color of text for an entire website without having to code the information in each page. Style sheets separate the stylle (or look and feel) of the document from the structure (or the content and ordering of information).<br/>1.This # 1 item in this loong list <br/>2.This # 2 in the list <br/>3.This # 3 item in thiis long list <br/>4.This # 4 in the list <br/>5.This # 5 item inx this long list CSS is a powerful way for content developers to preserve the desired fonts, colors, and text sizes of HTML documents. Howwever, students with disabilities can also benefit from sites designed using CSS. Individual users can choose to apply their own style sheets to documents, overriding any other style sheets. FFor example, a person with low vision could modify every CSS-enabled website to display texxt in yellow on a black background, if those colors enable her to read the text.
    </div>
    <br />
    <b>Type the Text to Search from the above passage, for EG:"powerful"</b>
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    <br />
    <br />
    <b>Move Scroll button to see hidden highlighted text</b>
    <iframe id="frame1"></iframe>
    <br />
    <br />
    <asp:Button ID="Button1" runat="server" Text="Search"
    OnClientClick="return(highlight1());" />
    </div>
    </form>
    </body>
    </html>

    Thanks,
    Lakshmi

  • #2
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Having written the document (which requires that you close() it afterwards) you determine the position of the enclosing span and scroll the window to it.
    BTW your replacement algorithm isn't quite right yet.
    Code:
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    
    <script language="javascript" type="text/javascript">
    var html = "Cascading Style Sheets (CSS) are an increasingly commmon way for website developers to control the look and feel of their web pages. A style ssheet allows the website developer to specify the size, font and color of text for an entire website without having to code the information in each page. Style sheets separate the stylle (or look and feel) of the document from the structure (or the content and ordering of information).<br/>1.This # 1 item in this loong list <br/>2.This # 2 in the list <br/>3.This # 3 item in thiis long list <br/>4.This # 4 in the list <br/>5.This # 5 item inx this long list CSS is a powerful way for content developers to preserve the desired fonts, colors, and text sizes of HTML documents. Howwever, students with disabilities can also benefit from sites designed using CSS. Individual users can choose to apply their own style sheets to documents, overriding any other style sheets. FFor example, a person with low vision could modify every CSS-enabled website to display texxt in yellow on a black background, if those colors enable her to read the text.";
    
    var iframe;
    var id;
    var doc;
    var index, ifw;
    var highlightStartTag = "<span style='color:#EE7A03' id='hlt'>";
    var highlightEndTag = "</span>";
    var wrong_word = "speltext";
    var afterHighlightText;
    var newText;
    var start = 0;
    
    function highlight() 
    {
       iframe = document.getElementById('frame1');
       doc = iframe.document;
       if (iframe.contentDocument)
       doc = iframe.contentDocument;
       else if (iframe.contentWindow)
       doc = iframe.contentWindow.document;
       
       ifw = iframe.contentWindow;
    }
    function highlight1() 
    {
       newText = html;
       
       var tid = document.getElementById('TextBox1'),
           text = tid.value,
           theSpan;
           
       index = newText.indexOf(text);
       if (index >= start) 
       {
          var length = 0;
          length = index + wrong_word.length;
          var before_delim = newText.charAt(index - 1);
          var after_delim = newText.charAt(length);
          var beforeHighlightText = newText.substring(0, index - 1);
          afterHighlightText = newText.substring(length + 1, newText.length);
          newText = beforeHighlightText + before_delim + highlightStartTag + newText.substr(index, text.length) + highlightEndTag + after_delim + afterHighlightText;
          doc.open();
          doc.write(newText);      
          doc.close();
          theSpan = doc.getElementById('hlt')
          ifw.scrollTo( theSpan.offsetLeft, theSpan.offsetTop );
          
       }
       else {
       alert("Reached End");
       }
       return false;
    }
    </script>
    
    </head>
    <body onload="highlight()" >
    <form id="form1" runat="server">
    <div>
    <div>
    <b>Sample Text:</b>
    <br />
    Cascading Style Sheets (CSS) are an increasingly commmon way for website developers to control the look and feel of their web pages. A style ssheet allows the website developer to specify the size, font and color of text for an entire website without having to code the information in each page. Style sheets separate the stylle (or look and feel) of the document from the structure (or the content and ordering of information).<br/>1.This # 1 item in this loong list <br/>2.This # 2 in the list <br/>3.This # 3 item in thiis long list <br/>4.This # 4 in the list <br/>5.This # 5 item inx this long list CSS is a powerful way for content developers to preserve the desired fonts, colors, and text sizes of HTML documents. Howwever, students with disabilities can also benefit from sites designed using CSS. Individual users can choose to apply their own style sheets to documents, overriding any other style sheets. FFor example, a person with low vision could modify every CSS-enabled website to display texxt in yellow on a black background, if those colors enable her to read the text.
    </div>
    <br />
    <b>Type the Text to Search from the above passage, for EG:"powerful"</b>
    <Textarea ID="TextBox1" runat="server"></Textarea>
    <br />
    <br />
    <b>Move Scroll button to see hidden highlighted text</b>
    <iframe id="frame1"></iframe>
    <br />
    <br />
    <input type=Button ID="Button1" runat="server" Text="Search"
    OnClick="return(highlight1());" value="FIND"/>
    </div>
    </form>
    </body>
    </html>

  • #3
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    re:Problem with scrllbar in iframe

    Thanks..It's working..


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •