Problem with adjusting font weight using inline styles in jQuery, JavaScript, and CSS

I've been working on getting a slideshow up and running on my Sharepoint site, but I'm not completely satisfied with the results.

The code snippet causing me trouble is something I found online:

$(xData.responseXML).find("z\\:row").each(function() {
        var title = $(this).attr("ows_Title");
        var imageLink = imageURL+$(this).attr("ows_FileLeafRef").substring($(this).attr("ows_FileLeafRef").indexOf('#')+1);
  var itemLink = itemURL+$(this).attr("ows_ID");
  var liHtml = "<div><img width='200' height='200'  src='" + imageLink +"'/><p align='center'>"+ title + "</p></div>";

Specifically, I want to style the 'title' variable with a heavier font-weight (500) and reduce the line-height.

I've attempted various solutions without success. I tried assigning an id to the

element in this section of the code:

> var liHtml = "<div><img width='200' height='200'  src='" + imageLink
> +"'/><p align='center'>"+ title + "</p></div>";

I then attempted to manipulate that id using jQuery, as well as adjusting the 'title' variable during declaration, but with no luck.

What am I missing as a novice in jQuery?

EDIT

Some additional context that might be helpful:

My understanding of CSS suggests that I can include it in three places: a separate style sheet, in the head of the document, or inline. Due to working within a SP web part, I cannot add anything to the document's head. I tried creating <p id="title_par" align='center'>, then manipulating the $("#title_par").css with jQuery, which didn't work. Inline styling with <p style=""> produced similar results.

So essentially, I don't have access to the .css file (no Sharpoint designer available), only Site Collection admin privileges.

javascriptjqueryhtmlcss

Answer №1

To address this issue, CSS can be utilized.

In order to style the <p align='center'>, add a class like 

<p align='center' class='titleClass'>
and use the following CSS properties:

.titleClass {
     line-height: 1em; /* Various units can be used */
     font-weight: bold; /* Not all browsers support font-weight in different units (common options are inherit, bold, and normal) */
}

Answer №2

This issue is related to CSS, not Jquery.

Here is a possible solution:

// Your JavaScript

var liHtml = "<div><img width='200' height='200' src='" + imageLink + "'/>
<p class='title'>" + title + "</p></div>";

// Your CSS stylesheet

.title {text-align:center;font-weight:500;line-height:10px;}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I send a JavaScript variable to a PHP function using an Ajax call?

I'm having trouble implementing an AJAX search form in WordPress that retrieves posts based on the search term being present in the post title. Below is the PHP function I've created for this purpose: function get_records_ajax($query) { $arg ...

javascriptphpjqueryajaxwordpress

Click the "Add to Cart" button to make a purchase

Recently, I've been working on modeling an add to cart feature using jQuery. However, I have encountered a small issue that I'm trying to troubleshoot. When I click the mybtn button, the model displays and functions correctly, but there seems to ...

javascripthtmljquerycssmode

Is the Img tag causing alignment problems with centering content?

I recently launched a simple static portfolio site on GitHub Pages for easy maintenance. The main navigation consists of a 3-line title at the top of every page, providing seamless movement throughout the site. However, I have encountered a small (approxim ...

htmlcssimagegithub-pages

Length of borders at the bottom of `td` elements in tables

I have been searching everywhere for a solution and just can't seem to figure it out. I am trying to adjust the length of the bottom border for td elements within a table. I have attached two screenshots for reference. Any assistance would be greatly ...

htmlcss

AppleScript: Check if the value of document.getElementById is empty, then fill in the value

Hello everyone, it's my first time asking a question here. I have an AppleScript that takes values from a Numbers document and fills them into different fields of a webform using document.getElementById. Everything is working perfectly so far, but now ...

javascriptwebformsapplescript

"Triangle Emblazoned Speech Bubble on a Clear, See-Through Back

I'm currently working on creating a semi-transparent speech bubble with a border. I'm using a ::before element for a larger triangle shape and a ::after element for a smaller triangle shape that sits on top to create the illusion of a border. How ...

htmlcss

How to stop the default behavior of the tab key press in AngularJS

Hello, I am having an issue with an input field that triggers the add_plu() function when the tab key is pressed. While it does work as intended, the default action of the tab key (moving to the next element on the page) also occurs. I am wondering how I ...

javascriptjqueryangularjsangular-uiangular-ui-bootstrap

Employing Jquery to add a <br /> element following a designated tag

I've been experimenting with WHMCS billing software and have set up a page called cart.php which displays the features of selected products for customers. <div class="highlightbox"> <h2>Anonymous VPN - Anonymous VPN - Knight</h2> &l ...

phpjquery

Resizing a damaged HTML table to fit within a designated width using CSS

Here is a challenge - I have some broken HTML that I can't touch, and don't want to use JavaScript to fix. My goal is to make it fit within a specific width: http://jsfiddle.net/P7A9m/2/ <div id="main"> <table> <tr> ...

htmlcsswidthhtml-table

Getting separated components of date, month, and time with Angular filters

I need to extract the date, month (in words), and time from a timestamp within an ng-repeat $scope.notes.forEach(function(notes){ $scope.notes.date = new Date(notes.date); }); In my HTML view, I am utilizing an angular filter. <div ng-repeat ...

javascripthtmlangularjs

Arranging inline-flex elements within a div container

I have been struggling to position two elements side by side within a single div, where the second element should be on the right side. <div className={classes.container}> <div className={classes.first}> First </div> <d ...

cssflexboxmaterial-ui

What is the best way to link a dynamic property with a bootstrap popover within a nested v-for loop?

After spending several days searching for an example to guide me without success, I am turning to SO with my specific use case. I am currently working on a Bootstrap Vue layout where I need to load dates into 12 buttons corresponding to months and display ...

javascriptarraysvue.jsbootstrap-4bootstrap-vue

Utilize Async Function in TypeScript to Import an Excel File

Trying to incorporate the xlsx angular library to bring in an excel file onto my page: Following some instructions from the xlsx library documentation, I created this function: public async HandleExcelFile(excelFile) { //Initialize empty Excel Array let ...

javascriptangulartypescriptasynchronous

What are the steps to implementing AJAX pagination without utilizing a database?

Is it possible to implement AJAX pagination without relying on MySQL? Can I create a PHP file containing the text and markup needed for display, and by clicking on page numbers, serve that content to the user? Can this be achieved using only jQuery and PHP ...

javascriptphpjqueryajaxpagination

The v-on:click event handler is not functioning as expected in Vue.js

I am currently learning vue.js and facing some challenges. Below is the code snippet from my HTML page: <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net ...

javascripthtmlvue.js

Adjusting speed dynamically within a setInterval function in JavaScript

I am working on a react application that requires displaying text with varying intervals between sentences, one at a time. To achieve this functionality, I stored all the sentences in an array and implemented a setInterval function: startShowingText() ...

javascriptreactjs

Animate the Collade object's position gradually in ThreeJS

In my ThreeJS project, I am working with the elf example from ThreeJS Instead of simply rotating the object as shown in the example, I want to move it in both the x and y directions. To achieve this, I plan on updating the elf.position.x and elf.position. ...

javascriptthree.jsloadercollada

Adding selected values to an array in Angular

Successfully populating a dropdown from values in a service and displaying the selected value on a page is working fine. However, the challenge lies in passing these selected values into an array for storage purposes. The intention is to allow users to add ...

javascriptarraysangularjs

I am interested in dynamically rendering the page on Next.js based on certain conditions

In my -app.js file, I have the code snippet below: import { useState, useEffect } from "react"; import PropTypes from "prop-types"; ... export default function MyApp(props) { const { Component, pageProps } = props; co ...

javascriptreactjsnext.jsuse-effect

Steps to trigger an action upon selecting a radio button on an HTML and CSS website

After creating a website with HTML and CSS that allows users to select options using radio buttons, I am now seeking advice on how to implement actions based on their choices. If a user selects an option, I want a specific action to occur, but I am unsur ...

javascriptphphtmlcss