www.webdeveloper.com
Results 1 to 6 of 6

Thread: How can I make it so that I can resize my windows without the text moving as well?

Hybrid View

  1. #1
    Join Date
    Feb 2012
    Posts
    64

    How can I make it so that I can resize my windows without the text moving as well?

    As in, I would like it so that if I moved my right border of the web browser to the left, then the text wouldn't move, and instead it would be obscured.

    Is there an easy way to do this using JavaScript?

  2. #2
    Join Date
    May 2005
    Location
    Dirty Jersey
    Posts
    1,402
    javascript just manipulates objects in the DOM. at the end of the day, the position of your element is a function of the DOM. so the short story is that you should be focusing on how you're positioning elements in the DOM instead of trying to use javascript to "fix" it. javascript can be used, but it isn't the starting point.

    the reason your text is moving is because it is placed relative to something that is moving. you need to either style your text to ignore that object it is relative to, or you need to change the relation of your text to the other elements on your page.

    do you have an example of your page? it would be easy to modify it to show you how to put this in to practice if you provided an example.

    1. If you reply to my post, and your reply would then appear directly beneath my post, DON'T QUOTE MY ENTIRE POST!!! IT'S REDUNTANT!!! IT'S ASININE!!!! IT'S REDUNDANTLY ASININE!!!!! DON'T DO IT!!!!
    2. jQuery extends the functionality of JavaScript. If you don't know JavaScript, give up on that jQuery script and learn JavaScript. You'll save yourself a lot of frustration, I promise.
    3. Use the [code][/code] tags. Otherwise, you may be left wondering why no one responded to your eyesore of a thread.


  3. #3
    Join Date
    Feb 2012
    Posts
    64
    I don't have an online example to provide, sorry

    I was just wondering if there was a fix to this issue using JavaScript

  4. #4
    Join Date
    May 2005
    Location
    Dirty Jersey
    Posts
    1,402
    you could very easily take your example HTML and paste it between code blocks on this site. would have saved you a post if you had.

    like i said, the issue could be "fixed" with javascript, but it shouldn't need to be fixed in the first place. the web page should be written to place elements where they're supposed to be long before javascript comes into the situation.

    1. If you reply to my post, and your reply would then appear directly beneath my post, DON'T QUOTE MY ENTIRE POST!!! IT'S REDUNTANT!!! IT'S ASININE!!!! IT'S REDUNDANTLY ASININE!!!!! DON'T DO IT!!!!
    2. jQuery extends the functionality of JavaScript. If you don't know JavaScript, give up on that jQuery script and learn JavaScript. You'll save yourself a lot of frustration, I promise.
    3. Use the [code][/code] tags. Otherwise, you may be left wondering why no one responded to your eyesore of a thread.


  5. #5
    Join Date
    Feb 2012
    Posts
    64
    The coding for my homepage is:

    Code:
    <html>
    <head>
    <title>WebWise Ltd. Homepage</title>
    <script type="text/javascript" src="functions.js"></script>
    <link rel="stylesheet" href="layout.css" type="text/css" />
    <script src="javascript.js">
    </script>
    </head>
    
    <body topmargin=0 bottommargin=0 leftmargin=0 rightmargin=0 marginheight=0 marginlength=0>
    <div id="container">
     <div id="banner">
     <h1>Homepage</h1>
     </div>
     <ul id="navlist">
     <li><a href="#">Homepage</a></li>
      <li><a href="catalogue.html">Catalogue/Order Website</a></li>
       <li><a href="#" onClick="return help()">FAQs/Contact Us</a></li>
       </ul>
    
     <div id="leftnav">
     </div>
     <div id="rightnav">
     </div>
     <div id="content">
     <h2>Subheading</h2>
     <p>
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
     </p>
     <p>
     Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
     </p>
     </div>
     <div id="footer">
     Footer
     </div>
     </div>
    </body>
    </html>

  6. #6
    Join Date
    May 2005
    Location
    Dirty Jersey
    Posts
    1,402
    by default, the P tag has a width of "100&#37;". that 100% is from the left margin to the right margin. when you move the right margin, the 100% remains intact, but only relative to the amount of space between the left and right margins.

    when text reaches the end of the 100%, it wraps. you could tell the text not to wrap around:

    http://www.w3schools.com/cssref/pr_text_white-space.asp

    Code:
    <p style=white-space:nowrap>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
    then, you'd have to create manual line breaks to make the text not just keep going right until the paragraph ends. however, other people's browsers will look different, and there's NO WAY to standardize the way it looks on other people's setups.

    ultimately, you need to tell your p tag to have a specific width. this way, instead of it defaulting to "100%", it will conform to whatever you tell it to conform to:

    http://www.w3schools.com/cssref/pr_dim_width.asp

    Code:
    <p style=width:2000px>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
    you'll still run into the problem where someone else's browser window may be shorter or longer than yours, but at least, pixel wise, the P will be the same in both windows.
    Last edited by Angry Black Man; 03-03-2012 at 12:37 PM. Reason: clarity

    1. If you reply to my post, and your reply would then appear directly beneath my post, DON'T QUOTE MY ENTIRE POST!!! IT'S REDUNTANT!!! IT'S ASININE!!!! IT'S REDUNDANTLY ASININE!!!!! DON'T DO IT!!!!
    2. jQuery extends the functionality of JavaScript. If you don't know JavaScript, give up on that jQuery script and learn JavaScript. You'll save yourself a lot of frustration, I promise.
    3. Use the [code][/code] tags. Otherwise, you may be left wondering why no one responded to your eyesore of a thread.


Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

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
  •  
HTML5 Development Center



Recent Articles