I want to add the pager of the jqGrid on a different place then after the body of the jqGid. But the div is always set after the body of the jqGrid...
I want it like:
<div id='header'>Header</div>
<div id='scroller'>
<div><table>jqGrid body</table></div>
</div>
<div id='pager'>pager</div>
But jqGid always put the pager div like:
<div id='header'>Header</div>
<div id='scroller'>
<div><table>jqGrid body</table></div>
<div id='pager'>pager</div>
</div>
Is there a solution to put the pager div where you like in the page??
I want this because i have a many columns. When a put the option:
autowidth: true is will show a scrollbar, that's correct.
But when the user resize the browser i want that the following:
Table hold the current size.
The div who contains the table wil resize and show a scrollbar.
Header and footer will resize(they are always visible and they are not a part of the
scroll div)
If I understand you correct you should just use shrinkToFit:false setting of jqGrid. You can optionally combine it with autowidth:true or set width parameter of jqGrid and change it if the browser windows will be resized (call setGridWidth on every resize event see here for details).
Look at the demo and another one which has the horizontal scroll bar only on the grid body and not on the pager or header.
Related
I've total four 4 sections and a footer.
Section one, two , three are normal sections.
On section four I need normal scrolling as its height is more than window height.
Below code works fine with keyboard scrolling and mouse scrolling.
But On mobile I've issue while scrolling upward.
Please open the link on a touch device too see the issue.
Js fiddle here
<div id="fullpage">
<div class="section">One</div>
<div class="section">Two</div>
<div id="three" class="section">Three</div>
<div id="four" class="section fp-normal-height fp-normal-scroll">
<div style="height:1000px;">Four</div>
</div>
</div>
<footer style="height:300px;">Site footer</footer>
$('#fullpage').fullpage({
sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
hybrid:true,
fitToSection: false,
afterLoad: function(anchorLink, index){
var loadedSection = $(this);
if(loadedSection.attr("id") == "four") {
$.fn.fullpage.setAutoScrolling(false);
}
if(loadedSection.attr("id") == "three") {
$.fn.fullpage.setAutoScrolling(true);
}
},
});
when we swipe upward from section 4 (as at this point Autoscrolling has been set to false) the swipe takes user directly to first section.
I think The reason Its happening because, when user swipes, the page gets scrolled to the top as normal scrolling has been triggered. If I do console log I can see autoscrolling is being set back to true when it passes section 3 but still page scrolls till top as swipe has triggered the scrolling when auto scrolling was false .
if you open below link on mobile you will see the issue above described. Works fine for keyboard.
Expect issues.
The hybrid option is not documented which means is might not work as expected in all possible scenarios.
I have an element, #i1, that is below another element, .close_button, and they each have a click event associated with them...the former's is called clickFade() while the latter's event is a anonymous function that is defined within the execution of the aforementioned clickFade().
When clickFade() is called by clicking on #i1, the parent div,#welcome, is fadedTo opacity .1 and #A is fadedIn. Also, unbind() is called for #i1 and the anonymous function mentioned above that is associated with a click event on .close_button is defined. This function just reverses the effects that clickFade() has when a close_button image is clicked.
I don't think the problem is a z-index issue (because I've tried it already and the close_button image is always visible on top). I also don't think it's a binding issue because the button works, but only when there's nothing underneath of it...for example, if the button is half overlapping one of the background images like #i1, the half that isn't on top of #i1 will trigger the event while the other half will not.
What's the problem here and how can I fix it?
Here are the gists for the HTML, CSS, and JS; here's the relevant code:
HTML:
<div id="welcome">
<p id="welcomeText">Welcome</p>
<img src="imgs/img1.jpg" id="i1" alt=null/>
</div>
<div id="A">
<img src='imgs/close_button.gif' class='close_button' alt=null
style="width: 10%; height: 10%"/>
</div>
JS:
function clickFade() {
$('#welcome').fadeTo('slow',.1);
$('#i1').unbind('click',clickFade);
$('#i1').unbind('mouseover',mouseOverFunc);
switch (this.id) {
case "i1":
$('#A').fadeIn('slow');
$('.close_button').click(function() {
$('#A').fadeOut('slow');
$('#welcome').fadeTo('slow',1);
$('#i1,#i3,#i5').click(clickFade).mouseover(mouseOverFunc);
});
break;
.
.
.
}
}
So you both have to set the z-index AND set position:relative for this to work.
z-index not working with fixed positioning and others. Good luck!
I would like to have a button and when the user clicks on it a filter form pops down just below the button. I would like to utilize Kendo UI controls to achieve the effect.
In fact, what I need is almost exactly the 'filtering' that can be found on this example:
http://demos.telerik.com/kendo-ui/grid/filter-menu-customization
However, I'm not dealing with a grid of data so I can't use that example above.
There are different possible implementations. Here I will describe one based on kendoWindow since then you have a lot of possible customizations for that filtering form.
This is the HTML that includes the button:
<div>
This is the container that includes a
<button id="filter" class="k-button">Filter</button>
that is used to display a form
</div>
And then you define the HTML form. Example:
<div id="form">
<div>Filtering value:<input data-role="autocomplete"/></div>
<button class="k-button">Filter</button>
</div>
Doing the form initialization is:
var form = $("#form").kendoWindow({
title : "Filter",
visible : false,
modal : false,
draggable: false
}).data("kendoWindow");
Where initially we set the form as not visible.
You can define it as modal, draggable or even define the opening and closing effect.
Finally, for opening and placing the form just bellow the button you should:
$("#filter").on("click", function(e) {
// Find clicked button
var button = $(e.currentTarget);
// and get its position
var pos = button.offset();
// shift down the form to open by the height of the button + 5px (margin)
pos.top += button.outerHeight() + 5;
// Apply positioning to the form
form.wrapper.css(pos);
// display form
form.open();
});
You can see this here : http://jsfiddle.net/OnaBai/mpq6k/
I am working on Jqgrid in ASP.NET MVC.
I have managed to have a server side paging and sorting for a subgrid.
Scenario
I have a collection of rows each with a open subgrid option, I go and click on the '+' expand first row the subgrid for first expands, now I click on the '+' expand third row.
Here I want the first row's subgrid to collapse.
In Short : This mean that only row's subgrid should stay expanded.
I am not sure how to get going about this.
Please help me out on this.
You can create all expanders with same class + class that will determine weather it is expanded or not. On expander click you will fire event which will remove expanded and collapsed classes from elements which have expander class and attach collapsed and only clicked expander will get expanded class. I will post example
<div class="expander collapsed">
<div class="expander-title" onclick="$('expander').removeClass('expanded collapsed').addClass('collapsed'); $(this).removeClass('collapsed').addClass('expanded')">
title here
</div>
<div class="content">
content here
</div>
</div>
CSS:
.expanded > .content {
display: block;
}
.collapsed > .content {
display: none;
}
This is one expander
I have some page with something like this:
<div id="editor" contenteditable="true">SomeText</div>
I have an selfmade JS editor which actually issues
document.execCommand(some_command,false,optional_value);
when user presses a button in the editor. (For example I have plain, simple [Bold] button).
Everything is fine as long as I apply editing to part of "SomeText". For example selecting "Text" with mouse and pressing [Bold] button (which leads to document.execCommand("bold",false,false);) will produce:
<div id="editor" contenteditable="true">Some<span style="some-css-here">Text</span></div>
but when I select entire content of the div ("SomeText" in this example) and press [Bold] in my editor, FF will not produce expected
<div id="editor" contenteditable="true"><span style="some-css-here">SomeText</span></div>
but rather
<div id="editor" contenteditable="true" style="some-css-here">SomeText</div>
Notice the "style" attribute went into the editable div!
Why this makes a difference to me?
--It's because after editing is done I would like to take the content of the editable div, along with all styles, formating etc and further use it on the page. But I can't -- all the styling now sits inside the div.
A solution when I would be advised to extract styles from the div is not acceptable -- the div during its life takes a lot of styles from other active elements of the page (heavy jQuery usage)
So in brief:
How to tell FF to never touch editable div and apply all styling to its inner contents only?
Sincere thanks for you time.
(just pulled last of my hair, browsing FF dev site along with many others(((( )
Call once before any other execCommand and switch FF to tag mode
document.execCommand('StyleWithCSS', false, false);
Sometimes organizing and writing my thoughts brings me very positive results.
I have found satisfactory solution.
1)insert hidden div as a first child node into your editing div:
<div id="editor" contenteditable="true">
<div class="edit_text_mozilla_hack"></div>
SomeText
</div>
2) The CSS for it:
.edit_text_mozilla_hack {
display: block;
width: 0;
height: 0;
-moz-user-edit: none;
-moz-user-select: none
}
3)Now you can edit. I tested it with this my small test (actually I need all this stuff to edit short pieces of text like like captions, news subjects etc)
4)Before you use the content -- obious -- remoe that div.
5)When you want to return to editing -- insert it again.
Some bits of code from working (finally! ))) project:
//adds hidden div to all editable regions 'editables'
//the parameter is for speeding the thins up -- I'm often working with all or a lot of editable regions
function editAddMozillaHack(editables) {
if (!editables) {
editables = editGetEditables();
}
$("." + adminOptions["admin_loader"]).remove();
editables.each(function() {
$(this).prepend('<div class="edit_text_mozilla_hack"></div>')
});
}
//removes the hack from all regions
function editRemoveMozillaHack() {
$(".edit_text_mozilla_hack").remove();
}
//just returns all the editable regions -- my project often requires them all
function editGetEditables() {
return $("[contenteditable=\"true\"]");
}
of course -- testing pending.
I would like to hear from you ;)
regards.
I had the similar problem, when select all in contenteditable area with mouse or use CTRL-A there and then press CTRL+B for example, Firefox put style to the contenteditable container instead it's content.
<div contenteditable="true" style="font-weight: bold;"><p>..content..</p></div>
Same applyed for italic, font size, font-family and other inline styles.
I wrote a function which fixing that issue. It creates new element below the content and changes selected range till that element:
function checkSelectAll (container, cmd, args) {
if(document.getSelection) {
var cn = container.childNodes,
s = document.getSelection(),
r = s.getRangeAt(0);
if(r.startContainer == container && r.endContainer == container){
var endMarker = document.createElement('SPAN')
container.appendChild(endMarker);
r.setEndBefore(endMarker);
s.removeAllRanges();
s.addRange(r);
document.execCommand(cmd,false,args);
container.removeChild(endMarker);
} else {
document.execCommand(cmd,false,args);
}
} else {
document.execCommand(cmd,false,args);
}
};
this code affects only FF, for other browsers it will just apply execCommand