I would like to disable the popup on mobile devices. I found this code in the documentation but I don't understand where to place the code for it to work.
disableOn: function() {
if( $(window).width() < 600 ) {
return false;
}
return true;
}
This helped for me.
https://dimsemenov.com/plugins/magnific-popup/documentation.html#disableon
You can set disableOn: propery for magnificPopup, defining conditions when not to open popup.
$(el).magnificPopup({
disableOn: function() {
if( $(window).width() < 600 ) {
return false;
}
return true;
}
})
Related
I have the following bit of code:
Which prints the following in the console:
I've been bashing my head for a very long time, not sure where to go from here. It was working just fine when I pushed last. Then, I made some changes which broke it as you can see. To try to fix it, I stashed my changes, but I'm still getting this error.
Edit
search: throttle(live => {
let vm = this;
console.log("entered!!!");
console.log("this", this);
console.log("vm", vm);
if (typeof live == "undefined") {
live = true;
}
if (!live) {
// We are on the search page, we need to update the results
if (vm.$route.name != "search") {
vm.$router.push({ name: "search" });
}
}
vm.$store.dispatch("search/get", {
type: vm.searchType,
query: vm.searchQuery
});
}, 500)
Assuming search is in your methods it should not be using an arrow function as that will give you the wrong this binding.
Instead use:
methods: {
search: throttle(function (live) {
// ...
}, 500)
}
Here I'm also assuming that throttle will preserve the this value, which would be typical for implementations of throttling.
Like I said in my comment, I suspect this is a scoping issue.
Perhaps if you return the throttle function with the Vue component passed in, you might see better results:
search: function() {
let vm = this;
return throttle(live => {
console.log("entered!!!");
console.log("this", this);
console.log("vm", vm);
if (typeof live == "undefined") {
live = true;
}
if (!live) {
// We are on the search page, we need to update the results
if (vm.$route.name != "search") {
vm.$router.push({ name: "search" });
}
}
vm.$store.dispatch("search/get", {
type: vm.searchType,
query: vm.searchQuery
});
}, 500)
}
i am Developing one Application, Actually my App is showing landscape and Portrait in Tabs/iPads. But in Tablets(iPad's working fine) when i was check the Orientation functionality working fine until unlock the Device.When i was lock the screen on Particular mode like (Portrait/Landscape) After that turned the Device showing before Orientation. Not Update the present Orientation.
I followed this link :https://github.com/yamill/react-native-orientation
this is my code:
componentWillMount(){
this.getOrientationtype()
}
getOrientationtype(){
//alert("Hello")
if(Platform.OS == 'ios'){ // to Identifying Android or iOS
if(aspectRatio>1.6){ // Code for Iphone
// alert("phone")
Orientation.lockToPortrait()
}
else{
Orientation.getOrientation((err, initial) => {
if(initial != 'UNKNOWN'){
this.setState({
orientation:initial
})
}
else{
this.setState({
orientation:'PORTRAIT'
})
}
});
}
}
else{
if(DeviceInfo.isTablet()){
// alert("android tab")
Orientation.getOrientation((err, initial) => {
if(initial != 'UNKNOWN'){
this.setState({
orientation:initial
})
}
else{
this.setState({
orientation:'PORTRAIT'
})
}
});
}
else{
Orientation.lockToPortrait()
}
}
}
Please find Out this Solution ....I am Using this link enter link description here
1.You should use Orientation.addOrientationListener for listen to the Orientation Events.
2.As see from the source code of OrientationModule.java, this library just call unregisterReceiver in onHostPause, so you can't receive onConfigurationChanged event after lock the screen.One way is to edit the onHostResume inside OrientationModule.java to meet what you want.
#Override
public void onHostResume() {
final Activity activity = getCurrentActivity();
if (activity == null) {
FLog.e(ReactConstants.TAG, "no activity to register receiver");
return;
}
activity.registerReceiver(receiver, new IntentFilter("onConfigurationChanged"));
//add below code to onHostResume function
//send broadcast onResume
final int orientationInt = getReactApplicationContext().getResources().getConfiguration().orientation;
Configuration newConfig = new Configuration();
newConfig.orientation = orientationInt;
Intent intent = new Intent("onConfigurationChanged");
intent.putExtra("newConfig", newConfig);
activity.sendBroadcast(intent);
}
the whole code can be found here OrientationModule.java
We are using Durandal for our SPA application and came to a, in my opinion, common use case. We have two pages: one page is a list of entities (with filters, sorting, virtual scroll) and another is detail preview of an entity. So, user is on list page and set a filter and a list of results comes out. After scrolling a little bit down user notice an entity which he/she would like to see details for. So clicking on a proper link user is navigated to details preview page.
After "work finished" on preview page user click back button (in app itself or browser) and he/she is back on the list page. However, default 'entrance' transition scroll the page to the top and not to the position on list where user pressed preview. So in order to 'read' list further user have to scroll down where he/she was before pressing preview.
So I started to create new transition which will for certain pages (like list-search pages) keep the scroll position and for other pages (like preview or edit pages) scroll to top on transition complete. And this was easy to do however, I was surprised when I noticed that there are strange behavior on preview pages when I hit navigateBack 'button'. My already long story short, after investigation I found out that windows.history.back is completing earlier then the transition is made and this cause that preview pages are scrolled automatically down to position of previous (list) page when back button is hit. This scrolling have a very unpleasant effect on UI not mentioning that it is 'total catastrophe' for my transition.
Any idea or suggestion what could I do in this case?
Here is the code of transition. It is just a working copy not finished yet as far as I have this problem.
define(['../system'], function (system) {
var fadeOutDuration = 100;
var scrollPositions = new Array();
var getScrollObjectFor = function (node) {
var elemObjs = scrollPositions.filter(function (ele) {
return ele.element === node;
});
if (elemObjs.length > 0)
return elemObjs[0];
else
return null;
};
var addScrollPositionFor = function (node) {
var elemObj = getScrollObjectFor(node);
if (elemObj) {
elemObj.scrollPosition = $(document).scrollTop();
}
else {
scrollPositions.push({element: node, scrollPosition: $(document).scrollTop()});
}
};
var scrollTransition = function (parent, newChild, settings) {
return system.defer(function (dfd) {
function endTransition() {
dfd.resolve();
}
function scrollIfNeeded() {
var elemObj = getScrollObjectFor(newChild);
if (elemObj)
{
$(document).scrollTop(elemObj.scrollPosition);
}
else {
$(document).scrollTop(0);
}
}
if (!newChild) {
if (settings.activeView) {
addScrollPositionFor(settings.activeView);
$(settings.activeView).fadeOut(fadeOutDuration, function () {
if (!settings.cacheViews) {
ko.virtualElements.emptyNode(parent);
}
endTransition();
});
} else {
if (!settings.cacheViews) {
ko.virtualElements.emptyNode(parent);
}
endTransition();
}
} else {
var $previousView = $(settings.activeView);
var duration = settings.duration || 500;
var fadeOnly = !!settings.fadeOnly;
function startTransition() {
if (settings.cacheViews) {
if (settings.composingNewView) {
ko.virtualElements.prepend(parent, newChild);
}
} else {
ko.virtualElements.emptyNode(parent);
ko.virtualElements.prepend(parent, newChild);
}
var startValues = {
marginLeft: fadeOnly ? '0' : '20px',
marginRight: fadeOnly ? '0' : '-20px',
opacity: 0,
display: 'block'
};
var endValues = {
marginRight: 0,
marginLeft: 0,
opacity: 1
};
$(newChild).css(startValues);
var animateOptions = {
duration: duration,
easing : 'swing',
complete: endTransition,
done: scrollIfNeeded
};
$(newChild).animate(endValues, animateOptions);
}
if ($previousView.length) {
addScrollPositionFor(settings.activeView);
$previousView.fadeOut(fadeOutDuration, startTransition);
} else {
startTransition();
}
}
}).promise();
};
return scrollTransition;
});
A simpler approach could be to store the scroll position when the module deactivates and restore the scroll on viewAttached.
You could store the positions in some global app variable:
app.scrollPositions = app.scrollPositions || {};
app.scrollPositions[system.getModuleId(this)] = theCurrentScrollPosition;
As said in the title I would like to prevent removing a jquery ui tab or at least asking a confirmation before.
I tried
$( "#tabs" ).bind( "tabsremove", function(event, ui) {
var ok=confirm("Are you sure you want to close this tab ?");
if (ok) {
return true;
} else {
return false;
};
});
or
$( "#tabs" ).bind( "tabsremove", function(event, ui) {
var ok=confirm("Are you sure you want to close this tab ?");
if (ok) {
return true;
} else {
return false;
};
});
But the question is asked after, and not before as I want.
Is this possible ?
Is this what you mean?
$( "#tabs span.ui-icon-close" ).live( "click", function() {
var ok=confirm("Are you sure you want to close this tab ?");
if (ok) {
var index = $( "li", $tabs ).index( $( this ).parent() );
$tabs.tabs( "remove", index );
} else {
return false;
};
This is from jQuery-ui-tabs
Please go to: http://morningside.cardboardmonet.com/
Notice that the website drag scrolls from left to right, however when you resize the window it doesn't scale-- the page just goes blank. Does anyone know how to fix this?
Thanks!
chacelove, please add this piece of code to your js
$(document).ready(function() {
initDrag();
});
//
function resize_adjustments() {
$("#proof").css('width', '100%');
$("#proof").css('height', '100%');
$("#proof > div").each(function(i) {
if($(this).css('left') == "0px") {
current = $(this).attr('id');
$(this).css('left', '0');
} else {
$(this).css('left', $("#proof").width()+"px");
}
});
}
var resizeTimer = null;
$(window).bind('resize', function() {
if (resizeTimer) clearTimeout(resizeTimer);
resizeTimer = setTimeout(resize_adjustments, 500);
});
did it work?