Experience the combined power of addthis, isotope, and nicescroll - all in a single

I am utilizing a WordPress template that includes a set of share buttons from AddThis.

       <ul class="addthis extra">
            <li class="addthis-hold">
                <div class="addthis_toolbox" addthis:url="<?php the_permalink(); ?>">
                    <a class="addthis_button_compact" href="<?php the_permalink(); ?>"><img src="<?php echo GOODLAYERS_PATH; ?>/images/compact.png" width="102px" height="23" alt="email" /></a>
                    <a class="addthis_button_twitter" href="<?php the_permalink(); ?>"><img src="<?php echo GOODLAYERS_PATH; ?>/images/twitter-addthis.png" width="42" height="23" alt="twitter" /></a>
                    <a class="addthis_button_facebook" href="<?php the_permalink(); ?>"><img src="<?php echo GOODLAYERS_PATH; ?>/images/facebook-addthis.png" width="42" height="23" alt="facebook" /></a>
                </div>
                <script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=xa-51238bfa52ea314a"></script>
            </li>
        </ul>

Additionally, I have implemented an Isotope/Masonry plugin on my elements, each containing an AddThis element. However, when hovering over the addthis_button_compact, it fails to maintain its positioning. The position only changes if I hover over an object below it, but it only adjusts the top position.

javascriptjquerycssjquery-isotopeaddthis

Answer №1

After trying different approaches to adjust the toolbox, including tinkering with domready settings and other methods... I eventually found that the most effective solution was to switch to an expanded button. Although I managed to alter the position "onmouseover", it didn't quite satisfy my needs.

The transformation looked like this:

<a class="addthis_button_compact"><span>Share</span></a>

Was changed to:

<a class="addthis_button_expanded"><span>Share</span></a>

This displayed the modal version instead, which wasn't what I originally intended, but turned out to be surprisingly pleasing. So while it may not have been a direct fix to the issue, it provided a viable alternative approach.

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

Explain the concept of DOM components in relation to refs within the React JS framework

Before this issue came up in the React documentation for ref forwarding, there was a mention: The concept of ref forwarding doesn't just apply to DOM elements. It can also be used with class components. There's a discussion on another platform ...

javascriptreactjs

Using CSS to remove the background of a dropdown button in a <select> element

I need to style a <select> element so that it appears like plain text until clicked, revealing the pulldown choices. Ideally, I would like to include small arrows to indicate multiple options, but I can add those as image overlays if necessary. My p ...

htmlcsscustomizationmozillahtml-select

Is there a way to obtain asynchronous stack traces using Node.js and TypeScript?

