I have a jQuery slider that is modifying a div css on slide. All is working perfectly, however when I add a new div the settings from the slider are not being attached to the new div until the slider is moved again.
HTML
<div class="inputWrap hidden">
<input class="inputNumber" type="text" value="5">
<div class="slider"></div>
</div>
<div class="boxout">
<div class="box"></div>
</div>
<div class="add">
add box
</div>
CSS
.boxout {
width: 200px;
height: 200px;
}
.box {
width: 10%;
height: 10%;
background: black;
}
JQUERY
$(".slider").slider({
min: 0,
max: 10,
slide: function(event, ui) {
console.log("slide", ui);
$(".box").css("width", 10 + ui.value * 2 + "%");
$(this)
.parent()
.find(".inputNumber")
.val(ui.value);
},
create: function(event, ui) {
$(this).slider(
"value",
$(this)
.parent()
.find(".inputNumber")
.val()
);
}
});
var slider = $(".slider");
slider
.slider("option", "slide")
.call(slider, null, { value: slider.slider("value") });
$(".add").click(function() {
$(".boxout").append('<div class="box"></div>');
});
FIDDLE
In this fiddle you can see how I have everything setup perfectly, but when a new div is added it doesn't match the above box until the slider is used again
http://jsfiddle.net/or5fhsvh/1/
Thanks for your help.
To achieve what you want you need to modify your click function on .add class.
$(".add").click(function() {
var slideValue = parseInt($('.inputNumber').val());
var boxWidth = (10+(slideValue*2)) + '%';
$(".boxout").append('<div class="box" style="width:'+boxWidth+'"></div>');
});
It will get the value of the slider, calculate the desired width of the box and then append that box in the UI. This way the width is maintained for all boxes that you are adding with respect to the slider values. And you don't need to slide the slider to reflect that change.
Here is the working JSFIDDLE
Your add function just creates 1 block and doesn't apply the style to it. Whereas all other blocks have their box class' width overridden by inline styles.
You can change your add function to
$(".add").click(function() {
let extraStyle = 'width: ' + $(".box")[0].style.width;
$(".boxout").append('<div class="box"' + extraStyle + '></div>');
});
Related
I tried to get the value of jquery-ui slider on click of slider track. But I couldn't able to get the value of slider. I'm able to get the value on slide but I couldn't able to get it on click.
<div id="slider"></div>
var handlers = [25, 50, 75];
$('#slider').on('click',function(e) {
//code to get the value
});
/*While sliding I'm getting the value*/
$("#slider").slider({
min:0,
max:100,
steps:20,
values: handlers,
slide: function (evt, ui) {
console.log(ui.values);
}
});
Welcome to Stack Overflow. jQuery UI Slider adds a number of elements and you'll have to be less ambiguous. If you look at the rendered DIV that is #slider, you will see it has a height of 0 basically. So when the User clicks the handle or the bar, the click event may not bubble up to the #slider element.
Consider the following code:
$(function() {
function log(str) {
$("#log").prepend("<p>" + str + "</p>");
}
var handlers = [25, 50, 75];
/*While sliding I'm getting the value*/
$("#slider").slider({
min: 0,
max: 100,
steps: 20,
values: handlers,
slide: function(evt, ui) {
log("Slide: " + ui.values.join(","));
$(".ui-slider-handle", this).each(function(i, el) {
$(el).html(ui.values[i]);
});
}
}).on("click", ".ui-slider-handle", function(e) {
log("Click: " + $(e.target).parent().slider("values").join(","));
});
});
#log {
width: 100%;
height: 7em;
font-size: 65%;
overflow: auto;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="content">
<div id="slider" class="ui-helper-clearfix"></div>
</div>
<div id="log" class="ui-widget"></div>
In the Log you can see both Click and Slide activity. You may consider using mousedown or mouseup events if you want to be more specific about when the callback should be triggered.
Following is my script to show and hide content on click of a div.
I also want to disable other div elements until the first div is clicked again.
$('.leader-pic-wrapper').click(function(){
var $el = $(this);
var bottom = $el.position().top + ($el.outerHeight(true) - 30);
$('.leader-pic-overlay').toggle();
$('.leader-pic-wrapper').not(this).toggleClass('inactive-leader');
/*$(".inactive-leader").unbind("click");*/
$(".inactive-leader").off("click");
$(this).next('.leader-profile-wrapper').css('top', bottom);
$(this).next('.leader-profile-wrapper').toggle();
});
I don't understand how to toggle the unbind statement. I tried toggling a class called inactive-leader and apply unbind to that class, but its not working.
Basically I want to set unbind on
leader-pic-wrapper
Thanks
My option is approach this with a different view. Without bind and unbind the event just exclude the items with the first selector using :not(), and as you are doing add a class to the elements you want to exclude; please check this snippet:
$('body').on('click', '.box:not(".disabled")', function() {
if ($('.disabled').length) {
$(this).siblings().removeClass('disabled')
$(this).animate({
'width': '80px'
}, 300)
} else {
$(this).siblings().addClass('disabled')
$(this).animate({
'width': '160px'
}, 300)
}
})
.box {
display: inline-block;
height: 80px;
width: 80px;
background: tomato;
margin: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
This logic on your code will look like this:
//Delegate the event since we are add/remove the class
//Target the elements that aren't inactive
$('body').on('click', '.leader-pic-wrapper:not(".inactive-leader")', function() {
var $el = $(this);
var bottom = $el.position().top + ($el.outerHeight(true) - 30);
//Check if exists some inactive elements to handle 1/2 click
if ($('.inactive-leader').length) {
//Target other leader-pic-wrapper elements, use sibling or the method you need based on your markup
$(this).siblings().removeClass('inactive-leader')
//...ACTIONS - This will act as the second click
} else {
$(this).siblings().addClass('inactive-leader')
//...ACTIONS - This will act as the first click
}
});
I am trying to make a div that expands in height when clicked on, and then goes back to its original size when clicked on again. I have tried to use .toggle but whenever I do every div (with the related class) completely vanishes. I posted a code pen below so you can easily view the codes effects.
http://codepen.io/JoshuaHurlburt/pen/JKqAPr
<div>
<div class='box' id='emailVer'>
<h2 id='payText'>PAYMENT</h2>
</div>
<div class='box' id='accCust'>
<h2 id='acText'>ACCOUNT CUSTOMIZATION</h2>
</div>
<div class='box' id='pay'>
<h2 id='evText'>EMAIL VERIFICATION</h2>
</div>
</div>
JS:
var main = function(){
$('.box').click(function() {
$(this).animate({
height: "300px"
},200 );
}
)}
$(document).ready(main);
I decided to leave out the CSS, but I will edit it in if anyone thinks it is important to the solution
There's probably a better solution than this but here is one-
Replace your script file with this
var main = function(){
$('.box').click(function() {
var el = $(this);
if (!el.hasClass('selected')) {
el.animate({
"height": "300px"
}, 200)
el.addClass("selected");
} else {
el.animate({
"height": "75px"
}, 200);
el.removeClass("selected");
}
}
)}
$(document).ready(main);
What you need is a way to track what has already been selected (and animated) and what has not. I chose to add a class (selected) and check to see if the element has that class. If it has not yet been selected, animate to 300px and add the class, else animate back to 75px and remove it.
Try .slideToggle
$( "#clickme" ).click(function() {
$( "#book" ).slideToggle( "slow", function() {
// Animation complete.
});
});
The toggle functions in jQuery toggle the visibility of an element which is why they disappear.
I believe what you are looking for is .toggleClass. See http://api.jquery.com/toggleclass/. You can then create another class with the expanded height properties. Which will be toggled on and off on click.
Adding height to your existing transition property on box will handle the animation.
CSS
.box {
width:300px;
height:75px;
margin:0 auto;
-webkit-transition:box-shadow 1s, height 1s;
transition: box-shadow 1s, height 1s;
}
.expanded {
height: 300px;
}
JS
var main = function(){
$('.box').click(function() {
$(this).toggleClass('expanded');
}
)};
$(document).ready(main);
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 have a very odd problem that i cant seem to crack, I have sliding divs like in y previous question. Now I am trying to implement a auto height feature, so far it works perfectly, the only problem i am facing is that it only animate the height of the wrapper after the first initial click.
So Basically, if you click any link the first time, the height just kind of snaps in place, but after that anything you click animates the height perfectly.
And finally IE8 is a browser i have to unfortunately support, and then when clicked the div expands super high and then just snaps back to where its meant to be.
JSFIDDLE DEMO
And here is the code:
HTML:
<nav>
page 1
page 2
page 3
</nav>
<div class="wrapper">
<div id="page-1" class="page">
<div class="page-container">
<h3>page 1</h3>
<div>Simulated content heigher than 100%</div>
</div>
</div>
<div id="page-2" class="page">
<div class="page-container">
<h3>page 2</h3>
<div>Simulated content heigher than 100%</div>
<div>Simulated content heigher than 100%</div>
<div>Simulated content heigher than 100%</div>
<div>Simulated content heigher than 100%</div>
<div>Simulated content heigher than 100%</div>
</div>
</div>
<div id="page-3" class="page">
<div class="page-container">
<h3>page 3</h3>
<div>Simulated content heigher than 100%</div>
</div>
</div>
</div>
CSS:
html, body {
height: 100%;
margin: 0;
overflow-x:hidden;
position:relative;
}
nav{
position:absolute;
top:0; left:0;
height:30px;
}
.wrapper {
background: #263729;
}
.page {
float:left;
background: #992213;
min-height: 100%;
padding-top: 30px;
}
#page-1 {
background: #0C717A;
}
#page-2 {
background: #009900;
}
#page-3 {
background: #0000FF;
}
a {
color:#FFF;
}
a.selected{
color: red;
}
JavaScript:
jQuery(document).ready(function () {
var pages = jQuery('.page'),
wrapper = jQuery('.wrapper'),
menuItems = jQuery('a.scrollitem'),
wrapperWidth = 100 * pages.length,
slideWidth = 100/pages.length;
jQuery.each(pages, function (index, value) {
var page = jQuery(this);
var pageContainer = jQuery('#'+page.attr('id')+' > .page-container');
pageContainer.data('originHeight', page.outerHeight());
});
wrapper.css({width:wrapperWidth + '%', height:'auto', marginLeft:0});
pages.width(slideWidth + '%');
menuItems.click(function(){
var menuItem = jQuery(this),
page = jQuery(menuItem.attr('href')),
pageContainer = jQuery('#'+page.attr('id')+' > .page-container'),
height = pageContainer.data('originHeight'),
slideNumber = page.index('.page'),
margin = slideNumber * -100 + '%';
menuItems.removeClass('selected');
menuItem.addClass('selected');
wrapper.animate({marginLeft: margin, height: height},{
duration: 1000,
start: function () {
page.animate({height:height},1000);
},
complete: function () {
pages.css({height:1,overflow:'hidden'});
jQuery(this).css({height:'auto'});
page.css({height:'auto',overflow:''});
}
});
return false;
});
});
Any Help Would be Fantastic.
Cracked:
http://jsfiddle.net/ugZST/2/
Just add
page.css("height", 1);
before animating the page
jQuery(document).ready(function () {
var pages = jQuery('.page'),
wrapper = jQuery('.wrapper'),
menuItems = jQuery('a.scrollitem'),
wrapperWidth = 100 * pages.length,
slideWidth = 100/pages.length;
jQuery.each(pages, function (index, value) {
var page = jQuery(this);
var pageContainer = jQuery('#'+page.attr('id')+' > .page-container');
pageContainer.data('originHeight', page.outerHeight());
});
wrapper.css({width:wrapperWidth + '%', height:'auto', marginLeft:0});
pages.width(slideWidth + '%');
menuItems.click(function(){
var menuItem = jQuery(this),
page = jQuery(menuItem.attr('href')),
pageContainer = jQuery('#'+page.attr('id')+' > .page-container'),
height = pageContainer.data('originHeight'),
slideNumber = page.index('.page'),
margin = slideNumber * -100 + '%';
menuItems.removeClass('selected');
menuItem.addClass('selected');
page.css("height", 1);
wrapper.animate({marginLeft: margin, height: height},{
duration: 1000,
start: function () {
page.animate({height:height},1000);
},
complete: function () {
pages.css({height:1,overflow:'hidden'});
jQuery(this).css({height:'auto'});
page.css({height:'auto',overflow:''});
}
});
return false;
});
});
Try this Fiddle
I just added this line during the init:
pages.css({height: $(pages[0]).height()});
Update
Just set the height of the inactive pages to 1 as the complete does: Fiddle
if (!$('a.scrollitem[href="' + '#' + page.attr('id') + '"]').hasClass('selected'))
page.css({height: 1});
I think what's happening is that the 2nd div seems to "pop" open when clicking a nav link because the height of this div is not being set explicitly at the outset, and the rendered content in this div simply takes up that amount of height, making the div that tall. Once you explicitly set the height of this div via your animation, that problem no longer exists because the explicit CSS height declaration on the div overrides this issue. For example, notice that when you click "page 3" you see the 2nd div "pop" open, but the then the height animation seems to work on the page 3 div. I think you will need to explicitly set the height on your page-container divs ahead of time, either via CSS, or at the beginning of your click handler (maybe use some overflow-y: hidden?), and potentially fix any issues this may cause in your JS height calculations.
Your js initialisation for wrapper's css seems to be wrong. Replace it with
wrapper.css({width:wrapperWidth + '%', marginLeft:0,height:pages.first().outerHeight()});
That works for me.
Add in your css
.wrapper {
background: #263729;
overflow-y: hidden
}
And that works smoothly