width - Page 71 - Developer IT

Jquery image slider window resize scaling issue

- by eb_Dev

Hi, I have created image gallery slider, the images of which scale with the window size. My problem is I can't seem to create the right formula to ensure that the slider is at the right position when the window is scaled. If I am at the first image and the slider 'left' offset is 0 then the scaling works fine and my offset is correct, however when I am on image two and my slider is offset by say -1500 and then the window is resized, the slider is then at the wrong offset. Taking this into account I figured I could just add / subtract the new window size difference from the slider offset and therefore have everything in the right position. I was wrong. It works for the first two images but then If I am at the end of my slider on the last image I get a nice big gap between the end of the last image and the border of the page. Can someone please show my where I am going wrong please? I've spent days on this :( The relevant code is as follows: $(window).bind('resize', function(event, delta) { /* Resize work images - resizes all to document width */ resizeWorkImages('div.page.work div#work ul'); /* Position slider controls */ positionSliderControls(); /* Get the difference between the old window width and the new */ var windowDiff = (gLastWindowWidth - $(window).width()) * -1; /* Apply difference to slider left position */ var newSliderLeftPos = stripPx($('div.page.work div#work ul').css('left')) - windowDiff; /* Apply to slider */ $('div.page.work div#work ul').css('left',newSliderLeftPos+'px') /* Update gSlider settings */ gSlider.update(); /* Record new window width */ gLastWindowWidth = $(window).width(); }); Thanks, eb_dev

Read the article

Alert Box Running First?

- by corymathews

I have some jQuery/JS below. The first thing to run is the alert box at the end. $(document).ready(function() { $("#id1 img , .msg").stop().animate( { width: '300px', height: '300px'}, { duration: 'slow', easing: 'easeInSine' }).pause(3000); $(".msg").animate( { width: '50px', height: '50px' }, { duration: 498, easing: 'easeOutSine' }); $("#id1 img").animate( { width: '50px', height: '50px' }, { duration: 500, easing: 'easeOutSine' }); $("#id1 img , .msg").animate( { width: '300px',height: '300px'}, { duration: 'slow', easing: 'easeInSine' }).pause(3000); alert('eh?'); }); I do have a easing plugin. If I run this the alert will show, and then the first animate will happen in the background but not be shown. It will just appear at the final size. Shouldn't the alert run at the end of all the animation? Can anyone explain why this is happening?

Read the article

Styling related issue in IE8

- by Ajith

I am using a background image to display as a button. The button shows up well in all versions of firefox, chrome, opera etc. However, the image fails to render itself in IE8. Only the image is not being shown, some of the other class styling gets applied such as width, height etc. Even more confounding is that in another page(though a different class and style sheet), an image of similar proportions gets displayed in similar usage. The image format is JPG. I'm copy-pasting the valid style attributes for both cases as shown by firebug below. None of the below buttons are displayed. button classes are applied as class="cart-button login", class="cart-button update", class="cart-button checkout" and class="cart-button continue" and are inside some divs. .cart-button{ height: 28px; cursor: pointer; border: none; float: left; } .cart-button:hover{ background-position: 0 -28px; } .login{ width: 58px; background:url(/../../templates/animalcare/i/login.jpg)no-repeat; margin:0 0 20px 0; clear: both; } .update{ width: 63px; background:url(/../../templates/animalcare/i/update.jpg)no-repeat; margin:0 0 20px 15px; float: left; } .checkout{ width: 77px; background:url(/../../templates/animalcare/i/checkout.jpg)no-repeat; float:right; margin:0 25px 30px 10px; } .continue{ width: 132px; background:url(/../../templates/animalcare/i/continue.jpg)no-repeat; float:right; margin:0 0 30px 0px; } The below is the only image button that gets displayed. It is located inside a table. It is in a different style sheet - hence the path difference. .add-to-cart{ width:102px; height:28px; float:left; background:url(i/add_to_cart.jpg) no-repeat; cursor:pointer; border:none; margin:10px 0 5px 0; } .add-to-cart:hover{ background-position:0 -28px; }

Read the article

Why does my Image stretch when I crop it?

- by q234e

I am using the following code snippet in order to crop a image? function crop($width,$height) { $new_image = imagecreatetruecolor($width, $height); imagecopyresampled($new_image, $this->image, 0, 0, 0, 0, $this->getWidth(), $this->getHeight(), $width, $height ); $this->image = $new_image; } Here, $this->image is the original image $this->getWidth() and $this->getHeight() holds the original dimensions of the picture, where as $width and $height, is the crop area. But for some reason, the crop image is resized(we can almost say it is resized). How to fix this?

Read the article

JQuery get height of each previous element

- by Jk_

I'm trying to find a good solution to get the height of all the element above my target. So loop the prev() function ! Any ideas on how I could deal with that ? <div> <div style="height:50px;width:100%"></div> <div style="height:12px;width:100%"></div> <div style="height:23px;width:100%"></div> <div style="height:56px;width:100%"></div> <div id="#mytarget"><p>HERE</p></div> </div> $('#mytarget').prev().each(function() { alert($(this).outerHeight()); }); and it will fires ["56","23","12","50"].

Read the article

Whats wrong with my CSS?

- by William

I'm trying to get my name and trip input fields to line, but they're all over the place. http://prime.programming-designs.com/test_forum/viewboard.php?board=0 #formdiv{ margin: auto; text-align: left; width: 30%; } .fielddiv1{ background-color: #222222; border: 2px solid #333333; vertical-align: middle; width: 45%; float: left; } .fielddiv2{ background-color: #222222; border: 2px solid #333333; vertical-align: middle; width: 100%; } .fieldtext{ width: 100%; background-color: #333333; }

Read the article

preview of Div Content

- by Pranjali

In my Code, one main div is there. main div's width and height is fixed. and I want to create the preview of the content of main div. what should I do to create preview of Div ?. I have minimized the height and width of main div but the content is not shrinking according to height and width of main div.

Read the article

Possible to make jqGrid stretch to 100%?

- by Earlz

Is it possible to make it so that a jqGrid will have a width set to 100%? I understand that column widths must be an absolute pixel size, but I've yet to find anything for setting the width of the actual grid to a relative size. For instance, I want to set the width to 100%. Instead of 100% it seems to use an odd size of 450px. There is more horizontal room on the page, but with the columns width and such, it will make the container(of only the grid) horizontally scroll. Is there some way around this?

Read the article

Using a WPF ListView as a DataGrid

- by psheriff

Many people like to view data in a grid format of rows and columns. WPF did not come with a data grid control that automatically creates rows and columns for you based on the object you pass it. However, the WPF Toolkit can be downloaded from CodePlex.com that does contain a DataGrid control. This DataGrid gives you the ability to pass it a DataTable or a Collection class and it will automatically figure out the columns or properties and create all the columns for you and display the data.The DataGrid control also supports editing and many other features that you might not always need. This means that the DataGrid does take a little more time to render the data. If you want to just display data (see Figure 1) in a grid format, then a ListView works quite well for this task. Of course, you will need to create the columns for the ListView, but with just a little generic code, you can create the columns on the fly just like the WPF Toolkit’s DataGrid. Figure 1: A List of Data using a ListView A Simple ListView ControlThe XAML below is what you would use to create the ListView shown in Figure 1. However, the problem with using XAML is you have to pre-define the columns. You cannot re-use this ListView except for “Product” data. <ListView x:Name="lstData" ItemsSource="{Binding}"> <ListView.View> <GridView> <GridViewColumn Header="Product ID" Width="Auto" DisplayMemberBinding="{Binding Path=ProductId}" /> <GridViewColumn Header="Product Name" Width="Auto" DisplayMemberBinding="{Binding Path=ProductName}" /> <GridViewColumn Header="Price" Width="Auto" DisplayMemberBinding="{Binding Path=Price}" /> </GridView> </ListView.View></ListView> So, instead of creating the GridViewColumn’s in XAML, let’s learn to create them in code to create any amount of columns in a ListView. Create GridViewColumn’s From Data TableTo display multiple columns in a ListView control you need to set its View property to a GridView collection object. You add GridViewColumn objects to the GridView collection and assign the GridView to the View property. Each GridViewColumn object needs to be bound to a column or property name of the object that the ListView will be bound to. An ADO.NET DataTable object contains a collection of columns, and these columns have a ColumnName property which you use to bind to the GridViewColumn objects. Listing 1 shows a sample of reading and XML file into a DataSet object. After reading the data a GridView object is created. You can then loop through the DataTable columns collection and create a GridViewColumn object for each column in the DataTable. Notice the DisplayMemberBinding property is set to a new Binding to the ColumnName in the DataTable. C#private void FirstSample(){ // Read the data DataSet ds = new DataSet(); ds.ReadXml(GetCurrentDirectory() + @"\Xml\Product.xml"); // Create the GridView GridView gv = new GridView(); // Create the GridView Columns foreach (DataColumn item in ds.Tables[0].Columns) { GridViewColumn gvc = new GridViewColumn(); gvc.DisplayMemberBinding = new Binding(item.ColumnName); gvc.Header = item.ColumnName; gvc.Width = Double.NaN; gv.Columns.Add(gvc); } // Setup the GridView Columns lstData.View = gv; // Display the Data lstData.DataContext = ds.Tables[0];} VB.NETPrivate Sub FirstSample() ' Read the data Dim ds As New DataSet() ds.ReadXml(GetCurrentDirectory() & "\Xml\Product.xml") ' Create the GridView Dim gv As New GridView() ' Create the GridView Columns For Each item As DataColumn In ds.Tables(0).Columns Dim gvc As New GridViewColumn() gvc.DisplayMemberBinding = New Binding(item.ColumnName) gvc.Header = item.ColumnName gvc.Width = [Double].NaN gv.Columns.Add(gvc) Next ' Setup the GridView Columns lstData.View = gv ' Display the Data lstData.DataContext = ds.Tables(0)End SubListing 1: Loop through the DataTable columns collection to create GridViewColumn objects A Generic Method for Creating a GridViewInstead of having to write the code shown in Listing 1 for each ListView you wish to create, you can create a generic method that given any DataTable will return a GridView column collection. Listing 2 shows how you can simplify the code in Listing 1 by setting up a class called WPFListViewCommon and create a method called CreateGridViewColumns that returns your GridView. C#private void DataTableSample(){ // Read the data DataSet ds = new DataSet(); ds.ReadXml(GetCurrentDirectory() + @"\Xml\Product.xml"); // Setup the GridView Columns lstData.View = WPFListViewCommon.CreateGridViewColumns(ds.Tables[0]); lstData.DataContext = ds.Tables[0];} VB.NETPrivate Sub DataTableSample() ' Read the data Dim ds As New DataSet() ds.ReadXml(GetCurrentDirectory() & "\Xml\Product.xml") ' Setup the GridView Columns lstData.View = _ WPFListViewCommon.CreateGridViewColumns(ds.Tables(0)) lstData.DataContext = ds.Tables(0)End SubListing 2: Call a generic method to create GridViewColumns. The CreateGridViewColumns MethodThe CreateGridViewColumns method will take a DataTable as a parameter and create a GridView object with a GridViewColumn object in its collection for each column in your DataTable. C#public static GridView CreateGridViewColumns(DataTable dt){ // Create the GridView GridView gv = new GridView(); gv.AllowsColumnReorder = true; // Create the GridView Columns foreach (DataColumn item in dt.Columns) { GridViewColumn gvc = new GridViewColumn(); gvc.DisplayMemberBinding = new Binding(item.ColumnName); gvc.Header = item.ColumnName; gvc.Width = Double.NaN; gv.Columns.Add(gvc); } return gv;} VB.NETPublic Shared Function CreateGridViewColumns _ (ByVal dt As DataTable) As GridView ' Create the GridView Dim gv As New GridView() gv.AllowsColumnReorder = True ' Create the GridView Columns For Each item As DataColumn In dt.Columns Dim gvc As New GridViewColumn() gvc.DisplayMemberBinding = New Binding(item.ColumnName) gvc.Header = item.ColumnName gvc.Width = [Double].NaN gv.Columns.Add(gvc) Next Return gvEnd FunctionListing 3: The CreateGridViewColumns method takes a DataTable and creates GridViewColumn objects in a GridView. By separating this method out into a class you can call this method anytime you want to create a ListView with a collection of columns from a DataTable. SummaryIn this blog you learned how to create a ListView that acts like a DataGrid. You are able to use a DataTable as both the source of the data, and for creating the columns for the ListView. In the next blog entry you will learn how to use the same technique, but for Collection classes. NOTE: You can download the complete sample code (in both VB and C#) at my website. http://www.pdsa.com/downloads. Choose Tips & Tricks, then "WPF ListView as a DataGrid" from the drop-down. Good Luck with your Coding,Paul Sheriff ** SPECIAL OFFER FOR MY BLOG READERS **Visit http://www.pdsa.com/Event/Blog for a free eBook on "Fundamentals of N-Tier".

Read the article

Silverlight for Windows Embedded tutorial (step 6)

- by Valter Minute

In this tutorial step we will develop a very simple clock application that may be used as a screensaver on our devices and will allow us to discover a new feature of Silverlight for Windows Embedded (transforms) and how to use an “old” feature of Windows CE (timers) inside a Silverlight for Windows Embedded application. Let’s start with some XAML, as usual: <UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="640" Height="480" FontSize="18" x:Name="Clock"> <Canvas x:Name="LayoutRoot" Background="#FF000000"> <Grid Height="24" Width="150" Canvas.Left="320" Canvas.Top="234" x:Name="SecondsHand" Background="#FFFF0000"> <TextBlock Text="Seconds" TextWrapping="Wrap" Width="50" HorizontalAlignment="Right" VerticalAlignment="Center" x:Name="SecondsText" Foreground="#FFFFFFFF" TextAlignment="Right" Margin="2,2,2,2"/> </Grid> <Grid Height="24" x:Name="MinutesHand" Width="100" Background="#FF00FF00" Canvas.Left="320" Canvas.Top="234"> <TextBlock HorizontalAlignment="Right" x:Name="MinutesText" VerticalAlignment="Center" Width="50" Text="Minutes" TextWrapping="Wrap" Foreground="#FFFFFFFF" TextAlignment="Right" Margin="2,2,2,2"/> </Grid> <Grid Height="24" x:Name="HoursHand" Width="50" Background="#FF0000FF" Canvas.Left="320" Canvas.Top="234"> <TextBlock HorizontalAlignment="Right" x:Name="HoursText" VerticalAlignment="Center" Width="50" Text="Hours" TextWrapping="Wrap" Foreground="#FFFFFFFF" TextAlignment="Right" Margin="2,2,2,2"/> </Grid> </Canvas> </UserControl> This XAML file defines three grid panels, one for each hand of our clock (we are implementing an analog clock using one of the most advanced technologies of the digital world… how cool is that?). Inside each hand we put a TextBlock that will be used to display the current hour, minute, second inside the dial (you can’t do that on plain old analog clocks, but it looks nice). As usual we use XAML2CPP to generate the boring part of our code. We declare a class named “Clock” and derives from the TClock template that XAML2CPP has declared for us. class Clock : public TClock<Clock> { ... }; Our WinMain function is more or less the same we used in all the previous samples. It initializes the XAML runtime, create an instance of our class, initialize it and shows it as a dialog: int WINAPI WinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPTSTR lpCmdLine, int nCmdShow) { if (!XamlRuntimeInitialize()) return -1; HRESULT retcode; IXRApplicationPtr app; if (FAILED(retcode=GetXRApplicationInstance(&app))) return -1; Clock clock; if (FAILED(clock.Init(hInstance,app))) return -1; UINT exitcode; if (FAILED(clock.GetVisualHost()->StartDialog(&exitcode))) return -1; return exitcode; } Silverlight for Windows Embedded provides a lot of features to implement our UI, but it does not provide timers. How we can update our clock if we don’t have a timer feature? We just use plain old Windows timers, as we do in “regular” Windows CE applications! To use a timer in WinCE we should declare an id for it: #define IDT_CLOCKUPDATE 0x12341234 We also need an HWND that will be used to receive WM_TIMER messages. Our Silverlight for Windows Embedded page is “hosted” inside a GWES Window and we can retrieve its handle using the GetContainerHWND function of our VisualHost object. Let’s see how this is implemented inside our Clock class’ Init method: HRESULT Init(HINSTANCE hInstance,IXRApplication* app) { HRESULT retcode; if (FAILED(retcode=TClock<Clock>::Init(hInstance,app))) return retcode; // create the timer user to update the clock HWND clockhwnd; if (FAILED(GetVisualHost()->GetContainerHWND(&clockhwnd))) return -1; timer=SetTimer(clockhwnd,IDT_CLOCKUPDATE,1000,NULL); return 0; } We use SetTimer to create a new timer and GWES will send a WM_TIMER to our window every second, giving us a chance to update our clock. That sounds great… but how could we handle the WM_TIMER message if we didn’t implement a window procedure for our window? We have to move a step back and look how a visual host is created. This code is generated by XAML2CPP and is inside xaml2cppbase.h: virtual HRESULT CreateHost(HINSTANCE hInstance,IXRApplication* app) { HRESULT retcode; XRWindowCreateParams wp; ZeroMemory(&wp, sizeof(XRWindowCreateParams)); InitWindowParms(&wp); XRXamlSource xamlsrc; SetXAMLSource(hInstance,&xamlsrc); if (FAILED(retcode=app->CreateHostFromXaml(&xamlsrc, &wp, &vhost))) return retcode; if (FAILED(retcode=vhost->GetRootElement(&root))) return retcode; return S_OK; } As you can see the CreateHostFromXaml function of IXRApplication accepts a structure named XRWindowCreateParams that control how the “plain old” GWES Window is created by the runtime. This structure is initialized inside the InitWindowParm method: // Initializes Windows parameters, can be overridden in the user class to change its appearance virtual void InitWindowParms(XRWindowCreateParams* wp) { wp->Style = WS_OVERLAPPED; wp->pTitle = windowtitle; wp->Left = 0; wp->Top = 0; } This method set up the window style, title and position. But the XRWindowCreateParams contains also other fields and, since the function is declared as virtual, we could initialize them inside our version of InitWindowParms: // add hook procedure to the standard windows creation parms virtual void InitWindowParms(XRWindowCreateParams* wp) { TClock<Clock>::InitWindowParms(wp); wp->pHookProc=StaticHostHookProc; wp->pvUserParam=this; } This method calls the base class implementation (useful to not having to re-write some code, did I told you that I’m quite lazy?) and then initializes the pHookProc and pvUserParam members of the XRWindowsCreateParams structure. Those members will allow us to install a “hook” procedure that will be called each time the GWES window “hosting” our Silverlight for Windows Embedded UI receives a message. We can declare a hook procedure inside our Clock class: // static hook procedure static BOOL CALLBACK StaticHostHookProc(VOID* pv,HWND hwnd,UINT Msg,WPARAM wParam,LPARAM lParam,LRESULT* pRetVal) { ... } You should notice two things here. First that the function is declared as static. This is required because a non-static function has a “hidden” parameters, that is the “this” pointer of our object. Having an extra parameter is not allowed for the type defined for the pHookProc member of the XRWindowsCreateParams struct and so we should implement our hook procedure as static. But in a static procedure we will not have a this pointer. How could we access the data member of our class? Here’s the second thing to notice. We initialized also the pvUserParam of the XRWindowsCreateParams struct. We set it to our this pointer. This value will be passed as the first parameter of the hook procedure. In this way we can retrieve our this pointer and use it to call a non-static version of our hook procedure: // static hook procedure static BOOL CALLBACK StaticHostHookProc(VOID* pv,HWND hwnd,UINT Msg,WPARAM wParam,LPARAM lParam,LRESULT* pRetVal) { return ((Clock*)pv)->HostHookProc(hwnd,Msg,wParam,lParam,pRetVal); } Inside our non-static hook procedure we will have access to our this pointer and we will be able to update our clock: // hook procedure (handles timers) BOOL HostHookProc(HWND hwnd,UINT Msg,WPARAM wParam,LPARAM lParam,LRESULT* pRetVal) { switch (Msg) { case WM_TIMER: if (wParam==IDT_CLOCKUPDATE) UpdateClock(); *pRetVal=0; return TRUE; } return FALSE; } The UpdateClock member function will update the text inside our TextBlocks and rotate the hands to reflect current time: // udates Hands positions and labels HRESULT UpdateClock() { SYSTEMTIME time; HRESULT retcode; GetLocalTime(&time); //updates the text fields TCHAR timebuffer[32]; _itow(time.wSecond,timebuffer,10); SecondsText->SetText(timebuffer); _itow(time.wMinute,timebuffer,10); MinutesText->SetText(timebuffer); _itow(time.wHour,timebuffer,10); HoursText->SetText(timebuffer); if (FAILED(retcode=RotateHand(((float)time.wSecond)*6-90,SecondsHand))) return retcode; if (FAILED(retcode=RotateHand(((float)time.wMinute)*6-90,MinutesHand))) return retcode; if (FAILED(retcode=RotateHand(((float)(time.wHour%12))*30-90,HoursHand))) return retcode; return S_OK; } The function retrieves current time, convert hours, minutes and seconds to strings and display those strings inside the three TextBlocks that we put inside our clock hands. Then it rotates the hands to position them at the right angle (angles are in degrees and we have to subtract 90 degrees because 0 degrees means horizontal on Silverlight for Windows Embedded and usually a clock 0 is in the top position of the dial. The code of the RotateHand function uses transforms to rotate our clock hands on the screen: // rotates a Hand HRESULT RotateHand(float angle,IXRFrameworkElement* Hand) { HRESULT retcode; IXRRotateTransformPtr rotatetransform; IXRApplicationPtr app; if (FAILED(retcode=GetXRApplicationInstance(&app))) return retcode; if (FAILED(retcode=app->CreateObject(IID_IXRRotateTransform,&rotatetransform))) return retcode; if (FAILED(retcode=rotatetransform->SetAngle(angle))) return retcode; if (FAILED(retcode=rotatetransform->SetCenterX(0.0))) return retcode; float height; if (FAILED(retcode==Hand->GetActualHeight(&height))) return retcode; if (FAILED(retcode=rotatetransform->SetCenterY(height/2))) return retcode; if (FAILED(retcode=Hand->SetRenderTransform(rotatetransform))) return retcode; return S_OK; } It creates a IXRotateTransform object, set its rotation angle and origin (the default origin is at the top-left corner of our Grid panel, we move it in the vertical center to keep the hand rotating around a single point in a more “clock like” way. Then we can apply the transform to our UI object using SetRenderTransform. Every UI element (derived from IXRFrameworkElement) can be rotated! And using different subclasses of IXRTransform also moved, scaled, skewed and distorted in many ways. You can also concatenate multiple transforms and apply them at once suing a IXRTransformGroup object. The XAML engine uses vector graphics and object will not look “pixelated” when they are rotated or scaled. As usual you can download the code here: http://cid-9b7b0aefe3514dc5.skydrive.live.com/self.aspx/.Public/Clock.zip If you read up to (down to?) this point you seem to be interested in Silverlight for Windows Embedded. If you want me to discuss some specific topic, please feel free to point it out in the comments! Technorati Tags: Silverlight for Windows Embedded,Windows CE

