I want to hide the scrollbars and make horizontal scroll on button press that would scroll one column to a desired direction.
But sadly can't seem to get it to work.
image
$('#left-button').click(function() {
event.preventDefault();
$('.row-fluid').animate({
scrollLeft: "+=200px"
}, "slow");
});
$('#right-button').click(function() {
event.preventDefault();
$('.row-fluid').animate({
scrollLeft: "-=200px"
}, "slow");
});
.row-fluid {
overflow: auto;
white-space: nowrap;
}
.row-fluid .col-lg-4 {
display: inline-block;
float: none;
overflow-y: scroll;
height: 700px;
}
.image-wrapper {
display: block;
width: 300px;
height: 200px;
background-color: black;
margin: 0 auto;
margin-bottom: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" style="overflow: auto">
<div class="row">
left
right
</div>
<div class="row-fluid">
<div class="col-lg-4">
</div>
<div class="col-lg-4">
</div>
<div class="col-lg-4">
</div>
<div class="col-lg-4">
</div>
<div class="col-lg-4">
</div>
<div class="col-lg-4">
</div>
</div>
</div>
PS I want to use bootstrap because eventually it will be responsive.
I believe you should think of this as a slider/carousel. You would need (in hierarchical order):
A container with overflow-x: hidden; position: relative.
A wrapper for the content, that moves within the container (position: absolute + jQuery animate on left/right CSS property, or even CSS transitions). >> this would be the .row in your example, but don't use .row-fluid as it will be absolutely positioned (it will mess up your .col widths).
There's a plethora of online content regarding sliders and carousels, you should check it out. You can also completely avoid the headaches and just go and use a JS library that will handle that for you.
In any way, I wouldn't rely on jQuery's .scroll() for left/right movement: this won't be handled well on mobile.
I would also recommend that you start with your mobile layout and extend it to larger viewports. Focus on the simplest UX possible and the rest will follow easily.
Also, making a responsive layout is only dealing with a couple of CSS breakpoints, you don't necessarily need Bootstrap for this.
Let me know if I need to clarify something! Good luck!
Related
I have two main buttons which each contain child buttons detail, on desktop everything works fine. I want for each parent sub buttons to be displayed below its parent, here what I have so far:
HTML
<div class="main-data">
<div class="main-data_butttons">
<div class="main-data_button-left">Trump</div>
<div class="main-data_button-right">Babab Yaga</div>
</div>
<div class="main-data-buttons-left_details">
<div class="main-data-buttons_details-first">Test</div>
<div class="main-data-buttons_details-second">Test</div>
<div class="main-data-buttons_details-third">Test</div>
<div class="main-data-buttons_details-fourth">Test</div>
</div>
<div class="main-data-buttons-right_details">
<div class="main-data-buttons_details-first">Test</div>
<div class="main-data-buttons_details-second">Test</div>
<div class="main-data-buttons_details-third">Test</div>
<div class="main-data-buttons_details-fourth">Test</div>
</div>
</div>
On the desktop looks something like this:
I want it to look like this on mobile:
On mobile two buttons are displayed when you click one of them it display hidden data all of this I managed to do but I can't figure out to make those sub buttons to display under each main button, right now everything is displayed below two main buttons, any help will be appreciated
Personally i'd rearrange that DOM a little so those main buttons were in blocks with its content. This way u can control the behavior with CSS better. You define the looks from the lowest resolution and progress your way up.
on low resolution you're basically done
on higher resolutions (defined by #media (min-width: 600px)) you float the main blocks next to each other
you can even add more blocks on higher resolutions, if you want, with another media query, for example #media (min-width: 1200px) and make .main-data { width: 33.333333% } and so on
The point is, it's not easy to rearrange DOM in CSS. At least not in your case. You can use javascript of course, but you would need some changes in DOM anyway.
var $mainDataButton = $('.main-data-button');
$mainDataButton.on('click', function() {
$(this).next().toggle();
});
* { margin: 0; padding: 0; }
.main-data-button,
.main-data-buttons div { display: inline-block; margin: 5px; border: 1px solid purple; padding: 10px; background: #fafafa; }
.main-data-button { padding: 30px; }
.main-data-buttons { display: none; }
#media (min-width: 600px) {
.main-data { float: left; width: 50%; }
.main-data-buttons { display: block !important; }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="main-data">
<div class="main-data-button">Main button left</div>
<div class="main-data-buttons">
<div class="main-data-buttons_details-first">Test</div>
<div class="main-data-buttons_details-second">Test</div>
<div class="main-data-buttons_details-third">Test</div>
<div class="main-data-buttons_details-fourth">Test</div>
</div>
</div>
<div class="main-data">
<div class="main-data-button">Main button right</div>
<div class="main-data-buttons">
<div class="main-data-buttons_details-first">Test</div>
<div class="main-data-buttons_details-second">Test</div>
<div class="main-data-buttons_details-third">Test</div>
<div class="main-data-buttons_details-fourth">Test</div>
</div>
</div>
I have inherited somebody else's problem. The HTML is all DIVs with floats, displays and positioning tweaks. The one thing I cannot change is the structured of the HTML DIVs. Nor do I wish to add any new javascript libraries. But I can add all the CSS I need to the existing DIVs.
Currently 3 DIVs are embedded as:
<DIV id="firstrow"> 1 </DIV>
<DIV id="secondrow">
<DIV> 2 </DIV>
<DIV> 3 </DIV>
</DIV>
Take a look at the graphic below. The problem with this is that as DIV1 grows down, the DIV3 gets bumped down. I wish to keep DIV3 fully justified from the top to bottom (as if STRETCH).
Without getting into how the current code combines DISPLAYS, FLOATS, and POSITIONING -- I think I need to erase all the CSS and replace with some FLEXBOX. But I cannot seem to get the right combination of FLEX properties to make DIV3 behave to stretch (instead of getting bumped down).
Fortunately, this only has to work for Chrome on Desktop (no mobile nor other browsers).
There you go IF width of div 3 is known and fixed value:
https://codepen.io/AugustinF/pen/qYBpmR
.wrapper {
position: relative;
border: 2px solid black;
}
#firstrow {
height: 100px;
margin-right: 200px;
background: green;
}
#secondrow {
}
#div2 {
float:left;
background: blue;
}
#div3 {
width: 200px;
position: absolute;
top:0;
right:0;
height: 100%;
background: red;
}
.clearfix:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
HTML:
<div class="wrapper clearfix">
<DIV id="firstrow"> 1 </DIV>
<DIV id="secondrow clearfix">
<DIV id="div2"> 2 </DIV>
<DIV id="div3"> 3 </DIV>
</DIV>
</div>
Using #Pete solution you can modify the HTML structure using javascript by placing this code at the end of the body tag:
<script>
document.getElementById('firstrow').appendChild(
document.getElementById('div2')
);
</script>
I want to put 2 different highcharts side by side in one page. One is pie chart and the other one is gauge chart. Can you please help me to organize this structure?
You can use float. More information about float is available here. Try if something like this works.
#chart1{
width: 50%; /* set width to 50% of page width */
float: left; /* Make the element go to the left */
}
#chart2{
width: 50%;
float: right;
}
Don't forget to add style="clear: both" to the next element! Good luck! Hope this helps!
One option is using a flexbox.
.container {
display: flex;
width: 100%;
height: 150px;
}
.chart1,
.chart2 {
width: 50%;
background-color: lightblue;
border: thin solid darkgray;
}
<div class="container">
<div class="chart1">chart 1</div>
<div class="chart2">chart 2</div>
</div>
You can add bootstrap classes like this
<div class="col-md-12">
<div class="col-md-6">
Chart 1
</div>
<div class="col-md-6">
Chart 2
</div>
</div>
So my question is how do I make a div push down everything that comes after it, even if the elements that come after have a fixed positions.
Let me explain the scenario:
I have the following structure:
<body>
<div class="top_menu">
</div>
<div class="content">
</div>
</body>
Where .top_menu has a position:fixed; and top:0;
Now using JavaScript I insert a new div right after <body> and wrap the rest in another div to end up with something that looks like this.
<body>
<div id="notice_bar">
</div>
<div id="wrap">
<div class="top_menu">
</div>
<div class="content">
</div>
</div>
</body>
Now is there a way to make the #notice_bar div always push down the #wrap div with all its content?
Changing the position:fixed; attribute of .top_menu is not an option because this script I’m working on should work on any given website.
I’m really running out of ideas here so any tips will be greatly appreciated. Thanks!
EDIT: Here is the specific scenario were I'm working on right now in case anyone feels generous enough to play arroudn with it :) http://mirlostudio.com/choeducators
If you want the notice bar to remain at the top, while the menu scrolls with the page you could use a little jQuery/javascript to toggle a class that adds fixed positioning to the menu:
Working Example
$(window).scroll(function() {
$('.top_menu').toggleClass('scrolling', $(window).scrollTop() > $('#wrap').offset().top);
});
.top_menu {
height: 20px;
width: 100%;
background: blue;
}
.content {
position: relative;
height: 600px;
background: grey;
}
.scrolling {
position: fixed;
top: 0px;
right: 8px;
left: 8px;
width: auto;
z-index: 100;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="notice_bar">Notice Bar</div>
<div id="wrap">
<div class="top_menu">Top Menu</div>
<div class="content">Content</div>
</div>
If you set the .wrap container to position: relative; - all elements inside the .wrap container that are absolutely positioned will be moved together with their parent container.
What I'd like to do is produce an HTML/CSS/JS version of the following. The gridlines and other aspects are not important. It's more of a question how to do the background databars.
(source: tech-recipes.com)
Make the bars as background images and position them to show values. eg. with a fixed column width of 100px:
<div style="background: url(bg.gif) -50px 0 no-repeat;">5</div>
<div style="background: url(bg.gif) -20px 0 no-repeat;">8</div>
If your columns have to be flexible size (not fixed, and not known at the time the page is produced), it's a bit trickier:
<style type="text/css">
.cell { position: relative; }
.cell .back { position: absolute; z-index: 1; background: url(bg.gif); }
.cell .value { position: relative; z-index: 2; }
</style>
<div class="cell">
<div class="back" style="width: 50%;"> </div>
<div class="value">5</div>
</div>
<div class="cell">
<div class="back" style="width: 80%;"> </div>
<div class="value">8</div>
</div>
A javascript-based solution like this cross-browser gradient might be a good start.
With some DHTML, you can make a bar with a given length.
I would use either the Grid component from Ext JS library or the DataTable component Yahoo's YUI library. The cross-browser compatibility, etc. work is done for you.