Is there a way to recreate the menu effect similar to using CSS fonts and drop caps for each word?
I'm aware of the CSS code:
p.introduction:first-letter {
font-size : 300%;
}
that enlarges the first character of the first word, but I want this effect for every word. Is there a CSS(3) solution for this, or would JavaScript be the better option? I am already using Moo on the page so that could work as well.
I prefer not to add additional HTML to my links to achieve this effect.
Thank you!
This is not about drop caps, but rather Small Caps, which involves using a font where every letter is capitalized to appear smaller than the regular capital letters.
The simplest method is to choose a small caps font and capitalize each word in the text. However, it can be challenging to find the right small caps font that fits your needs. One option may be the Walter Turncoat font available on the Google Web Fonts API:
http://code.google.com/webfonts/family?family=Walter+Turncoat&subset=latin
Have you considered adding this to your food selection?
li {text-transform: capitalize;}
li:first-letter { font-size:200%; }
Lettering.js seems like a useful tool for that job, but it's designed for use with jQuery, not Moo.
After reviewing the responses, I find it challenging to grasp the question entirely. However, from my perspective, accomplishing this task may require JavaScript to achieve the desired effect accurately. It's a straightforward process in essence.
The solution involves wrapping each word's first letter with a span element and applying a specific class to it. Subsequently, you can style these first letters as needed using CSS.
$$('p.introduction').each(function(el) {
var text = el.textContent || el.innerText;
el.innerHTML = text.replace(/\b(\w)([^\b]*?)/g, function(match, first, remainder) {
return ['<span class="first-letter">', first, '</span>', remainder].join('');
});
});
To convert all letters to uppercase in JavaScript, you can use the toUpperCase() function. For example:
var str="This is my 1st new tutorial 123";
var a1 = str.toUpperCase();
document.write(a1);
In your scenario, you would need to select the elements' content that you want to capitalize and apply the toUpperCase() function to them.
For Mootools Version:
HTML:<ul id='mylist'>
<li><a href='#'>test 1</a></li>
<li><a href='#'>test 2</a></li>
<li><a href='#'>test 1</a></li>
<li><a href='#'>test 4</a></li>
<li><a href='#'>test 5</a></li>
</ul>
Mootools JS:
$$('#mylist li').each(function(el) {
console.log(el.getElement('a').innerHTML.toUpperCase());
});
You can view the code in this jsfiddle link
Here is a suggestion:
text-transform: capitalize;
It is compatible with all web browsers.
My settings page contains multiple ion-toggle's. There's an onChange method to update local storage when toggled. Standard procedure involves checking existing values in storage on page load and mapping them to the toggles using ngModel. <tab ...
Situation When the input is identified as a "start", the program will automatically calculate the corresponding "end" value and update the page with it. If the input is an "end", simply display this value on the page without any modifications. I am in th ...
I came across a solution here However, I am having trouble implementing it. It seems like there might be a basic issue. Can someone provide some advice? This is the snippet of PHP code on my server: $ cat table.php <?php echo "<html><body&g ...
In my code, I want to ensure that the icon is only visible if the value at array index 0 is equal to 'Value': HTML <ion-icon *ngIf="allFamily[0] === 'Value'" class="checkas" name="checkmark"></ion-icon> TS allFamily = [ ...
Suppose I have the below HTML structure: <div id="div1"> .... <span class="innercontents">...</span> .... </div> Is it possible to target only the child elements of a specific parent ID? For example, could I use this CSS rule? # ...
Having an array of objects structured as follows: obj = [{'name': 'Tom', 'age': 17, 'gender': 'male', 'color':'red', 'position':3}, {'name': 'Sam', ...
I am working with an interface that defines scenes and their parameters: export interface IScene<R extends string> { path: R; params?: SceneParams; } The SceneParams interface looks like this: export interface SceneParams { [key: string]: s ...
A unique and innovative approach was taken by incorporating a DIV element in the HTML code, which dynamically populates with content from the main_login.php file. The main_login.php file plays a crucial role in loading the homepage with member-specific con ...
This is my first time using D3.js and I am attempting to create a basic sparkline graph. The graph should have time on the X-axis and numbers up to 1000 on the Y-axis. I have a web socket server that sends random numbers up to 1000 to clients. My goal is t ...
My jqGrid includes editable columns, and I am looking for a way to only post the data of columns where changes have been made. Here is an example of my colModel: colModel: [{ name: 'I_PK', index: 'u.I_PK ...
I am currently working on creating an API and have set up a brand new Project, cluster, and Collection for it. However, when I attempt to use mongoose.save() to add data to my database, I keep receiving an error message. "message": { " ...
I am currently setting up routes for an express router in my project. I have a validator that deals with promises, requiring me to use await in the code. Here is how it looks: constructor() { this.router = express.Router(); this.router.use(express. ...
Recently, I dove into the world of MVC and came across a puzzling issue. There's this HTML page that smoothly scrolls down to a specific section when you click on its name from the navigation bar. However, now I need to convert this piece of HTML code ...
I am currently working on browserifying my module. One of the dependencies I have is on this https://www.npmjs.com/package/chilkat_win32. It is present in my node_modules folder and here is how the structure looks: https://i.stack.imgur.com/uw9Pg.png Upo ...
I have a simple blog with articles. When a user clicks the edit button, a form is supposed to be filled with the article's data - title, description, body, and tags. I am using the useEffect hook to retrieve the data and fill the form based on the "id ...
Can you help me figure out why I'm not receiving any return value from the ajax data post? Take a look at my code and let me know where I might be going wrong. Here is a snippet of my jQuery code: $("#btnlogin").click(function(){ var email = $( ...
If you are looking to display a list of colors with each color occupying an equal fraction of the height, here is how you can achieve it. Imagine presenting four colors in a list with a fixed height and a thick border around it: The example shown above is ...
I remember a while ago, CNET had these amazing Social Share buttons that, when clicked, would reveal a "dropdown box" with the social network share dialog. Does anyone know how they achieved that? I've searched but couldn't find any information ...
Upon calling ajax to my server, I receive 1000 units of data which I then store in my local storage before displaying it on a jQuery mobile list-view. However, this process takes around 50-60 seconds to complete. Is there a way to optimize this and make it ...
I'm facing a frustrating issue in Firebase where I am required to compare an object returned to me with an array. I need assistance in completing this method: const removeAlreadySeenUsersFromQueue = (newUsers, likedUsers) => { } The scenario is ...