Read the article

Using rounded corners in modern websites with CSS3

- by nikolaosk

This is going to be the sixth post in a series of posts regarding HTML 5. You can find the other posts here , here, here , here and here.In this post I will provide a hands-on example on how to use rounded corners (rounded corners in CSS3) in your website. I think this is the feature that is most required in the new modern websites.Most websites look great with their lovely round panels and rounded corner tab style menus. We could achieve that effect earlier but we should resort to complex CSS rules and images. I will show you how to accomplish this great feature with the power of CSS 3.We will not use Javascript.Javascript is required for IE 7, IE 8 and the notorious IE 6. The best solution for implementing corners using CSS and Javascript without using images is Nifty corners cube. There are detailed information how to achieve this in the link I provided. This solution is tested in earlier vesrions of IE (IE 6,IE 7,IE 8) and Opera,Firefox,Safari. In order to be absolutely clear this is not (and could not be) a detailed tutorial on HTML 5. There are other great resources for that.Navigate to the excellent interactive tutorials of W3School.Another excellent resource is HTML 5 Doctor.Two very nice sites that show you what features and specifications are implemented by various browsers and their versions are http://caniuse.com/ and http://html5test.com/. At this times Chrome seems to support most of HTML 5 specifications.Another excellent way to find out if the browser supports HTML 5 and CSS 3 features is to use the Javascript lightweight library Modernizr.In this hands-on example I will be using Expression Web 4.0.This application is not a free application. You can use any HTML editor you like.You can use Visual Studio 2012 Express edition. You can download it here.Before I go on with the actual demo I will use the (http://www.caniuse.com) to see the support for web fonts from the latest versions of modern browsers.Please have a look at the picture below. We see that all the latest versions of modern browsers support this feature.We can see that even IE 9 supports this feature. Let's move on with the actual demo. This is going to be a rather simple demo.I create a simple HTML 5 page. The markup follows and it is very easy to use and understand <!DOCTYPE html><html lang="en"> <head> <title>HTML 5, CSS3 and JQuery</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="header"> <h1>Learn cutting edge technologies</h1> </div> <div id="main"> <h2>HTML 5</h2> <p id="panel1"> HTML5 is the latest version of HTML and XHTML. The HTML standard defines a single language that can be written in HTML and XML. It attempts to solve issues found in previous iterations of HTML and addresses the needs of Web Applications, an area previously not adequately covered by HTML. </p> </div> </body> </html>Then I need to write the various CSS rules that style this markup. I will name it style.css body{ line-height: 38px; width: 1024px; background-color:#eee; text-align:center; }#panel1 { margin:auto; text-align:left; background-color:#77cdef;width:400px; height:250px; padding:15px;font-size:16px;font-family:tahoma;color:#fff;border-radius: 20px;}Have a look below to see what my page looks like in IE 10. This is possible through the border-radious property. The colored panel has all four corners rounded with the same radius.We can add a border to the rounded corner panel by adding this property declaration in the #panel1, border:4px #000 solid;We can have even better visual effects if we specify a radius for each corner.This is the updated version of the style.css. body{ line-height: 38px; width: 1024px; background-color:#eee; text-align:center; }#panel1 { margin:auto; text-align:left; background-color:#77cdef;border:4px #000 solid;width:400px; height:250px; padding:15px;font-size:16px;font-family:tahoma;color:#fff;border-top-left-radius: 20px;border-top-right-radius: 70px;border-bottom-right-radius: 20px;border-bottom-left-radius: 70px;} This is how my page looks in Firefox 15.0.1 In this final example I will show you how to style with CSS 3 (rounded corners) a horizontal navigation menu. This is the new version of the HTML markup<!DOCTYPE html><html lang="en"> <head> <title>HTML 5, CSS3 and JQuery</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="header"> <h1>Learn cutting edge technologies</h1> </div> <div id="nav"><ul><li><a class="mymenu" id="activelink" href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=1153&postid=8934038#">Main</a></li><li><a class="mymenu" href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=1153&postid=8934038#">HTML 5</a></li><li><a class="mymenu" href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=1153&postid=8934038#">CSS 3</a></li><li><a class="mymenu" href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=1153&postid=8934038#">JQuery</a></li></ul></div> <div id="main"> <h2>HTML 5</h2> <p id="panel1"> HTML5 is the latest version of HTML and XHTML. The HTML standard defines a single language that can be written in HTML and XML. It attempts to solve issues found in previous iterations of HTML and addresses the needs of Web Applications, an area previously not adequately covered by HTML. </p> </div> </body> </html> This is the updated version of style.css body{ line-height: 38px; width: 1024px; background-color:#eee; text-align:center; }#panel1 { margin:auto; text-align:left; background-color:#77cdef;border:4px #000 solid;width:400px; height:250px; padding:15px;font-size:16px;font-family:tahoma;color:#fff;border-top-left-radius: 20px;border-top-right-radius: 70px;border-bottom-right-radius: 20px;border-bottom-left-radius: 70px;}#nav ul {width:900px; position:relative;top:24px;}ul li { text-decoration:none; display:inline;}ul li a.mymenu { font-family:Tahoma; color:black; font-size:14px;font-weight:bold;background-color:#77cdef; color:#fff;border-top-left-radius:18px; border-top-right-radius:18px; border:1px solid black; padding:15px; padding-bottom:10px;margin :2px; text-decoration:none; border-bottom:none;}.mymenu:hover { background-color:#e3781a; color:black;} The CSS rules are the classic rules that are extensively used for styling menus.The border-radius property is still responsible for the rounded corners in the menu.This is how my page looks in Chrome version 21. Hope it helps!!!

