The position property in CSS does not keep the <script> tag fixed in place

Struggling with keeping a .js validation script in a fixed position on a webpage.

Here is the CSS code: 

div.fixed {
position: fixed;
bottom: 0;
left: 0;
}

HTML

<div class="fixed">
<script src="http://my.gblearn.com/js/javascript.js"></script>
</div>

Any content added inside the div tag successfully rises above and stays fixed at the bottom left, but the javascript file remains unaffected by the .css rule.

Looking for suggestions on how to address this issue. Appreciate any assistance provided.

javascripthtmlcssfixed

Answer №1

Authors can use the script element to embed dynamic script and data sections within their documents. This element is not meant for displaying content to the user.

The passage above was cited from this webpage: here

The script tag does not function as a visual container in HTML layouts, but rather facilitates the dynamic execution of code blocks that generate output or layout. As a result, certain CSS rules applied to a script tag may be ignored.

Answer №2

Make sure to avoid adding a script tag within the mentioned div at the bottom, after the footer. Instead, you can try this approach:

div.fixed {
position: fixed;
bottom: 0;
height:50px; width:50px; background:#888;
left: 0;
}
<div class="fixed">
<h3> hii </h3>
</div>

<script src="http://my.gblearn.com/js/javascript.js"></script>

Answer №3

After thorough experimentation, we discovered that by examining the source code of our website, we could reveal the javascript output. The .js file contained various id's, prompting us to create a .css section in order to display the generated information as follows:

CSS

nav, #gblearn_message_holder {
position: fixed;
bottom: 0;
left: 0;
width: auto;
}

HTML

<div id="gblearn_message_holder">
<a title="Validate this page" href="javascript:void(0)" onclick="GBLEARN_TESTER.validatePage(this.form)">
<img src="http://my.gblearn.com/img/HTML5_Logo_2561.png" alt="html5 validator">
</a><a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:99px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!"></a>
<br>This page was last modified on 3/29/2017, 7:17:04 PM</div>

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

An issue has occurred while trying to execute the npm start command within PhpStorm

When I try to run npm start on Windows' command prompt, it works fine. However, I encounter errors when running it in the PhpStorm Terminal. You can see the errors here. Is this a result of them being different platforms or could it be related to som ...

javascriptnode.jscmdnpmphpstorm

Create a unique custom spinning loader for a straightforward Vue.js application

I've set up a basic Vue project on codesandbox.io that includes vue-router and a custom spinner for loading. Spinner.vue: <template> <div class="spinner" v-show="loading"> <span class="sync" v-bind:style="[spinnerStyle, spinnerD ...

javascriptvue.js

Verify and include phone number entry using Jquery

