I'm currently using addthis as a vertical toolbox with the hover popup feature on a fixed element. However, when scrolling, the popup appears in a different location. I've tried adjusting the offset top and left configurations, but they haven't helped. Is there a solution to this issue?
Check out the DEMO here ----> http://jsfiddle.net/vaakash/QzjxR/1/embedded/result/
After experimenting with jQuery, I found a satisfying solution that met my requirements. I utilized the "mousemove" event to accurately position the popup, and it worked perfectly.
$('.addthis_button_compact, .addthis_bubble_style').mousemove(function(e){
$('#at15s').css({
'top': e.pageY - 200,
'left': e.pageX - 200
});
});
It seems that the solution to this issue is not provided by the AddThis team.
The reason behind this problem is that the position of the DIV is not recalculated after the menu is triggered. To fix this, it is suggested to disable the compact menu and only use the expanded (full) menu, which will be automatically centered.
Therefore, the code
<a class="addthis_button_compact"></a><a class="addthis_button_expanded"></a>I encountered a similar scenario where I had a div that dynamically switched between normal and fixed positioning based on the scroll position (it was a sticky menu halfway down the page).
To solve this issue, I implemented the following code:
// Resolve the AddThis menu positioning issue..
$(".sharing").bind("mouseenter", function (e) {
var isSticky = $(".sharing").hasClass("sticky");
var buttonPos = $(".addthis_button_compact").offset();
addthis_config.ui_offset_top = isSticky ? buttonPos.top - 9 : 0;
});
// Set configuration for the AddThis menu positioning, should be in global scope..
var addthis_config = { ui_offset_top: 0 }
Refer to AddThis menu offset for assistance with the addthis_config parameter.
This is similar to what I have in the content of my HTML page. <link rel="stylesheet" type="text/css" href="/untitled2.css"> I thought this was right, but it doesn't seem to be functioning. Any ideas on what might be wrong? ...
I'm currently experimenting with the superslides library for my project, and I have been trying to implement custom effects on the animations. This is how I attempted to do it: During the beforeChange event, I want to prevent the event from propa ...
There are three images displayed on a webpage, each accompanied by a list of three events. The desired functionality is that when a user clicks on an event, the corresponding information should be displayed below that event. Below is the HTML structure: & ...
Is there a simple way to notify iOS users about your app when they visit your website? While I know how to detect user agents and write JavaScript, I'm curious if there is an existing library for this purpose. In the absence of such a solution, are t ...
My goal was to create an input field with a transition effect on the placeholder text. To achieve this, I utilized a <span> tag to hold the placeholder and applied a transition using the :focus CSS selector. The implementation works smoothly, but the ...
I'm struggling to align some of these divs, especially centering them. I want the page to closely resemble this image: Here are the specific requirements: 1) The header text should be centered vertically and placed in a separate div with a black back ...
<head> <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="24464b4b50575056455464110a150a17">[email protected]</a>/dist/css/bootstrap.min.css" rel=&q ...
While working on a jsp file, I came across a span tag with the following code: <span id="divBasicSearchResults" style="height:100%;"></span> Below is the Javascript function that generates HTML content for this span: function renderBasicSear ...
Redirecting all links to my website to the https:// domain is supposed to work flawlessly, but there are certain ways it doesn't quite function as expected. https://www.example.com --- works example.com --- works www.example.com --- encounters issu ...
Whenever I visit my index.html page, a jQuery function runs to grab an article's supporting image and follow the mouse cursor within a defined area. However, after navigating to other pages and returning to index.html, this function fails to run unles ...
There is a minor issue that I find quite annoying. The validation error message takes too long (approximately 3 seconds) to disappear after a valid input has been entered. Let me give you an example. https://i.sstatic.net/8UKrm.png Do you have any tips o ...
How can I dynamically add and remove the "invalid-class" in my iti class div based on focus events in an input textbox, utilizing jQuery? <div class="form-group col-md-6"> <div class="d-flex position-relative"> & ...
Code: <!DOCTYPE html> <head> <script type="text/javascript" src="jquery-3.3.1.js"> </script> <script type="text/javascript"> $(function() { alert("Hello World"); }); </script> <meta charset ...
I have a div that I'm refreshing using jQuery every 10 seconds. The content is being read from a PHP file named status.php. Here is the JavaScript and HTML for the div: <script> function autoRefresh_div() { $("#ReloadThis").load("status.php ...
I am having trouble aligning the button on the right next to the email textbox. Unfortunately, my attempts have not been successful. Fiddler: https://jsfiddle.net/Vimalan/mt30tfpv/4/ <div class="col-xs-3"> <div class="fo ...
Can we separate form elements onto individual lines without enclosing them within divs? For example: <label for="one">One:</label> <input type="text" id="one"> <label for="two">Two:</label> <select id="two"> ...
My webpage has an element called #cols that is three times wider than the <body>. This element contains three columns, each exactly as wide as the <body>. When a button is clicked, the #cols element slides over by the width of one column while ...
I am facing two major challenges and I am struggling to find solutions for them! Below is the code snippet I am working with: @font-face { font-family: 'yekani'; src: url("../fonts/yekan.ttf"); } @font-face { font-family: 'ye ...
I'm faced with a challenge when trying to implement an ajax call in my form. My goal is to display a spinner on the screen to indicate that the form is processing and submitting information. However, it seems that the ajax call is not being triggered ...
Trying to concatenate the HTML text with the values of item.certificate_name has been a challenge for me. I've experimented with various methods, but none of them seem to work. The specific line I'm referring to is where I wrote . I have alread ...