Develop Reference

How to use css bootstrap list-group with affix to create a sticky menu in a column?

I am trying to create a sticky menu using CSS Bootstrap affix and list-group menu.
I manage to get most of it to work except for when the user scrolls down.
When the user scrolls down, the menu seems to take the entire with of the page.
I tried to set it up via data attributes
using something like this
<div class="container">
<div class="row">
<div class="col-md-3" id="leftCol">
<div data-spy="affix">
<div class="list-group list-group-root well">
<a class="list-group-item" href="#introduction">Introduction</a>
<a class="list-group-item" href="#features">Features</a>
<a class="list-group-item" href="#dependencies">Dependencies</a>
</div>
</div>
</div>
<div class="col-md-9" id="mainCol">
Some long text for the body along with some tables.
</div>
</div>
</div>
But the data attribute did not make the menu stick! it just kept it on the top.
So I tried to use JS to get the job done like this
$(function(){
$('#leftCol').affix({
offset: {
top: 100,
bottom: function () {
return (this.bottom = $('.footer').outerHeight(true))
}
}
});
});
I created jsFiddle to show you the current behavior.
How can I fix this affix so when the user scrolls down the menu maintain the same shape?

First of all, you should use either data-attributes or JS.
I updated your jsFiddle. The position of id="leftCol" was changed:
<div class="col-md-3" >
<div id="leftCol">
...
</div>
</div>
and style was added:
#leftCol {
width: 220px;
}
Also, you should add media queries to remove affix from mobile view.

As an "unacceptable" workaround, I set a max width of the menu to 250px like so
.list-group.list-group-root {
padding: 0;
max-width: 250px;
}
I am not sure how to get it to work without adding a max-with the max with should be defined by the parent. In this case class="col-md-3"
UPDATED
javascript to the rescue!
I added the following JS code to solve this problem once an for all.
It basically resize the menu everytime affix.bs.affix event is fired
$(document).on('affix.bs.affix', '#docs-menu', function() {
$(this).width($(this).width());
});
From the docs
affix.bs.affix => This event fires immediately before the element has
been affixed.

Ok I believe I got most of the code working like you want it to. The main changes I made were adding this CSS:
#leftCol {
display: block;
height: auto;
padding: 0;
width: 100%;
}
.navbar-fixed-top-again {
position: static;
top: 60px;
z-index:1031;
}
.navbar-inner {
background: red;
padding: 5px;
}
.affix {
position: fixed !important;
}
and I changed up some of the structure on your HTML:
<div class="container body-content">
<div>made up content to allow the navigation to scroll more before it becomes sticky. This height will need to be set in the data-offset-top which is in the leftCol DIV just below this content. The same will apply if you need to set it for a footer offset.</div>
<!-- new nav section -->
<div class="col-md-3 navbar-fixed-top-again" id="leftCol" data-spy="affix" data-offset-top="80">
<div class="navbar-inner">
<div class="list-group list-group-root well">
*the rest of your code*
</div>
</div>
</div>
</div>
The main problem now is having a sticky navigation menu with variable height. If you notice when you scroll your reading content underneath jumps up and gets hidden. It seems that it is possible to fix this using JavaScript (link to SO question).
Heres the link to your updated Fiddle. Hope that helps.

Floating visible div inside horizontal scrollable div CSS