Read the article

Silverlight 4 Twitter Client – Part 6

- by Max

In this post, we are going to look into implementing lists into our twitter application and also about enhancing the data grid to display the status messages in a pleasing way with the profile images. Twitter lists are really cool feature that they recently added, I love them and I’ve quite a few lists setup one for DOTNET gurus, SQL Server gurus and one for a few celebrities. You can follow them here. Now let us move onto our tutorial. 1) Lists can be subscribed to in two ways, one can be user’s own lists, which he has created and another one is the lists that the user is following. Like for example, I’ve created 3 lists myself and I am following 1 other lists created by another user. Both of them cannot be fetched in the same api call, its a two step process. 2) In the TwitterCredentialsSubmit method we’ve in Home.xaml.cs, let us do the first api call to get the lists that the user has created. For this the call has to be made to https://twitter.com/<TwitterUsername>/lists.xml. The API reference is available here. myService1.AllowReadStreamBuffering = true; myService1.UseDefaultCredentials = false; myService1.Credentials = new NetworkCredential(GlobalVariable.getUserName(), GlobalVariable.getPassword()); myService1.DownloadStringCompleted += new DownloadStringCompletedEventHandler(ListsRequestCompleted); myService1.DownloadStringAsync(new Uri("https://twitter.com/" + GlobalVariable.getUserName() + "/lists.xml")); 3) Now let us look at implementing the event handler – ListRequestCompleted for this. public void ListsRequestCompleted(object sender, System.Net.DownloadStringCompletedEventArgs e) { if (e.Error != null) { StatusMessage.Text = "This application must be installed first."; parseXML(""); } else { //MessageBox.Show(e.Result.ToString()); parseXMLLists(e.Result.ToString()); } } 4) Now let us look at the parseXMLLists in detail xdoc = XDocument.Parse(text); var answer = (from status in xdoc.Descendants("list") select status.Element("name").Value); foreach (var p in answer) { Border bord = new Border(); bord.CornerRadius = new CornerRadius(10, 10, 10, 10); Button b = new Button(); b.MinWidth = 70; b.Background = new SolidColorBrush(Colors.Black); b.Foreground = new SolidColorBrush(Colors.Black); //b.Width = 70; b.Height = 25; b.Click += new RoutedEventHandler(b_Click); b.Content = p.ToString(); bord.Child = b; TwitterListStack.Children.Add(bord); } So here what am I doing, I am just dynamically creating a button for each of the lists and put them within a StackPanel and for each of these buttons, I am creating a event handler b_Click which will be fired on button click. We will look into this method in detail soon. For now let us get the buttons displayed. 5) Now the user might have some lists to which he has subscribed to. We need to create a button for these as well. In the end of TwitterCredentialsSubmit method, we need to make a call to http://api.twitter.com/1/<TwitterUsername>/lists/subscriptions.xml. Reference is available here. The code will look like this below. myService2.AllowReadStreamBuffering = true; myService2.UseDefaultCredentials = false; myService2.Credentials = new NetworkCredential(GlobalVariable.getUserName(), GlobalVariable.getPassword()); myService2.DownloadStringCompleted += new DownloadStringCompletedEventHandler(ListsSubsRequestCompleted); myService2.DownloadStringAsync(new Uri("http://api.twitter.com/1/" + GlobalVariable.getUserName() + "/lists/subscriptions.xml")); 6) In the event handler – ListsSubsRequestCompleted, we need to parse through the xml string and create a button for each of the lists subscribed, let us see how. I’ve taken only the “full_name”, you can choose what you want, refer the documentation here. Note the point that the full_name will have @<UserName>/<ListName> format – this will be useful very soon. xdoc = XDocument.Parse(text); var answer = (from status in xdoc.Descendants("list") select status.Element("full_name").Value); foreach (var p in answer) { Border bord = new Border(); bord.CornerRadius = new CornerRadius(10, 10, 10, 10); Button b = new Button(); b.Background = new SolidColorBrush(Colors.Black); b.Foreground = new SolidColorBrush(Colors.Black); //b.Width = 70; b.MinWidth = 70; b.Height = 25; b.Click += new RoutedEventHandler(b_Click); b.Content = p.ToString(); bord.Child = b; TwitterListStack.Children.Add(bord); } Please note, I am setting the button width to be auto based on the content and also giving it a midwidth value. I wanted to create a rounded corner buttons, but for some reason its not working. Also add this StackPanel – TwitterListStack of the Home.xaml <StackPanel HorizontalAlignment="Center" Orientation="Horizontal" Name="TwitterListStack"></StackPanel> After doing this, you would get a series of buttons in the top of the home page. 7) Now the button click event handler – b_Click, in this method, once the button is clicked, I call another method with the content string of the button which is clicked as the parameter. Button b = (Button)e.OriginalSource; getListStatuses(b.Content.ToString()); 8) Now the getListsStatuses method: toggleProgressBar(true); WebRequest.RegisterPrefix("http://", System.Net.Browser.WebRequestCreator.ClientHttp); WebClient myService = new WebClient(); myService.AllowReadStreamBuffering = true; myService.UseDefaultCredentials = false; myService.DownloadStringCompleted += new DownloadStringCompletedEventHandler(TimelineRequestCompleted); if (listName.IndexOf("@") > -1 && listName.IndexOf("/") > -1) { string[] arrays = null; arrays = listName.Split('/'); arrays[0] = arrays[0].Replace("@", " ").Trim(); //MessageBox.Show(arrays[0]); //MessageBox.Show(arrays[1]); string url = "http://api.twitter.com/1/" + arrays[0] + "/lists/" + arrays[1] + "/statuses.xml"; //MessageBox.Show(url); myService.DownloadStringAsync(new Uri(url)); } else myService.DownloadStringAsync(new Uri("http://api.twitter.com/1/" + GlobalVariable.getUserName() + "/lists/" + listName + "/statuses.xml")); Please note that the url to look at will be different based on the list clicked – if its user created, the url format will be http://api.twitter.com/1/<CurentUser>/lists/<ListName>/statuses.xml But if it is some lists subscribed, it will be http://api.twitter.com/1/<ListOwnerUserName>/lists/<ListName>/statuses.xml The first one is pretty straight forward to implement, but if its a list subscribed, we need to split the listName string to get the list owner and list name and user them to form the string. So that is what I’ve done in this method, if the listName has got “@” and “/” I build the url differently. 9) Until now, we’ve been using only a few nodes of the status message xml string, now we will look to fetch a new field - “profile_image_url”. Images in datagrid – COOL. So for that, we need to modify our Status.cs file to include two more fields one string another BitmapImage with get and set. public string profile_image_url { get; set; } public BitmapImage profileImage { get; set; } 10) Now let us change the generic parseXML method which is used for binding to the datagrid. public void parseXML(string text) { XDocument xdoc; xdoc = XDocument.Parse(text); statusList = new List<Status>(); statusList = (from status in xdoc.Descendants("status") select new Status { ID = status.Element("id").Value, Text = status.Element("text").Value, Source = status.Element("source").Value, UserID = status.Element("user").Element("id").Value, UserName = status.Element("user").Element("screen_name").Value, profile_image_url = status.Element("user").Element("profile_image_url").Value, profileImage = new BitmapImage(new Uri(status.Element("user").Element("profile_image_url").Value)) }).ToList(); DataGridStatus.ItemsSource = statusList; StatusMessage.Text = "Datagrid refreshed."; toggleProgressBar(false); } We are here creating a new bitmap image from the image url and creating a new Status object for every status and binding them to the data grid. Refer to the Twitter API documentation here. You can choose any column you want. 11) Until now, we’ve been using the auto generate columns for the data grid, but if you want it to be really cool, you need to define the columns with templates, etc… <data:DataGrid AutoGenerateColumns="False" Name="DataGridStatus" Height="Auto" MinWidth="400"> <data:DataGrid.Columns> <data:DataGridTemplateColumn Width="50" Header=""> <data:DataGridTemplateColumn.CellTemplate> <DataTemplate> <Image Source="{Binding profileImage}" Width="50" Height="50" Margin="1"/> </DataTemplate> </data:DataGridTemplateColumn.CellTemplate> </data:DataGridTemplateColumn> <data:DataGridTextColumn Width="Auto" Header="User Name" Binding="{Binding UserName}" /> <data:DataGridTemplateColumn MinWidth="300" Width="Auto" Header="Status"> <data:DataGridTemplateColumn.CellTemplate> <DataTemplate> <TextBlock TextWrapping="Wrap" Text="{Binding Text}"/> </DataTemplate> </data:DataGridTemplateColumn.CellTemplate> </data:DataGridTemplateColumn> </data:DataGrid.Columns> </data:DataGrid> I’ve used only three columns – Profile image, Username, Status text. Now our Datagrid will look super cool like this. Coincidentally, Tim Heuer is on the screenshot , who is a Silverlight Guru and works on SL team in Microsoft. His blog is really super. Here is the zipped file for all the xaml, xaml.cs & class files pages. Ok let us stop here for now, will look into implementing few more features in the next few posts and then I am going to look into developing a ASP.NET MVC 2 application. Hope you all liked this post. If you have any queries / suggestions feel free to comment below or contact me. Cheers! Technorati Tags: Silverlight,LINQ,Twitter API,Twitter,Silverlight 4

