I'm looking to make a responsive html content carousel. As shown on the image below.
Trying to use jQuery Cycle2, for this but couldn't achieve the effect I was looking for. Searching for a plugin that would be able to do this I figured that maybe the simplest solution would be to try to use plain JavaScript/jQuery.
Found this topic jquery carousel - without a plugin
Right now I'm struggling to achieve this with the responsive elements.
Any help would be greatly appreciated - I'm not saying this has to be without a plugin just something that's not to hard to implement and maybe without too much overhead.
Use "bootstrap" : http://getbootstrap.com/css/#grid
You can achieve yr desired style by just writing..
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4> YOUR FIRST BOX HERE</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4> YOUR SECOND BOX HERE</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4>YOUR THIRD BOX HERE</div>
</div>
</div>
Related
I'm a writer on a website. And I am copying some tables from another website for a presentation. However when I copy they look like this:
It looks like this
And I changed
<div class="col-lg-3 col-md-4 col-sm-12 col-xs-12"></div>
to
this
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"></div>
After the resize
And it worked. However I cannot do this manually because it includes over 2000 tables. How can I resize them automatically? I'm a newbie and don't know much.
Try the Find and replace text functionallity in your editor. In VS code and Notepad++ this can be found using CTRL+H.
As the search string, fill in the values of the class from the table that needs to be resized, in your case that would be col-lg-3 col-md-4 col-sm-12 col-xs-12. As the replacement string, fill in the new class values, that would be col-lg-12 col-md-12 col-sm-12 col-xs-12. Look for a button that says Replace all occurrences or Replace all.
Remember to make a backup of your file when doing these kind of things.
I use bootstrap 3.3.7 for its grid and responsiveness in my web app (Flask App). It works pretty well with all the plotly subplots I created except for a single plot. When the browser is in full-page or if I resize a little bit, I don't have any problem :
However, if I resize too much the plot exceeds the section height and generates a white space.
I have tried to add a margin-right, a padding-right, to change the class of the div col-lg-6 col-md-6 col-sm-6 into col-lg-6 col-md-6 col-sm-6 col-xs-6 (the chart become very very small), to change the margin inside the javascript code that produces the plot...
And as you can see the subplots in the below the GREEKS title are well displayed whatever the resize applied...
Here is the html code for this section :
<section id="payoff" class="background-img">
<!-- Table code here -->
<div class="container-fluid" id="results">
<div class="row" style="padding-top: 0px; padding-bottom: 30px;">
<div class="col-lg-6 col-md-6 col-sm-6" style="padding-top:40px;">
<div class="plotly-graph-div" id="plot-payoff"></div>
</div>
</div>
</div>
</section>
Any help would be really appreciated! Thanks a lot
This may seem weird, I want to create a header as simple as this of Stack Overflow so I've been struggling writing the right codes.
<template name="DashboardLayout">
<hr>
<div class="row">
<div col-md-8 col-md-offset-9><center><input type="text" name="search" placeholder="Search.."></center> </div>
<div col-md-4 ><center><label>Profile</label></center> </div>
<div col-md-4 ><center><label>Settings</label></center> </div>
<div col-md-4 ><center><label>Videos</label></center> </div>
<div col-md-4 ><center><div class="dropdown">
<div class="dropbtn">Dropdown</div>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div></center> </div>
</div>
<hr>
</template>
How can I achieve this using Bootstrap?
What are you asking for ? to give you the full HTML CSS and JS is needed ?
Check this link in Bootstrap the default example es basically what you want.
Logo, links (text or icon links), search bar and dropdown.
All responsive.
Then just play around the styles to get a better copy of this.
What you can do is add some custom classes for existing tags and write your own styles for corresponding classes.
or If you need simple customised version of this you can use this to build it easier
or this one https://work.smarchal.com/twbscolor/
read this if you want even mature look for your nav bar http://blog.jetstrap.com/2013/07/less-like-bootstrap/
I'm trying to use Packery to build a dashboard with draggable widgets (using Draggabilly for dragging). The widgets have their width determined by Bootstrap classes, as to be responsive over various screen sizes. I'm also using jQuery to grab elements and stuff.
CodePen Link
HTML Snippet
<div class='container'>
<div class='row' id='dashboard-root'>
<div class='dashboard-item col-xs-12 col-sm-6 col-md-4 col-lg-3'>
Some content</br></br>
</div>
<div class='dashboard-item col-xs-12 col-sm-6 col-md-4 col-lg-3'>
Some other content<br>
</div>
<div class='dashboard-item col-xs-12 col-sm-6 col-md-4 col-lg-3'>
Even more content<br><br><br><br>
</div>
<div class='dashboard-item col-xs-12 col-sm-12 col-md-8 col-lg-6'>
Some wide content is super wide, even wider than you even thought possible, like this is so crazy wide you wouldn't believe it.
</div>
</div>
</div>
CSS Snippet
.dashboard-item{
border-style: solid ;
}
.container{
border-style: dashed ;
}
JavaScript Snippet
var $root = $('#dashboard-root') ;
$root.packery({
itemSelector: '.dashboard-item'
});
$root.find('.dashboard-item').each(function(i, itemElem){
var draggie = new Draggabilly(itemElem) ;
$root.packery('bindDraggabillyEvents', draggie);
});
As it stands, the widgets are draggable, but I need them to snap to some sort of grid. Currently, they can be placed anywhere, which makes positioning weird.
I'm trying to figure out how to make them snap to Bootstrap's grid columns. Ideally, I'd want the elements to snap to the nearest col-*-1, I think. Not sure what to do with the height though.
I tried playing with setting the columnWidth to a selector for a dummy element, but I couldn't get it to work.
I've only just started learning so please stick with me and I'll try provide as much info as I can.
Using Bootstrap 3 I have been attempting to adjust a number of content areas so that they have the same height. I have 4 per row with an unspecified amount of columns (I'm looping through a php array to determine this). Essentially no matter how many content areas I need to display they should all use the same height, or at the very least the same height as the other three on it's row.
I have been using this jquery library > https://github.com/mattbanks/jQuery.equalHeights > which works great but whenever I resize the page the heights of the content areas don't update (if I drag the screen to a new size and hit refresh the heights re-adjust to the correct position)
I have also looked at a few other solutions such as > Twitter Bootstrap - Same heights on fluid columns but this doesn't seem to work when I adjust it for multiple rows.
Any help would be appreciated, whether I should be using a javascript solution or if there's anything I can be doing with CSS. Keeping it mind I need the heights to be consistent and for it to re-adjust on screen resize. I would prefer to use Bootstrap 3, but if a solution is available for 2 I will use that version.
<div class = "container">
<div class="row">
<div id="equalheight">
<div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
<div class="info-block"><!-- BODY BOX-->
<p>one line of copy</p>
</div>
</div>
<div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
<div class="info-block"><!-- BODY BOX-->
<p>lots and lots of copy lots and lots of copy lots and lots of copy lots and lots of copy</p>
</div>
</div>
<div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
<div class="info-block"><!-- BODY BOX-->
<p>one line of copy</p>
</div>
</div>
<div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
<div class="info-block"><!-- BODY BOX-->
<p>one line of copy</p>
</div>
</div>
</div>
</div>
Above is my html, the second content area has the large amount of copy
<script>
$('#equalheight div').equalHeights();
</script>
<script>
$(window).resize(function(){
$('#equalheight div').equalHeights();
});
$(window).resize();
</script>
Above is my Javascript, calling the before mentioned library.
Thanks for any help / advice
You can try using CSS negative margins (no jQuery needed)..
.demo{
margin-bottom: -99999px;
padding-bottom: 99999px;
background-color:#efefef;
}
#equalheight {
overflow: hidden;
}
http://bootply.com/92230
EDIT - another option
Here is another example using CSS3 flexbox spec: http://www.bootply.com/126437
Bootstrap team developped a CSS class .row-eq-height which is exactly what you need. See here for more.
Just add this class on your current row like this:
<div class="row row-eq-height">
your columns
</div>
Warning: You have to add a new div.row.row-eq-height each 12 columns
You can use this plugin. It works pretty good.