When working with TypeScript, I encountered an issue with stack traces. It seems that only the bottommost function name is displayed. My setup includes Node.js v12.4.0 on Windows 10 (1803). Below is the code snippet: async function thrower() { throw new ...

javascriptnode.jstypescriptasynchronous

This route does not allow the use of the POST method. Only the GET and HEAD methods are supported. This limitation is specific to Laravel

I am encountering an issue while attempting to submit an image via Ajax, receiving the following error message: The POST method is not supported for this route. Supported methods: GET, HEAD. Here is the Javascript code: $("form[name='submitProfi ...

javascriptphpajaxlaravel

Tips for creating a new terminal window and interacting with it?

I have a node server that generates logs of activities in the terminal. To have more control over the server during runtime, I aim to integrate a repl server within it. However, I need to ensure that the logs and repl server do not interfere with each ot ...

javascriptnode.jsterminalchild-processread-eval-print-loop

I'm curious about the reason behind the error message stating "Navbar is defined but never used" popping up while working with Vue

After importing the Navbar component from Navbar.vue, I attempted to include it in my app.vue. However, upon doing so, I encountered an error stating 'Navbar' is defined but never used. As a newcomer to Vue, I am unsure of why this issue is occur ...

javascriptvue.jsvuejs2vue-componentvue-router

Utilize AJAX to showcase JSON data retrieved from a specified URL

We are striving to showcase the names listed in our JSON file within a div using JavaScript. Despite multiple attempts, we have not yet achieved success. JSON data: This is the approach we took: <button>fetch data</button> <div id="result ...

javascriptjqueryhtmlajaxjson

Vue-Router failing to redirect in a Single Page Application using Vue and Laravel

I have been attempting to implement vue-router in a Vue.js/Laravel project. My project consists of two simple pages: home page: https://i.stack.imgur.com/GmHOR.png about page (single-page scrolling): https://i.stack.imgur.com/CZDnZ.png The files used ...

javascriptphplaravelvue.jsvue-router

The form failed to be submitted even after undergoing ajax validation

Although this question has been asked many times before, I am still confused about where I went wrong. My goal is to validate a form using ajax and submit it if everything checks out. Below is the code snippet that I have been working with: ...

jqueryajaxvalidation

Discover how to display the loading time and memory usage of a web page on the footer using the jQuery and AngularJS library

Does anyone know how to display the loading time and memory usage of a web page in the footer using jQuery and AngularJS libraries? I've managed to show the loading time with this jQuery code: <script type="text/javascript"> before = (new Date( ...

javascriptjqueryhtmlangularjs

How can we replicate user input in React for unit testing purposes?

Struggling to unit test a React component that accepts user input, specifically the onChange function within the component. Unable to set the input value despite trying various methods found online. Below is the component under test: class Input extends C ...

javascriptunit-testingreactjsjestjsenzyme

The alignment of my text appears to be off

I am facing an issue with the second <ul> on my webpage, which contains more content compared to the first one. In this second <ul>, the last line is appearing floated to the left and does not appear below the penultimate line as expected. Li ...

htmlcss

Selenium Python option other than using send_keys()

I was looking to enhance the efficiency of this Python code and found a faster alternative: driver.get(myUrl) message = driver.find_element_by_id('message') send = driver.find_element_by_id('submit') for _ in range(myRange): messa ...

javascriptpythonseleniumloopsselenium-webdriver

When using Expressjs MVC, encountering difficulties in retrieving data from mongoose in the listAll() function within the router

I'm currently working on implementing MVC-like architecture in Express.js for a very specific scenario. I suspect there may be an issue with promises, but I'm struggling to debug the problem effectively. Here's how the architecture is set u ...

javascriptexpressmodel-view-controllerpromise

How to enhance and expand Material-UI components

I am trying to enhance the Tab component using ES6 class in this way: import React from "react"; import {Tab} from "material-ui"; class CustomTab extends Tab { constructor(props){ super(props); } render(){ return super.rende ...

javascriptreactjsmaterial-ui

Performing an AJAX request to the database when a change occurs, prior to submitting the

In my user setup/create form, I am including a field for the users' license/certification number which needs to be validated and returned to a specific DIV Onchange before the form is submitted. I have heard that using AJAX POST is the way to achieve ...

javascriptphpajax

Is there a way to incorporate the information from PHP files into the output produced by JavaScript?

I am currently working on a JavaScript script that scrapes data and displays the result on the screen successfully. However, I now face a challenge in wrapping this output with pre and post content from PHP files for formatting purposes. Here is an overvi ...

javascriptphp

"Implementing real-time updates for checkboxes using AJAX with PHP and

This is my modal <div class="modal fade bs-example-modal-lg" id="exampleModal<?php echo $row['t_id'] ?>" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel<?php echo $row['t_id'] ?>"> <div class="mo ...

phpjquerymysqlajax

Moving elements using CSS

Hi, I've been facing this issue with my web development since the start. Whenever I zoom in, the container also moves along. Is there any way to fix this problem? .darkslidecont{ width: 200px; height: 50px; position: relative; bac ...

htmlcss

What is the best way to maintain whitespace in CSS while disregarding line breaks?

The white-space property in CSS-3 offers the pre-wrap value, which maintains whitespace and line breaks while wrapping as needed, along with the pre-line value that collapses whitespace but retains line breaks and wraps when necessary. However, there is c ...

htmlcss