SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Objects change position after JS css modification

    Hello,

    I have a site with textbox and submit button. Every time when im trying to type into textbox, submit button moves a bit downwards. I assume that it is because of Javascript changing font size in the textbox, but i have no idea how to fix that issue. I would be happy if someone would help me.
    Example can be found here: http://maksim.no-ip.org/kust/

    Regards,
    Max

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,168
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Hi Brog. Welcome to the forums.

    The problem seems to be the change in font size on focus, so you could just remove this line in red from your script:

    Code:
    function SetValue(val) {
    	if (val == 'off' && document.getElementById("box").value == ''){
    		document.getElementById("box").style.fontStyle="italic";
    		document.getElementById("box").style.fontSize="small";
    		document.getElementById("box").value = "Type text here!";
    	}
    	else if (val == 'on' && document.getElementById("box").value == "Type text here!"){
    		document.getElementById("box").value = '';
    		document.getElementById("box").style.fontStyle="normal";
    		document.getElementById("box").style.fontSize="18px";
    	}
    }
    The alternative is to make the value in the blue line the same as that in the red line. That is, change "small" to "18px" or change "18px" to "small".

  3. #3
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for the answer. But if I'll change value "small" to "18px" or vice versa, then in this case after moving off from the textbox and leaving it empty, text "type text here" appears to be bigger than the content which im typing in and before that. Point of this textbox is that "Type text here!" should be in italic and some px smaller than user typed text.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,168
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Brog View Post
    "Type text here!" should be in italic and some px smaller than user typed text.
    I'd let go of that desire and just use something like:

    Code:
    <script type="text/javascript">
    function SetValue(val) {
    	if (val == 'off' && document.getElementById("box").value == ''){
    		document.getElementById("box").style.fontStyle="italic";
    		document.getElementById("box").style.fontSize="12px";
    		document.getElementById("box").value = "Type text here!";
    	}
    	else if (val == 'on' && document.getElementById("box").value == "Type text here!"){
    		document.getElementById("box").value = '';
    		document.getElementById("box").style.fontStyle="normal";
    		document.getElementById("box").style.fontSize="12px";
    	}
    	
    }
     </script>

  5. #5
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Those lines doesnt make sense then anymore, because i could just set static font size in CSS and thats it. If there is no other way, then I assume that it should be done with positioning or float properties.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,346
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    This should stop the jump.

    Code:
    input#box{vertical-align:top}
    (At least it does in Firefox via firebug)

  7. #7
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When I added this line, my textbox started jumping, so I added this property to both objects and now they are staying where they are. Thank you for your help!

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,346
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Glad it worked


Tags for this Thread

Bookmarks

Posting Permissions

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