Asked a similar question here and I received a satisfactory answer for the container box, but as it gets smaller, as you can see, the buttons still each jump to new line as the container "shrinks" to be replaced by another.
This is also true for the "incoming" box but it's not very noticeable and I imagine whatever the answer here is, it'll solve both.
I'd like it to look as if it's a totally smooth transition with nothing breaking:
As you can see the old "divs" break rank while the input doesn't seem to care all that much.
For what it's worth, they're both floats and the code looks like this: (incomplete but you get the idea)
<div class="box-padder">
<div class="step-container">
<div class="step step-1">
<h1 class="box-header">ENTER YOUR ZIP CODE</h1>
<input autocomplete="on" class="input" id="zip" maxlength="5" placeholder="Enter Zip Code" type="tel" value="83406" />
<div class="tcenter">
<div class="next first-next">NEXT <span class="gte">›</span></div>
</div>
</div>
<div class="step step-2">
<h1 class="box-header">FULL NAME</h1>
<input autocomplete="on" class="input" id="full_name" placeholder="Your Full Name" type="text" value="a b" />
<div class="tcenter">
<div class="back">BACK <span class="gte">‹</span></div>
<div class="next">NEXT <span class="gte">›</span></div>
</div>
</div>
Here's the (messy) code governing the transitions:
if (!window.animating && window.step < window.MAXSTEP) {
window.animating = true;
// Necessary for smooth transition; needs work
$('.step-' + window.step).css('float', 'left')
$('.step-' + window.step).css('width', '310px')
$('.step-' + window.step).css('overflow', 'hidden')
$('.step-' + (window.step + 1)).css('float', 'right')
// Start decreasing font size
$('.step-' + window.step).find('.box-header').animate({
'font-size': '9px'
}, sliderSpeedUp, function() {})
// Undo the changes please. For some reason you have to use animate. If you can figure out why,
// tell me because I have no f clue
$($('.step-' + window.step).find('.box-header')[0]).animate({ 'font-size': '23px', 'color': 'maroon' }, 250, function() {})
// Slide boxes
$('.step-' + window.step).slideLeftHide(sliderSpeedUp, function() {
// Buttons
setButtons();
window.animating = false;
});
$('.step-' + (window.step + 1)).slideLeftShow(sliderSpeedDown, function() {
// Buttons
setButtons();
setTimeout(function() {
window.animating = false;
}, 250);
window.step++;
});
}
Here's the sliders I got from this answer:
jQuery.fn.slideLeftHide = function(speed, callback) {
this.animate({
width: "hide",
paddingLeft: "hide",
paddingRight: "hide",
marginLeft: "hide",
marginRight: "hide"
}, speed, callback);
}
jQuery.fn.slideLeftShow = function(speed, callback) {
this.animate({
width: "show",
paddingLeft: "show",
paddingRight: "show",
marginLeft: "show",
marginRight: "show"
}, speed, callback);
}
Related
I am implementing the bootstrap slider, and involving TOP DOWN Approach to handle it i.e when the SUM slider is adjusted the value is propagated to both the sliders below it. And also the changes made to the bottom sliders will effect affects the SUM slider.
Everything is working fine, except when I am sliding the SUM slider, both the below sliders are starting from the same value, which I don't want to re-adjusted but to start from the same point of their current value.
Is there any way to fix that.
Here is the Working Fiddle.Try to slide the SUM slider, both the below slider will come to same point which I don't want. The SUM slider is to be distributed equally among two below but not from the same point i.e same value.
.html
<div class = "row">
<div class = "col-md-12">
<div class="wrapper4">
<p style = "text-align:center">
</div>
<div class = "col-md-12">
<div class = "col-md-4">
<div class="wrapper">
<hr />
<p>
SUM
</p>
<input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="80" data-slider-step="0.2" style="text-align: center"/>
<hr />
<input id="ex2" data-slider-id='ex2Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="0.1" data-slider-orientation="vertical" />
<input id="ex3" data-slider-id='ex3Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="0.1" data-slider-orientation="vertical" />
</div>
</div>
</div>
</div>
.js
$('#ex1').slider({
value : 17.5,
formatter: function(value) {
return 'AB: ' + value;
}
});
$('#ex2').slider({
value : 7.5,
tooltip_position:'bottom',
reversed : true,
formatter: function(value) {
return 'A: ' + value;
}
});
$('#ex3').slider({
value : 10,
reversed : true,
formatter: function(value) {
return 'B: ' + value;
}
})
// If you want to change slider main
$("#ex2,#ex3").on("slide", function() {
$('#ex1').slider('setValue', $('#ex2').slider('getValue') + $('#ex3').slider('getValue'));
});
// TOP DOWN APPROACH
$("#ex1").on("slide", function() {
$('#ex2,#ex3').slider('setValue', $('#ex1').slider('getValue')/2);
});
You can inverse the addition in the callback function for the slide event on $ex1 and keeping track of the values of $ex2 and $ex3. I've set the second parameter to setValue to false. According to the docs this should ensure not to trigger the slide event on those sliders. This is why i'm updating ex2Val and ex3Val on the slideStop event of $ex1.
Hope that makes sense. Just take a look at the snippet and you'll get the idea.
;)
var $ex1 = $('#ex1');
var $ex2 = $('#ex2');
var $ex3 = $('#ex3');
var ex2Val = 7.5;
var ex3Val = 10.5;
$ex1.slider({
value : ex2Val + ex3Val,
formatter: function(value) {
return 'AB: ' + value;
}
});
$ex2.slider({
value : ex2Val,
tooltip_position:'bottom',
reversed : true,
formatter: function(value) {
return 'A: ' + value;
}
});
$ex3.slider({
value : ex3Val,
reversed : true,
formatter: function(value) {
return 'B: ' + value;
}
})
// If you want to change slider main
$ex2.on("slide", function(evt) {
ex2Val = evt.value;
$ex1.slider('setValue', (ex2Val + ex3Val));
});
$ex3.on("slide", function(evt) {
ex3Val = evt.value;
$ex1.slider('setValue', (ex2Val + ex3Val));
});
// TOP DOWN APPROACH
$ex1.on("slide", function(evt) {
$ex2.slider('setValue', evt.value - ex3Val, false);
$ex3.slider('setValue', evt.value - ex2Val, false);
});
$ex1.on("slideStop", function(evt) {
ex2Val = $ex2.slider('getValue');
ex3Val = $ex3.slider('getValue');
});
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
#import url('https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/7.1.0/css/bootstrap-slider.css');
.wrapper {
padding : 0px;
margin-top: 0px;
}
.wrapper4 {
padding : 0px 30px 0px 30px;
margin-top: 10px;
}
#ex2Slider, #ex3Slider, #ex4Slider, #ex5Slider, #ex17Slider{
margin-right :20px;
}
#ex1Slider .slider-selection {
background: #ff6666;
}
#ex1Slider .slider-handle, #ex2Slider .slider-handle, #ex3Slider .slider-handle {
background: #ff6666;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/7.1.0/bootstrap-slider.js"></script>
<div class = "row">
<div class = "col-md-12">
<div class = "col-md-4">
<div class="wrapper">
<hr />
<p>SUM</p>
<input id="ex1" type="text" style="text-align: center"
data-slider-id='ex1Slider'
data-slider-min="0" data-slider-max="80"
data-slider-step="0.2"/>
<hr />
<input id="ex2"
data-slider-id='ex2Slider'
type="text"
data-slider-min="0"
data-slider-max="20"
data-slider-step="0.1"
data-slider-orientation="vertical" />
<input id="ex3"
data-slider-id='ex3Slider'
type="text"
data-slider-min="0"
data-slider-max="20"
data-slider-step="0.1"
data-slider-orientation="vertical" />
</div>
</div>
</div>
</div>
So I have 4 panels on my website that look like folders with tabs. They are all places separate (top left, bottom left, top right, bottom right). When I press the expand button on one of them the fold effect makes the other 3 fold out like folders. So my issue here is I'm not to experienced with jquery just kind of got into it. So 1, the tabs overlap the expanded div then eventually fade out. When I minimize it the other folder come back but they kind of all jump around and eventually end of in their right spots but it looks so messy.
So can anyone see what I'm doing wrong?
Here is the jquery
$("#button3").click(function () {
if (a > 0) {
$(".schedule, .personal, .caseLoad, .notifications").css({
"width": "100%",
"position": "static",
"margin-top": "0px",
"height": "300px"
}, 3000);
$("#effect, #effect1, #effect2, #effect3").show("fold", 1000);
$('[id="calculator"]').hide();
$("#personalTab, #notificationsTab, #scheduleTab, #caseTab").show("fade", 1000);
$("#navPersonal, #navNotifications, #navSchedule, #navCase").hide("fade", 1000);
$("#scheduleTab, #caseTab, #notificationsTab, #personalTab").css({
"width": "20%",
"position": "static",
"right": "20%"
}, 3000);
a = a - 1;
n = 0;
}
else {
$("#effect, #effect1, #effect3").hide("fold", 1000);
$("#scheduleTab, #caseTab, #navNotifications, #personalTab").hide("fade", 1000);
$("#navSchedule, #navCase, #notificationsTab, #navPersonal").show("fade", 1000);
$(".notifications").css({
"height": "600px",
"width": "200%",
"position": "absolute",
"margin-top": "20px",
"right": "20px"
}, 3000);
$("#notificationsTab").css({
"width": "100%",
"position": "absolute",
"right": "92%"
}, 3000);
a = a + 1;
n = n + 1;
}
});
and the panel to one of the panels. They are all similar in size and jquery just different button click
<div class="col-xs-12 col-md-6" style="margin-top: 10px;">
<div id="notificationsTab" class="tab" style="background-color: #AD816B;">
<a style="color: black; text-decoration: none;"> Notification</a>
<div id="button3" class="button4">
</div>
</div>
<div class="toggler2">
<div id="effect2">
<asp:UpdatePanel ID="notifications" runat="server" class="notifications" UpdateMode="Conditional"
ChildrenAsTriggers="true">
<ContentTemplate>
<div class="mCustomScrollbar content3 fluid light">
<table>
<tr>
<td style="width: 15%">
Action
</td>
<td style="width: 55%">
Description
</td>
<td style="width: 30%">
Date Added
</td>
</tr>
</table>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</div>
Will be displaying a jquery popup many times through out my project. I would like to populate the label inside the div with a different message each time so for eg...
var popUpMessageSave = "You have successfully saved.";
loadPopUp(popUpMessageSave);
var popUpMessageFail = "You have failed to save.";
loadPopUp(popUpMessageFail);
not sure how to populate the label each time??
<div style="display: none;">
<div id="saveDialogSingleFeature" title="Save Complete">
<input type="text" title="Name" value=""/>
<label></label>
</div>
</div>
function loadPopUp(popUpMessage) {
$("#saveDialogSingleFeature").dialog({
width: "auto",
height: "auto",
position: { my: "top", at: "bottom", of: $("header") },
show: { effect: "slideDown" },
hide: true,
closeOnEscape: true
}).parent().appendTo("form:first");
//clear label and add new
$('input:text').next('label').html("");
$(this).next('label').html(popUpMessage);
setTimeout(function () {
$("#saveDialogSingleFeature").dialog('close')
}, 5000);
}
UPDATE
Added an ID to the DIV and add empty and append to the loadPopUpMessage()
$("#popUpLabel").empty();
$("#popUpLabel").append("some Text");
<input type="text" id="popUpLabel" value=""/>
I work with responsivefilemanager and fancybox for upload and add images_url and image preview gallery.when i click image in filemanager fancybox close and add preview to image box(NO IMAGE) BUT in fancybox 2.1.5 when i click in image fancybox not closed and not show image preview. my code work with fancybox 1.3.4 but with last version 2.1.5 not worked.
JS:
$(document).ready(function() {
$(function() {
$('.thumbcheck').tooltip();
$('#btn-sub').click(function() {
$('#name').removeClass('has-error');
$('#err_name').hide();
name= $('#gallery_name').val();
if(name.length==0){
$('#name').addClass("has-error");
$('#err_name').show();
}
else
$("#form-gallery").submit();
});
$('#append').on('click', '.btn-remove', function() {
var parent = $(this).closest('.form-group');
var input = parent.find('.width100').next('input').val();
if($('input[name=cover]').val()==input ){
$('input[name=cover]').val('');
}
parent.remove();
});
$("#checkall").on('ifChecked', function(event) {
//Check all checkboxes
$("input[type='checkbox']", ".table-striped").iCheck("check");
$('#action-box').show();
});
$("#checkall").on('ifUnchecked', function(event) {
//Check all checkboxes
$("input[type='checkbox']", ".table-striped").iCheck("uncheck");
$('#action-box').hide();
});
$(".checkbox").on('ifChecked', function(event) {
$('#action-box').show();
});
$(".checkbox").on('ifUnchecked', function(event) {
var length = $(".table-striped input[type='checkbox']:checked").length;
if ($(".table-striped input[type='checkbox']:checked").length === 0) {
$('#action-box').hide();
$("#selectAll").iCheck("uncheck");
}
});
$('.img-thumb').next().change(function() {
$('.img-thumb').attr('src', $('.img-thumb').next().val())
});
$('#btnAdd').click(function() {
var form_group = $('#form-group').html();
var new_id = rand();
var baseurl = $('#baseurl').html();
$('#upload').clone().attr('id', new_id);
$('#upload-img').clone().attr('id', 'img-' + new_id);
$('.thumbcheck').clone().attr('data-id',new_id);
$('#append').append(form_group);
$('#upload').attr('id', new_id);
$('#upload-img').attr('id', 'img-' + new_id);
$('.thumbcheck').eq(-2).attr('data-id',new_id);
$('#' + new_id).next('a').next('a').attr('href', baseurl + new_id);
$('#' + new_id).next('a').next('a').fancybox({
'width': '75%',
'height': '90%',
'autoScale': false,
'transitionIn': 'none',
'transitionOut': 'none',
'type': 'iframe',
onClosed: function() {
var imgurl = $('#'+new_id).val();
var check = $('#append').find('.thumbcheck[data-id='+new_id+']').find('i');
console.log($('#append').find('.thumbcheck[data-id='+new_id+']'));
console.log(check);
console.log(check.attr('class'));
if(check.attr('class')=='fa icon-circle-blank'){
console.log('sd');
$('#thumb').val(imgurl);
}
if (imgurl.length > 0) {
$('#img-' + new_id).attr('src', ''+imgurl);
}
}
});
$('.thumbcheck').tooltip();
});
$(document).on('click','.thumbcheck',function(){
var value = $('#'+$(this).data('id')).val();
if($(this).find('i').attr('class')=='fa icon-circle'){
$(document).find('.thumbcheck i').attr('class','fa icon-circle');
$(this).find('i').attr('class','fa icon-circle-blank');
$('input[name=cover]').val(value);
}
else {
return false;
}
});
$('.boxGetFile').fancybox({
'width': '75%',
'height': '90%',
'autoScale': false,
'transitionIn': 'none',
'transitionOut': 'none',
'type': 'iframe',
onClosed: function(link, index) {
var id = $(link).data('id');
var imgurl = $('#'+id).val();
var check = $(document).find('.thumbcheck[data-id='+id+']').find('i');
if(check.attr('class')=='fa fa-circle'){
$('input[name=cover]').val(imgurl);
}
if (imgurl.length > 0) {
$('#img-' + id).attr('src', ''+imgurl);
}
}
});
});
function rand() {
var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for (var i = 0; i < 8; i++)
text += possible.charAt(Math.floor(Math.random() * possible.length));
return text;
}
});
HTML:
<div class="form-group">
<label class="col-sm-3 control-label"></label>
<div class="col-sm-9">
<a class='btn btn-primary btn-xs' id='btnAdd'>Add Image</a>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
</div>
</div>
</div>
</div>
</div>
<div id='baseurl' style="display:none">http://madenade.besaba.com/file/filemanager/dialog.php?type=2&field_id=<</div>
<div style="display: none;" id='form-group'>
<div class="form-group custom-cols">
<div class="col-sm-12 control-label">
<div class="col-sm-2">
<div class="input-append">
<div class='col-sm-10 no-pad'><img src="data:image/png;base64,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" id='upload-img' class="width100" />
<input name="image_url[]" id="upload" type="text" value="" style='display: none'>
<a class="width24 thumbcheck" data-toggle="tooltip" data-placement="bottom" title="Gallery Cover" data-id=""><i class="fa fa-circle-o"></i></a>
<a class="col-sm-8 no-pad boxGetFile"><h6>select image</h6></a>
</div>
</div>
</div>
<div class="col-sm-7 padding-left-8">
<input type="text" name='image_title[]' class="form-control" placeholder='Image title' />
<input type="text" name='image_alt[]' class="form-control" placeholder='Image alt' />
</div>
<div class="col-sm-1">
</div>
How do can i fix my problem ?
Worked Demo with fancybox 1.3.4 HERE
NOTWorked Demo with fancybox 2.1.5 HERE
NOTE: in demo please click in add image
In each click image I see this error in firebug console:
I think the elements provided in the question are not enough to provide an accurate answer but for the bounty I will guess ;)
After a quick look at the source code of your (none working) DEMO using fancybox v2.1.5, I found some issues you may need to fix in in order to have a working page :
1). You don't have a proper DOCTYPE (I meant, not DOCTYPE at all)
2). You have a stray </div> closing tag (line 179) just before the <div id="baseurl">
3). You have a stray <! opening (sort of) conditional comment (line 204)
4). Yo DON'T have a closing </html> tag
5). The base url issue:
You have this html line
<div id='baseurl' style="display:none">http://madenade.besaba.com/file/filemanager/dialog.php?type=2&field_id=<</div>
Notice at the end of the line &field_id=<</div> : the extra < I think is a typo, isn't it?.
Then you have this variable:
var baseurl = $('#baseurl').html();
... which actually returns :
http://madenade.besaba.com/file/filemanager/dialog.php?type=2&field_id=<
If you run that url directly in your browser (out of fancybox) it does return the same js error while selecting the image in fancybox. What I think is the escaped html entities are somehow messing with the functionality of responsive file manager.
For instance, if you open the url without escaping the html entities (in a new tab/window) like :
http://madenade.besaba.com/file/filemanager/dialog.php?type=2&field_id=s7cJMxQl
...(excluding the < typo), the only error is when triggering the $.fancybox.close() method, which it does make sense.
I would recommend you to do either :
var baseurl = $("#baseurl").text(); // don't escape html entities
or set the value in a data attribute for a cleaner code like
<div id="baseurl" data-base="http://madenade.besaba.com/file/filemanager/dialog.php?type=2&field_id=" style="display:none"></div>
... then the variable
var baseurl = $("#baseurl").data("base");
I am using jQuery miniColors colorpicker but in the sample code the picker appears right next to the field and button, in my case it appears at the very bottom of my document, it is as if it can't read in the position data of the button calling it.
Anyone had a similar issue with this plugin?
Here is what my code looks like (before jQuery initializes this as a color-picker)
<p style='position:absolute;top:0px;left:0px;margin-left:10px;'>
<input type='text' class='color-picker miniColors' name='data_0' id='data_0' size='6' value='".$data[0]."' />
</p>
. And after I run this code on it.
$('#data_0').miniColors({
change: function(hex, rgb) { $('#slide_bg').css("background-color",hex); }
});
. It looks like this.
<p style="position:absolute;top:0px;left:0px;margin-left:10px;">
<input type="text" class="color-picker miniColors" name="data_0" id="data_0" size="6" value="#ffffff" maxlength="7" autocomplete="off">
<span class="miniColors-triggerWrap">
<a class="miniColors-trigger" style="background-color: #ffffff" href="#"></a>
</span>
</p>
. And the actual colorpicker gets inserted at the very last of my (so right before the and looks like this:
<div class="miniColors-selector color-picker miniColors" style="left: 116px; ">
<div class="miniColors-hues">
<div class="miniColors-huePicker" style="top: 0px; "></div>
</div>
<div class="miniColors-colors" style="background-color: rgb(255, 0, 0); ">
<div class="miniColors-colorPicker" style="top: -5px; left: -5px; ">
<div class="miniColors-colorPicker-inner"></div>
</div>
</div>
</div>
. And appears below the footer of my page =(
As you can see it has a value for left:116px but nothing for the vertical positioning.
Please consider trying MiniColors 2.0, which changes the way positioning is handled for the dropdown. This version is a complete rewrite of the original one. We also added a number of new features that you may find useful.
Try putting the field inside a paragraph and define the position of paragraph with css and it will work.
E.g. -
<p style="position: absolute; left: 100; top: 100; margin-left: 10px;">
<input type="input" name="color-picker" class="color-picker" size="7" />
</p>
SOLUTION:
This is how I solved it. Solution is a bit jerky though.
I used show callback and add remove classes based on view
// add jquery function removeClassPrefix
$.fn.removeClassPrefix = function(prefix) {
this.each(function(i, it) {
var classes = it.className.split(' ').map(function(item) {
return item.indexOf(prefix) === 0 ? '' : item;
});
it.className = classes.join(' ');
});
return this;
};
// add more selector expressions to jquery
$.extend($.expr[':'], {
'off-top': function(el) {
return $(el).offset().top < $(window).scrollTop();
},
'off-right': function(el) {
return $(el).offset().left + $(el).outerWidth() - $(window).scrollLeft() > $(window).width();
},
'off-bottom': function(el) {
return $(el).offset().top + $(el).outerHeight() - $(window).scrollTop() > $(window).height();
},
'off-left': function(el) {
return $(el).offset().left < $(window).scrollLeft();
}
});
// use show event
$('#div_id').miniColors({
theme: 'bootstrap',
show: function() {
var $input = $(this);
var $minicolors = $input.parent();
var $panel = $minicolors.find('.minicolors-panel');
var classPrefix = 'minicolors-position-';
$minicolors.removeClassPrefix(classPrefix);
if ($panel.is(':off-top')) {
$minicolors.addClass(classPrefix + 'bottom');
}
if ($panel.is(':off-bottom')) {
$minicolors.addClass(classPrefix + 'top');
}
if ($panel.is(':off-left')) {
$minicolors.addClass(classPrefix + 'right');
}
if ($panel.is(':off-right')) {
$minicolors.addClass(classPrefix + 'left');
}
}
});