The issue is the following :
I have a calendar in which the user can create an appointment (using DHTMLX Scheduler Timeline View), the main problem is the Scheduler doesn't support a scrollable view , only fits the schedule into the view.
I Solve the previous problem, creating a div with a FIXED width (in this way can i have a longer horizontal scheduler ) and wrapping it inside a div that allows to scroll horizontally its content.
However , I dont have a clear idea of how to solve the following problem caused :
When the calendar is loaded , you can see which div belongs to its horizontal Row
And when the user scrolls horizontal (to see 7:00 PM for example)
You cannot see in which div with color you need to create the appointment !
So i need something like this, where the div is still visible although the user scrolls horizontally :
I already tried with something like the following :
May be a problem too with the parent container, because it hides the div if the following works maybe ?
.visible-division{
position:relative; /*Because the div with color is inside a table, and i need that still floating in the same row !!*/
float:left;
z-index:9000;/*a higher z-index in case something cover the div*/
}
without any luck ..
My CSS
#calendar-container{
width: 2000px;
}
#calendario {
height: 900px;
width: 100%;
border: 1px solid #cecece;
}
.scrolling_container {
height: 100%;
overflow: auto;
}
And my Markup
<div class="scrolling_container">
<div id="calendar-container">
<div class="dhx_cal_container panel" id="calendario">
<div class="dhx_cal_navline">
<div class="dhx_cal_prev_button"> </div>
<div class="dhx_cal_next_button"> </div>
<div class="dhx_cal_today_button"></div>
<div class="dhx_cal_date"></div>
<div class="dhx_cal_tab" name="day_tab"></div>
<div class="dhx_cal_tab" name="week_tab"></div>
<div class="dhx_cal_tab" name="month_tab"></div>
<div class="dhx_cal_tab" name="timeline_tab" style="right:280px;"></div>
</div>
<div class="dhx_cal_header"></div>
<div class="dhx_cal_data"></div>
</div>
<div class="well text-right">
<div>
a link
</div>
</div>
</div>
It can be solved via CSS ? Otherwise, Should I apply classes to it in case of scroll event ?
Any help is appreciated, thanks !

This may help you do the trick.
.visible-division{
position:fixed;
width: /* specifiy */
height: /* specify */
top: /* specify */
left: /* specify */
}
.scrolling_container {
height: 100%;
overflow: auto;
}
Though not supported by most browser, you may try sticky position value position: sticky.

Hope this will be helpful, apply this class to the floating div only.
.floating{
position:fixed;
top:20px;
right:0px;
width:80%; /* as required */
}

How to make visible and hide particular divs?

All div are generated dynamically, and having same class class="bucket". This div had one more div inside class="restPart" rest part, which will hide, when page load first time.
What I want, I have more than one div,
1. Each divs hides the rest part, when page load first time.
2. Each div are diving into two part, one part will always show and rest part will not show.
3. Rest part will appear only when we click the link "show more",
4. When div are fully shown It will show link "show less", when we click on it, will hide the rest part.
5. This should work only for one div on which we are clicking, other divs should be unaware.
_data_grid.html
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("#restPart").hide();
$('#grid_content').on('click','.more', function(){
//$("#restPart").show();
$("div").children("div").show();
$("#showRest").hide();
});
$('#grid_content').on('click','.less', function(){
//$("#restPart").hide();
$("#showRest").show();
$(this).closest("div").hide();
});
});
</script>
#grid_content {
overflow: hidden; clear: both;
}
#grid_content .bucket {
width: 290px; float: left; margin: 0 0 48px 20px;
border: 1px solid #262626;
background: $gray-lighter;
}
#grid_content .bucket ul {
margin: 0 0 0 0; padding: 0 0 0 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<section id="grid_content">
<!--1st -->
<div class="bucket">
... Content of visible part of bucket...
Show More.
<!--Below is the rest part when we click on the above link, Showrest it will show-->
<div class="restPart" id="restPart">
... Content of Rest Part and click on the Show Less It will hide this div...
Show Less.
</div>
</div>
<!--2nd -->
<div class="bucket">
... Content of visible part of bucket...
Show More.
<!--Below is the rest part when we click on the above link, Showrest it will show-->
<div class="restPart" id="restPart">
... Content of Rest Part and click on the Show Less It will hide this div...
Show Less.
</div>
</div>
</section>
What I want
In the like following figures, more div will be generated dynamically, previously all will hide, when I click on first div show the rest content, but rest will not show, please see the figure 2,
Figure 1
Figure 2

