Conflict in jQuery Code

After finding a code for a website tour at the following link: http://tympanus.net/Development/WebsiteTour/, I attempted to integrate it into my own webpage. However, a problem arose - the script utilized jQuery 1.4.4 while other elements on my page required a newer version of jQuery.

The old script relied on a function called "live," which is no longer supported in newer jQuery versions. Following some research, I consulted this page - http://api.jquery.com/live/ - and adjusted the code according to the instructions provided.

Although this resolved part of the issue, the tooltips were not displaying correctly even after switching from "live" to "on." Despite attempting various solutions, I have been unsuccessful in rectifying this problem.

Any assistance would be greatly appreciated.

For reference, here is the original version using the outdated jQuery that functions properly:

And here is the updated version with the newer jQuery, although it does not perform as expected when initiating the guide - the tooltips appear at the top of the page instead of next to their associated elements:

The modifications made in the code are as follows:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>

replaced with

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

and then

$('#activatetour').live('click',startTour);
$('#canceltour').live('click',endTour);
$('#endtour').live('click',endTour);
$('#restarttour').live('click',restartTour);
$('#nextstep').live('click',nextStep);
$('#prevstep').live('click',prevStep);

replaced with

$(document).on('click','#activatetour',startTour);
$(document).on('click','#canceltour',endTour);
$(document).on('click','#endtour',endTour);
$(document).on('click','#restarttour',restartTour);
$(document).on('click','#nextstep',nextStep);
$(document).on('click','#prevstep',prevStep);

No additional changes were made, and the new version does not display any errors in the console. Therefore, I am uncertain where the current issue lies.

Answer №1

The issue lies not with the Javascript, but rather with your CSS. To resolve this problem, you should include a "position fixed" property for the tooltip. Additionally, it appears that the tooltips are positioned beneath the overlay, which can be rectified by assigning a higher z-index value than the overlay. By incorporating the following CSS code into your tooltips, they will closely resemble those in the live demo:

position: fixed,
z-index: 101,
padding: 20px,
border-radius: 3px

Therefore, the updated code snippet would appear as follows:

var $tooltip = $('<div>',{
    id : 'tour_tooltip',
    'class' : 'tooltip', //changed className to 'class'
    html : '<p>'+step_config.text+'</p><span class="tooltip_arrow"></span>'
}).css({
    'display': 'none',
    'background-color' : bgcolor,
    'color' : color,
    'position': 'fixed',
    'z-index': 101,
    'padding': 20 + 'px',
    'border-radius': 3 + 'px'
});

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 could be causing the EBUSY: resource busy or locked, open errno: -4082 error to appear while trying to build storybook 7 in next.js 13?

