I wanna change the width of a css when the value of a text to change on value.
Javascript:
<script>
$("inpu").change( function() {
$(#calidad).css({
width: function(index, value) {
return parseFloat(value) * 1.2;
},
});
});
</script>
CSS :
#calidad{ width: 20px; height: 15px; background-color: #f33; }
html:
<input type="text" id="inpu" name="inpu" value="2">
<div id="calidad"></div>
I fixed your code and made a jsFiddle:
http://jsfiddle.net/xWXWD/
Both selectors were incorrect.
I may not understand the question, but do you want to change the width to the val of the input?
here is an example using px (you could use em, points, etc)
$(function() {
$("#inpu").change( function() {
$('#calidad').css({
width: getWidth});
});
});
function getWidth() {
return $('#inpu').val() + 'px'
}
here is a live example using a forked version of Steve's fiddle: http://jsfiddle.net/pK2qR/
Related
I have an element. We can call that Element A. I want Element A to have the same height as Element B with an additional height of 65px. For example if Element B has a height of 500px I want Element A to have a height of 565px
I am not very good at writing functions. I found one that can make Element A the same height as Element B but without the additional 60px.
$(document).ready(function() {
$("#ElementA").css("height", $("#ElementB").height());
});
Thanks!
Simply add the value wanted - 65 in this case
$(document).ready(function() {
$("#ElementA").css("height", $("#ElementB").height() + 65);
console.log("A:" + $("#ElementA").height() + "px");
console.log("B:" + $("#ElementB").height() + "px");
});
#ElementA {
background-color: red;
width: 10px;
}
#ElementB {
background-color: orange;
height: 20px;
width: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ElementA">A</div>
<div id="ElementB">B</div>
You probably best doing it this way.
var SameHeights = function (){
var height = 0;
$('.allElements').each(function(index, element){
height = $(element).height() > height ? $(element).height() : height;
});
$('.allElements').height(height +65);
}
SameHeights();//call the function here, and re-use it again in the future.
Then on your HTML, you will have to add a class (it's better)
<div class="allElements">Element A</div>
<div class="allElements">Element B</div>
<div class="allElements">Element C</div>
<script>
$(document).ready(function() {
$("#ElementA").height( $("#ElementA").height() + 65 );
});
</script>
Here my solution
$(function(){
$("#ElementA").css("height", $("#ElementB").height()+65);
});
Here my responsive solution
$(function(){
$(window).resize(function(){
$("#ElementA").css("height", $("#ElementB").height()+65);
}).trigger('resize');
});
I'm using jquery plugin colorbox,
I encounter a problem when trying to set width and height of div #cboxLoadedContent which is a child of cboxContent div, by default it using box-sizing, I don't know how colorbox calculate the width & height of this div.
I have for example the parent div:
<div id="cboxContent" style="float: left; width:572px; height:396px;">
<div " id="cboxLoadedContent" style="display: block; width: 570px; overflow: auto; height: 394px;>
Can I have the same value of my cboxcontent in cboxLoadedContent?
Thanks in advance!
Thnaks for your answer.
In fact I'm not using rel:'group',
This is my code :
var popin_width = '572';
var popin_height = '416';
if( $('.ie8, .ie7').length )
{
popin_height = '417';
}
if( $('.ie7').length )
{
popin_height = '427';
}
$('.popin').colorbox({
inline: true,
width: popin_width,
height: popin_height,
opacity: 0.8,
overlayClose: true,
close: 'Fermer',
onOpen: function() {
$('a, :input, object').attr('tabindex', '-1');
},
onClosed: function() {
$('a, :input, object').attr('tabindex', '0');
}
});
Please try the following. Considering this is triggered to all the links with class="group"
$(".group").colorbox({rel:'group', width:"75%", height:"75%"});
You can give the width and height in % or in px values.
Hope this helps.
I'm trying to resize a panel using JavaScript to fit a small image into a panel, and struggling badly.
It's within the bold:
<body id="visCinemaTransRefund"><br>
<div id="content"><br>
<ul class="PayPanel" id="paymentDetails"><br>
Here's the CSS that needs modifying:
visCinemaTransRefund .PayPanel { width: 435px; }
How would I be able to modify with width of this panel?
I've also got a form I'm trying to resize within CSS:
visCinemaTransRefund FORM (width: 1005px;)
document.getElementById('paymentDetails').style.width = '1000px';
Have you tried using:
document.getElementById("paymentDetails").getElementsByClassName("PayPanel")[0].style.width="1000px"
Remember: getElementsByClassName return an array of elements, so using [0] you are indexing first element (and, of course, the only one).
Since getElementsById return a single elements, getElementsByClassName could be useless.
If you want to do this using CSS class :
HTML:
<div id="myDiv" class="medium"></div>
<button id="btn">Click me</button>
CSS:
#myDiv {
background-color: gray;
}
.medium {
height: 50px;
width: 50px;
}
.big {
height: 100px;
width: 100px;
}
JS:
document.getElementById("btn").onclick = function() {
var element = document.getElementById("myDiv"); // or document.getElementsByClassName("className")
if (element.className == "medium") {
document.getElementById("myDiv").className = "big";
} else {
document.getElementById("myDiv").className = "medium";
}
};
JSFIDDLE
Use the following code to change the width of tags by accessing HTML element from the DOM using getElement functions and setting width to it using setAttribute javaScript function.
document.getElementById("paymentDetails").setAttribute("style","width:500px;");
document.getElementById("visCinemaTransRefund").getElementsByTagName("form")[0].setAttribute("style","width:1000px;");
Using JavaScript:
document.getElementById('paymentDetails').style.width = '1000px';
Using JQuery:
$("paymentDetails").width(1000);
$("paymentDetails").css("width","1000px");
I tried to modify the code taken from herefor my usage need:
CSS:
.search-bar{ width: 200px; display: none; }
.searchbox { display: inline;}
.trigger { display: inline}
HTML:
<div class="search-bar">
<input type="text" name="s" class="searchbox" value="Search" onfocus="this.value=''">
</div>
<button class="trigger">search</button>
JS:
$(document).ready(function() {
$('.trigger').click(function() {
if ($("search-bar").is(':visible')) {
$('.search-bar').animate({width: 'toggle'}).css({ 'display' : 'inline'});
} else {
$('.search-bar').animate({ width: 'toggle' }).css({ 'display' : 'inline'});
}
});
});
It works as expected but the animation isn't smooth. How to make the animation flow smoothly.
JSFiddle
Thank you,
try something like this, FIDDLE
$(document).ready(function () {
$('.trigger').click(function () {
if ($(".search-bar").is(':visible')) {
$('.search-bar').fadeOut();
} else {
$('.search-bar').fadeIn();
}
});
});
simplified version
$(document).ready(function () {
$('.trigger').click(function () {
$('.search-bar').fadeToggle("slow");
});
});
set animation time also see updated fiddle
$(document).ready(function() {
$('.trigger').click(function() {
if ($("search-bar").is(':visible')) {
$('.search-bar').animate({width: 'toggle'},500);//here set animation duration
} else {
$('.search-bar').animate({ width: 'toggle' },500);//here set animation duration
}
});
});
reference animation()
You just need to add the width to each expandable div.
To explain:
jQuery doesn't know the dimensions of your hidden div until it's displayed. So when it's clicked on it actually pulls it out of position to measure it before quickly replacing it. This often has the side effect of causing some jumpiness. Setting the width on the element prevents jQuery from pulling it out of position.
More detailed information please see this link:
jQuery slideDown is not smooth
Someone has helped me out. The feature I want is here: http://jsfiddle.net/mw7yK/12/
CSS:
.search-bar { display: inline; }
.searchbox { width: 200px; display: none; }
.trigger { display: inline}
HTML:
<div class="search-bar">
<input type="text" name="s" class="searchbox" value="Search" onfocus="this.value=''" />
</div>
<button class="trigger">search</button>
JS:
$(document).ready(function() {
$('.trigger').click(function() {
$('.searchbox').animate({width: 'toggle'}, 1000);
});
});
Hello i have the following...
<span id="second" class="content1" style="width:0px; display:inline-block; overflow:hidden; float: left; white-space:nowrap;">
<p style="color:blue; background-color: #b5bdc8;">Camera Reviews</p>
</span>
<li class="laptop"></li>
and the script is:
$(document).ready(function () {
$('.slide1').click(function () {
$('#second').animate({
width: '120px',
}, 1000);
});
});
The problem is that i want the list to be displayed BLOCK... and work as it is PLUS i want the animation to toggle when i click on the list hide/show
Working code here: http://jsfiddle.net/gVjFs/81/
I'm going to ignore the dodgy markup (<li> inside <span> among other things). You can use toggle() here:
$('.slide1').toggle(function () {
$('#second').stop().animate({
width: '120px',
}, 1000);
}, function(){
$('#second').stop().animate({
width: '0',
}, 1000);
});
In your JSFiddle, you show that you are setting the CSS to block for ul li. But this won't work because you do not have any ul tags in your HTML. It also appears that you are using li tags incorrectly. An li tag is like a td tag: it does not make sense outside of its parent tag. For li's that would be an ol or a ul tag. If you want a little circle to click on, use an image of a little circle. Also, wrap your span / a section in a div. That will give you blocked display for free.
Use a combination of click() and toggleClass()
Something like this:
$("#click").click(function() {
$(this).toggleClass('whatever');
});
$(document).ready(function () {
$('.slide1, .slide2, .slide3, .slide4, .slide5').click(function () {
var elem = $('.' + $(this).attr('class').replace('slide','content')),
width = elem.width();
elem.animate({
width: width === 0 ? '120px' : 0,
}, 1000);
});
});
demo
I advise you to set a slide class to all your .slide1, .slide2, .slide3-elements.