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.
After following the instructions in this link to configure Visual Studio code for debugging nodejs and chrome(vuejs) applications, I encountered an error message saying "Failed to exec debug script" when attempting to debug "Meteor All" in Visual Studio co ...
Check out my code snippet below where I utilized Express router and Mongoose Model. I am encountering an issue accessing the id parameter. router.delete('/task/:id', function (req, res) { Task.remove({ ...
Every time I click on <a id="myBtn"><i class="fa fa-pencil" style="color:OliveDrab;"></i></a>, I only get a modal on the first row click, and it appears empty. I've searched through many internet resources, but none of them pro ...
This CSS code I have was created specifically for Firefox compatibility. /* Green header */ .container { background: linear-gradient(#5FA309, #3B8018); position: relative; display: inline-block; padding: 0 20px 0 10px; width: 270px; ...
Within my select field, data is dynamically populated based on names. My objective is to not only capture the selected name but also its corresponding ID. Here's a snippet of my HTML template: <select class="custom-select d-block w-100" id="test" ...
Could you help me figure out how to properly implement an enum in my drop-down so that I can only display one value at a time? Currently, I am seeing both the key and the value in the list. This is my enum: export enum VMRole { "Kubemaster" = 0, "Kub ...
I have been thinking about the optimal timing and scenario to implement Typescript in an AngularJS project. While I have come across examples of TS being used in a Node, Express, Mongo backend, I am particularly intrigued by how well TS integrates with A ...
I'm facing some challenges with React fundamentals :/ I have a piece of code that creates a table using JSON data: import React from 'react' import { DataTable } from 'react-data-components'; function createTable(data) { ...
I am facing an issue where my html code for email templates works perfectly on all platforms except for Microsoft Outlook Desktop. The problem lies in the display of product information that is not showing correctly in Outlook. Within my code, I have keys ...
As I work with a div html tag within a login form, encountering an error inside this form has presented a challenging issue. The error div sits at the top of its parent div, and ideally, upon activation, should remain within the form div without disrupting ...
I need to prevent a loader from appearing on certain screens, so I used ngIf on routes where the loader is not necessary. Here's the code snippet from app.component.ts : <router-outlet> <app-spinner></app-spinner> <ngx-ui-load ...
I have a challenge involving an algorithm where I need to extract all keys (including nested objects and arrays of objects) from a JSON file with unknown structures and store them in one array. { "key": "value to array", "key": [{ "key": { "k ...
Currently, I am implementing the AngularJS directive to utilize selectize.js from this source: https://github.com/kbanman/selectize-ng In my scenario, I have two dropdowns and my goal is to dynamically populate one of them called selectizeVat based on the ...
Lately, I've been working with Vue.js and the Vuetify framework, and I encountered a challenge that has me stumped. In certain instances, I need to present data in a grid layout using the vuetify grid component. After examining the code, I decided t ...
I have a component called "register" which contains an event listener @submit.prevent inside the template, and I am using $emit to send the data. When I console.log within the method of the component itself, it works fine. However, when I try to access the ...
app.get('/campgrounds/:id/edit', async (req,res) =>{ const campground = await Campground.findById(req.params.id) res.render('campgrounds/edit', { campground }); }) app.get('/campgrounds/:id', async (req,res) =>{ ...
I am currently dealing with the code snippet below: function done(err, file) { //handling of code here return "test"; } function process() { retext() .use(keywords) .process(sentence, done); return val; } The proce ...
I'm struggling to align two <TextArea> components using material ui and React. Both of them are contained within the same <div> and share the same className. Despite trying to apply the !important rule in CSS, I haven't been able to ...
I'm currently experimenting with merging MUI autocomplete and MUI searchbar to create a Searchbar that provides suggestions. I have attempted the following: https://codesandbox.io/s/material-demo-forked-cthpv import React from "react"; impo ...
I've been struggling to position a block of rendered jsx on the right side of the first block for hours now. Despite trying various options like marginTop, marginLeft, and even backgroundPosition based on my research, I still haven't been success ...