I'm having a div which contains 10 images, when any one visit or reload the page any of the 6 images should be displayed in a random arrangement. Finally I come with random arrangements but I can't control the number of images and also the images are going out of the div. Is there any way to show 6 different images when in load the website every time
$(".image-box").html($(".image-box").children().sort(function() { return 0.5 - Math.random() }));
});
.image-box {
height: 100%;
border: 1px solid #e5e5e5;
border-radius: 8px;
margin-top: 10px;
white-space: nowrap;
overflow: auto;
}
.image-box-title {
padding: 10px;
width: 2200px;
border-bottom: 1px solid #e5e5e5;
border-top: 0p;
border-right: 0px;
border-left: 0px;
border-radius: 8px 8px 0px 0px;
background-color: #583d72;
color: #ff8e71;
}
.tester {
display: inline-block;
width: 212px;
height: 200px;
margin: 5px 0 0 5px;
}
#a {
background-color: black;
}
#b {
background-color: yellow;
}
#c {
background-color: red;
}
#d {
background-color: green;
}
#e {
background-color: pink;
}
#f {
background-color: skyblue;
}
#g {
background-color: orange;
}
#h {
background-color: grey;
}
#i {
background-color: darkgreen;
}
#j {
background-color: darkblue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="image-box" id="images">
<div class="image-box-title">Images</div>
<div id="a" class="tester"></div>
<div id="b" class="tester"></div>
<div id="c" class="tester"></div>
<div id="d" class="tester"></div>
<div id="e" class="tester"></div>
<div id="f" class="tester"></div>
<div id="g" class="tester"></div>
<div id="h" class="tester"></div>
<div id="i" class="tester"></div>
<div id="j" class="tester"></div>
</div>
You could define with CSS that all images are hidden with display: none and only the first 6 images are visible (first child is the title):
.tester:nth-child(2),
.tester:nth-child(3),
.tester:nth-child(4),
.tester:nth-child(5),
.tester:nth-child(6),
.tester:nth-child(7) {
display: inline-block;
}
Furthermore your title has a width of 2200px which seems to be unnecessary because it has display: block defined. Therefor you could omit the width (that was the reason for the images going out of the div).
Because the title is also a child of the image box it is also shuffled. Therefor you should make it the first child after shuffling:
$(".image-box").prepend($(".image-box-title").detach());
Working example:
$(".image-box").html($(".image-box").children().sort(function() {
return 0.5 - Math.random()
}));
$(".image-box").prepend($(".image-box-title").detach());
.image-box {
height: 100%;
border: 1px solid #e5e5e5;
border-radius: 8px;
margin-top: 10px;
white-space: nowrap;
overflow: auto;
}
.image-box-title {
padding: 10px;
/*width: 2200px; not necessary? */
border-bottom: 1px solid #e5e5e5;
border-top: 0p;
border-right: 0px;
border-left: 0px;
border-radius: 8px 8px 0px 0px;
background-color: #583d72;
color: #ff8e71;
}
.tester {
display: none;
width: 212px;
height: 200px;
margin: 5px 0 0 5px;
}
#a {
background-color: black;
}
#b {
background-color: yellow;
}
#c {
background-color: red;
}
#d {
background-color: green;
}
#e {
background-color: pink;
}
#f {
background-color: skyblue;
}
#g {
background-color: orange;
}
#h {
background-color: grey;
}
#i {
background-color: darkgreen;
}
#j {
background-color: darkblue;
}
.tester:nth-child(2),
.tester:nth-child(3),
.tester:nth-child(4),
.tester:nth-child(5),
.tester:nth-child(6),
.tester:nth-child(7) {
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="image-box" id="images">
<div class="image-box-title">Images</div>
<div id="a" class="tester"></div>
<div id="b" class="tester"></div>
<div id="c" class="tester"></div>
<div id="d" class="tester"></div>
<div id="e" class="tester"></div>
<div id="f" class="tester"></div>
<div id="g" class="tester"></div>
<div id="h" class="tester"></div>
<div id="i" class="tester"></div>
<div id="j" class="tester"></div>
</div>
Related
I want to move div after another div, if outer div's width is less then 800
$(function() {
if ($('.main').width() < "800 px") {
$(".one").insertBefore($(".two"));
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main" style="overflow: hidden; border:solid 1px red; text-align: right; ">
<div class="two" style="background-color: #ccc; margin: 2px; padding: 10px; float: right; width:500px;">buttons</div>
<div class="one" style="background-color: #ccc; margin: 2px; padding: 10px; float: right; width:300px;">dropdown</div>
</div>
jQuery doesn't understand the string "800 px", it requires just the number 800.
Also, like others mentioned, try to keep your styles in css and not inline if you're using classes, it's easier to follow along with the code and edit the code in the future.
$(function() {
if ($('.main').outerWidth(true) < 800) {
$(".one").insertBefore($(".two"));
}
});
.main {
overflow: hidden;
border: solid 1px red;
text-align: right;
}
.two {
background-color: #ccc;
margin: 2px;
padding: 10px;
float: right;
width: 500px;
}
.one {
background-color: #ccc;
margin: 2px;
padding: 10px;
float: right;
width: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
<div class="two">buttons</div>
<div class="one">dropdown</div>
</div>
I'm using jQuery to filter the display of divs, when i click on the name of a color i want it to display only the div that is coresponding to that color, for the "red" example, it works fine, but not the blue and the green one, first of all i want to know the problem that is occuring, then the best way to fix it.
Thank you very much.
/* jQuery function*/
$(document).ready(function(){
$("#button_red").click(function(){
$("#green").fadeOut(200);
$("#blue").fadeOut(200);
$("#red").fadeIn(500);
});
$("#button_blue").click(function(){
$("#red").fadeOut(200);
$("#green").fadeOut(200);
$("#blue").fadeIn(500);
});
$("#button_green").click(function(){
$("#red").fadeOut(200);
$("#blue").fadeOut(200);
$("#green").fadeIn(500);
});
});
#colors_container{
background-color: white;
width: 100%;
height: 900px;
}
#colors_container #colors_buttons{
width: 450px;
height: 50px;
margin: 20px auto 10px auto;
background-color: purple;
}
#colors_container #colors_buttons a {
text-decoration: none;
float: left;
margin-right: 30px;
border : solid 2px red;
padding: 10px 10px 10px 10px ;
color: white;
}
#colors_container #colors{
width: 1060px;
height: 800px;
margin: 10px auto 10px auto;
background-color: yellow;
padding: 10px 10px 10px 10px;
}
#red , #blue , #green {
width: 250px;
height: 300px;
float: left;
margin-right: 10px;
margin-bottom: 10px;
}
#red{
background-color: red;
}
#blue{
background-color: blue;
}
#green{
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="colors_container">
<div id="colors_buttons">
ALL
<a id="button_red" href="#">Red</a>
<a id="button_blue" href="#">Blue</a>
<a id="button_green" href="#">Green</a>
</div>
<div id="colors">
<div id="red"></div>
<div id="blue"></div>
<div id="red"></div>
<div id="green"></div>
</div>
</div>
Because you have duplicated IDs (refer to id="red") I suggest to transform your IDs to class. Moreover I suggest a reduced event handler because the anchor text and your class names are similar:
$('#colors_buttons a').on('click', function(e) {
// get the button text (ALL, Red, Blue, Green), remove spaces and transform in lower case
var currColor = this.textContent.trim().toLocaleLowerCase();
// now in currColor variable we have a string like red or blue or green
// but this string corresponds to the class name of the divs....
if (currColor == 'all') {
$("#colors div").fadeIn(500);
} else {
// fade out all #colors divs not having such a class
$('#colors :not(.' + currColor + '').fadeOut(200);
// fade in the only one...
$("#colors ." + currColor).fadeIn(500);
}
})
#colors_container{
background-color: white;
width: 100%;
height: 900px;
}
#colors_container #colors_buttons{
width: 450px;
height: 50px;
margin: 20px auto 10px auto;
background-color: purple;
}
#colors_container #colors_buttons a {
text-decoration: none;
float: left;
margin-right: 30px;
border : solid 2px red;
padding: 10px 10px 10px 10px ;
color: white;
}
#colors_container #colors{
width: 1060px;
height: 800px;
margin: 10px auto 10px auto;
background-color: yellow;
padding: 10px 10px 10px 10px;
}
.red , .blue , .green {
width: 250px;
height: 300px;
float: left;
margin-right: 10px;
margin-bottom: 10px;
}
.red{
background-color: red;
}
.blue{
background-color: blue;
}
.green{
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="colors_container">
<div id="colors_buttons">
ALL
<a id="button_red" href="#">Red</a>
<a id="button_blue" href="#">Blue</a>
<a id="button_green" href="#">Green</a>
</div>
<div id="colors">
<div class="red"></div>
<div class="blue"></div>
<div class="red"></div>
<div class="green"></div>
</div>
</div>
Is there any way to go from desktop layout to mobile layout as shown on the image below using CSS? (responsiveness layout).
On the image below, every square is a div including the red square (anonymous).
I have the following divs: {A, B, C, D, red}.
On my requirements it is not possible to move the div A inside the red div (html source code). I just need the rendering takes care to put div A after div B.
Below you have a sample you can run by yourself.
Also you have the jsfiddle here: https://jsfiddle.net/tjztgn5d/
* {
font-family: Arial;
}
#red {
float: left;
border: 1px solid #F00;
padding: 10px;
}
.header {
padding: 10px auto;
text-align: center;
}
#A {
float: left;
width: 140px;
height: 210px;
border: 1px solid #D79B00;
}
#A > .header {
background-color: #FFE6CC;
border-bottom: 1px solid #D79B00;
}
#B {
width: 140px;
height: 188px;
border: 1px solid #6C8EBF;
}
#B > .header {
background-color: #DAE8FC;
border-bottom: 1px solid #6C8EBF;
}
#C, #D {
width: 140px;
height: 88px;
}
#C {
border: 1px solid #B85450;
margin-bottom: 10px;
}
#C > .header {
background-color: #F8CECC;
border-bottom: 1px solid #B85450;
}
#D {
border: 1px solid #9673A6;
}
#D > .header {
background-color: #E1D5E7;
border-bottom: 1px solid #9673A6;
}
<div id="A">
<div class="header">A</div>
</div>
<div id="red">
<div id="B" style="float:left;margin-right:10px;">
<div class="header">B</div>
</div>
<div style="float:left;">
<div id="C">
<div class="header">C</div>
</div>
<div id="D">
<div class="header">D</div>
</div>
</div>
</div>
Any idea on how to achieve this without Javascript?
Yes, this can be done without altering the HTML or using Javascript. The trick is to use absolute positioning. It can work in your case because you are using fixed sizes anyway.
https://jsfiddle.net/anzL79py/
This is what I have added:
#media (max-width: 512px) {
/* erase inline styles. dont use them anymore! */
#B {
float: unset !important;
margin-right: unset !important;
}
#B + div {
float: unset !important;
}
#A {
position: absolute;
left: 19px;
top: 218px;
}
#B {
margin-bottom: 230px;
}
}
And the full snippet.
* {
font-family: Arial;
}
#red {
float: left;
border: 1px solid #F00;
padding: 10px;
}
.header {
padding: 10px auto;
text-align: center;
}
#A {
float: left;
width: 140px;
height: 210px;
border: 1px solid #D79B00;
}
#A > .header {
background-color: #FFE6CC;
border-bottom: 1px solid #D79B00;
}
#B {
width: 140px;
height: 188px;
border: 1px solid #6C8EBF;
}
#B > .header {
background-color: #DAE8FC;
border-bottom: 1px solid #6C8EBF;
}
#C, #D {
width: 140px;
height: 88px;
}
#C {
border: 1px solid #B85450;
margin-bottom: 10px;
}
#C > .header {
background-color: #F8CECC;
border-bottom: 1px solid #B85450;
}
#D {
border: 1px solid #9673A6;
}
#D > .header {
background-color: #E1D5E7;
border-bottom: 1px solid #9673A6;
}
#media (max-width: 512px) {
/* erase inline styles. dont use them anymore! */
#B {
float: unset !important;
margin-right: unset !important;
}
#B + div {
float: unset !important;
}
#A {
position: absolute;
left: 19px;
top: 218px;
}
#B {
margin-bottom: 230px;
}
}
<div id="A">
<div class="header">A</div>
</div>
<div id="red">
<div id="B" style="float:left;margin-right:10px;">
<div class="header">B</div>
</div>
<div style="float:left;">
<div id="C">
<div class="header">C</div>
</div>
<div id="D">
<div class="header">D</div>
</div>
</div>
</div>
In your case by not using JS, it would be better to use
Bootstrap Column + Flexbox in Media Query
.contain{
max-height:800px;
}
.A{
color:white;
font-size:100px;
background:red;
height:100vh;
border:10px solid white;
}
.B{
color:white;
font-size:100px;
background:green;
height:100vh;
border:10px solid white;
}
.C{
color:white;
font-size:100px;
background:blue;
height:50vh;
border:10px solid white;
}
.D{
color:white;
font-size:100px;
background:pink;
height:50vh;
border:10px solid white;
}
#media only screen and (max-width: 768px) {
.contain{
display:flex;
flex-direction:column;
}
.A{
order:2;
border:0px;
}
.B{
order:1;
border:0px;
}
.three{
order:3;
border:0px;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class='container'>
<div class="row contain">
<div class="col-sm-4 A">1</div>
<div class="col-sm-4 B">2</div>
<div class="col-sm-4 three">
<div class="row">
<div class="col-sm-12 C">3</div>
<div class="col-sm-12 D">4</div>
</div>
</div>
</div>
</div>
I have a set of columns with some sliding i am doing between them but then when i arranged them to look like how in my fiddle i found a space between each of them
This is my fiddle, how I can get rid of this spacing to make them attached to each others?
$(document).ready(function() {
jQuery("#switcher1").click(function() {
jQuery(".middle-wrap").animate({left: "0px"});
});
jQuery("#switcher2").click(function() {
jQuery(".middle-wrap").animate({left: "-198.4px"});
});
jQuery("#switcher3").click(function() {
jQuery(".middle-wrap").animate({left: "-396.8px"});
});
jQuery("#switcher4").click(function() {
jQuery(".middle-wrap").animate({left: "-595.2px"});
});
jQuery("#switcher5").click(function() {
jQuery(".middle-wrap").animate({left: "-793.6px"});
});
jQuery("#switcher6").click(function() {
jQuery(".middle-wrap").animate({left: "-992px"});
});
jQuery("#switcher7").click(function() {
jQuery(".middle-wrap").animate({left: "-1190.4px"});
});
jQuery("#switcher8").click(function() {
jQuery(".middle-wrap").animate({left: "-1388.8px"});
});
});
.outer-wrap {
overflow-x: hidden;
position: relative;
max-width: 1050px;
min-width: 1050px;
margin: 0;
padding: 0;
height: 450px;
background-color: #fff;
-webkit-border-radius: 5px;
border-radius: 5px;
border: 1px solid #e3e3e3;
display: inline-block;
background-color: #fff;
border-top: 1px solid #e3e3e3;
transition: all 50ms ease-in-out;
}
.middle-wrap {
position: relative;
max-width: 1890px;
left: 0px;
margin: 0;
padding: 0;
height: 450px;
min-width: 1890px;
}
.inner-wrap {
display: inline-block;
max-width: 210px;
min-width: 210px;
border-right: 1px solid #e3e3e3;
vertical-align: top;
border: none;
margin: 0;
padding: 0;
height: 100%;
/* float: left;*/
}
.year_list {
background-color: darksalmon;
}
.make_list {
background-color: red;
}
.model_list {
background-color: aquamarine;
}
.body_style {
background-color: blue;
}
.transmission {
background-color:darkviolet;
}
.options {
background-color: darkslategray;
}
.aftermarket_modifications {
background-color: darkseagreen;
}
.mileage {
background-color: darkred;
}
.license_plate {
background-color: darkorange;
}
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div id="switcher1">See Part 1</div>
<div id="switcher2">See Part 2</div>
<div id="switcher3">See Part 3</div>
<div id="switcher4">See Part 4</div>
<div id="switcher5">See Part 5</div>
<div id="switcher6">See Part 6</div>
<div id="switcher7">See Part 7</div>
<div id="switcher8">See Part 8</div>
<div class="outer-wrap">
<div class="middle-wrap">
<div class="inner-wrap year_list"></div>
<div class="inner-wrap make_list"></div>
<div class="inner-wrap model_list"></div>
<div class="inner-wrap body_style"></div>
<div class="inner-wrap transmission"></div>
<div class="inner-wrap options"></div>
<div class="inner-wrap aftermarket_modifications"></div>
<div class="inner-wrap mileage"></div>
</div>
</div>
Due to your display: inline-blocks, the white spaces appear in between your block elements.
There are many resolutions to the same, refer to David Walsh's blog
What I would prefer to do here is use float instead of display: inline-block.
Check updated fiddle: https://jsfiddle.net/b6fw4u0z/2/
Uncomment float: left in .inner-wrap styling
jsfiddle
If you have to use display: inline-block then to remove the white space between elements, you can set
font-size: 0
to them.
See updated fiddle:
https://jsfiddle.net/b6fw4u0z/3/
You will notice i just put it on all the nested divs.
I am attempting to combine a border for a title and description. The title shows upon page load, but once the title is clicked its description appears below it in its own border. I want those borders to combine when the description is showing.
I created a snipet to show what I have so far.
$('.service_wrapper').click(function() {
var thisDescription = $('.service_description', $(this));
// Hide all other descriptions
$('.service_description').not(thisDescription).hide();
// Toggle (show or hide) this description
thisDescription.toggle(500);
});
.service_list {
margin-left: 20%;
}
.service_title {
border: 1px solid black;
padding: 8px;
width: 20%;
margin: 15px 0;
}
.service_title:hover {
background-color: gray;
color: blue;
cursor: pointer;
}
.service_description {
display: none;
border: 1px solid black;
padding: 8px;
width: 20%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="service_list">
<div class="service_wrapper">
<div class="service_title">Floors</div>
<div class="service_description">The best floors!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Roofs</div>
<div class="service_description">Your roof will be perfect!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Siding</div>
<div class="service_description">mmmm siding.</div>
</div>
<div class="service_wrapper">
<div class="service_title">Paint</div>
<div class="service_description">Fabulous paint!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Kitchen Remodels</div>
<div class="service_description">Pretty kitchen.</div>
</div>
</div>
I am trying to make it do something like this:
http://royalwoodfloor.com/services/
Does anyone know what I should do?
Image
Just change your css like this
.service_title {
border: 1px solid black;
padding: 8px;
width: 20%;
margin: 15px 0 0 0;/* update the margin */
}
here is the example link the example link
Updated the code snipet
Try something like this. Slightly changed your HTML structure and css.
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="service_list">
<div class="service_wrapper">
<div class="service_title"><span>Floors</span>
<div class="service_description"><span>The best floors!</span></div>
</div>
</div>
</div>
CSS
.service_list {
margin-left: 20%;
}
.service_title {
border: 1px solid black;
width: 30%;
}
.service_title span{
padding:8px 8px 8px 8px;
display:inline-block;
}
.service_title:hover {
background-color: gray;
color: blue;
cursor: pointer;
}
.service_description {
display: none;
border-top: 1px solid black;
}
.service_description span{
padding:10px
}
Separate from the animation transition not being the same as the example, this fixes the margin issue:
.service_description {
display: none;
border: 1px solid black;
padding: 8px;
width: 20%;
margin-top: -16px;
}
See it working here