Results 1 to 10 of 10

Thread: Javascript break with paragraph

  1. #1

    Thread Starter
    Addicted Member Mr.Joker's Avatar
    Join Date
    Apr 2012
    Posts
    140

    Javascript break with paragraph

    Ok, the topic title don't tell much so let me explain. When I use break tag within javascript without paragraph its all perfect, the space betwen rows is good. But when I use paragraph inside javascript and then use break the spacing is way too big. Here is complete code:

    Code:
    <!-- Web page created by Mr.Joker -->
    <html>
    <head>
    <style type="text/css">
    #search_form {
    -moz-border-radius:10px;
    border-radius:10px;
    -webkit-border-radius:10px;
    margin-top:100px;
    margin-left:auto;
    margin-right:auto;
    width:400px;
    height:100px;
    background-color:#f0f0f0;
    border:1px solid #c9c9c9;
    }
    .search {
    width:240px;
    height:32px;
    margin-left:25px;
    margin-top:33px;;
    background-color:#ffffff;
    border:1px solid #cacaca;
    color:#b9b9b9;
    padding:3px;
    }
    .button {
    width:100px;
    height:30px;
    background-color:#869abf;
    border:1px solid #65758e;
    color:#ffffff;
    }
    #main_div {
    width:600px;
    height:400px;
    margin-left:auto;
    margin-right:auto;
    background-color:#f0f0f0;
    border:1px solid #c9c9c9;
    margin-top:30px;
    }
    p {
    margin-left:10px;
    margin-top:10px;
    color:#a5a3a3;
    }
    </style>
    <script type="text/javascript">
    /*If you dare to copy this code without puting credits, I will find you and make you cry*/
    function Get_help() {
    var info = "/info";
    var help = "/help";
    var html = "/html";
    var css = "/css";
    var colors = "/colors";
    var fonts = "/fonts";
    var info_website = "This webpage is developed for helping every coder to get most common things he need for making web pages. This webpage is created by Mr.Joker for CSS Help forum members. It's not allowed to use this webpage for your forums. This page is only for members of CSS Help forum.";
    var help_website = "To use this webpage you have to type slash (/) and then some word that is allready registred as default value. " + "<br />" + "<br />" + "List of default values: " + "<br />" + "1. /info" + "<br />" + "2. /help" + "<br />" + "3. /html" + "<br />" + "4. /css" + "<br />" + "5. /colors" + "<br />" + "6. /fonts" + "<br />";
    var html_website = "This is HTML section. Here you also have default values to use:" + "<br />" + "<br /> " + "1. /html.info" + "<br />" + "2. /html.paragraph" + "<br />" + "3. /html.link" + "<br />" + "4. /html.images" + "<br />" + "5. /html.lists" + "<br />" + "6. /html.table" + "<br />" + "7. /html.forms";
    var css_website = "This is CSS section. Here you also have default values to use: " + "<br />" + "1. /css.info" + "<br />" + "2. /css." + "<br />"
    var colors_website = "";
    var fonts_website = "This is Font section. Here you can see HTML fonts that you can use :" + "<br />" + "<br />" + "<p style='font-family:Arial;'>Arial</p>" + "<br />" + "<p style='font-family:Calligrapher;'>Calligrapher</p>";
    var get_input = document.forms[0].search.value;
    if (get_input == info) {
    document.getElementById('paragraph').innerHTML = info_website;
    } else if(get_input == help) {
    document.getElementById('paragraph').innerHTML = help_website;
    } else if(get_input == html) {
    document.getElementById('paragraph').innerHTML = html_website;
    } else if(get_input == css) {
    document.getElementById('paragraph').innerHTML = css_website;
    } else if(get_input == colors) {
    document.getElementById('paragraph').innerHTML = colors_website;
    } else if (get_input == fonts) {
    document.getElementById('paragraph').innerHTML = fonts_website;
    }
    }
    </script>
    </head>
    <body>
    <div id="search_form">
    <form>
    <input type="text" name="search" value="Enter keyword to search..." class="search" onClick="document.forms[0].search.value = '';" /> <input type="button" class="button" value="Search" onClick="Get_help();">
    </form>
    </div>
    <div id="main_div">
    <p id="paragraph">&nbsp;</p>
    </div>
    </body>
    </html>
    To see the problem, type inside textbox /fonts

  2. #2
    PowerPoster dunfiddlin's Avatar
    Join Date
    Jun 2012
    Posts
    8,245

    Re: Javascript break with paragraph

    The <p> tag automatically introduces a line break. You don't need both <br> and <p>.

  3. #3

    Thread Starter
    Addicted Member Mr.Joker's Avatar
    Join Date
    Apr 2012
    Posts
    140

    Re: Javascript break with paragraph

    Well, still without brake tag the space is not that low as I wanted to be. Any other solution?

  4. #4
    PowerPoster dunfiddlin's Avatar
    Join Date
    Jun 2012
    Posts
    8,245

    Re: Javascript break with paragraph

    So leave the <br> into the first spacing and remove it from the space between the font names.

  5. #5

    Thread Starter
    Addicted Member Mr.Joker's Avatar
    Join Date
    Apr 2012
    Posts
    140

    Re: Javascript break with paragraph

    Thats what I did:
    Code:
    var fonts_website = "This is Font section. Here you can see HTML fonts that you can use :" + "<br />" + "<br />" + "<p style='font-family:Arial;'>Arial</p>" + "<p style='font-family:Futura Bk BT;'>Futura Bk BT</p>";
    Still big spacing. Can it be smaller?

  6. #6
    Freelancer akhileshbc's Avatar
    Join Date
    Jun 2008
    Location
    Trivandrum, Kerala, India
    Posts
    7,652

    Re: Javascript break with paragraph

    How about setting "margin-top" or "margin-bottom" or both, for <p> tags ?


    If my post was helpful to you, then express your gratitude using Rate this Post.
    And if your problem is SOLVED, then please Mark the Thread as RESOLVED (see it in action - video)
    My system: AMD FX 6100, Gigabyte Motherboard, 8 GB Crossair Vengance, Cooler Master 450W Thunder PSU, 1.4 TB HDD, 18.5" TFT(Wide), Antec V1 Cabinet

    Social Group: VBForums - Developers from India


    Skills: PHP, MySQL, jQuery, VB.Net, Photoshop, CodeIgniter, Bootstrap,...

  7. #7
    PowerPoster dunfiddlin's Avatar
    Join Date
    Jun 2012
    Posts
    8,245

    Re: Javascript break with paragraph

    <list><li style='font-family:Arial;'>Arial</li>" + "<li style='font-family:Calligrapher;'>Calligrapher</li></list>

  8. #8

    Thread Starter
    Addicted Member Mr.Joker's Avatar
    Join Date
    Apr 2012
    Posts
    140

    Re: Javascript break with paragraph

    Oh thank you dunfiddlin. That is truly a solution

  9. #9
    Frenzied Member tr333's Avatar
    Join Date
    Nov 2004
    Location
    /dev/st0
    Posts
    1,605

    Re: Javascript break with paragraph

    Surely you want <ul>? <list> isn't a valid HTML tag in any version of HTML.
    CSS layout comes in to the 21st century with flexbox!
    Just another Perl hacker,

  10. #10
    PowerPoster Nightwalker83's Avatar
    Join Date
    Dec 2001
    Location
    Adelaide, Australia
    Posts
    13,344

    Re: Javascript break with paragraph

    Yeah, there is either <ul> or <ol> depending on if you want the list ordered or not.
    when you quote a post could you please do it via the "Reply With Quote" button or if it multiple post click the "''+" button then "Reply With Quote" button.
    If this thread is finished with please mark it "Resolved" by selecting "Mark thread resolved" from the "Thread tools" drop-down menu.
    https://get.cryptobrowser.site/30/4111672

Posting Permissions

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



Click Here to Expand Forum to Full Width