SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Thread: javascrip/css

  1. #1
    SitePoint Member
    Join Date
    Feb 2011
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    javascrip/css

    hello,

    I need some help. I created a table that has some drop down boxes and based on the user selection it will show the text on the bottom,

    the plain drop down box has (nomal/bold/italic/bold-italic)
    the large drop down box has (large/medium/small)

    can someone please guide me or provide me a little demo on how to get this working?



  2. #2
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Location
    Oskarshamn, Sweden
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Hello!
    HTML Code:
    <form action="#">
    	<div>
    		<label for="text">Text</label>
    		<input id="text" name="text" type="text" />
    
    		<label for="style">Style</label>
    		<select id="style" name="style">
    			<option value="n">normal</option>
    			<option value="b">bold</option>
    			<option value="i">italic</option>
    			<option value="b i">bold-italic</option>
    		</select>
    
    		<label for="size">Size</label>
    		<select id="size" name="size">
    			<option value="l">large</option>
    			<option value="m">medium</option>
    			<option value="s">small</option>
    		</select>
    	</div>
    </form>
    <div id="result"></div>
    
    <script type="text/javascript">
    (function () {
    	var text = document.getElementById("text"),
    		style = document.getElementById("style"),
    		size = document.getElementById("size"),
    		result = document.getElementById("result");
    
    	if (!text || !style || !size || !result) {
    		return;
    	}
    
    	function updateText() {
    		result.innerHTML = text.value;
    	}
    
    	function updateTextStyles() {
    		result.className = style.options[style.selectedIndex].value + " " + size.options[size.selectedIndex].value;
    	}
    
    	updateText();
    	updateTextStyles();
    
    	text.onkeyup = updateText;
    	text.onchange = updateText;
    	style.onchange = updateTextStyles;
    	size.onchange = updateTextStyles;
    }());
    </script>
    and
    Code:
    .n { font-style: normal; font-weight: normal; }
    .b { font-weight: bold; }
    .i { font-style: italic; }
    .l { font-size: 16px; }
    .m { font-size: 14px; }
    .s { font-size: 12px; }


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
  •