Remember how I created a function to make loading a post into a page of the website much easier? Well the same sort of thing can be done with javascript but on a slightly larger scale. Some other person out in the world can create a function in javascript and save all of that code into a new file. Then, people like me who don’t know javascript well enough or have the time to make some really fancy things can use that file.
In my case I used a javascript file called dotdotdot, which can be found here http://dotdotdot.frebsite.nl/. If you look at that site you will see that the javascript will make it so any text that goes outside the bounds of its container is replaced by an ellipsis.
To implement this on your own site, simply download the .zip file from their site with the “Download” link, unzip that folder to the main directory where you are keeping your website (probably the /xampp/htdocs folder if you’ve been following along).
Next you will need to put some code into the <head> section of your site. Much like with when adding the ability to use javascript generally, you will need to put a <script> tag. However, this time the src should be either the .js or .min.js file in the folder you just extracted. It will likely look like this:
<script type=”text/javascript” language=”javascript” src=”/jQuery.dotdotdot-master/src/js/jquery.dotdotdot.js”></script>
Finally, inside of any set of <script> tags on the page with the area you want to have an ellipsis simply put $(‘id of element to have ellpisis’).dotdotdot();
In my case with the posts section, I put $(‘.post’).dotdotdot();
Now, instead of having to manually put in an ellipsis so your page doesn’t look like this,
You can instead have a neat page that looks like this,


One great thing about the coding community is all of the people who are more advanced creating things. And then letting you and I implement them into our personal code. People are great when it comes to sharing so that eveybody has a chance to learn.
LikeLike