Search Results

Search found 10207 results on 409 pages for 'backbone js collections'.

Page 385/409 | < Previous Page | 381 382 383 384 385 386 387 388 389 390 391 392  | Next Page >

  • How to preserve sibling element position when one sibling is absolutely positioned?

    - by Casey
    In the snippet below, the child div is normally positioned until it is :hovered , when it becomes absolutely positioned. The reasoning behind this markup is to simulate a popup style in a limited environment where I can't use a <select> (among other limitations). When child is hovered, the sibling elements jump around, which is expected, as the contents of the block have changed. But how can I preserve their positioning? That is, what CSS can I add to prevent the siblings from jumping around when child is hovered. Javascript is also not allowed, so please no answers using JS. HTML: <div class="container"> <div class="child"> <span class="d4"></span> <label><input type="radio" name="radio" value="1"/>One</label> <label><input type="radio" name="radio" value="2"/>Two</label> </div> <input type="text" name="sibling"/> <button name="sibling2">Button</button> </div> CSS: .container, .child, button { display:inline-block; } .child { vertical-align: middle; width: 35px; height: 35px; } .child:hover { background: gray; position:absolute; width: 100px; height: auto; } .child:hover > .d4 { display: none; } .child label { display:none; } .child:hover label { display: inline-block; } .d4 { background-position: -411px -1px; width: 35px; height: 35px; background-image: url("https://i.imgur.com/zkgyBOi.png"); background-repeat: no-repeat; color: transparent; display: inline-block; } Here's a fiddle: http://jsfiddle.net/cpctZ/1/

    Read the article

  • Javascript - dynamically add input fields

    - by Neeraj
    Hi Guys, I have a code to add input fields dynamically in js. But the problem is if i add 3 fields or more and then browse a file(if the input field is file), the value of the field selected disappears. Can any one help Heres my code Thanks in advance. :) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <script type="text/javascript"> <!-- Begin /* This script and many more are available free online at The JavaScript Source!! http://javascript.internet.com Created by: Husay :: http://www.communitxt.net */ var arrInput = new Array(0); var arrInputValue = new Array(0); fields = 1; maxInput = 4; function addInput() { //arrInput.push(createInput(arrInput.length)); if(fields <= maxInput){ fields +=1; arrInput.push(arrInput.length); //arrInputValue.push(arrInputValue.length); arrInputValue.push(""); display(); } } function display() { document.getElementById('parah').innerHTML=""; for (intI=0;intI<arrInput.length;intI++) { document.getElementById('parah').innerHTML+=createInput(arrInput[intI], arrInputValue[intI]); } } function saveValue(intId,strValue) { arrInputValue[intId]=strValue; } function createInput(id,value) { return "<input type='file' id='test "+ id +"' onChange='javascript:saveValue("+ id +",this.value)' value='"+ value +"'><br>"; } function deleteInput() { if (arrInput.length > 0) { fields -=1; arrInput.pop(); arrInputValue.pop(); } display(); } // End --> </script> </head> <body> <a href="javascript:addInput()">Add more input field(s)</a><br> <a href="javascript:deleteInput()">Remove field(s)</a><br> <input type="file" /><br> <input type="file" /><br> <input type="file" /><br> <p id="parah"></p> </body> </html>

    Read the article

  • jQuery ajax multiline "script" response

    - by Rendrik
    I'm designing a template creation tool, which uses a jQuery Ajax request that posts parameters to a PHP file. The PHP does the actual generation of the template's HTML. // Send for processing. Expect JS back to execute. function generate() { $.ajax({ type: "POST", url: "generate.php", data: $('#genform :input').serialize(), dataType: "script", beforeSend: function() { $("#loading").html("<img src='images/loadbar.gif' />"); $("#loading") .dialog({ height: 80, width: 256, autoOpen: true, modal: true }); }, success: function(data) { $("#loading").dialog('close'); } }); } My trouble is that I have the ajax dataType: set to "script". Using this, the PHP file generates some jQuery dialogs for any errors which works nicely. However, after I generate the HTML, i'm having trouble passing it back. So I have probably 100 lines of generated HTML and javascript which i'd like to work with. In the PHP file, i've tried: echo('$("#result").html("'.$html.'");'); This does actually work if there are NO line breaks in $html. As soon as there are any line breaks, the Chrome debugger reports "gen.html:1 Uncaught SyntaxError: Unexpected token ILLEGAL". It's obvious that it's trying to eval the returned response headers, but is stopping at any line break. So, to be clear, when I pass $html back, if the contents are this: $html = "<div>hi there</div>"; It works fine (all of my error message dialogs are one line). But if it's: $html = "<div> hi there </div>"; It blows up. I'm really not sure how to get around this, or if there's a better way to go about it. It's important to me to keep the formatting so people can copy the HTML template. I may just break down and display the template file on the PHP page if I can't solve this, but I was really hoping to keep everything within the confines of the HTML page.

    Read the article

  • Why is .NET faster than C++ in this case?

    - by acidzombie24
    -edit- I LOVE SLaks comment. "The amount of misinformation in these answers is staggering." :D Calm down guys. Pretty much all of you were wrong. I DID make optimizations. It turns out whatever optimizations I made wasn't good enough. I ran the code in GCC using gettimeofday (I'll paste code below) and used g++ -O2 file.cpp and got slightly faster results then C#. Maybe MS didn't create the optimizations needed in this specific case but after downloading and installing mingw I was tested and found the speed to be near identical. Justicle Seems to be right. I could have sworn I use clock on my PC and used that to count and found it was slower but problem solved. C++ speed isn't almost twice as slower in the MS compiler. When my friend informed me of this I couldn't believe it. So I took his code and put some timers onto it. Instead of Boo I used C#. I constantly got faster results in C#. Why? The .NET version was nearly half the time no matter what number I used. C++ version: #include <iostream> #include <stdio.h> #include <intrin.h> #include <windows.h> using namespace std; int fib(int n) { if (n < 2) return n; return fib(n - 1) + fib(n - 2); } int main() { __int64 time = 0xFFFFFFFF; while (1) { int n; //cin >> n; n = 41; if (n < 0) break; __int64 start = __rdtsc(); int res = fib(n); __int64 end = __rdtsc(); cout << res << endl; cout << (float)(end-start)/1000000<<endl; break; } return 0; } C# version: using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Runtime.InteropServices; using System.ComponentModel; using System.Threading; using System.IO; using System.Diagnostics; namespace fibCSTest { class Program { static int fib(int n) { if (n < 2)return n; return fib(n - 1) + fib(n - 2); } static void Main(string[] args) { //var sw = new Stopwatch(); //var timer = new PAB.HiPerfTimer(); var timer = new Stopwatch(); while (true) { int n; //cin >> n; n = 41; if (n < 0) break; timer.Start(); int res = fib(n); timer.Stop(); Console.WriteLine(res); Console.WriteLine(timer.ElapsedMilliseconds); break; } } } } GCC version: #include <iostream> #include <stdio.h> #include <sys/time.h> using namespace std; int fib(int n) { if (n < 2) return n; return fib(n - 1) + fib(n - 2); } int main() { timeval start, end; while (1) { int n; //cin >> n; n = 41; if (n < 0) break; gettimeofday(&start, 0); int res = fib(n); gettimeofday(&end, 0); int sec = end.tv_sec - start.tv_sec; int usec = end.tv_usec - start.tv_usec; cout << res << endl; cout << sec << " " << usec <<endl; break; } return 0; }

    Read the article

  • Dojo and Ajax - rendering widgets

    - by Michael Merchant
    I'm trying to load content into a Dojo content pane in a specific html tag and not replace the entire content pane. The html I'm loading includes a markup defined widget that I'd like to have rendered when the new row is loaded. So, I have a table that is being dynamically filled via ajax,ie: <body> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js" djConfig="parseOnLoad: true, isDebug:true"></script> <div id="table-pane" dojoType="dijit.layout.ContentPane"> <table class="test"> <tbody> <tr><td>Name</td><td>Year</td><td>Age</td></tr> <tr> <td><span dojoType="dijit.InlineEditBox" editor="dijit.form.Textarea">Mike</span> </td> <td>2010</td> <td>12</td> </tr> </tbody> </table> </div> </body> <script> var html ='<tr><td><span dojoType="dijit.InlineEditBox" editor="dijit.form.Textarea">John</span></td><td>2011</td><td>22</td></tr>'; dojo.require("dijit.layout.ContentPane"); dojo.require("dijit.InlineEditBox"); dojo.require("dijit.form.Textarea"); dojo.addOnLoad(function(){ pane = dijit.byId("table-pane"); add_elem(); }); function add_elem(){ var node = $(".test tr:last"); node.after(html); dojo.addOnLoad(function(){ //Here I want to initiate any widgets that haven't been initiated pane.buildRendering(); }); }</script> How do I render the Dojo widget in the new table row?

    Read the article

  • show-hide image onmouseover

    - by butters
    I have 3 images on top of each other. The first one is a normal .jpg image, the second a greyscale version and the 3rd is some kind of effect i add with a transparent .png Now what i want is that, if i move the mouse over those images, the greyscale image is hidden or replaced by another image and afterwards visible again. The problem here is that i am a js noob, so it's kind of hard for me to find a solution ^^ my code looks something like this: <html> <head> <style type="text/css"> <!-- ul li{ display: inline-table; } .frame{ position: relative; height: 110px; width: 110px; } .frame div{ position: absolute; top:0px; left:0px; } .effect{ background:url(images/effect.png) no-repeat; height:110px; width: 110px; } .image{ height:100px; width:100px; border: 1px solid red; margin:4px; } .greyscale{ height:100px; width:100px; border: 1px solid red; margin:4px; } --> </style> </head> <body> <ul> <li> <div class="frame"> <div class="image"><img src="images/pic1.jpg" height="100" width="100"></div> <div class="greyscale"><img src="images/grey1.jpg" height="100" width="100"></div> <div class="effect">qwert</div> </div> </li> <li> <div class="frame"> <div class="image"><img src="images/pic2.jpg" height="100" width="100"></div> <div class="greyscale"><img src="images/grey2.jpg" height="100" width="100"></div> <div class="effect">qewrt</div> </div> </li> </ul> </body> </html> </code></pre> would be super-awesome if someone can help me out :)

    Read the article

  • Radio button inside anchor element is reset after jQuery click handler

    - by GrievousAngel
    I have a situation where an element, of type radio, is contained in an element. The anchor element has a href but I want to override that behaviour by adding a jQuery 'click' handler to the element. The click handler makes the radio button inside it the selected one within the group. This all works when the anchor is clicked, however, when the radio button is clicked it appears that jQuery resets the selected radio to the previously selected one! Here is a the simplified page that duplicates the issue: <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#a1").click(function(event) { anchorClicked("a1"); return false; }); $("#a2").click(function(event) { anchorClicked("a2"); return false; }); }); function anchorClicked(anchorId) { $('#' + anchorId + ' input:radio').attr("checked", true); alert("Look at what is selected and what happens after the event when this dialog is closed!"); } </script> </head> <body> <form> <ul> <li id="li1"> <a id="a1" href="javascript:alert('default functionality')"> <input value="1" name="rb" type="radio" id="rb1"> <span>Details 1</span> </a> </li> <li id="li2"> <a id="a2" href="javascript:alert('default functionality')"> <input value="2" name="rb" type="radio" id="rb2"> <span>Details 2</span> </a> </li> </ul> </form> </body> Does anyone have any idea how I can prevent jQuery for resetting the radio button?

    Read the article

  • javascript works with mozilla but not with webkit based browsers

    - by GlassGhost
    Im having problems with a css text variable in this javascript with webkit based browsers(Chrome & Safari) but it works in firefox 3.6 importScript('User:Gerbrant/hidePane.js');//Special thanks to Gerbrant for this wonderful script function addGlobalStyle(css) { var head = document.getElementsByTagName('head')[0]; if (!head) { return; } var style = document.createElement('style'); style.type = 'text/css'; style.rel = 'stylesheet'; style.media = 'screen'; style.href = 'FireFox.css'; style.innerHTML = css; head.appendChild(style); } //The page styling var NewSyleText = "h1, h2, h3, h4, h5 {font-family: 'Verdana','Helvetica',sans-serif; font-style: normal; font-weight:normal;}" + "body, b {background: #fbfbfb; font-style: normal; font-family: 'Cochin','GaramondNo8','Garamond','Big Caslon','Georgia','Times',serif;font-size: 11pt;}" + "p { margin: 0pt; text-indent:1.25em; margin-top: 0.3em; }" + "a { text-decoration: none; color: Navy; background: none;}" + "a:visited { color: #500050;}" + "a:active { color: #faa700;}" + "a:hover { text-decoration: underline;}" + "a.stub { color: #772233;}" + "a.new, #p-personal a.new { color: #ba0000;}" + "a.new:visited, #p-personal a.new:visited { color: #a55858;}" + "a.new, #quickbar a.new { color: #CC2200; }" + /* removes "From Wikipedia, the free encyclopedia" for those of you who actually know what site you are on */ "#siteSub { display: none; }" + /* hides the speaker icon in some articles */ "#spoken-icon .image { display:none;}" + /* KHTMLFix.css */ "#column-content { margin-left: 0; }" + /* Remove contents of the footer, but not the footer itself */ "#f-poweredbyico, #f-copyrightico { display:none;}" + /* Needed to show the star icon in a featured article correctly */ "#featured-star div div { line-height: 10px;}" + /* And the content expands to top and left */ "#content {margin: 0; padding: 0; background:none;}" + "#content div.thumb {border-color:white;}" + /* Hiding the bar under the entry header */ "h1.firstHeading { border-bottom: none;}" + /* Used for US city entries */ "#coordinates { top:1.2em;}"; addGlobalStyle(NewSyleText);//inserts the page styling

    Read the article

  • ajaxSubmit options success & error functions aren't fired

    - by Thommy Tomka
    jQuery 1.7.2 jQuery Validate 1.1.0 jQuery Form 3.18 Wordpress 3.4.2 I am trying to code a contact/ mail form in above environment/ with above jQuery libs. Now I am having a problem with the jQuery Form JS: I have taken the original code from the developers page for ajaxSubmit and only altered the target option to an ID which exists in my HTML source and replaced $ with jQuery in function showRequest. The problem is, that the function namend after success: does not fire. I tried the same with error: and again nothing fired. Only complete: did and the function I placed there alerted the responseText from the receiving script. Does anyone has an idea whats going wrong? Thanks in advance! Thomas jQuery(document).ready(function() { var options = { target: '#mail-status', // target element(s) to be updated with server response beforeSubmit: showRequest, // pre-submit callback success: showResponse, // post-submit callback // other available options: //url: url // override for form's 'action' attribute //type: type // 'get' or 'post', override for form's 'method' attribute //dataType: null // 'xml', 'script', or 'json' (expected server response type) //clearForm: true // clear all form fields after successful submit //resetForm: true // reset the form after successful submit // $.ajax options can be used here too, for example: //timeout: 3000 }; jQuery("#mailform").validate( { submitHandler: function(form) { jQuery(form).ajaxSubmit(options); }, errorPlacement: function(error, element) { }, rules: { author: { minlength: 2, required: true }, email: { required: true, email: true }, comment: { minlength: 2, required: true } }, highlight: function(element) { jQuery(element).addClass("e"); jQuery(element.form).find("label[for=" + element.id + "]").addClass("e"); }, unhighlight: function(element) { jQuery(element).removeClass("e"); jQuery(element.form).find("label[for=" + element.id + "]").removeClass("e"); } }); }); // pre-submit callback function showRequest(formData, jqForm, options) { // formData is an array; here we use $.param to convert it to a string to display it // but the form plugin does this for you automatically when it submits the data var queryString = jQuery.param(formData); // jqForm is a jQuery object encapsulating the form element. To access the // DOM element for the form do this: // var formElement = jqForm[0]; alert('About to submit: \n\n' + queryString); // here we could return false to prevent the form from being submitted; // returning anything other than false will allow the form submit to continue return true; } // post-submit callback function showResponse(responseText, statusText, xhr, $form) { // for normal html responses, the first argument to the success callback // is the XMLHttpRequest object's responseText property // if the ajaxSubmit method was passed an Options Object with the dataType // property set to 'xml' then the first argument to the success callback // is the XMLHttpRequest object's responseXML property // if the ajaxSubmit method was passed an Options Object with the dataType // property set to 'json' then the first argument to the success callback // is the json data object returned by the server alert('status: ' + statusText + '\n\nresponseText: \n' + responseText + '\n\nThe output div should have already been updated with the responseText.'); }

    Read the article

  • Simple XNA 2D demo: why is my F# version slower than C# version?

    - by Den
    When running this XNA application it should display a rotated rectangle that moves from top-left corner to bottom-right corner. It looks like my F# version is noticeably much slower. It seems that the Draw method skips a lot of frames. I am using VS 2012 RC, XNA 4.0, .NET 4.5, F# 3.0. I am trying to make it as functional as possible. What could be the reason for poor performance? C#: class Program { static void Main(string[] args) { using (var game = new FlockGame()) { game.Run(); } } } public class FlockGame : Game { private GraphicsDeviceManager graphics; private DrawingManager drawingManager; private Vector2 position = Vector2.Zero; public FlockGame() { graphics = new GraphicsDeviceManager(this); } protected override void Initialize() { drawingManager = new DrawingManager(graphics.GraphicsDevice); this.IsFixedTimeStep = false; } protected override void Update(GameTime gameTime) { position = new Vector2(position.X + 50.1f * (float)gameTime.ElapsedGameTime.TotalSeconds, position.Y + 50.1f * (float)gameTime.ElapsedGameTime.TotalSeconds); base.Update(gameTime); } protected override void Draw(GameTime gameTime) { //this.GraphicsDevice.Clear(Color.Lavender) drawingManager.DrawRectangle(position, new Vector2(100.0f, 100.0f), 0.7845f, Color.Red); base.Draw(gameTime); } } public class DrawingManager { private GraphicsDevice GraphicsDevice; private Effect Effect; public DrawingManager(GraphicsDevice graphicsDevice) { GraphicsDevice = graphicsDevice; this.Effect = new BasicEffect(this.GraphicsDevice) { VertexColorEnabled = true, Projection = Matrix.CreateOrthographicOffCenter(0.0f, this.GraphicsDevice.Viewport.Width, this.GraphicsDevice.Viewport.Height, 0.0f, 0.0f, 1.0f) }; } private VertexPositionColor[] GetRectangleVertices (Vector2 center, Vector2 size, float radians, Color color) { var halfSize = size/2.0f; var topLeft = -halfSize; var bottomRight = halfSize; var topRight = new Vector2(bottomRight.X, topLeft.Y); var bottomLeft = new Vector2(topLeft.X, bottomRight.Y); topLeft = Vector2.Transform(topLeft, Matrix.CreateRotationZ(radians)) + center; topRight = Vector2.Transform(topRight, Matrix.CreateRotationZ(radians)) + center; bottomRight = Vector2.Transform(bottomRight, Matrix.CreateRotationZ(radians)) + center; bottomLeft = Vector2.Transform(bottomLeft, Matrix.CreateRotationZ(radians)) + center; return new VertexPositionColor[] { new VertexPositionColor(new Vector3(topLeft, 0.0f), color), new VertexPositionColor(new Vector3(topRight, 0.0f), color), new VertexPositionColor(new Vector3(topRight, 0.0f), color), new VertexPositionColor(new Vector3(bottomRight, 0.0f), color), new VertexPositionColor(new Vector3(bottomRight, 0.0f), color), new VertexPositionColor(new Vector3(bottomLeft, 0.0f), color), new VertexPositionColor(new Vector3(bottomLeft, 0.0f), color), new VertexPositionColor(new Vector3(topLeft, 0.0f), color) }; } public void DrawRectangle(Vector2 center, Vector2 size, float radians, Color color) { var vertices = GetRectangleVertices(center, size, radians, color); foreach (var pass in this.Effect.CurrentTechnique.Passes) { pass.Apply(); this.GraphicsDevice.DrawUserPrimitives(PrimitiveType.LineList, vertices, 0, vertices.Length/2); } } } F#: namespace Flocking module FlockingProgram = open System open Flocking [<STAThread>] [<EntryPoint>] let Main _ = use g = new FlockGame() g.Run() 0 //------------------------------------------------------------------------------ namespace Flocking open System open System.Diagnostics open Microsoft.Xna.Framework open Microsoft.Xna.Framework.Graphics open Microsoft.Xna.Framework.Input type public FlockGame() as this = inherit Game() let mutable graphics = new GraphicsDeviceManager(this) let mutable drawingManager = null let mutable position = Vector2.Zero override Game.LoadContent() = drawingManager <- new Rendering.DrawingManager(graphics.GraphicsDevice) this.IsFixedTimeStep <- false override Game.Update gameTime = position <- Vector2(position.X + 50.1f * float32 gameTime.ElapsedGameTime.TotalSeconds, position.Y + 50.1f * float32 gameTime.ElapsedGameTime.TotalSeconds) base.Update gameTime override Game.Draw gameTime = //this.GraphicsDevice.Clear(Color.Lavender) Rendering.DrawRectangle(drawingManager, position, Vector2(100.0f, 100.0f), 0.7845f, Color.Red) base.Draw gameTime //------------------------------------------------------------------------------ namespace Flocking open System open System.Collections.Generic open Microsoft.Xna.Framework open Microsoft.Xna.Framework.Graphics open Microsoft.Xna.Framework.Input module Rendering = [<AllowNullLiteral>] type DrawingManager (graphicsDevice : GraphicsDevice) = member this.GraphicsDevice = graphicsDevice member this.Effect = new BasicEffect(this.GraphicsDevice, VertexColorEnabled = true, Projection = Matrix.CreateOrthographicOffCenter(0.0f, float32 this.GraphicsDevice.Viewport.Width, float32 this.GraphicsDevice.Viewport.Height, 0.0f, 0.0f, 1.0f)) let private GetRectangleVertices (center:Vector2, size:Vector2, radians:float32, color:Color) = let halfSize = size / 2.0f let mutable topLeft = -halfSize let mutable bottomRight = halfSize let mutable topRight = new Vector2(bottomRight.X, topLeft.Y) let mutable bottomLeft = new Vector2(topLeft.X, bottomRight.Y) topLeft <- Vector2.Transform(topLeft, Matrix.CreateRotationZ(radians)) + center topRight <- Vector2.Transform(topRight, Matrix.CreateRotationZ(radians)) + center bottomRight <- Vector2.Transform(bottomRight, Matrix.CreateRotationZ(radians)) + center bottomLeft <- Vector2.Transform(bottomLeft, Matrix.CreateRotationZ(radians)) + center [| new VertexPositionColor(new Vector3(topLeft, 0.0f), color) new VertexPositionColor(new Vector3(topRight, 0.0f), color) new VertexPositionColor(new Vector3(topRight, 0.0f), color) new VertexPositionColor(new Vector3(bottomRight, 0.0f), color) new VertexPositionColor(new Vector3(bottomRight, 0.0f), color) new VertexPositionColor(new Vector3(bottomLeft, 0.0f), color) new VertexPositionColor(new Vector3(bottomLeft, 0.0f), color) new VertexPositionColor(new Vector3(topLeft, 0.0f), color) |] let DrawRectangle (drawingManager:DrawingManager, center:Vector2, size:Vector2, radians:float32, color:Color) = let vertices = GetRectangleVertices(center, size, radians, color) for pass in drawingManager.Effect.CurrentTechnique.Passes do pass.Apply() drawingManager.GraphicsDevice.DrawUserPrimitives(PrimitiveType.LineList, vertices, 0, vertices.Length/2)

    Read the article

  • Exception Error in c#

    - by Kumu
    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; using System.IO; using System.Runtime.Serialization.Formatters.Binary; namespace FoolballLeague { public partial class MainMenu : Form { FootballLeagueDatabase footballLeagueDatabase; Game game; Login login; public MainMenu() { InitializeComponent(); changePanel(1); } public MainMenu(FootballLeagueDatabase footballLeagueDatabaseIn) { InitializeComponent(); footballLeagueDatabase = footballLeagueDatabaseIn; } private void Form_Loaded(object sender, EventArgs e) { } private void gameButton_Click(object sender, EventArgs e) { int option = 0; changePanel(option); } private void scoreboardButton_Click(object sender, EventArgs e) { int option = 1; changePanel(option); } private void changePanel(int optionIn) { gamePanel.Hide(); scoreboardPanel.Hide(); string title = "Football League System"; switch (optionIn) { case 0: gamePanel.Show(); this.Text = title + " - Game Menu"; break; case 1: scoreboardPanel.Show(); this.Text = title + " - Display Menu"; break; } } private void logoutButton_Click(object sender, EventArgs e) { login = new Login(); login.Show(); this.Hide(); } private void addGameButton_Click(object sender, EventArgs e) { if ((homeTeamTxt.Text.Length) == 0) MessageBox.Show("You must enter a Home Team"); else if (homeScoreUpDown.Value > 9 || homeScoreUpDown.Minimum < 0) MessageBox.Show("You must enter one digit between 0 and 9"); else if ((awayTeamTxt.Text.Length) == 0) MessageBox.Show("You must enter a Away Team"); else if (homeScoreUpDown.Value > 9 || homeScoreUpDown.Value < 0) MessageBox.Show("You must enter one digit between 0 to 9"); else { //checkGameInputFields(); game = new Game(homeTeamTxt.Text, int.Parse(homeScoreUpDown.Value.ToString()), awayTeamTxt.Text, int.Parse(awayScoreUpDown.Value.ToString())); MessageBox.Show("Home Team -" + '\t' + homeTeamTxt.Text + '\t' + "and" + '\r' + "Away Team -" + '\t' + awayTeamTxt.Text + '\t' + "created"); footballLeagueDatabase.AddGame(game); //clearCreateStudentInputFields(); } } private void timer1_Tick(object sender, EventArgs e) { displayDateAndTime(); } private void displayDateAndTime() { dateLabel.Text = DateTime.Today.ToLongDateString(); timeLabel.Text = DateTime.Now.ToShortTimeString(); } private void displayResultsButton_Click(object sender, EventArgs e) { Game game = new Game(homeTeamTxt.Text, int.Parse(homeScoreUpDown.Value.ToString()), awayTeamTxt.Text, int.Parse(awayScoreUpDown.Value.ToString())); gameResultsListView.Items.Clear(); gameResultsListView.View = View.Details; ListViewItem row = new ListViewItem(); row.SubItems.Add(game.HomeTeam.ToString()); row.SubItems.Add(game.HomeScore.ToString()); row.SubItems.Add(game.AwayTeam.ToString()); row.SubItems.Add(game.AwayScore.ToString()); gameResultsListView.Items.Add(row); } private void displayGamesButton_Click(object sender, EventArgs e) { Game game = new Game("Home", 2, "Away", 4);//homeTeamTxt.Text, int.Parse(homeScoreUpDown.Value.ToString()), awayTeamTxt.Text, int.Parse(awayScoreUpDown.Value.ToString())); modifyGamesListView.Items.Clear(); modifyGamesListView.View = View.Details; ListViewItem row = new ListViewItem(); row.SubItems.Add(game.HomeTeam.ToString()); row.SubItems.Add(game.HomeScore.ToString()); row.SubItems.Add(game.AwayTeam.ToString()); row.SubItems.Add(game.AwayScore.ToString()); modifyGamesListView.Items.Add(row); } } } This is the whole code and I got same error like previous question. Unhandled Exception has occurred in you application.If you click...............click Quit.the application will close immediately. Object reference not set to an instance of an object. And the following details are in the error message. ***** Exception Text ******* System.NullReferenceException: Object reference not set to an instance of an object. at FoolballLeague.MainMenu.addGameButton_Click(Object sender, EventArgs e) in C:\Users\achini\Desktop\FootballLeague\FootballLeague\MainMenu.cs:line 91 at System.Windows.Forms.Control.OnClick(EventArgs e) at System.Windows.Forms.Button.OnMouseUp(MouseEventArgs mevent) at System.Windows.Forms.Control.WmMouseUp(Message& m, MouseButtons button, Int32 clicks) at System.Windows.Forms.Control.WndProc(Message& m) at System.Windows.Forms.ButtonBase.WndProc(Message& m) at System.Windows.Forms.Button.WndProc(Message& m) at System.Windows.Forms.Control.ControlNativeWindow.WndProc(Message& m) at System.Windows.Forms.NativeWindow.Callback(IntPtr hWnd, Int32 msg, IntPtr wparam, IntPtr lparam) I need to add the games to using the addGameButton and the save those added games and display them in the list view (gameResultsListView). Now I can add a game and display in the list view.But when I pressed the button addGameButton I got the above error message. If you can please give me a solution to this problem.

    Read the article

  • Best practices managing JavaScript on a single-page app

    - by seanmonstar
    With a single page app, where I change the hash and load and change only the content of the page, I'm trying to decide on how to manage the JavaScript that each "page" might need. I've already got a History module monitoring the location hash which could look like domain.com/#/company/about, and a Page class that will use XHR to get the content and insert it into the content area. function onHashChange(hash) { var skipCache = false; if(hash in noCacheList) { skipCache = true; } new Page(hash, skipCache).insert(); } // Page.js var _pageCache = {}; function Page(url, skipCache) { if(!skipCache && (url in _pageCache)) { return _pageCache[url]; } this.url = url; this.load(); } The cache should let pages that have already been loaded skip the XHR. I also am storing the content into a documentFragment, and then pulling the current content out of the document when I insert the new Page, so I the browser will only have to build the DOM for the fragment once. Skipping the cache could be desired if the page has time sensitive data. Here's what I need help deciding on: It's very likely that any of the pages that get loaded will have some of their own JavaScript to control the page. Like if the page will use Tabs, needs a slide show, has some sort of animation, has an ajax form, or what-have-you. What exactly is the best way to go around loading that JavaScript into the page? Include the script tags in the documentFragment I get back from the XHR? What if I need to skip the cache, and re-download the fragment. I feel the exact same JavaScript being called a second time might cause conflicts, like redeclaring the same variables. Would the better way be to attach the scripts to the head when grabbing the new Page? That would require the original page know all the assets that every other page might need. And besides knowing the best way to include everything, won't I need to worry about memory management, and possible leaks of loading so many different JavaScript bits into a single page instance?

    Read the article

  • MVC Bootstrap: Autocomplete doesn't show properly

    - by kicked11
    I have a MVC website and it had a searchbox with autocomplete, now I changed the layout using bootstrap. But now the autocomplete isn't been shown correctly anymore. See the picture the suggestions are not shown right. the autocomplete goes through the text. I was fine before I used bootstrap. I am using a SQL server to get the data and this is js file (I'm not good at ajax, i took it from a tutorial I followed) $(function () { var ajaxFormSubmit = function () { var $form = $(this); var options = { url: $form.attr("action"), type: $form.attr("method"), data: $form.serialize() }; $.ajax(options).done(function (data) { var $target = $($form.attr("data-aptitude-target")); var $newHtml = $(data); $target.replaceWith($newHtml); $newHtml.show("slide", 200); }); return false; }; var submitAutocompleteForm = function (event, ui) { var $input = $(this); $input.val(ui.item.label); var $form = $input.parents("form:first"); $form.submit(); }; var createAutocomplete = function () { var $input = $(this); var options = { source: $input.attr("data-aptitude-autocomplete"), select: submitAutocompleteForm }; $input.autocomplete(options); }; $("form[data-aptituder-ajax='true']").submit(ajaxFormSubmit); $("input[data-aptitude-autocomplete]").each(createAutocomplete); }); this is the form in my view <form method="get" action="@Url.Action("Index")" data-aptitude-ajax="true" data-aptitude-target="#testList"> <input type="search" name="searchTerm" data-aptitude-autocomplete="@Url.Action("Autocomplete")" /> <input type="submit" value=Search /> And this is part of the controller of the view public ActionResult Autocomplete(string term) { var model = db.tests .Where(r => term == null || r.name.Contains(term)) .Select(r => new { label = r.name }); return Json(model, JsonRequestBehavior.AllowGet); } // // GET: /Test/ public ActionResult Index(string searchTerm = null) { var model = db.tests .Where(r => searchTerm == null || r.name.StartsWith(searchTerm)); if (Request.IsAjaxRequest()) { return PartialView("_Test", model); } return View(model); } I'm new to ajax as well as bootstrap 3. I got the searchfunction and autocomplete from a tutorial I followed. Anybody any idea on how to fix this, because it worked fine? Thanks in advance!

    Read the article

  • jquery xml slideshow using ajax

    - by Codemaster Snake
    Hi all, I am trying to create a JQuery based slider using ajax to load images url from a xml file and then creating a html li list dynamically. Till now I am able to append and create DOM structure using Jquery. But I am not able to access the dynamically created list. I have also tried custom events using bind but not able to successfully implement it. Following is my jquery plugin code: (function($){ $.fn.genie = function(options) { var genie_dom = "<div class='genie_wrapper'><ul class='genie'></ul></div>"; var o, base; var genie_styles = "<style>.genie_wrapper{overflow:hidden}.genie{position: relative;margin:0;padding:0}.genie li {position: absolute;margin:0;padding:0}</style>"; var defaults = { width : '960px', height : '300px', background_color : '#000000', xml : 'genie.xml', speed : 1000, pause: 1000 }; base = $(this); o = $.extend(defaults, options); return this.each(function() { create_elements(); }); function create_elements() { $(base).html(genie_dom); $('head').append(genie_styles); $('.genie_wrapper').css({'background-color' : o.background_color, width : o.width, height: '300px', overflow: ''}); $.ajax({ type: "GET", url: o.xml, dataType: "xml", success: function(xml) { var slides = $(xml).find('slide'); var count = 0; $(slides).each(function(){ $('.genie').append('<li class="slide" id="slide'+count+'"><img src="' + $(this).text() + '" /></li>'); $('.genie li:last').css({'z-index' : count}); count++; }); } }); } } })(jQuery); In my html file: There is only one empty div to which I am calling my plugin like $(document).ready(function() { $('.slideshow').genie(); }); I have also tried using following everywhere in JS: $(".slide").bind("start_animation", function(e){ $(this).fadeOut(1000); alert($(this).html()); }); $(".slide").trigger("start_animation"); I want to animate li list using animate function, Can anyone please tell me how to implement it... It would be of great help... Regards, Neeraj Kumar EDIT: Can Anyone help me out please????

    Read the article

  • HTML5 <audio> Safari live broadcast vs not

    - by Peter Parente
    I'm attempting to embed an HTML5 audio element pointing to MP3 or OGG data served by a PHP file . When I view the page in Safari, the controls appear, but the UI says "Live Broadcast." When I click play, the audio starts as expected. Once it ends, however, I can't start it playing again by clicking play. Even using the JS API on the audio element and setting currentTime to 0 fails with an index error exception. I suspected the headers from the PHP script were the problem, particularly missing a content length. But that's not the case. The response headers include a proper Content- Length to indicate the audio has finite size. Furthermore, everything works as expected in Firefox 3.5+. I can click play on the audio element multiple times to hear the sound replay. If I remove the PHP script from the equation and serve up a static copy of the MP3 file, everything works fine in Safari. Does this mean Safari is treating audio src URLs with query parameters differently than URLs that don't have them? Anyone have any luck getting this to work? My simple example page is: <!DOCTYPE html> <html> <head></head> <body> <audio controls autobuffer> <source src="say.php?text=this%20is%20a%20test&format=.ogg" /> <source src="say.php?text=this%20is%20a%20test&format=.mp3" /> </audio> </body> </html> HTTP Headers from PHP script: HTTP/1.x 200 OK Date: Sun, 03 Jan 2010 15:39:34 GMT Server: Apache X-Powered-By: PHP/5.2.10 Content-Length: 8993 Keep-Alive: timeout=2, max=98 Connection: Keep-Alive Content-Type: audio/mpeg HTTP Headers from direct file access: HTTP/1.x 200 OK Date: Sun, 03 Jan 2010 20:06:59 GMT Server: Apache Last-Modified: Sun, 03 Jan 2010 03:20:02 GMT Etag: "a404b-c3f-47c3a14937c80" Accept-Ranges: bytes Content-Length: 8993 Keep-Alive: timeout=2, max=100 Connection: Keep-Alive Content-Type: audio/mpeg I tried hard-coding the Accept-Ranges header into the script too, but no luck.

    Read the article

  • I have a bunch of images being shown on click via JQuery - any easy way to animate this?

    - by Cenk
    This is the (quite simple) JS code I'm using: $(document).ready(function() { $(".button-list .next").click(function() { project = $(this).parents().filter(".projektweb").eq(0); currentimg = project.find(".images-list li.current"); nextimg = currentimg.next(); firstimg = project.find(".images-list li:first"); currentimg.removeClass("current"); if (nextimg.is("li")) nextimg.addClass("current"); else firstimg.addClass("current"); return false; }); $(".button-list .prev").click(function() { project = $(this).parents().filter(".projektweb").eq(0); currentimg = project.find(".images-list li.current"); previmg = currentimg.prev(); lastimg = project.find(".images-list li:last"); currentimg.removeClass("current"); if (previmg.is("li")) previmg.addClass("current"); else lastimg.addClass("current"); return false; }); }); And this is how the HTML code for the image list looks like: <ul class="images-list"> <li class="current"><img src="img/1.jpg" alt="" /></li> <li><img src="img/1b.jpg" alt="" /></li> </ul> <ul class="button-list"> <li><a class="button prev" href="#">?</a></li> <li><a class="button next" href="#">?</a></li></ul> The CSS: .images-list { height: 460px; list-style-type:none; float:left; width: 460px; overflow:hidden; position:relative; } .images-list img { height: 460px; width: 460px; display:block; } .images-list li { display:none; } .images-list li.current { display:block; } What I'd like to do is animate the images as they come and go - right now they just appear, which is OK but a bit more eye-candy would be nice. Can anyone help me out here? It it even possible to do it this way? Thanks!!

    Read the article

  • did you know some good web site about 'iphone css layouts' ,and can you help me to improve my code..

    - by zjm1126
    i want to create a webpage on iphone , but i can't complete it in a simple way, this is my code: <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=5.0,user-scalable=yes"> </head> <body onorientationchange="updateOrientation();" onload=updateOrientation()> <div id="a"> <input id='ab' type="button" value="button" /> </div> <div id=b style="display: none">sssadwq dwqdqw</div> <style type="text/css"> *{ margin:0; padding:0; } /* Reposition on orientation change */ body.landscape{ height: 268px; } body.landscape #a{ height:134px; line-height:134px; } body.landscape #b{ height:114px; width:470px; } body{ height: 416px; } #a{ line-height:208px; height:208px; text-align:center; } #b{ height:198px; width:310px; background:red; border:5px solid black; } </style> <script src="jquery-1.4.2.js" type="text/javascript"></script> <script type="text/javascript"> function updateOrientation() { var orientation = window.orientation; switch (orientation) { // If we're horizontal case 90: case -90: // Set orient to landscape $(document.body).addClass("landscape"); break; // If we're vertical default: // Set orient to portrait $(document.body).removeClass("landscape"); break; } } $('#ab').click(function(){ if($('#b').css('display')=='none')$('#b').css('display','block') else $('#b').css('display','none') }) </script> </body> </html> it use much more fixed number,this is not the best way ,i think the best way is to use the percentage more and more, can you do it fo me ,, thanks

    Read the article

  • .NET SerialPort.Read skipps bytes

    - by Lukas Rieger
    Solution Reading the data byte wise via "port.ReadByte" is too slow, the problem is inside the SerialPort class. i changed it to reading bigger chunks via "port.Read" and there are now no buffer overruns. although i found the solution myself, writing it down helped me and maybe someone else has the same problem and finds this via google... (how can i mark it as answered?) EDIT 2 by setting port.ReadBufferSize = 2000000; i can delay the problem for ~30 seconds. so it seems, .Net really is too slow... since my application is not that critical, i just set the buffer to 20MB, but i am still interested in the cause. EDIT i just tested something i had not thought of before (shame on me): port.ErrorReceived += (object self, SerialErrorReceivedEventArgs se_arg) => { Console.Write("| Error: {0} | ", System.Enum.GetName(se_arg.EventType.GetType(), se_arg.EventType)); }; and it seems that i have an overrun. Is the .Net implementation too slow for 500k or is there an error on my side? Original Question i built a very primitive oszilloscope (avr, which sends adc data over uart to an ftdi chip). On the pc side i have a WPF Programm that displays this data. The Protokoll is: two sync bytes (0xaffe) - 14 data bytes - two sync bytes - 14 data bytes - ... i use 16bit values, so inside the 14 data bytes are 7 channels (lsb first). I verified the uC Firmware with hTerm, and it does send and receive everything correct. But, if i try to read the data with C#, sometimes some bytes are lost. The oszilloscop programm is a mess, but i created a small sample application, which has the same symptoms. I added two extension methods to a) read one byte from the COM Port and ignore -1 (EOF) and b) wait for the sync pattern. The sample programm first syncs onto the data stream by waiting for (0xaffe) and then compares the received bytes with the expected values. the loop runs a few times until an assert failed message pops up. I could not find anything about lost bytes via google, any help would be appreciated. Code using System; using System.Collections.Generic; using System.Diagnostics; using System.IO.Ports; using System.Linq; using System.Text; using System.Threading.Tasks; namespace SerialTest { public static class SerialPortExtensions { public static byte ReadByteSerial(this SerialPort port) { int i = 0; do { i = port.ReadByte(); } while (i < 0 || i > 0xff); return (byte)i; } public static void WaitForPattern_Ushort(this SerialPort port, ushort pattern) { byte hi = 0; byte lo = 0; do { lo = hi; hi = port.ReadByteSerial(); } while (!(hi == (pattern >> 8) && lo == (pattern & 0x00ff))); } } class Program { static void Main(string[] args) { //500000 8n1 SerialPort port = new SerialPort("COM3", 500000, Parity.None, 8, StopBits.One); port.Open(); port.DiscardInBuffer(); port.DiscardOutBuffer(); //Sync port.WaitForPattern_Ushort(0xaffe); byte hi = 0; byte lo = 0; int val; int n = 0; // Start Loop, the stream is already synced while (true) { //Read 7 16-bit values (=14 Bytes) for (int i = 0; i < 7; i++) { lo = port.ReadByteSerial(); hi = port.ReadByteSerial(); val = ((hi << 8) | lo); Debug.Assert(val != 0xaffe); } //Read two sync bytes lo = port.ReadByteSerial(); hi = port.ReadByteSerial(); val = ((hi << 8) | lo); Debug.Assert(val == 0xaffe); n++; } } } }

    Read the article

  • How to transform a cached XML via XSL?

    - by TruMan1
    I have a PHP script that caches a remote XML file. I want to XSL transform it before caching, but don't know how to do this: <?php // Set this to your link Id $linkId = "0oiy8Plr697u3puyJy9VTUWfPrCEvEgJR"; // Set this to a directory that has write permissions // for this script $cacheDir = "temp/"; $cachetime = 15 * 60; // 15 minutes // Do not change anything below this line // unless you are absolutely sure $feedUrl="http://mydomain.com/messageService/guestlinkservlet?glId="; $cachefile = $cacheDir .$linkId.".xml"; header('Content-type: text/xml'); // Send from the cache if $cachetime is not exceeded if (file_exists($cachefile) && (time() - $cachetime < filemtime($cachefile))) { include($cachefile); echo "<!-- Cached ".date('jS F Y H:i', filemtime($cachefile))." -->\n"; exit; } $contents = file_get_contents($feedUrl . $linkId); // show the contents of the XML file echo $contents; // write it to the cache $fp = fopen($cachefile, 'w'); fwrite($fp, $contents); fclose($fp); ?> This is the XSL string I want to use to transform it: <xsl:template match="/"> <kml xmlns="http://www.opengis.net/kml/2.2"> <Document> <xsl:apply-templates select="messageList" /> </Document> </kml> </xsl:template> <xsl:template match="messageList"> <name>My Generated KML</name> <xsl:apply-templates select="message" /> </xsl:template> <xsl:template match="message"> <Placemark> <name><xsl:value-of select="esnName" /></name> <Point> <coordinates> <xsl:value-of select="latitude" />,<xsl:value-of select="longitude" /> </coordinates> </Point> </Placemark> </xsl:template> I want to actually transform XML input and save/return a KML format. Can someone please help adjust this script? This was given to me and I am a little new to it.

    Read the article

  • mootools fx working except in ie9

    - by Craig
    This is my first attempt with Mootools, so I welcome a critique of the code. I have a dynamic list of images that expand on the 'click" event and contract on the 'mouseout' event. The code works fine in all browsers (FF, Safari, Chrome, even the smartphones) but not in IE9 (JS is enabled) Anyone with similar problem or solution? I plan to use a lightbox effect, downloading a larger & clearer image to the center of the page, instead of just resizing a small image. However, I am hesitant to attempt this, if there is problems with IE9. I have coded three image sizes with the upload commit, so the larger image is available for the lightbox, but, I don't see anything in mootools for a lightbox, or am I missing it? $i = 0; while($i < count($validate)) { <div class="validate"> <div class="validate_image_<?php echo $validate[$i]['validate_type']; ?>"> <div class="validate_image" id="validate_image_wrapper_<?php echo $i; ?>"> <?php if ($validate[$i]['validate_image_filename'] != '') { if (file_exists(UPLOAD_DIR . 'validate_image/' . str_replace('.', '_medium.', $validate[$i]['validate_image_filename']))) { echo '<img src="' . UPLOAD_URL . 'validate_image/' . str_replace('.', '_medium.', $validate[$i]['validate_image_filename']) . '" alt="Listing Image" />'; } else { echo '<img src="' . UPLOAD_URL . 'validate_image/' . str_replace('.', '_large.', $validate[$i]['validate_image_filename']) . '" alt="Listing image" />'; } } else { ?> <img src="/images/no_image_posted_validate.png" alt="no image posted" /> <?php } ?> </div> ... remainder of HTML display code function setupEnlargeImage() { window.myFx = new Fx({ duration: 200, transition: Fx.Transitions.Sine.easeOut }); $$('.validate_image').addEvent('click', function() { window.selectedImage = this.id; myFx.start(1,2.0); }); $$('.validate_image').addEvent('mouseout', function() { window.selectedImage = this.id; myFx.start(1.0,1); }); myFx.set = function(value) { var style = "scale(" + (value) + ")"; $(window.selectedImage).setStyles({ "-webkit-transform": style, "-moz-transform": style, "-o-transform": style, "-ms-transform": style, transform: style }); } }

    Read the article

  • Algorithm to split an article without breaking the reading flow or HTML code

    - by Victor Stanciu
    Hello, I have a very large database of articles, of varying lengths. The articles have HTML elements in them. I have to insert some ads (simple <script> elements) in the body of each article when it is displayed (I know, I hate ads that interrupt my reading too). Now, the problem is that each ad must be inserted at about the same position in each article. The simplest solution is to simply split the article on a fixed number of characters (without breaking words), and insert the ad code. This, however, runs the risk of inserting the ad in the middle of a HTML tag. I could go the regex way, but I was thinking about the following solution, using JS: Establish a character count threshold. For example, "the add should be inserted at about 200 words" Set accepted deviations in each direction, say -20, +20 characters. Loop through each text node inside the article, and while doing so, keep count of the total number of characters so far Once the count exceeds the threshold, make the following decision: 4.1. If count exceeds the threshold by a value lower that the positive accepted deviation (for example, 17 characters), insert the ad code just after the current text node. 4.2. If the count is greater than the sum of the threshold and the deviation, roll back to the previous text node, and make the same decision, only this time use the previous count and check if it's lower than the difference between the threshold and the deviation, and if not, insert the ad between the current node and the previous one. 4.3. If the 4.1 and 4.2 fail (which means that the previous node reached a too low character count and the current node a too high one), insert the ad after whatever character count is needed inside the current element. I know it's convoluted, but it's the first thing out of my mind and it has the advantage that, by trying to insert the ad between text nodes, perhaps it will not break the flow of the article as bad as it would if I would just stick it in (like the final 4.3 case) Here is some pseudo-code I put together, I don't trust my english-explaining skills: threshold = 200 deviation = 20 current_count = 0 for each node in article_nodes { previous_count = current_count current_count = current_count + node.length if current_count < threshold { continue // next interation } if current_count > threshold + deviation { if previous_count < threshdold - deviation { // insert ad in current node } else { // insert ad between the current and previous nodes } } else { // insert ad after the current node } break; } Am I over-complicating stuff, or am I missing a simpler, more elegant solution?

    Read the article

  • Javascript scope problem with object and setTimeout

    - by Shabbyrobe
    I'm trying to make a jQuery plugin that executes a method on a timer. I'd like it to work on multiple elements on a page independently. I've reached a point where the timer executes for each element, but the method called in the setTimeout seems to only know about the last instance of the plugin. I know I'm doing something fundamentally stupid here, but I'm danged if I know what. I know stuff like this has been asked 8 million times on here before, but I've not managed to find an answer that relates to my specific problem. Here's a script that demonstrates the structure of what I'm doing. <html> <head> <script type="text/javascript" src="assets/jquery.min.js"></script> <script type="text/javascript"> var crap = 0; (function($) { jQuery.fn.pants = function(options) { var trousers = { id: null, current: 0, waitTimeMs: 1000, begin: function() { var d = new Date(); this.id = crap++; console.log(this.id); // do a bunch of stuff window.setTimeout(function(self) {return function() {self.next();}}(this), this.waitTimeMs); }, next: function() { this.current ++; console.log(this.id); window.setTimeout(function(self) {return function() {self.next();}}(this), this.waitTimeMs); }, }; options = options || {}; $.extend(trousers, options); this.each(function(index, element) { trousers.begin(); }); return this; }; } )(jQuery); jQuery(document).ready(function() { jQuery("div.wahey").pants(); }); </script> </head> <body> <div class="wahey"></div> <div class="wahey"></div> </body> </html> The output I get is this: 0 1 1 1 1 1 The output I expect to get is this: 0 1 0 1 0 1

    Read the article

  • Accessing contents of NativeWindow in a HTML AIR application?

    - by Dan Scotton
    I'm currently building a HTML/JS AIR application. The application needs to display to the user a different 'window' - dependant on whether this is the first time they've launched the application or not. This part is actually fine and I have the code below to do that: if(!startUp()) { // this simply returns a boolean from a local preferences database that gets shipped with the .air // do first time stuff var windowOptions = new air.NativeWindowInitOptions(); windowOptions.systemChrome = 'none'; windowOptions.type = 'lightweight'; windowOptions.transparent = 'true'; windowOptions.resizable = 'false'; var windowBounds = new air.Rectangle(300, 300, 596, 490); var newHtmlLoader = air.HTMLLoader.createRootWindow(true, windowOptions, true, windowBounds); newHtmlLoader.load(new air.URLRequest('cover.html')); } else { // display default window // just set nativeWindow.visible = true (loaded from application.xml) } However, what I want to be able to do is manipulate the html content from within cover.html after it has loaded up. There seems to be plenty of tutorials online of how to move, resize, etc. the NativeWindow, but I simply want access to the NativeWindow's HTML content. For example, how would I add a new paragraph to that page? I've tried the following: newHtmlLoader.window.opener = window; var doc = newHtmlLoader.window.opener.document.documentElement; Using AIR's Introspector console, ....log(doc) returns [object HTMLHtmlElement]. Hmm, seems promising right? I then go on to try: var p = document.createElement('p'); var t = document.createTextNode('Insert Me'); p.appendChild(t); doc.appendChild(p); ...but nothing gets inserted. I've also tried the following replacements for doc: var doc = newHtmlLoader.window.opener.document.body; // .log(doc) -> [object HTMLBodyElement] var doc = newHtmlLoader.window.opener.document; // .log(doc) -> Error: HIERARCHY_REQUEST_ERR: DOM Exception 3 ...as well as the following with jQuery: $(doc).append('<p>Insert Me</p>'); // again, nothing So, anyone had any experience in accessing a NativeWindow's inner content programmatically? Any help will be greatly appreciated.

    Read the article

  • Adding a link to image breaks jquery slider, help please!

    - by lewisqic
    Hi All, I am working on a site for a friend and trying to add a link to each image in a slide show. The slide show uses jquery and a script called easySlider1.7.js. Everything works just fine if the images are left alone, but when I try and wrap the images with a link, the slides no longer progress as they should. Here is the live website that is displaying the problem... http://www.splits59.com/ Here is the html code for each of the slide images... <div class="covercontent2box"> <div class="covercontent2"> <div id="slideshow"> <a href="/ashton-jacket-p-107.html"><img src="img/homepagesummer2010_2.2-cut.jpg" class="active" /></a> <a href="/carly-coverup-p-106.html"><img src="img/homepagesummer2010_3.2-cut.jpg" /></a> <a href="/shop-online-bottoms-c-15_14.html"><img src="img/homepagesummer2010_1.2-cut.jpg" /></a> </div> </div> </div> And here is the jquery code on the page that controls the slider... <script type="text/javascript"> function slideSwitch() { var $active = $('#slideshow IMG.active'); if ( $active.length == 0 ) $active = $('#slideshow IMG:last'); // use this to pull the images in the order they appear in the markup var $next = $active.next().length ? $active.next() : $('#slideshow IMG:first'); $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); } $(function() { setInterval( "slideSwitch()", 4500 ); }); </script> Does anyone have any idea why adding a link tag to the images breaks the slider? Any help or direction provided would be appreciated. Thanks, Devin

    Read the article

  • Supersized image captions - render outside of JavaScript

    - by Sol
    I am using the jQuery supersized script for a full screen slideshow (not the WordPress plugin as this didn't give me enough control). However, one issue that I am trying to tackle is how to render the image caption text outside of the javascript slides[ ] call - and instead, render them within the page div - to improve SEO on the page. My code works fine right now, images and the caption text are correctly displaying, but looking at the source code, there is very little text outside of the javascript (which is bad for SEO), so I would just like to improve it, if possible. I haven't been able to find any other topic on this subject and so far, I've been unsuccessful at improving on the current code, which is as follows; <!-- Supersized 3.2.7 - By Sam Dunn / One Mighty Roar (www.onemightyroar.com) Released under MIT License / GPL License --> <script type="text/javascript"> var slides=[]; <?php $my_query = new WP_Query ( array( 'post_status' => 'publish', 'post_type' => 'featured', //'numberposts' => 5, 'orderby' => 'menu_order', 'order' => 'ASC', 'showposts' => 50 )); while( $my_query->have_posts() ) : $my_query->the_post(); $slink = get_post_meta($post->ID,'FS_link',true); ?> slides.push({image : '<?php echo get_image_path(get_post_meta($post->ID, 'FS_slideimage_src', true)); ?>', title : '<div class="slidecaptioninside"><h1><?php echo the_title(); ?></h1><p><?php echo strip_tags(get_post_meta($post->ID, 'FS_fitemcaption', true)); ?>...<a href="<?php echo $slink;?>">find out more</a></p></div>', url : '<?php echo $slink;?>'}); <?php endwhile; ?> // start supersized JS $j = jQuery.noConflict(); $j(window).load(function() { $j.supersized({ //Functionality slideshow: 1, // ..... additional functions go here... slide_captions : 1, //Slide caption (Pull from "title" in slides array) slides : slides, slide_links : 'blank', progress_bar : 1, mouse_scrub: 1 }); }); </script> <div id="slidecontainer"> <div id="slidecaption"></div> <!--Thumbnail Navigation--> <div id="prevthumb"></div> <div id="nextthumb"></div> <!--additional tray divs here--> </div><!--slidecontainer--> I have tried to get Supersized to output the content into a parent div [div id="supersized"] using $j('#supersized').supersized({ but this doesn't appear to work. Has anyone managed to do this differently to improve page SEO?

    Read the article

< Previous Page | 381 382 383 384 385 386 387 388 389 390 391 392  | Next Page >