Within my parent div named lyricpadding, there are several <h4> elements with unique IDs. My goal is to use Jquery, Javascript, or CSS to ensure that the <h4> with the class of highlighted remains centered within the parent container. I do not want it to span the entire width, only to have the text centered and automatically scroll until it reaches the bottom. This way, the highlighted class will always be visible, ideally in the center.
Check out this jQuery demonstration which utilizes the absolute positioning property to adjust based on scroll position and window size. You can view the result in this JSFiddle link.
HTML:
<div class='lyricpadding'>
<h4 class='highlighted'>Highlighted</h4>
<h4>Other</h4>
<h4>Other</h4>
<h4>Other</h4>
<h4>Other</h4>
</div>
CSS:
.lyricpadding
{
height:1000px;
width:100%;
background-color:lightblue;
}
.highlighted
{
display:inline-block;
position:absolute;
}
jQuery:
function positionMiddle()
{
var $highlighted = $('.highlighted');
$highlighted.css({
left: ($(window).width() - $highlighted.outerWidth())/2,
top: $(window).scrollTop() + ($(window).height() - $highlighted.outerHeight())/2
});
}
$(window).resize(function(){
positionMiddle();
});
$(window).scroll(function(){
positionMiddle();
});
// To initially run the function:
positionMiddle();
<!-- The Server Modal --> <div class="modal" id="serverModal"> <div class="modal-dialog" style="max-width: 80%;overflow-y: initial !important;" > <div class=" ...
Looking for a Chrome or Firefox plugin to check WCAG 1.4.12 /Text Spacing. Any suggestions? (https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=1412#text-spacing) Appreciate your recommendations! ...
From my understanding, services must be provided and injected, meaning each service needs to be placed inside the constructor like this: constructor (private a: AService, private B: BService) {} In my scenario, I have multiple services that all follow th ...
When I try to map a nullish object, I encounter an error: Object is possibly 'undefined'.ts(2532) Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'Partial<Point ...
I want the browser to wait for notifications, but stop waiting if a link is clicked. To achieve this, I have created a PHP script with a while loop that ends when an event occurs and then returns that event. PHP require 'required.php'; ignore_ ...
I'm currently working on a basic HTML5 page that includes inline PHP script. I'm looking for advice on how to transform this app so it can be used with Blackberry WebSockets. For example, I want to develop a native app using HTML5. ...
When attempting to send a DM message, I am using the following code: bot.on('guildMemberAdd', (member) => { member.send('a'); }); I am experiencing difficulty in understanding why the private message is not being successfully se ...
I've been trying to use the ignore option, but it doesn't appear to be functioning as expected. My code looks like this: .pipe(plugins.uncss({ html: glob.sync('./**/*.{csh,h}tml'), ignore: ['.active'] ...
We are experiencing a problem with displaying data in Ionic 3, as the data is being sourced from PHP REST. Here is my Angular code for retrieving the data: this.auth.displayinformation(this.customer_info.cid).subscribe(takecusinfo => { if(takecusi ...
I just started learning AngularJS, and I'm having trouble with my routes. I've tried searching on Google and implementing various solutions, but nothing seems to be working. Here is a snippet from my index.html file located in public/index.html: ...
I am currently attempting to integrate a Collection into my Meteor.js project. I utilized a template from meteorkitchen and implemented some code: Within my home.js file (located in the client folder), I have included the following code: import { Mongo } ...
While experimenting with adding CSS rules using JavaScript, I encountered this interesting line of code. I am having trouble understanding how the return statement works and how I can adapt it for my own project. var sheet = function() { var style ...
TS arrData = new BehaviorSubject<any>([]); ngOnInit() { const dataArr1 = [ { id: '1', name: 'Room1', spinning: true }, { id: '2', name: 'Room2&apos ...
On every single one of my pages, the content fits perfectly within the body: However, when I have forms on the page, they extend beyond the footer and the body doesn't resize accordingly: Where could the issue be coming from? ...
Currently, I am working on an Angular application where I aim to incorporate a nested drag and drop feature with the ability to sort items within their own list. You can find a helpful StackBlitz example demonstrating how to implement nested drag and drop ...
I have come across similar questions in the past, but I have not found any answers that directly address the issue I am facing in my scenario. In my case, there is a parent component that passes a property to a child component's state. Depending on t ...
I have a selection with multiple options. Currently, the selected values are '2,4,5'. <select id="testID" multiple="multiple"> <option value="1">test Value1</option> <option value="2">test Value2</option> ...
I've been working on developing a straightforward CMS that utilizes AJAX requests for creating, updating, and deleting posts. Here's the process for adding a post to the blog: The user submits their email and password to the server (login.php) ...
I've encountered this issue in multiple apps, leading me to question if there's an error in my handling of Backbone history. The scenario is as follows... There are two pages: index.html app.html The index page is a standard HTML page with a l ...
I currently have two datepickers aligned vertically and I'm looking to display them in a horizontal layout with some spacing between them. What changes do I need to make in order to present these two calendar pickers side by side on the same row? Cou ...