I have a vertical menu inside a jScrollPane in a ASP.NET page. When the user clicks a menu choice it displays content in another panel relating to the selection. How can I make sure that the selected menu choice is in view when the page refreshes.
I'm looking for the same solution myself. You may have some success with my temporary solution using the scrollToElement api. Providing you can locate the specific menu item using a jquery selector you can have jScroll automatically jump to it in the scroll pane. eg
$(window).load(function()
{var api=$('#yourMenu').data('jsp');
api.scrollToElement($('.selectedOption'));
});
This will require the latest version of jscrollpane (http://jscrollpane.kelvinluck.com)
I wanted the same solution, and found this, which wasn't much help.
I eventually got it to work.
The position of the scrollbar is saved to localstorage, then when the page loads again, either by refresh or back from another page, if localstorage has a value greater than 0 which represents the top of the scrollbar (default, unscrolled position), it scrolls to that position.
var element = $(".scroll-pane").jScrollPane({showArrows:!0});
if(void 0 != element) {
var api = element.data("jsp");
$(function() {
0 < parseInt(localStorage.getItem("ScrollPosition")) && api.scrollToY(parseInt(localStorage.getItem("ScrollPosition")));
$(".scroll-pane").bind("jsp-scroll-y", function(b, a) {
localStorage.setItem("ScrollPosition", a)
}).jScrollPane()
})
};
Related
I'm a huge fan of Fancybox and I'm using it for years now. At the moment I'm thinking of installing the newest version and I want to use the confirm dialog that is demoed on the project page of Fancybox 3 (https://fancyapps.com/fancybox/3/). But I don't understand how to do this. Where can I find settings for this, how to initiate the dialog and where does the content that is in the dialog come from?
Basically, you display some inline content as usual and then use afterClose callback to check what element was clicked to close the modal (tip: add data-fancybox-close attribute to any element to act as close button), something like this:
afterClose : function( instance, current, e ) {
var button = e ? e.target || e.currentTarget : null;
var value = button ? $(button).data('value') : 0;
// Here you can choose what to do depending on the element
}
Here is a more complete code - https://codepen.io/fancyapps/pen/YRPoVB?editors=1010 - that is used on the homepage.
I have a list widget with five rows per page. When the user goes to the next page I reload the page (by doing an unload/load on the data source with the new page number) and that works fine. However, the list stays scrolled to the bottom. How can I scroll the list to the top so the user does not have to?
I tried the ways that work in standard HTML but they do not work in AppMaker, and I cannot find any documentation on how to do this.
Thanks for any tips or pointers.
I realize this is an old post, but for future visitors, here's what worked for me - you need to set the index of the list to zero. App Maker ensures that it scrolls the last selected item into view, and maintains this across navigations.
You can do this by passing in a callback function that runs after loading the list. For me, I reload the list from a dropdown widget that filters the list, so in the onValueChange event I've added:
// Load datasource
widget.datasource.load(function() {
// Set index to 1 to ensure we scroll to top of list
app.datasources.YOURDATASOURCE.selectIndex(0);
});
You can achieve the desired behavior by doing the following:
In the outline, locate the TablePanel widget and select the List:TableBody widget
2.In the property editor, scroll to the Events section and click on the onDataLoad event value. Then click on Custom Action.
Type in this code var elem = widget.getElement(); elem.scrollTop = 0; so that it looks like this
Make sure the change is saved and then preview your app and it should work. Let me know if you need something else or if it don't work.
For me Morfinismo's answer didn't work, but the following did:
In the style editor add CSS for the List element:
.app-pageName-nameOfTheListWidget {
overflow-y: auto;
}
And in the Property Editor under Layout set a Max height.
i have a problem on my map application, i am trying to put a coustom control on a Panorama and when users click to this custom button, panorama informations wll be saved.
For this purpose, i am using a function to check if there is a panaroma data exists
function checkforstreetview(mapid){
service.getPanoramaByLocation(markers[mapid].getPosition(), 50, function(r,status){
if(status==google.maps.StreetViewStatus.OK){
google.maps.event.addListener(markers[mapid], 'click', function (e) {
panorama[mapid].setVisible(true);
return false;
});
panorama[mapid].setPosition(markers[mapid].getPosition()); // custom control is moving to the left occurs here
}
});
}
as first, i am getting marker position on the map and check for panorama within 50m then if there is a panorama data, i am binding an click event to the marker for switching to panorama.
I am placing customdiv control via;
panorama[mapid].controls[google.maps.ControlPosition.TOP_CENTER].push(customdiv[0]);
Html markup of custom control is:
<div id="customdiv" title="Get data" style="height:10%;cursor:pointer;margin:0 auto;"><img src="/customdiv.jpg" style="height:100%;float:right;margin:5px;"/></div>
At the same time, i've assigned a function for drag and drop event for marker (with addlistener method), so if the marker drag'n drop to another position, checkforstreetview function is executed again.
So, what is the main problem?
In first execution there is no problem, when i click to the marker, panorama opens correctly and custom control is correctly placed but after close the panorama, drag'n drop marker to another position and click to marker again to show new panorama for new position, custom control moving to the left of panorama view.
Correct positioning (when system is initially loaded)
And buggy positioning (when i switch to panorama view in second time with marker click)
Extra information :
Because of google maps need to know height and width of container to work properly, i am using visibility: hidden rule for map container, not display:none but i think this cannot be problem bacause, on system load everything works correctly.
I've tested on Windows 7 / Firefox - Chrome - Opera - Safari - IE (lastest versions)
Tried solutions:
Many CSS hacks
Re-positioning custom control via google.maps.ControlPosition.TOP_CENTER
I've tried to put custom control to another positions BOTTOM_CENTER, LEFT_BOTTOM, .. etc but every time, custom control is moving to another position (shifting to the right, top, left )
Finally, i've commented out panorama[mapid].setPosition(markers[mapid].getPosition()); line and i've used standard packman to panorama/map switching then there is no problem on custom control positioning.
EDIT : Another interesting point is, after wrong positioning of custom control (and adress bar) when i click to next/previous arrows for next/previous images of panorama, custom control and adress bar becomes normal (correct position)
What can be the solution to stop shifting/moving costom control?
Thanks right now...
You cannot designate static CSS for the API, you must tell the maps API what you want your CSS to be (assign CSS properties in javascript):
https://developers.google.com/maps/documentation/javascript/examples/control-custom
I've resolved the issue by below function
google.maps.event.addListener(panorama[mapid], 'position_changed', function() {
google.maps.event.trigger(panorama[mapid],'resize');
});
I'm building a photo gallery in ASP.NET. The user can browse thumbnails along the left and select one, which brings a preview-sized version into the right pane of the page.
I'd like to fade between the images, so that the current one fades out and the next one fades in. I'm using jQuery to fade the preview image in after it is loaded, which works great. Unfortunately, I can't get the fadeOut script to run before the click event posts the page back to the server. The thumbnails are ASP.NET ImageButtons, which means they're <input> tags.
Is there a way to get the postback to delay just long enough for the image to fade out? I've seen some tricks with the form onSubmit and setTimeout() but that would affect all the links and buttons on the page. I want to delay postback for the thumbnails only.
TIA
EDIT: Based on my research, and trying the suggestions below, it may be possible to delay the postback to accomplish this but it's not the best approach on several levels. To get a clean fade transition between images, in the future I would not do any posting back at all. I would use jQuery exclusively for the fadeout, load, fadein.
Try adding a return false to your function that handles the fadein/out... It should prevent the page postback from occurring...
$('#<%= this.aspbutton.ClientId%>').click(function(){
$('#myDiv').fadeout("slow");
return false;
});
I'm not sure what you are getting on the PostBack where you would want to fade out an image and then fade one in. Have you considered using AJAX for that? You could even have the thumbnail image contain the necessary information within the image tags for the larger image.
Take a look at the jQuery Lightbox plugin. I have implemented this plugin and modified the .JS a bit to allow for viewing a higher resolution photo in addition to the web view. Check it out here.
$('#<%= this.aspbutton.ClientId%>').click(function(){
var $btn = $(this);
$('#myDiv').fadeout("slow", function() {
$btn.unbind('click').click();
});
return false;
});
Here's the solution I used:
Since I AM using MS AJAX with an UpdatePanel, I can use the client-side AJAX event handler.
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(fadeOut);
function fadeOut() {
if ($('.mainImage').length > 0) {
$('.mainImage').fadeOut('normal');
}
}
This gives me the exact behavior I wanted- any time the user navigates between thumbnails, the image fades out, loads, then the new one fades in.
HOWEVER...
This is still not ideal, as there is a pause between fades while the page posts back. It will work for now but in the long run it would be better to use jQuery to set the preview image rather than the thumbnails posting back as ImageButtons.
Using the viewer control for display of SQL Reporting Services reports on web page (Microsoft.ReportViewer.WebForms), can you move the View Report button? It defaults to the very right side of the report, which means you have to scroll all the way across before the button is visible. Not a problem for reports that fit the window width, but on very wide reports that is quickly an issue.
No, you cannot reposition the view report button in the ReportViewer control.
However, you could create your own custom report viewing control. The control would be comprised of fields for report parameters and a button to generate the report. When a user clicks the button you could generate the report in the background. You could display the report as a PDF, HTML, etc.
It's kind of a hack, but you can move it in JavaScript. Just see what HTML the ReportViewer generates, and write the appropriate JavaScript code to move the button. I used JavaScript to hide the button (because we wanted our own View Report button). Any JavaScript code that manipulates the generated ReportViewer's HTML must come after the ReportViewer control in the .aspx page. Here's my code for hiding the button, to give you an idea of what you'd do:
function getRepViewBtn() {
return document.getElementsByName("ReportViewer1$ctl00$ctl00")[0];
}
function hideViewReportButton() { // call this where needed
var btn = getRepViewBtn();
btn.style.display = 'none';
}
The reason the button is pushed over to the right is that the td for the parameters has width="100%". I'm solving this problem with the following jquery. It simply changes the width of the parameters td to 1. Browsers will expand the width on their own to the width of the contents of the element. Hope this helps.
<script type="text/javascript">
$(document).ready(function() {
$("#<%= ReportViewer1.ClientID %> td:first").attr("width", "1");
});
</script>
Since I was searching for this answer just yesterday, I thought I'd post what I came up with to solve our problem. Our reports were coming back wide, and we wanted the "view reports" button to exist on the left side of the control so there was no need to scroll to get to the button. I did need to go into the source of the rendered file to find the ID names of the button and the target table.
I wrote a simple cut and paste javascript function to pull the button from its original position and essentially drop it into the next row in the containing table below the date pickers.
function moveButton() {
document.getElementById('ParameterTable_ctl00_MainContent_MyReports_ctl04').appendChild(document.getElementById('ctl00_MainContent_MyReports_ctl04_ctl00'));
}
This function gets called on the report viewer load event.
ScriptManager.RegisterStartupScript(Me, Me.GetType(), "moveButton", "moveButton();", True)
To adjust the position, I used the CSS ID.
#ctl00_MainContent_MyReports_ctl04_ctl00 {
margin: 0px 0px 0px 50px;
}
I had the same problem and ended up using an extension on Travis Collins answer; As well as changing the table column width I also align the "View Report" button left so that it appears neearer to rest of the controls.
<script type="text/javascript">
$(document).ready(function() {
$("#_ctl0_MainContent_reportViewer_fixedTable tr:first td:first-child").attr("width", "1");
$("#_ctl0_MainContent_reportViewer_fixedTable tr:first td:last-child").attr("align", "left");
});
</script>
You may need to tweak the JQuery selector depending on the element naming assigned to your existing control.