Improve the Popup to seamlessly elevate

In my project, I have implemented a pop-up dialog box that rises up from the left bottom corner as the user scrolls down the page. You can view it live at this link-

However, I am facing an issue where the initial lift up of the dialog box is not smooth, but after the first time, it works fine. Can anyone suggest ideas on how to fix this problem and make the lifting process smoother?

Below is a snippet of my code:

<div id="scrolltriggered" style="width: 310px; left: 10px; bottom: 10px;">
<div id="inscroll">
    <a href="#close" id="closebox">x</a><a href="http://www.google.com" target="_blank"><img src="images/buyersguide.png" alt="Free Resources" height="235" width="310">
     </a>
</div>
</div>


<script type="text/javascript"> 
var stb = {
hascolsed: false,
cookieLife: 7,
triggerHeight: 30,
stbElement: ""
}; 
</script>

Javascript Code-

if (typeof stb === "undefined")
var stb = {};
jQuery(document).ready(function () {
jQuery("#closebox").click(function () {
    jQuery('#scrolltriggered').stop(true, true).animate({ 'bottom':'-210px' }, 700, function () {
        jQuery('#scrolltriggered').hide();
        stb.hascolsed = true;
        jQuery.cookie('nopopup', 'true', { expires: stb.cookieLife, path: '/' });
    });
    return false;
});

// More JavaScript code for scrolling functionality

(function(stb_helpers) {
stb_helpers.showBox = function(scrolled, triggerHeight, y) {
    // Function definitions here
};
})(stb);

Answer №1

If you're looking to update your webpage's appearance, consider making some CSS adjustments. Just copy and paste the code below into your ASPX file:

<div style="width: 310px; left: 10px; bottom: -225px; display: none;" id="scrolltriggered">

I hope this solution proves helpful!

Answer №2

To ensure the popup is scrolled to the bottom by 235px, simply include the following line as the first line in your document ready function:

$("#scrolltriggered").css({bottom: -235});

If you require variable scrolling, dynamically add the height of the elements using a jQuery selector.

Check out the demonstration on this Fiddle

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

Leveraging external JSON data in a Jade template with Node.js

Is there a way to successfully pass a Json Object from XMLHttpRequest to my jade file? I am currently experiencing a blank page display and a 500 internal error being sent by the server for the get method. var express = require('express'); var r ...

The props in Vue 3 are not functioning as expected in child components even after being bound correctly, resulting in undefined values in the child component

Exploring the realms of Vue and Laravel, I find myself in new territory. As the parent element, I fetch items from the database successfully. Now, the task at hand is to pass this data to the child component. <template> <div class="todoList ...

Can you tell me what is creating the space between the elements in this form?

For an example, take a look at this link: I am puzzled by the gap between the form-group and the button, as well as between the different form-groups. When using Bootstrap 4 with flexbox activated, all my elements (inputs and buttons) collapse without any ...

How to display a PDF in a web browser using PHP

I have the following code block: header('Content-type: application/pdf'); header('Content-Disposition: inline; filename="the.pdf"'); header('Content-Length: ' . filesize($file)); @readfile($file); It is working perfectly fin ...

Assistance needed with updating a related element using jQuery AJAX upon successfully completing a

Currently, I am in the process of creating a database-driven jokes website where users have the ability to vote on their favorite jokes. Each time a user votes for a joke, the "score" column in the MySQL database is incremented. Now, my main concern is upd ...

Ways to make a component gradually appear and disappear in an Angular application

I have developed a task management application using Angular and I wanted to implement a fading effect for each task when it is created and before it is deleted. Despite successfully applying the fade in effect at the todo-item component level, I encounter ...

Shifting JSON Arrays in JavaScript - Changing Order with Ease

Consider the following JSON data: [ { "name": "Lily", "value": 50 }, { "name": "Sophia", "value": 500 }, { "name": "Ethan", "value": 75 } ] I am looking to verify and organize it in ...

Using Javascript in n8n to merge two JSON arrays into a single data structure

When working on a project, I extract JSON objects from the Zammad-API. One of the tickets retrieved is as follows: [ { "id": 53, "group_id": 2, "priority_id": 2, "state_id": 2, "organizati ...

Is passportjs responsible for managing user registration?

Is it possible to utilize Passport for user signup if I am storing user information on a self-hosted server and cannot find a user signup function in the Passport.js documentation? ...

Unable to apply text decoration to a floating element

Why is text-decoration not applying to a span inside a div after floating the span, and how can this be fixed? To see the issue in action, visit: http://jsfiddle.net/wtBDX/2/ div { color: red; text-decoration: line-through; } div span { float: rig ...

Guide on showing the content of an uploaded file as an object in JavaScript using file reader

When using the file upload function to upload a json file and read its contents, I am encountering an issue where the result is in string format instead of object. How can I display it as an object? Here is my code: .html <div class="form-group"> ...

An effective method to arrange divs in a line adjacent to each other

Apologies for the repetitive question, but I am in need of some answers. In my opinion: Having 1 div with a width of 100% and 2 divs inside each with a width of 50%. Why does it not fit properly? HTML: <div id="top-menu"> <div id="logo">& ...

Mastering the art of crafting form elements with jQuery

My code is looking like this: <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> function afterText() { var textElement = document.create ...

Leveraging multiple routes for a single component in Angular 6

Creating a component named Dashboard for admin requires passing the username in the route to find user information. This is the routing setup: {path:'dashboard/:username',component:DashboardComponent,children:[ {path:'role',component: ...

Guide to implementing a DataTable in MVC4 UI using jQuery

Looking to set up a DataTable using jQuery similar to the one shown in this image: https://i.stack.imgur.com/DNUcd.png I'm not very comfortable with jQuery, so please be patient and avoid asking me what I've tried. I don't know how to stru ...

Interacting with a third-party application via OAuth using Node server to send REST requests

https://i.stack.imgur.com/Znrp0.png I've been working on a server to manage chat messages and need to integrate with a JIRA instance. I'm currently using the passport-atlassian-oauth strategy for authentication and BearerStrategy for requests. H ...

Is there a way to change the CSS of a sibling element when hovering over it

Imagine a scenario where hovering over one row changes its color. However, what if we want all rows of the same color to highlight when any row is hovered over? Is it possible to achieve this using just CSS? .red-row:hover { background-color: red; } ...

Tips for improving the loading speed of a table during scrolling with JavaScript

Is there a way to speed up the loading time of a <table> with 20000 rows? As I scroll through the page, it feels very sluggish and takes around 4-5 seconds to load the remaining table data. I'm unsure how to tackle this issue, which is why I h ...

What could have caused the lack of output from the render function?

I've been working on generating my navigation drawer from JSON data and have everything functioning using components. Now, I'm in the process of refactoring to functions for better performance and to enhance my knowledge of React and JavaScript. ...

Refresh the DATATABLE inside an AJAX call without reloading the entire page

I'm currently working with a table that utilizes the Datatable plugin. I have successfully implemented filtering and deletion functionality within the table. However, after deleting certain entries, I noticed an issue where the deleted item still app ...