Why offsetTop is always 8 and not change? [closed] - javascript

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 days ago.
The community is reviewing whether to reopen this question as of 4 days ago.
Improve this question
I want to test the offsetTop of the element, but it's always 8 even if I add position and padding to the .parent or body.
console.log(document.getElementById('children').offsetTop);
.parent {
width: 200px;
border: 3px solid #000;
height: 300px;
overflow: scroll;
position: relative;
padding-top: 20px;
}
.children {
border: 3px solid red;
height: 200px;
}
<div class="parent" id="parent">
<div class="children" id="children"></div>
</div>

Related

Is it any possibility to change the image border automatically according to image shape? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
When the user changes the square image to a circle image the border remains square. Is it any way to change the border to circle automatically?
If I understand you correctly, please try this approach:
HTML:
<div class="image-cropper">
<img src="your-image" alt="avatar" class="profile-pic">
</div>
CSS:
.image-cropper {
width: 100px;
height: 100px;
position: relative;
overflow: hidden;
border-radius: 50%;
}
.profile-pic {
display: inline;
margin: 0 auto;
margin-left: -25%; //centers the image
height: 100%;
width: auto;
}
It will circle your image perfectly as we have profile pic in social media.

How can I stop my logo from floating to right while I increase the screen size? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
.header-logo{
max-width: 172px;
/* width: 100%; */
max-height: 100%;
height: auto;
margin-left: 30px;
margin-top: 5px;
}
My coding for logo image.
Try adding this CSS-code to that Logo:
display:block;

HTML to DOM mouse cursor, change background and text colors [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
Please help my task is: when you move the mouse cursor on the selected item, change the background and text colors
http://liveweave.com/rVjF5y
You can add below CSS code
.lw:hover { background-color: red; color: blue;}
You can do it in css using the :hover, example:
.element1 {
padding: 4px;
display: block;
background: #000;
color: #fff;
}
.element1:hover {
background: #d1d1d1;
color: #000;
}
<div class="element1">Mouse Over / Mouse Out</div>

How to position text halfway through bottom responsively [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I am currently working with parallax effects on a website where i need a paragraph to go through halfway on the bottom of the page. But since the paragraph has to be responsive in font-size i am not quite sure if i need to convert the text into image or stick with pure text to solve this issue? It seems like a solution with images can enable me to do some tricks with pure JavaScript.
In general i feel it is very hard to control the text on the page especially for parallax where the text can appear in different positions. Maybe there are some good tools for this purpose?
https://jsfiddle.net/pt88w26u/2/
HTML:
<section id="first">
<div>
<p>This is a test</p>
</div>
</section>
<section id="second">
</section>
CSS:
html,
body {
height: 100%;
color: #fff;
font-size: 16px;
margin: 0;
padding: 0;
}
section {
min-height: 100%;
}
#first {
background-color: #000;
}
#second {
background-color: #ddd;
}
section > div {
top: 86%;
font-size: 5em;
position: absolute;
transform: translate(-50%, 0%);
left: 50%;
}
You can do this only with css.
To do this, set the position and transform of the div to
bottom:0px;
transform:translate(-50%,50%);
and remove the default margin on the p tag.
https://jsfiddle.net/pt88w26u/5/

Whitespace at the bottom of DIV [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I'm creating a "sketchpad" mini-project. Most features are working so far, but I'm having one issue. The sketchpad uses a 16x16 grid by default. When I fill in the bottom row of the grid, you can still see a tiny white line. I have no idea where it could be coming from.
This is an image of the issue I mentioned above
Here is the code: JSFIDDLE
#grid {
height: 450px;
width: 450px;
margin: 10px auto;
background-color: #fff;
display: block;
overflow: hidden;
font-size: 0;
}

Categories