How can I change some valeues after clicking on this div (I use it like a button). I want to change for example width and height to 200.
html:
<div class = "sq" onclick="main.function();">
...
</div>
css:
.sq {
width: 102.5px;
height: 2px;
}
This can be accomplished using css only.
button:focus {
width: 200px;
height: 200px;
}
Here is a pen as example. http://codepen.io/doggard/pen/PzERxg
edit: you can use the same approach on a div by adding a tabindex attribute to the div.
<div tabindex="1"></div>
If I'm understanding correctly, you want .sq div to change width and height when it's clicked?
If so, if you don't mind using Jquery, you could do something like this:
<script>
$(document).ready(function() {
$('.sq').click(function() {
$(this).css('height','200px');
$(this).css('width','200px');
})
})
</script>
<div class="sq">
</div>
$(function() {
$('.sq-click').click(function() {
$(this).toggleClass('active');
});
});
.sq {
transition: all 0.25s ease;
display: inline-block;
border: 2px solid #f00;
vertical-align: top;
text-align: center;
padding: 5px 10px;
margin: 5px 10px;
cursor: pointer;
height: 20px;
width: 80px;
}
.sq-click.active {
line-height: 30px;
width: 120px;
height: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="sq sq-click">Button 1</div>
<div class="sq">Button 2</div>
<div class="sq">Button 3</div>
<div class="sq">Button 4</div>
<div class = "sq" onclick="changeDimensions();">
Pure javascript:
function changeDimensions(){
document.getElementsByClassName("sq").style.width = "200px";
document.getElementsByClassName("sq").style.height = "200px";
}
Here's one way to do it:
$(function(){
$('.sq-unique').click(function(){
$('.sq-unique').toggleClass('sqClick');
});
});
.sq {
border: 1px solid green;
width: 102.5px;
height: 2px;
float: left;
cursor: pointer;
}
.sq-unique {
border: 1px solid red;
width: 102.5px;
height: 2px;
float: left;
cursor: pointer;
}
.sq-unique.sqClick {
height: 200px;
width: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="sq-unique">
</div>
<div class="sq">
</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>
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.
Hello I have a HTML box and want to place a input text box as part of a form within and position it within the same box. Can this be done using JQuery ? If yes could someone post some code in JQuery on displaying the input box within the box. I also need to size the input box. The reason behind the use of JQuery is that I am displaying math symbols rendered by way of MathJax using JQuery. Otherwise can it be done by way of creat
#header {
width: 100%;
background-color: white;
height: 30px;
}
#container {
width: 600px;
height:1500px
background-color: #ffffff;
margin: auto;
}
#first {
width: 100px;
border: 2px solid black;
float: left;
height: 400px;
}
#second {
width: 300px;
border: 2px solid black;
top:0;
float: right;
height: 100px;
}
#third {
position: absolute;
top: 180px;
border: 2px solid black;
right:430px;
width: 200px;
height: 100px;
}
<body>
<div id="header"></div>
<div id="container">
<div id="first"></div>
<div id="second"></div>
<div id="third"></div>
<div id="clear"></div>
</div>
</body>
You could try :
$('#third').html('<input type="TYPE-OF-INPUT" name="INPUT-NAME" class="IF-ANY" id="IF-ANY" />')
$('#third input').css({ /*to style*/
'prop1':'val1',
'prop2':'val2',
.
.
.
'propn':'valn'
});
$('<input>').attr({
type: 'text',
id: 'foo',
name: 'bar'
}).appendTo('#third');
#third {
position: absolute;
top: 180px;
border: 2px solid black;
right:430px;
width: 200px;
height: 100px;
}
input#foo {
border: 1px red solid;
/* position css*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="third">Div content</div>
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