I writing a website by using Bootstrap and jQuery. Now, i have a horizontal list of div at the bottom of webpage. It's act like the Slide bar in Microsoft Powerpoint. The number is unchange element. If i got 6 record from server, it will generate 6 slide in the list. User can drag the "DIV" box and move to another position. Just like the normal flow of Sortable plugin.
Expected result:
I tried two way to code this "slide bar". However, i cannot build the expected result.
Concept 1:
Split two row to perform. but will have two scrollable.
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-12">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</div>
<div class="row">
<div class="col-md-12 sortable-list">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</div>
</div>
Concept 2:
use "items". However, it will exist some weird issue when can drag the box. slideNumber div will move to wrong position and box will disappear
$("sortable-list").sortable({
items:'.box'
});
.slideNumber{
position: absolute;
top:0px;
left:15px;
}
.box{
position: absolute;
top:30px;
left:0;
}
/**roughly css**/
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-12 sortable-list">
<div>
<div class="slideNumber">1</div>
<div class="box"></div>
</div>
<div>
<div class="slideNumber">2</div>
<div class="box"></div>
</div>
<div>
<div class="slideNumber">3</div>
<div class="box"></div>
</div>
<div>
<div class="slideNumber">4</div>
<div class="box"></div>
</div>
<div>
<div class="slideNumber">5</div>
<div class="box"></div>
</div>
<div>
<div class="slideNumber">6</div>
<div class="box"></div>
</div>
</div>
</div>
</div>
</div>
Anyone can give me a hint to build this slide bar?
This should work:
$( function() {
$(".sortable-list")
.sortable()
.disableSelection();
} );
.container > div {
padding:0 30px 0px 30px;
display:inline-block;
}
.sortable-list > div {
margin:1px;
display:inline-block;
padding:30px;
background:#777;
border:1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"><script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-12 container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</div>
<div class="row">
<div class="col-md-12 sortable-list">
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
</div>
</div>
</div>
</div>
.row
{
width:100%;
}
.col-md-12,.slideNumber
{
width:100%;
display:flex;
margin-right:50px;
}
.box
{
width:50px;
height:50px;
background:gray;
text-align:center;
line-height: 50px;
vertical-align: middle;
}
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-12 sortable-list">
<div>
<div class="slideNumber">1</div>
<div class="box">Div</div>
</div>
<div>
<div class="slideNumber">2</div>
<div class="box">Div</div>
</div>
<div>
<div class="slideNumber">3</div>
<div class="box">Div</div>
</div>
<div>
<div class="slideNumber">4</div>
<div class="box">Div</div>
</div>
<div>
<div class="slideNumber">5</div>
<div class="box">Div</div>
</div>
<div>
<div class="slideNumber">6</div>
<div class="box">Div</div>
</div>
</div>
</div>
</div>
</div>
Related
Im trying to make a div which is inside another scrollable div fixed only y axis. I have tried a few things but the navbar keeps scrolling x axis aswell. I want it to be fixed only y axis and when scrolled x axis the nabar should scroll with it
Heres my code https://jsbin.com/qewopukuwo/2/edit?html,css,output
div.main {
width:90%;
height:400px;
overflow: scroll;
white-space: nowrap;
}
div.nav {
position:fixed;
background:red;
padding:10px;
}
div.row {
margin-bottom:10px;
}
div.content {
display:inline-block;
width:50px;
background:blue;
color:white;
padding:20px;
text-align:center;
}
<div class="main">
<div class="nav">scrollable nav bar</div>
<div class="row">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
<div class="content">5</div>
<div class="content">6</div>
<div class="content">7</div>
</div>
<div class="row">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
<div class="content">5</div>
<div class="content">6</div>
<div class="content">7</div>
</div>
<div class="row">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
<div class="content">5</div>
<div class="content">6</div>
<div class="content">7</div>
</div>
<div class="row">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
<div class="content">5</div>
<div class="content">6</div>
<div class="content">7</div>
</div>
<div class="row">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
<div class="content">5</div>
<div class="content">6</div>
<div class="content">7</div>
</div>
<div class="row">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
<div class="content">5</div>
<div class="content">6</div>
<div class="content">7</div>
</div>
<div class="row">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
<div class="content">5</div>
<div class="content">6</div>
<div class="content">7</div>
</div>
</div>
make the follwing changes to the div.main css
height:100%;
overflow-x: scroll;
This would make the Y axis stretch to full height of contents and scroll only x axis.
I have a hidden directory (.directory) with several divs (.content) and different content in it.
Now on pageload, I want to randomly pick a div (.content) from the directory and place it in the lower, visible divs (.box).
The hidden directory has more divs (.content) than should be shown at the end in the visible divs (.box). For example, I have 20 hidden content divs, but just randomly 3 should be shown.
So my solution would be, that JS counts on pageload, how much divs named ".box" and then randomly pick the counted amount of divs named ".content" from the directory and place in the divs named ".box". Would that be the right way?
But I really have no idea, how to do that :D
I have prepared a fiddle: https://jsfiddle.net/m5sqwrpg/4/
Here is the HTML
<div class="directory">
<div class="content">
<div class="headline">Headline A</div>
<div class="text">Some kind of Content</div>
</div>
<div class="content">
<div class="headline">Headline B</div>
<div class="text">Some kind of Content</div>
</div>
<div class="content">
<div class="headline">Headline C</div>
<div class="text">Some kind of Content</div>
</div>
<div class="content">
<div class="headline">Headline D</div>
<div class="text">Some kind of Content</div>
</div>
<div class="content">
<div class="headline">Headline E</div>
<div class="text">Some kind of Content</div>
</div>
<div class="content">
<div class="headline">Headline F</div>
<div class="text">Some kind of Content</div>
</div>
</div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
And the CSS:
.directory {
display: none;
}
.content {
margin-bottom: 20px;
border-bottom: 1px solid black;
padding-bottom: 10px;
}
Thank you so much!
Here is something that should get you started:
$(document).ready(function(){
$(".box").each(function(){
var contentDivs = $(".directory .content");
var contentToPick = Math.floor(Math.random()*(contentDivs.length));
$(contentDivs[contentToPick]).appendTo($(this));
});
});
.directory {
display: none;
}
.content {
margin-bottom: 20px;
border-bottom: 1px solid black;
padding-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.0.min.js"></script>
<div class="directory">
<div class="content">
<div class="headline">Headline A</div>
<div class="text">Some kind of Content</div>
</div>
<div class="content">
<div class="headline">Headline B</div>
<div class="text">Some kind of Content</div>
</div>
<div class="content">
<div class="headline">Headline C</div>
<div class="text">Some kind of Content</div>
</div>
<div class="content">
<div class="headline">Headline D</div>
<div class="text">Some kind of Content</div>
</div>
<div class="content">
<div class="headline">Headline E</div>
<div class="text">Some kind of Content</div>
</div>
<div class="content">
<div class="headline">Headline F</div>
<div class="text">Some kind of Content</div>
</div>
</div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
I don't guarantee it will work the way you envision, so it will be good to give it a proper test.
It should basically pull a random div from the ".directory" div for each ".box".
It relies on the fact, that when we select a div from ".directory" we actually remove it from ".directory" to put it in ".box" so even if the random function returns the same index, on the second pass, the div there will be different.
EDIT : #Pavel Donchev solution is better :)
It's better for you to change the CSS style of your elements to display them, or not.
To choose a define number of random elements, you can do it like this :
function randomContent(numberOfElements){
var i = 0;
var randomElements = $(".content").get().sort(function() {
return Math.round(Math.random()) - 0.5;
}).slice(0, numberOfElements);
while(i < randomElements.length) {
if($(randomElements[i]).hasClass('show')){
break;
}
else{
$(randomElements[i]).addClass('show');
i++;
}
}
}
randomContent(3);
.content {
display: none;
margin-bottom: 20px;
border-bottom: 1px solid black;
padding-bottom: 10px;
}
.show{
display: block !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="directory">
<div class="content">
<div class="headline">Headline A</div>
<div class="text">Some kind of Content</div>
</div>
<div class="content">
<div class="headline">Headline B</div>
<div class="text">Some kind of Content</div>
</div>
<div class="content">
<div class="headline">Headline C</div>
<div class="text">Some kind of Content</div>
</div>
<div class="content">
<div class="headline">Headline D</div>
<div class="text">Some kind of Content</div>
</div>
<div class="content">
<div class="headline">Headline E</div>
<div class="text">Some kind of Content</div>
</div>
<div class="content">
<div class="headline">Headline F</div>
<div class="text">Some kind of Content</div>
</div>
</div>
Working JSFiddle : https://jsfiddle.net/2m9tdgn2/
Hi as per undersanding below code will solve your problem easily just put that code under script tag. also include jquery.min.js in your html. to avoide $ is undefined :)
$(document).ready(function(){
drawRandomDivContent();
});
function drawRandomDivContent()
{
var container=$(".content");
var array=[];
var dataarray=[]
for(var i=0;i<container.length;i++)
{
var number=getRandomInt(container.length);
if($.inArray(number,array)==-1)
{
var selectedDiv=container[number];
dataarray.push(selectedDiv);
array.push(number);
if(array.length==3)
break;
}
}
var destinationdiv=$(".box");
for(var i=0;i<dataarray.length;i++)
destinationdiv[i].innerHTML=dataarray[i].innerHTML;
}
function getRandomInt(max) {
return Math.floor(Math.random() * Math.floor(max));
}
I'm trying to make the navigation sidebar on my website move down with the browser view via Bootstrap's Affix plugin however it refuses to follow the view and just stays at the top.
This is the structure I have for my HTML:
<div id="page-wrapper">
<div class="container">
<div class="row">
<div id="navigation-affix" data-spy="affix" data-offset-top="20" data-offset-bottom="200">
<div class="col-xs-2" id="navigation-wrapper">
<div class="inner">
<div class="row">
<div class="col-xs-12">
<img src="images/me.png" alt="Liam Potter" id="picture-me" class="img-responsive">
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div id="navigation">
Home
Portfolio
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-10" id="content-wrapper">
<div class="inner">
</div>
</div>
</div>
</div>
<div id="page-push"></div>
</div>
<footer>
<div class="container">
</div>
</footer>
Source: https://jsfiddle.net/tbejd5en/1/
Any thoughts?
You can just add a position:fixed to your id #navigation-affix and add col-xs-offset-2 to your id #content-wrapper
div#navigation-affix {
position: fixed !important;
}
Here is fiddle: https://jsfiddle.net/tbejd5en/5/
You can just add a position:fixed to your id #navigation
HTML
<div class="row">
<div class="col-xs-12">
<div id="navigation">
Home
Portfolio
</div>
</div>
</div>
CSS
div#navigation {
text-align: right;
padding-top: 10px;
position: fixed;
}
DEMO
https://jsfiddle.net/tbejd5en/2/
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 9 years ago.
Improve this question
I have a requirement of toggling the color of a clicked <div> from red to green & green to red. I am using jquery in my page. Please suggest me the best possible code to fulfill the requirement.
My code is as follows:
<htmL>
<head>
<script src="jquery-1.10.2.js">
window.onload = initPage;
function initPage() {
}
function tileclick() {
}
</script>
<style>
div.table{
display: table;
}
div.row{
display: table-row;
border-style:solid;
border-color: black;
border-width:15px;
padding-top:35px;
padding-bottom:35px;
padding-right:50px;
padding-left:50px;
margin-top:25px;
margin-bottom:25px;
margin-right:50px;
margin-left:50px;
}
div.cell{
display: table-cell;
border-style: solid;
border-width:15px;
padding-left: 30px;
padding-right: 30px;
padding-top: 30px;
padding-bottom: 30px;
font-weight:5000;
font-size:200%;
background: #00FF00;
}
</style>
</head>
<body>
<div id="table" class="table">
<div id="r1" class="row">
<div id="sys55" class="cell">55
</div>
<div id="sys56" class="cell">56
</div>
<div id="sys57" class="cell">57
</div>
<div id="sys58" class="cell">58
</div>
<div id="sys59" class="cell">59
</div>
<div id="sys60" class="cell">60
</div>
<div id="sys61" class="cell">61
</div>
<div id="sys62" class="cell">62
</div>
<div id="sys63" class="cell">63
</div>
<div id="sys64" class="cell">64
</div>
<div id="sys65" class="cell">65
</div>
</div>
<div id="r2" class="row">
<div id="sys54" class="cell">54
</div>
<div id="sys53" class="cell">53
</div>
<div id="sys52" class="cell">52
</div>
<div id="sys51" class="cell">51
</div>
<div id="sys50" class="cell">50
</div>
<div id="sys49" class="cell">49
</div>
<div id="sys48" class="cell">48
</div>
<div id="sys47" class="cell">47
</div>
<div id="sys46" class="cell">46
</div>
<div id="sys45" class="cell">45
</div>
<div id="sys44" class="cell">44
</div>
</div>
<div id="r3" class="row">
<div id="sys33" class="cell">33
</div>
<div id="sys34" class="cell">34
</div>
<div id="sys35" class="cell">35
</div>
<div id="sys36" class="cell">36
</div>
<div id="sys37" class="cell">37
</div>
<div id="sys38" class="cell">38
</div>
<div id="sys39" class="cell">39
</div>
<div id="sys40" class="cell">40
</div>
<div id="sys41" class="cell">41
</div>
<div id="sys42" class="cell">42
</div>
<div id="sys43" class="cell">43
</div>
</div>
<div id="r4" class="row">
<div id="sys32" class="cell">32
</div>
<div id="sys31" class="cell">31
</div>
<div id="sys30" class="cell">30
</div>
<div id="sys29" class="cell">29
</div>
<div id="sys28" class="cell">28
</div>
<div id="sys27" class="cell">27
</div>
<div id="sys26" class="cell">26
</div>
<div id="sys25" class="cell">25
</div>
<div id="sys24" class="cell">24
</div>
<div id="sys23" class="cell">23
</div>
<div id="sys22" class="cell">22
</div>
</div>
<div id="r5" class="row">
<div id="sys11" class="cell">11
</div>
<div id="sys12" class="cell">12
</div>
<div id="sys13" class="cell">13
</div>
<div id="sys14" class="cell">14
</div>
<div id="sys15" class="cell">15
</div>
<div id="sys16" class="cell">16
</div>
<div id="sys17" class="cell">17
</div>
<div id="sys18" class="cell">18
</div>
<div id="sys19" class="cell">19
</div>
<div id="sys20" class="cell">20
</div>
<div id="sys21" class="cell">21
</div>
</div>
<div id="r6" class="row">
<div id="sys10" class="cell">10
</div>
<div id="sys09" class="cell">09
</div>
<div id="sys08" class="cell">08
</div>
<div id="sys07" class="cell">07
</div>
<div id="sys06" class="cell">06
</div>
<div id="sys05" class="cell">05
</div>
<div id="sys04" class="cell">04
</div>
<div id="sys03" class="cell">03
</div>
<div id="sys02" class="cell">02
</div>
<div id="sys01" class="cell">01
</div>
</div>
</div>
</body>
</html>
My initial page should appear green in color as shown below.
Each block should toggle green to red when clicked & vice-versa.
Please help me achieve this requirement.
You can use a start with selector to match all you divs that id starts with sys and then use toggleClass to switch the classes.
Code:
$("div[id^='sys']").click(function(){
$(this).toggleClass("cell cell2");
});
Demo: http://jsfiddle.net/IrvinDominin/tsL8a/
Use toggleClass() in jquery
<style>
.red{
background : red;
}
</style>
$(function() {
$(".cell").on("click" , function(e) {
$(this).toggleClass("cell red");
});
});
You can use jQuery toggleClass method (See the doc).
Add a class for red cells like :
.red_cell {
background-color: red;
}
Then something like :
$('.cell').click(function() {
$(this).toggleClass('red_cell');
});
use:
$(".cell").click(function(){
var clr = $( this ).css("background-color").toString();
var clr = (clr == "rgb(0, 255, 0)" ? "rgb(255,0,0)" : "rgb(0, 255, 0)");
$(this).css({
"background":""+clr+""
});
});
without changing css markup.
DEMO. hope it'll help you. cheers !
$(".cell").click(function(){
if($(this).hasClass('red')) {
$(this).removeClass('red');
}else{
$(this).addClass('red');
}
});
and simply add a class to CSS.
In my code i'm using bootstrap (navs) like this in my html :
{{extend 'layout.html'}}
<div class="row" id="container_R_economics">
<div class="span12">
<div class="dropdown ">
<select class=" btn-Action" id="groupe" >
<option value="">Awaiting data...</option>
</select>
</div>
</div>
<div class="span3" id="reportingContainer"></div>
<div class="span7 offset1" id="dashboard">
<div id="combochart"></div>
<div id="control" style='height:50px'></div>
</div>
</div>
<div class="tabbable" >
<ul id="ul_tabs" class="nav nav-tabs"></ul>
<div class="tab-content" id="graphTabsContent"></div>
</div>
<div class="row" id="container_R_physics">
<div class="span4 offset4" id="dashboard_div">
<div id="chart_div" style='width: 600px; height: 300px;'></div>
<div id="filter_div" style='width: 600px; height: 80px;'></div>
</div>
when i use bootstrap (navs) in my page web in (<div class="row" id="container_R_economics">) and (<div class="row" id="container_R_physics">) i have a scrolling, how i cant deactivate it?
have you tried setting the overflow to hidden:
.yourclass-name{
overflow:hidden;
}