I want to change the width of a division by clicking on the options I wrote above it, each time by 100px, using jQuery. But I want the width not to become lesser than 200px or more than 600px. How can I do it?
<p id="increase">
Increase the width by 100px
</p>
<p id="reduce">
Reduce the width by 100px
</p>
<div id="box">
</div>
<script>
$("#increase").click(function(){
$("#box").animate({width: '+=100px'}, 1000);
});
$("#reduce").click(function(){
$("#box").animate({width: '-=100px'}, 1000);
});
</script>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<p id="increase">
Increase the width by 100px
</p>
<p id="reduce">
Reduce the width by 100px
</p>
<div id="box" style="border:solid; width:200px">
dsfsdf
</div>
</body>
</html>
<script>
$("#increase").click(function () {
var width = $("#box").width();
if (width > 600) {
return;
}
$("#box").animate({ width: '+=100px' }, 1000);
});
$("#reduce").click(function () {
var width = $("#box").width();
if (width <= 200) {
return;
}
$("#box").animate({ width: '-=100px' }, 1000);
});
</script>
You can add a CSS code to your project,
#box {
max-width:600px !important;
min-width:100px !important;
}
Or use if to check the width of your box before any change.
Related
I have 3 divs on the page and I want them to change the color if they are scrolling. For example, all divs are blue, if they scroll to the first diva, change to green, change to green to the second diva, but the first will be blue again. I do not know how to go about it. I count on your help and tips. Maybe you've seen a similar example somewhere :)
According to your div color change dynamicaly bellow is the code
<!DOCTYPE HTML>
<html>
<head>
<style>
.divblue {
width: 100%;
height: 400px;
background-color: blue;
color: white;
}
.divgreen {
width: 100%;
height: 400px;
background-color: green;
color: white;
}
</style>
</head >
<body>
<div id="maindiv" style="width:100%;height:300px;overflow-y:scroll;">
<div id="fstdiv" class="divblue">
Hi test for first div
</div>
<div id="snddiv" class="divblue">
Hello test for second div
</div>
<div id="thrdiv" class="divblue">
Sir test for Third div
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#maindiv').scroll(function () {
var hT = $('#fstdiv').outerHeight();
var hH = $('#snddiv').outerHeight();
var tH = $('#thrdiv').outerHeight();
var wS = $(this).scrollTop();
$('#fstdiv').removeClass('divgreen').addClass('divblue');
$('#snddiv').removeClass('divgreen').addClass('divblue');
$('#thrdiv').removeClass('divgreen').addClass('divblue');
if (wS < 100) {
$('#fstdiv').removeClass('divblue').addClass('divgreen');
}
else if (wS > 400 && wS < 700) {
$('#snddiv').removeClass('divblue').addClass('divgreen');
}
else {
$('#thrdiv').removeClass('divblue').addClass('divgreen');
}
});
});
</script>
</body>
</html >
I am trying to get the scroll down and up position at This Demo but as you can see it is updating the <p> element on every single pixel by pixel scroll (Up or Down). But what I need to only update the <p> on every 200 scroll until reaching the end of the div (right now the p element is updating on every single scroll).
Here is the code I have:
$(window).scroll(function () {
var height = $(window).scrollTop();
if (height > 200) {
$('p').html(height);
}
});
div {
height:1080px;
}
p {
position:fixed;
top:0;
left:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<p></p>
<div>
<h3> Hello Scroll!</h3>
</div>
How can I fix this?
var a=0;
$(window).scroll(function () {
var height = $(window).scrollTop();
if (height-a<200){
if (height-a<-200){
$('p').html(a);
a = parseInt(height/100) *100;
}
}else{
$('p').html(a);
a = parseInt(height/100)*100;
}
});
div {
height:1080px;
}
p {
position:fixed;
top:0;
left:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<p></p>
<div>
<h3> Hello Scroll!</h3>
</div>
Im having problem getting the original width and height of a div, without the style property that is generated with a code.
This is how I solved it
var currentWidth = $("#container").width();
var currentHeight = $("#container").height();
$("#container").removeAttr("style");
var containerWidth = $("#container").width();
var containerHeight = $("#container").height();
$("#container").css("width", currentWidth, "height", currentHeight);
$("#container").animate({
width: containerWidth,
height: containerHeight
}, "slow");
This is pretty bad coded and it wont animate the height. I guess there is a easier way to solve this.
Like for example, $("#container").width(ignoring style attr);
Edit, better explenation:
In my css file the original size of container is 500x500.
But then when you click on a link it changes to 800x800 (adding the attribute style), now when you click back I want it to change back to 500x500 but I want the code to find out the original size for easier changes.
The code that changes the #container:
$("#container").animate({
width: 1250,
height: 600
}, "slow");
Thanks in advance!
Updated:
Keep the original width and height as min-width and min-height i.e in your case:
min-width: 500px;
min-height: 500px;
and then do this using jQuery:
$("#container").animate({
width: "",
height: ""
}, "slow");
Working Fiddle
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="Scripts/jquery-1.8.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var curentDivWidth = 500;
var curentDivHeight = 500;
var clicked = false;
$("#ClickMe").click(function () {
if (!clicked) {
$("#container").animate({
width: 1250,
height: 600
}, "slow");
clicked = true; return;
}
$("#container").animate({
width: curentDivWidth,
height: curentDivHeight
}, "slow");
clicked = false;
});
});
</script>
<title>example</title>
</head>
<body>
<a href="javascript:void(0)" id="ClickMe" >click me </a>
<div id="container" style="border:1px solid black" >
the div
</div>
</body>
</html>
jsfiddle : http://jsfiddle.net/seekpunk/JhzAD/
I have a div with overflow:hidden and a set height. When I run animate(), I want the height to animate to the full size.
For example, I have this:
http://jsfiddle.net/aW9k9/
clicky
<div style="height:50px; overflow:hidden;" class="main">
<div style="height:100px; background:blue;">text</div>
<div style="height:50px; background:yellow;">text</div>
<div style="height:50px; background:green;">text</div>
</div>
This example works, but only because I knew the total height of all the elements.
<script>
function lol() {
$("div.main").animate({height:'200px'}, 1000);
}
</script>
^How can I recreate that without knowing the total animate height?
A Fixed version for #MattBall's answer, which use the .outerHeight(true) to include the inner div's margins.
function lol() {
var $main = $("div.main"),
totalHeight = 0;
$main.children().each(function () {
totalHeight += $(this).outerHeight(true);
});
$main.animate({height:totalHeight}, 1000);
}
If changing html code isn't a problem, you can simply change your html code like this:
clicky
<div style="height:50px; overflow:hidden;" class="main">
<div>
<div style="height:100px; background:blue;">text</div>
<div style="height:50px; background:yellow;">text</div>
<div style="height:50px; background:green;">text</div>
</div>
</div>
and you can get height of inner elements like this:
$('div.main > div').outerHeight()
and also here is the lol function:
function lol() {
$("div.main").animate({height:$('div.main > div').outerHeight()}, 1000);
}
You could do programmatically the same thing that you did mentally to come up with the 200px value: sum the height of the div.main > divs.
function lol() {
var $main = $("div.main"),
totalHeight = 0;
$main.children().each(function () {
totalHeight += $(this).height();
});
$main.animate({height: totalHeight}, 1000);
}
http://jsfiddle.net/mattball/CXyKK
I have this form Im creating and when you click on the "Next" button I want to slide the next form() across to the left this is my function
jQuery('input[name^=Next]').click(function () {
current.animate({ marginLeft: -current.width() }, 750);
current = current.next();
});
That function isn't working the way I want to. it slides the text in the container across not the whole container it could be a css problem for all I know.
And my form which has a class name .wikiform doesn't center horizontally. here is my full code. I'm not that experience in javascript so you would be appreciated. cut and paste and try it out
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript" language="javascript" src="Scripts/jquery-1.4.4.js"></script>
<script type="text/javascript" language="javascript" src="Scripts/jquery-easing.1.2.pack.js"></script> <script type="text/javascript" language="javascript">
(function ($) {
$.fn.WikiForm = function (options) {
this.Mode = options.mode || 'CancelOk' || 'Ok' || 'Wizard';
var current = jQuery('.wikiform .view :first');
function positionForm() {
//jQuery('.wikiform').css( {'top':
jQuery('body')
.css('overflow-y', 'hidden');
jQuery('<div id="overlay"></div>')
.insertBefore('.wikiform')
.css('top', jQuery(document).scrollTop())
.animate({ 'opacity': '0.8' }, 'slow');
jQuery('.wikiform')
.css('height', jQuery('.wikiform .wizard .view:first').height() + jQuery('.wikiform .navigation').height())
.css('top', window.screen.availHeight / 2 - jQuery('.wikiform').height() / 2)
.css('width', jQuery('.wikiform .wizard .view:first').width())
.css('left', -jQuery('.wikiform').width())
.animate({ marginLeft: jQuery(document).width() / 2 + jQuery('.wikiform').width() / 2 }, 750);
jQuery('.wikiform .wizard')
.css('overflow', 'hidden')
.css('height', jQuery('.wikiform .wizard .view:first').height() );
}
if (this.Mode == "Wizard") {
return this.each(function () {
var current = jQuery('.wizard .view :first');
var form = jQuery(this);
positionForm();
jQuery('input[name^=Next]').click(function () {
current.animate({ marginLeft: -current.width() }, 750);
current = current.next();
});
jQuery('input[name^=Back]').click(function () {
alert("Back");
});
});
} else if (this.Mode == "CancelOk") {
return this.each(function () {
});
} else {
return this.each(function () {
});
}
};
})(jQuery);
$(document).ready(function () {
jQuery(window).bind("load", function () {
jQuery(".wikiform").WikiForm({ mode: 'Wizard', speed:750, ease:"expoinout" });
});
});
</script>
<style type="text/css">
body
{
margin:0px;
}
#overlay
{
background-color:Black; position:absolute; top:0; left:0; height:100%; width:100%;
}
.wikiform
{
background-color:Green; position:absolute;
}
.wikiform .wizard
{
clear: both;
}
.wizard
{
position: relative;
left: 0; top: 0;
width: 100%;
list-style-type: none;
}
.wizard .view
{
float:left;
}
.view .form
{
}
.navigation
{
float:right; clear:left
}
#view1
{
background-color:Aqua;
width:300px;
height:300px;
}
#view2
{
background-color:Fuchsia;
width:300px;
height:300px;
}
</style>
<title></title>
</head>
<body><form action="" method=""><div id="layout">
<div id="header">
Header
</div>
<div id="content" style="height:2000px">
Content
</div>
<div id="footer">
Footer
</div>
</div>
<div id="formView1" class="wikiform">
<div class="wizard">
<div id="view1" class="view">
<div class="form">
Content 1
</div>
</div>
<div id="view2" class="view">
<div class="form">
Content 2
</div>
</div>
</div>
<div class="navigation">
<input type="button" name="Back" value=" Back " />
<input type="button" name="Next " class="Next" value=" Next " />
<input type="button" name="Cancel" value="Cancel" />
</div>
</div></form></body></html>
Try changing this line:
var current = jQuery('.wizard .view :first');
(which was selecting the form element directly under 'view')
to this:
var current = jQuery('.wizard .view:first');
// The first element with a class of 'view' under an element with a class of
// 'wizard'
Update, due to comments below:
To make a simple scrolling widget, you need the following:
An outer <div> with a fixed width and height
An inner <div> with a fixed height and a very long width.
Code to change the left offset of the inner <div>.
You can see a simple example of a widget like this here: http://jsfiddle.net/andrewwhitaker/feJxu/
For the OP's specific problem, I've modified the code that assigns CSS properties to look like this:
$('.wikiform')
.css('height', $('.wikiform .wizard .view:first').height() + $('.wikiform .navigation').height())
.css('top', window.screen.availHeight / 2 - $('.wikiform').height() / 2)
.css('width', $('.wikiform .wizard .view:first').width())
.css('left', -$('.wikiform').width())
.css('overflow', 'hidden') // ADDED
.animate({marginLeft: $(document).width() / 2 + $('.wikiform').width() / 2
}, 750);
$('.wikiform .wizard')
.css('width', '10000px') // ADDED. May need to be longer depending on content.
.css('height', $('.wikiform .wizard .view:first').height());
I've also changed the animation that 'next' does:
$('input[name^=Next]').click(function() {
$(".wizard").animate({
left: "-=" + current.width() + "px"
}, 750);
}); // Similar logic for 'back'
What this is doing is basically altering the left offset of the view with a huge width (.wizard) and scrolling a new form into the view with a fixed width and height (.wikiform). See a working sample here: http://jsfiddle.net/andrewwhitaker/J9L8s/