jQuery uses variables within the .css() method

Having issues with the code I've written

$('.item').each(function(){
    var ItemGradient1 = $(this).attr('data-gradient-1');
    var ItemGradient2 = $(this).attr('data-gradient-2');
    var ItemGradient = 'linear-gradient(to right bottom, ' + ItemGradient1 + ', ' + ItemGradient2 + ');'
    $(this).children('.portfolio-wrapper').append('<div class="item-after"></div>');
    $(this).children('.portfolio-wrapper').children('.item-after').css('background', ItemGradient);
    console.log(ItemGradient);
});

I suspect there's an issue with this particular line:

    $(this).children('.portfolio-wrapper').children('.item-after').css('background', ItemGradient);

This is the HTML structure:

      <div class="item Others" data-cat="Others" data-path="/portfolio/others/jonasplatin_website/" data-gradient-1="#ffef80" data-gradient-2="#464646">
          <div class="portfolio-wrapper">
              <img src="/portfolio/others/jonasplatin_website/thumbnail.jpg" alt="Jonas Platin unofficial website" />
              <div class="desc">
                  <h2 class="item-info">Jonas Platin unofficial website</h2>
                  <h3 class="item-info">Webdesign</h3>
              </div>
          </div>
      </div>

Please let me know if you spot any errors. Thank you for your assistance.

jquerycssvariables

Answer №1

There seems to be an issue with this particular line:

var ItemGradient = 'linear-gradient(to right bottom, ' + ItemGradient1 + ', ' + ItemGradient2 + ');'

The problem lies in the fact that there is a redundant ; at the end of the string which is causing the css function to reject it. Simply remove the extra semicolon and it should function correctly :)

Given that you are still in the learning process, here is an alternative way to write the function:

$('.item').each(function(){
    var itemGradient1 = $(this).data('gradient-1');
    var itemGradient2 = $(this).data('gradient-2');
    var itemGradient = 'linear-gradient(to right bottom, ' + itemGradient1 + ', ' + itemGradient2 + ')';
    $(this)
        .find('.portfolio-wrapper')
        .append('<div class="item-after"></div>')
        .css('background', itemGradient);
});

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 efficiently retrieve a string echoed or returned from PHP using jQuery/Ajax?

