What is the best way to incorporate hyperlinks or text color modifications to a variable string in JavaScript?

Question

What is the best way to incorporate hyperlinks or text color modifications to a variable string in JavaScript?

I have a website that features a random on-load slideshow with text displayed in div containers for each slide. I am looking to enhance the functionality by adding links or changing the color of specific words within the text. You can view my current progress on this JSFIDDLE link: http://jsfiddle.net/shadna/Agq7W/

For your convenience, here is the code snippet:

JavaScript:

jQuery(function($){
    $('#homebanner').css({backgroundColor: "#000"}); 
    var totalCount = 4; 
    var num = Math.ceil( Math.random() * totalCount );
    var hText = ["WE SPEAK ARCHITECTURE", "WE HAVE HIGH SPIRIT(S)",  "STRATEGY: BUILT ON HUMAN-CENTERED", "FOREVER IN BLUE JEANS"];
    var hsubText = ["CLIENT: EDA ARCHITECTS", "CLIENT: HIGH WEST DISTILLERY", "CLIENT: ARCHITECTURAL NEXUS",  "CLIENT: VAULT DENIM"];

    function setBGImage() { 
        var bgimage = 'http://bwpcommunications.com/TESTING/images/homepage/'+num+'.jpg';
        $('#homebanner').css({
            backgroundImage:"url("+bgimage+")",
        }); 
        $('#htxt').html(hText[num - 1]);
        $('#hsubtxt').html(hsubText[num - 1]);
    } 
    setBGImage(); 
});

HTML::

<div id="homebanner">
    <div id="hwrap">
        <div id="htxt"></div>
    <div id="hsubtxt"></div>
    </div>
</div>

I would greatly appreciate any guidance or tips from experienced JavaScript users.

javascript jquery css variables

Answer 1

Answer №1

Initially, let's simplify and modify the code:

jQuery(function ($) {
    $('#homebanner').css({
        backgroundColor: "#000"
    });

    // consolidating all information in an array of objects:
    var details = [{
        head: 'WE SPEAK ARCHITECTURE',
        sub: 'EDA ARCHITECTS',
        link: 'http://example.com/edaarchitects.html'
    }, {
        head: 'WE HAVE HIGH SPIRIT(S)',
        sub: 'HIGH WEST DISTILLARY',
        link: 'http://example.com/highwestdistillary.html'
    }, {
        head: 'STRATEGY: BUILT ON HUMAN-CENTERED',
        sub: 'ARCHITECTURAL NEXUS',
        link: 'http://example.com/architecturalnexus.html'
    }, {
        head: 'FOREVER IN BLUE JEANS',
        sub: 'VAULT DENIM',
        link: 'http://example.com/vault-denim.html'
    }],
        // determining upper bounds for random number generation based on details array size:
        num = Math.floor(Math.random() * details.length),

        // storing relevant object for future use:
        item = details[num];

    function setBGImage() {
        // adjusting indexing for images to account for non-zero starting point:
        var bgimage = 'http://bwpcommunications.com/TESTING/images/homepage/' + (num + 1) + '.jpg';
        $('#homebanner').css({
            backgroundImage: "url(" + bgimage + ")",
        });
        $('#htxt').html(item.head);

        // modifying 'sub' text by removing 'CLIENT:' since it is present in all items
        // creating 'a' element using 'link' data from object:
        $('#hsubtxt').html('CLIENT: ' + '<a href="' + item.link + '">' + item.sub + '</a>');
    }
    setBGImage();
});

JS Fiddle example.

Answer 2

Initially, let's simplify and modify the code:

