Apply CSS styles when the text exceeds the size of the textbox

Is there a way to create a textbox that scrolls on hover only if the text is longer than the textbox itself? Check out my attempt here: https://jsfiddle.net/SynapticError/wqh4ts3n/35/

  • The text should scroll on hover if it's longer than the textbox.
  • If the text is shorter, no scrolling effect should occur.

In pseudo code, the solution might look like this:

IF scrollcontent.width > navbes.width
{ add css <style type="text/css">navbes:hover .scrollcontent {left: -100px; transition-duration:3s;}</style> }

I've tried several methods, but none seem to work. Can anyone provide some guidance on how to achieve this effect successfully?

javascriptcss

Answer №1

To solve the issue, simply switch the overflow property value from "hidden" to "auto": 

navbes {background-color:#5A412E; display:block; width: 180px; height: 50px; 
overflow: auto; 
position: relative; padding:0px;}

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

Update the image and heading simultaneously when hovering over the parent div

I am looking to enhance the user experience on my website by changing the color of headings and images when a user hovers over a specific section. Currently, I have been able to achieve this effect individually for each element but not simultaneously. Any ...

javascriptjquerycsshover

Struggle with bringing the foreground image to the forefront not successful

Looking to create a web page with a full-page image overlap? I've been struggling with my current code as the image is not displaying properly. If anyone has any tips or advice, it would be greatly appreciated! HTML Code <html> <head> ...

htmlcss

rating-widget not displaying when performing an ajax request

Having an issue with the star rating plugin () while using an ajax function for searching and filtering. The star rating displays correctly when the page initially loads https://i.stack.imgur.com/eaOmu.png However, when utilizing the filter and search fu ...

javascriptajax

JavaScript appendChild method not functioning properly with dynamically created image elements in JavaScript code

I recently encountered an issue while working on a website project. I was trying to create an img element using JavaScript, but ran into a problem when I tried to add the src attribute and then use the appendChild function. I'm unsure if I am missing ...

javascriptnode.js

Is there a way to align the image next to the form and ensure they are both the same size?

I've been struggling to resize the image to match the form size, but I can't seem to get it right. Can anyone provide me with some guidance on this issue? I have obtained this contact form from a website that I plan to modify slightly, but I need ...

javascripthtmlcss

Child node in Firebase successfully deleted

Is there a method to determine if a subchild has been removed from the database structure below: users:{ a: { friends: { b:Jhon, c:Ted }, b: { friends: { a: Tom } }, c: { friends:{ a: Tom } } } I a ...

javascriptnode.jsfirebasefirebase-realtime-database

Creating an HTML layout or template directly within a JavaScript bookmarklet

Currently, I am using a bookmarklet that generates a user interface for interaction. The method I have been using involves creating elements using $('<element>').addClass().css({..});, but this approach is proving to be difficult to maintai ...

javascripthtmltemplate-enginebookmarklet

Sending a notification alert directly to the client's web browser

My goal is to develop an application that allows Super users to notify other users by providing access to content, such as a PDF file, when they click on a link. For example, in the scenario where a teacher wants to share a PDF with students, this applica ...

phpjavascriptjqueryajaxcakephp

Efficiently linking styles through computation in Angular

So I've been working with Angular5 and I figured out how to bind an HTML element's style to a Boolean value. However, I'm struggling to find a way to do this for multiple styles simultaneously. For example, I have this code snippet that wor ...

htmlcssangular

Determining the installation duration of the React Native screen

Several questions have been asked about this topic, but none of them seem to have a definitive answer. What I am looking to do is calculate the time it takes to navigate to a screen. The timer will start here: navigation.navigate("SomePage") Essentially, ...

javascriptreactjsreact-native

What is the best way to insert a newline in a shell_exec command in PHP

I need assistance with executing a node.js file using PHP. My goal is to achieve the following in PHP: C:proj> node main.js text="This is some text. >> some more text in next line" This is my PHP script: shell_exec('node C:\pr ...

javascriptphpnode.jscmd

Display the jQuery validation message in the final td cell of the table

JavaScript Animation Library rules:{ gender: { required: true }, }, messages:{ gender: { required: "Please indicate your gender" }, }, errorPlacement: function (error, element) { if (element.attr("type") == "radio") { ...

javascriptjqueryhtml

How can you specify the environment in Google Tag Manager?

I have integrated google tag manager and google analytics using the vue-gtm plugin found at vue-gtm Within google tag manager, I have set up 3 environments under the same container. In a user-defined variable called GA from environment, I have created a ...

javascriptvue.jsgoogle-tag-manager

Launching a call to action through Ajax in Zend Framework triggers a redirect, but subsequent calls prove to be effective

I've encountered an intriguing issue that I'm hoping someone else has come across and resolved before. In this particular application, I have implemented a 'change my password' option for users. If a user forgets their password, they c ...

javascriptajaxzend-frameworkjquery

Extract the content of an element and incorporate it into a script (AddThis)

HTML: <div id="file-section"> <div class="middle"> <p class="description"> Lorem ipsum... </p> </div> </div> jQuery: var share_on_addthis = { description: $('#file-section ...

javascriptjqueryhtmlcss

Utilizing Vue.js 2 to dynamically update data through directives

Is it possible to change a data property from a directive using single file components? For instance, consider the following code... export default { name: 'app', data: function() { return { is_loading: true ...

javascriptpropertiesvue.jsdirectivevue-component

Navigate to a fresh webpage and find the scrollbar sitting at the bottom

When launching a new website using my forum system, I want the scrollbar to automatically be at the bottom so users don't have to scroll down. I'm not experienced in JavaScript and need help creating the code for this feature. ...

javascripthtmlajaxscrollbar

Intensive analysis of objects comparing their characteristics

Currently delving into the world of Javascript, I encountered a coding exercise involving a "deepEqual" function that I attempted to write but ultimately struggled with. Even after reviewing the solution, one particular part perplexed me - the for loop, ...

javascript

React Alert: Unable to update state in an unmounted React component

I have encountered an issue while using Redux in this particular file. When I click on the second component, I receive the following error message: Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it ind ...

javascriptreactjsreduxreact-reduxreact-router

Passing a JSON object from a Rails controller to Javascript

After creating a hash structure in Ruby like this: Track_list = {:track1=>{:url=>"https://open.spotify.com/track/2Oehrcv4Kov0SuIgWyQY9e", :name=>"Demons"}, :track2=>{:url=>"https://open.spotify.com/track/0z8yrlXSjnI29Rv30RssNI", :name=> ...

javascriptruby-on-railsjsonspotify