CSS "depth meter" (div that follows screen and changes numbers) [closed] - javascript

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
Does anyone have idea how to make little div with small image lets say 50x50 px to follow scrolling inside of webpage (lets say its centered verticaly and hugging one side of screen) + beside that div it changes numbers from top of screen 0 to bottom 100. Something similar i found on this page but cant see how this works
http://www.jana-water.com/hr/o-jani . If anyone has idea how to make it would be gr8.I googled it but dont know what that "technique" is called.

How about this?
http://jsfiddle.net/zzkf5/1/
JavaScript to get the 'depth':
var depthMeter = $('#depthMeter');
$(window).scroll(function(){
depthMeter.text($(this).scrollTop());
});
CSS to get the element fixed on the right:
#depthMeter {
position: fixed;
top: 50%;
right: 0;
margin-top: -25px; // Half the height, because top: 50% does not factor in the element's height
height: 50px;
width: 50px;
}

Related

Can someone explain this CSS code to me? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I am trying to work on adjusting the size of a picture from a web page.
My friend wrote something, and I am trying to learn from it. What does this code do?
div.page-full-width div#primary div#content div.entry-content div#bbpress-forums div.bbp-reply-form form#new-post fieldset.bbp-form div p.bbp-attachments-form label.btn {
width: 9vw;
height: 1vw;
}
.entry-buddypress-content div#buddypress div.full-width div#item-body div.profile div#subnav {
width: 21vw !important;
height: 8vw !important;
padding-right: 2vw !important;
margin-bottom: 0;
}
#members-stream li .action div.generic-button a, #members-list li .action div.generic-button a {
font-size: 3vw;
line-height: 4vw;
}
some are #, some are . and some are div., how do they work to target specific lines from HTML code?
#foo selects the element with the id foo. (See MDN)
.bar selects all elements with the class bar. (See MDN)
More about CSS selectors in general.
.test is for classes in html
#test is for Ids in html
div. selectes all divs with this classname
Width: 9vw means view width so the image is 9% of the view width
He basically selected with this css a lot of Ids and Classes and gives them a height, width, distance inside(padding), distance outside(margin), font size and the line height(on which height the text should be displayed).
Hope this helps

Template conversion from XHTML 1 to HTML5 , CSS Error [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
This is a simple 3-column template, with Side-bars on Left and on Right sides and content in the middle. I'm not able to understand the spacing between the columns, there's too much of space between the content(post) column and right side-bar.
[side-bar] [content/ post / matter]_____space/gap___[side-bar]
I'm not able to reduce/remove the '_space/gap ' to make the template look like
[side-bar] [content/ post / matter] [side-bar]
Before posting this here, I've tried chrome-developer tool to know and refactor it, I've not been able to understand it.
JSFiddle Example
Change this section of your code:
#right {
float: right;
width: 180px;
padding: 10px 30px 10px 0;
}
to this:
#right {
float: left;
width: 180px;
margin-left: 10px;
padding: 10px 30px 10px 0;
}
Floating right will hold that container to the rightmost position it can attain within its own container.

How to create a div that will stay on the right middle of the screen [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 7 years ago.
Improve this question
I am trying to interact with a telephony system using a web service.
When a user is on a phone call, I would like to create a div that has multiple button
Hang Up
Hold/Resume
Send To Voice Main
Transfer
But I need this div to stay on the right side of the screen and the middle. even when the user scrolls down I still want this div to be top most and on the right.
I will design the div but my question is how to make it stay on the right/middle of the screen at all time
How can I do this?
A common question, find a great explanation here
div {
position: fixed;
top: 50%;
right: 0px;
transform: translate(0, -50%);
}
Is this site having exactly what you want? See the green section links.
<ul id=menu>
<li>Section 1
<li>Section 2
<li>Section 3
</ul>
#menu {
position: fixed;
right: 0;
top: 50%;
width: 8em;
margin-top: -2.5em;
}

how to make the position of this div relative to the main container [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 9 years ago.
Improve this question
First of all, sorry for this dumb question. I am very bad at html.
i have this page. http://www.places4two.de/ If you resize the window, the ads div which is on the right side is overlapping the main container, what i want is to make this ads div relative to main container and if you resize, it should stop when it hits the main container. how can i do this.
this is what i tried:
position: relative
and
position: fixed
but they are not helping.
The width of your adsense is 160px, and you can set for the main container width as,
width: calc(100% - 160px);
here is the fiddle:
http://jsfiddle.net/jzwjP/2/
would be its prototype, the adsense width remains constant 160px, while the big container width will be resizable depending on your browser, will be calculated by browser width minus adsense width.
I would probably put the main content container and the advertisement in the same container. We'll call this container "wrapper". The width of #wrapper should equal to the width of the main content container plus the width of the ad, plus the margin between the two, plus the borders. It can be centered within the body using left and right margins of "auto".
Now inside the "wrapper" you can either float the main content container left and the ad container right, or you can use absolute positioning relative to #wrapper:
#wrapper {
width: 1310px;
margin: 0 auto;
position: relative;
}
#main-content {
width: 1100px;
position: absolute;
left: 0;
}
#ad {
width: 170px;
position: absolute;
right: 0;
}
Hope that helps.

Expand DIV left+right [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 8 years ago.
Improve this question
Following on from another SO question.
Is it possible to expand the div, left and right instead of the answers on the other SO question which only expand to the right and down...
cheers
Of course it is.
Structure
You need a parent container set to position: relative; and your actual div set to position: absolute;
This way you can modify position of your div without any worry. This should work as a starting point. You can see the child div being shifted top and left compared to the parent.
<style>
.parent {
position: relative;
width: 200px;
height: 200px;
background: yellow;
margin: 40;
}
.child {
position: absolute;
top: -10px;
left: -10px;
width: 100px;
height: 100px;
background: red;
}
</style>
<div class="parent">
<div class="child">
</div>
</div>
Expansion
so for the actual expansion, you would have to animate / change the left / top position together with width and height of the box.
For every 1px you shift your box left, you have to increase its width by 2px! to get an even expansion.
$('.child').animate({'left' : '-=10px', 'width' : '+=20px'});

Categories

Resources