jQuery(function ($) {
    $('#homebanner').css({
        backgroundColor: "#000"
    });

    // consolidating all information in an array of objects:
    var details = [{
        head: 'WE SPEAK ARCHITECTURE',
        sub: 'EDA ARCHITECTS',
        link: 'http://example.com/edaarchitects.html'
    }, {
        head: 'WE HAVE HIGH SPIRIT(S)',
        sub: 'HIGH WEST DISTILLARY',
        link: 'http://example.com/highwestdistillary.html'
    }, {
        head: 'STRATEGY: BUILT ON HUMAN-CENTERED',
        sub: 'ARCHITECTURAL NEXUS',
        link: 'http://example.com/architecturalnexus.html'
    }, {
        head: 'FOREVER IN BLUE JEANS',
        sub: 'VAULT DENIM',
        link: 'http://example.com/vault-denim.html'
    }],
        // determining upper bounds for random number generation based on details array size:
        num = Math.floor(Math.random() * details.length),

        // storing relevant object for future use:
        item = details[num];

    function setBGImage() {
        // adjusting indexing for images to account for non-zero starting point:
        var bgimage = 'http://bwpcommunications.com/TESTING/images/homepage/' + (num + 1) + '.jpg';
        $('#homebanner').css({
            backgroundImage: "url(" + bgimage + ")",
        });
        $('#htxt').html(item.head);

        // modifying 'sub' text by removing 'CLIENT:' since it is present in all items
        // creating 'a' element using 'link' data from object:
        $('#hsubtxt').html('CLIENT: ' + '<a href="' + item.link + '">' + item.sub + '</a>');
    }
    setBGImage();
});

JS Fiddle example.

Answer 3

Answer №2

Is my understanding correct: You are looking to randomly populate a container with one of your projects?

Here's a simpler suggestion for you:

Create all the containers in HTML without using javascript. Then, based on a random number as an index, show only one of the containers randomly. This approach is much easier and requires less javascript work. There's no need for complex coding!

If you assign a class called .banner to all banners, you can easily target them in JavaScript like this:

$('.banner').eq(yourRandomNumber).css('display', 'block');

Make sure all other banners have display: none.

Also, I noticed in your code that you have multiple IDs for elements with similar styles. It's better to use classes instead and define the properties once. For example:

