I would like to force the scroll position to go to top everytime i refresh, is that possible? If yes could you help me to do that step by step? Thank you
After the page is loaded (aka. inside $(document).ready(function(){ }); ), insert in your JS:
window.scrollTo(0,0);
Related
I have a modal which has a link to another modal. When I opened the second modal and close the first modal, I can't scroll the second modal, only the background content scrolls. Can any one help me to solve this? I am using bootstrap 3.3.7
Try to use Modal Events to be sure your modals will not overlap. In this case you must open the second modal after the first one, like this:
$('#first-modal').on('hidden.bs.modal', function(event) {
// Open your second one in here
});
If .button is the selector for those things that close the first modal to open the second one, you should have something like this
$('#first-modal').on('click', '.button', function() {
// [...] Whatever you need to do after pushing one of those buttons
$('#first-modal').on('hidden.bs.modal', function(event) {
// Open your second one in here
$('#first-modal').off('hidden.bs.modal');
// This will remove ANY event attached to 'hidden.bs.modal' label
}).modal('hide');
});
If you want to use the first cleaner example, oyu should be able to test from the event object where it came from (if it's not one of your button, event.preventDefault(); and quit)
I'm trying to create a chart with D3 that will update when a submit button is clicked, however instead of firing when the button is clicked, the event happens as the page is loaded.
For example:
d3.select("#updatedata").on("click", alert('test'));
The alert happens immediately and does not happen when the button is clicked.
Am I missing something obvious?
Any advice appreciated.
Thanks.
You need to wrap the handler in a function:
d3.select("#updatedata").on("click", function() { alert('test'); });
Using the following code, how can I keep the div open and not hidden once the mouse roll off the trigger, until another trigger is rolled over?
I am using this code on http://griffithsandpartners.com.gridhosted.co.uk/services-3/ the Customer wants a rollover action on the services button, but as they have a lot of text with some of them, you can't scroll down to view it without coming off the trigger, and then it's hidden.
They don't want a click to open.
Really appreciate your help here.
One way would be is that you remove the onmouseout of all pop-up-triggers and you set a onmouseout=document.getElementById('ALL-THE-POP-UP-BOX').style.display = 'none'; to the div with the class="postcontent clearfix"
like so:
<div class="postcontent clearfix" onmouseout=document.getElementById('ALL-THE-POP-UP-BOX').style.display = 'none';>
So when the mouse leaves the pop-up-triggers it wont hide the pop-up-box but if the mouse leaves the postcontent clearfix div it will hide all displayed pop-up-box.
Note: you have to hide all pop-up-box on pop-up-trigger mouseover so that only the current pop-up-box will be displayed.
Hope this helps.
Does jqgrid supports fade in,fade out, I want to make it fade in fade out when the grid display and reload, is there anyone knows how to make it?
you need to hide it's content or the whole grid?, there is no fade in/out in jqgrid but you can use jquery effect function to create this effect
you can set fadeOut in onBeforeRequest, and fadeIn in loadComplete
onBeforeRequest : function(){
// is used for the whole grid
$(this).closest('#gbox_'+this.id).fadeOut('slow');
/*--------- OR ----------*/
//will fade out only the table inside
$(this).fadeOut('slow');
},
loadComplete : function(){
$(this).closest('#gbox_'+this.id).fadeIn('slow');
/*--------- OR ----------*/
$(this).fadeIn('slow');
}
If you're going for a visual effect, Liviu's answer is a good one. If you're trying to block user interaction with the grid while it's loading data, what I like to do on my grids is use the BlockUI plugin http://jquery.malsup.com/block/#element
My pattern is to block the grid before an ajax call, and then unblock it on the ajax call's success method .
If you are wanting to inform your users that the grid is loading...(I'm completely assuming this might be at the core of what you are looking for??)...as an alternative to a fadeIn/fadeOut...
I find that the "grid loading" message is not the greatest way to inform users that the grid is loading. For example, if the grid has many rows, the message may not appear in the view area and the user may be looking at old data in the grid (while it's loading) and not realize it...especially if the server processes the ajax slow or the query is slow for whatever reason. Here's a little something I do:
Add this event to your jqgrid setup:
beforeRequest: function(){
$('#grid tr').addClass('gridLoadingClass');
$('#grid span').css('color','lightgray');
$('#grid a').css('color','lightgray');
},
And add a class like this somewhere in your CSS:
.gridLoadingClass {color:lightgray;}
Your grid's contents will now "gray out" while loading.
My page is divided into two parts vertically.Left part is like a menu section. Clicking on
any menu brings the proper data related to that menu in the right part of the page. I am
doing it using ajax call and the only div on the right part get refreshed. I am using jquery click event for that ..
say:
$("#left_part").click(function() { // ajax call here });
Now I have some more jquery action on the right part. (say Show hide some div which also work on click event.)
But when new div reloads on the right part those click event on the right part is not working.
But when I bind the click event it works.
say:
$("#some_right_part").click(function() {/ some hide show here )}; Not working
$("#some_right_part").bind('click', function(event){ // some hide show here )}; works fine
Important: When I am on fresh page (no ajax call yet to bring right part) $("#some_right_part").click(function() {/ some hide show here )}; works fine.
But what I know is: $().click(function) calls $().bind('click',function)
So, What is the reason behind this? Or What is the perfect way to solve such problem
Thanks
When you assign a click event via $().click when the page loads, the click event is bound to all matching elements. However, when you do the ajax call and recieve new markup - the new elements are not bound to the click event because they did not exist when you first called $().click.
There is a way to get a click event to be bound to all elements and all future elements that may be created. You must use the live method like so:
$('#elements').live('click', function() {
// do logic
});