Search Results

Search found 7933 results on 318 pages for 'mouse scroll'.

Page 107/318 | < Previous Page | 103 104 105 106 107 108 109 110 111 112 113 114  | Next Page >

  • Creating a simple JQuery tooltip?

    - by Mike El Panther
    Has anybody here got any experience in creating simple tooptips using JQuery? I have created a table: <tr id="mon_Section"> <td id="day_Title">Monday</td>` <td id="mon_Row" onmousemove="calculate_Time(event)"></td> </tr>` the function "calculate_Time" will be called and this gets the X position of the mouse cursor and from the value, uses IF and ELSE-IF statements to calculate the values of other variables i have created: var mon_Pos; var hour; var minute; var orig; var myxpos; function calculate_Time(event) { myxpos = event.pageX; myxpos = myxpos-194; if (myxpos<60) { orig = myxpos; minute = myxpos; hour = 07; } else if (myxpos>=60 && myxpos<120) { orig = myxpos; minute=myxpos-60; hour=08; } } How do i go about creating a stylized tooltip containing the Hour and Minute variables that i created, I need the tooltip to be updated everytime the X position of the cursor changes. I know that with myxpos variable does change whenever the mouse is moved because i tried it out using an alert(myxpos) and as expected, if the mouse moves, a new alert box popups with a new value. I just cant work out how to place that value in a tooltip?

    Read the article

  • Text box loses focus when DIV is hovered

    - by Konoplianko
    Hello. I have a problem: When I enter a text into suggestion text box, popup panel appears. But when user places mouse over this popup panel with suggestions - text box loses focus. What should I do to prevent losing focus ? Example which have the same behaviour: http://demo.raibledesigns.com/gwt-autocomplete/ Thanks for any help. Update 1 SuggestionMenu which is being shown is extending MenuBar which sets focus for all menu items. void itemOver(MenuItem item, boolean focus) { if (item == null) { // Don't clear selection if the currently selected item's menu is showing. if ((selectedItem != null) && (shownChildMenu == selectedItem.getSubMenu())) { return; } } // Style the item selected when the mouse enters. selectItem(item); if (focus) { focus(); } // If child menus are being shown, or this menu is itself // a child menu, automatically show an item's child menu // when the mouse enters. if (item != null) { if ((shownChildMenu != null) || (parentMenu != null) || autoOpen) { doItemAction(item, false); } } } It's clear that i cant fix loosing focus. Now question is - how to make on pressing backspace or any key to focus on edit box? Thanks in advance

    Read the article

  • Place JComponent On The Top Of JXLayer

    - by Yan Cheng CHEOK
    Hello, currently, I had successful applying JXLayer on my charting component, to draw a yellow information box on the top of it. final org.jdesktop.jxlayer.JXLayer<ChartPanel> layer = new org.jdesktop.jxlayer.JXLayer<ChartPanel>(this.chartPanel); this.chartLayerUI = new ChartLayerUI<ChartPanel>(this); layer.setUI(this.chartLayerUI); At the same time, I wish to add the following JComponent (DefaultDrawingView) on the top of JXLayer. This JComponent has the ability 1) To receive mouse event to draw figures on itself. Within ChartLayerUI, I add the following code @Override @SuppressWarnings("unchecked") public void installUI(JComponent c) { super.installUI(c); JXLayer<JComponent> l = (JXLayer<JComponent>) c; l.getGlassPane().setLayout(new java.awt.BorderLayout()); // this.view is DefaultDrawingView drawing object. l.getGlassPane().add(this.view, java.awt.BorderLayout.CENTER); } However, after having the above code, I get the following outcome 1) My charting component ChartPanel are being blocked by DefaultDrawingView 2) My charting component no longer able to receive mouse event. What I wish is that A) ChartPanel and DefaultDrawingView able to show up B) ChartPanel and DefaultDrawingView able to receive mouse event Is there other steps I had missed out, or did wrong? Thanks.

    Read the article

  • MouseMotion Sensor Method Call

    - by user321894
    I have a soon-to-be due assignment due in computer science. I have encountered a problem, for which no matter how long I study the API's of the class and superclasses, I can not figure out. Suppose I wish to design a sort of "Breakout game" where the mouse motion controls the motion of a block that is used to bounce a ball, which then destroys multi colored bricks. How do you specifically make the block "listen" to the mouse? The below code is what I have attempted to achieve the desired results. /** Breakout Program*/ public class Breakout extends GraphicsProgram implements MouseMotionListener { ... /** The Paddle Itself */ private GRect paddle = new GRect(0, HEIGHT-PADDLEBOTTOM_OFFSET, PADDLEWIDTH, PADDLEHEIGHT); ... /** Run the Breakout program. */ public void run() { paddle.setFillColor(Color.BLACK); paddle.setFilled(true); add(paddle); paddle.addMouseListener(this); ... } /** Move the horizontal middle of the paddle to the x-coordinate of the mouse position - * -but keep the paddle completely on the board. */ public void mouseMoved(MouseEvent e) { GPoint p= new GPoint(e.getPoint()); double x = p.getX(); paddle.setLocation(x, HEIGHT-PADDLEBOTTOM_OFFSET); } } Any clarification on why/what I am doing incorrectly would be helpful, thanks.

    Read the article

  • Commercial web application--scalable database design

    - by Rob Campbell
    I'm designing a set of web apps to track scientific laboratory data. Each laboratory has several members, each of whom will access both their own data and that of their laboratory as a whole. Many typical queries will thus be expected to return records of multiple members (e.g. my mouse, joe's mouse and sally's mouse). I think I have the database fairly well normalized. I'm now wondering how to ensure that users can efficiently access both their own data and their lab's data set when it is mixed among (hopefully) a whole ton of records from other labs. What I've come up with so far is that most tables will end with two fields: user_id and labgroup_id. The WHERE clause of any SELECT statement will include the appropriate reference to one of the id fields ("...WHERE 'labroup_id=n..." or "...WHERE user_id=n..."). My questions are: Is this an approach that will scale to 10^6 or more records? If so, what's the best way to use these fields in a query so that it most efficiently searches the relevant subset of the database? e.g. Should the first step in querying be to create a temporary table containing just the labgroup's data? Or will indexing using some combination of the id, user_id, and labroup_id fields be sufficient at that scale? I thank any responders very much in advance.

    Read the article

  • Making a Javascript game, Having a little problem with scrolling.

    - by RobertWHurst
    I have a #wrapper div and a #grid div nested inside. currently I can scroll around with this function below. getCursorPos : function(){ // set the empty cursor object var cursor = {}; //get the offset from the left of the grid container var grid //offset loop $(function getCursorPos(){ grid = $('#grid').offset(); setTimeout(getCursorPos, game.loopSpeed); }); //continuosly get the position var that = this; $(document).mousemove(function(e){ //if game mode is menu exit if(game.mode === 'menu'){ return; } // NOTE: this looks a litle over done but don't remove anything // its like this because javascript uses floating points // and so in order to line up to the nearest hunderedth I // had to make the cursor and div position intergers by // muliplying by ten. one the two are added I reduced them // and rounded them. that.x = Math.round(((e.pageX * 10) - (grid.left * 10)) / 10); that.y = Math.round(((e.pageY * 10) - (grid.top * 10)) / 10); }); }, the problem is that the mouse coordinates only update when the mouse moves. is there any way to get the coordinates with out moving the mouse?

    Read the article

  • ScaleTransform transforms non-linearly

    - by Chris
    I am using scale transform to allow a user to resize a control. What happens though is that when you start to move the mouse the control jumps to a new size, and then scales oddly. The further you move your mouse from the starting location the larger the increase in size becomes. I expect its the way I calculate the scale to be applied. Here is the code: private void ResizeGrip_MouseDown(object sender, MouseButtonEventArgs e) { ResizeHandle.CaptureMouse(); //Get the initial coordinate cursor location on the window initBtmX = e.GetPosition(this).X; bottomResize = true; } private void ResizeGrip_MouseUp(object sender, MouseButtonEventArgs e) { bottomResize = false; ResizeHandle.ReleaseMouseCapture(); } private void ResizeGrip_MouseMove(object sender, MouseEventArgs e) { if( bottomResize == true) { //Get the new Y coordinate cursor location double newBtmX = e.GetPosition(this).X; //Get the smallest change between the initial and new cursor location double diffX = initBtmX - newBtmX; // Let our rectangle capture the mouse ResizeHandle.CaptureMouse(); double newWidth = e.GetPosition(this).X - diffX; double scaler = newWidth / ResizeContainer.ActualWidth; Console.WriteLine("newWidth: {0}, scalar: {1}", newWidth, scaler); if (scaler < 0.75 || scaler > 3) return; ScaleTransform scale = new ScaleTransform(scaler, scaler); ResizeContainer.LayoutTransform = scale; } }

    Read the article

  • JPanel not listening to key event when there is a child component with JButton on it

    - by Yifu
    I'm working on a map editor for my college project. And I had a problem that the map panel is not listening key event while it should. This happens when I add a ToolBarPane (which extends JPanel) with JComponent such as JButton, JComboBox that implements ActionListener on it AND the map panel (which extends the JPanel) together on to the Frame (I used BorderLayout). I have System.out.println statement to test if the key press is received, and it's not printing, if I remove the ToolBar, the key listener works again, so is the mouseListenner is disabled just like the keyListener, which means I can't handle press events etc, but the mouseListener works fine and I can still handle mouse move event. Here is a screen shot how it works without the ToolBarPane http://img684.imageshack.us/img684/3232/sampleku.png note that you can use the mouse to put images on the map, you can also select images using the mouse just like a laser tool, and by pressing number key you can switch between different images, this works fine until I add the ToolBarPane which shows like this: img291.imageshack.us/img291/8020/failve.png (please add http before that, i can only post one hyperlink) (I can't post images here cuz im a new user) With the ToolBarPane on I was no longer able to handle the key event. I guess it might by that the focus as been transfered to that panel somehow, but not sure at all. Does and body know this and can help me out? Thanks very much

    Read the article

  • What is the best free cross-platform OpenGL GUI library for a video game?

    - by Jim Buck
    It must come with source. I've looked at these which look semi-promising: glgooey, guichan, and cegui. I've come across others that look more Windows-y than game-y, but that's not the direction I am looking to go in. I would like some simple functionality of typical controls (lists, dropdown box, etc.) but with support for graphical widgets that you would normally find in game frontends. Mouse clicking, dragging, dropping, etc. and sound effect hooks would be nice. (These libs often leave hooks for the external system to tell it when/where mouse events are occurring.) It would get rendered on top of what my own 3D engine is rendering for the game, so it must be able to play nicely with rendering code outside of the lib. The best criteria is whether or not a reasonable 2D game could be implemented just with the GUI library and minimal glue code. (By glue code, I mean init code, hooking up the mouse, and game logic.) I am creating a 3D game, but this criteria gives a pretty solid idea of what level of interactivity I would like in the GUI.

    Read the article

  • CSS Drop Down Menu

    - by cvandal
    I'm trying to make a simple CSS drop down menu that when you mouse over a link, the sub menu appears. I've managed to achieve this when you mouse over an li but can't figure out how to do it using a link. The reason why I'm trying to do this using a link rather than the li is that my menu width is 100% and the li spans a greater area than the link so if you mouse over that area, the sub menu appears when you don't want it to. My CSS is as follows: .menu { border: solid 1px red; font-size: 5em; font-family: 'Raleway', arial, serif; } .menu ul { } .menu ul.children { display: none; } .menu ul li { margin: 20px 0 10px 0; } .menu ul li:hover ul.children { display: block; position: absolute; } .menu ul li a { padding: 10px 10px 0 40px; background: rgba(0,0,0,0.5); color: #fff; text-decoration: none; }

    Read the article

  • How do software events work internally?

    - by Duddle
    Hello! I am a student of Computer Science and have learned many of the basic concepts of what is going on "under the hood" while a computer program is running. But recently I realized that I do not understand how software events work efficiently. In hardware, this is easy: instead of the processor "busy waiting" to see if something happened, the component sends an interrupt request. But how does this work in, for example, a mouse-over event? My guess is as follows: if the mouse sends a signal ("moved"), the operating system calculates its new position p, then checks what program is being drawn on the screen, tells that program position p, then the program itself checks what object is at p, checks if any event handlers are associated with said object and finally fires them. That sounds terribly inefficient to me, since a tiny mouse movement equates to a lot of cpu context switches (which I learned are relatively expensive). And then there are dozens of background applications that may want to do stuff of their own as well. Where is my intuition failing me? I realize that even "slow" 500MHz processors do 500 million operations per second, but still it seems too much work for such a simple event. Thanks in advance!

    Read the article

  • FLEX: how to better align my Tile component to the puppet (and how to solve roll over out effects) ?

    - by Patrick
    hi, At the moment my Puppets are larger on the left if I add them the <mx:Tile> component (with tags): http://dl.dropbox.com/u/72686/puppets.png how can I move my Tile component to the right ? In order to align with the left border of my puppets ? <mx:Tile id="tagsPopup" width="200" visible="false" > <mx:LinkButton label="Tag1" /> <mx:LinkButton label="Tag2" /> <mx:LinkButton label="Tag3" /> <mx:LinkButton label="Tag4" /> </mx:Tile> <mx:VBox verticalGap="0"> <mx:Image id="puppet" source="@Embed(source='../icons/userIcon.png')" /> <mx:Label id="username" text="Nickname" visible="false" fontWeight="bold" /> </mx:VBox> 2nd Question: I want to add objects on top of the puppets, some of them are visible only when the mouse is over, and they are overlying the ones are permanently visible. How do you suggest to implement it ? I was thinking to add in MXML all visible elements and then use Actionscript to add the fade in fade out components. However I just realize it is quite tricky, because I want the user select for example tag1, tag2 and tag3, with the mouse. Instead now they disappear when the mouse rolls out from the puppet image. Any guideline ? thanks

    Read the article

  • Grid related UI design question

    - by younevertell
    Grid related UI design question I want some 16-grid (4 rows and 4 columns) user interface, and fill the grid with some round shapes. I also want to use the MouseOver, mouse left button down, and Mouse Left Button Up events to set the state of grids as selected or not selected. My questions: 1. How fill the grid with some round shapes? by SetColumn and SetRow? 2. How to make the grids respond to the mouse please? Thanks <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition /> <ColumnDefinition /> <ColumnDefinition /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition /> <RowDefinition /> <RowDefinition /> <RowDefinition /> </Grid.RowDefinitions>

    Read the article

  • How can I hide this overlay element intelligently?

    - by inkedmn
    The site I'm working on has a collection of navigation elements across the top ("Products", "Company", etc.). When you mouse over the Products link, an overlay appears that shows a list of products with links to each. There's a small link at the top of the container that, when clicked, closes the container. All of this works as advertised. The client has asked that, once a user's mouse pointer is a sufficient distance from the overlay element, the overlay element would close (without them having to click the 'close' link). This element appears on multiple pages that have disparate content, so I'm afraid it won't be as simple as adding a mouseover listener to another single element within the page and have it work everywhere. My question, I suppose, is this: is there a relatively easy way to know when the mouse cursor is x pixels away from this container and trigger an event when this occurs? My other thought is that I could just find several elements on the page that fit this criteria and add mouseover listeners to each, but I'm assuming there's a more elegant way of handling this. Thanks in advance - and please let me know if more detail is needed.

    Read the article

  • Help - use PHP-broswer, or proxy or get_page_contents or include page, or something else ??

    - by userlite
    Hi, I am trying to develop a web application for which I need to capture a specific user-driven event (such as mouse dblclick) occurring on a different-website page loaded through my website. What I want to do is : User visits my website - hosted by me. There, user types in any website URL (e.g.: http://www.example.com) That URL page gets loaded as is. When user double-clicks mouse over any link or image from that page, a popup/side-panel is displayed with content related to that particular image or link. I can do this with a combination of PHP get_page_contents or include-page, and javascript dblclick. However, when user clicks on any link or submits a form, the control goes to that other website, where I cannot show the side-panel. I might be able to handle the links by proxifying them when user clicks on any of them. How do I handle forms submission and other stuff ? I can use a full-featured proxy, but that will be too heavy just for the purpose of capturing the event. My question is that is there a way to write some kind of light PHP script that sits on my website - that loads other websites contents as is, but lets me capture the mouse-dblclick event to show related-content in the side panel . I have already searched the internet, but could not find anything. Any help is really appreciated. Thanks.

    Read the article

  • How to make link become inactive?

    - by Konstantin Vasilcov
    The idea was simple: change li background color on hover to one color ul#menu li a:hover {...} change it on mouse press to the other color ul#menu li a:active {...} return the color to the original (normal) if the link is neither hover nor pressed The problem appeared to be that, if user rejected his intention and lets the mouse up away from the link, the back color stays as if it was pressed. Then I tried to research and came up with this: ul#menu li a:hover:active {...} It became better, and the link is not marked with special back color in a normal state after user presses the link and rejects. But the "on-hover" back color became equal to the active one. So it looks like the link gets "active" state and stays in it even after user releases mouse button. Hate to write this, but I am very new to html and css. So I may be missing something very basic here. Could you, please, suggest any way, how to achieve my goal? EDIT I've read this source CSS Styling links (thought there could be some other state to use instead of active), but found nothing suitable there...

    Read the article

  • Why am I unable to prevent the animation queue from stacking without breaking my code?

    - by user1888886
    I am attempting to use jquery and CSS to animate the buttons of a navigation sidebar I am using to signify which button is selected when the mouse is hovered over each. Currently, my code for the CSS appears as such: #navbutton {position:relative; width:178px; height:35px; border:1px #FFF solid; z-index:+3; font-family:'Capriola', sans-serif; font-size:18px; text-align:center;} #navbutton.button {color:#77D; background-color: #F0B0D0;} #navbutton.button_hover {color:#66C; background-color: #FCF; padding:10px;} And my jquery: <script type="text/javascript"> $(document).ready(function(){ $("#sidebar div").mouseenter(buttonHover) function buttonHover(){ $(this).stop().switchClass('button','button_hover',500); } $("#sidebar div").mouseleave(button) function button(){ $(this).stop().switchClass('button_hover','button',500); } }); </script> Before I added the .stop() to each part of the animation, the animation queue would stack up for each time the mouse was moved over each button and then removed. Now that the .stop() has been applied, however, if the mouse is moved away from a button during its animation, the button will freeze and remain in its mid-animation state, unable to be fixed by being hovered over until the page is reloaded, rather than reverting to its original mouseleave state. From everything I've read, this should not be the case. Might anyone be able to tell why my animation queue becomes broken once the .stop() is applied?

    Read the article

  • make selectable area using javascript

    - by Mher
    lets say I have a html page. <html> <body> ... This is my HTML Page, full of html objects and mouse events on them ... <div id='blocker' style="height: 100%; position: absolute; width: 100%; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1001; background: none repeat scroll 0% 0% black; opacity: 0.5;"></div> <div id='window_to_my_html_page' style="display: block; left: 50px; top: 50px; width: 200px; height: 200px; z-index: 1002; position: absolute;"></div> </body> </html> In this example div which id is 'blocker' will block all mouse events from my page. All my HTML page elements behind of my second div(which id is 'window_to_my_html_page') must be active, all mouse events must work on them, this div must be like a window to my HTML page I want to make all elements from my HTML page active(to work as normal) inside this area (left: 50px; top: 50px; width: 200px; height: 200px).... and other content, outside of this area make inactive The question: how can I do it?

    Read the article

  • Building a jQuery Plug-in to make an HTML Table scrollable

    - by Rick Strahl
    Today I got a call from a customer and we were looking over an older application that uses a lot of tables to display financial and other assorted data. The application is mostly meta-data driven with lots of layout formatting automatically driven through meta data rather than through explicit hand coded HTML layouts. One of the problems in this apps are tables that display a non-fixed amount of data. The users of this app don't want to use paging to see more data, but instead want to display overflow data using a scrollbar. Many of the forms are very densely populated, often with multiple data tables that display a few rows of data in the UI at the most. This sort of layout does not lend itself well to paging, but works much better with scrollable data. Unfortunately scrollable tables are not easily created. HTML Tables are mangy beasts as anybody who's done any sort of Web development knows. Tables are finicky when it comes to styling and layout, and they have many funky quirks, especially when it comes to scrolling both of the table rows themselves or even the child columns. There's no built-in way to make tables scroll and to lock headers while you do, and while you can embed a table (or anything really) into a scrolling div with something like this: <div style="position:relative; overflow: hidden; overflow-y: scroll; height: 200px; width: 400px;"> <table id="table" style="width: 100%" class="blackborder" > <thead> <tr class="gridheader"> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> <th >Column 4</th> </tr> </thead> <tbody> <tr> <td>Column 1 Content</td> <td>Column 2 Content</td> <td>Column 3 Content</td> <td>Column 4 Content</td> </tr> <tr> <td>Column 1 Content</td> <td>Column 2 Content</td> <td>Column 3 Content</td> <td>Column 4 Content</td> </tr> … </tbody> </table> </div> </div> that won't give a very satisfying visual experience: Both the header and body scroll which looks odd. You lose context as soon as the header scrolls off the top and when you reach the bottom of the list the bottom outline of the table shows which also looks off. The the side bar shows all the way down the length of the table yet another visual miscue. In a pinch this will work, but it's ugly. What's out there? Before we go further here you should know that there are a few capable grid plug-ins out there already. Among them: Flexigrid (can work of any table as well as with AJAX data) jQuery Scrollable Table Plug-in (feature similar to what I need but not quite) jqGrid (mostly an Ajax Grid which is very powerful and works very well) But in the end none of them fit the bill of what I needed in this situation. All of these require custom CSS and some of them are fairly complex to restyle. Others are AJAX only or work better with AJAX loaded data. However, I need to actually try (as much as possible) to maintain the original styling of the tables without requiring extensive re-styling. Building the makeTableScrollable() Plug-in To make a table scrollable requires rearranging the table a bit. In the plug-in I built I create two <div> tags and split the table into two: one for the table header and one for the table body. The bottom <div> tag then contains only the table's row data and can be scrolled while the header stays fixed. Using jQuery the basic idea is pretty simple: You create the divs, copy the original table into the bottom, then clone the table, clear all content append the <thead> section, into new table and then copy that table into the second header <div>. Easy as pie, right? Unfortunately it's a bit more complicated than that as it's tricky to get the width of the table right to account for the scrollbar (by adding a small column) and making sure the borders properly line up for the two tables. A lot of style settings have to be made to ensure the table is a fixed size, to remove and reattach borders, to add extra space to allow for the scrollbar and so forth. The end result of my plug-in is a table with a scrollbar. Using the same table I used earlier the result looks like this: To create it, I use the following jQuery plug-in logic to select my table and run the makeTableScrollable() plug-in against the selector: $("#table").makeTableScrollable( { cssClass:"blackborder"} ); Without much further ado, here's the short code for the plug-in: (function ($) { $.fn.makeTableScrollable = function (options) { return this.each(function () { var $table = $(this); var opt = { // height of the table height: "250px", // right padding added to support the scrollbar rightPadding: "10px", // cssclass used for the wrapper div cssClass: "" } $.extend(opt, options); var $thead = $table.find("thead"); var $ths = $thead.find("th"); var id = $table.attr("id"); var cssClass = $table.attr("class"); if (!id) id = "_table_" + new Date().getMilliseconds().ToString(); $table.width("+=" + opt.rightPadding); $table.css("border-width", 0); // add a column to all rows of the table var first = true; $table.find("tr").each(function () { var row = $(this); if (first) { row.append($("<th>").width(opt.rightPadding)); first = false; } else row.append($("<td>").width(opt.rightPadding)); }); // force full sizing on each of the th elemnts $ths.each(function () { var $th = $(this); $th.css("width", $th.width()); }); // Create the table wrapper div var $tblDiv = $("<div>").css({ position: "relative", overflow: "hidden", overflowY: "scroll" }) .addClass(opt.cssClass); var width = $table.width(); $tblDiv.width(width).height(opt.height) .attr("id", id + "_wrapper") .css("border-top", "none"); // Insert before $tblDiv $tblDiv.insertBefore($table); // then move the table into it $table.appendTo($tblDiv); // Clone the div for header var $hdDiv = $tblDiv.clone(); $hdDiv.empty(); var width = $table.width(); $hdDiv.attr("style", "") .css("border-bottom", "none") .width(width) .attr("id", id + "_wrapper_header"); // create a copy of the table and remove all children var $newTable = $($table).clone(); $newTable.empty() .attr("id", $table.attr("id") + "_header"); $thead.appendTo($newTable); $hdDiv.insertBefore($tblDiv); $newTable.appendTo($hdDiv); $table.css("border-width", 0); }); } })(jQuery); Oh sweet spaghetti code :-) The code starts out by dealing the parameters that can be passed in the options object map: height The height of the full table/structure. The height of the outside wrapper container. Defaults to 200px. rightPadding The padding that is added to the right of the table to account for the scrollbar. Creates a column of this width and injects it into the table. If too small the rightmost column might get truncated. if too large the empty column might show. cssClass The CSS class of the wrapping container that appears to wrap the table. If you want a border around your table this class should probably provide it since the plug-in removes the table border. The rest of the code is obtuse, but pretty straight forward. It starts by creating a new column in the table to accommodate the width of the scrollbar and avoid clipping of text in the rightmost column. The width of the columns is explicitly set in the header elements to force the size of the table to be fixed and to provide the same sizing when the THEAD section is moved to a new copied table later. The table wrapper div is created, formatted and the table is moved into it. The new wrapper div is cloned for the header wrapper and configured. Finally the actual table is cloned and cleared of all elements. The original table's THEAD section is then moved into the new table. At last the new table is added to the header <div>, and the header <div> is inserted before the table wrapper <div>. I'm always amazed how easy jQuery makes it to do this sort of re-arranging, and given of what's happening the amount of code is rather small. Disclaimer: Your mileage may vary A word of warning: I make no guarantees about the code above. It's a first cut and I provided this here mainly to demonstrate the concepts of decomposing and reassembling an HTML layout :-) which jQuery makes so nice and easy. I tested this component against the typical scenarios we plan on using it for which are tables that use a few well known styles (or no styling at all). I suspect if you have complex styling on your <table> tag that things might not go so well. If you plan on using this plug-in you might want to minimize your styling of the table tag and defer any border formatting using the class passed in via the cssClass parameter, which ends up on the two wrapper div's that wrap the header and body rows. There's also no explicit support for footers. I rarely if ever use footers (when not using paging that is), so I didn't feel the need to add footer support. However, if you need that it's not difficult to add - the logic is the same as adding the header. The plug-in relies on a well-formatted table that has THEAD and TBODY sections along with TH tags in the header. Note that ASP.NET WebForm DataGrids and GridViews by default do not generate well-formatted table HTML. You can look at my Adding proper THEAD sections to a GridView post for more info on how to get a GridView to render properly. The plug-in has no dependencies other than jQuery. Even with the limitations in mind I hope this might be useful to some of you. I know I've already identified a number of places in my own existing applications where I will be plugging this in almost immediately. Resources Download Sample and Plug-in code Latest version in the West Wind Web & AJAX Toolkit Repository © Rick Strahl, West Wind Technologies, 2005-2011Posted in jQuery  HTML  ASP.NET  

    Read the article

  • jquery ui draggable elements not 'draggable' outside of scrolling div

    - by Stu
    hello all, i am super stumped. i have many elements (floating href tags) in a div with a set height/width, with scroll set to "overflow: auto" in the css. this is the structure of the divs: <div id="tagFun_div_main"> <div id="tf_div_tagsReturn"> <!-- all the draggable elements go in here, the parent div scolls --> </div> <div id=" tf_div_tagsDrop"> <div id="tf_dropBox"></div> </div></div> the parent div's, 'tf_div_tagsReturn' and 'tf_div_tagsDrop' will ultimately float next to each other. here is the jquery which is run after all of the 'draggable' elements have been created with class name 'tag_cell', : $(function() { $(".tag_cell").draggable({ revert: 'invalid', scroll: false, containment: '#tagFun_div_main' }); $("#tf_dropBox").droppable({ accept: '.tag_cell', hoverClass: 'tf_dropBox_hover', activeClass: 'tf_dropBox_active', drop: function(event, ui) { GLOBAL_ary_tf_tags.push(ui.draggable.html()); tagFun_reload(); } }); }); as i stated above, the draggable elements are draggable within div 'tf_div_tagsReturn', but they do not visually drag outside of that parent div. worthy to note, if i am dragging one of the draggable elements, and move the mouse over the droppable div, with id 'tf_dropBox', then the hoverclass is fired, i just can't see the draggable element any more. thank you very much for any advice on helping me find a solution. this is my first run at using jquery, so hopefully i am just missing something super obvious. i've been reading the documentation and searching forums thus far to no prevail :( thank you for your time. UPDATE: many thanks to Jabes88 for providing the solution which allowed me to achieve the functionality i was looking for, here is what my jquery ended up looking like, feel free to critique it, as i am new to jquery. $(function() { $(".tag_cell").draggable({ revert: 'invalid', scroll: false, containment: '#tagFun_div_main', helper: 'clone', start : function() { this.style.display="none"; }, stop: function() { this.style.display=""; } }); $(".tf_dropBox").droppable({ accept: '.tag_cell', hoverClass: 'tf_dropBox_hover', activeClass: 'tf_dropBox_active', drop: function(event, ui) { GLOBAL_ary_tf_tags.push(ui.draggable.html()); tagFun_reload(); } }); });

    Read the article

  • how to re-enable default after doing event.preventDefault()

    - by Matt
    Hi, I know this exact question was asked here, but the answer didn't work for what I needed to do so I figured I'd give some example code and explain a bit... $(document).keypress( function (event) { // Pressing Up or Right: Advance to next video if (event.keyCode == 40 || event.keyCode == 39) { event.preventDefault(); $(".current").next().click(); } // Pressing Down or Left: Back to previous video else if (event.keyCode == 38 || event.keyCode == 37) { event.preventDefault(); $(".current").prev().click(); } } ); It basically disables the arrow keys to use them for something else, but doing: $(document).keypress(function () { }); doesn't enable the default function again... I need it to scroll the page without having to create a scroll function for it... Any ideas? Thanks, Matt

    Read the article

  • How to prevent question mark cursor issue cause be Insert key when doing VNC to a mac?

    - by Sorin Sbarnea
    I found out that when I press the Insert key on the client I will block the OS X VNC server by putting it in a "help mode" where you get the question mark mouse cursor. The mouse works but I cannot use the keyboard anymore. Details: Reconnecting using VNC does not help Normal keyboard is working fine on the mac The only solution in addition to relogin was to stop the VNC server on mac using: killall OSXvnc-server After few seconds it will restart by itself and it will work. I don't like current workaround and looking for something better. Tested with these versions of the VNC client and all put the VNC server in the question mark mode, requiring service restart: Ultr@VNC 1.0.8.2 RealVNC 4.1.3 I know that the problem is caused by the different/bad implementation of the VNC protocol in the server but do you need an workaround?

    Read the article

  • UIScrollView and Cocos2D

    - by Carl
    I have created a UIScrollView in a cocos2d application. I am adding sprites dynamically, over 3 pages. On the first page, touch works perfectly on a sprite, however if I use the scroll view and navigate to the second page, touch does not work quite right... the sprite will respond to the touch when I touch the screen, approximately the amount I have scrolled to the left. If I scroll back to the first page, touch works perfectly for a sprite. Any ideas? I am using the following tutorial: http://getsetgames.com/2009/08/21/cocos2d-and-uiscrollview/ :)

    Read the article

  • WPF DataGrid : CanContentScroll property causing odd behavior

    - by Sonic Soul
    i have a solution where i generate a DataGrid (or multiple instances) based on user criteria.. each grid keeps receiving data as it comes in via ObservableCollection the problem i had, was that the scroll acted weird. It was choppy, and scrollbar would resize it self while scrolling. than i found.. CanContentScroll property! It completely fixes the weird scrolling behavior bringing me temporary bliss and happiness. however, it causes 2 unfortunate side effects. whenever i re-create grid instances and bind them to my observable collection, it freezes my entire window for 5 seconds. when my grid grows to a big size, this delay can last for 30 seconds. when i call TradeGrid.ScrollIntoView(TradeGrid.Items(TradeGrid.Items.Count - 1)) to scroll to the bottom, it jumps to bottom and than back to the top. is there another way to achieve smooth scrolling perhaps?

    Read the article

  • Android gallery widget should never end

    - by Faisal khan
    Following code display the Gallery items. Gallery g = (Gallery) findViewById(R.id.icon_gallery); ImageAdapter iv = new ImageAdapter(this); g.setAdapter(iv); // line dispalys default selection center of the image. g.setSelection(iv.getCount()/2, true); There are 5 images i added in imageAdapter. displaying 3rd image in the center. When user drag gallery from left to right or right to left it stops after 2 item scroll i want this scroll to never finish it should start start cycle again once cycle finish. how can i do it ?

    Read the article

< Previous Page | 103 104 105 106 107 108 109 110 111 112 113 114  | Next Page >