Is there any method to expand/collapse the grid by clicking on the caption layer?
I have 3 very large tables that are displayed on a 1680x1050 screen which are loaded by default, collapsed, and each time the user wants to expand/collapse a table, he has to click on the expand/collapse button of the caption layer, which is "very far" positioned.
You can use construct like
$(".ui-jqgrid-titlebar-close",$("list")[0].grid.cDiv).click();
You can see live demo here.
UPDATED: Probably it will help you just to place the minimize element of from the capture bar on the left size instead of default right position? You can do this with
.ui-jqgrid .ui-jqgrid-titlebar-close {position:relative;top:auto;margin:0;float:left}
see updated demo here.
UPDATED 2: See also one more example where click on the whole grid capture follows to the expand/collapse the grid.
This one will work for all the grids on the page.
$(".ui-jqgrid-titlebar").click(function() {
$(".ui-jqgrid-titlebar-close", this).click();
});
I mean,to click on the actual caption layer (the titlebar), the dark blue part from your table,where you put the text "How to expand /collapse grid on caption layer click" text and on the right side you have the small button to expand/collapse.
Is there something like :
onCaptionClick:function(state){$(".ui-jqgrid-titlebar-close",$("#id")[0].grid.cDiv).click();}
or
onTitleBarClick:function(state){$(".ui-jqgrid-titlebar-close",$("#id")[0].grid.cDiv).click();}
In the documentation there is an event for the Header of the grid onHeaderClick ,but there is nothing for the Caption layer that contains common information for the represented data.
Perfect that did the trick. Thank you a lot!
So, acording to Oleg to expand/collapse the entire table by clicking on the titlebar(caption layer) you can use:
$(myGrid[0].grid.cDiv).click(function() {
$(".ui-jqgrid-titlebar-close",this).click();
});
where myGrid is:
var myGrid = jQuery("#jquery_grid");
Related
I'm at my very first steps with jquery.I've got an index.php file which includes:
header.html
indexview.html
footer.html.
Into the indexview.html file there are two divs. One on the left (a menu) and one on the right(div id="content"). Whenever I click an item on the left menu, jquery is responsible to load other html pages(and eventually fetch data from the DB thanks to ajax) INTO the right div (div id="content"). I'm really liking this kind of approach, but the problem is that if, for example, I load:
Photo.html
Contacts.html
Info.html
Into the main div (the right one: div id="content") and then I press the back arrow, it just brings me to index.php with the indexview.html page loaded (instead of showing me contacts->photo->indexview).
I've already did some searches on the web and find out that I should build something that fetches the url thanks to the event handler "popstate". I've already dig a bit into that or into a little framework that can let me handle all of that, but, still I'm not fully understanding what I am supposed to do. The items on the left are NOT "<a> links" and don't have href attributes of course. Do I have to substitute every item (now a li item) with an <a> element? If so, how do I proceed to make the history work as I wish?
P.s. Of course, every time I load something into my right div (being photo.html,contacts,html etc) my url does NOT change.
Here is a little jsfiddle (not sure if it can help: doubt that). Clicking on whatever item in the menu makes jquery load() an html page in the right div ("overriding" the div where you "find Welcome, this is the integrated information management system web interface of the ...etc!").
http://jsfiddle.net/5by64tsn/
$("#listContact").click(function(){
$("#content").load('view/contacts.html');
document.title = 'Contacts';
});
When I click listContact, the contacts.html is loaded into the content div.
What you're hoping to accomplish isn't how Ajax/browser history stuff works. Ajax calls are independent of the browser's history and do not affect the back/forward buttons without adding code to do so. You've mentioned popState, which is close to what you want. You actually want pushState.
// Add the url to history
window.history.pushState(null, null, [url that you load via Ajax goes here]);
Using your example:
$("#listContact").click(function(){
$("#content").load('view/contacts.html');
document.title = 'Contacts';
window.history.pushState(null, null, '/view/contacts.html'); // You'll need to add a leading '/' otherwise the url will just keep appending the relative path
});
I hope my question isn't confusing anyone. I don't know what exactly is that sort of text box called :(
What I am looking for is to create a HTML text box that has different menus at its top i.e. the dimensions of the text box remains the same but each menu heading in the text box would have some text under it, that would open when a user clicks it.
Let me show you the demo:
http://www.e-conservationline.com/content/view/28/113/
Scroll down a bit on the page and have a look at GENERAL RULES OF SUBMISSION:
having menus like Language, Word limit, copyright etc
How can I create a similar type of text box, which I fill with text for each heading menu?
You should use some Javascript solution to achieve this goal. For instance, JQuery UI has a tabs feature.
For the same height, a little bit of CSS will satisfy you! ;)
Each "textbox" has a button (by the way its not textbox, it's a div). For example
div #1 has button 1
div #2 has button 2
... so on
Only a div is shown at the time. When user click on a button, it show a div related to that button and hide all the rest. That's how it works
I need to display a document (like in a Google Docs style view) and provide the ability for a user to make comments on that document.
Here's how it needs to work:
When the user views the document, they can use their mouse to highlight any amount of text they want (as they would within any other webpage)
Upon release of the highlight, some sort of modal dialog box appears asking them what they would like to comment on that portion of the text they selected
After clicking save in the modal box, their comment is saved in a MySQL database along with information about the section of the text they highlighted
Another user can view this document and see their comments on the different parts of the text.
I don't know how to tell the database what section of the text is highlighted so it can reference that and show the comment on that section of the text.
Not sure where you're getting stuck at but the basic idea would be:
Get the selected text using Javascript (see http://www.codetoad.com/javascript_get_selected_text.asp for an example)
Submit that text to a PHP script using either an HTML form or an AJAX approach (AJAX would probably be what you're looking for based on the description of your app).
Take the text passed to the PHP script and insert it into the db.
Party like a rockstar.
In Javascript:
var selectedText;
selectedText = window.getSelection();
I'd suggest some kind of character-index-based approach. I've answered a similar question recently here: execCommand insertHTML breaks stored window.getSelection()
I have a design as show in the below image and i have a requirement where user can click on the link in Rectangular area named as A, B & C. When one click on the click here link in Box B then all the green area should gray out except the BOX B and same should happen with BOX A, C.
Example as shown in image.
When User open the page
When User Click on the BOX B link
I am not sure if this is possible if there is any similar example where i can start from. I looked for but could not find similar example. Usually they example are related to whole page grey-out.
I can do same by using onmouseover and replace the whole image with the another image which has surrounding area in grey. But i am not allowed to do it this way. I am not sure if this is possible. I would appreciate if you can point me in right direction or if this is possible to certain area of page in grey..
These page are designed for PHP scripting
I created a little example for you, which you can find here:
http://jsfiddle.net/Srj82/
Its' basically using a simple css z-index to overlap / hide the entire place, while the current selected element got temporarily a higher z-index than the overlapping <div>.
You'll notice, while the overlapping <div> is visible, you can still click on the selected box. Anything else is not reachable (without removing event handlers or so). Just because there is another element which overlaps the rest.
On click of A/B/C you can add a div overlay with a transparent grey bg color and increase the z-index of the clicked element higher than the overlay.
Use an overlay div that will be positioned absolutely above anything else on your page with z-index then set your clicked box's z-index to overlay's + 1.
There are a couple of ways to do this, but a relatively quick and easy way is to make the elements that you need to grey out be of the same class. Then when you select an item give that element an additional class, and change the css for the elements named above except for the selected element with the additional class.
This is a link describing one way to accomplish this.
You could try to place an div over the area where A,B,C are placed.
In this div you will have a background-color like so :
#myDivHider{
background-color:rgba(0,0,0,0.4);
display:none;
}
When you either click a,b or c You "activate" (display:block), the whole thing and set the z.index of your a,b or C that it get's up "higher".
An alternative would be a plugin from jQueryTools, called Expose.
http://jquerytools.org/demos/toolbox/expose/index.html
One way to do it would be to temporarily change positioning of the element to absolute and give it a high z-index, then add a layer below it that would act as the overlay.
You could also use a plugin, for example this one: http://jquerytools.github.io/documentation/toolbox/expose.html
I am trying to create a popup when my link is clicked. I have been looking all over and all I could find was a html code like this
<p onClick="confirm('Correct?')" </p>
What I am trying to create is a popup that display a table with name, zip code e.t.c
so basically instead of the popup displaying correct like the code above does?, I want it to display somethings of my own choosing. I am looking for one that has a close button at the top it.
Thanks everyone.
So. You'll need a javascript function named showTable() and a div having an id: popup.
Change code to: <p onClick="ShowTable(ID)" </p>, where ID is the table's ID.
Store the table's values in a javascript array.
The ShowTable should consist of:
function showTable(id){document.getElementById("popup").style.display=block;
document.getElementById("popup").innerHTML=table[id];}
Also, the table[id] should conatin this too: Close popup
And add this function:
function closePopup(){
document.getElementById("popup").style.display=none;
}
To make it more designed, you could use jQuery animations.
Perhaps the option that requires the least amount of work on your end would be using jQuery UI, which has a Dialog plugin. You would need to be somewhat familiar with jQuery, though. Here's the link: http://jqueryui.com/demos/dialog/