.banner {
    display:block;
    width:100%;
    height:290px;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    overflow:hidden;
    z-index:700;

You only need separate classes for styles that are different (try to minimize the use of IDs):

.faithologybanner {
    background: url(/TESTING/images/elements/banner_faithology001.jpg) no-repeat center top; 
}

Answer 4

Is my understanding correct: You are looking to randomly populate a container with one of your projects?

Here's a simpler suggestion for you:

Create all the containers in HTML without using javascript. Then, based on a random number as an index, show only one of the containers randomly. This approach is much easier and requires less javascript work. There's no need for complex coding!

If you assign a class called .banner to all banners, you can easily target them in JavaScript like this:

$('.banner').eq(yourRandomNumber).css('display', 'block');

Make sure all other banners have display: none.

Also, I noticed in your code that you have multiple IDs for elements with similar styles. It's better to use classes instead and define the properties once. For example:

.banner {
    display:block;
    width:100%;
    height:290px;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    overflow:hidden;
    z-index:700;

You only need separate classes for styles that are different (try to minimize the use of IDs):

.faithologybanner {
    background: url(/TESTING/images/elements/banner_faithology001.jpg) no-repeat center top; 
}

Answer 5

Answer №3

It seems like this is the solution you are looking for (only modifications posted here)

var hsubText = [
    { client : "EDA ARCHITECTS", url : 'http://example.com' },
    { client : "HIGH WEST DISTILLERY",  url : 'http://example.com'},
    { client : "ARCHITECTURAL NEXUS",  url : 'http://example.com' },
    { client : "VAULT DENIM",  url : 'http://example.com' }
];
function setBGImage()
{ 
    var bgimage = 'http://bwpcommunications.com/TESTING/images/homepage/'+num+'.jpg';
    $('#homebanner').css({ 'backgroundImage':'url('+bgimage+')' }); 
    $('#htxt').html(hText[num - 1]);
    var client = hsubText[num - 1].client;
    var url = hsubText[num - 1].url;
    $('#hsubtxt').html('CLIENT : <a href="'+url+'">'+client+'</a>');
 }

CSS:

#hwrap a { color:red }

DEMO.

Revised : (As requested by OP in the commentary)

function setBGImage()
{ 
    var bgimage = 'http://bwpcommunications.com/TESTING/images/homepage/'+num+'.jpg';
    $('#homebanner').css({ 'backgroundImage':'url('+bgimage+')' }); 
    var words = hText[num - 1].split(' ');
    var wordsFirst = words.shift();
    $('#htxt').html($('<span/>', { text:wordsFirst, style:'color:yellow'})).append(' '+ words.join(' '));
    var client = hsubText[num - 1].client;
    var url = hsubText[num - 1].url;
    $('#hsubtxt').html('CLIENT : <a href="'+url+'">'+client+'</a>');
}

DEMO.

Answer 6

It seems like this is the solution you are looking for (only modifications posted here)

var hsubText = [
    { client : "EDA ARCHITECTS", url : 'http://example.com' },
    { client : "HIGH WEST DISTILLERY",  url : 'http://example.com'},
    { client : "ARCHITECTURAL NEXUS",  url : 'http://example.com' },
    { client : "VAULT DENIM",  url : 'http://example.com' }
];
function setBGImage()
{ 
    var bgimage = 'http://bwpcommunications.com/TESTING/images/homepage/'+num+'.jpg';
    $('#homebanner').css({ 'backgroundImage':'url('+bgimage+')' }); 
    $('#htxt').html(hText[num - 1]);
    var client = hsubText[num - 1].client;
    var url = hsubText[num - 1].url;
    $('#hsubtxt').html('CLIENT : <a href="'+url+'">'+client+'</a>');
 }

CSS:

#hwrap a { color:red }

DEMO.

Revised : (As requested by OP in the commentary)

function setBGImage()
{ 
    var bgimage = 'http://bwpcommunications.com/TESTING/images/homepage/'+num+'.jpg';
    $('#homebanner').css({ 'backgroundImage':'url('+bgimage+')' }); 
    var words = hText[num - 1].split(' ');
    var wordsFirst = words.shift();
    $('#htxt').html($('<span/>', { text:wordsFirst, style:'color:yellow'})).append(' '+ words.join(' '));
    var client = hsubText[num - 1].client;
    var url = hsubText[num - 1].url;
    $('#hsubtxt').html('CLIENT : <a href="'+url+'">'+client+'</a>');
}

DEMO.

What is the best way to incorporate hyperlinks or text color modifications to a variable string in JavaScript?

Answer №1

Answer №2

Answer №3

Similar questions

Could the absence of a tree view in the div be due to an error in the positioning of the DOM

Error: undefined property causing inability to convert to lowercase

"Utilizing jQuery to target all elements within the div class

Troubles with the placement of the navbar icon in responsive design

The functionality of Node.js's hasOwnProperty method fails to return true even for existing properties

Having trouble incorporating a react component I discovered into my application. Encountering an error message stating "Attempted import error."

Creating a clickable table cell in CSS that maintains vertical alignment of text within

Creating dual modes (night/day) for your AngularJS application

What caused the auto resize feature of the Automatic Image Montage jQuery plugin to malfunction?

Retrieving the value of an inner div upon clicking the outer div

The 'length' cannot be searched using the 'in' operator

Utilizing Angular JavaScript for detecting and setting up JDK installations

Looking to remove a row with php, html, and ajax?

The popover seems to be failing to appear

"Pairing Angular's loader with RxJS combineLatest for seamless data

How can you open a popover in Ionic from two different triggers but have it appear in the same place?

Creating a custom jQuery tooltip plugin that dynamically follows the mouse's movements - but how can we accurately track the mouse's position?

Correcting the reference to "/" (root) for assets after relocating the site to a subdirectory

Firefox not displaying caret in Bootstrap dropdown

What is the best way to position elements with CSS?