CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Liam Fox
Liam Fox

Reputation: 11

HTML/CSS Changing an anchor according to the text.Length

I recently started learning to code some HTML and CSS, and I have a web app that contains some design elements I don't know how to code or find the right direction on how to code it (I can't seem to match anything from my searches, that do what I want).

I wish to have the width of an anchor(img) expand or shorten depending on the length of characters in the username.

I know CSS can't do this on it's own. I believe JQuery or Javascript can handle this task, but I'm not sure how to go about it or where to start exactly.

// My understanding of Javascript and JQuery are a bit limited. So my best direction as of yet would be to create a div that matches the .length of the string from the username, or a function that changes the anchor width to that of the username.length string. Maybe something to the effect of:

$('anchor').ready(function() {  var anchorWidth = $('username').text().length; });

Is this the correct Direction to go in? Or am I way off from the mark?

edit 

>HTML code:
</head>
<body class="bodyHome">
    <div class="settingMenu">
        <div onclick="myFunction()">
            <img class="fork" src="/Users/liamfox/Documents/Projects/PHM/SRC/fork.png" alt="settings and menu">
        </div>
        <div id="myDropdown" class="setting-content">           
            <ul class="ContentList">
                <li><a href="#"">log out</a></li>
                <li><a href="#"">USERNAME</a>
                <img style="width: 150px;" src="/Users/liamfox/Documents/Projects/PHM/SRC/line0.png"></li>
            </ul>
        </div> <!-- END .settingsMenu -->
    </div> <!-- END .setting-content -->

    <div class="foot-signUp">
        <div class="foot-login">    
            <div class="homeText" alt="username">
                <a style="text-decoration: none; color: white;" href="#">add ingredient</a>
            </div>
            <a>
                <img class="barLine2" src="/Users/liamfox/Documents/Projects/PHM/SRC/line0.png">
            </a>

            <!-- this script is to manipulate the width of the line anchor under the USERNAME to match the character length -->
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">
            $('imgLength').ready(function () {
                var matchLength = this.text().length;
                if (matchLength = this.text.length) {
                    this.width(text.width);
                }
            });
            </script>
</body>

so far my script looks more like this now: 

            $(document).ready(function () {
                $('.js-dropdown').on('click', function () {
                    var $underline = $('.js-underline');
                    var $userNameLength = $('.js-userNameLength');

                    console.log($underline);
                    console.log($userNameLength);

                    $underline.css('width', $userNameLength.width());
                });
            });

The anchor img can be a border, I figured out. The image is simply a bar line that I made that has a gradient color I chose.

Upvotes: 0

Views: 340

Answers (2)

Jon P
Jon P

Reputation: 19772

Lets go the css approach and apply a background image. This potentially cleans up the HTML as well

.ContentList {
  list-style: none;
}
.ContentList li {
  padding: 5px;
  0
}
.ContentList a {
  text-decoration: none;
  font-size: 16px;
}
.js-userNameLength {
  background-image: url(http://lorempixel.com/80/10/);
  background-repeat: no-repeat;
  background-size: 100% 10px;
  background-position: bottom;
  padding: 10px 0;
}
<ul class="ContentList">
  <li><a href="#">log out</a>
  </li>
    <li><a class="js-userNameLength" href="#">USERNAME</a>
  </li>
  <li><a class="js-userNameLength" href="#">Really long USERNAME</a>
  </li>

  <li><a href="#">change password</a>
  </li>
  <li><a href="#">my recipes</a>
  </li>
  <li><a href="#">terms of use</a>
  </li>
  <li><a href="#">need help/feedback</a>
  </li>
</ul>

For this example I've assumed a height of 10px for your line image. You will need to adjust the values in .js-userNameLength to match your actual image height. padding is used to give space for the image, again,adjust as required.

You can also go the image free approach with CSS Gradients:

.ContentList {
  list-style: none;
}
.ContentList li {
  padding: 5px;
  0
}
.ContentList a {
  text-decoration: none;
  font-size: 16px;
}
.js-userNameLength {
  padding: 5px 0;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e5799+85,2989d8+93,207cca+94,207cca+94,7db9e8+100&0+0,0+83,1+85,1+100;border-bottom */
  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjgzJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijg1JSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjkzJSIgc3RvcC1jb2xvcj0iIzI5ODlkOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk0JSIgc3RvcC1jb2xvcj0iIzIwN2NjYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3ZGI5ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(top, rgba(30, 87, 153, 0) 0%, rgba(30, 87, 153, 0) 83%, rgba(30, 87, 153, 1) 85%, rgba(41, 137, 216, 1) 93%, rgba(32, 124, 202, 1) 94%, rgba(125, 185, 232, 1) 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(30, 87, 153, 0) 0%, rgba(30, 87, 153, 0) 83%, rgba(30, 87, 153, 1) 85%, rgba(41, 137, 216, 1) 93%, rgba(32, 124, 202, 1) 94%, rgba(125, 185, 232, 1) 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(30, 87, 153, 0) 0%, rgba(30, 87, 153, 0) 83%, rgba(30, 87, 153, 1) 85%, rgba(41, 137, 216, 1) 93%, rgba(32, 124, 202, 1) 94%, rgba(125, 185, 232, 1) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#001e5799', endColorstr='#7db9e8', GradientType=0);
  /* IE6-8 */
}
<ul class="ContentList">
  <li><a href="#">log out</a>
  </li>
  <li><a class="js-userNameLength" href="#">USERNAME</a>
  </li>
  <li><a class="js-userNameLength" href="#">Really long USERNAME</a>
  </li>

  <li><a href="#">change password</a>
  </li>
  <li><a href="#">my recipes</a>
  </li>
  <li><a href="#">terms of use</a>
  </li>
  <li><a href="#">need help/feedback</a>
  </li>
</ul>

CSS Gradients can be a little scary. I used this awesome tool to generate this one: http://www.colorzilla.com/gradient-editor/#1e5799+85,2989d8+93,207cca+94,207cca+94,7db9e8+100&0+0,0+83

Upvotes: 2

guest271314
guest271314

Reputation: 1

You can use css font-size and DOM .previousElementSibling, .getComputedStyle(), .setAttribute(), javascript parseInt(). Set img width to 200px or 300px in case of a lengthy username; set font-size of a element; set img width attribute to product of .textContent.length of a element multiplied by font-size of a element

var img = document.querySelector(".username");
var a = img.previousElementSibling;
var len = a.textContent.length;
var font = parseInt(window.getComputedStyle(a).getPropertyValue("font-size"));
img.setAttribute("width", len * font + "px");
ul {
  list-style:none;
}

a {
  font-size: 16px;
}
<ul>
  <li><a href="#">USERNAME</a> <img class="username" src="http://lorempixel.com/200/200" alt="" />
  </li>
</ul>

Upvotes: 1

Related Questions