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

Each time I refresh the page, the user data disappears and I have to login

Hello there, I am currently utilizing Express for backend authentication and these are the sign in functions/controllers implemented on the front end. export const signInUser = async credentials => { console.log('this is for the signInUser&apos ...

peculiar coding in HTML (HTML_ASG HTML_TAG, SYN_BLK, JS_ACV, etc..)

I created a website for a client and everything was working perfectly on my end. However, they are experiencing errors on 3 of their Windows machines running IE8 where the ElementById cannot be found. Upon inspecting the html-source, I discovered that ther ...

How can you effectively implement multiple ajax requests with jQuery?

i am facing a situation where I have different forms in various PHP files: <form id="s"> <input id="q"/> <input type="submit" href="Search!"/> </form> <div id="r"></div> Within foo.php, there is another form: <form ...

How float elements can affect z-index through opacity

While troubleshooting the alignment of my floated images, I came across an unexpected issue related to opacity: http://jsfiddle.net/tshwbnLo/ It appears that when an element has opacity, it does not adhere to the usual behavior and instead overlaps the f ...

What is the best way to send a parameter to a Javascript .done callback from a .success method?

Is there a way to transfer information from a .success function to a done function? $.ajax({ url: "/Asgard/SetLanguagesElf", success: function () { var amount = 7; }, error: function () { alert("SetLanguagesElf"); }, type: &apo ...

AngularJS - choosing the ng-model's index value

I'm looking to retrieve the selected item(s) from a select control along with their values or titles. Once the user has made their selections from the dropdown menu, I want to be able to determine the number of items selected and display their titles ...

The loop inside the jQuery function is not executing properly

I attempted to create a basic function that would display alerts in the browser window. However, I have made an error and cannot seem to locate it. Here is my code: var testList = new Array { "This", "is", "a", "loop" }; function printList(list ...

Display the HTML code in its formatted text output

I am currently facing an issue while trying to take input from the user using the WYSIWYG text editor plugin. When I attempt to display the text in a label or paragraph, all the HTML tags become visible. For instance, @string str = "<b>sample text&l ...

What is the ideal way to iterate a loop in jQuery while using setTimeout?

Currently, I'm working on a table and attempting to develop a bookmarklet that will automatically click on each row and perform some actions based on a timer. The loading time for each tab is quite long, but when I focus on just one row, the code work ...

Why would triggering an input event have any effect if it doesn't appear to be utilized anywhere?

We have developed a custom Vuetify 3 component known as FilterPanel. Here is a simplified version: <template> <div> <v-container> <v-row> <v-col cols="3"> <v-select v-model="fiel ...

Label it as submit ID rather than value or label

Check out this awesome plugin called https://github.com/aehlke/tag-it. It's really cool! Here is the issue I'm facing: <input type="hidden" name="tags" id="mySingleField" value="Apple, Orange" disabled="true"> Tags:<br ...

Transfer the elements from one array list to another array list

I need to duplicate the array list below $scope.medicinelist = [ {medicine: 'AMLOPRES 5MG TABLET'}, {medicine: 'ARGIPREG SACHET'}, {medicine: 'ALCIPRO 500MG TABLET'} , {medicine: 'PROLOMET AM 50MG TABLET'}, {medic ...

Exploring the capabilities of the Javascript Fetch API by making requests for binary Float32Array data with multiple

I need to fetch multiple 32-bit float values from different parts of a large binary file using range requests. This requires specifying multiple ranges in the request. fetch("http://example.com/largeBinaryFile.bin", { headers: { ' ...

Retrieve the value of the option that has been selected

I've been searching tirelessly, but I just can't seem to find the answer online or figure out the correct code on my own. Although I did manage to make it work with jQuery, I need to switch over to using YUI 2.7. So, what exactly am I trying to ...

Obtaining the final field with the $in operator in Mongoose

I need to retrieve all person records that fall within a time frame specified by start and end dates, and have a place ID of either 1 or 2. Below is the query I am using: Person.find({ time: { $gte: start, $lt: end ...

Understanding the Code for Responsive Web Typography with line-height in ems

I am currently trying to delve into the CSS calculation process behind the styling in the code snippet provided. This code snippet is from a responsive WordPress theme, and I am struggling to decipher how the em values for the line-height of the <h> ...

Issue with File Input not being validated by Bootstrap Validator

Looking for help with a form field that should only accept .jpg or .png images of a certain file size. The validation doesn't seem to be working when tested with invalid file types. What am I missing? It should function like the example shown here. C ...

Ways to conceal and reveal content within div elements

I have a code snippet that is currently operational, but I am looking to enhance it by displaying one div at a time. If you would like to view the code, please visit my CodePen link below: https://codepen.io/danongu/pen/YzXvpoJ Due to the extensive amou ...

The error message "element is not defined" is indicating an issue related to the cordova-plugin-google

In my current project using Ionic 3, I decided to implement map-related features by incorporating the Google Maps plugin recommended by the Ionic Team. This specific plugin serves as a wrapper around cordova-plugin-googlemaps. Following the steps outlined ...

how to change the class of a div when clicking on a <p> element

Check out this code snippet: <p class="faq" onclick="toggleVisibility('answer1');"> How can I restrict email sending on my website? </p> <div id="answer1" class="hide"><sometext></div> these are my CSS styles! ...