While attempting to create a storybook, I encountered the following error in my project: [Error: EBUSY: resource busy or locked, open 'C:\Users\ali\Desktop\Works\Design Systems\projects\storybook-test2\node_modu ...

Arranging the data in my JSON reply

{ "JsonResult": { "List": [{ "Subject": "Something", "Type": 0, "TypeDescription": "Referral" }], } } When I hit my service, I receive a sample JSON response. After that, there is a button with ...

I am interested in tracking the time elapsed when the browser is active

After recently embarking on the journey of developing my very first Chrome extension, I encountered the task of creating a timer that starts as soon as the browser is launched. The timer should increment every second in the format: 00:00:00 --> 00:00:01 ...

Troubleshooting the Google OAuth 2.0 SAMEORIGIN Issue

Trying to bypass the SAMEORIGIN error while using Google's JavaScript API is a timeless challenge. Here is an example of what I have tried: let clientId = 'CLIENT_ID'; let apiKey = 'API_KEY'; let scopes = 'https://www.google ...

I'm encountering an issue where the script located at 'http://localhost:3000/js/dashboard/dashboard.js' is not being executed due to its MIME type being 'text/plain' and not executable

When I include my JavaScript code within the HTML file using <script>, everything works fine. However, I am now attempting to move my JavaScript code outside of the ejs(HTML) file. I have created a new js file and placed my JavaScript code inside ...

The "Find Usages" feature in Intellij does not have functionality across Lerna packages

I've set up a monorepo with typescript using Lerna, but I'm encountering a bug or misconfiguration related to the "find usages" feature. You can find a demo of the issue in my GitHub repo here: https://github.com/mcclaskc/IntellijLernaExample ...

How can jQuery obtain the value of an ID or class that does not exist?

My current task involves checking if an object has the same id on the DOM because I am working on developing a modal window library. The issue arises when I try to execute the following code in the browser's console: $("#anonexistingid"); It return ...

What is the best way to retrieve this JSON data?

I'm new to JavaScript and struggling to access a specific value in a JSON string. I tried looping through the objects using $.each function, but it didn't work. When I attempted to access the 'type' value with alert(data.type), it retur ...

When a radio button is clicked, the class is applied, but the radio button itself remains unselected

Take a look at the code I'm currently working with and check out the included JSFiddle. Problem: Even though I click on the radio or checkbox, the class is added but the radio or checkbox is not selected. Please help me understand this code so I c ...

Gensim's Word2Vec is throwing an error: ValueError - Section header required before line #0

Hello everyone! I am diving into the world of Gensim Word2Vec and could use some guidance. My current task involves using Word2Vec to create word vectors for raw HTML files. To kick things off, I convert these HTML files into text files. Question Number O ...

Modify jqgrid data in one cell based on the value entered in another cell (linked columns)

This is the grid. The discount column features an autocomplete function with values retrieved from another JSON variable. Below is the JSON array providing data for the discount: [ {"id":0.56,"label":"Adams Rite Less 50\/12","value":"Adams Rite L ...

AngularJS Time Range Selector: A Slider Solution

I have successfully implemented a time range slider using Jquery and JqueryUI. $("#slider-range").slider({ range: true, min: 0, max: 1440, step: 15, values: [600, 720], slide: function (e, ui) { var hours1 = Math.floor(ui.values[0] / 60); var minu ...

js: managing dynamic JSON creation based on input fields

I'm looking to create a JSON object with dynamic keys and values by parsing information from a form. Each input field in the form includes a data-key attribute which specifies the key name: <input type="text" class="form-control" ...

When attempting to utilize the .html() method in JQuery, the fresh content ends up inheriting the link attributes of the initial selector or element

I currently have a total of four links and I am looking to display related content in a specific div (.contentcont [name of div]) beneath the list of links when a particular link is clicked. $('.link1').click(function(e) { ...

Is there a way to automate the scheduling of print jobs?

Currently, I am manually entering a specific code every 15 minutes into a text box in the database. If the code is valid, it generates a report in HTML format which I then print out. My new requirement is to automatically schedule a print job every 15 mi ...

Is the onclick Syntax for async arrow function limited to working only with Ids?

I have a question about my code. I am curious as to why document.getElementById("myName").onclick functions correctly, while document.getElementByClassName("myClass").onclick does not work in the following example using an onclick arrow function. Does the ...

delivering targeted ads from Double Click For Publishers to a dynamic tag page URL

Is there a way to dynamically pull the tag or defined parameter from the current URL for display ads targeted through DFP? I have come across examples of how to specify which page certain ads should appear on ('tag', 'accountants'), but ...

Filling a container div to its limit horizontally without exceeding its vertical boundaries

I'm currently developing a website that features a layout with two columns inside a container. The challenge I am facing is ensuring that the container's white background stretches to the bottom of the tallest column. To achieve this, I have impl ...

What is the best way to retrieve additional pages from the Reddit API?

I'm diving into the world of APIs and currently experimenting with the Reddit API. My goal is to load multiple pages of JSON data from a subreddit. I'm sorry if this question has been asked before. Here's what I have so far: $.getJSON("htt ...

Tips for effectively managing loading and partial states during the execution of a GraphQL query with ApolloClient

I am currently developing a backend application that collects data from GraphQL endpoints using ApolloClient: const client = new ApolloClient({ uri: uri, link: new HttpLink({ uri: uri, fetch }), cache: new InMemoryCache({ addTypename: f ...