How to Prevent a Script From Overlapping the Text Below
Visitors to today's Web pages can often view or hide text. You may have created this effect on your own Web pages by writing a script that adds text when a user clicks on a button or link. Sometimes, the newly inserted text overlaps with the text that was already on the page. You can prevent a script from overlapping the text below by adding cascading style sheet properties. Perhaps the most common script used to add text is jQuery's ".append()" method.
Other People Are Reading
Instructions
-
-
1
Open the Web page that contains the problematic overlapping script in a text editor or development environment.
-
2
Find the portion of code that inserts HTML into the document. In jQuery, the ".append()" method often inserts HTML:
$('#sampleDiv').append('<p>Sample Text that overflows</p>');
-
-
3
Add an HTML "<br />" tag to the end of the script text -- often this will prevent overlap and solve the problem:
$('#sampleDiv').append('<p>Sample Text that overflows</p><br /> <br />');j
Save your work and run the Web page in a browser to see if this has fixed the problem.
-
4
Add inline CSS, if necessary, to insert a margin at the bottom of the text:
$('#sampleDiv').append('<p style="margin-bottom:100px;">Sample Text that overflows</p><br /> <br />');
-
5
Save your work and test it in a Web browser to ensure it works as expected.
-
1
References
- Photo Credit Comstock/Comstock/Getty Images
