As soon as im clicking on the div it is moving offscreen, but the second div isn't showed.Secondaly,I want this transition to happen on click of "click to slide two happen" on both.Here is the link to the fiddle
http://jsfiddle.net/ykbgT/10110/
Any help would be great. Thanx in advance
$('.box').click(function() {
$('.box').each( function() {
if ($(this).offset().left < 0) {
$(this).css("left", "150%");
}
});
$(this).animate({
left: '-50%'
}, 500);
if ($(this).next().size() > 0) {
$(this).next().animate({
left: '50%'
}, 500);
} else {
$(this).prevAll().last().animate({
left: '50%'
}, 500);
}
});
Related
Code is as below
chart: {
type: "funnel",
marginBottom: 25,
backgroundColor: "transparent",
events: {
load: function() {
var chart = this;
Highcharts.each(chart.series[0].data, function(p, i) {
chart.options.labels.items.push({
html: "less confident" + i,
style: { left: 550, top: 50 }
});
p.dataLabel.attr({
x: (chart.plotWidth - chart.plotLeft) / 2,
"text-anchor": "middle"
});
});
}
}
},
I see that you're trying to add a label for every point. Highcharts has build in functionality for this called data labels: https://api.highcharts.com/highcharts/series.line.dataLabels
Another approach is to use SVGRenderer.label: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#label
So there is this known issue with modal on iOS, when the modal is enabled swiping up/down will scroll the body instead of the modal.
Using bootstrap 3.3.7
Tried to google it, most suggested adding
body.modal-open {
overflow: hidden !important;
}
but it doesn't work.
Some suggested,
body.modal-open {
position: fixed;
}
But background will jump to the top of the page.
So for now I am using,
body.modal-open {
overflow: hidden !important;
position: fixed;
width: 100%;
}
#exampleModal {
background: black;
}
As a work-around so the jump can't be seen(but still noticeable)
Is there other solutions to this?
This is the site i am working on http://www.einproductions.com/
I've taken the solutions of #Aditya Prasanthi and #JIm, since one fixes the background-scrolling and the other fixes the skip-to-the-top after closing the modal, and turned them into one bare-minimum JS script:
let previousScrollY = 0;
$(document).on('show.bs.modal', () => {
previousScrollY = window.scrollY;
$('html').addClass('modal-open').css({
marginTop: -previousScrollY,
overflow: 'hidden',
left: 0,
right: 0,
top: 0,
bottom: 0,
position: 'fixed',
});
}).on('hidden.bs.modal', () => {
$('html').removeClass('modal-open').css({
marginTop: 0,
overflow: 'visible',
left: 'auto',
right: 'auto',
top: 'auto',
bottom: 'auto',
position: 'static',
});
window.scrollTo(0, previousScrollY);
});
It's, of course, possible and even adviced to use a class to set and unset the CSS for the body, however, I choose this solution to resolve a problem just in one place (and not require external CSS as well).
refer to Does overflow:hidden applied to <body> work on iPhone Safari?
Added .freezePage to html and body when modal is showing
$('.modal').on('shown.bs.modal', function (e) {
$('html').addClass('freezePage');
$('body').addClass('freezePage');
});
$('.modal').on('hidden.bs.modal', function (e) {
$('html').removeClass('freezePage');
$('body').removeClass('freezePage');
});
the CSS
.freezePage{
overflow: hidden;
height: 100%;
position: relative;
}
My solution:
scrollPos = window.scrollY - get current scroll position.
body { position: fixed;
margin-top: -**scrollPos** px);
}
Then modal is closed:
body {position: "";
margin-top: "";
}
and return scroll position to point before opened modal window:
window.scrollTo(0, scrollPos);
None of the above answers worked for me, the modal kept disappearing and I ended up with a brute force approach which is ugly and inefficient but works !
$('body').on('touchstart touchmove touchend', e => {
let scrollDisabled=$('.scroll-disable');
if (scrollDisabled.length > 0 && scrollDisabled.has($(e.target)).length===0) {
e.preventDefault();
e.stopPropagation();
}
});
setInterval(() => $('.modal:visible').css('top', '20px'), 100);
$(document).on({
'show.bs.modal': e => $(e.target).addClass('scroll-disable'),
'hidden.bs.modal': e => $(e.target).removeClass('scroll-disable')
}, '.modal');
Import this file and use the enableBodyScroll and disableBodyScroll functions to lock and unlock the body scroll.
using css top property will exactly navigate back to the previous position. It eliminate the drawback of dealing with the floating point margin.
const toggleBodyScroll = (position, initialMargin) => {
document.body.style.position = position;
document.body.style.top = initialMargin;
};
const getScrolledPosition = () => {
return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
};
const scrollToPrevPosition = (scrolledPosition) => {
window.scrollTo(0, scrolledPosition);
};
const getWindowTop = () => {
return window.getComputedStyle(document.body).getPropertyValue('top');
};
export const disableBodyScroll = () => {
toggleBodyScroll('fixed', `-${getScrolledPosition()}px`);
};
export const enableBodyScroll = () => {
const scrollPosition = 0 - parseInt(getWindowTop());
toggleBodyScroll('static', 0);
scrollToPrevPosition(scrollPosition);
};
This will prevent page scrolling while Modal is opened on iOS mobile
if ($(window).width() < 960) {
let previousScrollY = 0;
$(document).on('show.bs.modal', () => {
previousScrollY = window.scrollY;
$('html').addClass('modal-open').css({
marginTop: -previousScrollY,
overflow: 'hidden',
left: 0,
right: 0,
top: 0,
bottom: 0,
position: 'fixed',
});
}).on('hidden.bs.modal', () => {
$('html').removeClass('modal-open').css({
marginTop: 0,
overflow: 'visible',
left: 'auto',
right: 'auto',
top: 'auto',
bottom: 'auto',
position: 'static',
});
window.scrollTo(0, previousScrollY);
});
}
When i scroll down and release, i can't scroll up again, i have got this issue on android
My sdk version is 5.1
Here is my search,
var search = Titanium.UI.createSearchBar({
barColor: '#fb2942',
showCancel: true,
top: 0,
hintText: 'Search....',
});
table.search = search;
table.filterAttribute = 'title';
if (OS_ANDROID) {
table.searchHidden = false;
} else {
table.searchHidden = false;
}
table.separatorColor = "#ddd";
search.addEventListener('change', function(e) {
e.value;
});
search.addEventListener('return', function(e) {
search.blur();
});
search.addEventListener('cancel', function(e) {
search.blur();
});
And here is my tableview,
var table = Titanium.UI.createTableView({
backgroundColor: 'white',
separatorColor: "#ddd",
separatorInsets: {
left: 0,
right: 0
},
top: '8dp',
height: Ti.UI.SIZE,
});
In order to be scrollable the TableView height must be set to its default Ti.UI.FILL or a fixed/percentage width, but not Ti.UI.SIZE since that will cause it to fit its content, at which point there's nothing to scroll ;)
Here is the code I am using to initialize my dialog. I figured that since I the button doesn't exist which the page initially loads, I would need to use the on or live event to trigger the click (like in the Update call), but that hasn't worked. I confirmed that jQuery is finding the button using the console debugger but I cant for the life of me figure out how to trigger the button click.
Any suggestions?
$(function () {
var iframe = $('<iframe id="pageFrame" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen width="800" height="600"></iframe>');
var dialog = $("<div></div>").append(iframe).appendTo("body").dialog({
autoOpen: false,
modal: true,
resizable: false,
width: 950,
height: 600,
close: function () {
iframe.attr("src", "");
},
buttons: {
"Save": function () {
if ($("#pageFrame").contents().length > 0) {
if ($("#pageFrame").contents().find("#btnCreateContent").length > 0) {
$("#pageFrame").contents().find("#btnCreateContent").click()
}
else if ($fuze("#pageFrame").contents().find("#btnUpdateContent").length > 0) {
$("#pageFrame").contents().find("#btnUpdateContent").on("click", function () {
alert("update triggered");
});
}
else if ($("#pageFrame").contents().find("#btnCopyContent").length > 0) {
$("#pageFrame").contents().find("#btnCopyContent").click();
}
}
},
Cancel: function () {
if (confirm("Are you sure you want to exit?\n\nUnsaved changes will be lost.")) {
$(this).dialog("close");
}
}
}
});
});
This turned out to be the answer
$("#pageFrame").contents()[0].getElementById("btnUpdateContent").click();
Hope this helps somebody else out
I am using this http://jqueryui.com/demos/droppable/
But I have a problem dragging to a droppable that is smaller than the draggable.
It will not drop on the droppable, but on the top left of the droppable.
(source: yart.com.au)
Is there any way around this?
Here is the code, thanks.
$('.draggable').draggable({
revert: 'invalid',
revertDuration: 500,
appendTo: 'body',
helper: function(event, ui) {
return $(this).clone().appendTo('body').css('zIndex', 5).show();
},
drag: function(event, ui) {
$(ui.helper).removeClass("enlarge");
$(ui.helper).addClass("thumbnail");
$(this).hide();
},
stop: function(event, ui) {
$(this).show();
//$(this).addClass("enlarge");
if ($(this).parent().hasClass("imageContainer")) {
$(this).addClass("thumbnail");
}
else {
$(this).addClass("enlarge");
}
},
//cursorAt: { top: 30, left: 40 },
delay: 100,
refreshPositions: true
});
$('.imageContainer').droppable({
accept: '.draggable',
drop: function(event, ui) {
ui.draggable.css({
"position": "relative",
"left": "0px",
"top": "0px"
});
if ($(this).children().length == 0) {
// ui.draggable.addClass("thumbnail");
$(ui.draggable).appendTo(this);
$(this).removeClass("border");
}
},
over: function(event, ui) {
ui.draggable.removeClass("enlarge");
ui.draggable.addClass("thumbnail");
$(this).addClass("border");
},
out: function(event, ui) {
// ui.draggable.removeClass("zoomIn")
$(this).removeClass("border");
},
tolerance: 'intersect'
});
CSS:
.thumbnail {
height:60px;
margin-right:10px;
width:80px;
z-index:1;
}
.enlarge {
border:5px solid white;
height:145px;
width:195px;
}
$('.draggable').draggable({
revert: 'invalid',
revertDuration: 500,
appendTo: 'body',
helper: function(event, ui) {
return $(this).clone().appendTo('body').css('zIndex', 5).show();
},
drag: function(event, ui) {
/* $(ui.helper).removeClass("enlarge");
$(ui.helper).addClass("thumbnail"); */
$(this).hide();
},
stop: function(event, ui) {
$(this).show();
//$(this).addClass("enlarge");
if ($(this).parent().hasClass("imageContainer")) {
$(this).addClass("thumbnail");
}
else {
$(this).addClass("enlarge");
}
},
//cursorAt: { top: 30, left: 40 },
delay: 100,
refreshPositions: true
});
Try replacing your code with this block above and see if it comes close to what you want. It may not be perfect yet, but let's see if we can tackle one change at a time. What I'm hoping to observe is that it drops approximately like it should.