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 6 of 6

Thread: Preview text

  1. #1
    New Coder
    Join Date
    Feb 2007
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Preview text

    I made this code so that when a user enters a colour the colour of the "preview" text changes

    Code:
    Colour: <input type="text" size="10" onkeyup="colourpreview.color=this.value" onchange="colourpreview.color=this.value">
    <font id="colourpreview">Preview</font>

    It works fine, however when i want to do the same thing with elements that use style, for example the highlight colour:

    Code:
    <span style="background-color: colour">ss</span>
    Can you write me the script and change it so that it canges the background colour of the Preview text?

    Preferably do it like this:

    <span id="bgcolourid"><font id="colourpreview">Preview</font><span>

    ALso is it possible for you to make the codes so that they work with dropdown boxes??

    <option>Colour here</option>
    Last edited by TaboTabo; 02-23-2007 at 02:27 PM.

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Here's one possibility

    PHP Code:
    <script type="text/javascript">

    function 
    changeColor(v){

    elements=document.getElementsByTagName("*")

    for(var 
    i=0;i<elements.length;i++){

    if(
    elements[i].className=="newcolor"){
    elements[i].style.color=v

    }

    }

    }


    </script>
    Colour: <input type="text" size="10"  onchange="changeColor(this.value)">
    <div class="newcolor">Preview</div>

    <span class="newcolor">ss</span> 
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #3
    New Coder
    Join Date
    Feb 2007
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks a lot but i need it to change the background colour (fill) of the "preview" text

    Edit: thanks i edited it my self, works now

    Know how i can now do it with B/I/U?
    Last edited by TaboTabo; 02-23-2007 at 03:13 PM.

  • #4
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Use

    font-weight:bold

    font-style:italic

    text-decoration:underline


    Scriptwise

    fontWeight="bold"

    fontStyle="italic"

    textDecoration="underline"
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #5
    New Coder
    Join Date
    Feb 2007
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks, i know about the css stuff but when i do it in javascript it never works, Can you do it for me? Also how can i make it work in dropdown boxes?


    thanks a lot

  • #6
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    When referencing css in Javascript you have to use camelCasing
    Here's a few examples

    PHP Code:
    <script type="text/javascript"

    function 
    changeColor(v){ 

    elements=document.getElementsByTagName("*"

    for(var 
    i=0;i<elements.length;i++){ 

    if(
    elements[i].className=="newcolor"){ 
    elements[i].style.color=
    }

    if(
    elements[i].className=="newbold"){ 
    elements[i].style.fontWeight="bold" 
    }

    if(
    elements[i].className=="newunderline"){ 
    elements[i].style.textDecoration="underline" 
    }

    if(
    elements[i].className=="newitalic"){ 
    elements[i].style.fontStyle="italic" 
    }

    if(
    elements[i].className=="newbackground"){ 
    elements[i].style.backgroundColor=v







    </script> 
    Colour: <input type="text" size="10"  onchange="changeColor(this.value)"> 
    <div class="newcolor">Preview</div> 

    <span class="newcolor">ss</span><BR>

    <div class="newbold">BOLD</div> 
    <div class="newunderline">UNDERLINE</div> 
    <div class="newitalic">ITALIC</div> 

    <select>
    <option class="newcolor">Option 1</option>
    <option class="newbackground">Option 2</option>

    </select> 

    With the select box you are limited as to what you can use
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.


  •  

    Posting Permissions

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