Cufon: Hovering on links causes them to resize and remain in that new size

I've encountered an issue with text links in a paragraph that are being replaced using Cufon. When I hover over the links, the text inside them expands and remains that way even after moving the cursor away. The color change applied to the hover state in the CSS reverts back as expected, so it doesn't seem to be stuck in the hover state.

Disabling Cufon by turning off JavaScript results in only a color change on hover without the width problem. In this case, the hover state works for color but does not have the same issue with expanding text.

This phenomenon is observed in IE6, 7 & 8, as well as Firefox, Safari, and Chrome, indicating that the problem may be related to how Cufon has been implemented on this particular site.

Has anyone else experienced this before? I would appreciate any assistance, and if I do find the cause, I will provide an update in my response.

Unfortunately, I am unable to share any links or code due to a non-disclosure agreement (NDA).

javascriptcsshyperlinkcufon

Answer №1

Understood.

Upon investigation, I discovered a specific section:

Cufon.defaultTextCufon = { fontFamily: 'Custom Font', hover: true, fontStretch: 'semi-condensed' }; Cufon.linkTextCufon = { fontFamily: 'Custom Font', hover: true };

It became evident that the issue stemmed from the default text being condensed while the links were not, leading to unexpected outcomes with Cufon due to this inconsistent setup.

I made the decision to update it to:

Cufon.defaultTextCufon = { fontFamily: 'Custom Font', hover: true };

Cufon.linkTextCufon = { fontFamily: 'Custom Font', hover: true };

Following this change, all text now appears slightly wider as the default setting. An alternative solution could have been including "fontStretch: 'semi-condensed'" for link elements, but ultimately the website now aligns better with the design concept and is more legible, a pleasant surprise.

As you might have gathered, I did not personally implement the Cufon on this site. Hopefully, this information will prevent someone else from experiencing similar challenges.

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

Click here for a hyperlink with an underline that is the same width

As we work on our website, we want a unique feature where links are underlined when hovered over, with the underline staying the same width regardless of the length of the link text. How can we achieve this using CSS/jQuery/Javascript? ...

jqueryhtmlcss

Can you attach a jQuery function to multiple CSS selectors at once?

Is it feasible to bind a mouseout call to two CSS selectors in order to trigger another action when the mouse moves away from both elements simultaneously? ...

javascriptjquerybindingcall

What is the best way to allow someone to chain callback methods on my custom jQuery plugin?

