Looking for a horizontal scrolling effect for the Chat Assistant Icon in the user interface

Seeking a unique scrolling effect for a Chat Assistant Icon with specific requirements:

  1. The icon should start on the right side of the window, floating right and about 10px from the top.
  2. Upon hovering over the icon, it should expand as depicted in the image.
  3. Once the mouse moves away from the icon, it should retract back to its original position.
  4. The icon's location should remain fixed/sticky even when scrolling up or down the page. For guidance on achieving this using HTML, CSS3, and JQuery (or native JavaScript), reference the attached screenshots showing the pre-hover position and hover effect. Feel free to use placeholder images/text for demonstration purposes. Thank you.

https://i.sstatic.net/EjSxg.png https://i.sstatic.net/OjYHb.png

javascriptjqueryhtmlcssjquery-ui

Answer №1

Insert the following code and remember to update the image path.

HTML

<a href="#" class="back-top">
    <img src="new-icon.png" alt="">
    <h5>Virtual Assistant</h5>
</a>

CSS

.back-top {
    border: 1px solid #429dd8;
    position: fixed;
    right: 0;
    top: 10px;
    z-index: 9;
    border-right: none;
    padding: 10px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    text-decoration: none;
    color: #000;
}
.back-top img {
    display: inline-block;
    vertical-align: middle;
}
.back-top h5 {
    display: inline-block;
    vertical-align: middle;
    font-size: 0px;
    transition: 0.5s all ease 0s;
}
.back-top:hover h5 {
    font-size: 16px;
    transition: 0.5s all ease 0s;
}

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

Adding custom HTML platform views in the latest version of Flutter for web development is a breeze

I need assistance adding a custom video with an HTML platform view to my Flutter web project using the 1.9 tech preview. I am having trouble locating the previous functions that allowed me to do this in the old flutter_web. I am looking for something simi ...

htmlflutterdartflutter-web

Switch up the design on Bootstrap 4 navigation tabs

Trying to customize the appearance of the current tab in a nav-tabs setup has been a bit challenging. I've created a simple file to test this functionality. When a tab is clicked, the content switches correctly, but I'm struggling to apply specif ...

cssbootstrap-4

How can you effectively pass props to a Vuejs Component that is rendered by a Router?

I am new to Vuejs, so I apologize if this is a beginner question. I have added a router to my App and I want to display data from my main App in my Components templates, but it doesn't seem to be working. Here is my current setup: Vue.use(VueRouter ...

javascriptvue.jsvue-routervue-props

Modify filtering preferences to set a distinctive highlight shade in HTML

On my HTML page, I have a list of books that can be filtered by different metrics such as genre. When I hover over the genre filter options, they are currently highlighted in blue color, which doesn't match my site's theme. https://i.sstatic.net ...

htmlcssdombootstrap-4

Using the onKeyUp and onKeyDown functions to detect when the spacebar key is pressed

Is there a way for my function to be triggered by either clicking a button or pressing the spacebar? I have managed to make it work partially, but it's not quite right. This is the function in question: const showText = () => { const x = Toug ...

javascriptnext.js

Implementing useEffect with event listeners

After receiving an event from the contract, I need to execute database updates. My main worry is when the contract emits another SomeEvent before the DB operations are complete, which could trigger the useEffect again before the first update is finished. ...

javascriptreactjsreact-hooks

Utilizing ng-class within a nested ng-repeat loop

I'm currently working on a nested ng-repeat list feature, and my goal is to apply a specific class to the parent element when any item within the nested list undergoes modification. Here's how the structure looks: <div ng-repeat="pa in produ ...

javascriptangularjs

Utilizing AJAX for file downloads within the WordPress platform

Is it feasible to utilize WordPress Ajax for file downloads? Recently, I have implemented a function for downloading attachments. function download_attachment() { $file_path = $_POST['filename']; $file_mime = $_POST['mime']; ...

jqueryajaxwordpress

What is the best way to display a background image at the top of a webpage and ensure it fills the entire visible area of the screen?

I'm a beginner in the world of development, and I've been given a challenging task to tackle. The assignment is to create a one-page website with navigation links for 'About Us' and 'Contact Us'. Upon clicking these links, th ...

jqueryhtmlcss

Changing the position of elements based on screen resolution for Desktop and Mobile

I'm working on a page with a sidebar that contains elements on desktop. When viewed on mobile, the sidebar moves under the main page. However, I would like those elements to be displayed above the main page on mobile, similar to this: Any suggestions ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

What is the process for obtaining all of the options from a jQuery datepicker in order to create a new datepicker with identical settings?

Is there a way to easily replicate all options of a jQuery datepicker when creating a new instance? I am trying to duplicate a table that includes 2 datepickers with different settings. For reference, you can view an example here: http://jsfiddle.net/qwZ5 ...

javascriptjquerydatepicker

Unexpected response from ajax request

I am struggling to properly handle error messages in my jQuery ajax code. When the fetch array result from my ajax page contains data, I want to display an error message; however, when the array result is empty, I want nothing to happen. Unfortunately, my ...

phpjqueryajax

Is it feasible to send an AJAX POST request to a server with a distinct domain while utilizing basic authentication?

I have encountered an issue while attempting to send a POST request to a server with a different domain that necessitates basic authentication. Despite my best efforts in experimenting with beforeSend and withCredentials, the basic auth headers do not get ...

javascriptajaxpostbasic-authenticationpreflight

What could be causing the issue with the JS function that is preventing the button from

I am generating a button dynamically using my JavaScript function and then adding it to the DOM. Below is the code snippet: var button = '<button id="btnStrView" type="button" onclick=' + parent.ExecuteCommand(item.cmdIndex) + ' c ...

javascriptjqueryhtml

Updating the contents of a span using multiple element IDs in JavaScript

I'm a beginner and struggling to articulate my question effectively. Please bear with me as I try to explain my issue through code. Within my webpage, there is a drop-down list represented by <selector> with the ID: list-category. In addition, ...

javascripthtml

Display a div element with sliding animation from the left side to the right

I am trying to create a slide-in effect on a div from left to right on my webpage, but it seems to be sliding in from right to left instead. I'm unsure of what the issue might be, can someone take a look and help me figure this out? $(document).rea ...

jqueryhtmlcss

CSS dropdown menu - overlapping elements an issue?

Discover our test server here: Check out the box labeled "Organizers" on the top right corner... I've been struggling to bring the drop-down menu to the front layer. I've experimented with positioning and z-index, but so far, no success... Any ...

cssdrop-down-menuz-index

Having trouble adding items to the shopping cart in MongoDB?

Currently, I am in the process of developing a shopping cart system. While I have successfully created one using MongoDB, I seem to be facing an issue when it comes to adding products from the database to the cart. Upon inspection in both the console.log a ...

javascriptmongodbmongoose

Aligning the logo in the center

I have been attempting to center this image, but so far I have not been successful. It seems that Bootstrap is pre-determining the position and I am unsure of how to disable it. Can anyone help me with this issue? Thank you. <div class="contain ...

htmlcsstwitter-bootstrap

Tips for maintaining the navigation tab's consistent appearance

Whenever I click a button on the sidebar and the current tab is the second tab, the navigation bar switches to display the first tab. How can I prevent this switch and keep the second tab displayed when clicking a button on the sidebar? The code for this ...

javascriptjqueryhtmlcssangularjs