So basically, I am simply trying to change an inline style from a HTML element that I have.
For example, my h1 tag:
<h1 id="headerTop" style="width: 500px; max-width:none; top: 234px;">Something goes here</h1>
I am trying to change top to something different after my page is loaded. Therefore, I am trying to use this piece of Javascript just before the closing of my body tag:
<script>
document.getElementById("headerTop").style.top = "470px";
</script>
Although, this makes no change.
I am trying to do this since my h1 element originally has no top attribute within my page source UNTIL it is loaded inside a browser. It is then given top: 234px;. Can't seem to find out why. I am using a purchased template from another site, so there must be something somewhere that is causing this to happen. The top attribute is DEFINITELY being added inline.
So basically, I am simply trying to change an inline style from a HTML element that I have.
For example, my h1 tag:
<h1 id="headerTop" style="width: 500px; max-width:none; top: 234px;">Something goes here</h1>
I am trying to change top to something different after my page is loaded. Therefore, I am trying to use this piece of Javascript just before the closing of my body tag:
<script>
document.getElementById("headerTop").style.top = "470px";
</script>
Although, this makes no change.
I am trying to do this since my h1 element originally has no top attribute within my page source UNTIL it is loaded inside a browser. It is then given top: 234px;. Can't seem to find out why. I am using a purchased template from another site, so there must be something somewhere that is causing this to happen. The top attribute is DEFINITELY being added inline.
- 1 If it is not in the initially loaded HTML code, then it will most likely be added by some kind of script (I assume you look at the element in some kind of DOM inspector and see the top value there?). – C3roe Commented Oct 17, 2013 at 8:40
6 Answers
Reset to default 4first add position absolute or relative to see changes
in javascript
html
<body onload="myFunction()">
js
<script>
function myFunction()
{
document.getElementById("headerTop").style.top = "470px";
}
</script>
in jquery no need to add in body tag
$(document).ready(function(){
$("#headerTop").css("top","470px");
});
You need to set position:relative
You can set top,left, right, bottom with positioned elements
So either set position:relative or absolute according to your need.
Example
Update
As you are saying you already applied position:relative, then try writting script just before </body> and see what happens.
The jquery way would be:
<script>
$(document).ready(function(){
$('#headerTop').css({
'top': '470px'
});
})
</script>
This will change the css property top to 470px on the element with an id of "headerTop"
If you need to delay the javascript exection, you could do something like this:
<script>
$(document).ready(function(){
setTimeout(function(){
$('#headerTop').css({
'top': '470px'
});
},1000)
})
</script>
This causes the execution to be delayed by 1 second. Probably not ideal, but a solution nonetheless.
The template probably hooks into the document onload function, or a jquery ready function, and does some calculation and adds the property.
The problem with overriding this is that you have to make sure you are doing it AFTER the template has done its work, otherwise the template will just overwrite your change.
By hooking into onload, you will probably be too early.
What about changing the template javascript code directly?
You could try to use the jquery ready function, but it depends if this is registered before or after the template if it will have any affect. document.ready() callbacks are called in the order they were registered.
$(document).ready(function() {
$("#headerTop").css("top","470px");
});
Also, to position elements using top/left/right/bottom, you need to create a positioning context. This is easily done by adding set position:relative to your h1 element.
using Jquery you can directly use css to set inline style $('#headerTop').css('top','470px');
I am uncertain if this is what might work, for this issue, but it solved my issue so I'm posting it to maybe help someone else. I wanted to use the display none so I would not take up room on the page , but display visible so my parent div would grow in height instead on the content spilling out on bottom so I used this javascript , hope it can help someone else.
function changeStyle7(){
// Selecting element
var elem = document.getElementById('change');
if( elem.className == "dropdown-content1"){elem.className = "dropdown-content";}
else {elem.className = "dropdown-content1";}
}
Then just added the dropdown_content1 section to my style sheet with the visibility :visible instead of display:none now my parent div grows when i open the hidden div and of course add the onclick changeStyle7() to my button. almost forgot the html.
<div class="dropdown-content"id="change"> some stuff</div>
<style>
.dropdown-content {
display: none;
position: absolute;
z-index: 1;
}
.dropdown-content1 {
visibility: visible;
position: relitive;
</style>