My goal is to enhance the functionality of jQuery.post() by implementing a way to check the response from the server and trigger different callbacks based on that response. For instance: $("#frmFoo").postForm("ajax") .start(function () { showSpinner( ...

javascriptjqueryajaxcallback

compress a website to display advertisement

Here is a JSFiddle link I would like to share with you: I am currently working on squeezing the webpage to display an ad on the right side. http://jsfiddle.net/5o6ghf9d/1/ It works well on desktop browsers, but I am facing issues with iPad Safari/Chrome ...

javascripthtmlcss

Changing a string array into an array with JavaScript

After making a request to my django-rest-framework API, I receive the following item: services = "['service1', 'service2', 'service3']" I am aiming for services = ['service1', 'service2', 'service3&a ...

javascriptarraysjsondjango

How can I show the unique phrase "Today" on a specific date (date=today) with the Angular-UI-Bootstrap Datepicker?

I'm currently integrating the Angular-UI datepicker directive into my project and I'm facing an issue. I want to have the datepicker display 'Today' instead of the actual date like 2015/04/27. Is there a way to achieve this without hav ...

javascriptangularjsdatepickerangular-ui-bootstrap

Issue with disabling elements using jQuery in IE 10

I'm encountering a problem with using attr('disabled', 'disabled') or prop("disabled", true) in Internet Explorer when using jQuery. This works fine in Firefox and Chrome but not in IE. Any suggestions? I'm attempting to disa ...

javascriptjqueryinternet-explorer

Navigational issues while incorporating path.join with __dirname in node.js

Can you clarify the distinction between using path.join(__dirname, "src/js") and simply __dirname + "src/js") in a node.js environment? ...

javascriptnode.js

Strange rendering issues when using the react material-ui dialog

Exploring the Project Recently, I developed a front-end project focusing on a delivery service using React and Material UI. One interesting feature I added was a Dialog window that pops up when users click on an item, allowing them to customize it. Here i ...

javascriptreactjsmaterial-uireact-hooksrendering

I am unable to achieve negative X degree rotation of the image while using mousemove to rotate it

I need assistance with moving a picture in 3D. I want the offsetX of the mouse to be positive when it's past half of the picture, and negative otherwise. How can I achieve this effect for rotation degrees? This is what I have tried: $('#img ...

javascriptjquery

What is preventing me from being able to manipulate the data retrieved from this ajax request?

I've been attempting to make an ajax call to my json server on localhost:3000 in order to retrieve an object that I can manipulate and display on a webpage. However, no matter what I try, I just can't seem to console log the (data) so that I can ...

javascriptjqueryajax

Filtering JSON data with JavaScript

Looking to group data in AngularJS using UnderscoreJS. Here is the JSON data: data = [ { "Building*": "Building A", "Wing*": "Wing C", "Floor*": "Floor 3", "Room Name*": "Room 3", "Room Type*": ...

javascriptjson

What is the solution for fixing the error "Uncaught SyntaxError: Cannot use import statement outside a module" while using Chart consoletvs/charts:7.* in Laravel 8?

I have successfully completed all the steps outlined in the documentation. When using CDN links, everything functions as expected and I am able to load any chart. <script src="https://unpkg.com/chart.js/dist/Chart.min.js"></script> &l ...

javascriptlaravellaravel-bladelaravel-testinglaravel-charts

Trouble arises when attempting to utilize the return value from a Meteor.call function

Forgive my lack of knowledge in javascript, but I am struggling to understand why this code is not functioning properly. How can I modify it to achieve the desired outcome? // Client-side Code Template.tabs.title = function () { var msg; Meteor.call(& ...

javascriptmeteor

Contrast among 17-digit timestamps

Currently, I am dealing with timestamps in Node.js that are in the UTC+02:00 timezone. I am trying to calculate the time difference between two timestamps, each consisting of 17 digits. For instance, I have two timestamps: 20180712080000000 (YYYYMMDDHHmmss ...

javascriptnode.jstimestamp

Encountering vulnerabilities during NPM installation, attempting to fix with 'npm audit fix' but unsuccessful

While working on my react project, I decided to incorporate react-icons by running npm install react-icons in the command prompt. However, after some time, the process resulted in the following errors: F:\Areebs\React JS\areeburrub>npm in ...

javascriptnode.jsreactjsnpm

Error: Reactjs - Attempting to access the 'name' property of an undefined variable

As I continue to learn about React, I have been experimenting with props in my code. However, I encountered an error where the prop is appearing as undefined. This issue has left me puzzled since I am still at a basic level of understanding React. If anyo ...

javascriptreactjs

A visually stunning image showcase with dynamic resizing and strategically placed white spaces using the m

I'm attempting to create a responsive image gallery using the Masonry jQuery plugin, but despite reading numerous articles and forum posts on the topic, I can't seem to get it to work properly. The gallery is displaying many blank spaces. My app ...

javascriptjqueryhtmlcssjquery-masonry

Is there a way to trigger an interact.js event that will reset all draggables back to their original position at coordinates (0, 0)?

I am trying to figure out how to trigger an onmove or drag move event to reset the position of a draggable div to x:0 y: 0. Despite looking at various sources like help topics here and on interact.js main page, I haven't found the right solution yet. ...

javascriptjqueryinteract.js

The background image is functioning correctly, but there seems to be an issue with the image overlay

I attempted to design a profile page for my website users to have an image as a banner and their profile photo. I have achieved this: https://i.sstatic.net/kFlrQ.jpg However, when I apply the top-margin to the image, it both moves the image and expands t ...

javascripthtmlcssreactjsreact-bootstrap