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));
}
Related
I must create table without using <table>; only <div>. How I can set width (in percent) on some blocks so that others divide the rest of the space equally.
I can do it with JS but I think its possible with html/css only.
With flexbox it's rather easy to create a table like structure. Specify a flex basis for the table cells (boxes) + a grow and shrink to make them resize properly.
Check this fiddle with the demo :)
https://jsfiddle.net/xs0pmgbL/
HTML code:
<div id="container">
<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 class="box">
</div>
<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 class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
And the CSS code:
#container {
display: flex;
flex-wrap: wrap;
}
.box {
border: 1px solid gray;
background: orange;
flex: 1 1 200px;
height: 100px;
}
Heyo,
I cant figure out how to make a Script work like this: I want to have a Button that changes the Class of div's on click. But I don't want to make it change all the div's at the same time. I only want to change the first div on the first click, the second div on the second click and so on and so forth.
I've allredy tryed it but failed. Heres the code:
$('button').click(function() {
// give first $(.div).addClass('active') on first click, second div on second click ...
});
.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
<div class="inner">
<div class="div">Somebody</div>
</div>
<div class="inner">
<div class="div">once</div>
</div>
<div class="innner">
<div class="div">told</div>
</div>
<div class="inner">
<div class="div">me</div>
</div>
<button>Next</button>
</div>
With the .eq method, you can pass the index of the element you want, and the jQuery collection of only that element will be returned. Start with an index of 0, increment it on every button click, and add the class to the appropriate element:
let i = 0;
$('button').click(function() {
$('.div').eq(i).addClass('active');
i++;
});
.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
<div class="inner">
<div class="div">Somebody</div>
</div>
<div class="inner">
<div class="div">once</div>
</div>
<div class="innner">
<div class="div">told</div>
</div>
<div class="inner">
<div class="div">me</div>
</div>
<button>Next</button>
</div>
Here a little one liner that grabs the first element that doesn't has the active class.
$('button').click(function() {
$('.div:not(.active):first').addClass('active');
});
.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
<div class="inner">
<div class="div">Somebody</div>
</div>
<div class="inner">
<div class="div">once</div>
</div>
<div class="innner">
<div class="div">told</div>
</div>
<div class="inner">
<div class="div">me</div>
</div>
<button>Next</button>
</div>
You can find the first element and add the active class on that. Then rotate the class so on.
$('button').click(function() {
var activeElem = $('.outer').find('.inner.active');
if(activeElem.length){
activeElem.removeClass('active');
activeElem.next('.inner').addClass('active');
} else {
$('.outer').find('.inner').first().addClass('active');
}
});
.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
<div class="inner">
<div class="div">Somebody</div>
</div>
<div class="inner">
<div class="div">once</div>
</div>
<div class="inner">
<div class="div">told</div>
</div>
<div class="inner">
<div class="div">me</div>
</div>
<button>Next</button>
</div>
Increment for each click and apply:
var count = 0;
$('button').click(function() {
$('.inner:eq('+count+')').addClass('active');
count++;
});
.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
<div class="inner">
<div class="div">Somebody</div>
</div>
<div class="inner">
<div class="div">once</div>
</div>
<div class="inner">
<div class="div">told</div>
</div>
<div class="inner">
<div class="div">me</div>
</div>
<button>Next</button>
I have 2 divs on a block of content, one active and the other one is hidden.
I want to click on the div, hide the first one and show the second one.
Then when I click on the second one to hide it and show the first one.
I have however 12 more blocks with the same estructure and classes that need to have this functionality.
For the record I haven't make it work at all not even on one div.
<div class="feature-list-item">
<div class="first-one">
<div class="imgbox">
<p>some content<p/>
</div>
</div>
<div class="second-one">
<div class="imgbox">
<p>some content<p/>
</div>
</div>
And here is css:
.first-one {display:block;}
.second-one {display:none;}
I want to consider the easiest approach jquery, javascript it doesn't matter
Here is an example with isolated lists:
$(document).ready(function(){
$('.block').on('click', '.item', function(e){
$(this)
.removeClass('active')
.siblings('.item')
.addClass('active');
});
});
.blue .item {
background: blue;
}
.green .item {
background: green;
}
.item {
padding: 10px;
margin: 10px;
color: white;
display: none;
}
.item.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block blue feature-list-item">
<div class="item active first-one">
<div class="imgbox">
<p>Box 1<p/>
</div>
</div>
<div class="item second-one">
<div class="imgbox">
<p>Box 2<p/>
</div>
</div>
</div>
<div class="block green feature-list-item">
<div class="item active first-one">
<div class="imgbox">
<p>Box 3<p/>
</div>
</div>
<div class="item second-one">
<div class="imgbox">
<p>Box 4<p/>
</div>
</div>
</div>
This is the solution I found. Hide clicked and show next. I hope you are trying to show next but not specific one, if specific you trying to show then you gonna change the code.
DEMO HERE
HTML
<div class="click show">
<div class="imgbox">
<p>some content<p/>
</div>
</div>
<div class="click hidden">
<div class="imgbox">
<p>some content<p/>
</div>
</div>
<div class="click hidden">
<div class="imgbox">
<p>some content<p/>
</div>
</div>
<div class="click hidden">
<div class="imgbox">
<p>some content<p/>
</div>
</div>
<div class="click hidden">
<div class="imgbox">
<p>some content<p/>
</div>
</div>
<div class="click hidden">
<div class="imgbox">
<p>some content<p/>
</div>
</div>
CSS
.show{
width:200px;
height:100px;
background-color:red;
}
.hidden{
display:none;
}
JS
$(document).ready(function(){
$('.click').click(function(){
$(this).removeClass('show');
$(this).addClass('hidden');
$(this).next('.hidden').addClass('show');
$(this).next('.hidden').removeClass('hidden');
});
});
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>
I searched a lot on Stackoverflow, solution for my question, but no one of them helped me. I have a multiple show/hide (toggle) content, with same id's and I want to make, that the only one of them, what I need, opens, not all of them. There's my JSFiddle You can test it.
This is my JavaScript
$("#view").click(function(){
$('.hidden-content').slideToggle(500).toggleClass("active");
});
You cannot have duplicate id attributes within a single document. When you do only the first element with the given id is recognised; hence the issue you've seen.
Instead change the view elements to use a class, then use the this reference within the click event handler to traverse the DOM to find the related .hidden-content element and toggle it. Try this:
$(".view").click(function() {
$(this).closest('.div').find('.hidden-content').slideToggle(500).toggleClass("active");
});
.div {
width: 400px;
}
.content {
padding: 10px;
}
.view {
color: red;
cursor: pointer;
}
.hidden-content {
display: none;
}
.hidden-content .active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
It is a bad practice to use same id for more than one elements.
You can try the following
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
and your jquery will look like the following
$(".view").click(function(){
$(this).parent('.content').next('.hiddencontent').slideToggle(500).toggleClass("active");
});
You should replace the id to class. And for accordion, you can use like below.
HTML,
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
Js,
<script>
$(document).ready(function(){
$(".hidden-content").hide();
$(".view").on('click', function(){
$(this).parents().parents().find(".hidden-content").slideToggle(500).toggleClass("active");
if($(this).parents().parents().siblings().find(".hidden-content").hasClass('active')){
$(this).parents().parents().siblings().find(".hidden-content").removeClass('active');
$(this).parents().parents().siblings().find(".hidden-content").hide();
}
});
});
</script>
You can change your click event as follows to make it work.
$("div[id='view']").click(function() {
$(this).parent().next().slideToggle(500).toggleClass("active");
});
Note: You shouldn't have the same id for multiple elements, id attribute value should be unique why because the id attribute is used to identify an element uniquely in the DOM. You can have the same class name for different elements.
Please refer this answer it provides more information on how things work when multiple elements have the same id attribute value.
$("div[id='view']").click(function() {
$(this).parent().next().slideToggle(500).toggleClass("active");
});
.div {
width: 400px;
}
.content {
padding: 10px;
}
#view {
color: red;
cursor: pointer;
}
.hidden-content {
display: none;
}
.hidden-content .active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="div">
<div class="content">
<div id="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
<div class="div">
<div class="content">
<div id="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
<div class="div">
<div class="content">
<div id="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
<div class="div">
<div class="content">
<div id="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
$(".view").click(function() {
$(this).closest('.div').find('.hidden-content').slideToggle(200).toggleClass("active");
});
.div {
width: 400px;
}
.content {
padding: 10px;
}
.view {
color: red;
cursor: pointer;
}
.hidden-content {
display: none;
}
.hidden-content .active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>