Search Results

Search found 14298 results on 572 pages for 'css float'.

Page 198/572 | < Previous Page | 194 195 196 197 198 199 200 201 202 203 204 205  | Next Page >

  • May be an IE z-index bug?

    - by baikaishiuc
    Below is my code. when open the page in ie browser, then select the text in div, the text will be replaced by some shadow quad blank . If you delete a line z-index:0, in css class test1, the ie will perform correctly. In my project , the z-index must be set greater than zero, so I couldn't delete the line. I found a solution is to set bg_img.filter = "" when pannel.z-index greater than 0, then ie will also working good. But unfortunately, the bg_img.filter.alpha must be set, too. So how could I do? test .test1 { position:absolute; background:#ffffff; left:20px; top:20px; border:1px solid; width:198px; height:500px; filter: progid:DXImageTransform.Microsoft.Shadow(color="#999999", Direction=135, Strength=5); z-index:0; } </style> <script> function init () { var pannel = document.createElement ('div'); var bg_img = document.createElement ('div'); var head = document.createElement ('div'); pannel.setAttribute('class', 'test1'); pannel.setAttribute('className', 'test1'); bg_img.style.cssText = "position:relative;left:0px;top:0px;" + "width:198px;" + "height:500px;" + "filter:alpha(opacity=100);"; head.style.cssText = "position:absolute;" + "left:0px;" + "top:0px;" + "width:180px;" + "height:20px;"; document.body.appendChild (pannel); pannel.appendChild(bg_img); pannel.appendChild(head); head.innerHTML = "<div>yusutechasdf</div><div>innerhtml</div>" } </script>

    Read the article

  • How to set CSS style colors in GWT

    - by AmaltasCoder
    I have a GWT + AppEngine application that lets users create online polls. I want to let the poll creator choose from a variety of themes for his poll. We will save the theme a poll creator chose on the server and whenever a poll respondent access the poll he will get the questions with the chosen theme. A theme for us means a set of 4-5 colors which we will use to style the poll page. Our client side application is a GWT application with styles set inline in UiBinder templates elements, for example: <ui:style> .header { background: color1; padding: 6px 6px; } .anothercssclass { background: color2; padding: 6px 6px; } </ui:style> Please suggest how we can set the color1 and color2 from the theme saved on server. Please note this is NOT a GWT module theme question.

    Read the article

  • Need help with tweaking a Dropdown with three options, user selects one - a hidden div appears with correct fields

    - by Jack
    Hello Again, I posted a question on here and got an answer within minutes I'm hoping the wizards on here can help me again. Okay so I'm using a script I found online to try and add this function to a shopping cart form. Here's the setup. I have a payment method dropdown with Visa, Mastercard and Bank Withdrawal as the options. For the credit cards I have one hidden div with a certain set of fields, and for the bank I have another hidden div. Each of the divs have named ID's - #payCredit and #payBank The css for both have margin: 0px and display: none; Here's a peice of javascript I used successfuly on a shipping address checkbox `function toggleLayer( whichLayer ) { var elem, vis; if( document.getElementById ) // this is the way the standards work elem = document.getElementById( whichLayer ); else if( document.all ) // this is the way old msie versions work elem = document.all[whichLayer]; else if( document.layers ) // this is the way nn4 works elem = document.layers[whichLayer]; vis = elem.style; // if the style.display value is blank we try to figure it out here if(vis.display==''&&elem.offsetWidth!=undefined&&elem.offsetHeight!=undefined) vis.display = (elem.offsetWidth!=0&&elem.offsetHeight!=0)?'block':'none'; vis.display = (vis.display==''||vis.display=='block')?'none':'block'; }` I was hoping I could change it slightly to meet my needs. Here's the dropdown <label>Payment Method:</label> <select name="payment" id="payment" class="dropdown3" style="width:8em"> <option selected="selected">Select</option> <option value="Visa" onclick="javascript:toggleLayer('payCredit');">Visa</option> <option value="MasterCard" onclick="javascript:toggleLayer('payCredit');">Mastercard</option> <option value="Direct" onclick="javascript:toggleLayer('payBank');">Direct Withdraw</option> </select></li> The current result is that it kinda works. I can open the dropdown and select Visa and it appears, if I select Visa again it disappears, if I select Visa and then select bank, both appear. You can see what i'm working on here - http://test.sharevetcare.com/bestfriends/cart3.html

    Read the article

  • ASP.NET Grid with CSS in Rows and Columns

    - by user1089173
    I have the following code List<Department> depts = new List<Department>(); Department.Add(new Department() { DNo = 1, DName = "Accounting", DFloor="6" }); Department.Add(new Department() { DNo = 2, DName = "FInance", DFloor="3" }); I want to bind this data to a GridView, so that it outputs the following. Observe the classes on each th and tr. How can I achieve this in ASP.NET? <thead> <tr> <th class="DNo">DNo</th> <th class="DName">DName</th> <th class= "DFloor">DFloor</th> </tr> </thead> <tr> <td class="DNo">1</td> <td class="DName">Accounting</td> <td class="DFloor">6</td> </tr> <tr> <td class="DNo">2</td> <td class="DName">FInance</td> <td class="DFloor">3</td> </tr>

    Read the article

  • New line (in the code) after <li> element breaking layout

    - by BT643
    Weirdly, I've never come across this issue before, but I've just started making a site and the top navigation isn't playing nicely. I want a small amount of white space between each menu item, but when I have new lines between my <li> elements and my <a> elements in my IDE (Netbeans), the white space disappears, yet it looks fine if I have <li><a></a></li> all on the same line. I was always under the impression html ignored white space in the code. I've checked for any weird characters causing problems in other text editors and can't find anything. Here's the code... Like this the menu looks correct but code looks ugly (I know it looks fine when it's this simple, but I'm going be adding more complexity in which makes it look awful all on one line): <ul id="menu"> <li><a href="#">About</a></li> <li class="active"><a href="<?php echo site_url("tracklist"); ?>">Track List</a></li> <li><a href="<?php echo site_url("stats"); ?>">Stats</a></li> <li><a href="#">Stats</a></li> </ul> Like this the menu looks wrong but code looks fine: <ul id="menu"> <li> <a href="#">About</a> </li> <li class="active"> <a href="<?php echo site_url("tracklist"); ?>">Track List</a> </li> <li> <a href="<?php echo site_url("stats"); ?>">Stats</a> </li> <li> <a href="#">Stats</a> </li> </ul> Here's the css: #menu { float: right; } #menu li { display: inline-block; padding: 5px; background-color: #932996; border-bottom: solid 1px #932996; } #menu li:hover { border-bottom: solid 3px #FF0000; } #menu li.active { background-color: #58065e; } I'm sure it's something simple I'm doing wrong... but can someone shed some light on this for me? Sorry for the lengthy post (my first on stackoverflow).

    Read the article

  • Jquery Text Slide in Effect

    - by user3718016
    I want to make text animation like this slide in from left. There are three text fields Sports Cargo Bag $14 Sale $25 I want these text to be set from jquery and slide in from the left like this link. This is my code JsFiddle html <div id="mainContainer"> <div id="logdo"> <img src="http://i.share.pho.to/7346a9ca_o.gif"/> </div> <div id="images"> <img id="introImg" src="http://i.share.pho.to/9064dfe4_o.jpeg"/></div> <div id="headlineText"> <p id="headline1Txt" ></p> <p id="headline2Txt" ></p> <p id="headline3Txt" ></p> </div> <button class="btn btn-primary" id="ctaBtn" type="button">SHOP NOW</button> </div> css * { margin:0; padding:0; } #mainContainer{ text-align: center; width:160px; height:600px; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; border:5px solid #BACAE4; overflow: hidden; position: fixed; } #images{ position:absolute; top:200px; left:3px; right:1286px; Width:130px; height:152px; } #introImg{ position:absolute; top:40px; left:7px; right:11px; } #headlineText p { text-align: center; position: absolute; top:60px; left:-120px; Width:120px; height:269px; line-height:1.0; overflow:hidden; } #ctaBtn{ position:absolute; top:540px; left:26px; right:0px; Width:106px; height:28px; }

    Read the article

  • Tooltip arrow right

    - by Tabatha M
    I'm trying to make this tooltip arrow point to the right towards the link. CSS .tooltipside { position: relative; cursor: help; display: inline-block; outline: none; } .tooltipside span { visibility: hidden; position: absolute; bottom: -22px; z-index: 999; width: 52px; margin-left: -63px; padding: 2px; border: 1px solid #80a7ba; background-color: white; -moz-border-radius: 4px; border-radius: 4px; -moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset; box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset; text-shadow: 0 1px 0 rgba(255,255,255,.4); } .tooltipside:hover { border: 0; /* IE6 fix */ } .tooltipside:hover span { visibility: visible; } .tooltipside span:before, .tooltipside span:after { content: ""; position: absolute; z-index: 1000; bottom: -7px; left: 50%; margin-left: -8px; border-top: 8px solid #80a7ba; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 0; } .tooltipside span:before { border-top-color: #ccc; bottom: -8px; } ? The html is <a href='#' class='tooltipside'><span> <img src='http://cdn2.iconfinder.com/data/icons/32pxmania/misc_57.png' border='0' width='52' height='52'></span>LINK</a> TEST TEST TEST</b>? It currently points down in the center of the tooltip I need it to point right towards the link. How would I do this? Thanks

    Read the article

  • JQuery validation using is() and multiple CSS classes

    - by Alex
    Hi Folks, Trying to debug something that basically .trim()'s, .val()'s and .length's a textarea input as HTML below (truncated): <form id="Kontaktanfrage" method="post" action="tests/testform/"> ... <textarea cols="50" rows="8" id="el_12" name="FORM[Kontaktanfrage][el_12]" title="Ihre Nachricht: *" class="textarea required"></textarea> ... </form> JavaScript: function validateField(formId, fieldId) { if (fieldId) { var element = "form#"+formId+" input#"+fieldId; var fieldValue = jQuery.trim(jQuery(element).val()); var fieldLength = fieldValue.length; var fieldError = ""; if ($(element).is('.textarea.required') && fieldLength == 0) { fieldError = "error message"; } } } The above if check is never true. Using JQuery: 1.4.1. Having seen other examples online, I can't see what the difference should be. Feel free to test it in FireBug at (http://www.initiat.de/tests/testform/). Any help appreciated, can't see what I'm doing wrong.

    Read the article

  • Points on lines where the two lines are the closest together

    - by James Bedford
    Hey guys, I'm trying to find the points on two lines where the two lines are the closest. I've implemented the following method (Points and Vectors are as you'd expect, and a Line consists of a Point on the line and a non-normalized direction Vector from that point): void CDClosestPointsOnTwoLines(Line line1, Line line2, Point* closestPoints) { closestPoints[0] = line1.pointOnLine; closestPoints[1] = line2.pointOnLine; Vector d1 = line1.direction; Vector d2 = line2.direction; float a = d1.dot(d1); float b = d1.dot(d2); float e = d2.dot(d2); float d = a*e - b*b; if (d != 0) // If the two lines are not parallel. { Vector r = Vector(line1.pointOnLine) - Vector(line2.pointOnLine); float c = d1.dot(r); float f = d2.dot(r); float s = (b*f - c*e) / d; float t = (a*f - b*c) / d; closestPoints[0] = line1.positionOnLine(s); closestPoints[1] = line2.positionOnLine(t); } else { printf("Lines were parallel.\n"); } } I'm using OpenGL to draw three lines that move around the world, the third of which should be the line that most closely connects the other two lines, the two end points of which are calculated using this function. The problem is that the first point of closestPoints after this function is called will lie on line1, but the second point won't lie on line2, let alone at the closest point on line2! I've checked over the function many times but I can't see where the mistake in my implementation is. I've checked my dot product function, scalar multiplication, subtraction, positionOnLine() etc. etc. So my assumption is that the problem is within this method implementation. If it helps to find the answer, this is function supposed to be an implementation of section 5.1.8 from 'Real-Time Collision Detection' by Christer Ericson. Many thanks for any help!

    Read the article

  • First Person Camera strafing at angle

    - by Linkandzelda
    I have a simple camera class working in directx 11 allowing moving forward and rotating left and right. I'm trying to implement strafing into it but having some problems. The strafing works when there's no camera rotation, so when the camera starts at 0, 0, 0. But after rotating the camera in either direction it seems to strafe at an angle or inverted or just some odd stuff. Here is a video uploaded to Dropbox showing this behavior. https://dl.dropboxusercontent.com/u/2873587/IncorrectStrafing.mp4 And here is my camera class. I have a hunch that it's related to the calculation for camera position. I tried various different calculations in strafe and they all seem to follow the same pattern and same behavior. Also the m_camera_rotation represents the Y rotation, as pitching isn't implemented yet. #include "camera.h" camera::camera(float x, float y, float z, float initial_rotation) { m_x = x; m_y = y; m_z = z; m_camera_rotation = initial_rotation; updateDXZ(); } camera::~camera(void) { } void camera::updateDXZ() { m_dx = sin(m_camera_rotation * (XM_PI/180.0)); m_dz = cos(m_camera_rotation * (XM_PI/180.0)); } void camera::Rotate(float amount) { m_camera_rotation += amount; updateDXZ(); } void camera::Forward(float step) { m_x += step * m_dx; m_z += step * m_dz; } void camera::strafe(float amount) { float yaw = (XM_PI/180.0) * m_camera_rotation; m_x += cosf( yaw ) * amount; m_z += sinf( yaw ) * amount; } XMMATRIX camera::getViewMatrix() { updatePosition(); return XMMatrixLookAtLH(m_position, m_lookat, m_up); } void camera::updatePosition() { m_position = XMVectorSet(m_x, m_y, m_z, 0.0); m_lookat = XMVectorSet(m_x + m_dx, m_y, m_z + m_dz, 0.0); m_up = XMVectorSet(0.0, 1.0, 0.0, 0.0); }

    Read the article

  • Slick2D - Entities and rendering

    - by Zarkopafilis
    I have been trying to create my very first game for quite a while, followed some tutorials and stuff, but I am stuck at creating my entity system. I have made a class that extends the Entity class and here it is: public class Lazer extends Entity{//Just say that it is some sort of bullet private Play p;//Play class(State) private float x; private float y; private int direction; public Lazer(Play p, float x , float y, int direction){ this.p = p; this.x = x; this.y = y; this.direction = direction; p.ent.add(this); } public int getDirection(){ return direction; //this one specifies what value will be increased (x/y) at update } public float getX(){ return x; } public float getY(){ return y; } public void setY(float y){ this.y = y; } public void setX(float x){ this.x = x; } } The class seems pretty good , after speding some hours googling what would be the right thing. Now, on my Play class. I cant figure out how to draw them. (I have added them to an arraylist) On the update method , I update the lazers based on their direction: public void moveLazers(int delta){ for(int i=0;i<ent.size();i++){ Lazer l = ent.get(i); if(l.getDirection() == 1){ l.setX(l.getX() + delta * .1f); }else if(l.getDirection() == 2){ l.setX(l.getX() - delta * .1f); }else if(l.getDirection() == 3){ l.setY(l.getY() + delta * .1f); }else if(l.getDirection() == 4){ l.setY(l.getY() - delta * .1f); } } } Now , I am stuck at the render method. Anyway , is this the correct way of doing this or do I need to change stuff? Also I need to know if collision detection needs to be in the update method. Thanks in advance ~ Teo Ntakouris

    Read the article

  • XNA shield effect with a Primative sphere problem

    - by Sparky41
    I'm having issue with a shield effect i'm trying to develop. I want to do a shield effect that surrounds part of a model like this: http://i.imgur.com/jPvrf.png I currently got this: http://i.imgur.com/Jdin7.png (The red likes are a simple texture a black background with a red cross in it, for testing purposes: http://i.imgur.com/ODtzk.png where the smaller cross in the middle shows the contact point) This sphere is drawn via a primitive (DrawIndexedPrimitives) This is how i calculate the pieces of the sphere using a class i've called Sphere (this class is based off the code here: http://xbox.create.msdn.com/en-US/education/catalog/sample/primitives_3d) public class Sphere { // During the process of constructing a primitive model, vertex // and index data is stored on the CPU in these managed lists. List vertices = new List(); List indices = new List(); // Once all the geometry has been specified, the InitializePrimitive // method copies the vertex and index data into these buffers, which // store it on the GPU ready for efficient rendering. VertexBuffer vertexBuffer; IndexBuffer indexBuffer; BasicEffect basicEffect; public Vector3 position = Vector3.Zero; public Matrix RotationMatrix = Matrix.Identity; public Texture2D texture; /// <summary> /// Constructs a new sphere primitive, /// with the specified size and tessellation level. /// </summary> public Sphere(float diameter, int tessellation, Texture2D text, float up, float down, float portstar, float frontback) { texture = text; if (tessellation < 3) throw new ArgumentOutOfRangeException("tessellation"); int verticalSegments = tessellation; int horizontalSegments = tessellation * 2; float radius = diameter / 2; // Start with a single vertex at the bottom of the sphere. AddVertex(Vector3.Down * ((radius / up) + 1), Vector3.Down, Vector2.Zero);//bottom position5 // Create rings of vertices at progressively higher latitudes. for (int i = 0; i < verticalSegments - 1; i++) { float latitude = ((i + 1) * MathHelper.Pi / verticalSegments) - MathHelper.PiOver2; float dy = (float)Math.Sin(latitude / up);//(up)5 float dxz = (float)Math.Cos(latitude); // Create a single ring of vertices at this latitude. for (int j = 0; j < horizontalSegments; j++) { float longitude = j * MathHelper.TwoPi / horizontalSegments; float dx = (float)(Math.Cos(longitude) * dxz) / portstar;//port and starboard (right)2 float dz = (float)(Math.Sin(longitude) * dxz) * frontback;//front and back1.4 Vector3 normal = new Vector3(dx, dy, dz); AddVertex(normal * radius, normal, new Vector2(j, i)); } } // Finish with a single vertex at the top of the sphere. AddVertex(Vector3.Up * ((radius / down) + 1), Vector3.Up, Vector2.One);//top position5 // Create a fan connecting the bottom vertex to the bottom latitude ring. for (int i = 0; i < horizontalSegments; i++) { AddIndex(0); AddIndex(1 + (i + 1) % horizontalSegments); AddIndex(1 + i); } // Fill the sphere body with triangles joining each pair of latitude rings. for (int i = 0; i < verticalSegments - 2; i++) { for (int j = 0; j < horizontalSegments; j++) { int nextI = i + 1; int nextJ = (j + 1) % horizontalSegments; AddIndex(1 + i * horizontalSegments + j); AddIndex(1 + i * horizontalSegments + nextJ); AddIndex(1 + nextI * horizontalSegments + j); AddIndex(1 + i * horizontalSegments + nextJ); AddIndex(1 + nextI * horizontalSegments + nextJ); AddIndex(1 + nextI * horizontalSegments + j); } } // Create a fan connecting the top vertex to the top latitude ring. for (int i = 0; i < horizontalSegments; i++) { AddIndex(CurrentVertex - 1); AddIndex(CurrentVertex - 2 - (i + 1) % horizontalSegments); AddIndex(CurrentVertex - 2 - i); } //InitializePrimitive(graphicsDevice); } /// <summary> /// Adds a new vertex to the primitive model. This should only be called /// during the initialization process, before InitializePrimitive. /// </summary> protected void AddVertex(Vector3 position, Vector3 normal, Vector2 texturecoordinate) { vertices.Add(new VertexPositionNormal(position, normal, texturecoordinate)); } /// <summary> /// Adds a new index to the primitive model. This should only be called /// during the initialization process, before InitializePrimitive. /// </summary> protected void AddIndex(int index) { if (index > ushort.MaxValue) throw new ArgumentOutOfRangeException("index"); indices.Add((ushort)index); } /// <summary> /// Queries the index of the current vertex. This starts at /// zero, and increments every time AddVertex is called. /// </summary> protected int CurrentVertex { get { return vertices.Count; } } public void InitializePrimitive(GraphicsDevice graphicsDevice) { // Create a vertex declaration, describing the format of our vertex data. // Create a vertex buffer, and copy our vertex data into it. vertexBuffer = new VertexBuffer(graphicsDevice, typeof(VertexPositionNormal), vertices.Count, BufferUsage.None); vertexBuffer.SetData(vertices.ToArray()); // Create an index buffer, and copy our index data into it. indexBuffer = new IndexBuffer(graphicsDevice, typeof(ushort), indices.Count, BufferUsage.None); indexBuffer.SetData(indices.ToArray()); // Create a BasicEffect, which will be used to render the primitive. basicEffect = new BasicEffect(graphicsDevice); //basicEffect.EnableDefaultLighting(); } /// <summary> /// Draws the primitive model, using the specified effect. Unlike the other /// Draw overload where you just specify the world/view/projection matrices /// and color, this method does not set any renderstates, so you must make /// sure all states are set to sensible values before you call it. /// </summary> public void Draw(Effect effect) { GraphicsDevice graphicsDevice = effect.GraphicsDevice; // Set our vertex declaration, vertex buffer, and index buffer. graphicsDevice.SetVertexBuffer(vertexBuffer); graphicsDevice.Indices = indexBuffer; graphicsDevice.BlendState = BlendState.Additive; foreach (EffectPass effectPass in effect.CurrentTechnique.Passes) { effectPass.Apply(); int primitiveCount = indices.Count / 3; graphicsDevice.DrawIndexedPrimitives(PrimitiveType.TriangleList, 0, 0, vertices.Count, 0, primitiveCount); } graphicsDevice.BlendState = BlendState.Opaque; } /// <summary> /// Draws the primitive model, using a BasicEffect shader with default /// lighting. Unlike the other Draw overload where you specify a custom /// effect, this method sets important renderstates to sensible values /// for 3D model rendering, so you do not need to set these states before /// you call it. /// </summary> public void Draw(Camera camera, Color color) { // Set BasicEffect parameters. basicEffect.World = GetWorld(); basicEffect.View = camera.view; basicEffect.Projection = camera.projection; basicEffect.DiffuseColor = color.ToVector3(); basicEffect.TextureEnabled = true; basicEffect.Texture = texture; GraphicsDevice device = basicEffect.GraphicsDevice; device.DepthStencilState = DepthStencilState.Default; if (color.A < 255) { // Set renderstates for alpha blended rendering. device.BlendState = BlendState.AlphaBlend; } else { // Set renderstates for opaque rendering. device.BlendState = BlendState.Opaque; } // Draw the model, using BasicEffect. Draw(basicEffect); } public virtual Matrix GetWorld() { return /*world */ Matrix.CreateScale(1f) * RotationMatrix * Matrix.CreateTranslation(position); } } public struct VertexPositionNormal : IVertexType { public Vector3 Position; public Vector3 Normal; public Vector2 TextureCoordinate; /// <summary> /// Constructor. /// </summary> public VertexPositionNormal(Vector3 position, Vector3 normal, Vector2 textCoor) { Position = position; Normal = normal; TextureCoordinate = textCoor; } /// <summary> /// A VertexDeclaration object, which contains information about the vertex /// elements contained within this struct. /// </summary> public static readonly VertexDeclaration VertexDeclaration = new VertexDeclaration ( new VertexElement(0, VertexElementFormat.Vector3, VertexElementUsage.Position, 0), new VertexElement(12, VertexElementFormat.Vector3, VertexElementUsage.Normal, 0), new VertexElement(24, VertexElementFormat.Vector2, VertexElementUsage.TextureCoordinate, 0) ); VertexDeclaration IVertexType.VertexDeclaration { get { return VertexPositionNormal.VertexDeclaration; } } } A simple call to the class to initialise it. The Draw method is called in the master draw method in the Gamecomponent. My current thoughts on this are: The direction of the weapon hitting the ship is used to get the middle position for the texture Wrap a texture around the drawn sphere based on this point of contact Problem is i'm not sure how to do this. Can anyone help or if you have a better idea please tell me i'm open for opinion? :-) Thanks.

    Read the article

  • Implementing Circle Physics in Java

    - by Shijima
    I am working on a simple physics based game where 2 balls bounce off each other. I am following a tutorial, 2-Dimensional Elastic Collisions Without Trigonometry, for the collision reactions. I am using Vector2 from the LIBGDX library to handle vectors. I am a bit confused on how to implement step 6 in Java from the tutorial. Below is my current code, please note that the code strictly follows the tutorial and there are redundant pieces of code which I plan to refactor later. Note: refrences to this refer to ball 1, and ball refers to ball 2. /* * Step 1 * * Find the Normal, Unit Normal and Unit Tangential vectors */ Vector2 n = new Vector2(this.position[0] - ball.position[0], this.position[1] - ball.position[1]); Vector2 un = n.normalize(); Vector2 ut = new Vector2(-un.y, un.x); /* * Step 2 * * Create the initial (before collision) velocity vectors */ Vector2 v1 = this.velocity; Vector2 v2 = ball.velocity; /* * Step 3 * * Resolve the velocity vectors into normal and tangential components */ float v1n = un.dot(v1); float v1t = ut.dot(v1); float v2n = un.dot(v2); float v2t = ut.dot(v2); /* * Step 4 * * Find the new tangential Velocities after collision */ float v1tPrime = v1t; float v2tPrime = v2t; /* * Step 5 * * Find the new normal velocities */ float v1nPrime = v1n * (this.mass - ball.mass) + (2 * ball.mass * v2n) / (this.mass + ball.mass); float v2nPrime = v2n * (ball.mass - this.mass) + (2 * this.mass * v1n) / (this.mass + ball.mass); /* * Step 6 * * Convert the scalar normal and tangential velocities into vectors??? */

    Read the article

  • 2D Camera Acceleration/Lag

    - by Cyral
    I have a nice camera set up for my 2D xna game. Im wondering how I should make the camera have 'acceleration' or 'lag' so it smoothly follows the player, instead of 'exactly' like mine does now. Im thinking somehow I need to Lerp the values when I set CameraPosition. Heres my code private void ScrollCamera(Viewport viewport) { float ViewMargin = .35f; float marginWidth = viewport.Width * ViewMargin; float marginLeft = cameraPosition.X + marginWidth; float marginRight = cameraPosition.X + viewport.Width - marginWidth; float TopMargin = .3f; float BottomMargin = .1f; float marginTop = cameraPosition.Y + viewport.Height * TopMargin; float marginBottom = cameraPosition.Y + viewport.Height - viewport.Height * BottomMargin; Vector2 CameraMovement; Vector2 maxCameraPosition; CameraMovement.X = 0.0f; if (Player.Position.X < marginLeft) CameraMovement.X = Player.Position.X - marginLeft; else if (Player.Position.X > marginRight) CameraMovement.X = Player.Position.X - marginRight; maxCameraPosition.X = 16 * Width - viewport.Width; cameraPosition.X = MathHelper.Clamp(cameraPosition.X + CameraMovement.X, 0.0f, maxCameraPosition.X); CameraMovement.Y = 0.0f; if (Player.Position.Y < marginTop) //above the top margin CameraMovement.Y = Player.Position.Y - marginTop; else if (Player.Position.Y > marginBottom) //below the bottom margin CameraMovement.Y = Player.Position.Y - marginBottom; maxCameraPosition.Y = 16 * Height - viewport.Height; cameraPosition.Y = MathHelper.Clamp(cameraPosition.Y + CameraMovement.Y, 0.0f, maxCameraPosition.Y); }

    Read the article

  • snapping an angle to the closest cardinal direction

    - by Josh E
    I'm developing a 2D sprite-based game, and I'm finding that I'm having trouble with making the sprites rotate correctly. In a nutshell, I've got spritesheets for each of 5 directions (the other 3 come from just flipping the sprite horizontally), and I need to clamp the velocity/rotation of the sprite to one of those directions. My sprite class has a pre-computed list of radians corresponding to the cardinal directions like this: protected readonly List<float> CardinalDirections = new List<float> { MathHelper.PiOver4, MathHelper.PiOver2, MathHelper.PiOver2 + MathHelper.PiOver4, MathHelper.Pi, -MathHelper.PiOver4, -MathHelper.PiOver2, -MathHelper.PiOver2 + -MathHelper.PiOver4, -MathHelper.Pi, }; Here's the positional update code: if (velocity == Vector2.Zero) return; var rot = ((float)Math.Atan2(velocity.Y, velocity.X)); TurretRotation = SnapPositionToGrid(rot); var snappedX = (float)Math.Cos(TurretRotation); var snappedY = (float)Math.Sin(TurretRotation); var rotVector = new Vector2(snappedX, snappedY); velocity *= rotVector; //...snip private float SnapPositionToGrid(float rotationToSnap) { if (rotationToSnap == 0) return 0.0f; var targetRotation = CardinalDirections.First(x => (x - rotationToSnap >= -0.01 && x - rotationToSnap <= 0.01)); return (float)Math.Round(targetRotation, 3); } What am I doing wrong here? I know that the SnapPositionToGrid method is far from what it needs to be - the .First(..) call is on purpose so that it throws on no match, but I have no idea how I would go about accomplishing this, and unfortunately, Google hasn't helped too much either. Am I thinking about this the wrong way, or is the answer staring at me in the face?

    Read the article

  • Customize SharePoint list using InfoPath2010 form Part4

    - by ybbest
    Customize SharePoint list using InfoPath2010 form Part1 Customize SharePoint list using InfoPath2010 form Part2 Customize SharePoint list using InfoPath2010 form Part3 In this post, I’d like to show you how to create print functionality in InfoPath for SharePoint list. The print functionality is provided out of box in InfoPath form library; however it is not available in SharePoint list. Here are the steps to create the print functionality.You can download the new form here. 1. Create print page in the list by first copy and paste the displayifs.aspx and rename the file to Printifs.aspx. 2. Open the page in the SharePoint designer and copy the following javascript to the PlaceHolderTitleAreaClass ContentPlaceHolder. <script type="text/javascript"> $(document).ready(function(){ $("[id^='Ribbon']").hide(); $(".s4-title").hide(); $("[id='s4-leftpanel']").hide(); $("[id='s4-ribbonrow']").hide(); $("[id='s4-titlerow']").hide(); $("[id='s4-titlerow']").css("height", "0px"); $("body").css("background-color", "white"); $("body").css("zoom", "135%"); $("[id='MSO_ContentTable']").css("margin-left", "0px"); $("[id='MT-BodyContent']").css("width", "900px"); $(".MT-BodyArea").css("width", "900px"); $("[id='MT-Layout']").css("width", "900px"); $(".ms-bodyareacell").css("width", "900px"); $(".s4-wpTopTable").css("border", "none"); $("[id$='XmlFormView']").css("margin-left", "-80px"); $("body").css("margin-top", "-30px"); $(":contains('CAPEX')").css("border", "5px solid #FFCC00"); window.print(); }); </script> 3. Open InfoPath form for the list and create a field called PrintLink 4. Set the default value of printLink that points to the print page I just created before with the query string id.You can download the formula for the default value here. 5. Add a new image that looks like Print button on the display view, then I can set the url to the Print link Field. (The reason I did not use button is that you cannot set the navigate url for the button). 6.Set the url of the image to the PrintLInk field. 7.Next , create the print view. 8. Copy the contents from the display view to print view 9. Finally, go to the printifs.aspx and edit the InfoPath web part to set the view to PrintView. 9. Republish you form you will see the form as shown below 10. If you click the Print button, you will see the print page and print dialog,you can also add the company logo in the print page using css as well. 11.To deploy the customization,you can use the backup and restore content database approach , you can get more details from my previous blog post here.

    Read the article

  • centering ul so that columns will be centered too

    - by user1815176
    In my page I want it so that when you resize the page past the point of the pictures, that the pictures will go into another row, all the way so each picture has it's own row. And then potentially I won't need any media queries. But unfortunaltely I can't find a way to center. I have tried everything I can think of, aside of making hundreds of media queries with different positioning. I can't make it a block because then it won't go into rows, I have tried margin: 0 auto;. I have tried changing the padding, I have even tried using the html align="center". Nothing is working. Here is the website http://spencedesign.netau.net/singaporehome.html Also I have a minor issue, sorry to croud this with two questions. But when it is in it's mobile state, there is no 10px padding at the bottom, and the singapore title is on the left side rather than floating. Here is my code <html> <head> <title> Singapore - Home </title> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> <meta name="viewport" content="width=device-width, initial scale=1.0"> <style> * { margin: 0; padding: 0; } body { background: url('woodbackground.jpg'); background-size: cover; min-height: 100%; min-width: 100%; position: relative; top: 0; bottom: 0; left: 0; right: 0; } #container { width: 90%; margin: 0 auto; } h1 { font: bold 65px Helvetica, Arial, Sans-serif; text-align: center; color: #eee; position: relative; top: 60px; } h3 { font: 25px Helvetica, Arial, Sans-serif; text-align: center; color: #eee; position: relative; top: 80px; } ul#gallery { list-style: none; display: inline; margin: 0 auto; position: relative; top: 175px; width: 1300px; } ul#gallery li a { float: left; padding: 10px 10px 25px 10px; background-color: #eee; border: 1px solid #fff; -moz-box-shadow: 0px 2px 15px #333; position: relative; margin: 10px; text-decoration: none; } ul#gallery li a:hover { position: relative; top: -15px; } ul#gallery li a img { height: 150px; width: 250px; max-width: 100%; } ul#gallery li a p { margin-top: 25px; text-align: center; color: #000; font: Helvetica, Arial, Sans-serif; text-decoration: none; font-size: 20px; } @media screen and (max-width: 640px)    { ul#gallery {   left: 2.2%;   width: 600px; }   ul#gallery li a:hover {   top: 0px; } } </style> <body> <div id="container"> <h1> Singapore </h1> <h3><i> Singapore is the worlds first machine that works </i>- Lee Kuan Yew </h3> <ul id="gallery"> <li><a href="#"> <img src="gallery.jpg" alt="gallery" /> <p> Gallery </p> </a></li> <li><a href="#"> <img src="facts.jpg" alt="facts" /> <p> Facts </p></a></li> <li><a href="#"> <img src="tour.jpg" alt="tour" /> <p> Tour </p></a></li> <li><a href="#"> <img src="author.jpg" alt="author" /> <p> Author </p> </a></li> </ul> <br/> </div><!-- Container --> </body> <html> Thanks!

    Read the article

  • z index background issue in IE

    - by Michael
    I have a jQuery tools scroller set up with controls managing two separate divs of info - one images, the other related text that needs to sit over the top of the images with a transparent bg image. I am using z-indexing to achieve this and am aware of IE's issues with this but am unable to sort it (tested in IE6-8). Image of the issue below: http://test.shakingpaper.com.au/not_working.png It seems that the overlayed div is taking on the containers white. Try as I might, I can't resolve this. HTML/CSS code below: <div id="content"> <div id="nav"></div> <div class="s4 slideshow"> <div> <img src="<?php bloginfo('stylesheet_directory'); ?>/images/hero_1_white.jpg" width="770" height="367" /> </div> <div> <img src="<?php bloginfo('stylesheet_directory'); ?>/images/hero_1_white.jpg" width="770" height="367" /> </div> <div> <img src="<?php bloginfo('stylesheet_directory'); ?>/images/hero_1_white.jpg" width="770" height="367" /> </div> </div> <div id="overlay_bg"></div> <div class="s4 information"> <div> <h1>Support</h1> <p>Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae.</p> <p><a href="#">Support Us</a></p> </div> <div> <h1>Events</h1> <p>Quisque lacegestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae.</p> <p><a href="#">Read More</a></p> </div> <div> <h1>Regional</h1> <p>Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae.</p> <p><a href="#">Support Us</a></p> </div> </div> </div> <!-- end of content --> #content { height: auto; min-height: 300px !important; overflow: hidden; position:relative; margin-left: 27px; width: 770px; padding-bottom: 43px; } #nav { width: 60px; z-index: 10000; position: absolute; top:340px; left: 28px; } .s4 { width: 770px; height: 370px; overflow: hidden; } #nav a { background-color: transparent; background-image: url(images/transition.png); background-position: 0 0; text-indent: -1000em; width: 10px; height: 10px; display: block; float: left; margin-right: 5px; } #nav a.activeSlide { background-position: 0 -10px; } #overlay_bg { background: url(images/soild_block.png) no-repeat; width: 318px; height: 339px; z-index: 5000; position: absolute; top: 28px; } .information { position: absolute; top: 60px; left: 28px; z-index: 16000; width: 290px; height: 260px; color: #FFF; } .information h1 { font-size: 50px; font-style: italic; text-transform: uppercase; } .information p { font-size: 17px; line-height: 27px; margin-top: 37px; } .information a { font-size: 13px; padding-bottom: 2px; border-bottom: 1px solid; color: #FFF; text-transform: uppercase; font-style: italic; } .information a:hover { color: #000; } Any help would be greatly appreciated.

    Read the article

  • To divide the big text into columns.

    - by kalininew
    Problem: There is a big piece of the text: <div class="cont"> <p> Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, </p> <p> consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur? At vero eos et </p> <p> accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, </p> <p> facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p> <p> Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, </p> <p> consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur? At vero eos et </p> <p> accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, </p> <p> facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p> </div> It is necessary: To divide it on two columns. On page it should be divided on two about identical (on height) columns. If it is possible: at change of the sizes of the container of the text, a column should remain identical height. Whether probably to set number "n" - on how many columns to divide the big piece of the text. That is to divide the text into any number of columns. Is available: php, xslt, css, pure javascript (without jQuey). What tool is better for using? As it to make, that the decision was ?ross browser compatible.

    Read the article

  • TableView Cells Use Whole Screen Height

    - by Kyle
    I read through this tutorial Appcelerator: Using JSON to Build a Twitter Client and attempted to create my own simple application to interact with a Jetty server I setup running some Spring code. I basically call a get http request that gives me a bunch of contacts in JSON format. I then populate several rows with my JSON data and try to build a TableView. All of that works, however, my tableView rows take up the whole screen. Each row is one screen. I can scroll up and down and see all my data, but I'm trying to figure out what's wrong in my styling that's making the cells use the whole screen. My CSS is not great, so any help is appreciated. Thanks! Here's my js file that's loading the tableView: // create variable "win" to refer to current window var win = Titanium.UI.currentWindow; // Function loadContacts() function loadContacts() { // empty array "rowData" for table view cells var rowData = []; // create http client var loader = Titanium.Network.createHTTPClient(); // set http request method and url loader.setRequestHeader("Accept", "application/json"); loader.open("GET", "http://localhost:8080/contactsample/contacts"); // run the function when the data is ready for us to process loader.onload = function(){ Ti.API.debug("JSON Data: " + this.responseText); // evaluate json var contacts = JSON.parse(this.responseText); for(var i=0; i < contacts.length; i++) { var id = contacts[i].id; Ti.API.info("JSON Data, Row[" + i + "], ID: " + contacts[i].id); var name = contacts[i].name; Ti.API.info("JSON Data, Row[" + i + "], Name: " + contacts[i].name); var phone = contacts[i].phone; Ti.API.info("JSON Data, Row[" + i + "], Phone: " + contacts[i].phone); var address = contacts[i].address; Ti.API.info("JSON Data, Row[" + i + "], Address: " + contacts[i].address); // create row var row = Titanium.UI.createTableViewRow({ height:'auto' }); // create row's view var contactView = Titanium.UI.createView({ height:'auto', layout:'vertical', top:5, right:5, bottom:5, left:5 }); var nameLbl = Titanium.UI.createLabel({ text:name, left:5, height:24, width:236, textAlign:'left', color:'#444444', font:{ fontFamily:'Trebuchet MS', fontSize:16, fontWeight:'bold' } }); var phoneLbl = Titanium.UI.createLabel({ text: phone, top:0, bottom:2, height:'auto', width:236, textAlign:'right', font:{ fontSize:14} }); var addressLbl = Titanium.UI.createLabel({ text: address, top:0, bottom:2, height:'auto', width:236, textAlign:'right', font:{ fontSize:14} }); contactView.add(nameLbl); contactView.add(phoneLbl); contactView.add(addressLbl); row.add(contactView); row.className = "item" + i; rowData.push(row); } Ti.API.info("RowData: " + rowData); // create table view var tableView = Titanium.UI.createTableView( { data: rowData }); win.add(tableView); }; // send request loader.send(); } // get contacts loadContacts(); And here are some screens showing my problem. I tried playing with the top, bottom, right, left pixels a bit and didn't seem to be getting anywhere. All help is greatly appreciated. Thanks!

    Read the article

  • Why are these divs not aligned and space between?

    - by acidzombie24
    Why isnt everything aligned? No yellow should be visible and no orange should be visible except for the right side and bottom left where theres space for another image. Basically my images are pretty much aligned to the center (i have other pics not in this example which is easier to see). However in this case when i have 150px height image the 150 width seems start lower. Also why are there spaces in between <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>ldfk;sd</title> <style type="text/css"> div.ImgGallery { max-width: 630px; background: orange; } .ImgGallery div { display: inline; } /* http://www.brunildo.org/test/img_center.html */ .ImgGallery div div { display: table-cell; text-align: center; background: gray; width: 150px; height: 150px; } .ImgGallery div{ background: yellow; vertical-align: middle; } //.ImgGallery div div :nth-child(2n+1) { background: red; } .ImgGallery * { vertical-align: middle; } .ImgGallery a { display: block; } .ImgGallery a * { border-style: none; } </style> </head> <div class="smallGallery"> <div class="ImgGallery"> <div><div><a href="http://google.com"><img src="a.jpg" alt="a.jpg"></a></div></div> <div><div><a href="http://google.com"><img src="a.jpg" alt="a.jpg"></a></div></div> <div><div><a href="http://google.com"><img src="a.jpg" alt="a.jpg"></a></div></div> <div><div><a href="http://google.com"><img src="a.jpg" alt="a.jpg"></a></div></div> <div><div><a href="http://google.com"><img src="a.jpg" alt="a.jpg"></a></div></div> <div><div><a href="http://google.com"><img src="b.jpg" alt="a.jpg"></a></div></div> <div><div><a href="http://google.com"><img src="a.jpg" alt="a.jpg"></a></div></div> <div><div><a href="http://google.com"><img src="a.jpg" alt="a.jpg"></a></div></div> <div><div><a href="http://google.com"><img src="b.jpg" alt="a.jpg"></a></div></div> <div><div><a href="http://google.com"><img src="a.jpg" alt="a.jpg"></a></div></div> <div><div><a href="http://google.com"><img src="a.jpg" alt="a.jpg"></a></div></div> </div></div> </body></html>

    Read the article

  • Which part of this simple script is breaking internet explorer?

    - by user961627
    I'm writing a simple virtual keyboard for Arabic (indic) digits. Just links that, when clicked, produce the corresponding Unicode Indic character. The following is my HTML, in the body tag: <a href="#" id='start'>Start</a> <div id='vkb' style='padding:20px;font-size:16pt; border:2px solid #eee; width:250px' dir='ltr'> <a class='key' href='#' id='0'>&#1632;</a> <a class='key' href='#' id='1'>&#1633;</a> <a class='key' href='#' id='2'>&#1634;</a> <a class='key' href='#' id='3'>&#1635;</a> <a class='key' href='#' id='4'>&#1636;</a><br /> <a class='key' href='#' id='5'>&#1637;</a> <a class='key' href='#' id='6'>&#1638;</a> <a class='key' href='#' id='7'>&#1639;</a> <a class='key' href='#' id='8'>&#1640;</a> <a class='key' href='#' id='9'>&#1641;</a> <br /> <a href="#" id='stop'>Stop</a> </div> <div id='output' /></div> This is my CSS: a { text-decoration:none; } .key { padding:7px; background-color:#fff; margin:5px; border:2px solid #eee; display:inline-block; } .key:hover { background-color:#eee; } And this is my javascript: <script type="text/javascript" src="js/jquery.js"></script> <script> $(document).ready(function(){ var toprint = ""; $('#vkb').hide(); $('#start').click(function(e){ toprint = ""; $('#vkb').show(); }); $('#stop').click(function(e){ $('#vkb').hide(); ret = ar2ind(toprint); $('#output').text(ret); toprint = ""; }); $('#vkb').click(function(e){ var $key = $(e.target).closest('.key'); var pressed = $key.attr('id'); if(pressed === undefined){ pressed = ""; } toprint = toprint + pressed; }); }); function ar2ind(str) { str = str.replace(/0/g, "?"); str = str.replace(/1/g, "?"); str = str.replace(/2/g, "?"); str = str.replace(/3/g, "?"); str = str.replace(/4/g, "?"); str = str.replace(/5/g, "?"); str = str.replace(/6/g, "?"); str = str.replace(/7/g, "?"); str = str.replace(/8/g, "?"); str = str.replace(/9/g, "?"); return str; } </script> It seems simple enough but it's crashing in IE9. (Might be crashing in earlier versions too but haven't been able to check.)

    Read the article

  • Cordova - Scrolling with a fixed header and footer (ios)

    - by Samu Singh
    Using Cordova (phonegap) & bootstrap to make a mobile application, testing on IOS for now. Getting an issue with a header and footer bar that are fixed with scrollable content in the middle. When tapping to scroll, the header/footer bar moves down or up with the content but then snaps back to place as soon as the scrolling completes. If I use -webkit-overflow-scrolling: touch; it works as expected, but it makes it really awkward to scroll through the content, and if you scroll passed the end, it only scrolls the header or footer (with elastic overflow) until you stop for a second. here's my html for the header/footer bars: <div id="headerBar"> <div class="container-fluid" style="background-color: #1569C7"> <div class="row"> <div class="col-xs-3 text-left"> <button id="logoutButton" type="button" class="btn btn-default"> Log Out </button> <button type="button" class="btn btn-default" id="restoreQuestionFeedButton"> <span class="glyphicon glyphicon-chevron-left"></span> </button> </div> <div class="col-xs-6 text-center" style="height: 55px"> <strong id="usernameText"></strong> </div> <div class="col-xs-3 text-right"> <button id="oldCreatQuestionButton" type="button" class="btn btn-default"> <span class="glyphicon glyphicon-plus"></span> </button> </div> </div> </div> </div> <div id="footerBar"> <div class="container-fluid" style="padding: 0"> <div class="row text-center"> <button id="createQuestionButton" type="button" class="btn btn-default footerButton"> <span class="glyphicon glyphicon-plus"></span> <strong>Ask a new free question!</strong> </button> </div> </div> </div> And here is the related CSS: #headerBar { position: fixed; z-index: 100; top: 0; left: 0; width: 100%; background-color: #1569C7; } #footerBar { position: fixed; z-index: 100; bottom: 0; left: 0; width: 100%; background-color: #1569C7 !important; }

    Read the article

< Previous Page | 194 195 196 197 198 199 200 201 202 203 204 205  | Next Page >