Using jQuery to create radial-gradients with the background-css feature

I'm a newcomer to this online community and English is not my first language. Despite that, I will do my utmost to clearly explain the issue at hand.

Recently, I utilized the .css function in jQuery to create a design element successfully. However, I encountered difficulties when trying to implement the 'radial-gradient...' background feature. Unfortunately, I lack knowledge of the correct syntax for this particular feature.

My initial attempt was as follows:

'background-image': 'radial-gradient(closest corner at 35% 35%, rgba(255, 255, 255, 0.5) 5%, rgba('+ color +','+ opacity +') 20%)'

Regrettably, the above code did not produce the expected outcome. Upon inspecting Firebug, it became apparent that the background-image attribute was not displayed.

The entirety of my jQuery function appears below:

function spots(spotCount) {
    var spotCount = spotCount;
    for (i = 0; i < spotCount; i++) {
        var opacity = '0.' + randomNumber(2, 5);
        var color = randomNumber(0, 255) + ',' + randomNumber(0, 255) + ',' + randomNumber(0, 255);
        var size = randomNumber(20, 30);
        var top = randomNumber(0, (($('#wrap')).height() - size));
        var left = randomNumber(-100, (980 - size + 100));
        $('<div id="spot' + i + '"></div>').appendTo('#header .width');
        $('#spot' + i).css({
            position: 'absolute',
            top: top + 'px',
            left: left + 'px',
            'z-index': '-100',
            width: size + 'px',
            height: size + 'px',
            'border-radius': size + 'px',
            border: 'rgba(' + color + ',' + opacity + ') solid 1px',
            background: 'radial-gradient (closest-corner at 35% 35%, rgba(255,255,255,'+ opacity +'),rgba(' + color + ',' + opacity + '))'
        });
    }

Additionally, I require the -webkit- syntax compatible with Safari 5.1.

If anyone can provide me with the correct syntax, I would be extremely grateful.

Thank you in advance for your assistance.

You can view the jsfiddle link here: http://jsfiddle.net/g99et0yq/1/

Upon visiting the link, you'll notice that the spots are displaying incorrectly.

Answer №1

I successfully solved the issue on my own!

Check out my solution on jsfiddle:http://jsfiddle.net/g99et0yq/10/

Here is the HTML code snippet:

<div id="header" style="height:300px;">
    <div class="width" style="width:300px;">

    </div>
</div>

This is the JavaScript code I used:

function randomNumber(minimal, maximal)
{
    return(minimal + parseInt(Math.random() * (maximal - minimal + 1)));
}

function spots(spotCount) {
    var spotCount = spotCount;
    for (i = 0; i < spotCount; i++) {
        var opacity = '0.' + randomNumber(2, 5);
        var color = randomNumber(0, 255) + ',' + randomNumber(0, 255) + ',' + randomNumber(0, 255);
        var size = randomNumber(20, 30);
        var top = randomNumber(0, (($('#header')).height() - size));
        var left = randomNumber(-100, (980 - size + 100));
        $('<div id="spot' + i + '"></div>').appendTo('#header .width');
        
        $('#spot' + i).css({
            position: 'absolute',
            top: top + 'px',
            left: left + 'px',
            'z-index': '-100',
            width: size + 'px',
            height: size + 'px',
            'border-radius': size + 'px',
            border: 'none',
            'background-color':  'rgba('+ color +','+ opacity +')'
        }).addClass('spotgloss');
    }
}

spots(10);

And this is the CSS styling I applied:

.spotgloss {
    background: -webkit-radial-gradient(35% 35%, circle, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 35%); 
    background: radial-gradient(circle at 35% 35%, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 35%);
}

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

Using jQuery, you can unbind and bind events upon the successful completion of

I am currently in the process of developing a slideshow feature for my website. The goal is to have a function triggered when the user reaches the end of the current image list and clicks the right arrow. This function will then initiate an AJAX request ...

Adjusting the content and style of a div element upon clicking, and restoring the original settings when clicked once more

There is a div with the id #increase-text-weight that displays the text "INCREASE TEXT WEIGHT". Upon clicking on it, the font weight of another div with the id #post-content should be changed to font-weight: 500 and the text inside #increase-text-weight s ...

ASP.NET DIV is experiencing issues with Jquery functionality, causing it to flicker and remain fixed in place

As a beginner in JQuery, I am facing an issue with my code in asp.net. Whenever I click on linkbuttons, the behavior is not as expected. The div flickers and does not change its direction. My goal is to move the DIV left or right by 200px, but no matter wh ...

Are there any jQuery plugins available that can display a loader image while a page is loading?

After extensive research on Google, I have been unable to find the plugin I need. If you are aware of any suitable plugins, please let me know. Thank you in advance! ...

Position the div alignment to the top within the table cell

I'm having trouble aligning the div under the header to the right. Here is my HTML code and a photo for reference: HTML Code: <td> <div class="schedule-content"> <div class="timestamp& ...

Send a variety of jQuery element selectors to a function

myFunc() is connected to the document scroll event, resulting in frequent calls. To optimize performance, I intend to store HTML selections in variables and then pass them to the function. However, upon running the code snippet below, an error appears in t ...

Unable to add a border to the thumbnail containing text

Is there a way to achieve a nice border on my thumbnail section below? I attempted using a container but it resulted in the text overflowing on md or sm screen widths. <div class="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 col-sm-8 col-sm-offset ...

Eliminating the vertical scroll on a webpage with the help of Bootstrap 5's responsive design capabilities

I've been tasked with converting a Figma design into an HTML page using Bootstrap 5. Take a look at the Figma design: https://i.sstatic.net/jo5Si.png However, there's an issue causing a vertical scroll bar to appear on the page. The culprit see ...

What could be the reason for box-shadows not appearing properly on Safari browsers?

Why are box shadows with decimals sometimes not displayed in Safari? Is there a solution to this issue? Here's an example of the code: div { width: 200px; height: 200px; box-shadow: 0px 0.0351725rem 0.0351725rem 0px, 0px 0px 0px 0.0175862re ...

Incorporating Bootstrap's Inline Design Elements

I am having trouble aligning a series of elements horizontally using bootstrap as shown in the example image below: Whenever I add the "form-control" class to the input element, it gets pushed down below the other elements. I have experimented with differ ...

OnePageCheckout may result in empty boxes being displayed due to OneStepCheckout CSS styling

Seeking advice for an issue with the Magento OneStepCheckout module. Upon checkout, there are three columns: customer data (working fine), payment options (selectable via checkbox), and details about the chosen payment method. Unfortunately, the informati ...

Transformation of CSS into SASS (or LESS)

Looking for recommendations on CSS to less or CSS to sass conversion tools. I've come across a couple like and , but unsure of their reliability. Any insights or recommendations on other tools would be highly appreciated. I have a sizable CSS code ba ...

What could be causing issues with my jQuery POST call?

I am attempting to establish authentication with a remote service using jQuery. Initially, I confirmed that I can accomplish this outside of the browser: curl -X POST -H "Content-Type: application/json" -H "Accept: appliction/json" -d '{"username":" ...

Navigating through content using jQuery scroll bar

Could someone please assist me with scrolling the content on my website? For example, I have a link like this: <a href="#">content3</a> When a user clicks that link, I would like the content to scroll to div content3. I am looking for guidan ...

Want to easily switch between pictures in the Gallery?

I've created a gallery using jQuery, CSS & HTML and now I want to implement next and previous image buttons. I have added the buttons to the page and written functions for them, but I am struggling with the implementation. Here is my code, if anyone h ...

Discovering parent elements far up the DOM hierarchy using jQuery

I'm a bit confused about how to locate an element that is a parent element further up the tree. $('.btn-action').hover( function(){ $(this).find('.product-card').addClass('animated bounce'); }, function(){ ...

Material UI Grid's layout does not support placing a select element within a row

As a newcomer in the world of full stack development, I am delving into coding projects to enhance my understanding of frontend technologies like React JS and Material UI. My latest endeavor involves creating a page that displays posts from the backend in ...

Enhance the versatility of the image upload script

My script successfully previews an uploaded image for a single upload. Now, I want to apply this script to multiple image uploads and make the readURL function dynamic so that I don't have to repeat lines of code. $(".patient_pic").on("change",funct ...

The lengthy email exceeds its limits

Take a look at this code snippet: <div className='mt-[3vh] flex h-1/3 min-h-fit w-[80%] min-w-[300px] flex-col content-center items-center justify-center rounded-2xl bg-white shadow-[0_0_8px_rgba(0,0,0,0.2)]'> {user?.image && ...

Guide to creating a dynamically populated dropdown menu using jQuery

I am in search of a method to select a dropdown value dynamically after it has been loaded with JSON values. My goal is to perform this action once the loading process is finished. Below is an illustration of what I am aiming for: $.ajax({ url:"/ech ...