Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a book, tool, software library, tutorial or other off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 8 years ago.
Improve this question
I want to add a floating component in my site that highlights a bullet based on scroll. Like I scroll to second section then second bullet should be highlighted.How do I do that?
here you go, I made an example of how you can do it: DEMO
HTML:
<section>Section 1</section>
<section>Section 2</section>
<section>Section 3</section>
<section>Section 4</section>
<div id="bulletContainer">
<div class="bullet highlighted"></div>
<div class="bullet"></div>
<div class="bullet"></div>
<div class="bullet"></div>
</div>
CSS:
*{
margin:0;
padding:0;
}
section{
position:relative;
width:100%;
height:400px;
background-color:#CCC;
border-bottom:1px solid #000;
}
#bulletContainer{
position:fixed;
width:25px;
height:140px;
left:100%;
top:50%;
margin-left:-50px;
margin-top:-70px;
}
.bullet{
background-color:#666;
border-radius:50%;
width:25px;
height:25px;
margin-bottom:10px;
cursor:pointer;
}
.highlighted{
background-color:#F90;
}
jQuery:
$(document).on('scroll',function(){
$('section').each(function(index){
if($(document).scrollTop()>=$(this).offset().top-50){
$('.bullet').not($('.bullet').eq(index)).removeClass('highlighted');
$('.bullet').eq(index).addClass('highlighted');
}
});
});
$('.bullet').click(function(){
$('.bullet').not(this).removeClass('highlighted');
$(this).addClass('highlighted');
var index=$(this).index();
$('body, html').animate({scrollTop:$('section').eq(index).offset().top},200);
});
if you scroll the page or click on any of the bullets, you can see the bullet getting highlighted, and the page scrolling to the section.
NOTE: this code has a tolerance of 50px it means when the scroll is 50px above the desired element, the bullet gets highlighted, you can change it at any time.
I think you have to add add to li when scroll to section and given background color to that class
Related
I am trying to build a website using Bootstrap and JavaScript. I am trying to learn how to implement a feature that will show that a user is actively engaging with the site by displaying a green bubble next to their profile name when they are logged into my web application. I have created the project and have included some code in an attempt to show the active user bubble in green instead of the red bubble that indicates the user is offline.
Please see the image below that displays what I am trying to accomplish.
I have also included a code snippet for clarity.
Any guidance would be appreciated.
html
<div id="user-avtive"><span><img src="/assets/images/signin/User-online.png"></span></div>
Make use of pseudo elements ::after,::before instead of images.
You can try something like this.
.user{
font-size:15px;
font-weight:bold;
text-transform:uppercase;
position:relative;
display:inline-block;
}
.user::after{
content:"";
height:8px;
width:8px;
border-radius:50px;
background-color:#000000;
top:0;
right:-10px;
margin:auto;
display:inline-block;
position:absolute;
}
.user.active::after{
background-color:#00ff00;
}
.user .username{
color:#0000ff;
}
<div class="user active">
hi <span class="username">User</span>
</div>
This question already has answers here:
Footer at bottom of page or content, whichever is lower
(5 answers)
Closed 8 years ago.
I will start by saying, I am only posting this because any response on this website does not help at all regarding this topic, as the solutions given I've tried and they have not worked. (if i have missed one I apologize)
Link: nova.it.rit.edu/~whateverokay/index.php
I HAVE TRIED:
making the wrapper position relative and adding any padding to the bottom does not help.
making the footer position absolute, does not help. It only goes to the bottom of the SCREEN not content. and therefore covers a bunch of content.
I HAVE READ THESE:
matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
wordpress.org/support/topic/fixed-footer-covering-content
webdeveloper.com/forum/showthread.php?202513-Position-footer-at-bottom-regardless-of-content-height
Any question related to this on this website.
And a few others I cannot recall and YES even sticky footer that some of the sites linked to (cssstickyfooter.com/)
Basic Structure:
<div id="mainHead">
other divs to hold header
</div>
<div id="wrapper">
<div id="content">
content here
</div>
</div>
<div id="footer">
<footer>
content here
</footer>
</div>
CSS:
#wrapper{
position:relative;
min-height:100%;
height:100%;
padding-bottom:0px 0px 100px;
}
#content{
width:60%;
position:relative;
padding:10px;
}
#content, footer{
margin-left:auto;
margin-right:auto;
}
#footer{
font-size:9pt;
font-style:italic;
text-align:center;
overflow:auto;
height:100px;
position:absolute;
bottom:0px;
width:100%;
margin-top:50px;
border-top:4px solid #35475f;
background-color:#35475f;
clear:both;
}
footer{
width:60%;
}
YES some of it may be unnecessary, but I've been trying everything.
WHAT I CANNOT USE: JQUERY
Position fixed also does not work because it covers content. Furthermore it needs to only be at the end of the content.
This is a school project. I have my restrictions. Must be IE8 compatible.
Javascript is okay, if anyone knows a solution for that.
Create another DIV called "Container" at the top, then add the footer DIV to the end of it
<div id="container">
<div id="mainHead">
other divs to hold header
</div>
<div id="wrapper">
<div id="content">
content here
</div>
</div>
<div id="footer">
<footer>
content here
</footer>
</div>
</div>
oh yeah, and get rid of all that CSS junk from (almost everything)
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I want to make a div, that pops up when the user hovers on a specific object with JS. I know all that. But my problem is, that the div is within the text and makes everything ugly when it pops up. I want it to float above the text. Is that possible with CSS? If not, is it possible with a plugin or a scripting language?
Please refer the example below:
<div class="container">
<div class="floating">Floating Div</div>
<div>
<p>Para Text Goes Here</p>
<p>More Text</p>
</div>
</div>
here is your CSS:
.container {
border: 1px solid #DDDDDD;
width: 200px;
height: 200px;
position:relative;
}
.floating {
float: left;
position: absolute;
left: 0px;
top: 0px;
background-color: grey;
}
Things to do:
The use of POSITION:RELATIVE on container and POSITION:ABSOLUTE on floating div
please have a look at the working example : http://jsfiddle.net/tH84L/
Hope it works for you!
Hope this helps....
<body>
<div id="aFloat">float</div>
</body>
css:
body {
position: relative
}
#aFloat {
z-index: 1000;
position: absolute;
width: 200px;
height: 100px;
background-color: grey;
color: white;
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I have several buttons which are displayed inline with <h3> tags. All <h3> tags are of equal length but still the edges of the buttons are not aligned.
I want to align the edges of buttons so that it looks plain.
suppose your code looks like this:
<h3>hello</h3><input type="button" value="hello"></br>
<h3>hello 2</h3><input type="button" value="wad adwadaw a"></br>
<h3>hello 4</h3><input type="button" value="1231245 5"></br>
<h3>hello 55</h3><input type="button" value="asdasdddd"></br>
then the css should be:
h3{
width:100px;
display:inline-block;
}
input[type="button"]{
width:300px;
display:inline-block;
}
is this what you wanted?
CSS
<style type="text/css">
h3{
background:orange;
padding:10px 20px;
display:inline-block;
margin:0px
}
</style>
HTML
<h3>Home</h3>
<h3>About Us</h3>
<h3>Contact</h3>
You Should be Provide Screenshot or Code Sample for Getting Proper Answer.
Note: Equal Edges with Same Length is not Possible if Button Content have not Same Width.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 8 years ago.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
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
Improve this question
I am trying to create an HTML dashboard that will contain 4 boxes on the homepage. 3 on the top, 1 large one on the bottom. These boxes will be populated with data such as text, graphs (using highcharts), spark lines, etc... However, I cannot figure out for the life of me how to do this!
I am new to HTML/CSS/Bootstrap etc, so pardon my lack of understanding. Here's a diagram of what I am trying to do... I've given a link to my image since Stackoverflow will not let me post a photo.
Thank You!!!
http://i1158.photobucket.com/albums/p618/g12mcgov/ScreenShot2013-12-30at101503AM.jpg
Welcome to SO.
On this site you need to ask specific questions with (usually) some code examples of what you have tried.
Your question involves many parameters that we cannot guess (for example, do you need a responsive layout, what kind of elements do you want to place in those boxes, ...).
I made this quick layout that you can use to get started but you will have to learn about (at least) basics of HTML and CSS to use it and to go further.
See this FIDDLE
HTML:
<div id="navbar">
<p>NAVBAR</p>
</div>
<div id="wrap">
<div class="line_up"></div>
<div class="line_up"></div>
<div class="line_up"></div>
<div class="clr"></div>
</div>
<div id="bottom"></div>
CSS:
body{
width:1050px;
margin:0 auto;
}
#navbar{
width:100%;
height:80px;
line-height:80px;
background:grey;
text-align:center;
margin-bottom:100px;
}
#wrap{
width:100%;
}
.line_up{
width:330px;
height:200px;
margin:10px;
float:left;
background:red;
}
.clr{
clear:both;
}
#bottom{
height: 200px;
width:1030px;
margin:10px;
background:grey;
}