Results 1 to 8 of 8

Thread: How to do concatenation in html.

  1. #1

    Thread Starter
    Fanatic Member
    Join Date
    Nov 2010
    Posts
    965

    How to do concatenation in html.

    Hi. I have to concatenate two things in HTML, please assist me that how do i do it?

  2. #2
    MS SQL Powerposter szlamany's Avatar
    Join Date
    Mar 2004
    Location
    Connecticut
    Posts
    18,263

    Re: How to do concatenation in html.

    HTML? Do you mean Javascript??

    + works - did you try it and have a problem?

    If you are trying to put a "1" and "2" together - and you have them in two variables you might try

    String(varA) + String(varB);
    Last edited by szlamany; Jan 30th, 2012 at 05:28 AM.

    *** Read the sticky in the DB forum about how to get your question answered quickly!! ***

    Please remember to rate posts! Rate any post you find helpful - even in old threads! Use the link to the left - "Rate this Post".

    Some Informative Links:
    [ SQL Rules to Live By ] [ Reserved SQL keywords ] [ When to use INDEX HINTS! ] [ Passing Multi-item Parameters to STORED PROCEDURES ]
    [ Solution to non-domain Windows Authentication ] [ Crazy things we do to shrink log files ] [ SQL 2005 Features ] [ Loading Pictures from DB ]

    MS MVP 2006, 2007, 2008

  3. #3

    Thread Starter
    Fanatic Member
    Join Date
    Nov 2010
    Posts
    965

    Re: How to do concatenation in html.

    lets suppose if i write the code that
    username: <input type = "text"></br>
    password: <input type = password> right.

    when i run the code in browser so both the textboxes are not in equal alignment.

    can't we have some concatenation operation as we have in php or vb.net to add space? did you get my idea?

  4. #4
    PowerPoster kfcSmitty's Avatar
    Join Date
    May 2005
    Posts
    2,248

    Re: How to do concatenation in html.

    I have no idea what you mean.

    If you mean both of the textboxes aren't on the same line, it is because you put a <br /> in there to drop the second box to the 2nd line. Remove it and they will be on the same line.

    If you mean you want to style them the same, then you can give them a class (class="blah") and use css to style that class the same.

    If you mean that having "username" and password" beside the textboxes pushes one so they're not directly above each other, you can either wrap the text in a span tag (<span class="blah">Username</span>) and style that with a width, or you can use a table to align them properly.

  5. #5
    MS SQL Powerposter szlamany's Avatar
    Join Date
    Mar 2004
    Location
    Connecticut
    Posts
    18,263

    Re: How to do concatenation in html.

    I vote for SPAN - works really well for me.

    Here are span's styling I use

    Code:
    <div id="dlgLogin"> 
      <p><span class="acs-span-medium">Username </span><input type="text" id="acs-username" class="acs-edit-medium-text"/></p> 
      <p><span class="acs-span-medium">Password </span><input type="password" id="acs-password" class="acs-edit-medium-text"/></p> 
      <p><label id="acs-login-error"></label></p>
    </div>
    Code:
    .acs-span-small
    {
        display: inline-block;
        width: 50px;
        text-align: right;
    }
    .acs-span-msgmedium
    {
        padding-left: 30px;
    }
    .acs-span-medium
    {
        display: inline-block;
        width: 60px;
        text-align: right;
    }
    .acs-span-large
    {
        display: inline-block;
        width: 75px;
        text-align: right;
    }
    .acs-span-xlarge
    {
        display: inline-block;
        width: 90px;
        text-align: right;
    }
    
    .acs-span-radio-left-small
    {
        display: inline-block;
        text-align: left;
        width: 50px;
    }
    
    .acs-span-radio-right-small
    {
        display: inline-block;
        text-align: right;
        width: 50px;
    }
    
    .acs-span-radio-left-medium
    {
        display: inline-block;
        text-align: left;
        width: 75px;
    }
    
    .acs-span-radio-right-medium
    {
        display: inline-block;
        text-align: right;
        width: 75px;
    }
    
    .acs-span-radio-left-large
    {
        display: inline-block;
        text-align: left;
        width: 100px;
    }
    
    .acs-span-radio-right-large
    {
        display: inline-block;
        text-align: right;
        width: 100px;
    }
    
    .acs-span-radio-left-xlarge
    {
        display: inline-block;
        text-align: left;
        width: 150px;
    }
    
    .acs-span-radio-right-xlarge
    {
        display: inline-block;
        text-align: right;
        width: 150px;
    }
    
    .acs-span-heading
    {
        font-weight: bold;
        margin-left: 5px;
        margin-right: 5px;
    }
    
    .acs-span-textprompt
    {
        vertical-align: top;
        font-weight: bold;
    }

    *** Read the sticky in the DB forum about how to get your question answered quickly!! ***

    Please remember to rate posts! Rate any post you find helpful - even in old threads! Use the link to the left - "Rate this Post".

    Some Informative Links:
    [ SQL Rules to Live By ] [ Reserved SQL keywords ] [ When to use INDEX HINTS! ] [ Passing Multi-item Parameters to STORED PROCEDURES ]
    [ Solution to non-domain Windows Authentication ] [ Crazy things we do to shrink log files ] [ SQL 2005 Features ] [ Loading Pictures from DB ]

    MS MVP 2006, 2007, 2008

  6. #6

    Thread Starter
    Fanatic Member
    Join Date
    Nov 2010
    Posts
    965

    Re: How to do concatenation in html.

    Yea i am also agree with span, and i was meant to ask about, please please you tell me that what is
    acs-span-medium?

  7. #7
    I'm about to be a PowerPoster!
    Join Date
    Jan 2005
    Location
    Everywhere
    Posts
    13,647

    Re: How to do concatenation in html.

    The correct element to use is label:

    HTML Code:
    <form>
      <p>
        <label for="username-input">Username</label>
        <input type="text" name="username" id="username-input" />
      </p>
      <p>
        <label for="password-input">Password</label>
        <input type="password" name="password" id="password-input" />
      </p>
    </form>
    The for attribute of the label is an accessibility feature; it allows the user agent to match label and input element pairs and give them appropriate behaviours. (For example, in most browsers, the input element will gain focus if its associated label is clicked.)
    Note that the for attribute corresponds to the id of the input element, not its name; this is because multiple input controls can have the same name (such as radio buttons).

    For some examples of styling forms (including aligning labels), take a look at this article:
    Applying CSS to forms


    Quote Originally Posted by szlamany View Post
    Code:
    <div id="dlgLogin"> 
      <p><span class="acs-span-medium">Username </span><input type="text" id="acs-username" class="acs-edit-medium-text"/></p> 
      <p><span class="acs-span-medium">Password </span><input type="password" id="acs-password" class="acs-edit-medium-text"/></p> 
      <p><label id="acs-login-error"></label></p>
    </div>
    Strictly speaking, this is a misuse of the label markup. Instead, I would use the final paragraph element to display the error message, without a label element. In fact, I would go further and add the elements containing the error message at run-time, at the point when it needs to be shown.
    Last edited by penagate; Feb 5th, 2012 at 12:21 AM.

  8. #8
    MS SQL Powerposter szlamany's Avatar
    Join Date
    Mar 2004
    Location
    Connecticut
    Posts
    18,263

    Re: How to do concatenation in html.

    @adqusit - .acs-span-medium is the CSS style element that you see in my post...

    I recall having problems with labels - if empty they take no space? Span's worked better for me throughout the page work I've done. But not a lot of thought went into the login div I've got - I think I actually ripped it from some jQuery thread I found somewhere...

    For what it's worth that gets put into a jQuery modal dialog pop up - code below - and images below. If I'm going to put something into some jQuery UI widget I prefer to have it contain all the elements it needs prior to calling the UI method...

    I put a spinner-animation in the label - then either clear it or put up the log in failure message...

    Code:
    $(document).ready(function() {
         $('#dlgLogin').dialog({ title: 'Log in', modal: true, closeOnEscape: false
              , buttons: { 'Log in': function() { loginClick(this) } } });
    .
    .
    .
    function loginClick() {
        if (!g_blnInLogin) {
            g_blnInLogin = true;
            var strUN = $("#acs-username").val();
            var strPW = $("#acs-password").val();
            $("#acs-login-error").html('<img src="Images/ajax-loader-small.gif" />');
            ctrlWebService("login", strUN, strPW, "");
        }
    }
    And this call back function runs after the ajax for the login returns
    Code:
    function ajaxCtrlFinished(msg, strWho, objOptions) {
        var objReturn = $.parseJSON(msg.d);
    .
    .
    .
        if (objReturn.login) {
            g_blnInLogin = false;
            if (objReturn.success) {
                $("#acs-login-error").html("");
                $("#acs-binder-info").html('Web Request...<img src="Images/ajax-loader-small.gif" />');
                objWebParam.ObText = strUN;
                objWebParam.username = window.username || "";
                var strWebParam = $.toJSON(objWebParam);
                $.ajax({
                    type: "POST",
                    url: "WebService.asmx/BootPage",
                    dataType: "json",
                    data: strWebParam,
                    contentType: "application/json; charset=utf-8",
                    success: function(msg) {
                        ajaxFinished(msg, "bootpage", objWebParam);
                    },
                    failure: function(msg) {
                        ajaxFinished(msg, "failure", objWebParam);
                    },
                    error: function(msg) {
                        ajaxFinished(msg, "error", objWebParam);
                    }
                });
                $('#dlgLogin').dialog('close');
            } else {
                $('#acs-login-error').html(objReturn.message);
            }
    Attached Images Attached Images  
    Last edited by szlamany; Feb 6th, 2012 at 07:24 AM.

    *** Read the sticky in the DB forum about how to get your question answered quickly!! ***

    Please remember to rate posts! Rate any post you find helpful - even in old threads! Use the link to the left - "Rate this Post".

    Some Informative Links:
    [ SQL Rules to Live By ] [ Reserved SQL keywords ] [ When to use INDEX HINTS! ] [ Passing Multi-item Parameters to STORED PROCEDURES ]
    [ Solution to non-domain Windows Authentication ] [ Crazy things we do to shrink log files ] [ SQL 2005 Features ] [ Loading Pictures from DB ]

    MS MVP 2006, 2007, 2008

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