Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript Help with changing the font size

chrisj

Bronze Coder
I’m using this js and accompanying svg to display an interesting page headline animation. The js code shows: fontSize: 55. In desktop view the size looks good, but looks small in less-than-desktop view. I’d like some guidance with how to make it responsive.

SVG:
<svg xmlns="http://www.w3.org/2000/svg" id="logo" viewBox="0 20 1300 110" fill="#fff"><path fill="transparent"></svg>

I’ve tried this in css:

CSS:
#logo {  font-size: 150px; }

but css doesn’t affect it.

The headline js has this:

JavaScript:
window.onload = function(){
 setTimeout(function(){
   play();
 }, 6445);
};
setTimeout(fade_out, 22000);
function fade_out() {
  $("#logo").fadeOut().empty();
}
function play() {
    var blue = '#fff';
    var l = Snap('#logo');
    var p = l.select('path');
  l.clear();
    l.append(p);
    p.attr({
        fill: blue,
        stroke: '#fff',
    });
    setTimeout( function() {
        // modify this one line below, and see the result !
        var logoTitle = 'This Is The Headline';
        var logoRandom = '';
        var logoTitleContainer = l.text(0, '100%', '');
        var possible = "-+*/|}{[]~\\\":;?/.><=+-_)(*&^%$#@!)}";
        logoTitleContainer.attr({
            fontSize: 55,
            fontFamily: 'Arial',
            fontWeight: '700'
        });
        function generateRandomTitle(i, logoRandom) {
            setTimeout( function() {
                logoTitleContainer.attr({ text: logoRandom });
            }, i*70 );
        }
        for( var i=0; i < logoTitle.length+1; i++ ) {
            logoRandom = logoTitle.substr(0, i);
            for( var j=i; j < logoTitle.length; j++ ) {
                logoRandom += possible.charAt(Math.floor(Math.random() * possible.length));
            }
            generateRandomTitle(i, logoRandom);
            logoRandom = '';
        }
    }, 700 );
}

I don’t know a lot of js (or svg), so any assistance is appreciated.
 
Last edited:
Much thanks for your reply, I am aware of using vw versus px for repsonsive, I should have used vw in my posted example, like so:
Code:
  #logo {  font-size: 150vw; }
the point I was trying to make is that the css doesn't affect it at all.
So, I am still looking for guidance with how to make the headline responsive.
Any additional assistance is welcomed.
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom