wpf style - Page 336 - Developer IT

CSS height problem. IE8 seems correct Firefox seems wrong. Any fix?

- by user169867

Below is a complete html page that shows the problem. The "myDiv" should be 22px in height (including the border). Item 1 should have a 1px space between its border and the divs border. In IE8 it is. In FF 3.6.2 though it is 24px and I can't understand why. Ultimately my goal is to get the same CSS to create the same result in both browsers. It's driving me crazy! Any help would be appreciated :) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title></title> <style type="text/css"> div.aclb {background:#EEF3FA; color:#666; cursor:text; padding:1px; overflow-y:auto; border:#BBC8D9 1px solid; } div.aclb:hover {border:#3399FF 1px solid;} div.aclb.focus {background:#FFF; border:#3399FF 1px solid;} div.aclb ul {padding:0; margin:0; list-style:none; display:table; vertical-align:middle; } div.aclb li {float:left; cursor:default; font-family:Arial; padding:0; margin:0;} div.aclb li.block {padding:0px 2px; height:16px; white-space:nowrap; border:solid 1px #BBD8FB; background:#f3f7fd; font-size:11px; line-height:16px;} div.aclb li.block:hover {border:solid 1px #5F8BD3; background:#E4ECF8; color:#000;} div.aclb li.input {} div.aclb input {margin:0; padding:0; height:18px; background:transparent; border:none; color:#666; overflow:hidden; resize:none; font-family:Arial; font-size:13px; outline:none;} div.aclb input:focus {margin:0; padding:0; height:18px; background:transparent; border:none; color:#22F; overflow:hidden; resize:none; font-family:Arial; font-size:13px; outline:none;} div.aclb a.d {cursor:pointer; display:block; color:#6B6B6B; width:13px; height:12px;float:right; margin:1px 0 1px 4px; border:solid 1px transparent; font-family:Verdana; font-size:11px; text-align:center; line-height:10px;} div.aclb a.d:hover { border:solid 1px #7DA2CE; background:#F7FAFD; color:#AD0B0B;} div.aclb a.d:active {border:solid 1px #497CBB; background:#BAD8E8; color:#A90909;} </style> </head> <body> <div id="myDiv" style="width:250px" class="aclb"> <ul> <li class="block"> <a class="d">x</a><span>Item 1</span> </li> <li class="input"> <input type="text" style="width:30px" maxlength="30"/> </li> </ul> </div> </body> </html>

Read the article

How can I make a jQuery UI 'draggable()' div draggable for touchscreen?

- by artlung

I have a jQuery UI draggable() that works in Firefox and Chrome. The user interface concept is basically click to create a "post-it" type item. Basically, I click or tap on div#everything (100% high and wide) that listens for clicks, and an input textarea displays. You add text, and then when you're done it saves it. You can drag this element around. That is working on normal browsers, but on an iPad I can test with I can't drag the items around. If I touch to select (it then dims slightly), I can't then drag it. It won't drag left or right at all. I can drag up or down, but I'm not dragging the individual div, I'm dragging the whole webpage. So here's the code I use to capture clicks: $('#everything').bind('click', function(e){ var elem = document.createElement('DIV'); STATE.top = e.pageY; STATE.left = e.pageX; var e = $(elem).css({ top: STATE.top, left: STATE.left }).html('<textarea></textarea>') .addClass('instance') .bind('click', function(event){ return false; }); $(this).append(e); }); And here's the code I use to "save" the note and turn the input div into just a display div: $('textarea').live('mouseleave', function(){ var val = jQuery.trim($(this).val()); STATE.content = val; if (val == '') { $(this).parent().remove(); } else { var div = $(this).parent(); div.text(val).css({ height: '30px' }); STATE.height = 30; if ( div.width() !== div[0].clientWidth || div.height () !== div[0].clientHeight ) { while (div.width() !== div[0].clientWidth || div.height () !== div[0].clientHeight) { var h = div.height() + 10; STATE.height = h; div.css({ height: (h) + 'px' }); // element just got scrollbars } } STATE.guid = uniqueID() div.addClass('savedNote').attr('id', STATE.guid).draggable({ stop: function() { var offset = $(this).offset(); STATE.guid = $(this).attr('id'); STATE.top = offset.top; STATE.left = offset.left; STATE.content = $(this).text(); STATE.height = $(this).height(); STATE.save(); } }); STATE.save(); $(this).remove(); } }); And I have this code when I load the page for saved notes: $('.savedNote').draggable({ stop: function() { STATE.guid = $(this).attr('id'); var offset = $(this).offset(); STATE.top = offset.top; STATE.left = offset.left; STATE.content = $(this).text(); STATE.height = $(this).height(); STATE.save(); } }); My STATE object handles saving the notes. Onload, this is the whole html body: <body> <div id="everything"></div> <div class="instance savedNote" id="iddd1b0969-c634-8876-75a9-b274ff87186b" style="top:134px;left:715px;height:30px;">Whatever dude</div> <div class="instance savedNote" id="id8a129f06-7d0c-3cb3-9212-0f38a8445700" style="top:131px;left:347px;height:30px;">Appointment 11:45am</div> <div class="instance savedNote" id="ide92e3d13-afe8-79d7-bc03-818d4c7a471f" style="top:144px;left:65px;height:80px;">What do you think of a board where you can add writing as much as possible?</div> <div class="instance savedNote" id="idef7fe420-4c19-cfec-36b6-272f1e9b5df5" style="top:301px;left:534px;height:30px;">This was submitted</div> <div class="instance savedNote" id="id93b3b56f-5e23-1bd1-ddc1-9be41f1efb44" style="top:390px;left:217px;height:30px;">Hello world from iPad.</div> </body> So, my question is really: how can I make this work better on iPad? I'm not set on jQuery UI, I'm wondering if this is something I'm doing wrong with jQuery UI, or jQuery, or whether there may be better frameworks for doing cross-platform/backward compatible draggable() elements that will work for touchscreen UIs. More general comments about how to write UI components like this would be welcome as well. Thanks!

Read the article

How to set focus for CustCombBox in a CellEditingTemplate when entering page at the first time(MVVM

- by Shamin

PreparingCellForEdit="dg_PreparingCellForEdit" BeginningEdit="dg_BeginningEdit" <data:DataGridTemplateColumn MinWidth="300"> <data:DataGridTemplateColumn.HeaderStyle> <Style TargetType="primitives:DataGridColumnHeader" BasedOn="{StaticResource FOTDataGridColumnHeaderStyle}"> <Setter Property="ContentTemplate"> <Setter.Value> <DataTemplate> <TextBlock Text="{Binding CancelReasonText2,Source={StaticResource LabelResource}}" Style="{StaticResource TextBlockLabelStandardStyle}"/> </DataTemplate> </Setter.Value> </Setter> </Style> </data:DataGridTemplateColumn.HeaderStyle> <data:DataGridTemplateColumn.CellTemplate> <DataTemplate> <TextBlock Text="{Binding CancelReason.CancelCodeDescription}" Style="{StaticResource TextBlockLabelStandardStyle}"/> </DataTemplate> </data:DataGridTemplateColumn.CellTemplate> <data:DataGridTemplateColumn.CellEditingTemplate> <DataTemplate> <input:AutoCompleteBox x:Name="cBoxCancelReason" FilterMode="StartsWith" IsDropDownOpen="True" SelectedItem="{Binding CancelReason, Mode=TwoWay}" ItemsSource="{Binding CancelCodes}" ValueMemberPath="CancelCodeDescription" > <input:AutoCompleteBox.ItemTemplate> <DataTemplate> <TextBlock Text="{Binding CancelCodeDescription}" Style="{StaticResource TextBlockLabelStandardStyle}"/> </DataTemplate> </input:AutoCompleteBox.ItemTemplate> </input:AutoCompleteBox> </DataTemplate> </data:DataGridTemplateColumn.CellEditingTemplate> </data:DataGridTemplateColumn> </data:DataGrid.Columns> </data:DataGrid> ---CodeBind public partial class CancelFlightView : UserControl,ICancelFlightView { private data.CancelCode DefaultCancelCode { get { data.CancelCode code = new data.CancelCode(); code.CancelCd = "-1"; code.CancelCodeDescription = "-- Select Cancel Reason --"; return code; } } public CancelFlightView() { InitializeComponent(); this.dg.LoadingRow += new EventHandler<DataGridRowEventArgs>(dg_LoadingRow); //this.Loaded += new RoutedEventHandler(CancelFlightView_Loaded); } void dg_LoadingRow(object sender, DataGridRowEventArgs e) { CheckBox checkBox = (CheckBox)dg.Columns[0].GetCellContent(e.Row); if (checkBox.IsChecked.Value) { FrameworkElement obj = (FrameworkElement)dg.Columns[1].GetCellContent(e.Row); System.Windows.Browser.HtmlPage.Plugin.Focus(); DataGridCell cellEdit = (DataGridCell)obj.Parent; cellEdit.Focus(); dg.BeginEdit(); } } //private void UserControl_Loaded(object sender, RoutedEventArgs e) //{ // if (DataContext != null) // { // CancelFlightViewModel viewModel = (CancelFlightViewModel)DataContext; // viewModel.View = this; // viewModel.Grid = dg; // //viewModel.InitFocus(); // } //} //void CancelFlightView_Loaded(object sender, RoutedEventArgs e) //{ // if (dg.SelectedItem != null) // { // CheckBox checkBox = (CheckBox)dg.Columns[0].GetCellContent(dg.SelectedItem); // if (checkBox.IsChecked.Value) // { // DataGridCell cellEdit = ((DataGridCell)((System.Windows.Controls.Primitives.DataGridCellsPresenter)((DataGridCell)checkBox.Parent).Parent).Children[1]); // dg.CurrentColumn = dg.Columns[1]; // System.Windows.Browser.HtmlPage.Plugin.Focus(); // cellEdit.Focus(); // dg.BeginEdit(); // } // } //} public CancelFlightView(CancelFlightViewModel viewModel):this() { ViewModel = viewModel; } private void dg_PreparingCellForEdit(object sender, DataGridPreparingCellForEditEventArgs e) { object obj = dg.Columns[1].GetCellContent(e.Row); if (obj != null && obj.GetType() == typeof(AutoCompleteBox)) { AutoCompleteBox cBoxCancelReason = (AutoCompleteBox)obj; System.Windows.Browser.HtmlPage.Plugin.Focus(); cBoxCancelReason.Focus(); } } private void CustomComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e) { } private void dg_BeginningEdit(object sender, DataGridBeginningEditEventArgs e) { } private void chkFlight_Click(object sender, RoutedEventArgs e) { CheckBox chkTemp = sender as CheckBox; if (!chkTemp.IsChecked.Value) { } else { DataGridCell cellEdit = ((DataGridCell)((System.Windows.Controls.Primitives.DataGridCellsPresenter)((DataGridCell)chkTemp.Parent).Parent).Children[1]); dg.CurrentColumn = dg.Columns[1]; cellEdit.Focus(); dg.BeginEdit(); } } private void LayoutRoot_KeyUp(object sender, KeyEventArgs e) { //if (e.Key == Key.Enter) //{ //} } #region ICancelFlightView Members public CancelFlightViewModel ViewModel { get { return DataContext as CancelFlightViewModel; } set { DataContext = value; } } #endregion } Now, when user click CheckBox, I can set focus on CustCombBox, but I can't set focus on Whose checkBox.IsChecked.Value = true when page is opened for the first time. is it possible on MVVM pattern? Looking forward your reply, thanks very much.

Read the article

Namespaced Backbone.js Views not firing events

- by Stasio

I'm currently getting started with Backbone.js. I've wrote some examples with Backbone and they are working fine. But now I need to use Backbone.js with Rails 3.1 and CoffeeScript. I took my well-working examples and rewrote on CoffeeScript using backbone-rails gem. And got the following problem. I've simplyfied code, but the problem is still remaining I've got the following files: Here I'm starting my Backbone app at main.js.coffee file according to my main_controller in rails app: $ = jQuery $-> CsfTaskManager.init() Here is backbone app description: #= require_self #= require_tree ./templates #= require_tree ./models #= require_tree ./views #= require_tree ./routers window.CsfTaskManager = Models: {} Collections: {} Routers: {} Views: {} init: -> new CsfTaskManager.Routers.AppRouter() Backbone.history.start() This is my apps' router: class CsfTaskManager.Routers.AppRouter extends Backbone.Router initialize: (options) -> goalsBlock = new CsfTaskManager.Views.goalsView() routes: "!/": "root", some other routes... And finally view: class CsfTaskManager.Views.goalsView extends Backbone.View initialize: -> this.goals = new CsfTaskManager.Collections.GoalsCollection() el: $('div#app'), events: "click .add-btn": "addGoal" addGoal: -> alert('ji') HTML page has such code: <div id="app"> <div class="app-screen hidden" id="goal-form" style="display: block; "> <button class="btn" id="load"> Load </button> <h3> New Goal </h3> <div class="form-stacked"> <form accept-charset="UTF-8" action="/goals" class="new_goal" id="new_goal" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="?"><input name="authenticity_token" type="hidden" value="Pnt+V/tS1/b079M/1ZIRdw2ss1D6bvJKVh868DXRjUg="></div> <label for="goal_title">Title</label> <p></p> <input class="goal-title" id="goal_title" name="goal[title]" size="30" type="text"> <p></p> <label for="goal_note">Note</label> <p></p> <input class="goal-note" id="goal_note" name="goal[note]" size="30" type="text"> </form> </div> <p> <button class="add-btn btn"> Add </button> </p> <ul id="goals-list"></ul> </div> <table class="app-screen bordered-table" id="calendar-grid" style="display: none; "> <tbody><tr> <td colspan="2"> week </td> </tr> <tr> <td> day </td> <td> <div id="calendar"></div> </td> </tr> </tbody></table> <div class="app-screen hidden" id="role-form" style="display: none; "> <h3> New User Role </h3> <div class="form-stacked"> <form accept-charset="UTF-8" action="/roles" class="new_role" id="new_role" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="?"><input name="authenticity_token" type="hidden" value="Pnt+V/tS1/b079M/1ZIRdw2ss1D6bvJKVh868DXRjUg="></div> <label for="role_title">Title</label> <p></p> <input class="role-title" id="role_name" name="role[name]" size="30" type="text"> <p></p> <label for="role_note">Note</label> <p></p> <input class="role-note" id="role_description" name="role[description]" size="30" type="text"> </form> </div> <p> <button class="add-btn btn"> Add </button> </p> </div> </div> So .add-btn element is nested in #app, but click on this button doesn't fire event. Where can be a trouble? Before, when I had the same app in one .js file, without of coffeescript, namespacing and backbone-rails gem, everything was allright. Bytheway, appRouter works fine, goalsView object is created successfully too, but events don't fire for some reasons. Please give me some hint, because I'm really got stuck...

Read the article

Slick2d/Nifty-gui input

- by eerongal

I'm trying to get input from slick2d into nifty gui. Ive searched online, and I've seen a few examples, but I can't seem to get it working right. i've tried the example on here but I can't seem to get everything working. I'm not entirely sure what I'm doing wrong. I've also looked at examples using the JMonkeyEngine to help point me in the right direction, but still having issues with input. I can get everything else working like i need. Here's the code for my element controller: package gui; import java.util.Properties; import de.lessvoid.nifty.Nifty; import de.lessvoid.nifty.controls.Controller; import de.lessvoid.nifty.elements.Element; import de.lessvoid.nifty.input.NiftyInputEvent; import de.lessvoid.nifty.screen.Screen; import de.lessvoid.xml.xpp3.Attributes; public class BaseElementController implements Controller { private Element element; public void bind(Nifty arg0, Screen arg1, Element arg2, Properties arg3, Attributes arg4) { this.element = element; } public void init(Properties arg0, Attributes arg1) { // TODO Auto-generated method stub } public boolean inputEvent(NiftyInputEvent arg0) { // TODO Auto-generated method stub return false; } public void onFocus(boolean arg0) { // TODO Auto-generated method stub } public void onStartScreen() { // TODO Auto-generated method stub } public void test() { System.out.println("test"); } public void bam() { System.out.println("bam"); } } Here's my XML file: <?xml version="1.0" encoding="UTF-8" standalone="no"?> <nifty> <useStyles filename="nifty-default-styles.xml"/> <useControls filename="nifty-default-controls.xml"/> <screen id="screen2" controller="gui.BaseScreenController"> <layer backgroundColor="#fff0" childLayout="absolute" id="layer4" controller="gui.BaseElementController"> <panel childLayout="center" height="30%" id="panel1" style="nifty-panel-simple" width="50%" x="282" y="334" controller="gui.BaseElementController"> <control id="checkbox1" name="checkbox"/> <control childLayout="center" id="button2" label="button2" name="button" x="381" y="224" visibleToMouse="true" controller="gui.BaseElementController"> <interact onClick="bam()"/> </control> </panel> <text text="${CALL.getPlayerName()}" style="nifty-label" width="100%" height="100%" x="0" y="10" /> </layer> </screen> </nifty> Here's how I'm trying to bind the controller: public void init(GameContainer gc) throws SlickException { Input input = gc.getInput(); inputSystem = new PlainSlickInputSystem(); inputSystem.setInput(input); gui = new Gui(); gui.init(gc, inputSystem, "gui/tset.xml", "screen2"); input.removeListener(this); input.removeListener(inputSystem); input.addListener(inputSystem); } Essentially, all that happens right now is the screen loads up and displays, and it grabs the variable correctly in the label, but none of the input seems to be getting forwarded to Nifty from slick. I assume there's something I'm missing, but I can't seem to figure out what that is. In so far as what I have tried, I attempted to define a custom input listener to pick up events and assign that to my game in order to pick up input, which did not work, so i dropped that implementation, at current i'm trying to take the default inputs and bind then with a PlainSlickInputSystem and assigning that to the input (as shown in the first example link). On code execution, all the code is hit, and i've put several system.out.println's to get ouput of what is happening (the code above has been cleaned for presentation), and i even see the elements getting bound to the controller, yet it doesn't pick up controller events. As far as EXACTLY what's wrong, that I don't know, because I've followed all implementations i can find of this, and none of them seem to do anything it's like the input is just getting thrown out. None of the objects from niftyGui appear to be recognizing any input. Here is the binding from my objects at run time: ******INITIALIZED SCREEN: de.lessvoid.nifty.screen.Screen@4a1ab1c1 ******INITIALIZED ELEMENT: button2 (de.lessvoid.nifty.elements.Element@1e8c1be9) ******INITIALIZED ELEMENT: focusable => true, width => 100px {nifty-button#panel}, backgroundImage => button/button.png {nifty-button#panel}, label => button2, paddingLeft => 7px {nifty-button#panel}, imageMode => sprite-resize:100,23,0,2,96,2,2,2,96,2,19,2,96,2,2 {nifty-button#panel}, paddingRight => 7px {nifty-button#panel}, id => button2, visibleToMouse => true, height => 23px {nifty-button#panel}, style => nifty-button, name => button, inputMapping => de.lessvoid.nifty.input.mapping.MenuInputMapping, childLayout => center, controller => gui.BaseElementController, y => 224, x => 381 ******INITIALIZED SCREEN: de.lessvoid.nifty.screen.Screen@4a1ab1c1 ******INITIALIZED ELEMENT: panel1 (de.lessvoid.nifty.elements.Element@373ec894) ******INITIALIZED ELEMENT: id => panel1, height => 30%, style => nifty-panel-simple, width => 50%, backgroundImage => panel/nifty-panel-simple.png {nifty-panel-simple}, controller => gui.BaseElementController, childLayout => center, padding => 5px {nifty-panel-simple}, imageMode => resize:9,2,9,9,9,2,9,2,9,2,9,9 {nifty-panel-simple}, y => 334, x => 282 ******INITIALIZED SCREEN: de.lessvoid.nifty.screen.Screen@4a1ab1c1 ******INITIALIZED ELEMENT: layer4 (de.lessvoid.nifty.elements.Element@6427d489) ******INITIALIZED ELEMENT: id => layer4, backgroundColor => #fff0, controller => gui.BaseElementController, childLayout => absolute the button2 object is getting bound to my BaseElementController, but i can't seem to get it into the defined "onClick" call.

Read the article

Issue with CSS drop down

- by user277314

Im having a little issue with the css drop down in my navigation. The products nav tab is suppose to have the drop down. Additionally, the nav works fine but it seems that the sub categories arent displaying correctly. HERE IS LINK Here is my navigation code: HTML <div id="nav"> <ul id="navlist"> <li><a href="home.html" id="nav-home">Home</a></li> <li><a href="company.html" id="nav-company">company</a></li> <li><a href="benefits.html" id="nav-benefits">benefits</a></li> <li><div id="nav-products2">Products</div> <ul> <li><a href="food.html" id="nav-food-serv">Food Processing Services</a></li> <li><a href="vehicle.html" id="nav-vehicle-serv">Vehicle Services</a></li> <li><a href="auto.html" id="nav-auto-serv">Automotive Services</a></li> <li><a href="laundry.html" id="nav-laundry-serv">Automotive Services</a></li> </ul> </li> <li><a href="laboratories.html" id="nav-labs">laboratories</a></li> <li><a href="industries.html" id="nav-industries">industries</a></li> <li><a href="contact.html" id="nav-contact">contact</a></li> </ul> </div> CSS #nav { float:left; width:1002px; height:42px; } #navlist { list-style: none; list-style-position:outside; list-style-type: none; } #navlist li{ float:left; } #navlist li a { display: block; height: 42px; overflow: hidden; background-position: top left; background-repeat: no-repeat; text-indent: -999em; } #navlist li a:hover { background-position: bottom left; } #navlist li .current {background-position: bottom left;} /* NAV SPECIFICS */ #nav-home {width: 129px; background-image: url(../images/nav/home.jpg);} #nav-company {width: 161px; background-image: url(../images/nav/company.jpg);} #nav-benefits {width: 133px; background-image: url(../images/nav/benefits.jpg);} #nav-products {width: 112px; background-image: url(../images/nav/products.jpg);} #nav-labs {width: 137px; background-image: url(../images/nav/laboratories.jpg);} #nav-industries {width: 169px; background-image: url(../images/nav/industries.jpg);} #nav-contact {width: 161px; background-image: url(../images/nav/contact.jpg);} #nav-food-serv {width: 161px; background-image: url(../images/nav/sub.jpg);} #nav-vehicle-serv {width: 161px; background-image: url(../images/nav/sub.jpg);} #nav-auto-serv {width: 161px; background-image: url(../images/nav/nav/sub.jpg);} #nav-laundry-serv {width: 161px; background-image: url(../images/nav/sub.jpg);} #nav-products2 {width: 112px; background-image: url(../images /nav/products.jpg);height: 42px; overflow: hidden; background-position: top left; background-repeat: no-repeat;text-indent: -999em;} #nav-products2:hover {background-position: bottom left;} #navlist li ul { /* second-level lists */ position: absolute; z-index:10; list-style:none; display: block; background: #000; width: 161px; left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */ margin:0; padding:0; border-left:1px solid #a58545; border-right:1px solid #a58545; } #navlist li ul li { list-style:none; display: block; clear:left; width:100%; } #navlist li ul li a { display:block; overflow: hidden; height:42px; background-position: top left; background-repeat: no-repeat; text-indent: -999em; margin:0; background-color:0; padding:0; width: 161px; } #navlist li ul li a:hover { background-position: bottom left; }

Read the article

Using JQuery tabs in an HTML 5 page

- by nikolaosk

In this post I will show you how to create a simple tabbed interface using JQuery,HTML 5 and CSS.Make sure you have downloaded the latest version of JQuery (minified version) from http://jquery.com/download.Please find here all my posts regarding JQuery.Also have a look at my posts regarding HTML 5.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. Let me move on to the actual example.This is the sample HTML 5 page<!DOCTYPE html><html lang="en"> <head> <title>Liverpool Legends</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="jquery-1.8.2.min.js"> </script> <script type="text/javascript" src="tabs.js"></script> </head> <body> <header> <h1>Liverpool Legends</h1> </header> <section id="tabs"> <ul> <li><a href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=1153&postid=9143136#first-tab">Defenders</a></li> <li><a href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=1153&postid=9143136#second-tab">Midfielders</a></li> <li><a href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=1153&postid=9143136#third-tab">Strikers</a></li> </ul> <div id="first-tab"> <h3>Liverpool Defenders</h3> <p> The best defenders that played for Liverpool are Jamie Carragher, Sami Hyypia , Ron Yeats and Alan Hansen.</p> </div> <div id="second-tab"> <h3>Liverpool Midfielders</h3> <p> The best midfielders that played for Liverpool are Kenny Dalglish, John Barnes,Ian Callaghan,Steven Gerrard and Jan Molby. </p> </div> <div id="third-tab"> <h3>Liverpool Strikers</h3> <p>The best strikers that played for Liverpool are Ian Rush,Roger Hunt,Robbie Fowler and Fernando Torres.<br/> </p> </div> </div></section> <footer> <p>All Rights Reserved</p> </footer> </body> </html> This is very simple HTML markup. I have styled this markup using CSS.The contents of the style.css file follow* { margin: 0; padding: 0;}header{font-family:Tahoma;font-size:1.3em;color:#505050;text-align:center;}#tabs { font-size: 0.9em; margin: 20px 0;}#tabs ul { float: left; background: #777; width: 260px; padding-top: 24px;}#tabs li { margin-left: 8px; list-style: none;}* html #tabs li { display: inline;}#tabs li, #tabs li a { float: left;}#tabs ul li.active { border-top:2px red solid; background: #15ADFF;}#tabs ul li.active a { color: #333333;}#tabs div { background: #15ADFF; clear: both; padding: 15px; min-height: 200px;}#tabs div h3 { margin-bottom: 12px;}#tabs div p { line-height: 26px;}#tabs ul li a { text-decoration: none; padding: 8px; color:#0b2f20; font-weight: bold;}footer{background-color:#999;width:100%;text-align:center;font-size:1.1em;color:#002233;}There are some CSS rules that style the various elements in the HTML 5 file. These are straight-forward rules. The JQuery code lives inside the tabs.js file $(document).ready(function(){$('#tabs div').hide();$('#tabs div:first').show();$('#tabs ul li:first').addClass('active'); $('#tabs ul li a').click(function(){$('#tabs ul li').removeClass('active');$(this).parent().addClass('active');var currentTab = $(this).attr('href');$('#tabs div').hide();$(currentTab).show();return false;});}); I am using some of the most commonly used JQuery functions like hide , show, addclass , removeClass I hide and show the tabs when the tab becomes the active tab. When I view my page I get the following result Hope it helps!!!!!

Read the article

How to refresh DataGrid and DropDown on main page after hiding modal popup

- by James

Hi, I am adding records to a database from a modal popup. After hiding the modal popup, the page has not been refreshed even though I have Rebound the controls. I have reviewed a few postings on the web about this but the solution still evades me. I have attached my code after removing some of the extra detail... It seems I need to cause a postback but I don't know what needs to be changed. Some posts have talked about the extender being misplaced. Anyway, thank you James <asp:Content ID="Content1" ContentPlaceHolderID="Head" Runat="Server"> <div class="divBorder"> <asp:DataGrid id="dgrSessionFolders" runat="server" BorderWidth="2px" BorderStyle="Solid" BorderColor="#C0C0FF" Font-Names="Arial" Font-Bold="True" Font-Size="8pt" GridLines="Horizontal" AutoGenerateColumns="False" PageSize="9999" AllowPaging="False" OnItemCommand="dgrSessionFolders_Command" OnItemDataBound="CheckSessionFolderStatus" HorizontalAlign="Left" ForeColor="Blue" ShowFooter="True" CellPadding="2" OnSortCommand="dgrSessionFolders_Sort" AllowSorting="True"> </asp:DataGrid> </div>     <asp:Label ID="Errormsg" runat="server" ForeColor="#CC0000"></asp:Label> <asp:UpdatePanel ID="UpdatePanel1" runat="server" RenderMode="Inline" ChildrenAsTriggers="false" UpdateMode="Conditional"> <Triggers> <asp:AsyncPostBackTrigger ControlID="btnEditTopic" /> <asp:AsyncPostBackTrigger ControlID="btnAdd" /> <asp:AsyncPostBackTrigger ControlID="btnUpdate" /> <asp:AsyncPostBackTrigger ControlID="btnDelete" /> <asp:AsyncPostBackTrigger ControlID="btnClear" /> <asp:AsyncPostBackTrigger ControlID="btnAddTopic" /> <asp:AsyncPostBackTrigger ControlID="btnUpdateTopic" /> <asp:AsyncPostBackTrigger ControlID="btnDeleteTopic" /> </Triggers> <ContentTemplate> <asp:panel id="pnl" runat="server" HorizontalAlign="Center" Height="48px" Width="100%" >          <asp:ImageButton ID="btnEditTopic" runat="server" AlternateText="Edit Topic" ImageUrl="~/App_Themes/Common/images/BtnEditTopic.jpg" Height="28px"> </asp:ImageButton> <cc1:ModalPopupExtender ID="btnEditTopic_ModalPopupExtender" runat="server" BackgroundCssClass="modalBackground" DropShadow="true" Enabled="true" PopupControlID="pnlEditTopic" TargetControlID="btnEditTopicHidden" CancelControlID="btnEditTopicClose"> </cc1:ModalPopupExtender> <asp:ImageButton ID="btnAdd" runat="server" AlternateText="Add Folder" ImageUrl="~/App_Themes/Common/images/BtnAddFolder.jpg" Height="28px"> </asp:ImageButton> <asp:ImageButton ID="btnUpdate" runat="server" AlternateText="Update Folder" ImageUrl="~/App_Themes/Common/images/BtnUpdateFolder.jpg" Height="28px"> </asp:ImageButton> <asp:ImageButton ID="btnDelete" runat="server" AlternateText="Delete Folder" ImageUrl="~/App_Themes/Common/images/BtnDeleteFolder.jpg" Height="28px"> </asp:ImageButton> <asp:ImageButton ID="BtnClear" runat="server" AlternateText="Clear Screen Input Fields" ImageUrl="~/App_Themes/Common/images/BtnAddMode.jpg" Height="28px"> </asp:ImageButton> <asp:Button ID="btnEditTopicHidden" runat="server" Enabled="false" Text="" Style="visibility: hidden" /> </asp:panel> <asp:Panel ID="pnlEditTopic" runat="server" CssClass="modalPopupEditTopic" Style="display: none;" > <table cellspacing="0" class="borderTable0" width="100%" style=""> <tr> <td colspan="10" class="Subhdr" align="center" style="width:100%"> <asp:label id="lblTopicScreenHdr" Cssclass="ScreenHdr" runat="server">Topic Maintenance</asp:label> </td> </tr> <tr> <td colspan="6"> <asp:Label ID="TopicPopErrorMsg" runat="server" ForeColor="#CC0000"> </asp:Label> </td> </tr> <tr style="height:4px"> <td colspan="6" align="center"> <asp:ImageButton ID="btnAddTopic" runat="server" AlternateText="Add Topic" ImageUrl="~/App_Themes/Common/images/BtnApply.jpg" Height="28px"> </asp:ImageButton> <asp:ImageButton ID="btnUpdateTopic" runat="server" AlternateText="Update Topic" ImageUrl="~/App_Themes/Common/images/BtnApply.jpg" Height="28px"> </asp:ImageButton> <asp:ImageButton ID="btnDeleteTopic" runat="server" AlternateText="Delete Topic" ImageUrl="~/App_Themes/Common/images/BtnDelete.jpg" Height="28px"> </asp:ImageButton> <asp:ImageButton ID="btnEditTopicClose" runat="server" AlternateText="Close Edit Topic Popup" ImageUrl="~/App_Themes/Common/images/BtnCancel.jpg" Height="28px"> </asp:ImageButton> </td> </tr> </table> </asp:Panel> </ContentTemplate> </asp:UpdatePanel> Private Sub btnAddTopic_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnAddTopic.Click 'Add the Topic table entry AddTopic() 'Display an informational message Errormsg.Text = "The Topic has been successfully added, thank you! " Errormsg.ForeColor = Drawing.Color.Blue 'Rebind the Topic Drop Down and set to added Topic ddlSessionTopic.DataBind() ddlSessionTopic.SelectedValue = drTopic("TOPC_ID") 'Rebind the Session Folders grid RebindGrid() 'Hide the Topic Popup btnEditTopic_ModalPopupExtender.Hide() End Sub Private Sub RebindGrid() cnnSQL = New SqlConnection(strConnection) cmdSQL = New SqlCommand("GetSessionFoldersForGrid", cnnSQL) cmdSQL.CommandType = CommandType.StoredProcedure cmdSQL.Parameters.Clear() cnnSQL.Open() dadSQL = New SqlDataAdapter(cmdSQL) dadSQL.SelectCommand = cmdSQL dadSQL.Fill(dtSessionFolderGrid) cnnSQL.Close() dvSessionFolderGrid = dtSessionFolderGrid.DefaultView dvSessionFolderGrid.Sort = String.Format("{0} {1}{2}", so.Sortfield, so.SortDirection, so.SortSuffix) dgrSessionFolders.DataSource = dvSessionFolderGrid dgrSessionFolders.DataBind() End Sub

Read the article

Having trouble on mouse over tabs

- by user225269

I downloaded a webpage template from the internet because I don't know how to design webpage on photoshop. This was the one I downloaded: http://www.freewebtemplates.com/download/templates/9839 And modified it. And I have this code for mouse over tabs from dynamic drive. But doesn't seem to be working with the template that I downloaded. Here is my current code: <script src="mouseovertabs.js" type="text/javascript"> </script> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Designed by Web Page Templates</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <link href="default.css" rel="stylesheet" type="text/css" /> </head> <body> <table border="0" align="center" cellpadding="0" cellspacing="0" class="bg1"> <tr> <td class="text1" style="height: 50px;">xd627 information management system</td> </tr> <tr> <div id="mytabsmenu" class="tabsmenuclass"> <td class="bg5"><table border="0" cellspacing="0" cellpadding="0" style="height: 62px; padding-top: 15px;"> <tr align="center"> <td><ul><li><a href="index.html" class="link1">Homepage</a></li></td> <td><li><a href="RegStuds.php" class="link1">Database</a></li></td> <td><li><a href="#" class="link1">About</a></li> </ul></td> <a href="submenucontents.htm" style="visibility:hidden">Sub Menu contents</a> <div id="mysubmenuarea" class="tabsmenucontentclass">  <a href="submenucontents.htm" style="visibility:hidden">Sub Menu contents</a> </div> <script type="text/javascript"> //mouseovertabsmenu.init("tabs_container_id", "submenu_container_id", "bool_hidecontentsmouseout") mouseovertabsmenu.init("mytabsmenu", "mysubmenuarea", true) </script> </div> What might be wrong here,its working perfectly with my previous one, but with no layout at all: <script src="mouseovertabs.js" type="text/javascript"> /*********************************************** * Mouseover Tabs Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more ***********************************************/ </script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> <div id="mytabsmenu" class="tabsmenuclass"> <ul> <li><a href="" rel="gotsubmenu[selected]">Database Manipulation</a></li> <li><a href="" rel="gotsubmenu" >Register User</a></li> <li><a href="loginform2.php" rel="gotsubmenu" >Logout</a></li> <li><a href=""></a></li> </ul> </div> <div id="mysubmenuarea" class="tabsmenucontentclass">  <a href="submenucontents.htm" style="visibility:hidden">Sub Menu contents</a> </div> <script type="text/javascript"> //mouseovertabsmenu.init("tabs_container_id", "submenu_container_id", "bool_hidecontentsmouseout") mouseovertabsmenu.init("mytabsmenu", "mysubmenuarea", true) </script> </body> </html>

Read the article

I see no LOBs!

- by Paul White

Is it possible to see LOB (large object) logical reads from STATISTICS IO output on a table with no LOB columns? I was asked this question today by someone who had spent a good fraction of their afternoon trying to work out why this was occurring – even going so far as to re-run DBCC CHECKDB to see if any corruption had taken place. The table in question wasn’t particularly pretty – it had grown somewhat organically over time, with new columns being added every so often as the need arose. Nevertheless, it remained a simple structure with no LOB columns – no TEXT or IMAGE, no XML, no MAX types – nothing aside from ordinary INT, MONEY, VARCHAR, and DATETIME types. To add to the air of mystery, not every query that ran against the table would report LOB logical reads – just sometimes – but when it did, the query often took much longer to execute. Ok, enough of the pre-amble. I can’t reproduce the exact structure here, but the following script creates a table that will serve to demonstrate the effect: IF OBJECT_ID(N'dbo.Test', N'U') IS NOT NULL DROP TABLE dbo.Test GO CREATE TABLE dbo.Test ( row_id NUMERIC IDENTITY NOT NULL, col01 NVARCHAR(450) NOT NULL, col02 NVARCHAR(450) NOT NULL, col03 NVARCHAR(450) NOT NULL, col04 NVARCHAR(450) NOT NULL, col05 NVARCHAR(450) NOT NULL, col06 NVARCHAR(450) NOT NULL, col07 NVARCHAR(450) NOT NULL, col08 NVARCHAR(450) NOT NULL, col09 NVARCHAR(450) NOT NULL, col10 NVARCHAR(450) NOT NULL, CONSTRAINT [PK dbo.Test row_id] PRIMARY KEY CLUSTERED (row_id) ) ; The next script loads the ten variable-length character columns with one-character strings in the first row, two-character strings in the second row, and so on down to the 450th row: WITH Numbers AS ( -- Generates numbers 1 - 450 inclusive SELECT TOP (450) n = ROW_NUMBER() OVER (ORDER BY (SELECT 0)) FROM master.sys.columns C1, master.sys.columns C2, master.sys.columns C3 ORDER BY n ASC ) INSERT dbo.Test WITH (TABLOCKX) SELECT REPLICATE(N'A', N.n), REPLICATE(N'B', N.n), REPLICATE(N'C', N.n), REPLICATE(N'D', N.n), REPLICATE(N'E', N.n), REPLICATE(N'F', N.n), REPLICATE(N'G', N.n), REPLICATE(N'H', N.n), REPLICATE(N'I', N.n), REPLICATE(N'J', N.n) FROM Numbers AS N ORDER BY N.n ASC ; Once those two scripts have run, the table contains 450 rows and 10 columns of data like this: Most of the time, when we query data from this table, we don’t see any LOB logical reads, for example: -- Find the maximum length of the data in -- column 5 for a range of rows SELECT result = MAX(DATALENGTH(T.col05)) FROM dbo.Test AS T WHERE row_id BETWEEN 50 AND 100 ; But with a different query… -- Read all the data in column 1 SELECT result = MAX(DATALENGTH(T.col01)) FROM dbo.Test AS T ; …suddenly we have 49 LOB logical reads, as well as the ‘normal’ logical reads we would expect. The Explanation If we had tried to create this table in SQL Server 2000, we would have received a warning message to say that future INSERT or UPDATE operations on the table might fail if the resulting row exceeded the in-row storage limit of 8060 bytes. If we needed to store more data than would fit in an 8060 byte row (including internal overhead) we had to use a LOB column – TEXT, NTEXT, or IMAGE. These special data types store the large data values in a separate structure, with just a small pointer left in the original row. Row Overflow SQL Server 2005 introduced a feature called row overflow, which allows one or more variable-length columns in a row to move to off-row storage if the data in a particular row would otherwise exceed 8060 bytes. You no longer receive a warning when creating (or altering) a table that might need more than 8060 bytes of in-row storage; if SQL Server finds that it can no longer fit a variable-length column in a particular row, it will silently move one or more of these columns off the row into a separate allocation unit. Only variable-length columns can be moved in this way (for example the (N)VARCHAR, VARBINARY, and SQL_VARIANT types). Fixed-length columns (like INTEGER and DATETIME for example) never move into ‘row overflow’ storage. The decision to move a column off-row is done on a row-by-row basis – so data in a particular column might be stored in-row for some table records, and off-row for others. In general, if SQL Server finds that it needs to move a column into row-overflow storage, it moves the largest variable-length column record for that row. Note that in the case of an UPDATE statement that results in the 8060 byte limit being exceeded, it might not be the column that grew that is moved! Sneaky LOBs Anyway, that’s all very interesting but I don’t want to get too carried away with the intricacies of row-overflow storage internals. The point is that it is now possible to define a table with non-LOB columns that will silently exceed the old row-size limit and result in ordinary variable-length columns being moved to off-row storage. Adding new columns to a table, expanding an existing column definition, or simply storing more data in a column than you used to – all these things can result in one or more variable-length columns being moved off the row. Note that row-overflow storage is logically quite different from old-style LOB and new-style MAX data type storage – individual variable-length columns are still limited to 8000 bytes each – you can just have more of them now. Having said that, the physical mechanisms involved are very similar to full LOB storage – a column moved to row-overflow leaves a 24-byte pointer record in the row, and the ‘separate storage’ I have been talking about is structured very similarly to both old-style LOBs and new-style MAX types. The disadvantages are also the same: when SQL Server needs a row-overflow column value it needs to follow the in-row pointer a navigate another chain of pages, just like retrieving a traditional LOB. And Finally… In the example script presented above, the rows with row_id values from 402 to 450 inclusive all exceed the total in-row storage limit of 8060 bytes. A SELECT that references a column in one of those rows that has moved to off-row storage will incur one or more lob logical reads as the storage engine locates the data. The results on your system might vary slightly depending on your settings, of course; but in my tests only column 1 in rows 402-450 moved off-row. You might like to play around with the script – updating columns, changing data type lengths, and so on – to see the effect on lob logical reads and which columns get moved when. You might even see row-overflow columns moving back in-row if they are updated to be smaller (hint: reduce the size of a column entry by at least 1000 bytes if you hope to see this). Be aware that SQL Server will not warn you when it moves ‘ordinary’ variable-length columns into overflow storage, and it can have dramatic effects on performance. It makes more sense than ever to choose column data types sensibly. If you make every column a VARCHAR(8000) or NVARCHAR(4000), and someone stores data that results in a row needing more than 8060 bytes, SQL Server might turn some of your column data into pseudo-LOBs – all without saying a word. Finally, some people make a distinction between ordinary LOBs (those that can hold up to 2GB of data) and the LOB-like structures created by row-overflow (where columns are still limited to 8000 bytes) by referring to row-overflow LOBs as SLOBs. I find that quite appealing, but the ‘S’ stands for ‘small’, which makes expanding the whole acronym a little daft-sounding…small large objects anyone? © Paul White 2011 email: [email protected] twitter: @SQL_Kiwi

Read the article

SpriteFont Exception, no such character?

- by Michal Bozydar Pawlowski

I have such spriteFont: <?xml version="1.0" encoding="utf-8"?>  <XnaContent xmlns:Graphics="Microsoft.Xna.Framework.Content.Pipeline.Graphics"> <Asset Type="Graphics:FontDescription">  <FontName>Segoe UI</FontName>  <Size>20</Size>  <Spacing>0</Spacing>  <UseKerning>true</UseKerning>  <Style>Regular</Style>    <CharacterRegions> <CharacterRegion> <Start>	</Start> <End>	</End> </CharacterRegion> <CharacterRegion> <Start> </Start> <End>Ұ</End> </CharacterRegion> </CharacterRegions> </Asset> </XnaContent> It has the character regions (32-1200) And I get this exception: A first chance exception of type 'System.ArgumentException' occurred in Microsoft.Xna.Framework.Graphics.ni.dll The character '?' (0x0441) is not available in this SpriteFont. If applicable, adjust the font's start and end CharacterRegions to include this character. Parameter name: character Why? I'm drawing the string like this: spriteBatch.DrawString(font24, zasadyText, zasadyTextPos, kolorCzcionki1, -0.05f, Vector2.Zero, 1.0f, SpriteEffects.None, 0.5f) I even changed the spriteFont to cyrillic: <CharacterRegions> <CharacterRegion> <Start>	</Start> <End>	</End> </CharacterRegion> <CharacterRegion> <Start> </Start> <End>ſ</End> </CharacterRegion> <CharacterRegion> <Start>А</Start> <End>ї</End> </CharacterRegion> </CharacterRegions> </Asset> </XnaContent> and it still doesn't work. I got the (0x441 = char) exception -- EDIT -- Ok, I got the solution. It was a letter mistake in language. I had this: if (jezyk == "ru_RU") { font14 = Content.Load<SpriteFont>("ru_font14"); font24 = Content.Load<SpriteFont>("ru_font24"); font12 = Content.Load<SpriteFont>("ru_czcionkaFloty"); font10 = Content.Load<SpriteFont>("ru_font10"); font28 = Content.Load<SpriteFont>("ru_font28"); font20 = Content.Load<SpriteFont>("ru_font20"); } else { font14 = Content.Load<SpriteFont>("font14"); font24 = Content.Load<SpriteFont>("font24"); font12 = Content.Load<SpriteFont>("czcionkaFloty"); font10 = Content.Load<SpriteFont>("font10"); font28 = Content.Load<SpriteFont>("font28"); font20 = Content.Load<SpriteFont>("font20"); } and there should be not "ru_RU" but "ru-RU" I have no idea. I changed the spriteFont to cyrillic: <CharacterRegions> <CharacterRegion> <Start>	</Start> <End>	</End> </CharacterRegion> <CharacterRegion> <Start> </Start> <End>ſ</End> </CharacterRegion> <CharacterRegion> <Start>А</Start> <End>ї</End> </CharacterRegion> </CharacterRegions> </Asset> </XnaContent> and it still doesn't work. I got the (0x441 = char) exception

Read the article

Yippy – the F# MVVM Pattern

- by MarkPearl

I did a recent post on implementing WPF with F#. Today I would like to expand on this posting to give a simple implementation of the MVVM pattern in F#. A good read about this topic can also be found on Dean Chalk’s blog although my example of the pattern is possibly simpler. With the MVVM pattern one typically has 3 segments, the view, viewmodel and model. With the beauty of WPF binding one is able to link the state based viewmodel to the view. In my implementation I have kept the same principles. I have a view (MainView.xaml), and and a ViewModel (MainViewModel.fs). What I would really like to illustrate in this posting is the binding between the View and the ViewModel so I am going to jump to that… In Program.fs I have the following code… module Program open System open System.Windows open System.Windows.Controls open System.Windows.Markup open myViewModels // Create the View and bind it to the View Model let myView = Application.LoadComponent(new System.Uri("/FSharpWPF;component/MainView.xaml", System.UriKind.Relative)) :?> Window myView.DataContext <- new MainViewModel() :> obj // Application Entry point [<STAThread>] [<EntryPoint>] let main(_) = (new Application()).Run(myView) You can see that I have simply created the view (myView) and then created an instance of my viewmodel (MainViewModel) and then bound it to the data context with the code… myView.DataContext <- new MainViewModel() :> obj If I have a look at my viewmodel (MainViewModel) it looks like this… module myViewModels open System open System.Windows open System.Windows.Input open System.ComponentModel open ViewModelBase type MainViewModel() = // private variables let mutable _title = "Bound Data to Textbox" // public properties member x.Title with get() = _title and set(v) = _title <- v // public commands member x.MyCommand = new FuncCommand ( (fun d -> true), (fun e -> x.ShowMessage) ) // public methods member public x.ShowMessage = let msg = MessageBox.Show(x.Title) () I have exposed a few things, namely a property called Title that is mutable, a command and a method called ShowMessage that simply pops up a message box when called. If I then look at my view which I have created in xaml (MainView.xaml) it looks as follows… <Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="F# WPF MVVM" Height="350" Width="525"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <TextBox Text="{Binding Path=Title, Mode=TwoWay}" Grid.Row="0"/> <Button Command="{Binding MyCommand}" Grid.Row="1"> <TextBlock Text="Click Me"/> </Button> </Grid> </Window> It is also very simple. It has a button that’s command is bound to the MyCommand and a textbox that has its text bound to the Title property. One other module that I have created is my ViewModelBase. Right now it is used to store my commanding function but I would look to expand on it at a later stage to implement other commonly used functions… module ViewModelBase open System open System.Windows open System.Windows.Input open System.ComponentModel type FuncCommand (canExec:(obj -> bool),doExec:(obj -> unit)) = let cecEvent = new DelegateEvent<EventHandler>() interface ICommand with [<CLIEvent>] member x.CanExecuteChanged = cecEvent.Publish member x.CanExecute arg = canExec(arg) member x.Execute arg = doExec(arg) Put this all together and you have a basic project that implements the MVVM pattern in F#. For me this is quite exciting as it turned out to be a lot simpler to do than I originally thought possible. Also because I have my view in XAML I can use the XAML designer to design forms in F# which I believe is a much cleaner way to go rather than implementing it all in code. Finally if I look at my viewmodel code, it is actually quite clean and compact…

Read the article

Five development tools I can't live without

- by bconlon

When applying to join Geeks with Blogs I had to specify the development tools I use every day. That got me thinking, it's taken a long time to whittle my tools of choice down to the selection I use, so it might be worth sharing. Before I begin, I appreciate we all have our preferred development tools, but these are the ones that work for me. Microsoft Visual Studio Microsoft Visual Studio has been my development tool of choice for more years than I care to remember. I first used this when it was Visual C++ 1.5 (hats off to those who started on 1.0) and by 2.2 it had everything I needed from a C++ IDE. Versions 4 and 5 followed and if I had to guess I would expect more Windows applications are written in VC++ 6 and VB6 than any other language. Then came the not so great versions Visual Studio .Net 2002 (7.0) and 2003 (7.1). If I'm honest I was still using v6. 2005 was better and 2008 was simply brilliant. Everything worked, the compiler was super fast and I was happy again...then came 2010...oh dear. 2010 is a big step backwards for me. It's not encouraging for my upcoming WPF exploits that 2010 is fronted in WPF technology, with the forever growing Find/Replace dialog, the issues with C++ intellisense, and the buggy debugger. That said it is still my tool of choice but I hope they sort the issue in SP1. I've tried other IDEs like Visual Age and Eclipse, but for me Visual Studio is the best. A really great tool. Liquid XML Studio XML development is a tricky business. The W3C standards are often difficult to get to the bottom of so it's great to have a graphical tool to help. I first used Liquid Technologies 5 or 6 years back when I needed to process XML data in C++. Their excellent XML Data Binding tool has an easy to use Wizard UI (as compared to Castor or JAXB command line tools) and allows you to generate code from an XML Schema. So instead of having to deal with untyped nodes like with a DOM parser, instead you get an Object Model providing a custom API in C++, C#, VB etc. More recently they developed a graphical XML IDE with XML Editor, XSLT, XQuery debugger and other XML tools. So now I can develop an XML Schema graphically, click a button to generate a Sample XML document, and click another button to run the Wizard to generate code including a Sample Application that will then load my Sample XML document into the generated object model. This is a very cool toolset. Note: XML Data Binding is nothing to do with WPF Data Binding, but I hope to cover both in more detail another time. .Net Reflector Note: I've just noticed that starting form the end of February 2011 this will no longer be a free tool !! .Net Reflector turns .Net byte code back into C# source code. But how can it work this magic? Well the clue is in the name, it uses reflection to inspect a compiled .Net assembly. The assembly is compiled to byte code, it doesn't get compiled to native machine code until its needed using a just-in-time (JIT) compiler. The byte code still has all of the information needed to see classes, variables. methods and properties, so reflector gathers this information and puts it in a handy tree. I have used .Net Reflector for years in order to understand what the .Net Framework is doing as it sometimes has undocumented, quirky features. This really has been invaluable in certain instances and I cannot praise enough kudos on the original developer Lutz Roeder. Smart Assembly In order to stop nosy geeks looking at our code using a tool like .Net Reflector, we need to obfuscate (mess up) the byte code. Smart Assembly is a tool that does this. Again I have used this for a long time. It is very quick and easy to use. Another excellent tool. Coincidentally, .Net Reflector and Smart Assembly are now both owned by Red Gate. Again kudos goes to the original developer Jean-Sebastien Lange. TortoiseSVN SVN (Apache Subversion) is a Source Control System developed as an open source project. TortoiseSVN is a graphical UI wrapper over SVN that hooks into Windows Explorer to enable files to be Updated, Committed, Merged etc. from the right click menu. This is an essential tool for keeping my hard work safe! Many years ago I used Microsoft Source Safe and I disliked CVS type systems. But TortoiseSVN is simply the best source control tool I have ever used. --- So there you have it, my top 5 development tools that I use (nearly) every day and have helped to make my working life a little easier. I'm sure there are other great tools that I wish I used but have never heard of, but if you have not used any of the above, I would suggest you check them out as they are all very, very cool products. #

Read the article

javascript robot

- by sarah

hey guys! I need help making this robot game in javascript (notepad++) please HELP! I'm really confused by the functions <html> <head><title>Robot Invasion 2199</title></head> <body style="text-align:center" onload="newGame();"> <h2>Robot Invasion 2199</h2> <div style="text-align:center; background:white; margin-right: auto; margin-left:auto;"> <div style=""> <div style="width: auto; border:solid thin red; text-align:center; margin:10px auto 10px auto; padding:1ex 0ex;font-family: monospace" id="scene"></pre> </div> <div><span id="status"></span></div> <form style="text-align:center"> PUT THE CONTROL PANEL HERE!!! </form> </div> <script type="text/javascript"> // GENERAL SUGGESTIONS ABOUT WRITING THIS PROGRAM: // You should test your program before you've finished writing all of the // functions. The newGame, startLevel, and update functions should be your // first priority since they're all involved in displaying the initial state // of the game board. // // Next, work on putting together the control panel for the game so that you // can begin to interact with it. Your next goal should be to get the move // function working so that everything else can be testable. Note that all nine // of the movement buttons (including the pass button) should call the move // function when they are clicked, just with different parameters. // // All the remaining functions can be completed in pretty much any order, and // you'll see the game gradually improve as you write the functions. // // Just remember to keep your cool when writing this program. There are a // bunch of functions to write, but as long as you stay focused on the function // you're writing, each individual part is not that hard. // These variables specify the number of rows and columns in the game board. // Use these variables instead of hard coding the number of rows and columns // in your loops, etc. // i.e. Write: // for(i = 0; i < NUM_ROWS; i++) ... // not: // for(i = 0; i < 15; i++) ... var NUM_ROWS = 15; var NUM_COLS = 25; // Scene is arguably the most important variable in this whole program. It // should be set up as a two-dimensional array (with NUM_ROWS rows and // NUM_COLS columns). This represents the game board, with the scene[i][j] // representing what's in row i, column j. In particular, the entries should // be: // // "." for empty space // "R" for a robot // "S" for a scrap pile // "H" for the hero var scene; // These variables represent the row and column of the hero's location, // respectively. These are more of a conveniece so you don't have to search // for the "H" in the scene array when you need to know where the hero is. var heroRow; var heroCol; // These variables keep track of various aspects of the gameplay. // score is just the number of robots destroyed. // screwdrivers is the number of sonic screwdriver charges left. // fastTeleports is the number of fast teleports remaining. // level is the current level number. // Be sure to reset all of these when a new game starts, and update them at the // appropriate times. var score; var screwdrivers; var fastTeleports; var level; // This function should use a sonic screwdriver if there are still charges // left. The sonic screwdriver turns any robot that is in one of the eight // squares immediately adjacent to the hero into scrap. If there are no charges // left, then this function should instead pop up a dialog box with the message // "Out of sonic screwdrivers!". As with any function that alters the game's // state, this function should call the update function when it has finished. // // Your "Sonic Screwdriver" button should call this function directly. function screwdriver() { // WRITE THIS FUNCTION } // This function should move the hero to a randomly selected location if there // are still fast teleports left. This function MUST NOT move the hero on to // a square that is already occupied by a robot or a scrap pile, although it // can move the hero next to a robot. The number of fast teleports should also // be decreased by one. If there are no fast teleports left, this function // should just pop up a message box saying so. As with any function that alters // the game's state, this function should call the update function when it has // finished. // // HINT: Have a loop that keeps trying random spots until a valid one is found. // HINT: Use the validPosition function to tell if a spot is valid // // Your "Fast Teleport" button s

Read the article

Refactoring an ERB Template to Haml

- by Liam McLennan

ERB is the default view templating system used by Ruby on Rails. Haml is an alternative templating system that uses whitespace to represent document structure. The example from the haml website shows the following equivalent markup: Haml ERB #profile .left.column #date= print_date #address= current_user.address .right.column #email= current_user.email #bio= current_user.bio <div id="profile"> <div class="left column"> <div id="date"><%= print_date %></div> <div id="address"><%= current_user.address %></div> </div> <div class="right column"> <div id="email"><%= current_user.email %></div> <div id="bio"><%= current_user.bio %></div> </div> </div> I like haml because it is concise and the significant whitespace makes it easy to see the structure at a glance. This post is about a ruby project but nhaml makes haml available for asp.net MVC also. The ERB Template Today I spent some time refactoring an ERB template to Haml. The template is called list.html.erb and its purpose is to render a list of tweets (twitter messages). <style> form { float: left; } </style> <h1>Tweets</h1> <table> <thead><tr><th></th><th>System</th><th>Human</th><th></th></tr></thead> <% @tweets.each do |tweet| %> <tr> <td><%= h(tweet['text']) %></td> <td><%= h(tweet['system_classification']) %></td> <td><%= h(tweet['human_classification']) %></td> <td><form action="/tweet/rate" method="post"> <%= token_tag %> <input type="submit" value="Positive"/> <input type="hidden" value="<%= tweet['id']%>" name="id" /> <input type="hidden" value="positive" name="rating" /> </form> <form action="/tweet/rate" method="post"> <%= token_tag %> <input type="submit" value="Neutral"/> <input type="hidden" value="<%= tweet['id']%>" name="id" /> <input type="hidden" value="neutral" name="rating" /> </form> <form action="/tweet/rate" method="post"> <%= token_tag %> <input type="submit" value="Negative"/> <input type="hidden" value="<%= tweet['id']%>" name="id" /> <input type="hidden" value="negative" name="rating" /> </form> </td> </tr> <% end %> </table> Haml Template: Take 1 My first step was to convert this page to a Haml template in place. Directly translating the ERB template to Haml resulted in: list.haml %style form {float: left;} %h1 Tweets %table %thead %tr %th %th System %th Human %th %tbody - @tweets.each do |tweet| %tr %td= tweet['text'] %td= tweet['system_classification'] %td= tweet['human_classification'] %td %form{ :action=>"/tweet/rate", :method=>"post"} = token_tag <input type="submit" value="Positive"/> <input type="hidden" value="positive" name="rating" /> %input{ :type=>"hidden", :value => tweet['id']} %form{ :action=>"/tweet/rate", :method=>"post"} = token_tag <input type="submit" value="Neutral"/> <input type="hidden" value="neutral" name="rating" /> %input{ :type=>"hidden", :value => tweet['id']} %form{ :action=>"/tweet/rate", :method=>"post"} = token_tag <input type="submit" value="Negative"/> <input type="hidden" value="negative" name="rating" /> %input{ :type=>"hidden", :value => tweet['id']} end I like this better already but I can go further. Haml Template: Take 2 The haml documentation says to avoid using iterators so I introduced a partial template (_tweet.haml) as the template to render a single tweet. _tweet.haml %tr %td= tweet['text'] %td= tweet['system_classification'] %td= tweet['human_classification'] %td %form{ :action=>"/tweet/rate", :method=>"post"} = token_tag <input type="submit" value="Positive"/> <input type="hidden" value="positive" name="rating" /> %input{ :type=>"hidden", :value => tweet['id']} %form{ :action=>"/tweet/rate", :method=>"post"} = token_tag <input type="submit" value="Neutral"/> <input type="hidden" value="neutral" name="rating" /> %input{ :type=>"hidden", :value => tweet['id']} %form{ :action=>"/tweet/rate", :method=>"post"} = token_tag <input type="submit" value="Negative"/> <input type="hidden" value="negative" name="rating" /> %input{ :type=>"hidden", :value => tweet['id']} and the list template is simplified to: list.haml %style form {float: left;} %h1 Tweets %table %thead %tr %th %th System %th Human %th %tbody = render(:partial => "tweet", :collection => @tweets) That is definitely an improvement, but then I noticed that _tweet.haml contains three form tags that are nearly identical. Haml Template: Take 3 My first attempt, later aborted, was to use a helper to remove the duplication. A much better solution is to use another partial. _rate_button.haml %form{ :action=>"/tweet/rate", :method=>"post"} = token_tag %input{ :type => "submit", :value => rate_button[:rating].capitalize } %input{ :type => "hidden", :value => rate_button[:rating], :name => 'rating' } %input{ :type => "hidden", :value => rate_button[:id], :name => 'id' } and the tweet template is now simpler: _tweet.haml %tr %td= tweet['text'] %td= tweet['system_classification'] %td= tweet['human_classification'] %td = render( :partial => 'rate_button', :object => {:rating=>'positive', :id=> tweet['id']}) = render( :partial => 'rate_button', :object => {:rating=>'neutral', :id=> tweet['id']}) = render( :partial => 'rate_button', :object => {:rating=>'negative', :id=> tweet['id']}) list.haml remains unchanged. Summary I am extremely happy with the switch. No doubt there are further improvements that I can make, but I feel like what I have now is clean and well factored.

Read the article

How to add/remove rows using SlickGrid

- by lkahtz

How to write such functions and bind them to two buttons like "add row" and "remove row": The now working example code only support adding new row by editing on the blank bottom line. <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>SlickGrid example 3: Editing</title> <link rel="stylesheet" href="../slick.grid.css" type="text/css"/> <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css"/> <link rel="stylesheet" href="examples.css" type="text/css"/> <style> .cell-title { font-weight: bold; } .cell-effort-driven { text-align: center; } </style> </head> <body> <div style="position:relative"> <div style="width:600px;"> <div id="myGrid" style="width:100%;height:500px;"></div> </div> <div class="options-panel"> <h2>Demonstrates:</h2> <ul> <li>adding basic keyboard navigation and editing</li> <li>custom editors and validators</li> <li>auto-edit settings</li> </ul> <h2>Options:</h2> <button onclick="grid.setOptions({autoEdit:true})">Auto-edit ON</button>   <button onclick="grid.setOptions({autoEdit:false})">Auto-edit OFF</button> </div> </div> <script src="../lib/firebugx.js"></script> <script src="../lib/jquery-1.7.min.js"></script> <script src="../lib/jquery-ui-1.8.16.custom.min.js"></script> <script src="../lib/jquery.event.drag-2.0.min.js"></script> <script src="../slick.core.js"></script> <script src="../plugins/slick.cellrangedecorator.js"></script> <script src="../plugins/slick.cellrangeselector.js"></script> <script src="../plugins/slick.cellselectionmodel.js"></script> <script src="../slick.formatters.js"></script> <script src="../slick.editors.js"></script> <script src="../slick.grid.js"></script> <script> function requiredFieldValidator(value) { if (value == null || value == undefined || !value.length) { return {valid: false, msg: "This is a required field"}; } else { return {valid: true, msg: null}; } } var grid; var data = []; var columns = [ {id: "title", name: "Title", field: "title", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text, validator: requiredFieldValidator}, {id: "desc", name: "Description", field: "description", width: 100, editor: Slick.Editors.LongText}, {id: "duration", name: "Duration", field: "duration", editor: Slick.Editors.Text}, {id: "%", name: "% Complete", field: "percentComplete", width: 80, resizable: false, formatter: Slick.Formatters.PercentCompleteBar, editor: Slick.Editors.PercentComplete}, {id: "start", name: "Start", field: "start", minWidth: 60, editor: Slick.Editors.Date}, {id: "finish", name: "Finish", field: "finish", minWidth: 60, editor: Slick.Editors.Date}, {id: "effort-driven", name: "Effort Driven", width: 80, minWidth: 20, maxWidth: 80, cssClass: "cell-effort-driven", field: "effortDriven", formatter: Slick.Formatters.Checkmark, editor: Slick.Editors.Checkbox} ]; var options = { editable: true, enableAddRow: true, enableCellNavigation: true, asyncEditorLoading: false, autoEdit: false }; $(function () { for (var i = 0; i < 500; i++) { var d = (data[i] = {}); d["title"] = "Task " + i; d["description"] = "This is a sample task description.\n It can be multiline"; d["duration"] = "5 days"; d["percentComplete"] = Math.round(Math.random() * 100); d["start"] = "01/01/2009"; d["finish"] = "01/05/2009"; d["effortDriven"] = (i % 5 == 0); } grid = new Slick.Grid("#myGrid", data, columns, options); grid.setSelectionModel(new Slick.CellSelectionModel()); grid.onAddNewRow.subscribe(function (e, args) { var item = args.item; grid.invalidateRow(data.length); data.push(item); grid.updateRowCount(); grid.render(); }); }) </script> </body> </html>

Read the article

Smooth animation on a persistently refreshing canvas

- by Neurofluxation

Yo everyone! I have been working on an Isometric Tile Game Engine in HTML5/Canvas for a little while now and I have a complete working game. Earlier today I looked back over my code and thought: "hmm, let's try to get this animated smoothly..." And since then, that is all I have tried to do. The problem I would like the character to actually "slide" from tile to tile - but the canvas redrawing doesn't allow this - does anyone have any ideas....? Code and fiddle below... Fiddle with it! http://jsfiddle.net/neuroflux/n7VAu/ <html> <head> <title>tileEngine - Isometric</title> <style type="text/css"> * { margin: 0px; padding: 0px; font-family: arial, helvetica, sans-serif; font-size: 12px; cursor: default; } </style> <script type="text/javascript"> var map = Array( //land [[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0]], [[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0]], [[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0]], [[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0]], [[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0]], [[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0]], [[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0]], [[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0]], [[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0]], [[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0]] ); var tileDict = Array("http://www.wikiword.co.uk/release-candidate/canvas/tileEngine/land.png"); var charDict = Array("http://www.wikiword.co.uk/release-candidate/canvas/tileEngine/mario.png"); var objectDict = Array("http://www.wikiword.co.uk/release-candidate/canvas/tileEngine/rock.png"); //last is one more var objectImg = new Array(); var charImg = new Array(); var tileImg = new Array(); var loaded = 0; var loadTimer; var ymouse; var xmouse; var eventUpdate = 0; var playerX = 0; var playerY = 0; function loadImg(){ //preload images and calculate the total loading time for(var i=0;i<tileDict.length;i++){ tileImg[i] = new Image(); tileImg[i].src = tileDict[i]; tileImg[i].onload = function(){ loaded++; } } i = 0; for(var i=0;i<charDict.length;i++){ charImg[i] = new Image(); charImg[i].src = charDict[i]; charImg[i].onload = function(){ loaded++; } } i = 0; for(var i=0;i<objectDict.length;i++){ objectImg[i] = new Image(); objectImg[i].src = objectDict[i]; objectImg[i].onload = function(){ loaded++; } } } function checkKeycode(event) { //key pressed var keycode; if(event == null) { keyCode = window.event.keyCode; } else { keyCode = event.keyCode; } switch(keyCode) { case 38: //left if(!map[playerX-1][playerY][1] > 0){ playerX--; } break; case 40: //right if(!map[playerX+1][playerY][1] > 0){ playerX++; } break; case 39: //up if(!map[playerX][playerY-1][1] > 0){ playerY--; } break; case 37: //down if(!map[playerX][playerY+1][1] > 0){ playerY++; } break; default: break; } } function loadAll(){ //load the game if(loaded == tileDict.length + charDict.length + objectDict.length){ clearInterval(loadTimer); loadTimer = setInterval(gameUpdate,100); } } function drawMap(){ //draw the map (in intervals) var tileH = 25; var tileW = 50; mapX = 80; mapY = 10; for(i=0;i<map.length;i++){ for(j=0;j<map[i].length;j++){ var drawTile= map[i][j][0]; var xpos = (i-j)*tileH + mapX*4.5; var ypos = (i+j)*tileH/2+ mapY*3.0; ctx.drawImage(tileImg[drawTile],xpos,ypos); if(i == playerX && j == playerY){ you = ctx.drawImage(charImg[0],xpos,ypos-(charImg[0].height/2)); } } } } function init(){ //initialise the main functions and even handlers ctx = document.getElementById('main').getContext('2d'); loadImg(); loadTimer = setInterval(loadAll,10); document.onkeydown = checkKeycode; } function gameUpdate() { //update the game, clear canvas etc ctx.clearRect(0,0,904,460); ctx.fillStyle = "rgba(255, 255, 255, 1.0)"; //assign color drawMap(); } </script> </head> <body align="center" style="text-align: center;" onload="init()"> <canvas id="main" width="904" height="465"> <h1 style="color: white; font-size: 24px;">I'll be damned, there be no HTML5 & canvas support on this 'ere electronic machine!<sub>This game, jus' plain ol' won't work!</sub></h1> </canvas> </body> </html>

Read the article

top rounded corners in my jquery

- by Sohail

Hello everybody, I have this jquery for my menu buttons, what I want is to get top-corner rounded for my menu, this is a whole code: <html> <style type="text/css"> #menuBarHolder { width: 860px; height:45px; background-color:#000; color:#fff; font-family:Arial; font-size:14px; margin-top:20px;} #menuBarHolder ul{ list-style-type:none; display:block;} .firstchild { border-left:1px solid #ccc;} #container { margin-top:10px;} #menuBar li{ float:left; padding:15px; height:16px; width:70px; border-right:1px solid #ccc; } #menuBar li a{color:#fff; text-decoration:none; letter-spacing:-1px; font-weight:bold;} .menuHover { background-color:#999;} .menuInfo { cursor:hand; background-color:#000; color:#fff; width:74px; font-size:11px;height:100px; padding:3px; display:none; position:absolute; margin-left:-15px; margin-top:0px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; -khtml-border-radius-bottomright: 5px; -khtml-border-radius-bottomleft: 5px; border-radius-bottomright: 5px;border-radius-bottomleft: 5px; } </style>  <script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#menuBar li').click(function() { var url = $(this).find('a').attr('href'); document.location.href = url; }); $('#menuBar li').hover(function() { $(this).find('.menuInfo').slideDown(); }, function() { $(this).find('.menuInfo').slideUp(); }); }); </script> <center> <div id="menuBarHolder"> <ul id="menuBar"> <li class="firstchild"><a href="javascript:#">Home</a><div class="menuInfo">I am some text about the home section</div></li> <li><a href="javascript:#">About Us</a><div class="menuInfo">I am some text about the services section</div></li> <li><a href="javascript:#">News</a><div class="menuInfo">I am some text about the clients section</div></li> <li><a href="javascript:#">Equipment</a><div class="menuInfo">I am some text about the portfolio section</div></li> <li><a href="javascript:#">Services</a><div class="menuInfo">I am some text about the about section</div></li> <li><a href="javascript:#">Project</a><div class="menuInfo">I am some text about the blog section</div></li> <li><a href="javascript:#">Contact Us</a><div class="menuInfo">I am some text about the follow section</div></li> </ul> </div> </div> </center> </html> Thanks for your help.

Read the article

Extending Expression Blend 4 & Blend for Visual Studio 2012

- by Chris Skardon

Just getting this off the bat, I presume this will also work for Blend 5, but I can’t confirm it… Anyhews, I imagine you’re here because you want to know how to create an addin for Blend, so let’s jump right in there! First, and foremost, we’re going to need to ensure our development environment has the right setup, so the checklist: Visual Studio 2012 Blend for Visual Studio 2012 OK, let’s create a new project (class library, .NET 4.5): Hello.Extension The ‘.Extension’ bit is very very important. The addin will not work unless it is named in this way. You can put whatever you want at the front, but it has to have the extension bit. OK, so now we have a solution with one project. To this project we need to add references to the following things: Microsoft.Expression.Extensibility (from c:\program files\Microsoft Visual Studio 11.0\Blend\ -- x86 folder if you are on an x64 windows install) Microsoft.Expression.Framework (same location as above) PresentationCore PresentationFramework WindowsBase System.ComponentModel.Composition Got them? ACE. Let’s now add a project to contain our control, so, create a new WPF Application project, cunningly named something like ‘Hello.Control’… (I’m creating a WPF application here, because I’m too lazy to dig up the correct references, and this will add all the ones I need ) Once that is created, delete the App.xaml and MainWindow.xaml files, we won’t be needing them. You will also need to change the properties of the project itself, so it is only a class library. Once that is done, let’s add a new UserControl, which will be this: <UserControl x:Class="Hello.Control.HelloControl" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="300"> <Grid> <TextBlock Text="HELLO!!!"/> </Grid> </UserControl> Impressive eh? Now, let’s reference the WPF project from the Extension library. All that’s left now is to code up our extension… So, add a class to the Extension project (name wise doesn’t matter), and make it implement the IPackage interface from the Microsoft.Expression.Extensibility library: public class HelloExtension : IPackage { /**/ } We’ll implement the two methods we need to: public class HelloExtension : IPackage { public void Load(IServices services) { } public void Unload() { } } We’re only really concerned about the Load method in this case, as let’s face it, the extension we have doesn’t need to do a lot to bog off. The interesting thing about the Load method is that it receives an IServices instance. This allows us to get access to all the services that Expression provides, in this case we’re interested in one in particular, the ‘IWindowService’ So, let’s get that bad boy… private IWindowService _windowService; public void Load(IServices services) { _windowService = services.GetService<IWindowService>(); } Nailed it… But why? The WindowService allows us to register our UserControl with Blend, which in turn allows people to activate and see it, which is a big plus point. So, let’s do that… We’ll create an ‘Initialize’ method to create our new control, and add it to the WindowService: private HelloControl _helloControl; public void Initialize() { _helloControl = new HelloControl(); if (_windowService.PaletteRegistry["HelloPanel"] == null) _windowService.RegisterPalette("HelloPanel", _helloControl, "Hello Window"); } First we check that we’re not already registered, and if we’re not we register, the first argument is the identifier used by the service to, well, identify your extension. The second argument is the actual control, the third argument is the name that people will see in the ‘Windows’ menu of Blend itself (so important note here – don’t put anything embarrassing or (need I say it?) sweary…) There are only two things to do now - Call ‘Initialize()’ from our Load method, and Export the class This is easy money – add [Export(typeof(IPackage))] to the top of our class… The full code will (should) look like this: [Export(typeof (IPackage))] public class HelloExtension : IPackage { private HelloControl _helloControl; private IWindowService _windowService; public void Load(IServices services) { _windowService = services.GetService<IWindowService>(); Initialize(); } public void Unload() { } public void Initialize() { _helloControl = new HelloControl(); if (_windowService.PaletteRegistry["HelloControl"] == null) _windowService.RegisterPalette("HelloControl", _helloControl, "Hello Window"); } } If you build this and copy it to your ‘Extensions’ folder in Blend (c:\program files\microsoft visual studio 11.0\blend\) and start Blend, you should see ‘Hello Window’ listed in the Window menu: That as they say is it!

Read the article

Struts Tiles application

- by rav83

Am trying a tiles application.Below is my code tiles-defs.xml </tiles-definitions> <definition name="${YOUR_DEFINITION_HERE}"> </definition> <definition name="commonPage" path="/jsps/template.jsp"> <put name="header" value="/jsps/header.jsp" /> <put name="menu" value="/jsps/menu.jsp" /> <put name="body" value="/jsps/homebody.jsp" /> <put name="footer" value="/jsps/footer.jsp" /> </definition> <definition name="aboutUsPage" extends="commonPage"> <put name="body" value="/jsps/aboutUsBody.jsp" /> </definition> </tiles-definitions> struts-config.xml <action path="/aboutus" type="java.com.mbest.core.action.AboutUsAction" parameter="method"> <forward name="success" path="aboutUsPage"/> <forward name="failure" path="aboutUsPage"/> </action> </action-mappings> template.jsp <%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %> <html> <head><title></title></head> <body> <table border="1" cellspacing="0" cellpadding="0" style="width: 98%; height: 100%"> <tr> <td colspan="2"> <tiles:insert attribute="header"/> </td> </tr> <tr style="height: 500px"> <td valign="top" style="width: 200px"> <tiles:insert attribute="menu"/> </td> <td valign="baseline" align="left"> <tiles:insert attribute="body"/> </tr> <tr> <td colspan="2"> <tiles:insert attribute="footer"/> </td> </tr> </table> </body> </html> homebody.jsp <%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %> <%@taglib uri="/WEB-INF/struts-html.tld" prefix="html"%> <%@taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %> <html> <head> <title></title> <style type="text/css"> <%@include file="../css/helper.css"%> <%@include file="../css/dropdown.css" %> <%@include file="../css/default.ultimate.css" %> </style> </head> <body> <div id="header"> <ul id="nav" class="dropdown dropdown-horizontal"> <li><span class="dir"><html:link page="/aboutus.do?method=aboutUsPage" >About Us</html:link></span></li> <li><span class="dir"><a href="./">Products</a></span></li> <li><span class="dir"><a href="./">Infrastructure</a></span></li> <li><span class="dir"><a href="./">Pharmaceutical Formulations</a></span></li> <li><span class="dir"><a href="./">Contact Us</a></span></li> </ul> </div> </body> </html> AboutUsAction.java package java.com.mindbest.core.action; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.apache.struts.action.ActionForm; import org.apache.struts.action.ActionForward; import org.apache.struts.action.ActionMapping; import org.apache.struts.actions.DispatchAction; public class AboutUsAction extends DispatchAction { public ActionForward aboutUsPage(ActionMapping mapping,ActionForm form, HttpServletRequest request,HttpServletResponse response)throws Exception { return mapping.findForward("success"); } } aboutUsBody.jsp hello In my above code if i try to access the app using (domainname)/example/aboutus.do its giving 500 error.Can anyone help me figure this out?

Read the article

Tooltips problem, making this javascript work with my smarty foreach loop, help pelase!

- by Kyle Sevenoaks

I am using an example of tooltips from http://www.dynamicdrive.com/dynamicindex5/stickytooltip.htm on www.euroworker.no/order I have this code here to work with, but it just doesn't seem to work correctly, I've tried everything I can think of (not a lot of things) Here's the code. {foreach from=$cart.cartItems item="item" name="cart"} <div class="{zebra loop="cart"}"> <div id="sgproductview"> <div id="cart2Varekode"> <p> {if $product.sku} <span class="param">{$item.product.sku}</span> {else} <span>{img src=$item.Product.DefaultImage.paths.1 alt=$item.Product.name_lang|escape}</span> {/if} </p> </div> <div id="cart2Produkt"> <p>{if $item.Product.ID} <a href="{productUrl product=$item.Product}" data-tooltip="sticky{$smarty.foreach.cart.iteration}" target="_blank">{$item.Product.name_lang|truncate:20}</a> {else} <span>{$item.Product.name_lang|truncate:20}</span> </a> {/if} </p> <p> {include file="order/itemVariations.tpl"} {include file="order/block/itemOptions.tpl"} {if $multi} {include file="order/selectItemAddress.tpl" item=$item} {/if} </p> </div> {if $item.Product.DefaultImage.paths.3} <div id="mystickytooltip" class="stickytooltip"> <div style="padding:5px;"> <div id="sticky1" class="atip" style="width:200px;"> <img src="{$item.Product.DefaultImage.paths.3}" alt="{$item.Product.name_lang|escape}"><br> {$item.Product.name_lang} </div> <div id="sticky2" class="atip" style="width:200px;"> <img src={$item.Product.DefaultImage.paths.3} alt="{$item.Product.name_lang|escape}"><br> {$item.formattedPrice} </div> <div id="sticky3" class="atip" style="width:200px;"> <img src="{$item.Product.DefaultImage.paths.3}" alt="{$item.Product.name_lang|escape}"><br> {$item.Product.name_lang}PRODUCT 3 </div> <div id="sticky4" class="atip" style="width:200px;"> <img src="{$item.Product.DefaultImage.paths.3}" alt="{$item.Product.name_lang|escape}"><br> {$item.Product.name_lang} </div> </div> </div> {/if} <div id="cart2Price"> <p class="actualPrice"> {$item.formattedPrice} </p> </div> <div id="salg"></div> <div id="cart2Salg"> <p></p> </div> <div id="antallbox"> <p class="cartQuant"> {textfield name="item_`$item.ID`" class="text"} </p> </div> <div id="cart2Total"> <p> {if $item.count == 1} <span class="basePrice">{$item.formattedBasePrice}</span><span class="actualPrice">{$item.formattedPrice}</span> {else} {$item.formattedDisplaySubTotal} <div class="subTotalCalc"> {$item.count} x <span class="basePrice">{$item.formattedBasePrice}</span><span class="actualPrice">{$item.formattedPrice}</span> </div> {/if} </p> </div> <div id="delete"> {if 'ENABLE_WISHLISTS'|config} <a href="{link controller=order action=moveToWishList id=$item.ID query="return=`$return`"}">{t _move_to_wishlist}</a> {/if} <a id="slett" href="{link controller=order action=delete id=$item.ID query="return=`$return`"}" title="Slett"></a> </div> </div> </div> {/foreach} Anyone can help? {html_image} doesn't work, by the way and all the extensions are present and correct.

Read the article

pagination in css/php

- by fusion

two questions: --1-- it displays all the number of pages. but i'd like it to display as: << Prev . . 3 4 [5] 6 7 . . Next --2-- when i hover on the current page no, it should change color or increase the font-size, but when i modify the css of a:hover, all the page nos change color or size instead of the one which i'm pointing to. also, when modifying a:active, nothing happens. this is my paging code in php: $self = $_SERVER['PHP_SELF']; $limit = 2; //Number of results per page $numpages=ceil($totalrows/$limit); $query = $query." ORDER BY idQuotes LIMIT " . ($page-1)*$limit . ",$limit"; $result = mysql_query($query, $conn) or die('Error:' .mysql_error()); ?> <div class="caption">Search Results</div> <div class="center_div"> <table> <?php while ($row= mysql_fetch_array($result, MYSQL_ASSOC)) { $cQuote = highlightWords(htmlspecialchars($row['cQuotes']), $search_result); ?> <tr> <td style="text-align:right; font-size:15px;"><?php h($row['cArabic']); ?></td> <td style="font-size:16px;"><?php echo $cQuote; ?></td> <td style="font-size:12px;"><?php h($row['vAuthor']); ?></td> <td style="font-size:12px; font-style:italic; text-align:right;"><?php h($row['vReference']); ?></td> </tr> <?php } ?> </table> </div> <div class="searchmain"> <?php //Create and print the Navigation bar $nav=""; $next = $page+1; $prev = $page-1; if($page > 1) { $nav .= "<span class=\"searchpage\"><a onclick=\"showPage('','$prev'); return false;\" href=\"$self?page=" . $prev . "&q=" .urlencode($search_result) . "\">< Prev</a></span>"; $first = "<span class=\"searchpage\"><a onclick=\"showPage('','1'); return false;\" href=\"$self?page=1&q=" .urlencode($search_result) . "\"> << </a></span>" ; } else { $nav .= " "; $first = " "; } for($i = 1 ; $i <= $numpages ; $i++) { if($i == $page) { $nav .= "<span class=\"searchpage\">$i</span>"; }else{ $nav .= "<span class=\"searchpage\"><a onclick=\"showPage('',$i); return false;\" href=\"$self?page=" . $i . "&q=" .urlencode($search_result) . "\">$i</a></span>"; } } if($page < $numpages) { $nav .= "<span class=\"searchpage\"><a onclick=\"showPage('','$next'); return false;\" href=\"$self?page=" . $next . "&q=" .urlencode($search_result) . "\">Next ></a></span>"; $last = "<span class=\"searchpage\"><a onclick=\"showPage('','$numpages'); return false;\" href=\"$self?page=$numpages&q=" .urlencode($search_result) . "\"> >> </a></span>"; } else { $nav .= " "; $last = " "; } echo $first . $nav . $last; ?> </div> and this is how it displays currently: css: .searchmain { margin:30px; text-align: center; } .searchpage { border: solid 1px #ddd; background: #fff; text-align:left; font-size: 16px; padding:9px 12px; color: #FEBE33; margin-left:2px; } .searchpage a{ text-decoration: none; color: #808080; } .searchpage a:hover { color: #FEBE33; border-color: #036; text-decoration: none; } .searchpage a:visited { color: #808080; }

Read the article

textbox disappears in paging - php

- by fusion

i'm calling the search.php page via ajax to search.html. the problem is, since i've implemented paging, the textbox with the search keyword from search.html 'disappears' when the user clicks the 'Next' button [because the page goes to search.php which has no textbox element] i'd like the textbox with the search keyword to be there, when the user goes through the records via paging. how'd i achieve this? search.html: <body> <form name="myform" class="wrapper"> <input type="text" name="q" onkeyup="showPage();" class="txt_search"/> <input type="button" name="button" onclick="showPage();" class="button"/> <p> <div id="txtHint"></div> <div id="page"></div> </form> </body> search.php [the relevant part]: $self = $_SERVER['PHP_SELF']; $limit = 5; //Number of results per page $numpages=ceil($totalrows/$limit); $query = $query." ORDER BY idQuotes LIMIT " . ($page-1)*$limit . ",$limit"; $result = mysql_query($query, $conn) or die('Error:' .mysql_error()); ?> <div class="caption">Search Results</div> <div class="center_div"> <table> <?php while ($row= mysql_fetch_array($result, MYSQL_ASSOC)) { $cQuote = highlightWords(htmlspecialchars($row['cQuotes']), $search_result); ?> <tr> <td style="text-align:right; font-size:15px;"><?php h($row['cArabic']); ?></td> <td style="font-size:16px;"><?php echo $cQuote; ?></td> <td style="font-size:12px;"><?php h($row['vAuthor']); ?></td> <td style="font-size:12px; font-style:italic; text-align:right;"><?php h($row['vReference']); ?></td> </tr> <?php } ?> </table> </div> <?php //Create and print the Navigation bar $nav=""; if($page > 1) { $nav .= "<a href=\"$self?page=" . ($page-1) . "&q=" .urlencode($search_result) . "\">< Prev</a>"; $first = "<a href=\"$self?page=1&q=" .urlencode($search_result) . "\"><< First</a>" ; } else { $nav .= " "; $first = " "; } for($i = 1 ; $i <= $numpages ; $i++) { if($i == $page) { $nav .= "<B>$i</B>"; }else{ $nav .= "<a href=\"$self?page=" . $i . "&q=" .urlencode($search_result) . "\">$i</a>"; } } if($page < $numpages) { $nav .= "<a href=\"$self?page=" . ($page+1) . "&q=" .urlencode($search_result) . "\">Next ></a>"; $last = "<a href=\"$self?page=$numpages&q=" .urlencode($search_result) . "\">Last >></a> "; } else { $nav .= " "; $last = " "; } echo "<br /><br />" . $first . $nav . $last; }

Read the article

Creating a new plugin for mpld3

- by sjp14051

Toward learning how to create a new mpld3 plugin, I took an existing example, LinkedDataPlugin (http://mpld3.github.io/examples/heart_path.html), and modified it slightly by deleting references to lines object. That is, I created the following: class DragPlugin(plugins.PluginBase): JAVASCRIPT = r""" mpld3.register_plugin("drag", DragPlugin); DragPlugin.prototype = Object.create(mpld3.Plugin.prototype); DragPlugin.prototype.constructor = DragPlugin; DragPlugin.prototype.requiredProps = ["idpts", "idpatch"]; DragPlugin.prototype.defaultProps = {} function DragPlugin(fig, props){ mpld3.Plugin.call(this, fig, props); }; DragPlugin.prototype.draw = function(){ var patchobj = mpld3.get_element(this.props.idpatch, this.fig); var ptsobj = mpld3.get_element(this.props.idpts, this.fig); var drag = d3.behavior.drag() .origin(function(d) { return {x:ptsobj.ax.x(d[0]), y:ptsobj.ax.y(d[1])}; }) .on("dragstart", dragstarted) .on("drag", dragged) .on("dragend", dragended); patchobj.path.attr("d", patchobj.datafunc(ptsobj.offsets, patchobj.pathcodes)); patchobj.data = ptsobj.offsets; ptsobj.elements() .data(ptsobj.offsets) .style("cursor", "default") .call(drag); function dragstarted(d) { d3.event.sourceEvent.stopPropagation(); d3.select(this).classed("dragging", true); } function dragged(d, i) { d[0] = ptsobj.ax.x.invert(d3.event.x); d[1] = ptsobj.ax.y.invert(d3.event.y); d3.select(this) .attr("transform", "translate(" + [d3.event.x,d3.event.y] + ")"); patchobj.path.attr("d", patchobj.datafunc(ptsobj.offsets, patchobj.pathcodes)); } function dragended(d, i) { d3.select(this).classed("dragging", false); } } mpld3.register_plugin("drag", DragPlugin); """ def __init__(self, points, patch): print "Points ID : ", utils.get_id(points) self.dict_ = {"type": "drag", "idpts": utils.get_id(points), "idpatch": utils.get_id(patch)} However, when I try to link the plugin to a figure, as in plugins.connect(fig, DragPlugin(points[0], patch)) I get an error, 'module' is not callable, pointing to this line. What does this mean and why doesn't it work? Thanks. I'm adding additional code to show that linking more than one Plugin might be problematic. But this may be entirely due to some silly mistake on my part, or there is a way around it. The following code based on LinkedViewPlugin generates three panels, in which the top and the bottom panel are supposed to be identical. Mouseover in the middle panel was expected to control the display in the top and bottom panels, but updates occur in the bottom panel only. It would be nice to be able to figure out how to reflect the changes in multiple panels. Thanks. import matplotlib import matplotlib.pyplot as plt import numpy as np import mpld3 from mpld3 import plugins, utils class LinkedView(plugins.PluginBase): """A simple plugin showing how multiple axes can be linked""" JAVASCRIPT = """ mpld3.register_plugin("linkedview", LinkedViewPlugin); LinkedViewPlugin.prototype = Object.create(mpld3.Plugin.prototype); LinkedViewPlugin.prototype.constructor = LinkedViewPlugin; LinkedViewPlugin.prototype.requiredProps = ["idpts", "idline", "data"]; LinkedViewPlugin.prototype.defaultProps = {} function LinkedViewPlugin(fig, props){ mpld3.Plugin.call(this, fig, props); }; LinkedViewPlugin.prototype.draw = function(){ var pts = mpld3.get_element(this.props.idpts); var line = mpld3.get_element(this.props.idline); var data = this.props.data; function mouseover(d, i){ line.data = data[i]; line.elements().transition() .attr("d", line.datafunc(line.data)) .style("stroke", this.style.fill); } pts.elements().on("mouseover", mouseover); }; """ def __init__(self, points, line, linedata): if isinstance(points, matplotlib.lines.Line2D): suffix = "pts" else: suffix = None self.dict_ = {"type": "linkedview", "idpts": utils.get_id(points, suffix), "idline": utils.get_id(line), "data": linedata} class LinkedView2(plugins.PluginBase): """A simple plugin showing how multiple axes can be linked""" JAVASCRIPT = """ mpld3.register_plugin("linkedview", LinkedViewPlugin2); LinkedViewPlugin2.prototype = Object.create(mpld3.Plugin.prototype); LinkedViewPlugin2.prototype.constructor = LinkedViewPlugin2; LinkedViewPlugin2.prototype.requiredProps = ["idpts", "idline", "data"]; LinkedViewPlugin2.prototype.defaultProps = {} function LinkedViewPlugin2(fig, props){ mpld3.Plugin.call(this, fig, props); }; LinkedViewPlugin2.prototype.draw = function(){ var pts = mpld3.get_element(this.props.idpts); var line = mpld3.get_element(this.props.idline); var data = this.props.data; function mouseover(d, i){ line.data = data[i]; line.elements().transition() .attr("d", line.datafunc(line.data)) .style("stroke", this.style.fill); } pts.elements().on("mouseover", mouseover); }; """ def __init__(self, points, line, linedata): if isinstance(points, matplotlib.lines.Line2D): suffix = "pts" else: suffix = None self.dict_ = {"type": "linkedview", "idpts": utils.get_id(points, suffix), "idline": utils.get_id(line), "data": linedata} fig, ax = plt.subplots(3) # scatter periods and amplitudes np.random.seed(0) P = 0.2 + np.random.random(size=20) A = np.random.random(size=20) x = np.linspace(0, 10, 100) data = np.array([[x, Ai * np.sin(x / Pi)] for (Ai, Pi) in zip(A, P)]) points = ax[1].scatter(P, A, c=P + A, s=200, alpha=0.5) ax[1].set_xlabel('Period') ax[1].set_ylabel('Amplitude') # create the line object lines = ax[0].plot(x, 0 * x, '-w', lw=3, alpha=0.5) ax[0].set_ylim(-1, 1) ax[0].set_title("Hover over points to see lines") linedata = data.transpose(0, 2, 1).tolist() plugins.connect(fig, LinkedView(points, lines[0], linedata)) # second set of lines exactly the same but in a different panel lines2 = ax[2].plot(x, 0 * x, '-w', lw=3, alpha=0.5) ax[2].set_ylim(-1, 1) ax[2].set_title("Hover over points to see lines #2") plugins.connect(fig, LinkedView2(points, lines2[0], linedata)) mpld3.show()

Read the article

Odd problem with IE8 and z-index CSS property

- by DK39

I not been able to put one DIV over his parent DIV in Internet Explorer. With Firefox is working as suposed to. The odd part is that if I open the html file directly in IE, everything works fine. But if I upload to the server and open from there, the div is hidden underneath his parent. I've tried several z-index combinations and none works. Here's the code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Test</title> <meta http-equiv="content-type" content="text-html; charset=utf-8" /> <style type="text/css"> .col { float:left; width:310px; margin-right:13px; } .art { position:relative; border-bottom: 1px solid #d0d0d0; font: normal normal bold 11px Arial,Verdana,Helvetica; color:#A0A0A0; width:310px; height:50px; top:0px; left: 0px; margin-right:10px; background-color:#F0F0F0; } .art a { padding:3px; display:block; width:304px; height:100%; color:#707070; } .art a:visited { color:#A0A0A0; } .art a:hover { background-color:#E0E0E0; } .box { z-index:1000; background-color:#A0A0A0; color:#404040; font: normal normal bold 11px Arial,Verdana,Helvetica; display:none; position:absolute; top:30px; left:10px; text-align:left; border:3px solid #707070; margin:5px 0px 5px 5px; font-size:10px; color:White; width:100%; } </style> <script type="text/javascript"> function sh(obj) { var el = document.getElementById(obj); if ( el.style.display != 'block' ) { el.style.display = 'block'; } else { el.style.display = 'none'; } } </script> </head> <body> <div class="col"> <div class="art"> <a href="" target="_blank" onmouseover="javascript:sh('i0')" onmouseout="javascript:sh('i0')">Title 1</a> <div id="i0" class="box"> <div class="text"> Les "chemises rouges" manifestent depuis la mi-mars pour faire tomber le gouvernement et occupent depuis trois semaines un quartier touristique et commerçant autour duquel ils ont érigé des barricades. </div> </div> </div> <div class="art"> <a href="" target="_blank" onmouseover="javascript:sh('i1')" onmouseout="javascript:sh('i1')">Title2</a> <div id="i1" class="box"> <div class="text"> Une association ardéchoise accueillant des séminaires de "bien-être" et de "développement personnel" a refusé d'accueillir un stage de danse en invoquant l'homosexualité des participants, ont indiqué aujourd'hui les organisateurs. </div> </div> </div> </div> </body> </html> What's is going on here?

Search Results

Search found 16704 results on 669 pages for 'wpf style'.

Page 336/669 | < Previous Page | 332 333 334 335 336 337 338 339 340 341 342 343 | Next Page >

- by user169867

- by artlung

- by Shamin

- by Stasio

- by eerongal

- by user277314

- by nikolaosk

- by James

- by user225269

- by Paul White

- by Michal Bozydar Pawlowski

- by MarkPearl

- by bconlon

- by sarah

- by Liam McLennan

- by lkahtz

- by Neurofluxation

- by Sohail

- by Chris Skardon

- by rav83

- by Kyle Sevenoaks

- by fusion

- by fusion

- by sjp14051

- by DK39

< Previous Page | 332 333 334 335 336 337 338 339 340 341 342 343 | Next Page >