Combining borders after showing data - javascript

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

Related

How to show 6 different images every time the website is loaded?

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>

How to insert div after other div with if else condition

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>

jQuery filter the displaying of divs issue

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>

How to get the width of an element which has inherit-width?

I have a responsive website. Also I have some nested elements which used percent (%) width for them. Now I want to get the width of a child-element and set it as width of another element.
Note: I can get the width of that element which I need to it and set it to another one using JavaScript (something like this: $('.children')[0].getBBox().width;). But I want to know, is it possible to I do that using pure-CSS?
Here is my HTML structure and CSS codes:
#grandfather {
width: 70%;
border: 1px solid #666;
padding: 5px;
}
.father {
width: 80%;
border: 1px solid #999;
padding: 5px;
}
.children {
width 90%;
border: 1px solid #ccc;
padding: 5px;
}
.follow-width {
position: absolute;
border: 1px solid #ccc;
padding: 5px;
/* width: ? */
}
<div id="grandfather">
<div class="father">
<div class="children">how to get the width of this element?</div>
</div>
</div>
<br>
<hr>
<br>
<div class="follow-width">
this element needs to the width of div.children
</div>
No you cant do this in CSS only.
But you in Internet Explorer previous to version 8 it was possible:
width: expression(document.getElementById("grandfather").style.width);
#grandfather {
width: 70%;
border: 1px solid #666;
padding: 5px;
}
.father {
width: 80%;
border: 1px solid #999;
padding: 5px;
}
.children {
width 90%;
border: 1px solid #ccc;
padding: 5px;
}
.follow-width {
position: absolute;
border: 1px solid #ccc;
padding: 5px;
width: expression(document.getElementById("grandfather").style.width);
}
<div id="grandfather">
<div class="father">
<div class="children">how to get the width of this element?</div>
</div>
</div>
<br>
<hr>
<br>
<div class="follow-width">
this element needs to the width of div.children
</div>

Button inside a box with css,html and javascript

Hey guys i have maded an outerbox which contains an innerbox .The code is
<html>
<link rel="stylesheet" type="text/css" href="styles.css">
<body>
<div id="boxed">
<div id="anotherbox"> </div>
</div>
</body>
</html>
the css file
#boxed {
width: 150px;
padding: 50px;
border: 5px solid gray;
margin: 0;
background-image: url('http://placehold.it/200x200');
}
#boxed:hover > #anotherbox {
width: 50px;
padding: 40px;
border: 5px solid gray;
margin: 0;
visibility: visible;
}
This works fine..
But what i need is that i want to display a simple button inside the inner box.I have tried some javascript code but it dint worked out.
Hope you guys can help me ..P:S ..i dont need a jquery solution..Thanks
Is this what you are looking for?
#boxed {
width: 150px;
padding: 50px;
border: 5px solid gray;
margin: 0;
background-image: url('http://placehold.it/200x200');
}
#boxed:hover > #anotherbox {
width: 50px;
padding: 40px;
border: 5px solid gray;
margin: 0;
visibility: visible;
}
<div id="boxed">
<div id="anotherbox">
<input type="button" value="inside" />
</div>
</div>
You can achieve this using a button, as follows:
The HTML:
#boxed {
width: 150px;
padding: 50px;
border: 5px solid gray;
margin: 0;
background-image: url('http://placehold.it/200x200');
}
#boxed:hover > #anotherbox {
width: 50px;
padding: 40px;
border: 5px solid gray;
margin: 0;
visibility: visible;
}
#boxed:hover #anotherbox > button {
width: 16px;
padding: 30px;
border: 5px solid gray;
margin: 0;
visibility: visible;
cursor:pointer;
}
<div id="boxed">
<div id="anotherbox">
<button>Button</button>
</div>
</div>

Categories