As noted by others, remove duplicate IDs.
Judging by your image,
your button Show more, (once clicked - reveals the content and) becomes: Show less so...
change button text (So use a single toggle button!)
toggle/slide the previous DIV
$(function() { // DOM is now ready
$("#grid_content").on("click", ".toggle", function(evt) {
evt.preventDefault(); // Prevent window following #hash / jump
var more = $(this).text() === "Show More";
$(this).text(more ? "Show Less" : "Show More").prev(".restPart").slideToggle();
});
});
.bucket {
width: 290px;
float: left;
margin: 0 0 48px 20px;
border: 1px solid #262626;
background: lightgray;
}
.restPart{
overflow:auto;
display:none; /* hide initially */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="grid_content">
<div class="bucket">
<p>Visible part....</p>
<div class="restPart">
<p>Content...</p>
</div>
Show More
</div>
<div class="bucket">
<p>Visible part....</p>
<div class="restPart">
<p>Content...</p>
</div>
Show More
</div>
</section>

First of all - your naming strategy is a bit wrong. HTML document can contain (by standards) only one object with one ID - that's the purpose of ID as such. So, you can't have many objects with id="showRest" or id="restPart" or id="showless".
Possible solution for your problem.
Design your HTML something like
<div class="bucket">
<div class="mininfo">
<div class="intro">some intro bucket 1...</div>
Show more
</div>
<div class="maxinfo" style="display: none;">
<div class="intro">Here is full content 1 of everything</div>
Show less
</div>
</div>
<div class="bucket">
<div class="mininfo">
<div class="intro">some intro bucket 2...</div>
Show more
</div>
<div class="maxinfo" style="display: none;">
<div class="intro">Here is full content 2 of everything</div>
Show less
</div>
</div>
Next, in JavaScript part you can use selectors such as:
$(".bucket .showmore").on('click', function(){
var $bucket = $(this).parents('.bucket');
$bucket.find('.mininfo').hide();
$bucket.find('.maxinfo').show();
});
$(".bucket .showless").on('click', function(){
var $bucket = $(this).parents('.bucket');
$bucket.find('.mininfo').show();
$bucket.find('.maxinfo').hide();
});
Updated 1: added two buckets to example.
Updated 2: example in JSFiddle
Updated 3: update in JSFiddle with some content kept

jquery drop down search box by clicking an icon

its an i tag
(the image is)
which uses css to display the icons
through a cdn hosted stylesheet and how would I incorporate that.
So lets say there is a magnifying glass icon on the web page, we the user clicks on the icon , a div dropdown search box appears. that is what i am asking help for.
not sure how to do it but I know I am close.
The icon is the
<section class="search">
<div id="searchbar"><i class="search-bar"></i></div>
<div class="search-dropdown hidden">
<div class="searchbox">
<input placeholder="search..." type="text"/>
</div>
</div>
</section>
//// javascript////
$(document).ready(function(){
$('#searchbar').click(function(){
$(this).siblings('.search-dropdown').toggleClass('hidden');
});
});

Don't know what your goal is, but your code seems to work.
Have you checked so your div wraps around the image so when you click it you click inside the div (try to do as I in the fiddle, a border around the div so you can see).
else it should work just fine.
What is the css for the .hidden class?
<style>
.hidden
{
background-color: yellow;
}
#searchbar
{
border: 1px solid black;
height: 16px;
width: 50px;
}
</style>
<section class="search">
<div id="searchbar"><i class="search-bar">CLICK</i></div>
<div class="search-dropdown hidden">
<div class="searchbox">
<input placeholder="search..." type="text"/>
</div>
</div>
</section>
Script:
$(document).ready(function(){
$('#searchbar').click(function(){
$(this).siblings('.search-dropdown').toggleClass('hidden');
});
});
Check this jsfiddle out!

Show different popups from list.

I'm having an issue displaying popups with multiple items on the page. Essentially it is a vertical "list" of items down the page. So far I have two. When I click the first one, the first set of information displays correctly, but when I click the second item, it displays the first set of information on the popup. Any help is appreciated, thanks!
<p> <a class="show-popup" href="#">Manual Therapy</a></p>
<div class="overlay-bg">
<div class="overlay-content">
<h2>Manual Therapy</h2>
<p>FIRST SET OF INFORMATION DISPLAYED HERE</p>
<button class="close-btn">Close</button>
</div>
</div>
<a class="show-popup" href="#">LIST ITEM 2</a>
<div class="overlay-bg">
<div class="overlay-content">
<h2>Low Level LASER Therapy</h2>
<p>SECOND SET OF INFORMATION DISPLAYED HERE</p>
<button class="close-btn">Close</button>
</div>
</div>
And here is the CSS
.overlay-bg {
display: none;
position: fixed;
top: 0;
left: 0;
height:100%;
width: 100%;
cursor: pointer;
background: #000; /* fallback */
background: rgba(0,0,0,0.75);
}
.overlay-content {
background: #fff;
padding: 1%;
width: 700px;
height: 400px;
overflow:auto;
position: relative;
top: 15%;
left: 30%;
margin: 0 0 0 -10%; /* add negative left margin for half the width to center the div */
cursor: default;
border-radius: 4px;
box-shadow: 0 0 5px rgba(0,0,0,0.9);
}
and here is the JS
$(document).ready(function(){
// show popup when you click on the link
$('.show-popup').click(function(event){
event.preventDefault(); // disable normal link function so that it doesn't refresh the page
$('.overlay-bg').show(); //display your popup
});
// hide popup when user clicks on close button
$('.close-btn').click(function(){
$('.overlay-bg').hide(); // hide the overlay
});
// hides the popup if user clicks anywhere outside the container
$('.overlay-bg').click(function(){
$('.overlay-bg').hide();
})
// prevents the overlay from closing if user clicks inside the popup overlay
$('.overlay-content').click(function(){
return false;
});
});

You need to wrap your second anchor inside a <p> tag, then you can change:
$('.overlay-bg').show();
to:
$(this).parent().next().show();
This will help you to target the .overlay-bg according to your clicked .show-popup anchor
Fiddle Demo

LIVE DEMO
Put inside the anchors href the ID of the desired popup content you want to see:
CSS:
.overlay-content {
display:none; /* NOTE THIS */
HTML: (USE ONLY ONE POPUP ELEMENT BUT MORE CONTENT ELEMENTS!)
<a class="show-popup" href="#cont1">Manual Therapy</a>
<a class="show-popup" href="#cont2">LIST ITEM 2</a>
<div class="overlay-bg">
<div id="cont1" class="overlay-content">
<h2>Manual Therapy</h2>
<p>FIRST SET OF INFORMATION DISPLAYED HERE</p>
<button class="close-btn">Close</button>
</div>
<div id="cont2" class="overlay-content">
<h2>Low Level LASER Therapy</h2>
<p>SECOND SET OF INFORMATION DISPLAYED HERE</p>
<button class="close-btn">Close</button>
</div>
</div>
jQ:
$(function(){
$('.show-popup').click(function(event){
event.preventDefault();
$('.overlay-bg,'+ $(this).attr('href')).show(); // Show overlay, but also
}); // the popup ID content
// taken from the anchor HREF
$('.overlay-bg, .close-btn').click(function(){
$('.overlay-bg, .overlay-content').hide();
});
$('.overlay-content').click(function(event){
event.stopPropagation();
});
});
doing this way, you could even have inside the popup only one CLOSE button, but I'll leave it to you,
I hope you get the general idea...
Also: take a look at this question: event.preventDefault() vs. return false

add a id to link, div and button what you want show.
<a class="show-popup" href="#" id="1">Manual Therapy</a></p>
<div class="overlay-bg" id="div_1">
<div class="overlay-content">
<h2>Manual Therapy</h2>
<p>FIRST SET OF INFORMATION DISPLAYED HERE</p>
<button class="close-btn">Close</button>
</div>
</div>
<a class="show-popup" href="#" id="2">LIST ITEM 2</a>
<div class="overlay-bg" id="div_2">
<div class="overlay-content">
<h2>Low Level LASER Therapy</h2>
<p>SECOND SET OF INFORMATION DISPLAYED HERE</p>
<button class="close-btn">Close</button>
</div>
</div>
and use $(this) and the id.
<script>
$(document).ready(function(){
// show popup when you click on the link
$('.show-popup').click(function(event){
var id = $(this).attr("id");
event.preventDefault(); // disable normal link function so that it doesn't refresh the page
$('#div_'+id).show(); //display your popup
});
// hide popup when user clicks on close button
$('.close-btn').click(function(){
var id = $(this).attr("id");
$('#div_'+id).hide(); // hide the overlay
});
// hides the popup if user clicks anywhere outside the container
$('.overlay-bg').click(function(){
$(this).hide();
})
// prevents the overlay from closing if user clicks inside the popup overlay
$('.overlay-content').click(function(){
return false;
});
});
</script>