Issue with display of Div in show mode

Question

Issue with display of Div in show mode

<script type='text/javascript'>
$(document).ready(function () {
    var fenster = $(location).attr('href');

    if (fenster == 'http://www.cyrill-kuhlmann.de/index.php/') {
        $('#intro-page').show(function () {
            $(this).click(function () {
                $(this).fadeOut(250);
            });
        });
    }
});
</script>

I am facing an issue with displaying a div in full-screen as an intro. The problem is that instead of displaying correctly, it appears in the top left corner and gradually grows to full-screen size. What could be causing this unexpected behavior?

javascript jquery html css

Answer 1

Answer №1

display() requires the length of the animation as the first argument. Instead, you have provided it with a function, which is not correct. Perhaps you intended to chain your functions:

$('#intro-page').display().click(function () {
    $(this).fadeOut(250);
});

Alternatively, if you did intend to include a callback function, make sure to include the duration parameter as well:

$('#intro-page').display(250, function(){
    $(this).click(function(){
        $(this).fadeOut(250);
    });
});

Reference

display()

Answer 2

display() requires the length of the animation as the first argument. Instead, you have provided it with a function, which is not correct. Perhaps you intended to chain your functions:

$('#intro-page').display().click(function () {
    $(this).fadeOut(250);
});

Alternatively, if you did intend to include a callback function, make sure to include the duration parameter as well:

$('#intro-page').display(250, function(){
    $(this).click(function(){
        $(this).fadeOut(250);
    });
});

Reference

display()

Answer 3

Answer №2

<script type='text/javascript'>
$(document).ready(function () {
    var fenster = $(location).attr('href');

    if (fenster == 'http://www.cyrill-kuhlmann.de/index.php/') {
        $('#intro-page').show(function () {
            $(this).click(function () {
                $(this).fadeOut(250);
            });
        });
    }
});
</script>

Here is an alternative approach:

<script type='text/javascript'>
$(document).ready(function () {
    var fenster = $(location).attr('href');

    if (fenster == 'http://www.cyrill-kuhlmann.de/index.php/') {
        $('#intro-page').show();
        $('#intro-page').click(function(){
           // Separate the click function to have more control over object
           // and perform additional logic if needed.
           $(this).fadeOut(250);
        });
    }
});
</script>

Answer 4

<script type='text/javascript'>
$(document).ready(function () {
    var fenster = $(location).attr('href');

    if (fenster == 'http://www.cyrill-kuhlmann.de/index.php/') {
        $('#intro-page').show(function () {
            $(this).click(function () {
                $(this).fadeOut(250);
            });
        });
    }
});
</script>

Here is an alternative approach:

<script type='text/javascript'>
$(document).ready(function () {
    var fenster = $(location).attr('href');

    if (fenster == 'http://www.cyrill-kuhlmann.de/index.php/') {
        $('#intro-page').show();
        $('#intro-page').click(function(){
           // Separate the click function to have more control over object
           // and perform additional logic if needed.
           $(this).fadeOut(250);
        });
    }
});
</script>

Issue with display of Div in show mode

Answer №1

Answer №2

Similar questions

Ensuring form input validity in real-time using jQuery's keyup event

Angular 12: How to detect when a browser tab is closing and implement a confirmation dialog with MatDialog

Error in Next.js 11: Unable to loop over undefined property

Creating tailored output data from a single table

The Serverless Function has exceeded its time limit

What is the method to prevent a wildcard routing in Express from capturing 404'd static files?

Instead of passing an array of arrays, Javascript is passing an array of objects

AJAX Communication Issue: Data not transferring from client-side to backend in C# MVC 5 via HTTP

Maintaining a value upon submission

Tips for stopping Webpack from deleting unrelated files in the output directory

What is the method for retrieving a variable from a custom JavaScript file within an Angular component?

Struggling with Javascript Arrays - despite my efforts, I have yet to find the correct solutions

What are the common reasons for jQuery Image Slider malfunctioning?

Angular's counterpart to withCredentials in jQuery AJAX

Creating Shortened Links with Bit.ly API Solely Using Javascript

Manipulate JSON insertions and character replacements using JavaScript or Python

Trouble getting inline SVG to scale properly with its parent

An element with a fixed position and a width of 100% is masking the vertical scrollbar in Internet

Adjusting Iframe Dimensions Dynamically with Javascript based on Anchor Location

When I insert <br> into a text field, it is interpreted as a directive rather than as plain text