Neither BigText nor FitText is effective

Here is a sample HTML snippet:

<div id="bigtext" style="width: 300px">
    <div>The mysterious</div>
    <div>BIGTEXT</div>
    <div>feature exclusively</div>
    <div>encapsulated on screen</div>
</div>

Without any CSS enabled to avoid interference. Along with this, there is a simple JavaScript file containing the following code:

$(document).ready(function() {
    $("#bigtext").bigtext();
});

I have also included bigtext.js in the HTML. Both scripts are being successfully loaded as confirmed through an alert notification. However, the text does not resize accordingly. I attempted using FitText as well, but no luck. Despite closely following the example provided on the website, the issue persists. Any suggestions?

Answer №1

After reviewing the bigtext demo on GitHub, I made some modifications and it appears to be functioning correctly...

<body>
    <div id="bigtext">
        <div>The elusive</div>
        <div>BIGTEXT</div>
        <div>plugin exclusively</div>
        <div>captured on film</div>
    </div>

    <script src="jquery-1.7.1.min.js"></script>
    <script src="bigtext.js"></script>
    <script>
    var bt = BigText.noConflict(true);
    $.fn.bt = bt.jQueryMethod;

    $('#bigtext').bt();
    </script>
</body>

Answer №2

The BigText plugin relies on having a specified ID in order to function properly.

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

The Vue.js scripts and styles declared in the index.html file seem to be malfunctioning

I acquired a theme that includes html, css3, and js files, and I included the file path as shown below: <!-- Basic --> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Porto - Responsive HTML5 Te ...

jQuery powered image wall with dynamic scrolling

Can someone assist me in figuring out the best approach for this task? I am interested in creating a scrolling image wall using jQuery. The goal is to display numerous small images (such as Twitter profile pics) tiled one after another across the entire w ...

PHP encountered an error while trying to output the data sent via

While experimenting with a simple web form action in PHP, I encountered an interesting issue. Regardless of the input provided in the field, the output value always turned out to be 1. Additionally, there seemed to be an undefined index error for both us ...

I'm intrigued: what type of syntax is Facebook's polling service utilizing in the callback?

While monitoring the Network Monitor on Chrome's developer tool, I observed how Facebook updates content on their news feed. All AJAX responses start with the following: for (;;);{"__ar":1,"payload":[]} I'm curious about what the for(;;); piec ...

An issue is being caused by altering the custom.scss.css file in Rails

After following the tutorial by Michael Hartl (), I encountered an issue when trying to modify some CSS functions in the custom.scss.css stylesheet. Every time I make a change, such as adjusting the margin from 10 px to 11 px, I receive this error in my br ...

When it comes to Shopify Schema, the section settings are functional within the <style> tag, whereas the block settings do not seem to have the same

While working on updating a section with multiple blocks, I encountered an unusual issue. My goal was to incorporate a new block into an existing section. The schema has been set up correctly, and everything is functioning as anticipated. However, the prob ...

Utilizing websockets with the Express framework for establishing connections

I am a newcomer to the world of nodejs and websockets, and I am in need of some clarification on this topic. Despite my efforts to search online, all I can find are examples of client/server connections, which is not what I'm looking for. Essentially ...

What could be the reason that Ng Repeat fails to work when a button is triggered from a separate form

I have an HTML table that includes an ng repeat directive and two buttons. The first button opens a modal with a form to create a new user. When I click save, it adds the new user to the list. The second button is within the same form and also adds a user. ...

Tips for redesigning your Bootstrap slider

Looking to update the carousel design for the previous and next buttons with a new look. I've attempted the following code: .carousel-control-prev { content: 'prev'; font-size: 55px; color: red; } <a class="carousel-control-next" ...

Initiate a JavaScript confirmation dialog using server-side logic in ASP.NET

Does anyone know how to troubleshoot the issue with this code? I am trying to make it so that when btnOne is clicked and a is true, a confirm box pops up. If yes is selected, then it should execute the btnTwo method. Currently, the popup isn't appeari ...

What are some ways to apply separate spans for desktop and mobile devices?

When designing for different devices, I plan to use :span="5" for computers <el-col :span="5" class="container"> and for mobile phones, I intend to use <el-col class="container"> So, how can I incorp ...

Avoid activating ng-blur when ng-keydown is triggered in AngularJS

Currently, I am working on a project involving angularJS and I am facing an issue with the execution of ng-blur conflicting with ng-keydown. The problem arises because ng-keydown causes the element to lose focus at a certain point. The HTML code in questi ...

The jQuery.addClass() function seems to be malfunctioning

I'm encountering an issue with the addClass() method. For some reason, it's not functioning properly in this scenario: https://jsfiddle.net/0g1Lvk2j/20/ If you scroll to the end and close the last box by clicking on the orange box, the orange b ...

I have written code in JavaScript, but now I am interested in converting it to jQuery

What is the best way to convert this to jQuery? showDish("balkandish1") function showDish(dishName) { var i; $(".city").css('display', 'none'); $("#" + dishName).css('display', 'block'); } ...

Conceal the form after it has been submitted

I am working with the following JavaScript function: var form = $('#review-contact-form'); form.submit(function(event){ event.preventDefault(); var form_status = $('<div class="form_status center"></div>'); $.aj ...

Is there a way to record form choices upon submission?

How can I retrieve selected options from a form upon submission? I have a basic HTML form that triggers a JavaScript function on exit. However, I am unsure of how to capture the chosen option from the <select> element. Please refer to the code snip ...

Stop unwanted overrides of CSS3 blinking background colors

I am facing an issue with a programmatically created table that has n rows. To distinguish between odd and even rows, I programatically add classes to them. Some of these rows have "special" content that needs to be highlighted. Currently, I am accomplishi ...

Error encountered: SQLITE_BUSY - Unable to access the database due to it being locked. This

router.post("/update-quiz", upload.single("file"), async (req, res) => { const transaction = await sequelize.transaction(); try { const actions = { "Multiple Choice": async (questions, transacti ...

What could be causing the "Error: Cannot locate module 'html'" message to appear while executing a Node.js Express server?

I'm facing an issue while setting up a server for my HTML application. Whenever I try to access localhost:8080/map, I receive the following error message: Error: Cannot find module 'HTML'. Nonetheless, the main page at localhost:8080 is runn ...

How to send variables to a method in a JavaScript modular pattern

I am trying to achieve something similar to the code snippet below. However, it seems to be invalid as it does not allow passing variables, specifically 'min' and 'max' in this case. Is there a way to achieve this functionality? If so, ...