I have a slider that's in place on my website.
The basic way that it works is depicted in this jsfiddle -
http://jsfiddle.net/6h7q9/15/
I've written code to set the parent's height to the height of the content div. This worked fine, until I introduced some content that did not have a fixed height and whose height might increase while it was being shown on the page. Is there a way, I can dynamically change the height of this parent div whenever content inside it increases or decreases it's height.
HTML -
<div id="slider_container">
<div id="slider">
<div id="slide1">
Has content that might increase the height of the div....
</div>
<div id="slide2">
Has content that might increase the height of the div....
</div>
<div id="slide3">
Has content that might increase the height of the div....
</div>
</div>
</div>
<input type="button" value="Next" id="btnNext">
<input type="button" value="Previous" id="btnPrev">
<input type="button" value="Add text" id="btnAddText">
<div class="footer">
I appear after the largest container, irrespective of which one is present....
</div>
JavaScript -
var currSlider = 1;
$('#btnNext').click(function(){
debugger;
var margin = $('#slider').css('margin-left');
if(parseInt(margin) <= -400) {
return;
}
currSlider++;
// Moving the slider
$('#slider').css('margin-left', parseInt(margin) - 200 + 'px');
// Resetting the height...
$('#slider').height($('#slide' + currSlider).height());
});
$('#btnPrev').click(function(){
debugger;
var margin = $('#slider').css('margin-left');
if(parseInt(margin) >= 0) {
return;
}
currSlider--;
// Moving to the previous slider
$('#slider').css('margin-left', parseInt(margin) + 200 + 'px');
// Resetting the height...
$('#slider').height($('#slide' + currSlider).height());
});
$('#btnAddText').click(function() {
$('#slide' + currSlider).text('Hello World'.repeat(100));
});
String.prototype.repeat = function(times) {
return (new Array(times + 1)).join(this);
};
I hope this "answer" gets you going in the right direction. Since i don't have the time to fully look this up right now, i hope to send you in the right direction. if you do find out how to do this properly, please shoot me a message, since i would really like to know ^_^
http://www.w3.org/TR/DOM-Level-3-Events/#legacy-event-types
An example on how to use: (DOMSubtreeModified didn't work in IE from what i read. Therefor the propertchange event)
$('#slide1').on('DOMSubtreeModified propertychange', function() {
console.log('test',this);
});
Another option is by using the MutationObserver:
http://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers
https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#mutation-observers
Updated 6-8-2014 15:00 CET
Since i totally misread the original post, this answer was useless to say the best. But since the problem is actually really easy to solve (or... at least i hope i understand the problem this time), i thought i'd post an answer that worked for the situation: a slider with content of different heights.
What was the problem with the original slider? You moved the content out of the container, which made it hidden. However, the container would still pick up the height of it, since it only had a fixed width. The fixed height on the '#slider' did not prevent the container of picking up the height from the '#slide-*'. Had you set the height for the container... all would be fine :-)
Here's the outline of the hidden slide, moved 'off canvas': http://i.gyazo.com/f2404e85263a7209907fdbc8f9d8e34e.png
I did not fix your fiddle by completing your code. I just rewrote it to provide you with an easier to maintain slider. Here's a fiddle with a working slider where you can add and remove stuff in the slides: http://jsfiddle.net/3JL2x/3/
Just remove the height properties in the .slide1, 2 and 3 and add min-height instead.
Like that :
#slider > div {
min-height:200px;
float:left;
width : 200px;
}
#slide1 {
background-color : red;
}
#slide2 {
background-color: green;
}
#slide3 {
background-color: blue;
}
Live example
http://jsfiddle.net/6h7q9/27/
Related
I am trying to use a simple animation feature of jquery. In my application, I have two button " Slide Right" and "Slide Left". When we click on these buttons, these move the box to left or right respectively. My move right button is working perfectly but my move right button is working only once. What's wrong with my code? Here's my code:
$(document).ready(function() {
$("#slideRightButton").click(function() {
$("#boxToBeMoved").animate({
left: '+=10%'
});
});
$("#slideLeftButton").click(function() {
$("#boxToBeMoved").animate({
right: '+=10%'
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button id="slideRightButton">Slide Right</button>
<button id="slideLeftButton">Slide Left</button>
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
<div id="boxToBeMoved" style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
The above code is just an extension of the jquery tutorial by W3Schools which can be found here
You are changing the left and right property of the box, It looks like the right property is taking precedence and preventing the left from doing anything.
If you make both use the same property, one adding to it and the other subtracting, it should work.
$("#slideRightButton").click(function(){
$("div").animate({left: '+=10%'});
});
$("#slideLeftButton").click(function(){
$("#boxToBeMoved").animate({left: '-=10%'});
});
Updated to include author's request to not exceed the maximum width.
To accomplish this, I included a wrapper div with a fixed width.
When sliding to the right, it checks if the value will be bigger than parent's width and, if positive, returns.
Same when sliding to the left, but it returns if the value is negative, preventing the box to slide outside the limits of the parent div.
$(document).ready(function() {
const slideVal = 30; // slide value (in pixels)
$("#slideRightButton").click(function() {
var box = $("#boxToBeMoved");
if (parseInt(box.css("left")) + slideVal > parseInt(box.parent().width())) return;
box.animate({
left: '+=' + slideVal
});
});
$("#slideLeftButton").click(function() {
var box = $("#boxToBeMoved");
if (parseInt(box.css("left")) - slideVal < 0) return;
box.animate({
left: '-=' + slideVal
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button id="slideRightButton">Slide Right</button>
<button id="slideLeftButton">Slide Left</button>
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
<div id="wrapper" style="width: 200px">
<div id="boxToBeMoved" style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</div>
Well, i am stucked and can't find the answer myself. Hopefully someone can give me a hint.
I try to fullfill the following requirements:
There should be a Newsblock within a HTML Page with a fixed width and
height.
In this Newsblock only the title of the news are visible.
Those news are "collapsed" by default and should "expand" if the Mouse is over it.
Due the fact that the 'Newsblock' is limited by its height, there should be a Scrollbar visible. But only if the currently expanded news makes it necessary, so the user can Scroll down.
Newstitle and Newstext should never leave the Newsblock.
so far so good, i was able to fullfill all those demands except the one with the Scrollbar. If i try to reach the Scrollbar out of the currently expanded news it collapses again and the Scrollbar disappears. I understand that my .hover is configured that it always SlideUp if i leave the newsentry and the Scrollbar isn't a part of the newsentry div. But i have no idea what to change to still have an overall Scrollbar for the Newsblock, but won't disappear if i try to 'reach' it.
P.s.: A Scrollbar only per Newsentry looks weird. Thats why i want 'bind' the scrollbar to the parent container :S
HTML
<div id="newsblock">
<div> // some auto generated div's i have to life with, so the news entries are not 'direct' children of the newsblock.
<div class="newsentry">
<div class="newstitle">...</div>
<div class="newstext">...</div>
</div>
... another 9 'newsentry' divs.
</div>
</div>
JS
$(".newsentry").hover(
function() {
$(this).children(".newstext").stop(true,true).slideDown();
},
function() {
$(this).children(".newstext").stop(true,true).slideUp();
}
);
CSS
.newsblock {
height: 200px;
overflow-y: auto;
}
Instead of closing a .newsentry when the cursor goes out of it, a solution can be to close it only when it enters another .newsentry or when it leaves #newsblock.
The scrollbar being part of #newsblock, the entry isn't closed anymore when you go on it.
EDIT: Following our discussion about the scroll issue, I added a step callback to the closing animation to make sure that the top of the .newsentry getting opened remains visible when the other entries are getting closed.
Here is a working example:
var $newsblock = $("#newsblock");
function closeAllNews(slideUpArgs){
return $(".newstext").stop(true).slideUp(slideUpArgs);
}
function openNews(news, slideDownArgs){
$(news).find(".newstext").stop(true).slideDown(slideDownArgs);
}
function ensureNewsTopVisible(news){
// Check if the top of the newsentry is visible...
var top = $(news).position().top;
if(top < 0){
// ...and if not, scroll newsblock accordingly.
$newsblock.scrollTop($newsblock.scrollTop() + top);
}
}
$(".newsentry").each(function(){
var $this = $(this);
// When the mouse enter a news entry...
$this.on("mouseenter", function(){
// ...close all opened entries (normally there is at most one)...
closeAllNews({
// (while making sure that the top of this entry remains visible
// at each step)
step: ensureNewsTopVisible.bind(null, $this)
});
// ...open this newsentry.
openNews($this);
});
});
// When the mouse get out of the newsblock, close all news.
$newsblock.on("mouseleave", closeAllNews);
.newstitle {
font-size: 2em;
}
.newstext {
display: none;
}
#newsblock {
max-height: 150px;
overflow: scroll;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="newsblock">
<div>
<div class="newsentry">
<div class="newstitle">News 1</div>
<div class="newstext"></div>
</div>
<div class="newsentry">
<div class="newstitle">News 2</div>
<div class="newstext"></div>
</div>
<div class="newsentry">
<div class="newstitle">News 3</div>
<div class="newstext"></div>
</div>
<!-- Etc. -->
</div>
</div>
<!-- Ignore the script below. It is just filling in the news' text. -->
<script>
$(".newstext").each(function(i, newstext){
$.get("http://baconipsum.com/api/?type=meat-and-filler&format=html¶s=5&num=" + i)
.then(function(ipsumHtml){
$(newstext).html(ipsumHtml);
});
});
</script>
Try this:
$(".newsentry, .newsblock").hover( // <-- changed
function() {
$(this).children(".newstext").stop(true,true).slideDown();
},
function() {
$(this).children(".newstext").stop(true,true).slideUp();
}
);
This makes sure the block stays open when you hover either over the header or the block itself.
Is that what you mean?
There would be a joke , if i am wrong .. what i thing just change your css as
/* not .newsblock **/
#newsblock {
height: 200px;
overflow-y: scroll;/* not auto*/
}
It will be a lot better if you use click operation instead of hover to slide down news text block because the user can accidentally hover over any of the news entry in order to reach for the scroll bar. I think you need a accordion like functionality. You can use the below code if you are fine with click instead of hover.
$(".newsentry").click(
function() {
$(".newstext").stop(true,true).slideUp();
$(this).children(".newstext").stop(true,true).slideDown();
}
);
Or use the below one to go with hover.
$(".newsentry").hover(
function() {
$(".newstext").stop(true,true).slideUp();
$(this).children(".newstext").stop(true,true).slideDown();
},
function(){}
);
This will not close the news text block until you accidentally hover over another news entry.
Im trying to have a div re-size so that the height stays the same width as the height.
The divs are constantly changing size,
The width changes size because of percentages, however the height is changed using Jquery.
Html
<div id="inner_container">
<div id="Sbox1" class="select_tile" > </div>
<div id="Sbox2" class="select_tile" > </div>
<div id="Sbox3" class="select_tile" > </div>
<div id="Sbox4" class="select_tile" > </div>
<div id="Sbox5" class="select_tile" > </div>
<div id="Sbox6" class="select_tile" > </div>
<div id="Sbox7" class="select_tile" > </div>
<div id="Sbox8" class="select_tile" > </div>
<div class="clr"> </div>
Css
#inner_container
{ width:98%; min-width:50%; max-width:1600px;
margin:auto; padding:1% 1%; text-align:center; background:;}
.select_tile
{ width:23%; min-width:50px; min-height:50px;
background:green; margin:1%; float:left;}
Jquery
$(window).resize(function() {
var ccW = $('.select_tile').width();
$('.select_tile').css("height", ccW);
});
This works fine for when the browser window is re-sized but the #inner_content div re-sizes when a button is pressed, so the height of the div.select_tile
stays the same as it was before the button press but the width changes.
I was wondering if there was an event that waits for a change in the width or for something to change.
basically I want the width and height at 1:1 ratio to stay the same but scale to the size of the browser window on any change on either property.
Any assistance on this would be much appreciated, Thanks
edit: added html
you could create your own event :)
$(function() {
// moved this out of the event so it doesn't
// do a DOM traversal every 300ms!!! :)
var $tiles = $('.select_tile');
// this is your own custom function, which can be triggered
// as you see below
$(window).on("resizeBoxes" , function(e,$selector) {
//set your box resize code here.
var ccW = $selector.width();
$selector.css("height", ccW);
});
// using 300 ms as it's not too short to kill a device,
// and not too long to show noticable lag.
// importantly though you want the resize event to
// be succinct and easy on cpu.
var resizeTimer = setInterval( function() {
$(window).trigger("resizeBoxes",$tiles);
}, 300);
$(window).on("resize", function(e) { $(window).trigger("resizeBoxes",$tiles); });
$("#button").on("click", function(e) { $(window).trigger("resizeBoxes",$tiles); });
// this next one might be best for you :)
$(window).on("mousemove", function(e) { $(window).trigger("resizeBoxes",$tiles); });
});
You have one solution here jquery-how-to-determine-if-a-div-changes-its-height-or-any-css-attribute with the setTimeOut() function but I would make the button trigger that change...
I can't come up with solution to my problem.
So I've got cool idea to make fancy looking user panel but can't figure out how to
make jquery work right ;). Here's the thing:
html:
<div id="content">
<div id="containerleft">
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
<div id="box3" class="box"></div>
<div id="box4" class="box"></div>
<div id="box5" class="box"></div>
<div id="box6" class="box"></div>
</div>
</div>
JS:
$(".box").click(function(){
$(this).css({'position' : 'absolute'}).animate({
width: '100%',
height : '100%'},300);
});
Here is how it work with css:
http://jsfiddle.net/85mJN/1/
What I'm trying to achieve is resize div from his position, to size of parent div, growing effect I would call.
As you can see, after .click div is moving to the left top corner, and then its fiting to parent, also its ruing whole thing by moving other guys. I've tried to mess around with .css('z-index': '999') for animated div, but that was a miss. Main goal is to expand div from his original position, above other div's, without moving them.
~ sandman
$(".box").click(function(){
var clone = $(this).clone().addClass('active');
var parent = $(this).parent();
var pos = $(this).position();
$(this).append(clone);
clone.css({'position' : 'absolute', left: pos.left + 'px', top: pos.top + 'px'}).animate({
width: '100%',
height : '100%',
top: 0,
left: 0
},300);
});
http://jsfiddle.net/85mJN/3/
Note that your box element should have static position so the appended box absolute position will be wrapped from the container.
UPDATE:
Added close on click while a box is active.
http://jsfiddle.net/85mJN/4/
ALSO i still think the best way to use CSS3 transition with toggleClass. It requires less code, it's much failsafe and it's smoother when your using complex divs as it's hardware accelerated. I would not worry about older browser, they won't animate but show the big box...
The movement shown in your example is a product of removing the clicked on div from the flow and then the other divs readjusting since they are floated.
A simple solution is to make the #containerleft{ overflow:hidden; ... }
However if that doesn't satisfy your needs making a clone works as well:
$('#containerleft').on("click", ".box", function(){
var $this = $(this);
console.log($this.css('position'));
if($this.css('position') === 'absolute'){
$this.animate({width:'0px',height:'0px'},300);
//$this.remove();
}
else {
$this.clone().appendTo($this.parent()).css({'position' : 'absolute'}).animate({
width: '100%',
height : '100%'},300);
}
});
http://jsfiddle.net/e4NG5/2/
i have 2 div's, left and right, the content in right div is setted dynamically so as its height, so i haven't specified its height in html, now what i want is the height of the left div should be equal to the right div, how to set the height of the left div as per the height of right div, using jquery, i tried
$("#leftDiv").height($("RightDiv").height());
this does not seems working, as i haven't specified the height of the right div in html.
is there any other wayout, apart from using tables.
Description
Looks like your selector for RightDiv is not right or you forgot to wait while the DOM is loaded.
Sample
Html
<div id="leftDiv" style="border:1px solid red">left div</div>
<div id="RightDiv" style="height:100px; border:1px solid red">right div</div>
jQuery
$(function() {
$("#leftDiv").height($("#RightDiv").height());
})
More Information
jSFiddle Demonstration
jQuery - .ready()
jQuery - .height()
Try this:
$("#leftDiv").height($("#RightDiv").get(0).scrollHeight);
try
var firstHeight = $("#RightDiv").height() + 'px';
$("#leftDiv").css("height", firstHeight);
$(function() {
if($("#RightDiv").height() > $("#leftDiv").height()){
$("#leftDiv").css("height", $("#RightDiv").height() + "px");
} else {
$("#rightDiv").css("height", $("#leftDiv").height() + "px");
}
}