Read the article

Infinite loop during A* algorithm

- by Tashu

The A* algorithm is used by enemies to have a path to the goal. It's working but when sometimes I placed a tower in a grid (randomly) it produces a stack overflow error. The A* algorithm would iterate the enemy and find its path and pass the list to the enemy's path. I added debug logs and the list that I'm getting it looks like it would arrive from start cell to goal cell. Here's the log - 06-19 19:26:41.982: DEBUG/findEnemyPath, enemy X:Y(4281): X2.8256836:Y3.5 06-19 19:26:41.990: DEBUG/findEnemyPath, grid X:Y(4281): X3:Y2 06-19 19:26:41.990: DEBUG/START CELL ID:(4281): 38 06-19 19:26:41.990: DEBUG/GOAL CELL ID:(4281): 47 06-19 19:26:41.990: DEBUG/Best : 38(4281): passThrough:0.0 06-19 19:26:41.990: DEBUG/Neighbor's Parent:(4281): 38 06-19 19:26:41.990: DEBUG/Neighbor's Parent:(4281): 38 06-19 19:26:41.990: DEBUG/Neighbor's Parent:(4281): 38 06-19 19:26:41.990: DEBUG/Neighbor's Parent:(4281): 38 06-19 19:26:41.990: DEBUG/Best : 39(4281): passThrough:8.875 06-19 19:26:41.990: DEBUG/Neighbor's Parent:(4281): 39 06-19 19:26:41.990: DEBUG/Neighbor's Parent:(4281): 39 06-19 19:26:41.990: DEBUG/Neighbor's Parent:(4281): 39 06-19 19:26:41.990: DEBUG/Best : 40(4281): passThrough:7.9375 06-19 19:26:41.990: DEBUG/Neighbor's Parent:(4281): 40 06-19 19:26:41.990: DEBUG/Neighbor's Parent:(4281): 40 06-19 19:26:41.990: DEBUG/Best : 52(4281): passThrough:8.9375 06-19 19:26:41.990: DEBUG/Neighbor's Parent:(4281): 52 06-19 19:26:41.990: DEBUG/Neighbor's Parent:(4281): 52 06-19 19:26:41.990: DEBUG/Best : 53(4281): passThrough:7.96875 06-19 19:26:41.990: DEBUG/Neighbor's Parent:(4281): 53 06-19 19:26:41.990: DEBUG/Best : 28(4281): passThrough:8.9375 06-19 19:26:41.990: DEBUG/Neighbor's Parent:(4281): 28 06-19 19:26:41.990: DEBUG/Best : 65(4281): passThrough:8.984375 06-19 19:26:41.990: DEBUG/Neighbor's Parent:(4281): 65 06-19 19:26:41.990: DEBUG/Neighbor's Parent:(4281): 65 06-19 19:26:41.990: DEBUG/Best : 66(4281): passThrough:7.9921875 06-19 19:26:41.990: DEBUG/Neighbor's Parent:(4281): 66 06-19 19:26:42.000: DEBUG/Best : 78(4281): passThrough:8.99609375 06-19 19:26:42.000: DEBUG/Neighbor's Parent:(4281): 78 06-19 19:26:42.000: DEBUG/Best : 79(4281): passThrough:7.998046875 06-19 19:26:42.000: DEBUG/Neighbor's Parent:(4281): 79 06-19 19:26:42.000: DEBUG/Best : 80(4281): passThrough:6.9990234375 06-19 19:26:42.000: DEBUG/Neighbor's Parent:(4281): 80 06-19 19:26:42.000: DEBUG/Neighbor's Parent:(4281): 80 06-19 19:26:42.000: DEBUG/Best : 81(4281): passThrough:5.99951171875 06-19 19:26:42.000: DEBUG/Neighbor's Parent:(4281): 81 06-19 19:26:42.000: DEBUG/Neighbor's Parent:(4281): 81 06-19 19:26:42.000: DEBUG/Best : 82(4281): passThrough:4.999755859375 06-19 19:26:42.000: DEBUG/Neighbor's Parent:(4281): 82 06-19 19:26:42.000: DEBUG/Neighbor's Parent:(4281): 82 06-19 19:26:42.000: DEBUG/Best : 83(4281): passThrough:3.9998779296875 06-19 19:26:42.000: DEBUG/Neighbor's Parent:(4281): 83 06-19 19:26:42.000: DEBUG/Best : 71(4281): passThrough:2.99993896484375 06-19 19:26:42.000: DEBUG/Neighbor's Parent:(4281): 71 06-19 19:26:42.000: DEBUG/Best : 59(4281): passThrough:1.99951171875 06-19 19:26:42.000: DEBUG/Neighbor's Parent:(4281): 59 06-19 19:26:42.000: DEBUG/Neighbor's Parent:(4281): 59 06-19 19:26:42.000: DEBUG/Neighbor's Parent:(4281): 59 06-19 19:26:42.000: DEBUG/Best : 47(4281): passThrough:0.99951171875 Then, the goal cell would be iterating its parent till start cell to break off the loop. private void populateBestList(Cell cell, List<Cell> bestList) { bestList.add(cell); if (cell.parent.start == false) { Log.d("ID:", ""+cell.id); Log.d("ParentID:", ""+cell.parent.id); populateBestList(cell.parent, bestList); } return; } The log with error above would show like this - 06-19 19:26:42.010: DEBUG/ID:(4281): 47 06-19 19:26:42.010: DEBUG/ParentID:(4281): 59 06-19 19:26:42.010: DEBUG/ID:(4281): 59 06-19 19:26:42.010: DEBUG/ParentID:(4281): 71 06-19 19:26:42.010: DEBUG/ID:(4281): 71 06-19 19:26:42.010: DEBUG/ParentID:(4281): 59 06-19 19:26:42.010: DEBUG/ID:(4281): 59 06-19 19:26:42.010: DEBUG/ParentID:(4281): 71 06-19 19:26:42.010: DEBUG/ID:(4281): 71 71 and 59 would switch over and goes on. I thought the grid is the issue due to the fact that enemies are using the single grid so I make the parent, start, and goal clear before starting the A* algorithm for an enemy. for(int i = 0; i < GRID_HEIGHT; i++) { for(int j = 0; j < GRID_WIDTH; j++) { grid[i][j].parent = null; grid[i][j].start = false; grid[i][j].goal = false; } } That didn't work. I thought it might be something related to this code, but not sure if I'm on right track - neighbor.parent = best; openList.remove(neighbor); closedList.remove(neighbor); openList.add(0, neighbor); Here's the code of the A* algorithm - private List<Cell> findEnemyPath(Enemy enemy) { for(int i = 0; i < GRID_HEIGHT; i++) { for(int j = 0; j < GRID_WIDTH; j++) { grid[i][j].parent = null; grid[i][j].start = false; grid[i][j].goal = false; } } List<Cell> openList = new ArrayList<Cell>(); List<Cell> closedList = new ArrayList<Cell>(); List<Cell> bestList = new ArrayList<Cell>(); int width = (int)Math.floor(enemy.position.x); int height = (int)Math.floor(enemy.position.y); width = (width < 0) ? 0 : width; height = (height < 0) ? 0 : height; Log.d("findEnemyPath, enemy X:Y", "X"+enemy.position.x+":"+"Y"+enemy.position.y); Log.d("findEnemyPath, grid X:Y", "X"+height+":"+"Y"+width); Cell start = grid[height][width]; Cell goal = grid[ENEMY_GOAL_HEIGHT][ENEMY_GOAL_WIDTH]; if(start.id != goal.id) { Log.d("START CELL ID: ", ""+start.id); Log.d("GOAL CELL ID: ", ""+goal.id); //Log.d("findEnemyPath, grid X:Y", "X"+start.position.x+":"+"Y"+start.position.y); start.start = true; goal.goal = true; openList.add(start); while(openList.size() > 0) { Cell best = findBestPassThrough(openList, goal); //Log.d("ID:", ""+best.id); openList.remove(best); closedList.add(best); if (best.goal) { System.out.println("Found Goal"); System.out.println(bestList.size()); populateBestList(goal, bestList); /* for(Cell cell : bestList) { Log.d("ID:", ""+cell.id); Log.d("ParentID:", ""+cell.parent.id); } */ Collections.reverse(bestList); Cell exit = new Cell(13.5f, 3.5f, 1, 1); exit.isExit = true; bestList.add(exit); //Log.d("PathList", "Enemy ID : " + enemy.id); return bestList; } else { List<Cell> neighbors = getNeighbors(best); for (Cell neighbor : neighbors) { if(neighbor.isTower) { continue; } if (openList.contains(neighbor)) { Cell tmpCell = new Cell(neighbor.position.x, neighbor.position.y, 1, 1); tmpCell.parent = best; if (tmpCell.getPassThrough(goal) >= neighbor.getPassThrough(goal)) { continue; } } if (closedList.contains(neighbor)) { Cell tmpCell = new Cell(neighbor.position.x, neighbor.position.y, 1, 1); tmpCell.parent = best; if (tmpCell.getPassThrough(goal) >= neighbor.getPassThrough(goal)) { continue; } } Log.d("Neighbor's Parent: ", ""+best.id); neighbor.parent = best; openList.remove(neighbor); closedList.remove(neighbor); openList.add(0, neighbor); } } } } Log.d("Cannot find a path", ""); return null; }

Read the article

float right image pushes down text in table below in IE9 [migrated]

- by Cheers and hth. - Alf

I'm not a webmaster, not even a web developer, but I'm tasked with adding content to a Wordpress site developed by Someone Else(TM). Here's a page illustrating the problem: http://www.reginedagan.no/program/fiskekonkurranse-i-hovden/. It shows up nice in Firefox: But in IE9 the floated picture pushed down the text in the table below, so that it looks rather awful: I found some related questions on the web, e.g. "CSS: Float right in IE doesn't work!" and "why does a floating DIV mess up table positioning?", and the suggestions there led me to set clear: none on the div around the table, the table itself, and then each individual tr and finally even on each individual td. I also set width="99%" on the table, and tried (but I don't know how correctly) to apply the IE6 quirk fix margin-right: -3px. So here's the content as written in Wordpress, including the unsuccessful attempted fixes: <h1><div style="float: right"><a href="http://www.reginedagan.no/?attachment_id=671"><img src="http://www.reginedagan.no/wp-content/uploads/2012/06/fiskekonkurranse-2011-bilde-3-nedskalert.jpg" alt="Fra fiskekonkurransen i 2011" title="Fra fiskekonkurransen i 2011" width="200" height="242" class="size-full wp-image-671"/></a></div>Fiskekonkurranse i Hovden!</h1> <div style="background-color: #FAF0F0; clear: none;"><table width="99%" style="clear: none; right-margin: -3px;"> <tr style=" clear: none;"> <td style="text-align: left; clear: none;">Dato:</td> <td style="text-align: left; clear: none;">Lørdag 21.juli</td> </tr> <tr style=" clear: none;"> <td style="text-align: left; padding-left: 2em"; clear: none;>/ barn, Flytebrygga</td> <td style="text-align: left; clear: none;">15.00 – 16.00</td> </tr> <tr style=" clear: none;"> <td style="text-align: left; padding-left: 2em; clear: none;">/ voksne (over 12 år), Moloen</td> <td style="text-align: left; clear: none;">15.00 – 17.00 </td> </tr> <tr style=" clear: none;"> <td style="text-align: left; clear: none;">Sted:</td> <td style="text-align: left; clear: none;">Hovden</td> </tr> <tr style=" clear: none;"> <td style="text-align: left; clear: none;">Pris:</td> <td style="text-align: left; clear: none;">voksen (over 12 år) kr. 50,-, barn kr. 30,-</td> </tr style=" clear: none;"> <tr> <td style="text-align: left; clear: none;">Arrangør:</td> <td style="text-align: left; clear: none;">Hovden Grendelag</td> </tr> </table></div> Velkommen til den årlige Fiskekonkurransen i Hovden lørdag 21. juli! <a href="http://www.reginedagan.no/program/fiskekonkurranse-i-hovden/fiskekonkurranse-2011-bilde-nedskalertjpg/" rel="attachment wp-att-672"><img src="http://www.reginedagan.no/wp-content/uploads/2012/03/fiskekonkurranse-2011-bilde-nedskalertjpg.jpg" alt="Fra fiskekonkurransen i 2011" title="Fra fiskekonkurransen i 2011" width="400" height="267" class="alignleft size-full wp-image-672" /></a>Det blir stangfiske fra moloen og egen barnekonkurranse fra flytebrygga. Premiering for størst fisk, størst antall kg og flest antall stk. Premiering for barn kl. 16:30 på moloen. Alle premieres. Premiering for voksne på festen om kvelden. Salg av pølser og brus, vafler og kaffe, samt sluker. <div style="clear: left; border: 1px dashed gray; padding: 1em;"> Fest på Hovden samfunnshus kl. 21 – 02. Musikk: «Mister West», Steinar Aarsnes, Andøya. CC. Salg av øl/vin og snacks. </div> VEL MØTT — SKITT FISKE! And the resulting HTML served to a browser (only the relevant first part): <div style="float: right;"><a href="http://www.reginedagan.no/?attachment_id=671"><img src="http://www.reginedagan.no/wp-content/uploads/2012/06/fiskekonkurranse-2011-bilde-3-nedskalert.jpg" alt="Fra fiskekonkurransen i 2011" title="Fra fiskekonkurransen i 2011" class="size-full wp-image-671" height="242" width="200"></a></div> <p>Fiskekonkurranse i Hovden!</p></h1> <div style="background-color: rgb(250, 240, 240); clear: none;"> <table style="clear: none;" width="99%"> <tbody><tr style="clear: none;"> <td style="text-align: left; clear: none;">Dato:</td> <td style="text-align: left; clear: none;">Lørdag 21.juli</td> </tr> The able to reproduce the effect with simpler code by setting clear: right on the table. However, I'm unable to reproduce the effect with default styling or with clear: none (as above). So it seems maybe it's something Wordpress does, or maybe it's something the theme thing or whatever it is does – but it's very similar to what others have observed, so there is strong indication that it's also a quirk in IE. Help?

Read the article

How to Upload a file from client to server using OFBIZ?

- by SIVAKUMAR.J

I'm new to ofbiz so try to keep your answer as simple as possibly. If you can give examples that would be kind. My problem is I created a project inside the ofbiz/hot-deploy folder namely productionmgntSystem. Inside the folder ofbiz\hot-deploy\productionmgntSystem\webapp\productionmgntSystem I created a file app_details_1.ftl. The following are the code of this file <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Insert title here</title> <script TYPE="TEXT/JAVASCRIPT" language=""JAVASCRIPT"> function uploadFile() { //alert("Before calling upload.jsp"); window.location='<@ofbizUrl>testing_service1</@ofbizUrl>' } </script> </head>  <form action="<@ofbizUrl>logout1</@ofbizUrl>" enctype="multipart/form-data" name="app_details_frm"> <center style="height: 299px; "> <table border="0" style="height: 177px; width: 788px"> <tr style="height: 115px; "> <td style="width: 103px; "> <td style="width: 413px; "><h1>APPLICATION DETAILS</h1> <td style="width: 55px; "> </tr> <tr> <td style="width: 125px; ">Application name : </td> <td> <input name="app_name_txt" id="txt_1" value=" " /> </td> </tr> <tr> <td style="width: 125px; ">Excell sheet         : </td> <td> <input type="file" name="filename"/> </td> </tr> <tr> <td>  <input type="submit" name="logout_cmd" value="logout"/> </td> <td>  <input type="button" name="upload1_cmd" value="Upload" onclick="uploadFile()"/> </td> </tr> </table> </center> </form> </html> the following coding is present in the file ofbiz\hot-deploy\productionmgntSystem\webapp\productionmgntSystem\WEB-INF\controller.xml ...... ....... ........ <request-map uri="testing_service1"> <security https="true" auth="true"/> <event type="java" path="org.ofbiz.productionmgntSystem.web_app_req.WebServices1" invoke="testingService"/> <response name="ok" type="view" value="ok_view"/> <response name="exception" type="view" value="exception_view"/> </request-map> .......... ............ .......... <view-map name="ok_view" type="ftl" page="ok_view.ftl"/> <view-map name="exception_view" type="ftl" page="exception_view.ftl"/> ................ ............. ............. The following are the coding present in the file ofbiz\hot-deploy\productionmgntSystem\src\org\ofbiz\productionmgntSystem\web_app_req\WebServices1.java package org.ofbiz.productionmgntSystem.web_app_req; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.DataInputStream; import java.io.FileOutputStream; import java.io.IOException; public class WebServices1 { public static String testingService(HttpServletRequest request, HttpServletResponse response) { //int i=0; String result="ok"; System.out.println("\n\n\t*************************************\n\tInside WebServices1.testingService(HttpServletRequest request, HttpServletResponse response)- Start"); String contentType=request.getContentType(); System.out.println("\n\n\t*************************************\n\tInside WebServices1.testingService(HttpServletRequest request, HttpServletResponse response)- contentType : "+contentType); String str=new String(); // response.setContentType("text/html"); //PrintWriter writer; if ((contentType != null) && (contentType.indexOf("multipart/form-data") >= 0)) { System.out.println("\n\n\t**********************************\n\tInside WebServices1.testingService(HttpServletRequest request, HttpServletResponse response) after if (contentType != null)"); try { // writer=response.getWriter(); System.out.println("\n\n\t**********************************\n\tInside WebServices1.testingService(HttpServletRequest request, HttpServletResponse response) - try Start"); DataInputStream in = new DataInputStream(request.getInputStream()); int formDataLength = request.getContentLength(); byte dataBytes[] = new byte[formDataLength]; int byteRead = 0; int totalBytesRead = 0; //this loop converting the uploaded file into byte code while (totalBytesRead < formDataLength) { byteRead = in.read(dataBytes, totalBytesRead,formDataLength); totalBytesRead += byteRead; } String file = new String(dataBytes); //for saving the file name String saveFile = file.substring(file.indexOf("filename=\"") + 10); saveFile = saveFile.substring(0, saveFile.indexOf("\n")); saveFile = saveFile.substring(saveFile.lastIndexOf("\\")+ 1,saveFile.indexOf("\"")); int lastIndex = contentType.lastIndexOf("="); String boundary = contentType.substring(lastIndex + 1,contentType.length()); int pos; //extracting the index of file pos = file.indexOf("filename=\""); pos = file.indexOf("\n", pos) + 1; pos = file.indexOf("\n", pos) + 1; pos = file.indexOf("\n", pos) + 1; int boundaryLocation = file.indexOf(boundary, pos) - 4; int startPos = ((file.substring(0, pos)).getBytes()).length; int endPos = ((file.substring(0, boundaryLocation)).getBytes()).length; //creating a new file with the same name and writing the content in new file FileOutputStream fileOut = new FileOutputStream("/"+saveFile); fileOut.write(dataBytes, startPos, (endPos - startPos)); fileOut.flush(); fileOut.close(); System.out.println("\n\n\t**********************************\n\tInside WebServices1.testingService(HttpServletRequest request, HttpServletResponse response) - try End"); } catch(IOException ioe) { System.out.println("\n\n\t*********************************\n\tInside WebServices1.testingService(HttpServletRequest request, HttpServletResponse response) - Catch IOException"); //ioe.printStackTrace(); return("exception"); } catch(Exception ex) { System.out.println("\n\n\t*********************************\n\tInside WebServices1.testingService(HttpServletRequest request, HttpServletResponse response) - Catch Exception"); return("exception"); } } else { System.out.println("\n\n\t********************************\n\tInside WebServices1.testingService(HttpServletRequest request, HttpServletResponse response) else part"); result="exception"; } System.out.println("\n\n\t*************************************\n\tInside WebServices1.testingService(HttpServletRequest request, HttpServletResponse response)- End"); return(result); } } I want to upload a file to the server. The file is get from user " tag in the "app_details_1.ftl" file & it is updated into the server by using the method "testingService(HttpServletRequest request, HttpServletResponse response)" in the class "WebServices1". But the file is not uploaded. Give me a good solution for uploading a file to the server.

Read the article

Pixel Perfect Collision Detection in Cocos2dx

- by Happybirthday

I am trying to port the pixel perfect collision detection in Cocos2d-x the original version was made for Cocos2D and can be found here: http://www.cocos2d-iphone.org/forums/topic/pixel-perfect-collision-detection-using-color-blending/ Here is my code for the Cocos2d-x version bool CollisionDetection::areTheSpritesColliding(cocos2d::CCSprite *spr1, cocos2d::CCSprite *spr2, bool pp, CCRenderTexture* _rt) { bool isColliding = false; CCRect intersection; CCRect r1 = spr1-boundingBox(); CCRect r2 = spr2-boundingBox(); intersection = CCRectMake(fmax(r1.getMinX(),r2.getMinX()), fmax( r1.getMinY(), r2.getMinY()) ,0,0); intersection.size.width = fmin(r1.getMaxX(), r2.getMaxX() - intersection.getMinX()); intersection.size.height = fmin(r1.getMaxY(), r2.getMaxY() - intersection.getMinY()); // Look for simple bounding box collision if ( (intersection.size.width0) && (intersection.size.height0) ) { // If we're not checking for pixel perfect collisions, return true if (!pp) { return true; } unsigned int x = intersection.origin.x; unsigned int y = intersection.origin.y; unsigned int w = intersection.size.width; unsigned int h = intersection.size.height; unsigned int numPixels = w * h; //CCLog("Intersection X and Y %d, %d", x, y); //CCLog("Number of pixels %d", numPixels); // Draw into the RenderTexture _rt-beginWithClear( 0, 0, 0, 0); // Render both sprites: first one in RED and second one in GREEN glColorMask(1, 0, 0, 1); spr1-visit(); glColorMask(0, 1, 0, 1); spr2-visit(); glColorMask(1, 1, 1, 1); // Get color values of intersection area ccColor4B *buffer = (ccColor4B *)malloc( sizeof(ccColor4B) * numPixels ); glReadPixels(x, y, w, h, GL_RGBA, GL_UNSIGNED_BYTE, buffer); _rt-end(); // Read buffer unsigned int step = 1; for(unsigned int i=0; i 0 && color.g 0) { isColliding = true; break; } } // Free buffer memory free(buffer); } return isColliding; } My code is working perfectly if I send the "pp" parameter as false. That is if I do only a bounding box collision but I am not able to get it working correctly for the case when I need Pixel Perfect collision. I think the opengl masking code is not working as I intended. Here is the code for "_rt" _rt = CCRenderTexture::create(visibleSize.width, visibleSize.height); _rt-setPosition(ccp(origin.x + visibleSize.width * 0.5f, origin.y + visibleSize.height * 0.5f)); this-addChild(_rt, 1000000); _rt-setVisible(true); //For testing I think I am making a mistake with the implementation of this CCRenderTexture Can anyone guide me with what I am doing wrong ? Thank you for your time :)

Read the article

Using Lightbox with _Screen

Although, I have to admit that I discovered Bernard Bout's ideas and concepts about implementing a lightbox in Visual FoxPro quite a while ago, there was no "spare" time in active projects that allowed me to have a closer look into his solution(s). Luckily, these days I received a demand to focus a little bit more on this. This article describes the steps about how to integrate and make use of Bernard's lightbox class in combination with _Screen in Visual FoxPro. The requirement in this project was to be able to visually lock the whole application (_Screen area) and guide the user to an information that should not be ignored easily. Depending on the importance any current user activity should be interrupted and focus put onto the notification. Getting the "meat", eh, source code Please check out Bernard's blog on Foxite directly in order to get the latest and greatest version. As time of writing this article I use version 6.0 as described in this blog entry: The Fastest Lightbox Ever The Lightbox class is sub-classed from the imgCanvas class from the GdiPlusX project on VFPx and therefore you need to have the source code of GdiPlusX as well, and integrate it into your development environment. The version I use is available here: Release GDIPlusX 1.20 As soon as you open the bbGdiLightbox class the first it, VFP might ask you to update the reference to the gdiplusx.vcx. As we have the sources, no problem and you have access to Bernard's code. The class itself is pretty easy to understand, some properties that you do not need to change and three methods: Setup(), ShowLightbox() and BeforeDraw() The challenge - _Screen or not? Reading Bernard's article about the fastest lightbox ever, he states the following: "The class will only work on a form. It will not support any other containers" Really? And what about _Screen? Isn't that a form class, too? Yes, of course it is but nonetheless trying to use _Screen directly will fail. Well, let's have look at the code to see why: WITH This .Left = 0 .Top = 0 .Height = ThisForm.Height .Width = ThisForm.Width .ZOrder(0) .Visible = .F.ENDWITH During the setup of the lightbox as well as while capturing the image as replacement for your forms and controls, the object reference Thisform is used. Which is a little bit restrictive to my opinion but let's continue. The second issue lies in the method ShowLightbox() and introduced by the call of .Bitmap.FromScreen(): Lparameters tlVisiblilty* tlVisiblilty - show or hide (T/F)* grab a screen dump with controlsIF tlVisiblilty Local loCaptureBmp As xfcBitmap Local lnTitleHeight, lnLeftBorder, lnTopBorder, lcImage, loImage lnTitleHeight = IIF(ThisForm.TitleBar = 1,Sysmetric(9),0) lnLeftBorder = IIF(ThisForm.BorderStyle < 2,0,Sysmetric(3)) lnTopBorder = IIF(ThisForm.BorderStyle < 2,0,Sysmetric(4)) With _Screen.System.Drawing loCaptureBmp = .Bitmap.FromScreen(ThisForm.HWnd,; lnLeftBorder,; lnTopBorder+lnTitleHeight,; ThisForm.Width ,; ThisForm.Height) ENDWITH * save it to a property This.capturebmp = loCaptureBmp ThisForm.SetAll("Visible",.F.) This.DraW() This.Visible = .T.ELSE ThisForm.SetAll("Visible",.T.) This.Visible = .F.ENDIF My first trials in using the class ended in an exception - GdiPlusError:OutOfMemory - thrown by the Bitmap object. Frankly speaking, this happened mainly because of my lack of knowledge about GdiPlusX. After reading some documentation, especially about the FromScreen() method I experimented a little bit. Capturing the visible area of _Screen actually was not the real problem but the dimensions I specified for the bitmap. The modifications - step by step First of all, it is to get rid of restrictive object references on Thisform and to change them into either This.Parent or more generic into This.oForm (even better: This.oControl). The Lightbox.Setup() method now sets the necessary object reference like so: *====================================================================* Initial setup* Default value: This.oControl = "This.Parent"* Alternative: This.oControl = "_Screen"*====================================================================With This .oControl = Evaluate(.oControl) If Vartype(.oControl) == T_OBJECT .Anchor = 0 .Left = 0 .Top = 0 .Width = .oControl.Width .Height = .oControl.Height .Anchor = 15 .ZOrder(0) .Visible = .F. EndIfEndwith Also, based on other developers' comments in Bernard articles on his lightbox concept and evolution I found the source code to handle the differences between a form and _Screen and goes into Lightbox.ShowLightbox() like this: *====================================================================* tlVisibility - show or hide (T/F)* grab a screen dump with controls*====================================================================Lparameters tlVisibility Local loControl m.loControl = This.oControl If m.tlVisibility Local loCaptureBmp As xfcBitmap Local lnTitleHeight, lnLeftBorder, lnTopBorder, lcImage, loImage lnTitleHeight = Iif(m.loControl.TitleBar = 1,Sysmetric(9),0) lnLeftBorder = Iif(m.loControl.BorderStyle < 2,0,Sysmetric(3)) lnTopBorder = Iif(m.loControl.BorderStyle < 2,0,Sysmetric(4)) With _Screen.System.Drawing If Upper(m.loControl.Name) == Upper("Screen") loCaptureBmp = .Bitmap.FromScreen(m.loControl.HWnd) Else loCaptureBmp = .Bitmap.FromScreen(m.loControl.HWnd,; lnLeftBorder,; lnTopBorder+lnTitleHeight,; m.loControl.Width ,; m.loControl.Height) EndIf Endwith * save it to a property This.CaptureBmp = loCaptureBmp m.loControl.SetAll("Visible",.F.) This.Draw() This.Visible = .T. Else This.CaptureBmp = .Null. m.loControl.SetAll("Visible",.T.) This.Visible = .F. Endif {loadposition content_adsense} Are we done? Almost... Although, Bernard says it clearly in his article: "Just drop the class on a form and call it as shown." It did not come clear to my mind in the first place with _Screen, but, yeah, he is right. Dropping the class on a form provides a permanent link between those two classes, it creates a valid This.Parent object reference. Bearing in mind that the lightbox class can not be "dropped" on the _Screen, we have to create the same type of binding during runtime execution like so: *====================================================================* Create global lightbox component*==================================================================== Local llOk, loException As Exception m.llOk = .F. m.loException = .Null. If Not Vartype(_Screen.Lightbox) == "O" Try _Screen.AddObject("Lightbox", "bbGdiLightbox") Catch To m.loException Assert .F. Message m.loException.Message EndTry EndIf m.llOk = (Vartype(_Screen.Lightbox) == "O")Return m.llOk Through runtime instantiation we create a valid binding to This.Parent in the lightbox object and the code works as expected with _Screen. Ease your life: Use properties instead of constants Having a closer look at the BeforeDraw() method might wet your appetite to simplify the code a little bit. Looking at the sample screenshots in Bernard's article you see several forms in different colors. This got me to modify the code like so: *====================================================================* Apply the actual lightbox effect on the captured bitmap.*====================================================================If Vartype(This.CaptureBmp) == T_OBJECT Local loGfx As xfcGraphics loGfx = This.oGfx With _Screen.System.Drawing loGfx.DrawImage(This.CaptureBmp,This.Rectangle,This.Rectangle,.GraphicsUnit.Pixel) * change the colours as needed here * possible colours are (220,128,0,0),(220,0,0,128) etc. loBrush = .SolidBrush.New(.Color.FromArgb( ; This.Opacity, .Color.FromRGB(This.BorderColor))) loGfx.FillRectangle(loBrush,This.Rectangle) EndwithEndif Create an additional property Opacity to specify the grade of translucency you would like to have without the need to change the code in each instance of the class. This way you only need to change the values of Opacity and BorderColor to tweak the appearance of your lightbox. This could be quite helpful to signalize different levels of importance (ie. green, yellow, orange, red, etc...) of notifications to the users of the application. Final thoughts Using the lightbox concept in combination with _Screen instead of forms is possible. Already Jim Wiggins comments in Bernard's article to loop through the _Screen.Forms collection in order to cascade the lightbox visibility to all active forms. Good idea. But honestly, I believe that instead of looping all forms one could use _Screen.SetAll("ShowLightbox", .T./.F., "Form") with Form.ShowLightbox_Access method to gain more speed. The modifications described above might provide even more features to your applications while consuming less resources and performance. Additionally, the restrictions to capture only forms does not exist anymore. Using _Screen you are able to capture and cover anything. The captured area of _Screen does not include any toolbars, docked windows, or menus. Therefore, it is advised to take this concept on a higher level and to combine it with additional classes that handle the state of toolbars, docked windows and menus. Which I did for the customer's project.

Read the article

How to block the ASP.NET page while ajax UpdateProgress is being displayed.

Step 1: Copy the following styles to your aspx page. <style type="text/css"> .hide { display: none; } .show { display: inherit; } .progressBackgroundFilter { position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; overflow: hidden; padding: 0; margin: 0; background-color: #000; filter: alpha(opacity=50); opacity: 0.5; z-index: 1000; } .processMessage { position: absolute; font-family:Verdana; font-size:12px; font-weight:normal; color:#000066; top: 30%; left: 43%; padding: 10px; width: 18%; z-index: 1001; background-color: #fff; } </style> Step 2: Put the divs as shown below in UpdateProgress control. <asp:UpdateProgress ID="updPrgsBaselineTab" runat="server"> <ProgressTemplate> <div id="progressBackgroundFilter" class="progressBackgroundFilter"> </div> <div id="processMessage" class="processMessage"> <table width="100%"> <tr style="width: 100%"> <td style="width: 100%"> Please Wait.......... </td> </tr> <tr style="width: 100%"> <td style="width: 100%" align="center"> <img src="../Images/Update_Progress.gif" /> </td> </tr> </table> </div> </ProgressTemplate> </asp:UpdateProgress> span.fullpost {display:none;}

Read the article

How to display values from another website to an new html page?

- by user3098728

How to display the value in a new html file from different website? This an example field of values that need to display into new html file and I want to display the said values in the input box (Contract ID) of this page JSFiddle. I have 2 JS code that would display that values, but unfortunately its not working and I dont know how to display that value in html input box. Please help me. Thank you I want to display the said value in this input box: Here the JS file to read the values: function scanLapVerification() { try { var page_title = "Title"; var el = getElement(document, "class", "view-operator-verification-title", ""); if (!el || el.length == 0) return; if (el[0].innerText != page_title) return; var page_title = ''; var el = getElement(document, "class", "workflowActivityDetailPanel", ""); if (el && el.length > 0) { var eltr = getElement(el[0], "tag", "tr", ""); if (eltr && eltr.length > 0) { //Read Contract ID var contractId = { CI: { id: null } }; var con_id = null; for (var i = 0; i < eltr.length; i++) { tr_text = eltr[i].innerText; if (tr_text.substr(0, "Contract ID".length) == "Contract ID") con_id = "CI"; if (con_id && tr_text.substr(0, "Contract ID".length) == "Contract ID") { contractId[con_id].id = tr_text.substr("Contract ID".length + 1, tr_text.length - "Contract ID".length - 1); } } var contract_id = contractId.CI.id; return { content: "cid_check", con_id: con_id }; } return { status: "KO" }; } catch (e) { alert("Exception: scanLapVerification\n" + e.Description); return { status: "KO", message: e }; } }; And here's the 2nd JS that display to a new html page: function scanLapVerification() { chrome.tabs.sendRequest(tabLapVerification, { method: "scanLapVerification" }, function (response) { msgbox("receiveResponse: scanLapVerification " + jsonToString(response, "JSON")); //maintaining state in the background if (response.data.content == "cid_check") { //Popup window features var popupWindow = null; var name; var width = 550; var height = 200; var left = parseInt((screen.availWidth / 2) - (width / 2)); var top = parseInt((screen.availHeight / 2) - (height / 2)); var windowFeatures = "width=" + width + ",height=" + height + ",left=" + left + ",top=" + top + "screenX=" + left + ",screenY=" + top; //Input new address with popup window if (confirm("Does the client has new address?") == true) { popupWindow = window.open('/htmlname.htm', "title", windowFeatures + encodeURIComponent(response.data.contract_id)); popupWindow.focus(); } else { name = ""; } }); }

Read the article

How do I calculate the boundary of the game window after transforming the view?

- by Cypher

My Camera class handles zoom, rotation, and of course panning. It's invoked through SpriteBatch.Begin, like so many other XNA 2D camera classes. It calculates the view Matrix like so: public Matrix GetViewMatrix() { return Matrix.Identity * Matrix.CreateTranslation(new Vector3(-this.Spatial.Position, 0.0f)) * Matrix.CreateTranslation(-( this.viewport.Width / 2 ), -( this.viewport.Height / 2 ), 0.0f) * Matrix.CreateRotationZ(this.Rotation) * Matrix.CreateScale(this.Scale, this.Scale, 1.0f) * Matrix.CreateTranslation(this.viewport.Width * 0.5f, this.viewport.Height * 0.5f, 0.0f); } I was having a minor issue with performance, which after doing some profiling, led me to apply a culling feature to my rendering system. It used to, before I implemented the camera's zoom feature, simply grab the camera's boundaries and cull any game objects that did not intersect with the camera. However, after giving the camera the ability to zoom, that no longer works. The reason why is visible in the screenshot below. The navy blue rectangle represents the camera's boundaries when zoomed out all the way (Camera.Scale = 0.5f). So, when zoomed out, game objects are culled before they reach the boundaries of the window. The camera's width and height are determined by the Viewport properties of the same name (maybe this is my mistake? I wasn't expecting the camera to "resize" like this). What I'm trying to calculate is a Rectangle that defines the boundaries of the screen, as indicated by my awesome blue arrows, even after the camera is rotated, scaled, or panned. Here is how I've more recently found out how not to do it: public Rectangle CullingRegion { get { Rectangle region = Rectangle.Empty; Vector2 size = this.Spatial.Size; size *= 1 / this.Scale; Vector2 position = this.Spatial.Position; position = Vector2.Transform(position, this.Inverse); region.X = (int)position.X; region.Y = (int)position.Y; region.Width = (int)size.X; region.Height = (int)size.Y; return region; } } It seems to calculate the right size, but when I render this region, it moves around which will obviously cause problems. It needs to be "static", so to speak. It's also obscenely slow, which causes more of a problem than it solves. What am I missing?

Read the article

Using JQuery to set create a flexible 3 column layout with Divs

- by Chris Hammond

This evening I was working on creating a Full Width skin for http://www.sccaforums.com/ , the current skin is at a fixed width, which doesn’t work very well for an active Forum when you have a browser with a high resolution. (The site runs on DotNetNuke , so this post will feature examples for DotNetNuke, but the code is applicable to any HTML pages) Basically I wanted a three column layout, and depending on if there was content in the Left and Right columns, I wanted them to not display at all,...(read more)

Read the article

SDL_BlitSurface segmentation fault (surfaces aren't null)

- by Trollkemada

My app is crashing on SDL_BlitSurface() and i can't figure out why. I think it has something to do with my static object. If you read the code you'll why I think so. This happens when the limits of the map are reached, i.e. (iwidth || jheight). This is the code: Map.cpp (this render) Tile const * Map::getTyle(int i, int j) const { if (i >= 0 && j >= 0 && i < width && j < height) { return data[i][j]; } else { return &Tile::ERROR_TYLE; // This makes SDL_BlitSurface (called later) crash //return new Tile(TileType::ERROR); // This works with not problem (but is memory leak, of course) } } void Map::render(int x, int y, int width, int height) const { //DEBUG("(Rendering...) x: "<<x<<", y: "<<y<<", width: "<<width<<", height: "<<height); int firstI = x / TileType::PIXEL_PER_TILE; int firstJ = y / TileType::PIXEL_PER_TILE; int lastI = (x+width) / TileType::PIXEL_PER_TILE; int lastJ = (y+height) / TileType::PIXEL_PER_TILE; // The previous integer division rounds down when dealing with positive values, but it rounds up // negative values. This is a fix for that (We need those values always rounded down) if (firstI < 0) { firstI--; } if (firstJ < 0) { firstJ--; } const int firstX = x; const int firstY = y; SDL_Rect srcRect; SDL_Rect dstRect; for (int i=firstI; i <= lastI; i++) { for (int j=firstJ; j <= lastJ; j++) { if (i*TileType::PIXEL_PER_TILE < x) { srcRect.x = x % TileType::PIXEL_PER_TILE; srcRect.w = TileType::PIXEL_PER_TILE - (x % TileType::PIXEL_PER_TILE); dstRect.x = i*TileType::PIXEL_PER_TILE + (x % TileType::PIXEL_PER_TILE) - firstX; } else if (i*TileType::PIXEL_PER_TILE >= x + width) { srcRect.x = 0; srcRect.w = x % TileType::PIXEL_PER_TILE; dstRect.x = i*TileType::PIXEL_PER_TILE - firstX; } else { srcRect.x = 0; srcRect.w = TileType::PIXEL_PER_TILE; dstRect.x = i*TileType::PIXEL_PER_TILE - firstX; } if (j*TileType::PIXEL_PER_TILE < y) { srcRect.y = 0; srcRect.h = TileType::PIXEL_PER_TILE - (y % TileType::PIXEL_PER_TILE); dstRect.y = j*TileType::PIXEL_PER_TILE + (y % TileType::PIXEL_PER_TILE) - firstY; } else if (j*TileType::PIXEL_PER_TILE >= y + height) { srcRect.y = y % TileType::PIXEL_PER_TILE; srcRect.h = y % TileType::PIXEL_PER_TILE; dstRect.y = j*TileType::PIXEL_PER_TILE - firstY; } else { srcRect.y = 0; srcRect.h = TileType::PIXEL_PER_TILE; dstRect.y = j*TileType::PIXEL_PER_TILE - firstY; } SDL::YtoSDL(dstRect.y, srcRect.h); SDL_BlitSurface(getTyle(i,j)->getType()->getSurface(), &srcRect, SDL::getScreen(), &dstRect); // <-- Crash HERE /*DEBUG("i = "<<i<<", j = "<<j); DEBUG("srcRect.x = "<<srcRect.x<<", srcRect.y = "<<srcRect.y<<", srcRect.w = "<<srcRect.w<<", srcRect.h = "<<srcRect.h); DEBUG("dstRect.x = "<<dstRect.x<<", dstRect.y = "<<dstRect.y);*/ } } } Tile.h #ifndef TILE_H #define TILE_H #include "TileType.h" class Tile { private: TileType const * type; public: static const Tile ERROR_TYLE; Tile(TileType const * t); ~Tile(); TileType const * getType() const; }; #endif Tile.cpp #include "Tile.h" const Tile Tile::ERROR_TYLE(TileType::ERROR); Tile::Tile(TileType const * t) : type(t) {} Tile::~Tile() {} TileType const * Tile::getType() const { return type; } TileType.h #ifndef TILETYPE_H #define TILETYPE_H #include "SDL.h" #include "DEBUG.h" class TileType { protected: TileType(); ~TileType(); public: static const int PIXEL_PER_TILE = 30; static const TileType * ERROR; static const TileType * AIR; static const TileType * SOLID; virtual SDL_Surface * getSurface() const = 0; virtual bool isSolid(int x, int y) const = 0; }; #endif ErrorTyle.h #ifndef ERRORTILE_H #define ERRORTILE_H #include "TileType.h" class ErrorTile : public TileType { friend class TileType; private: ErrorTile(); mutable SDL_Surface * surface; static const char * FILE_PATH; public: SDL_Surface * getSurface() const; bool isSolid(int x, int y) const ; }; #endif ErrorTyle.cpp (The surface can't be loaded when building the object, because it is a static object and SDL_Init() needs to be called first) #include "ErrorTile.h" const char * ErrorTile::FILE_PATH = ("C:\\error.bmp"); ErrorTile::ErrorTile() : TileType(), surface(NULL) {} SDL_Surface * ErrorTile::getSurface() const { if (surface == NULL) { if (SDL::isOn()) { surface = SDL::loadAndOptimice(ErrorTile::FILE_PATH); if (surface->w != TileType::PIXEL_PER_TILE || surface->h != TileType::PIXEL_PER_TILE) { WARNING("Bad tile surface size"); } } else { ERROR("Trying to load a surface, but SDL is not on"); } } if (surface == NULL) { // This if doesn't get called, so surface != NULL ERROR("WTF? Can't load surface :\\"); } return surface; } bool ErrorTile::isSolid(int x, int y) const { return true; }

Read the article

Loading levels from .txt or .XML for XNA

- by Dave Voyles

I'm attemptin to add multiple levels to my pong game. I'd like to simply exchange a few elements with each level, nothing crazy. Just the background texture, the color of the AI paddle (the one on the right side), and the music. It seems that the best way to go about this is by utilizing the StreamReader to read and write the files from XML. If there is a better, or more efficient alternative way then I'm all for it. In looking over the XNA Starter Platformer Kit provided by MS it seems that they've done it in this manner as well. I'm perplexed by a few things, however, namely parts within the Level class which aren't commented. /// <summary> /// Iterates over every tile in the structure file and loads its /// appearance and behavior. This method also validates that the /// file is well-formed with a player start point, exit, etc. /// </summary> /// <param name="fileStream"> /// A stream containing the tile data. /// </param> private void LoadTiles(Stream fileStream) { // Load the level and ensure all of the lines are the same length. int width; List<string> lines = new List<string>(); using (StreamReader reader = new StreamReader(fileStream)) { string line = reader.ReadLine(); width = line.Length; while (line != null) { lines.Add(line); if (line.Length != width) throw new Exception(String.Format("The length of line {0} is different from all preceeding lines.", lines.Count)); line = reader.ReadLine(); } } What does width = line.Length mean exactly? I mean I know how it reads the line, but what difference does it make if one line is longer than any of the others? Finally, their levels are simply text files that look like this: .................... .................... .................... .................... .................... .................... .................... .........GGG........ .........###........ .................... ....GGG.......GGG... ....###.......###... .................... .1................X. #################### It can't be that easy..... Can it?

Read the article

Keypress detection wont work after seemingly unrelated code change

- by LukeZaz

I'm trying to have the Enter key cause a new 'map' to generate for my game, but for whatever reason after implementing full-screen in it the input check won't work anymore. I tried removing the new code and only pressing one key at a time, but it still won't work. Here's the check code and the method it uses, along with the newMap method: public class Game1 : Microsoft.Xna.Framework.Game { // ... protected override void Update(GameTime gameTime) { // ... // Check if Enter was pressed - if so, generate a new map if (CheckInput(Keys.Enter, 1)) { blocks = newMap(map, blocks, console); } // ... } // Method: Checks if a key is/was pressed public bool CheckInput(Keys key, int checkType) { // Get current keyboard state KeyboardState newState = Keyboard.GetState(); bool retType = false; // Return type if (checkType == 0) { // Check Type: Is key currently down? if (newState.IsKeyDown(key)) { retType = true; } else { retType = false; } } else if (checkType == 1) { // Check Type: Was the key pressed? if (newState.IsKeyDown(key)) { if (!oldState.IsKeyDown(key)) { // Key was just pressed retType = true; } else { // Key was already pressed, return false retType = false; } } } // Save keyboard state oldState = newState; // Return result if (retType == true) { return true; } else { return false; } } // Method: Generate a new map public List<Block> newMap(Map map, List<Block> blockList, Console console) { // Create new map block coordinates List<Vector2> positions = new List<Vector2>(); positions = map.generateMap(console); // Clear list and reallocate memory previously used up by it blockList.Clear(); blockList.TrimExcess(); // Add new blocks to the list using positions created by generateMap() foreach (Vector2 pos in positions) { blockList.Add(new Block() { Position = pos, Texture = dirtTex }); } // Return modified list return blockList; } // ... } and the generateMap code: // Generate a list of Vector2 positions for blocks public List<Vector2> generateMap(Console console, int method = 0) { ScreenTileWidth = gDevice.Viewport.Width / 16; ScreenTileHeight = gDevice.Viewport.Height / 16; maxHeight = gDevice.Viewport.Height; List<Vector2> blockLocations = new List<Vector2>(); if (useScreenSize == true) { Width = ScreenTileWidth; Height = ScreenTileHeight; } else { maxHeight = Height; } int startHeight = -500; // For debugging purposes, the startHeight is set to an // hopefully-unreachable value - if it returns this, something is wrong // Methods of land generation /// <summary> /// Third version land generation /// Generates a base land height as the second version does /// but also generates a 'max change' value which determines how much /// the land can raise or lower by which it now does by a random amount /// during generation /// </summary> if (method == 0) { // Get the land height startHeight = rnd.Next(1, maxHeight); int maxChange = rnd.Next(1, 5); // Amount ground will raise/lower by int curHeight = startHeight; for (int w = 0; w < Width; w++) { // Run a chance to lower/raise ground level int changeBy = rnd.Next(1, maxChange); int doChange = rnd.Next(0, 3); if (doChange == 1 && !(curHeight <= (1 + maxChange))) { curHeight = curHeight - changeBy; } else if (doChange == 2 && !(curHeight >= (29 - maxChange))) { curHeight = curHeight + changeBy; } for (int h = curHeight; h < Height; h++) { // Location variables float x = w * 16; float y = h * 16; blockLocations.Add(new Vector2(x, y)); } } console.newMsg("[INFO] Cur, height change maximum: " + maxChange.ToString()); } /// <summary> /// Second version land generator /// Generates a solid mass of land starting at a random height /// derived from either screen height or provided height value /// </summary> else if (method == 1) { // Get the land height startHeight = rnd.Next(0, 30); for (int w = 0; w < Width; w++) { for (int h = startHeight; h < ScreenTileHeight; h++) { // Location variables float x = w * 16; float y = h * 16; // Add a tile at set location blockLocations.Add(new Vector2(x, y)); } } } /// <summary> /// First version land generator /// Generates land completely randomly either across screen or /// in a box set by Width and Height values /// </summary> else { // For each tile in the map... for (int w = 0; w < Width; w++) { for (int h = 0; h < Height; h++) { // Location variables float x = w * 16; float y = h * 16; // ...decide whether or not to place a tile... if (rnd.Next(0, 2) == 1) { // ...and if so, add a tile at that location. blockLocations.Add(new Vector2(x, y)); } } } } console.newMsg("[INFO] Cur, base height: " + startHeight.ToString()); return blockLocations; } I never touched any of the above code for this when it broke - changing keys won't seem to fix it. Despite this, I have camera movement set inside another Game1 method that uses WASD and works perfectly. All I did was add a few lines of code here: private int BackBufferWidth = 1280; // Added these variables private int BackBufferHeight = 800; public Game1() { graphics = new GraphicsDeviceManager(this); graphics.PreferredBackBufferWidth = BackBufferWidth; // and this graphics.PreferredBackBufferHeight = BackBufferHeight; // this Content.RootDirectory = "Content"; this.graphics.IsFullScreen = true; // and this } When I try adding a console line to be printed in the event the key is pressed, it seems that the If is never even triggered despite the correct key being pressed.

Read the article

Precise Touch Screen Dragging Issue: Trouble Aligning with the Finger due to Different Screen Resolution

- by David Dimalanta

Please, I need your help. I'm trying to make a game that will drag-n-drop a sprite/image while my finger follows precisely with the image without being offset. When I'm trying on a 900x1280 (in X [900] and Y [1280]) screen resolution of the Google Nexus 7 tablet, it follows precisely. However, if I try testing on a phone smaller than 900x1280, my finger and the image won't aligned properly and correctly except it still dragging. This is the code I used for making a sprite dragging with my finger under touchDragged(): x = ((screenX + Gdx.input.getX())/2) - (fruit.width/2); y = ((camera_2.viewportHeight * multiplier) - ((screenY + Gdx.input.getY())/2) - (fruit.width/2)); This code above will make the finger and the image/sprite stays together in place while dragging but only works on 900x1280. You'll be wondering there's camera_2.viewportHeight in my code. Here are for two reasons: to prevent inverted drag (e.g. when you swipe with your finger downwards, the sprite moves upward instead) and baseline for reading coordinate...I think. Now when I'm adding another orthographic camera named camera_1 and changing its setting, I recently used it for adjusting the falling object by meter per pixel. Also, it seems effective independently for smartphones that has smaller resolution and this is what I used here: show() camera_1 = new OrthographicCamera(); camera_1.viewportHeight = 280; // --> I set it to a smaller view port height so that the object would fall faster, decreasing the chance of drag force. camera_1.viewportWidth = 196; // --> Make it proportion to the original screen view size as possible. camera_1.position.set(camera_1.viewportWidth * 0.5f, camera_1.viewportHeight * 0.5f, 0f); camera_1.update(); touchDragged() x = ((screenX + (camera_1.viewportWidth/Gdx.input.getX()))/2) - (fruit.width/2); y = ((camera_1.viewportHeight * multiplier) - ((screenY + (camera_1.viewportHeight/Gdx.input.getY()))/2) - (fruit.width/2)); But the result instead of just following the image/sprite closely to my finger, it still has a space/gap between the sprite/image and the finger. It is possibly dependent on coordinates based on the screen resolution. I'm trying to drag the blueberry sprite with my finger. My expectation did not met since I want my finger and the sprite/image (blueberry) to stay close together while dragging until I release it. Here's what it looks like: I got to figure it out how to make independent on all screen sizes by just following the image/sprite closely to my finger while dragging even on most different screen sizes instead.

Search Results

Search found 10226 results on 410 pages for 'width'.

Page 71/410 | < Previous Page | 67 68 69 70 71 72 73 74 75 76 77 78 | Next Page >

- by eb_Dev

- by corymathews

- by Ajith

- by q234e

- by Jk_

- by William

- by Pranjali

- by Earlz

- by psheriff

- by Valter Minute

- by nikolaosk

- by Max

- by Tashu

- by Cheers and hth. - Alf

- by SIVAKUMAR.J

- by Happybirthday

- by user3098728

- by Cypher

- by Chris Hammond

- by Trollkemada

- by Dave Voyles

- by LukeZaz

- by David Dimalanta

< Previous Page | 67 68 69 70 71 72 73 74 75 76 77 78 | Next Page >