My input field always requires a + sign to be the first character. HTML <input id="phone"> JS $("#phone").keydown(function (e) { $(this).get(0).value+="+"; // Allow: backspace, delete, tab, escape, enter and . if ($.inArray(e.keyCode, [ ...

javascriptjqueryvalidationappend

What is the best way to determine the number of characters that will fit within the width of the document?

I am looking to create a JavaScript function using jQuery that can determine the number of characters that will fit in a single line within the browser window. While I am currently utilizing a monospace font for simplicity's sake, I would like to adap ...

javascriptjquerystring

Ways to extract a value from an object with no properties using jQuery

In order to perform statistical calculations like Averages (Mean, Median, Mode) on data extracted from Datatables, I need the automatic calculation to remain accurate even when the table is filtered. While I have managed to obtain the desired values, extra ...

javascriptjqueryajaxdatatables

`Unable to activate label function in HTML`

As I dabble around with HTML and CSS, I've been experimenting with creating a custom file selection button. I came across a method on the internet that involves hiding the original button and superimposing a new one over it using the following code: ...

htmlcss

Using Console.log() will display 'undefined' prior to receiving any data

I am facing a problem with a lifecycle hook that I have been trying to troubleshoot. export default class EditRevision extends Component { state = { data: [], customColumns: [] } componentWillMount = () => { axios.get('http:/ ...

javascriptreactjs

Correct validation is not achieved when the "!" symbol is used in the matches function

I am working on a React and Next.js project where I am using Formik for handling forms and Yup for validations. One specific input field requires some validations to be performed. This field must be required, so if the user does not enter any information, ...

javascriptreactjsnext.jsformikyup

The ng-options loop in the array is unable to locate the specified value

In my C# controller, I generate a list and translate it to Json for Angular to receive at the front end. However, when using ng-options to loop through this array in order to get the array value, I always end up with the index instead. <select class="s ...

javascriptc#angularjs

Crop images in a canvas using a customized rectangle with the help of JQuery

I am trying to crop an image inside a Canvas element using a selection rectangle. My project utilizes jQuery and I am in search of a plugin that can help me implement this custom selection rectangle on the canvas itself, not just on images. Are there any ...

javascriptjqueryhtmljquery-pluginshtml5-canvas

The datepicker in Vuetify is failing to display any dates

My date picker modal expands correctly, but the dates are not showing up. https://i.stack.imgur.com/azC1w.png The datepicker functions perfectly on the Codepen demo, displaying the dates as expected. However, when I try to implement the same code in my ap ...

javascriptvue.jsdatepickercalendarvuetify.js

Using SVG and CSS to color multiple paths with individual colors

I am working with an svg that contains various paths, ellipses, and shapes each with different fill colors such as red and blue. When I combine them into a sprite, I want to be able to change the fill color on hover using CSS. Typically, I would remove the ...

htmlcsssvgfill

The event handler for clicking on the inner <li> element is not being triggered

I am encountering an issue in my React project, The problem lies within a menu structure that contains nested sub-menus. Here is the snippet of code: <ul id="main-menu-navigation" data-menu="menu-navigation" ...

javascriptjqueryreactjs

retrieving data entered in an HTML form using PHP script

Just dipping my toes into the world of php/html and I'm facing an issue where I need to extract a value from an html form and assign it as a variable in an external php script. This variable is essential for running a SQL query in a postgres database ...

phpjqueryhtml

What is the best method to adjust the size of a three.js renderer to match a specific webpage element?

I'm looking to adjust the size of the renderer to match that of an element on my webpage. When I use renderer.setSize(window.innerWidth, window.innerHeight), it sets the renderer to fit the entire window. init() { let map = document.getElemen ...

javascripthtmlthree.js

Is Angular Module Lazy Loading functioning properly in Chrome?

Is there a way to verify if the JavaScript files are lazy loaded for the currently opened module using Chrome developer tools? ...

javascriptangulargoogle-chromedebugginggoogle-chrome-devtools

Shifting Angular Component Declarations to a New Location

Here's a question that might sound silly: In my Angular project, I am looking to reorganize my component declarations by moving them from angular.module.ts to modules/modules.modules.ts. The goal is to structure my src/app directory as follows: src ...

javascriptangulartypescriptangular-componentsangular-module

Repairing div after upward scrolling and maintaining its fixation after refreshing the page

I have encountered two issues with this particular example: One problem is that the fixed_header_bottom should stay fixed beneath the fixed_header_top when scrolling up, causing the fixed_header_middle to gradually disappear as you scroll up, or vice v ...

javascriptjqueryhtmlcss

Tips on resolving issues with cellclickable functionality in Angular with gridster2

VERSION: ^9.3.3 HTML <button (click)="toggleEditing()">{ editing ? 'cancel' : 'editing' }</button> <button>ADD</button> <gridster [options]="options"> &l ...

javascriptangulartypescriptangular-gridster2

Content is cleared from the leaflet popup upon first closure

In my application, I've been working extensively with Leaflet and have a good grasp on the "leaflet way" of doing things. Since I have a single static layout for all my markers, I decided to create a simple Mustache template to insert variable data a ...

javascripthtmlleafletcanjs