Adjust hover direction based on container dimensions

My goal is to change the direction of the hover based on the size of the container. If there isn't enough room for the hover effect to appear on the right side, then it should show on the left.

For more details, check out this fiddle:

http://jsfiddle.net/jHgkp/3/

I am using the hoverIntent plugin, but you can find all the specifics on the provided Fiddle link.

            $(document).ready(function(){
                $(".discover").hoverIntent({
                over: makeVisible,
                out: makeInvisible,
                timeout: 200
                });
            }); // close document.ready

            function makeVisible() {
            $(this).find('ul').fadeIn(100);}
            function makeInvisible() {
            $(this).find('ul').fadeOut(300);}

Answer №1

There are multiple approaches available.

1) One option is to style the tooltip on the third element so that it appears on the left side (not dynamic).

2) Alternatively, you can calculate the position of the element by adding the offset().left + element.width to the tooltip width and then comparing it with the holder width (dynamic).

3) Another approach is to determine the tooltip offset + width and directly compare it to the holder width (dynamic).

The choice depends on your specific requirements...

This JavaScript code has been added:

var holderWidth = $('.container').outerWidth();

as well as

//where 260 represents left 150 + width 110
var pos = $(this).offset().left + 260
if(holderWidth < pos){
    $(this).addClass('leftPos');
}else{
    $(this).removeClass('leftPos');
}

and just one line of CSS:

.leftPos ul { left: auto; right: 150px; }

Check out the demo here

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

What's causing this unexpected wrapping issue?

I must be overlooking something simple. Could someone please review this page and explain why the BYOB section is appearing on the right, rather than directly below the American section? Thank you in advance. ...

Creating a SAS URL for Azure Blob storage in Node.js using the generateBlobSASQueryParameters method from the @azure/storage-blob module

Hello, I am working with an Azure storage account where I upload and create a SAS URL to download images. Below is the code snippet that I have used: const { BlobServiceClient, StorageSharedKeyCredential, BlobSASPermissions, generateBlobSASQueryPar ...

Understanding the usage of the "scripts" key in the package.json file

I'm curious about the purpose of the "scripts" key in the package.json file. While I was studying Angular 2, I encountered the following script in the package.json file and I wasn't sure what its function was. "scripts": { "postinstall": "npm ru ...

Using useState to create numerous arrays

In my latest project, I've been working on a dropdown filter feature to update search results using react hooks. The idea is to pass an array of options selected by the user from the dropdown menu and update the global state accordingly. While I' ...

Include a condition to verify the values

Looking to enhance the code by incorporating an if or switch case: The initial code snippet is as follows: {(errorMessage || invalidEmailError.length > 0) && ( <Message type="error" className="mt-l" ...

Determine the number of uploaded files

I am currently using the jquery uploader available at this link and I am curious about how to retrieve the total number of files that have been added but not uploaded. Since the new version lacks specific documentation, I am reaching out to see if anyone ...

Utilizing PayPal as a payment method for an exclusive subscription-based online

Running a membership site involves users registering with their email and password, along with subscribing to a monthly plan. The frontend is built using jquery/ajax while the backend utilizes PHP/Slim. Currently, Stripe has been integrated as a payment me ...

Can a default arrow function be exported in TypeScript using only one line?

const myFunction: () => void = () => { console.log('I am able to export my function like this'); }; export default myFunction; export default () => void = () => { console.log('I am unable to export my function like thi ...

Create a sequence of reactions using Selenium WebDriver

I am looking to gather a set of responses while browsing a website, and then "recreate" the process using those responses. Upon exploring an different discussion, I stumbled upon this method for rendering HTML: content = requests.get("https://stackoverfl ...

Swapping the icon in the panel heading of Bootstrap 3 Collapse based on its collapse status

Despite many attempts, I haven't been able to make any of the provided answers work in my code. My setup involves using Bootstrap 3 panels and collapse functionality to display advertisements. In the default view, only the advertisement heading is vi ...

A step-by-step guide on building a custom contact form using ReactJS and transmitting the data through an API with Express

In my quest to utilize ReactJS for building a contact form and seamlessly sending the data to my email address, I embarked on creating a contact form within my App.js file. import React, { Component } from 'react'; import axios from 'axios& ...

Is it possible to determine the number of JSON properties without the need for a loop?

I have a question about organizing data. I have a vast amount of data with various properties, and I am looking for a way to display each property along with how many times it occurs. For example: 0:[ variants:{ "color":"blue" "size":"3" } ] 1 ...

Display a full-size image as the background of the modal

I am working with Materialize CSS and I encountered an issue with setting the background of a modal to display just one image without repetition. The goal is to create a large image with a blurred webpage background effect when the modal opens. However, cu ...

Can you help me troubleshoot an issue I am facing with the expand table in Angular 9 and JS? I am getting an

Here you can find the code demonstration and behavior: No extensive explanation is necessary. Check out the StackBlitz demo by clicking on the first row to view its details. Then, click on the second row to see how the details from the first row are repl ...

Make sure the text fits perfectly without any extra spaces

When working with CSS/HTML, I noticed that using a simple text within a div without any margin or padding, and specifying a font-size of 36px with a line-height also set to 36px doesn't fit perfectly - there is always some spacing at the top of the li ...

Adding an array to an object within an array using AngularJS

I'm struggling to comprehend how to insert an array into an object property. I've tried several approaches but I still can't seem to grasp it. What I'm aiming to achieve is to add a menu item to my menu and then include subitems. You ca ...

How do I make column borders show in Fullcalendar Scheduler?

There seems to be an issue with the border not displaying correctly to separate the resource columns. I am looking to have the column divider represented by the highlighted areas in red below. https://i.sstatic.net/1DtNX.png ...

Angular AutoComplete feature does not accurately filter the list items

I need to implement an auto-complete feature for the county field due to a large number of items in the list causing inconvenience to users who have to scroll extensively. Currently, there are two issues with the code. The first problem is that although t ...

Switching from $.each to a forLoop for iteration in Javascript

Can somebody help me with this challenge I'm facing? I have a gallery of 400 images that need to be filtered based on specific data parameters. I'm currently using jQuery to parse a JSON file and create images and captions dynamically. However, t ...

When the same field element is transformed into an array of values

I am attempting to create a mapped array with keys similar to the structure below const data = [{ "_id": "5f0ffb96d67d70c1a3b143e7", "name": "USER", "type": "CUSTOM&quo ...