Suppose I have the following code in my test.php file: echo 'Hello, world' I want to display that text within a div element. However, this method is not working for me and the alert message is not popping up. $.ajax({ type: "GET", url: ...

phpjavascriptjqueryajax

Transmitting multiple arrays through ajax

How can I send multiple arrays to jQuery AJAX? I have created the arrays like this: var i = 0; var tname = []; var tid = []; var tprice = []; $(".party_list li").each(function() { tname[i] = $(this).data('catname'); ...

phpjqueryajaxcodeigniter

How can AJAX be utilized to show search results dynamically?

At the moment, I have a PHP page that pulls a list of results from my SQL database and displays the ID and names. There is a search bar at the top where you can search for keywords in the "name" field, and when you click on search, it takes you to a new p ...

javascriptphpjquerysqlajax

Transferring a JavaScript variable to PHP after it was added using AJAX techniques

First and foremost, I want to express my gratitude to everyone who has provided assistance on this platform. Your support has been invaluable and has helped me navigate through the challenges of completing my thesis. Currently, I am working on an experime ...

phpajaxjquery

WordPress header causing issues with Document.write()

I have a JavaScript function that utilizes AJAX to retrieve data from a PHP file. Previously, I utilized document.write(data) to display the retrieved content and it worked smoothly on its own. However, upon incorporating the script into WordPress via hea ...

javascriptphpjqueryajaxwordpress

The absence of a label or div element on a JavaScript checkbox change event is causing issues

Currently, I am constructing a webpage utilizing ASP.NET web forms in combination with JavaScript and jQuery. The main objective is to create a functionality for a checkbox that reacts to a change event as follows: when the checkbox is checked, display thr ...

javascriptjqueryasp.net

In what way does Angular incorporate _page-theme.scss assets?

The Angular Material Documentation homepage includes a specific scss file: https://github.com/angular/material.angular.io/blob/master/src/app/pages/homepage/_homepage-theme.scss Although this scss file is not directly imported into the component's ...

javascriptcssangulartypescriptsass

expanding animation featured on Wikipedia

Have you ever noticed that when you visit a Wikipedia page on Chrome and use the ctrl+scrollup or ctrl+scrolldown command, the page resizes in a smooth animation? Do you wonder how this effect is achieved? (Interestingly, in Firefox, only the links in th ...

javascriptjquery

Ways to display title attributes when focused using jQuery?

Typically, title attributes in all browsers only appear when the mouse hovers over them. I am looking to also display them when users are focused on them via keyboard navigation. Unfortunately, without using JavaScript, this cannot be achieved solely throu ...

jquerycssxhtmlaccessibility

Exploring the capabilities of Laravel Webpack Mix and harnessing the power of the

I'm curious about integrating Laravel Webpack Mix with version 5.8 of Laravel. Do I have to include Vue/jQuery in app.js using the extract method in Webpack Mix? Will this result in duplication when loading manifest.js/vendor.js/app.js ? ...

jquerylaravelvue.jswebpacklaravel-5.8

Creating links within a single image in HTML?

Is there a way to hyperlink different parts of a single image to various webpages using JavaScript coordinates or any other method? ...

javascripthtmlcss

The Javascript code fails to execute after other scripts have been employed

Trying to create an expanding search bar that expands upon button click and collapses when clicking elsewhere on the page. The issue I'm facing is that everything works well initially, but after the second script hides the input field on a click outsi ...

javascripthtmlcssweb-deployment

When the browser is resized, the fadeIn() function restarts from the

My plan was to create a dynamic effect where a browser-sized div would rotate through 3 different backgrounds using jQuery's fading effect. However, I encountered an issue - whenever I resize the browser window, the effect restarts from the beginning ...

javascriptjqueryhtmlcssfadein

Extracting content from HTML-formatted email

When I receive inbound emails with HTML formatting that has been copied and pasted from office applications like Outlook, it often causes formatting issues when displayed on my HTML enabled UI. To address this problem, I usually copy the HTML content to an ...

c#htmlcssasp.nethtml-parsing

Choose either immediate offspring or immediate offspring of immediate offspring

I am struggling to create a CSS Selector that follows DRY principles. The selector needs to target elements within a group but not those within a subgroup of the main group. Elements should only be direct children of the main group or wrapped in an addit ...

javascripthtmlcss

What is the best way to switch the visibility of a div on click from another div?

My goal is to make a div toggle visible or hidden when another div is clicked. The only connection between the two divs is that they are both nested within the same parent div. There's a DIV element with the class of "comment" which contains a DIV ele ...

javascriptjqueryhtmlcss

Error encountered in onclick handler due to unterminated string literal in PHP and jQuery

Trying to utilize PHP to send variables into the onclick of an element is resulting in an "Unterminated string literal" error due to long strings. Below is a snippet of my PHP code: $query = $conn->prepare("SELECT Name, Image, Description, Link, Price, ...

javascriptphpjqueryhtml

Methods for anchoring an element at the bottom of a square container div

* { box-sizing: border-box; } .publication { display: flex; width: 100%; margin-top: 6%; } .bottom1, .bottom2 { display: flex; flex-direction: column; ...

htmlcss

The local() function in CSS @font-face is limited to finding only the "regular" and "bold" font styles, not others

Recently, I added some new fonts (specifically Roboto) to my Linux Ubuntu PC and wanted to incorporate them into my CSS using the @font-face rule. However, I encountered an issue when specifying different font weights within the src: ; property as shown in ...

htmlcssfontsfont-facelocal

Xstream produced a JSON response for a collection of objects

Utilizing Xstream for generating JSON in my application. Utilizing JSON for ajax support as well. When attempting: xstream.alias(classAlias, jsonModel.getClass()); //Note classAlias="records" responseStream.println(xstream.toXML(jsonModel)); where j ...

javascriptjqueryajaxjsonxstream