Search Results

Search found 14455 results on 579 pages for 'black background'.

Page 140/579 | < Previous Page | 136 137 138 139 140 141 142 143 144 145 146 147  | Next Page >

  • Multiple Components in a JTree Node Renderer & Node Editor

    - by Samad Lotia
    I am attempting to create a JTree where a node has several components: a JPanel that holds a JCheckBox, followed by a JLabel, then a JComboBox. I have attached the code at the bottom if one wishes to run it. Fortunately the JTree correctly renders the components. However when I click on the JComboBox, the node disappears; if I click on the JCheckBox, it works fine. It seems that I am doing something wrong with how the TreeCellEditor is being set up. How could I resolve this issue? Am I going beyond the capabilities of JTree? Here's a quick overview of the code I have posted below. The class EntityListDialog merely creates the user interface. It is not useful to understand it other than the createTree method. Node is the data structure that holds information about each node in the JTree. All Nodes have a name, but samples may be null or an empty array. This should be evident by looking at EntityListDialog's createTree method. The name is used as the text of the JCheckBox. If samples is non-empty, it is used as the contents of the JCheckBox. NodeWithSamplesRenderer renders Nodes whose samples are non-empty. It creates the complicated user interface with the JPanel consisting of the JCheckBox and the JComboBox. NodeWithoutSamplesRenderer creates just a JCheckBox when samples is empty. RendererDispatcher decides whether to use a NodeWithSamplesRenderer or a NodeWithoutSamplesRenderer. This entirely depends on whether Node has a non-empty samples member or not. It essentially functions as a means for the NodeWith*SamplesRenderer to plug into the JTree. Code listing: import java.awt.*; import java.awt.event.*; import java.util.*; import javax.swing.*; import javax.swing.tree.*; public class EntityListDialog { final JDialog dialog; final JTree entitiesTree; public EntityListDialog() { dialog = new JDialog((Frame) null, "Test"); entitiesTree = createTree(); JScrollPane entitiesTreeScrollPane = new JScrollPane(entitiesTree); JCheckBox pathwaysCheckBox = new JCheckBox("Do additional searches"); JButton sendButton = new JButton("Send"); JButton cancelButton = new JButton("Cancel"); JButton selectAllButton = new JButton("All"); JButton deselectAllButton = new JButton("None"); dialog.getContentPane().setLayout(new GridBagLayout()); GridBagConstraints c = new GridBagConstraints(); JPanel selectPanel = new JPanel(new FlowLayout(FlowLayout.LEFT)); selectPanel.add(new JLabel("Select: ")); selectPanel.add(selectAllButton); selectPanel.add(deselectAllButton); c.gridx = 0; c.gridy = 0; c.weightx = 1.0; c.weighty = 0.0; c.fill = GridBagConstraints.HORIZONTAL; dialog.getContentPane().add(selectPanel, c); c.gridx = 0; c.gridy = 1; c.weightx = 1.0; c.weighty = 1.0; c.fill = GridBagConstraints.BOTH; c.insets = new Insets(0, 5, 0, 5); dialog.getContentPane().add(entitiesTreeScrollPane, c); c.gridx = 0; c.gridy = 2; c.weightx = 1.0; c.weighty = 0.0; c.insets = new Insets(0, 0, 0, 0); c.fill = GridBagConstraints.HORIZONTAL; dialog.getContentPane().add(pathwaysCheckBox, c); JPanel buttonsPanel = new JPanel(new FlowLayout(FlowLayout.RIGHT)); buttonsPanel.add(sendButton); buttonsPanel.add(cancelButton); c.gridx = 0; c.gridy = 3; c.weightx = 1.0; c.weighty = 0.0; c.fill = GridBagConstraints.HORIZONTAL; dialog.getContentPane().add(buttonsPanel, c); dialog.pack(); dialog.setVisible(true); } public static void main(String[] args) { EntityListDialog dialog = new EntityListDialog(); } private static JTree createTree() { DefaultMutableTreeNode root = new DefaultMutableTreeNode( new Node("All Entities")); root.add(new DefaultMutableTreeNode( new Node("Entity 1", "Sample A", "Sample B", "Sample C"))); root.add(new DefaultMutableTreeNode( new Node("Entity 2", "Sample D", "Sample E", "Sample F"))); root.add(new DefaultMutableTreeNode( new Node("Entity 3", "Sample G", "Sample H", "Sample I"))); JTree tree = new JTree(root); RendererDispatcher rendererDispatcher = new RendererDispatcher(tree); tree.setCellRenderer(rendererDispatcher); tree.setCellEditor(rendererDispatcher); tree.setEditable(true); return tree; } } class Node { final String name; final String[] samples; boolean selected; int selectedSampleIndex; public Node(String name, String... samples) { this.name = name; this.selected = false; this.samples = samples; if (samples == null) { this.selectedSampleIndex = -1; } else { this.selectedSampleIndex = 0; } } public boolean isSelected() { return selected; } public void setSelected(boolean selected) { this.selected = selected; } public String toString() { return name; } public int getSelectedSampleIndex() { return selectedSampleIndex; } public void setSelectedSampleIndex(int selectedSampleIndex) { this.selectedSampleIndex = selectedSampleIndex; } public String[] getSamples() { return samples; } } interface Renderer { public void setForeground(final Color foreground); public void setBackground(final Color background); public void setFont(final Font font); public void setEnabled(final boolean enabled); public Component getComponent(); public Object getContents(); } class NodeWithSamplesRenderer implements Renderer { final DefaultComboBoxModel comboBoxModel = new DefaultComboBoxModel(); final JPanel panel = new JPanel(); final JCheckBox checkBox = new JCheckBox(); final JLabel label = new JLabel(" Samples: "); final JComboBox comboBox = new JComboBox(comboBoxModel); final JComponent components[] = {panel, checkBox, comboBox, label}; public NodeWithSamplesRenderer() { Boolean drawFocus = (Boolean) UIManager.get("Tree.drawsFocusBorderAroundIcon"); if (drawFocus != null) { checkBox.setFocusPainted(drawFocus.booleanValue()); } for (int i = 0; i < components.length; i++) { components[i].setOpaque(true); } panel.add(checkBox); panel.add(label); panel.add(comboBox); } public void setForeground(final Color foreground) { for (int i = 0; i < components.length; i++) { components[i].setForeground(foreground); } } public void setBackground(final Color background) { for (int i = 0; i < components.length; i++) { components[i].setBackground(background); } } public void setFont(final Font font) { for (int i = 0; i < components.length; i++) { components[i].setFont(font); } } public void setEnabled(final boolean enabled) { for (int i = 0; i < components.length; i++) { components[i].setEnabled(enabled); } } public void setContents(Node node) { checkBox.setText(node.toString()); comboBoxModel.removeAllElements(); for (int i = 0; i < node.getSamples().length; i++) { comboBoxModel.addElement(node.getSamples()[i]); } } public Object getContents() { String title = checkBox.getText(); String[] samples = new String[comboBoxModel.getSize()]; for (int i = 0; i < comboBoxModel.getSize(); i++) { samples[i] = comboBoxModel.getElementAt(i).toString(); } Node node = new Node(title, samples); node.setSelected(checkBox.isSelected()); node.setSelectedSampleIndex(comboBoxModel.getIndexOf(comboBoxModel.getSelectedItem())); return node; } public Component getComponent() { return panel; } } class NodeWithoutSamplesRenderer implements Renderer { final JCheckBox checkBox = new JCheckBox(); public NodeWithoutSamplesRenderer() { Boolean drawFocus = (Boolean) UIManager.get("Tree.drawsFocusBorderAroundIcon"); if (drawFocus != null) { checkBox.setFocusPainted(drawFocus.booleanValue()); } } public void setForeground(final Color foreground) { checkBox.setForeground(foreground); } public void setBackground(final Color background) { checkBox.setBackground(background); } public void setFont(final Font font) { checkBox.setFont(font); } public void setEnabled(final boolean enabled) { checkBox.setEnabled(enabled); } public void setContents(Node node) { checkBox.setText(node.toString()); } public Object getContents() { String title = checkBox.getText(); Node node = new Node(title); node.setSelected(checkBox.isSelected()); return node; } public Component getComponent() { return checkBox; } } class NoNodeRenderer implements Renderer { final JLabel label = new JLabel(); public void setForeground(final Color foreground) { label.setForeground(foreground); } public void setBackground(final Color background) { label.setBackground(background); } public void setFont(final Font font) { label.setFont(font); } public void setEnabled(final boolean enabled) { label.setEnabled(enabled); } public void setContents(String text) { label.setText(text); } public Object getContents() { return label.getText(); } public Component getComponent() { return label; } } class RendererDispatcher extends AbstractCellEditor implements TreeCellRenderer, TreeCellEditor { final static Color selectionForeground = UIManager.getColor("Tree.selectionForeground"); final static Color selectionBackground = UIManager.getColor("Tree.selectionBackground"); final static Color textForeground = UIManager.getColor("Tree.textForeground"); final static Color textBackground = UIManager.getColor("Tree.textBackground"); final JTree tree; final NodeWithSamplesRenderer nodeWithSamplesRenderer = new NodeWithSamplesRenderer(); final NodeWithoutSamplesRenderer nodeWithoutSamplesRenderer = new NodeWithoutSamplesRenderer(); final NoNodeRenderer noNodeRenderer = new NoNodeRenderer(); final Renderer[] renderers = { nodeWithSamplesRenderer, nodeWithoutSamplesRenderer, noNodeRenderer }; Renderer renderer = null; public RendererDispatcher(JTree tree) { this.tree = tree; Font font = UIManager.getFont("Tree.font"); if (font != null) { for (int i = 0; i < renderers.length; i++) { renderers[i].setFont(font); } } } public Component getTreeCellRendererComponent(JTree tree, Object value, boolean selected, boolean expanded, boolean leaf, int row, boolean hasFocus) { final Node node = extractNode(value); if (node == null) { renderer = noNodeRenderer; noNodeRenderer.setContents(tree.convertValueToText( value, selected, expanded, leaf, row, false)); } else { if (node.getSamples() == null || node.getSamples().length == 0) { renderer = nodeWithoutSamplesRenderer; nodeWithoutSamplesRenderer.setContents(node); } else { renderer = nodeWithSamplesRenderer; nodeWithSamplesRenderer.setContents(node); } } renderer.setEnabled(tree.isEnabled()); if (selected) { renderer.setForeground(selectionForeground); renderer.setBackground(selectionBackground); } else { renderer.setForeground(textForeground); renderer.setBackground(textBackground); } renderer.getComponent().repaint(); renderer.getComponent().invalidate(); renderer.getComponent().validate(); return renderer.getComponent(); } public Component getTreeCellEditorComponent( JTree tree, Object value, boolean selected, boolean expanded, boolean leaf, int row) { return getTreeCellRendererComponent( tree, value, true, expanded, leaf, row, true); } public Object getCellEditorValue() { return renderer.getContents(); } public boolean isCellEditable(final EventObject event) { if (!(event instanceof MouseEvent)) { return false; } final MouseEvent mouseEvent = (MouseEvent) event; final TreePath path = tree.getPathForLocation( mouseEvent.getX(), mouseEvent.getY()); if (path == null) { return false; } Object node = path.getLastPathComponent(); if (node == null || (!(node instanceof DefaultMutableTreeNode))) { return false; } DefaultMutableTreeNode treeNode = (DefaultMutableTreeNode) node; Object userObject = treeNode.getUserObject(); return (userObject instanceof Node); } private static Node extractNode(Object value) { if ((value != null) && (value instanceof DefaultMutableTreeNode)) { DefaultMutableTreeNode node = (DefaultMutableTreeNode) value; Object userObject = node.getUserObject(); if ((userObject != null) && (userObject instanceof Node)) { return (Node) userObject; } } return null; } }

    Read the article

  • Content Container Overlaps Menu?

    - by Harold
    I'm currently working on a Joomla template using CSS divs. I have a header set up with our logo image in a div floated to the left, an adspace floated to the right, and the menu bar on the bottom. My content is divided into three div columns that are contained in "container.": the left column is floated left, the center is not floated, and the right is floated to the right. The problem is the "container" for the three content divs is overlapping the menu, as you can see in this image: http://www.ndpstudentcouncil.org/images/shot1.png Here's the HTML code: > <body> <div id="backdrop"> <div > id="wrapper"> <div id="header"> > <div id="topimage"> </div> > <div id="adspace1"><jdoc:include > type="modules" name="Ad Space #1" /> > This will be the location for our > "newsflash" items. </div> > > <div id="ddtopmenubar" > class="mattblackmenu"> > <ul> > <li><a href="http://www.ndpstudentcouncil.org">Home</a></li> > <li><a href="http://www.dynamicdrive.com/new.htm" rel="ddsubmenu1">DHTML</a></li> > <li><a href="http://www.dynamicdrive.com/style/" > rel="ddsubmenu2">CSS</a></li> > <li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li> > <li><a href="http://tools.dynamicdrive.com/" > rel="ddsubmenu3">Web Tools</a></li> > </ul> > <script type="text/javascript" src="js/ddlevelsmenu.js"> > ddlevelsmenu.setup("ddtopmenubar", "topbar") > //ddlevelsmenu.setup("mainmenuid", > "topbar|sidebar") > </script> > <ul id="ddsubmenu1" class="ddsubmenustyle"> > <li><a href="#">Item 1a</a></li> > <li><a href="#">Item 2a</a></li> > <li><a href="#">Item Folder 3a</a> > <ul> > <li><a href="#">Sub Item 3.1a</a></li> > </ul> > </li> > <li><a href="#">Item 4a</a></li> > <li><a href="#">Item Folder 5a</a> > <ul> > <li><a href="#">Sub Item 5.1a</a></li> > <li><a href="#">Item Folder 5.2a</a> > <ul> > <li><a href="#">Sub Item 5.2.1a</a></li> > <li><a href="#">Sub Item 5.2.2a</a></li> > </ul> > </li> > </ul> > </a> > </li> > <li><a href="#">Item 6a</a></li> > </ul> </div> </div> > <div id="container"> <script language="javascript"> > matchHeight=function(){ > var divs,contDivs,maxHeight,divHeight,d; > // get all <div> elements in the document > divs=document.getElementsByTagName('div'); > contDivs=[]; > // initialize maximum height value > maxHeight=0; > // iterate over all <div> elements in the document > for(var i=0;i<divs.length;i++){ > // make collection with <div> elements with class attribute > 'container' > if(/\bcontainer\b/.test(divs[i].className)){ > d=divs[i]; > contDivs[contDivs.length]=d; > // determine height for <div> element > if(d.offsetHeight){ > divHeight=d.offsetHeight; > } > else if(d.style.pixelHeight){ > divHeight=d.style.pixelHeight; > } > // calculate maximum height > maxHeight=Math.max(maxHeight,divHeight); > } > } > // assign maximum height value to all of container <div> elements > for(var i=0;i<contDivs.length;i++){ > contDivs[i].style.height=maxHeight; > } > } > // execute function when page loads > window.onload=function(){ > if(document.getElementsByTagName){ > matchHeight(); > } > } > </script> <div id="left"> > <jdoc:include type="modules" name="left" /> </div> <div > id="middle"> > <jdoc:include type="component" /> </div> <div id="right"> > <jdoc:include type="modules" name="right" /> > </div> > </div> > <div id="footer" class="clear"><jdoc:include > type="modules" name="footer" /> > &copy; 2010 NDP Student Council<br > />Website Development Subcommitee > </div> </div> </div> </body> The CSS: > #backdrop { width:100%; height:100%; background: #FFFFFF > url(../images/gradient.jpg) repeat-x; > } > > #wrapper { margin:auto; width:95%; height:95%; border-right:thick solid > black; border-bottom:thick solid > black; border-top:thick solid black; > border-left:thick solid black; > background-color:white; } > > #header { height:131px; width:100%; background-color: #FFFFFF; > border-bottom:thick solid black; } > > #topimage { float:left; height:131px; width:63%; > background-image: > url("../images/ndps2.png"); > background-repeat:no-repeat; } > > #adspace1 { float:right; width:27%; height:131px; } > > #container { clear:both; } > #left{ width:20%; float:left; padding:5px; text-align:center; } > > #middle{ width:60%; padding:5px; text-align:center; } > > #right{ float:right; width:20%; padding:5px; text-align:right; } > #footer { border-top:thick solid black; width:100%; > text-align:center; } .clear { > clear:both; } Here is the CSS for the menu itself, which is from DynamicDrive.com: > .mattblackmenu ul{ margin: 0; padding: > 0; font: bold 12px Verdana; > list-style-type: none; border-bottom: > 1px solid gray; background: #414141; > overflow: hidden; width: 100%; > clear:both; } > > .mattblackmenu li{ display: inline; > margin: 0; } > > .mattblackmenu li a{ float: left; > display: block; text-decoration: none; > margin: 0; padding: 6px 8px; /*padding > inside each tab*/ border-right: 1px > solid white; /*right divider between > tabs*/ color: white; background: > #414141; Thanks for the help!

    Read the article

  • HTML Email template Table help needed

    - by user1870691
    I need help setting up an email newsletter template as one of the columns is not being displayed properly, the column containing heading 2 is not being displayed properly it is being displayed towards right side of the page instead of aligning with the template elements. Here is the code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> </head> <body> <!--Table Start-->&nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; <table border="0" align="center" cellpadding="0" cellspacing="0" class="cont-bg" bgcolor="#f1f1f1" style="background-color: #f1f1f1; padding: 27px 0px 0px; width: 100%; background-position: initial initial; background-repeat: initial initial;"> <tbody> <tr> <td align="center" valign="top" width="1133">&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; <!--Main Part Start-->&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; <table border="0" align="center" cellpadding="0" cellspacing="0" style="width: 650px;"> <tbody> <tr> <td align="left" valign="top">&nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; <!--Header Part Start-->&nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp; <table border="0" align="center" cellpadding="0" cellspacing="0" style="width: 650px; height: 682px;"> <tbody> <tr> <td colspan="2" align="right" valign="top" mc:edit="view" style="font: normal 12px arial, helvetica, sans-serif; color: #000000; padding-bottom: 22px;">You can&rsquo;t see this email?<a href="#"> View it in your browser.</a></td> </tr> <tr><!--Logo Start--> <td width="287" align="left" valign="top" bgcolor="#ffffff" style="background: #fff;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p align="left"><br /> <img src="commstellogo.png" width="208" height="45" border="0" align="left" /></p> </td> <!--Logo End--><!--Menu Part Start--> <td width="363" height="94" align="left" valign="middle" bgcolor="#ffffff" style="background: #fff;">&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; <table border="0" cellspacing="0" cellpadding="0" style="width: 340px;"> <tbody> <tr> <td align="right" valign="top" mc:edit="date" style="font: bold 18px arial, helvetica, sans-serif; color: #2f2f2f; text-transform: uppercase; padding-bottom: 8px;">01727 260 101</td> </tr> <tr> <td align="left" valign="top">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <table border="0" cellspacing="0" cellpadding="0" style="width: 340px;"> <tbody> <tr> <td width="16" align="left" valign="top"><img mc:edit="h-icin" src="images/home-icon.png" width="16" height="19" alt="" /></td> <td width="64" align="left" valign="middle" mc:edit="h-text" style="font: bold 12px arial, helvetica, sans-serif; color: #414141; padding-left: 9px;"><a href="#" style="color: #414141;">Home</a></td> <td width="16" align="left" valign="top"><img mc:edit="s-icon" src="images/setting.png" width="16" height="19" alt="" /></td> <td width="79" align="left" valign="middle" mc:edit="s-text" style="font: bold 12px arial, helvetica, sans-serif; color: #414141; padding-left: 9px;"><a href="#" style="color: #414141;">Services</a></td> <td width="16" align="left" valign="top"><img mc:edit="a-icon" src="images/about-us.png" width="16" height="19" alt="" /></td> <td width="77" align="left" valign="middle" mc:edit="a-text" style="font: bold 12px arial, helvetica, sans-serif; color: #414141; padding-left: 9px;"><a href="#" style="color: #414141;">About us</a></td> <td width="18" align="left" valign="top"><img mc:edit="s-icon" src="images/support.png" width="16" height="19" alt="" /></td> <td width="54" align="right" valign="middle" mc:edit="s-text" style="font: bold 12px arial, helvetica, sans-serif; color: #414141; padding-left: 9px;"><a href="#">Contact</a></td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> <!--Menu Part End--></tr> <tr> <td colspan="2" align="left" valign="top" height="548">&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; <!--Banner Start-->&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; <table border="0" cellspacing="0" cellpadding="0" style="width: 650px;"> <tbody> <tr> <td align="left" valign="top"><img mc:edit="banner-image" src="#" width="649" height="356" alt="" style="display: block;" /></td> </tr> <tr> <td align="left" valign="top" bgcolor="#2f2f2f" style="padding: 25px 0px 18px 20px; background: #2f2f2f;">&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; <table border="0" cellspacing="0" cellpadding="0" style="width: 611px;"> <tbody> <tr> <td align="left" valign="top" mc:edit="banner-title" style="font: normal 24px arial, helvetica, sans-serif; color: #fff; padding-bottom: 8px;">Heading Area</td> </tr> <tr> <td align="left" valign="top" mc:edit="banner-text" style="font: normal 12px arial, helvetica, sans-serif; color: #fff; line-height: 18px; padding: 0px 0px 12px 4px;">Vivamus interdum mauris urna. Nullam egestas augue elit. Aliquam pretium elit varius metus hendrerit volutpat. <b>20% off</b> Vivamus interdum mauris urna. Nullam egestas augue elit. Aliquam pretium elit varius metus hendrerit volutpat.</td> </tr> <tr> <td align="left" valign="top"><a href="#><img mc:edit="banner-read-more" src="#" width="128" height="31" alt="" /></a></td> </tr> </tbody> </table> </td> </tr> </tbody> </table> &nbsp; <!--Banner End--> &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;</td> </tr> </tbody> </table> <!--Header Part End--> &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;</td> </tr> <tr><!--Body Part Start--></tr> <tr> <td width="330" align="left" valign="top">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <!--Two column 1 Start-->&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <table border="0" cellspacing="0" cellpadding="0" style="width: 320px;"> <tbody> <tr> <td align="left" valign="top"><img mc:edit="two-coulmn-image1" src="businesstelephone.png" width="320" height="172" alt="" style="display: block;" /></td> </tr> <tr> <td align="left" valign="top" bgcolor="#2f2f2f" style="padding: 15px 0px 18px 20px; background: #2f2f2f;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; <table border="0" cellspacing="0" cellpadding="0" style="width: 288px;"> <tbody> <tr> <td align="left" valign="top" mc:edit="banner-title" style="font: normal 24px arial, helvetica, sans-serif; color: #fff; padding-bottom: 5px;">Heading 2</td> </tr> <tr> <td align="left" valign="top" mc:edit="banner-text" style="font: normal 12px arial, helvetica, sans-serif; color: #fff; line-height: 18px; padding: 0px 0px 12px 4px;">Praesent viverra dui in orci pulvinar convallis. Nunc interdum, metus eget adipiscing rutrum, leo quam accumsan tellus, eget . It's easy and hassle free!</td> </tr> <tr> <td align="left" valign="top"><a href="#"><img mc:edit="read-more" src="#" width="128" height="31" alt="" /></a></td> </tr> </tbody> </table> &nbsp; &nbsp;</td> </tr> </tbody> </table> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <!--Two column 1 End--> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</td> <td width="320" align="left" valign="top">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <!--Two column 2 Start-->&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <table border="0" cellspacing="0" cellpadding="0" style="width: 320px;"> <tbody> <tr> <td align="left" valign="top"><img mc:edit="two-coulmn-image2" src="mobiles.png" width="320" height="172" alt="" style="display: block;" /></td> </tr> <tr> <td align="left" valign="top" bgcolor="#2f2f2f" style="padding: 15px 0px 18px 20px; background: #2f2f2f;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; <table border="0" cellspacing="0" cellpadding="0" style="width: 288px;"> <tbody> <tr> <td align="left" valign="top" mc:edit="banner-title" style="font: normal 24px arial, helvetica, sans-serif; color: #fff; padding-bottom: 5px;">Heading 3</td> </tr> <tr> <td align="left" valign="top" mc:edit="banner-text" style="font: normal 12px arial, helvetica, sans-serif; color: #fff; line-height: 18px; padding: 0px 0px 12px 4px;">Nunc vel massa metus, vel varius mi. Sed sagittis consectetur nisi, sed imperdiet ipsum interdum non. Nunc consectetur odio et turpis eleifend semper. Pellentesque lorem purus</td> </tr> <tr> <td align="left" valign="top"><a href="#"><img mc:edit="read-more-1" src="images/read-more.png" width="128" height="31" alt="" /></a></td> </tr> </tbody> </table> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</td> </tr> </tbody> </table> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <!--Two column 2 End--> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</td> </tr> <!--Two column Part End--> <tr> <td>&nbsp;</td> </tr> </tbody> </table> </td> <!--Body Part End--></tr> <tr><!--Footer Part Start--> <td align="left" valign="top">&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; <table border="0" cellspacing="0" cellpadding="0" style="width: 687px;"> <tbody> <tr> <td align="center" valign="top" bgcolor="#ffffff" style="background: #fff; padding: 28px 0px 27px 0px;" width="687">&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; <table border="0" align="center" cellpadding="0" cellspacing="0" style="width: 675px;"> <tbody> <tr> <td align="center" valign="top" mc:edit="un-sp-text" style="font: normal 12px arial, helvetica, sans-serif; color: #737373; line-height: 18px;" width="675">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p align="center"><b>Copyright &copy; 2012 Company - Registered &amp; Dales 07765116</b></p> </td> </tr> <tr> <td align="center" valign="top" mc:edit="c-right-text" style="font: bold 12px arial, helvetica, sans-serif; color: #737373; line-height: 18px;" width="675">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p align="center">Company Address<br /> T: 023227 000 201 &nbsp;E: <a href="#">[email protected]</a> &nbsp;W: <a href="#">company</a></p> </td> </tr> </tbody> </table> </td> </tr> <tr> <td align="center" valign="top" style="padding: 20px 0px 35px 0px;" width="687">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p align="center">If you wish to unsubscribe from this email, please click here</p> </td> </tr> </tbody> </table> </td> <!--Footer Part End--></tr> </tbody> </table> <!--Main Part End--> &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <!--Table Start--> </body> </html>

    Read the article

  • WPF: adding Style to a slider

    - by user279244
    Hi I am using a Slider and putting a style element over it as follows... But however, I am not able to figure out why the style is not getting reflected. The RepeatButtons are not still visible. Thanks in advance <ResourceDictionary> <LinearGradientBrush x:Key="Stroke_Gradient" EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FF6E6E6E" Offset="0"/> <GradientStop Color="#FFFFFFFF" Offset="0.496"/> <GradientStop Color="#FF6E6E6E" Offset="1"/> </LinearGradientBrush> <Style x:Key="ScrollBar_RepeatButtonStyle1" d:IsControlPart="True" TargetType="{x:Type RepeatButton}"> <Setter Property="Background" Value="#FF6E6E6E"/> <Setter Property="BorderBrush" Value="#FFFFFFFF"/> <Setter Property="IsTabStop" Value="false"/> <Setter Property="Focusable" Value="false"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type RepeatButton}"> <Grid> <Rectangle Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="{TemplateBinding BorderThickness}"/> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> <ImageBrush x:Key="zoomBkgrnd" TileMode="None" ImageSource="zoombg.png" Stretch="Uniform"/> <Style x:Key="{x:Type Slider}" TargetType="{x:Type Slider}"> <Setter Property="Background" Value="{StaticResource zoomBkgrnd}"/> <Setter Property="BorderBrush" Value="{StaticResource zoomBkgrnd}"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type Slider}"> <Grid x:Name="GridRoot"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <!-- TickBar shows the ticks for Slider --> <TickBar Visibility="Collapsed" x:Name="TopTick" Height="4" SnapsToDevicePixels="True" Placement="Top" Fill="{StaticResource zoomBkgrnd}"/> <Border Grid.Row="1" Margin="0" x:Name="Border" Height="4" Background="{StaticResource zoomBkgrnd}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2"/> <!-- The Track lays out the repeat buttons and thumb --> <Track Grid.Row="1" x:Name="PART_Track"> <Track.Thumb> <Thumb Width="10" Height="20" /> </Track.Thumb> <Track.IncreaseRepeatButton> <RepeatButton Style="{DynamicResource ScrollBar_RepeatButtonStyle1}" Command="Slider.IncreaseLarge"/> </Track.IncreaseRepeatButton> <Track.DecreaseRepeatButton> <RepeatButton Style="{DynamicResource ScrollBar_RepeatButtonStyle1}" Command="Slider.DecreaseLarge"/> </Track.DecreaseRepeatButton> </Track> <TickBar Visibility="Collapsed" Grid.Row="2" x:Name="BottomTick" Height="4" SnapsToDevicePixels="True" Placement="Bottom" Fill="{TemplateBinding Foreground}"/> </Grid> <ControlTemplate.Triggers> <Trigger Property="TickPlacement" Value="TopLeft"> <Setter Property="Visibility" Value="Visible" TargetName="TopTick"/> </Trigger> <Trigger Property="TickPlacement" Value="BottomRight"> <Setter Property="Visibility" Value="Visible" TargetName="BottomTick"/> </Trigger> <Trigger Property="TickPlacement" Value="Both"> <Setter Property="Visibility" Value="Visible" TargetName="TopTick"/> <Setter Property="Visibility" Value="Visible" TargetName="BottomTick"/> </Trigger> <Trigger Property="IsEnabled" Value="false"> <Setter Property="Background" Value="{StaticResource zoomBkgrnd}" TargetName="Border"/> <Setter Property="BorderBrush" Value="{StaticResource zoomBkgrnd}" TargetName="Border"/> </Trigger> <!-- Use a rotation to create a Vertical Slider form the default Horizontal --> <Trigger Property="Orientation" Value="Vertical"> <Setter Property="LayoutTransform" TargetName="GridRoot"> <Setter.Value> <RotateTransform Angle="-90"/> </Setter.Value> </Setter> <!-- Track rotates itself based on orientation so need to force it back --> <Setter TargetName="PART_Track" Property="Orientation" Value="Horizontal"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> </ResourceDictionary>

    Read the article

  • Wpf Listbox and Togglebutton

    - by Tan
    Hi iam using a listbox to show a list of items. in the listbox i ahve an togglebutton on every item. When i click on the toggle button the state of the togglebutton is pressed. But when i am scrolling down in the listbox and scolls up again. The togglebutton state is not pressed. How can i prevent this please help. Heres my itemtemplate <ListBox.ItemTemplate> <DataTemplate> <StackPanel Margin="0,3,0,0"> <Border BorderBrush="Black" BorderThickness="1,1,1,1"> <Border.Background> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" MappingMode="RelativeToBoundingBox"> <GradientStop Color="#FFECECEC" Offset="1"/> <GradientStop Color="#FFE8E8E8"/> <GradientStop Color="#FFBDBDBD" Offset="0.153"/> <GradientStop Color="#FFE8E8E8" Offset="0.904"/> </LinearGradientBrush> </Border.Background> <Border.Style> <Style> <Style.Triggers> <DataTrigger Binding="{Binding Path=IsSelected, RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type ListBoxItem}}}" Value="True"> <Setter Property="Border.Height" Value="100"/> <Setter Property="Border.Background"> <Setter.Value> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" MappingMode="RelativeToBoundingBox"> <GradientStop Color="DarkGray" Offset="1"/> <GradientStop Color="#FFE8E8E8"/> <GradientStop Color="#FFBDBDBD" Offset="0.153"/> <GradientStop Color="DarkGray" Offset="0.904"/> </LinearGradientBrush> </Setter.Value> </Setter> </DataTrigger> </Style.Triggers> </Style> </Border.Style> <StackPanel Orientation="Horizontal" VerticalAlignment="Center"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="500"/> <ColumnDefinition Width="100"/> <ColumnDefinition Width="55"/> </Grid.ColumnDefinitions> <!--Pick number--> <StackPanel Grid.Column="0" VerticalAlignment="Center" Orientation="Vertical"> <TextBlock Text="{Binding Path=FtgNamn}" FontWeight="Bold" FontSize="22pt" FontFamily="Calibri"/> <TextBlock Text="{Binding Path=LevsAttBeskr}" FontSize="18pt" FontFamily="Calibri"/> </StackPanel> <!--Pick Quantity--> <StackPanel Grid.Column="1" VerticalAlignment="Center"> <TextBlock Text="{Binding Path=Antal}" FontSize="44pt" FontFamily="Calibri"/> </StackPanel> <!-- Checkbox--> <StackPanel Grid.Column="2" VerticalAlignment="Center" HorizontalAlignment="Center"> <ToggleButton Name="Check" Width="40" Height="40" Click="Check_Click" Tag="{Binding Path=Plocklista}"> <ToggleButton.Style> <Style TargetType="ToggleButton"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type ToggleButton}"> <Border x:Name="InnerBorder" Background="White" BorderBrush="Black" BorderThickness="1"/> <ControlTemplate.Triggers> <Trigger Property="IsChecked" Value="True"> <Setter TargetName="InnerBorder" Property="Background"> <Setter.Value> <ImageBrush ImageSource="/Images/button_ok.png"/> </Setter.Value> </Setter> <Setter TargetName="InnerBorder" Property="BorderThickness" Value="0"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> </ToggleButton.Style> </ToggleButton> </StackPanel> </Grid> <Border BorderBrush="Darkgray" BorderThickness="0,0,1,0"> </Border> <TextBlock Width="100" Text="{Binding Path=Quantity}" FontSize="44pt" FontFamily="Calibri"/> <CheckBox Width="78"/> </StackPanel> </Border> </StackPanel> </DataTemplate>

    Read the article

  • Coloring even heighten columns

    - by verror
    I try to set different a background colors for left and right columns and to maintain the same height. So I set a background color for outer wrapper ("container" div) so it will set a color to rightBar. But this didn't work. Online Demo I want it to work on all browsers. Markup: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>Test</title> </head> <body> <div class="contentcontainer"> <div class="container"> <div class="mainBar"> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> </div> <div class="rightBar"> <p>BAR Text BAR Text BAR Text</p> <p>BAR Text BAR Text BAR Text</p> <p>BAR Text BAR Text BAR Text</p> <p>BAR Text BAR Text BAR Text</p> <p>BAR Text BAR Text BAR Text</p> <p>BAR Text BAR Text BAR Text</p> <p>BAR Text BAR Text BAR Text</p> <p>BAR Text BAR Text BAR Text</p> <p>BAR Text BAR Text BAR Text</p> <p>BAR Text BAR Text BAR Text</p> </div> </div> </div> </body> </html> CSS: body { font-family: Verdana,Tahoma,Arial, "Trebuchet MS" ,Sans-Serif,Georgia,Courier, "Times New Roman" ,Serif; margin: 0px; padding: 0px; background: repeat-x scroll center bottom #C4DAE9; text-align:center; } .contentcontainer { } .container { margin-left: auto; margin-right: auto; margin-top:5px; width: 99%; text-align: left; background-color:Gray; clear:both; } .mainBar { width:70%; float:left; background-color:White; } .rightBar { width:30%; float:left; }

    Read the article

  • Creating a multi-column rollover image gallery with HTML 5

    - by nikolaosk
    I know it has been a while since I blogged about HTML 5. I have two posts in this blog about HTML 5. You can find them here and here.I am creating a small content website (only text,images and a contact form) for a friend of mine.He wanted to create a rollover gallery.The whole concept is that we have some small thumbnails on a page, the user hovers over them and they appear enlarged on a designated container/placeholder on a page. I am trying not to use Javascript scripts when I am using effects on a web page and this is what I will be doing in this post.  Well some people will say that HTML 5 is not supported in all browsers. That is true but most of the modern browsers support most of its recommendations. For people who still use IE6 some hacks must be devised.Well to be totally honest I cannot understand why anyone at this day and time is using IE 6.0.That really is beyond me.Well, the point of having a web browser is to be able to ENJOY the great experience that the WE? offers today.  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. 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.For the people who are not convinced yet that they should invest time and resources on becoming experts on HTML 5 I should point out that HTML 5 websites will be ranked higher than others. Search engines will be able to locate better the content of our site and its relevance/importance since it is using semantic tags. Let's move now to the actual hands-on example. In this case (since I am mad Liverpool supporter) I will create a rollover image gallery of Liverpool F.C legends. I create a folder in my desktop. I name it Liverpool Gallery.Then I create two subfolders in it, large-images (I place the large images in there) and thumbs (I place the small images in there).Then I create an empty .html file called LiverpoolLegends.html and an empty .css file called style.css.Please have a look at the HTML Markup that I typed in my fancy editor package below<!doctype html><html lang="en"><head><title>Liverpool Legends Gallery</title><meta charset="utf-8"><link rel="stylesheet" type="text/css" href="style.css"></head><body><header><h1>A page dedicated to Liverpool Legends</h1><h2>Do hover over the images with the mouse to see the full picture</h2></header><ul id="column1"><li><a href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=1153&postid=8927200#"><img src="thumbs/john-barnes.jpg" alt=""><img class="large" src="large-images/john-barnes-large.jpg" alt=""></a></li><li><a href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=1153&postid=8927200#"><img src="thumbs/ian-rush.jpg" alt=""><img class="large" src="large-images/ian-rush-large.jpg" alt=""></a></li><li><a href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=1153&postid=8927200#"><img src="thumbs/graeme-souness.jpg" alt=""><img class="large" src="large-images/graeme-souness-large.jpg" alt=""></a></li></ul><ul id="column2"><li><a href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=1153&postid=8927200#"><img src="thumbs/steven-gerrard.jpg" alt=""><img class="large" src="large-images/steven-gerrard-large.jpg" alt=""></a></li><li><a href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=1153&postid=8927200#"><img src="thumbs/kenny-dalglish.jpg" alt=""><img class="large" src="large-images/kenny-dalglish-large.jpg" alt=""></a></li><li><a href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=1153&postid=8927200#"><img src="thumbs/robbie-fowler.jpg" alt=""><img class="large" src="large-images/robbie-fowler-large.jpg" alt=""></a></li></ul><ul id="column3"><li><a href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=1153&postid=8927200#"><img src="thumbs/alan-hansen.jpg" alt=""><img class="large" src="large-images/alan-hansen-large.jpg" alt=""></a></li><li><a href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=1153&postid=8927200#"><img src="thumbs/michael-owen.jpg" alt=""><img class="large" src="large-images/michael-owen-large.jpg" alt=""></a></li></ul></body></html> It is very easy to follow the markup. Please have a look at the new doctype and the new semantic tag <header>. I have 3 columns and I place my images in there.There is a class called "large".I will use this class in my CSS code to hide the large image when the mouse is not on (hover) an image Make sure you validate your HTML 5 page in the validator found hereHave a look at the CSS code below that makes it all happen.img { border:none;}#column1 { position: absolute; top: 30; left: 100; }li { margin: 15px; list-style-type:none;}#column1 a img.large {  position: absolute; top: 0; left:700px; visibility: hidden;}#column1 a:hover { background: white;}#column1 a:hover img.large { visibility:visible;}#column2 { position: absolute; top: 30; left: 195px; }li { margin: 5px; list-style-type:none;}#column2 a img.large { position: absolute; top: 0; left:510px; margin-left:0; visibility: hidden;}#column2 a:hover { background: white;}#column2 a:hover img.large { visibility:visible;}#column3 { position: absolute; top: 30; left: 400px; width:108px;}li { margin: 5px; list-style-type:none;}#column3 a img.large { width: 260px; height:260px; position: absolute; top: 0; left:315px; margin-left:0; visibility: hidden;}#column3 a:hover { background: white;}#column3 a:hover img.large { visibility:visible;}?n the first line of the CSS code I set the images to have no border.Then I place the first column in the page and then remove the bullets from the list elements.Then I use the large CSS class to create a position for the large image and hide it.Finally when the hover event takes place I make the image visible.I repeat the process for the next two columns. I have tested the page with IE 10 and the latest versions of Opera,Chrome and Firefox.Feel free to style your HTML 5 gallery any way you want through the magic of CSS.I did not bother adding background colors and borders because that was beyond the scope of this post. Hope it helps!!!!

    Read the article

  • XHTML / CSS help?

    - by Chris Leah
    Basically on GunChester my project I have an few pixel wide gap between #login_top (top image holder) and the 3 CSS col's below, #login_left, #login_centre and #login_right so that my first question why? and how can I fix this, this is in FF, Chrome and IE. Secondly the BG image seems to be overlaying twice as in its stretched at the top then the full picture does display as it should. I did have it working but when trying to fix the pixel gap I must of messed something up but no idea what, so it is now going pear shape, lease help with both these situations :)? Css below: @charset "utf-8"; /* Autoher: Chris Leah Date: 20/04/2010 (C) GunChester.net / Chris Leah HTML and Body CSS */ html, body { background-image: url(../images/home/bg.png); background-repeat: repeat-x; background-color: #070a12; text-align: center; /* for IE */ font-family: Verdana, Tahoma, Arial, sans-serif, Helvetica; } /* Wrapper div */ #wrapper { margin: 0 auto; /* align for good browsers */ text-align: left; /* counter the body center */ height: auto; width: 932px; margin-top:100px; } /* Logo div inside wrapper div */ #wrapper #logo { position: relative; height: auto; width: auto; text-align: center; } /* Wrapper login top div */ #wrapper #login_top { position: relative; height: auto; width: auto; float: left; } /* Wrapper login left div */ #wrapper #login_left { float: left; width: 259px; position: relative; } /* Wrapper login centre div */ #wrapper #login_centre { height: 152px; width: 385px; float: left; background-color: #181F37; background-image: url(../images/home/login_area.png); } /* Wrapper login right div */ #wrapper #login_right { float: right; width: 277px; position: relative; margin-right: 11px; } HTML for page below... <!DOCTYPE html> <html> <head> <!-- Meta Info --> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- Page title --> <title>GunChester - Free Online Gangster RPG!</title> <!-- Link in CSS and JS files --> <link href="../css/home.css" rel="stylesheet" type="text/css" /> </head> <body> <!-- Content wrapper div layer --> <div id="wrapper"> <!-- Logo div layer --> <div id="logo"> <img src="../images/home/header.png" width="799" height="256" /> </div> <!-- Login top image div layer --> <div id="login_top"> <img src="../images/home/login_top.png" width="932" height="68" alt="Login Box Top Image" /> </div> <div id="login_left"> <img src="../images/home/login_left.png" width="259" height="152" alt="Login Left Image" /> </div> <!-- Login centre div layer --> <div id="login_centre"> test </div> <!-- Login right image div layer --> <div id="login_right"> <img src="../images/home/login_right.png" width="277" height="152" alt="Login Right Image" /> </div> </div> </body> </html>

    Read the article

  • Windows 7 doesn't boot after Ubuntu install

    - by Omu
    I had windows 7 installed on my pc, then I installed Ubuntu 10.10/ During the installation process I have chosen to manually set my partitions: I set a 10GB drive for ubuntu root 1GB drive for swap and for boot drive I've chosen the one used by windows 7 Now I can boot ubuntu, I have the windows 7 option in the boot list, but when I choose Windows 7, it shows me a black screen for a second and returns back to boot screen. Boot Info Script 0.55 dated February 15th, 2010 ============================= Boot Info Summary: ============================== = Windows is installed in the MBR of /dev/sda sda1: _________________________________________________________________________ File system: ntfs Boot sector type: Grub 2 Boot sector info: Grub 2 is installed in the boot sector of sda1 and looks at sector 304908237 of the same hard drive for core.img, but core.img can not be found at this location. No errors found in the Boot Parameter Block. Operating System: Windows 7 Boot files/dirs: /bootmgr /Boot/BCD /Windows/System32/winload.exe sda2: _________________________________________________________________________ File system: ntfs Boot sector type: Windows XP Boot sector info: No errors found in the Boot Parameter Block. Operating System: Boot files/dirs: sda3: _________________________________________________________________________ File system: Extended Partition Boot sector type: - Boot sector info: sda5: _________________________________________________________________________ File system: ext4 Boot sector type: - Boot sector info: Operating System: Ubuntu 10.10 Boot files/dirs: /boot/grub/grub.cfg /etc/fstab /boot/grub/core.img sda4: _________________________________________________________________________ File system: swap Boot sector type: - Boot sector info: =========================== Drive/Partition Info: ============================= Drive: sda ___________________ _____________________________________________________ Disk /dev/sda: 160.0 GB, 160041885696 bytes 255 heads, 63 sectors/track, 19457 cylinders, total 312581808 sectors Units = sectors of 1 * 512 = 512 bytes Sector size (logical/physical): 512 bytes / 512 bytes Partition Boot Start End Size Id System /dev/sda1 * 63 62,894,474 62,894,412 7 HPFS/NTFS /dev/sda2 62,894,478 291,579,749 228,685,272 7 HPFS/NTFS /dev/sda3 291,579,811 309,157,937 17,578,127 5 Extended /dev/sda5 291,579,813 309,157,937 17,578,125 83 Linux /dev/sda4 309,159,936 312,580,095 3,420,160 82 Linux swap / Solaris blkid -c /dev/null: ____________________________________________________________ Device UUID TYPE LABEL /dev/sda1 1266BB2766BB0A8D ntfs /dev/sda2 BEDBF1147C76F703 ntfs DATA /dev/sda3: PTTYPE="dos" /dev/sda4 dd38226d-c7c9-4ae5-a726-6d18d34a22e4 swap /dev/sda5 e1dafd1c-f855-406b-8f9a-f9d527c70255 ext4 /dev/sda: PTTYPE="dos" ============================ "mount | grep ^/dev output: =========================== Device Mount_Point Type Options /dev/sda5 / ext4 (rw,errors=remount-ro,commit=0) =========================== sda5/boot/grub/grub.cfg: =========================== # # DO NOT EDIT THIS FILE # # It is automatically generated by grub-mkconfig using templates # from /etc/grub.d and settings from /etc/default/grub # ### BEGIN /etc/grub.d/00_header ### if [ -s $prefix/grubenv ]; then set have_grubenv=true load_env fi set default="0" if [ "${prev_saved_entry}" ]; then set saved_entry="${prev_saved_entry}" save_env saved_entry set prev_saved_entry= save_env prev_saved_entry set boot_once=true fi function savedefault { if [ -z "${boot_once}" ]; then saved_entry="${chosen}" save_env saved_entry fi } function recordfail { set recordfail=1 if [ -n "${have_grubenv}" ]; then if [ -z "${boot_once}" ]; then save_env recordfail; fi; fi } function load_video { insmod vbe insmod vga } insmod part_msdos insmod ext2 set root='(hd0,msdos5)' search --no-floppy --fs-uuid --set e1dafd1c-f855-406b-8f9a-f9d527c70255 if loadfont /usr/share/grub/unicode.pf2 ; then set gfxmode=640x480 load_video insmod gfxterm fi terminal_output gfxterm insmod part_msdos insmod ext2 set root='(hd0,msdos5)' search --no-floppy --fs-uuid --set e1dafd1c-f855-406b-8f9a-f9d527c70255 set locale_dir=($root)/boot/grub/locale set lang=en insmod gettext if [ "${recordfail}" = 1 ]; then set timeout=-1 else set timeout=10 fi ### END /etc/grub.d/00_header ### ### BEGIN /etc/grub.d/05_debian_theme ### set menu_color_normal=white/black set menu_color_highlight=black/light-gray ### END /etc/grub.d/05_debian_theme ### ### BEGIN /etc/grub.d/10_linux ### menuentry 'Ubuntu, with Linux 2.6.35-22-generic' --class ubuntu --class gnu-linux --class gnu --class os { recordfail insmod part_msdos insmod ext2 set root='(hd0,msdos5)' search --no-floppy --fs-uuid --set e1dafd1c-f855-406b-8f9a-f9d527c70255 linux /boot/vmlinuz-2.6.35-22-generic root=UUID=e1dafd1c-f855-406b-8f9a-f9d527c70255 ro quiet splash initrd /boot/initrd.img-2.6.35-22-generic } menuentry 'Ubuntu, with Linux 2.6.35-22-generic (recovery mode)' --class ubuntu --class gnu-linux --class gnu --class os { recordfail insmod part_msdos insmod ext2 set root='(hd0,msdos5)' search --no-floppy --fs-uuid --set e1dafd1c-f855-406b-8f9a-f9d527c70255 echo 'Loading Linux 2.6.35-22-generic ...' linux /boot/vmlinuz-2.6.35-22-generic root=UUID=e1dafd1c-f855-406b-8f9a-f9d527c70255 ro single echo 'Loading initial ramdisk ...' initrd /boot/initrd.img-2.6.35-22-generic } ### END /etc/grub.d/10_linux ### ### BEGIN /etc/grub.d/20_linux_xen ### ### END /etc/grub.d/20_linux_xen ### ### BEGIN /etc/grub.d/20_memtest86+ ### menuentry "Memory test (memtest86+)" { insmod part_msdos insmod ext2 set root='(hd0,msdos5)' search --no-floppy --fs-uuid --set e1dafd1c-f855-406b-8f9a-f9d527c70255 linux16 /boot/memtest86+.bin } menuentry "Memory test (memtest86+, serial console 115200)" { insmod part_msdos insmod ext2 set root='(hd0,msdos5)' search --no-floppy --fs-uuid --set e1dafd1c-f855-406b-8f9a-f9d527c70255 linux16 /boot/memtest86+.bin console=ttyS0,115200n8 } ### END /etc/grub.d/20_memtest86+ ### ### BEGIN /etc/grub.d/30_os-prober ### menuentry "Windows 7 (loader) (on /dev/sda1)" { insmod part_msdos insmod ntfs set root='(hd0,msdos1)' search --no-floppy --fs-uuid --set 1266bb2766bb0a8d chainloader +1 } ### END /etc/grub.d/30_os-prober ### ### BEGIN /etc/grub.d/40_custom ### # This file provides an easy way to add custom menu entries. Simply type the # menu entries you want to add after this comment. Be careful not to change # the 'exec tail' line above. ### END /etc/grub.d/40_custom ### ### BEGIN /etc/grub.d/41_custom ### if [ -f $prefix/custom.cfg ]; then source $prefix/custom.cfg; fi ### END /etc/grub.d/41_custom ### =============================== sda5/etc/fstab: =============================== # /etc/fstab: static file system information. # # Use 'blkid -o value -s UUID' to print the universally unique identifier # for a device; this may be used with UUID= as a more robust way to name # devices that works even if disks are added and removed. See fstab(5). # # proc /proc proc nodev,noexec,nosuid 0 0 /dev/sda5 / ext4 errors=remount-ro 0 1 # swap was on /dev/sda4 during installation UUID=dd38226d-c7c9-4ae5-a726-6d18d34a22e4 none swap sw 0 0 =================== sda5: Location of files loaded by Grub: =================== 156.1GB: boot/grub/core.img 156.3GB: boot/grub/grub.cfg 149.9GB: boot/initrd.img-2.6.35-22-generic 156.3GB: boot/vmlinuz-2.6.35-22-generic 149.9GB: initrd.img 156.3GB: vmlinuz

    Read the article

  • Silverlight MEF – Download On Demand

    - by PeterTweed
    Take the Slalom Challenge at www.slalomchallenge.com! A common challenge with building complex applications in Silverlight is the initial download size of the xap file.  MEF enables us to build composable applications that allows us to build complex composite applications.  Wouldn’t it be great if we had a mechanism to spilt out components into different Silverlight applications in separate xap files and download the separate xap file only if needed?   MEF gives us the ability to do this.  This post will cover the basics needed to build such a composite application split between different silerlight applications and download the referenced silverlight application only when needed. Steps: 1.     Create a Silverlight 4 application 2.     Add references to the following assemblies: System.ComponentModel.Composition.dll System.ComponentModel.Composition.Initialization.dll 3.     Add a new Silverlight 4 application called ExternalSilverlightApplication to the solution that was created in step 1.  Ensure the new application is hosted in the web application for the solution and choose to not create a test page for the new application. 4.     Delete the App.xaml and MainPage.xaml files – they aren’t needed. 5.     Add references to the following assemblies in the ExternalSilverlightApplication project: System.ComponentModel.Composition.dll System.ComponentModel.Composition.Initialization.dll 6.     Ensure the two references above have their Copy Local values set to false.  As we will have these two assmblies in the original Silverlight application, we will have no need to include them in the built ExternalSilverlightApplication build. 7.     Add a new user control called LeftControl to the ExternalSilverlightApplication project. 8.     Replace the LayoutRoot Grid with the following xaml:     <Grid x:Name="LayoutRoot" Background="Beige" Margin="40" >         <Button Content="Left Content" Margin="30"></Button>     </Grid> 9.     Add the following statement to the top of the LeftControl.xaml.cs file using System.ComponentModel.Composition; 10.   Add the following attribute to the LeftControl class     [Export(typeof(LeftControl))]   This attribute tells MEF that the type LeftControl will be exported – i.e. made available for other applications to import and compose into the application. 11.   Add a new user control called RightControl to the ExternalSilverlightApplication project. 12.   Replace the LayoutRoot Grid with the following xaml:     <Grid x:Name="LayoutRoot" Background="Green" Margin="40"  >         <TextBlock Margin="40" Foreground="White" Text="Right Control" FontSize="16" VerticalAlignment="Center" HorizontalAlignment="Center" ></TextBlock>     </Grid> 13.   Add the following statement to the top of the RightControl.xaml.cs file using System.ComponentModel.Composition; 14.   Add the following attribute to the RightControl class     [Export(typeof(RightControl))] 15.   In your original Silverlight project add a reference to the ExternalSilverlightApplication project. 16.   Change the reference to the ExternalSilverlightApplication project to have it’s Copy Local value = false.  This will ensure that the referenced ExternalSilverlightApplication Silverlight application is not included in the original Silverlight application package when it it built.  The ExternalSilverlightApplication Silverlight application therefore has to be downloaded on demand by the original Silverlight application for it’s controls to be used. 1.     In your original Silverlight project add the following xaml to the LayoutRoot Grid in MainPage.xaml:         <Grid.RowDefinitions>             <RowDefinition Height="65*" />             <RowDefinition Height="235*" />         </Grid.RowDefinitions>         <Button Name="LoaderButton" Content="Download External Controls" Click="Button_Click"></Button>         <StackPanel Grid.Row="1" Orientation="Horizontal" HorizontalAlignment="Center" >             <Border Name="LeftContent" Background="Red" BorderBrush="Gray" CornerRadius="20"></Border>             <Border Name="RightContent" Background="Red" BorderBrush="Gray" CornerRadius="20"></Border>         </StackPanel>       The borders will hold the controls that will be downlaoded, imported and composed via MEF when the button is clicked. 2.     Add the following statement to the top of the MainPage.xaml.cs file using System.ComponentModel.Composition; 3.     Add the following properties to the MainPage class:         [Import(typeof(LeftControl))]         public LeftControl LeftUserControl { get; set; }         [Import(typeof(RightControl))]         public RightControl RightUserControl { get; set; }   This defines properties accepting LeftControl and RightControl types.  The attrributes are used to tell MEF the discovered type that should be applied to the property when composition occurs. 17.   Add the following event handler for the button click to the MainPage.xaml.cs file:         private void Button_Click(object sender, RoutedEventArgs e)         {                   DeploymentCatalog deploymentCatalog =     new DeploymentCatalog("ExternalSilverlightApplication.xap");                   CompositionHost.Initialize(deploymentCatalog);                   deploymentCatalog.DownloadCompleted += (s, i) =>                 {                     if (i.Error == null)                     {                         CompositionInitializer.SatisfyImports(this);                           LeftContent.Child = LeftUserControl;                         RightContent.Child = RightUserControl;                         LoaderButton.IsEnabled = false;                     }                 };                   deploymentCatalog.DownloadAsync();         } This is where the magic happens!  The deploymentCatalog object is pointed to the ExternalSilverlightApplication.xap file.  It is then associated with the CompositionHost initialization.  As the download will be asynchronous, an eventhandler is created for the DownloadCompleted event.  The deploymentCatalog object is then told to start the asynchronous download. The event handler that executes when the download is completed uses the CompositionInitializer.SatisfyImports() function to tell MEF to satisfy the Imports for the current class.  It is at this point that the LeftUserControl and RightUserControl properties are initialized with composed objects from the downloaded ExternalSilverlightApplication.xap package. 18.   Run the application click the Download External Controls button and see the controls defined in the ExternalSilverlightApplication application loaded into the original Silverlight application. Congratulations!  You have implemented download on demand capabilities for composite applications using the MEF DeploymentCatalog class.  You are now able to segment your applications into separate xap file for deployment.

    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

  • Setting useLegacyV2RuntimeActivationPolicy At Runtime

    - by Reed
    Version 4.0 of the .NET Framework included a new CLR which is almost entirely backwards compatible with the 2.0 version of the CLR.  However, by default, mixed-mode assemblies targeting .NET 3.5sp1 and earlier will fail to load in a .NET 4 application.  Fixing this requires setting useLegacyV2RuntimeActivationPolicy in your app.Config for the application.  While there are many good reasons for this decision, there are times when this is extremely frustrating, especially when writing a library.  As such, there are (rare) times when it would be beneficial to set this in code, at runtime, as well as verify that it’s running correctly prior to receiving a FileLoadException. Typically, loading a pre-.NET 4 mixed mode assembly is handled simply by changing your app.Config file, and including the relevant attribute in the startup element: <?xml version="1.0" encoding="utf-8" ?> <configuration> <startup useLegacyV2RuntimeActivationPolicy="true"> <supportedRuntime version="v4.0"/> </startup> </configuration> .csharpcode { background-color: #ffffff; font-family: consolas, "Courier New", courier, monospace; color: black; font-size: small } .csharpcode pre { background-color: #ffffff; font-family: consolas, "Courier New", courier, monospace; color: black; font-size: small } .csharpcode pre { margin: 0em } .csharpcode .rem { color: #008000 } .csharpcode .kwrd { color: #0000ff } .csharpcode .str { color: #006080 } .csharpcode .op { color: #0000c0 } .csharpcode .preproc { color: #cc6633 } .csharpcode .asp { background-color: #ffff00 } .csharpcode .html { color: #800000 } .csharpcode .attr { color: #ff0000 } .csharpcode .alt { background-color: #f4f4f4; margin: 0em; width: 100% } .csharpcode .lnum { color: #606060 } This causes your application to run correctly, and load the older, mixed-mode assembly without issues. For full details on what’s happening here and why, I recommend reading Mark Miller’s detailed explanation of this attribute and the reasoning behind it. Before I show any code, let me say: I strongly recommend using the official approach of using app.config to set this policy. That being said, there are (rare) times when, for one reason or another, changing the application configuration file is less than ideal. While this is the supported approach to handling this issue, the CLR Hosting API includes a means of setting this programmatically via the ICLRRuntimeInfo interface.  Normally, this is used if you’re hosting the CLR in a native application in order to set this, at runtime, prior to loading the assemblies.  However, the F# Samples include a nice trick showing how to load this API and bind this policy, at runtime.  This was required in order to host the Managed DirectX API, which is built against an older version of the CLR. This is fairly easy to port to C#.  Instead of a direct port, I also added a little addition – by trapping the COM exception received if unable to bind (which will occur if the 2.0 CLR is already bound), I also allow a runtime check of whether this property was setup properly: public static class RuntimePolicyHelper { public static bool LegacyV2RuntimeEnabledSuccessfully { get; private set; } static RuntimePolicyHelper() { ICLRRuntimeInfo clrRuntimeInfo = (ICLRRuntimeInfo)RuntimeEnvironment.GetRuntimeInterfaceAsObject( Guid.Empty, typeof(ICLRRuntimeInfo).GUID); try { clrRuntimeInfo.BindAsLegacyV2Runtime(); LegacyV2RuntimeEnabledSuccessfully = true; } catch (COMException) { // This occurs with an HRESULT meaning // "A different runtime was already bound to the legacy CLR version 2 activation policy." LegacyV2RuntimeEnabledSuccessfully = false; } } [ComImport] [InterfaceType(ComInterfaceType.InterfaceIsIUnknown)] [Guid("BD39D1D2-BA2F-486A-89B0-B4B0CB466891")] private interface ICLRRuntimeInfo { void xGetVersionString(); void xGetRuntimeDirectory(); void xIsLoaded(); void xIsLoadable(); void xLoadErrorString(); void xLoadLibrary(); void xGetProcAddress(); void xGetInterface(); void xSetDefaultStartupFlags(); void xGetDefaultStartupFlags(); [MethodImpl(MethodImplOptions.InternalCall, MethodCodeType = MethodCodeType.Runtime)] void BindAsLegacyV2Runtime(); } } Using this, it’s possible to not only set this at runtime, but also verify, prior to loading your mixed mode assembly, whether this will succeed. In my case, this was quite useful – I am working on a library purely for internal use which uses a numerical package that is supplied with both a completely managed as well as a native solver.  The native solver uses a CLR 2 mixed-mode assembly, but is dramatically faster than the pure managed approach.  By checking RuntimePolicyHelper.LegacyV2RuntimeEnabledSuccessfully at runtime, I can decide whether to enable the native solver, and only do so if I successfully bound this policy. There are some tricks required here – To enable this sort of fallback behavior, you must make these checks in a type that doesn’t cause the mixed mode assembly to be loaded.  In my case, this forced me to encapsulate the library I was using entirely in a separate class, perform the check, then pass through the required calls to that class.  Otherwise, the library will load before the hosting process gets enabled, which in turn will fail. This code will also, of course, try to enable the runtime policy before the first time you use this class – which typically means just before the first time you check the boolean value.  As a result, checking this early on in the application is more likely to allow it to work. Finally, if you’re using a library, this has to be called prior to the 2.0 CLR loading.  This will cause it to fail if you try to use it to enable this policy in a plugin for most third party applications that don’t have their app.config setup properly, as they will likely have already loaded the 2.0 runtime. As an example, take a simple audio player.  The code below shows how this can be used to properly, at runtime, only use the “native” API if this will succeed, and fallback (or raise a nicer exception) if this will fail: public class AudioPlayer { private IAudioEngine audioEngine; public AudioPlayer() { if (RuntimePolicyHelper.LegacyV2RuntimeEnabledSuccessfully) { // This will load a CLR 2 mixed mode assembly this.audioEngine = new AudioEngineNative(); } else { this.audioEngine = new AudioEngineManaged(); } } public void Play(string filename) { this.audioEngine.Play(filename); } } Now – the warning: This approach works, but I would be very hesitant to use it in public facing production code, especially for anything other than initializing your own application.  While this should work in a library, using it has a very nasty side effect: you change the runtime policy of the executing application in a way that is very hidden and non-obvious.

    Read the article

  • code for TouchPad works, but not for DPAD ...please help me to fix this..

    - by Chandan
    package org.coe.twoD; import android.app.Activity; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; //import android.graphics.Path; import android.graphics.Rect; //import android.graphics.RectF; import android.os.Bundle; //import android.util.Log; import android.util.Log; import android.view.KeyEvent; import android.view.MotionEvent; import android.view.View; import android.view.View.OnClickListener; public class TwoD extends Activity implements OnClickListener { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); View draw2d = findViewById(R.id.draw_button); draw2d.setOnClickListener(this); } public void onClick(View v) { if (R.id.draw_button == v.getId()) { setContentView(new draw2D(this)); } } public class draw2D extends View { private static final String TAG = "Sudoku"; private float width; // width of one tile private float height; // height of one tile private int selX; // X index of selection private int selY; // Y index of selection private final Rect selRect = new Rect(); public draw2D(Context context) { super(context); } @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { width = w / 9f; height = h / 9f; getRect(selX, selY, selRect); Log.d(TAG, "onSizeChanged: width " + width + ", height " + height); super.onSizeChanged(w, h, oldw, oldh); } @Override protected void onDraw(Canvas canvas) { // Draw the background... Paint background = new Paint(); background.setColor(getResources().getColor(R.color.background)); canvas.drawRect(0, 0, getWidth(), getHeight(), background); // Draw the board... // Define colors for the grid lines Paint dark = new Paint(); dark.setColor(getResources().getColor(R.color.dark)); Paint hilite = new Paint(); hilite.setColor(getResources().getColor(R.color.hilite)); Paint light = new Paint(); light.setColor(getResources().getColor(R.color.light)); // Draw the minor grid lines for (int i = 0; i < 9; i++) { canvas.drawLine(0, i * height, getWidth(), i * height, light); canvas.drawLine(0, i * height + 1, getWidth(), i * height + 1, hilite); canvas.drawLine(i * width, 0, i * width, getHeight(), light); canvas.drawLine(i * width + 1, 0, i * width + 1, getHeight(), hilite); } // Draw the major grid lines for (int i = 0; i < 9; i++) { if (i % 3 != 0) continue; canvas.drawLine(0, i * height, getWidth(), i * height, dark); canvas.drawLine(0, i * height + 1, getWidth(), i * height + 1, hilite); canvas.drawLine(i * width, 0, i * width, getHeight(), dark); canvas.drawLine(i * width + 1, 0, i * width + 1, getHeight(), hilite); } /* * dark.setColor(Color.MAGENTA); Path circle= new Path(); * circle.addCircle(150, 150, 100, Path.Direction.CW); * canvas.drawPath(circle, dark); * * * Path rect=new Path(); * * RectF rectf= new RectF(150,200,250,300); rect.addRect(rectf, * Path.Direction.CW); canvas.drawPath(rect, dark); * * * canvas.drawRect(0, 0,250, 250, dark); * * * canvas.drawText("Hello", 200,200, dark); */ Paint selected = new Paint(); selected.setColor(Color.GREEN); canvas.drawRect(selRect, selected); } /* * public boolean onTouchEvent(MotionEvent event){ * if(event.getAction()!=MotionEvent.ACTION_DOWN) return * super.onTouchEvent(event); * select((int)(event.getX()/width),(int)(event.getY()/height)); * * * return true; } */ private void select(int x, int y) { invalidate(selRect); selX = Math.min(Math.max(x, 0), 8); selY = Math.min(Math.max(y, 0), 8); getRect(selX, selY, selRect); invalidate(selRect); } @Override public boolean onKeyUp(int keyCode, KeyEvent event) { return super.onKeyUp(keyCode, event); } @Override public boolean onTouchEvent(MotionEvent event) { if (event.getAction() != MotionEvent.ACTION_DOWN) return super.onTouchEvent(event); select((int) (event.getX() / width), (int) (event.getY() / height)); // game.showKeypadOrError(selX, selY); Log.d(TAG, "onTouchEvent: x " + selX + ", y " + selY); return true; } @Override public boolean onKeyDown(int keyCode, KeyEvent event) { Log.d(TAG, "onKeyDown: keycode=" + keyCode + ", event=" + event); switch (keyCode) { case KeyEvent.KEYCODE_DPAD_UP: select(selX, selY - 1); break; case KeyEvent.KEYCODE_DPAD_DOWN: select(selX, selY + 1); break; case KeyEvent.KEYCODE_DPAD_LEFT: select(selX - 1, selY); break; case KeyEvent.KEYCODE_DPAD_RIGHT: select(selX + 1, selY); break; default: return super.onKeyDown(keyCode, event); } return true; } private void getRect(int x, int y, Rect rect) { rect.set((int) (x * width), (int) (y * height), (int) (x * width + width), (int) (y * height + height)); } } }

    Read the article

  • Problem with ajax form on Codeigniter

    - by Code Burn
    Everytime I test the email is send correctly. (I have tested in PC: IE6, IE7, IE8, Safari, Firefox, Chrome. MAC: Safari, Firefox, Chrome.) Nome: Jon Doe Empresa: Star Cargo: Developer Email: [email protected] Telefone: 090909222988 Assunto: Subject here.. But I keep recieving emails like this from costumers: Nome: Empresa: Cargo: Email: Telefone: Assunto: CONTACT_FORM.PHP <form name="frm" id="frm"> <div class="campoFormulario nomeDeCampo texto textocinzaescuro" >Nome<font style="color:#EE3063;">*</font></div> <div class="campoFormulario inputDeCampo" ><input class="texto textocinzaescuro" size="31" name="Cnome" id="Cnome" value=""/></div> <div class="campoFormulario nomeDeCampo texto textocinzaescuro" >Empresa<font style="color:#EE3063;">*</font></div> <div class="campoFormulario inputDeCampo" ><input class="texto textocinzaescuro" size="31" name="CEmpresa" id="CEmpresa" value=""/></div> <div class="campoFormulario nomeDeCampo texto textocinzaescuro" >Cargo</div> <div class="campoFormulario inputDeCampo" ><input class="texto textocinzaescuro" size="31" name="CCargo" id="CCargo" value=""/></div> <div class="campoFormulario nomeDeCampo texto textocinzaescuro" >Email<font style="color:#EE3063;">*</font></div> <div class="campoFormulario inputDeCampo" ><input class="texto textocinzaescuro" size="31" name="CEmail" id="CEmail" value=""/></div> <div class="campoFormulario nomeDeCampo texto textocinzaescuro" >Telefone</div> <div class="campoFormulario inputDeCampo" ><input class="texto textocinzaescuro" size="31" name="CTelefone" id="CTelefone" value=""/></div> <div class="campoFormulario nomeDeCampo texto textocinzaescuro" >Assunto<font style="color:#EE3063;">*</font></div> <div class="campoFormulario inputDeCampo" ><textarea class="texto textocinzaescuro" name="CAssunto" id="CAssunto" rows="2" cols="28"></textarea></div> <div class="campoFormulario nomeDeCampo texto textocinzaescuro" >&nbsp;</div> <div class="campoFormulario inputDeCampo" style="text-align:right;" ><input id="Cbutton" class="texto textocinzaescuro" type="submit" name="submit" value="Enviar" /></div> </form> <script type="text/javascript"> $(function() { $("#Cbutton").click(function() { if(validarForm()){ var Cnome = $("input#Cnome").val(); var CEmpresa = $("input#CEmpresa").val(); var CEmail = $("input#CEmail").val(); var CCargo = $("input#CCargo").val(); var CTelefone = $("input#CTelefone").val(); var CAssunto = $("textarea#CAssunto").val(); var dataString = 'nome='+ Cnome + '&Empresa=' + CEmpresa + '&Email=' + CEmail + '&Cargo=' + CCargo + '&Telefone=' + CTelefone + '&Assunto=' + CAssunto; //alert (dataString);return false; $.ajax({ type: "POST", url: "http://www.myserver.com/index.php/pt/envia", data: dataString, success: function() { $('#frm').remove(); $('#blocoform').append("<br />Obrigado. <img id='checkmark' src='http://www.myserver.com/public/images/estrutura/ok.gif' /><br />Será contactado brevemente.<br /><br /><br /><br /><br /><br />") .hide() .fadeIn(1500); } }); } return false; }); }); function validarForm(){ var error = 0; if(!validateNome(document.getElementById("Cnome"))){ error = 1 ;} if(!validateNome(document.getElementById("CEmpresa"))){ error = 1 ;} if(!validateEmail(document.getElementById("CEmail"))){ error = 1 ;} if(!validateNome(document.getElementById("CAssunto"))){ error = 1 ;} if(error == 0){ //frm.submit(); return true; }else{ alert('Preencha os campos correctamente.'); return false; } } function validateNome(fld){ if( fld.value.length == 0 ){ fld.style.backgroundColor = '#FFFFCC'; //alert('Descrição é um campo obrigatório.'); return false; }else { fld.style.background = 'White'; return true; } } function trim(s) { return s.replace(/^\s+|\s+$/, ''); } function validateEmail(fld) { var tfld = trim(fld.value); var emailFilter = /^[^@]+@[^@.]+\.[^@]*\w\w$/ ; var illegalChars= /[\(\)\<\>\,\;\:\\\"\[\]]/ ; if (fld.value == "") { fld.style.background = '#FFFFCC'; //alert('Email é um campo obrigatório.'); return false; } else if (!emailFilter.test(tfld)) { //alert('Email inválido.'); fld.style.background = '#FFFFCC'; return false; } else if (fld.value.match(illegalChars)) { fld.style.background = '#FFFFCC'; //alert('Email inválido.'); return false; } else { fld.style.background = 'White'; return true; } } </script> FUNCTION ENVIA (email sender): function envia() { $this->load->helper(array('form', 'url')); $nome = $_POST['nome']; $empresa = $_POST['Empresa']; $cargo = $_POST['Cargo']; $email = $_POST['Email']; $telefone = $_POST['Telefone']; $assunto = $_POST['Assunto']; $mensagem = " Nome:".$nome." Empresa:".$empresa." Cargo:".$cargo." Email:".$email." Telefone:".$telefone." Assunto:".$assunto.""; $headers = 'From: [email protected]' . "\r\n" . 'Reply-To: no-reply' . "\r\n" . 'X-Mailer: PHP/' . phpversion(); mail('[email protected]', $mensagem, $headers); }

    Read the article

  • Opacity in CSS, some doubts

    - by André
    Hi, I have some doubts with opacity in CSS. I have a Header and a Footer that uses opacity, but I would like to turn off opacity the opacity in the text. Is that possible? To a better understanding I will post the code. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title> stu nicholls | CSS PLaY | cross browser fixed header/footer layout basic method </title> <style type="text/css" media="screen"> #printhead {display:none;} html { height:100%; max-height:100%; padding:0; margin:0; border:0; background:#fff; font-size:80%; font-family: "trebuchet ms", tahoma, verdana, arial, sans-serif; /* hide overflow:hidden from IE5/Mac */ /* \*/ overflow: hidden; /* */ } body {height:100%; max-height:100%; overflow:hidden; padding:0; margin:0; border:0;} #content {display:block; height:100%; max-height:100%; overflow:hidden; padding-left:0px; position:relative; z-index:3; word-wrap:break-word;} #head {position:absolute; margin:0; top:0; right:18px; display:block; width:100%; height:1; background-color:transparent; font-size:1em; z-index:5; color:#000; border-bottom:1px solid #000;} #foot {position:absolute; margin:0; bottom:-1px; right:18px; display:block; width:100%; height:30px; background-color:transparent; color:#000; text-align:right; font-size:2em; z-index:4; border-top:1px solid #000;} .pad1 {display:block; width:18px; height:18px; float:left;} /* Com este "height", alinho a border do header */ .pad2 {display:block; height:100px;} .pad3 {display:block; height:0px;} /* Com este "height" controlo onde começa o content e o scroll do browser */ #content p {padding:5px;} .bold {font-size:1.2em; font-weight:bold;} .red {color:#c00; margin-left:5px; font-family:"trebuchet ms", "trebuchet", "verdana", sans-serif;} h2 {margin-left:5px;} h3 {margin-left:5px;} /* Esta classe controla as caracteristicas do background do footer e do header. */ .bkg { background-color: blue; filter:alpha(opacity=35); /* IE's opacity*/ opacity: 0.35; height: 10; } iframe { border-style: none; width: 100%; height: 100%; } </style> </head> <body> <div id="head"> <div class="bkg"> <div class="pad1"></div>Header </div> </div> <div id="content"> <div class="pad3"></div> <iframe src="http://www.yahoo.com" id="iFrame"></iframe> <div class="pad2"></div> </div> </div> <div id="foot"><div class="bkg">Footer</div></div> </body> </html> I want to maintain the opacity in the blue color in the footer and header but I would like to put the text stronger. Is that possible? Best Regards,

    Read the article

  • jQuery Cycle Plugin - Content not cycling

    - by fmz
    I am setting up a page with jQuery's Cycle plugin and have four divs set to fade. I have the code in place, the images set, but it doesn't cycle properly. Firefox says there is a problem with the following code: <script type="text/javascript"> $(document).ready(function() { $('.slideshow').cycle({ fx: 'fade' }); }); </script> Here is the html: <div class="slideshow"> <div id="mainImg-1" class="slide"> <div class="quote"> <h2>Building Big Relationships with Small Business.</h2> <p>&ldquo;This is quote Number One.<br /> They are there when I need them the most.&rdquo;</p> <p><span class="author">Jane Doe &ndash; Charlotte Flower Shop</span></p> <div class="help"><a href="cb_services.html">Let Us Help You</a></div> </div> </div> <div id="mainImg-2" class="slide"> <div class="quote"> <h2>Building Big Relationships with Small Business.</h2> <p>&ldquo;This is quote Number Two.<br /> They are there when I need them the most.&rdquo;</p> <p><span class="author">Jane Doe &ndash; Charlotte Flower Shop</span></p> <div class="help"><a href="cb_services.html">Let Us Help You</a></div> </div> </div> <div id="mainImg-3" class="slide"> <div class="quote"> <h2>Building Big Relationships with Small Business.</h2> <p>&ldquo;This is quote Number three.<br /> They are there when I need them the most.&rdquo;</p> <p><span class="author">Jane Doe &ndash; Charlotte Flower Shop</span></p> <div class="help"><a href="cb_services.html">Let Us Help You</a></div> </div> </div> <div id="mainImg-4" class="slide"> <div class="quote"> <h2>Building Big Relationships with Small Business.</h2> <p>&ldquo;This is quote Number Fout.<br /> They are there when I need them the most.&rdquo;</p> <p><span class="author">Jane Doe &ndash; Charlotte Flower Shop</span></p> <div class="help"><a href="cb_services.html">Let Us Help You</a></div> </div> </div> Here is the CSS: .slideshow { width: 946px; height: 283px; border: 1px solid #c29c5d; margin: 8px; overflow: hidden; z-index: 1; } #mainImg-1 { width: 946px; height: 283px; background: url(../_images/main.jpg) no-repeat 9px 9px; } #mainImg-2 { width: 946px; height: 283px; background: url(../_images/main.jpg) no-repeat 9px 9px; } #mainImg-3 { width: 946px; height: 283px; background: url(../_images/main.jpg) no-repeat 9px 9px; } #mainImg-4 { width: 946px; height: 283px; background: url(../_images/main.jpg) no-repeat 9px 9px; } #mainImg-1 .quote, #mainImg-2 .quote, #mainImg-3 .quote, #mainImg-4 .quote { width: 608px; height: 168px; float: right; margin: 80px 11px 0 0; background: url(../_images/bg_quoteBox.png) repeat-x; } Before you go off and say, "hey, those images are all the same". You are right, the images are all the same right now, but the text should be rotating as well and there is a slight difference there. In addition, the fade should still show up. Anyway, you can see the dev page here: http://173.201.163.213/projectpath/first_trust/index.html I would appreciate some help to get this cycling through as it should. Thanks!

    Read the article

  • Adventures in Windows 8: Working around the navigation animation issues in LayoutAwarePage

    - by Laurent Bugnion
    LayoutAwarePage is a pretty cool add-on to Windows 8 apps, which facilitates greatly the implementation of orientation-aware (portrait, landscape) as well as state-aware (snapped, filled, fullscreen) apps. It has however a few issues that are obvious when you use transformed elements on your page. Adding a LayoutAwarePage to your application If you start with a blank app, the MainPage is a vanilla Page, with no such feature. In order to have a LayoutAwarePage into your app, you need to add this class (and a few helpers) with the following operation: Right click on the Solution and select Add, New Item from the context menu. From the dialog, select a Basic Page (not a Blank Page, which is another vanilla page). If you prefer, you can also use Split Page, Items Page, Item Detail Page, Grouped Items Page or Group Detail Page which are all LayoutAwarePages. Personally I like to start with a Basic Page, which gives me more creative freedom. Adding this new page will cause Visual Studio to show a prompt asking you for permission to add additional helper files to the Common folder. One of these helpers in the LayoutAwarePage class, which is where the magic happens. LayoutAwarePage offers some help for the detection of orientation and state (which makes it a pleasure to design for all these scenarios in Blend, by the way) as well as storage for the navigation state (more about that in a future article). Issue with LayoutAwarePage When you use UI elements such as a background picture, a watermark label, logos, etc, it is quite common to do a few things with those: Making them partially transparent (this is especially true for background pictures; for instance I really like a black Page background with a half transparent picture placed on top of it). Transforming them, for instance rotating them a bit, scaling them, etc. Here is an example with a picture of my two beautiful daughters in the Bird Park in Kuala Lumpur, as well as a transformed TextBlock. The image has an opacity of 40% and the TextBlock a simple RotateTransform. If I create an application with a MainPage that navigates to this LayoutAwarePage, however, I will have a very annoying effect: The background picture appears with an Opacity of 100%. The TextBlock is not rotated. This lasts only for less than a second (during the navigation animation) before the elements “snap into place” and get their desired effect. Here is the XAML that cause the annoying effect: <common:LayoutAwarePage x:Name="pageRoot" x:Class="App13.BasicPage1" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:common="using:App13.Common" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Style="{StaticResource LayoutRootStyle}"> <Grid.RowDefinitions> <RowDefinition Height="140" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <Image Source="Assets/el20120812025.jpg" Stretch="UniformToFill" Opacity="0.4" Grid.RowSpan="2" /> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}" /> <TextBlock x:Name="pageTitle" Grid.Column="1" Text="Welcome" Style="{StaticResource PageHeaderTextStyle}" /> </Grid> <TextBlock HorizontalAlignment="Center" TextWrapping="Wrap" Text="Welcome to my Windows 8 Application" Grid.Row="1" VerticalAlignment="Bottom" FontFamily="Segoe UI Light" FontSize="70" FontWeight="Light" TextAlignment="Center" Foreground="#FFFFA200" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" d:LayoutRounding="Auto" Margin="0,0,0,153"> <TextBlock.RenderTransform> <CompositeTransform Rotation="-6.545" /> </TextBlock.RenderTransform> </TextBlock> <VisualStateManager.VisualStateGroups> [...] </VisualStateManager.VisualStateGroups> </Grid> </common:LayoutAwarePage> Solving the issue In order to solve this “snapping” issue, the solution is to wrap the elements that are transformed into an empty Grid. Honestly, to me it sounds like a bug in the LayoutAwarePage navigation animation, but thankfully the workaround is not that difficult: Simple change the main Grid as follows: <Grid Style="{StaticResource LayoutRootStyle}"> <Grid.RowDefinitions> <RowDefinition Height="140" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <Grid Grid.RowSpan="2"> <Image Source="Assets/el20120812025.jpg" Stretch="UniformToFill" Opacity="0.4" /> </Grid> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}" /> <TextBlock x:Name="pageTitle" Grid.Column="1" Text="Welcome" Style="{StaticResource PageHeaderTextStyle}" /> </Grid> <Grid Grid.Row="1"> <TextBlock HorizontalAlignment="Center" TextWrapping="Wrap" Text="Welcome to my Windows 8 Application" VerticalAlignment="Bottom" FontFamily="Segoe UI Light" FontSize="70" FontWeight="Light" TextAlignment="Center" Foreground="#FFFFA200" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" d:LayoutRounding="Auto" Margin="0,0,0,153"> <TextBlock.RenderTransform> <CompositeTransform Rotation="-6.545" /> </TextBlock.RenderTransform> </TextBlock> </Grid> <VisualStateManager.VisualStateGroups> [...] </Grid> Hopefully this will help a few people, I banged my head on the wall for a while before someone at Microsoft pointed me to the solution ;) Happy coding, Laurent   Laurent Bugnion (GalaSoft) Subscribe | Twitter | Facebook | Flickr | LinkedIn

    Read the article

  • Wpf Listbox and CheckBox

    - by Tan
    Hi iam using a listbox to show a list of items. in the listbox i ahve an togglebutton on every item. When i click on the toggle button the state of the togglebutton is pressed. But when i am scrolling down in the listbox and scolls up again. The togglebutton state is not pressed. How can i prevent this please help. Heres my itemtemplate <ListBox.ItemTemplate> <DataTemplate> <StackPanel Margin="0,3,0,0"> <Border BorderBrush="Black" BorderThickness="1,1,1,1"> <Border.Background> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" MappingMode="RelativeToBoundingBox"> <GradientStop Color="#FFECECEC" Offset="1"/> <GradientStop Color="#FFE8E8E8"/> <GradientStop Color="#FFBDBDBD" Offset="0.153"/> <GradientStop Color="#FFE8E8E8" Offset="0.904"/> </LinearGradientBrush> </Border.Background> <Border.Style> <Style> <Style.Triggers> <DataTrigger Binding="{Binding Path=IsSelected, RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type ListBoxItem}}}" Value="True"> <Setter Property="Border.Height" Value="100"/> <Setter Property="Border.Background"> <Setter.Value> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" MappingMode="RelativeToBoundingBox"> <GradientStop Color="DarkGray" Offset="1"/> <GradientStop Color="#FFE8E8E8"/> <GradientStop Color="#FFBDBDBD" Offset="0.153"/> <GradientStop Color="DarkGray" Offset="0.904"/> </LinearGradientBrush> </Setter.Value> </Setter> </DataTrigger> </Style.Triggers> </Style> </Border.Style> <StackPanel Orientation="Horizontal" VerticalAlignment="Center"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="500"/> <ColumnDefinition Width="100"/> <ColumnDefinition Width="55"/> </Grid.ColumnDefinitions> <!--Pick number--> <StackPanel Grid.Column="0" VerticalAlignment="Center" Orientation="Vertical"> <TextBlock Text="{Binding Path=FtgNamn}" FontWeight="Bold" FontSize="22pt" FontFamily="Calibri"/> <TextBlock Text="{Binding Path=LevsAttBeskr}" FontSize="18pt" FontFamily="Calibri"/> </StackPanel> <!--Pick Quantity--> <StackPanel Grid.Column="1" VerticalAlignment="Center"> <TextBlock Text="{Binding Path=Antal}" FontSize="44pt" FontFamily="Calibri"/> </StackPanel> <!-- Checkbox--> <StackPanel Grid.Column="2" VerticalAlignment="Center" HorizontalAlignment="Center"> <ToggleButton Name="Check" Width="40" Height="40" Click="Check_Click" Tag="{Binding Path=Plocklista}"> <ToggleButton.Style> <Style TargetType="ToggleButton"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type ToggleButton}"> <Border x:Name="InnerBorder" Background="White" BorderBrush="Black" BorderThickness="1"/> <ControlTemplate.Triggers> <Trigger Property="IsChecked" Value="True"> <Setter TargetName="InnerBorder" Property="Background"> <Setter.Value> <ImageBrush ImageSource="/Images/button_ok.png"/> </Setter.Value> </Setter> <Setter TargetName="InnerBorder" Property="BorderThickness" Value="0"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> </ToggleButton.Style> </ToggleButton> </StackPanel> </Grid> <Border BorderBrush="Darkgray" BorderThickness="0,0,1,0"> </Border> <TextBlock Width="100" Text="{Binding Path=Quantity}" FontSize="44pt" FontFamily="Calibri"/> <CheckBox Width="78"/> </StackPanel> </Border> </StackPanel> </DataTemplate>

    Read the article

  • C# 2D Camera Max Zoom

    - by Craig
    I have a simple ship sprite moving around the screen along with a 2D Camera. I have zooming in and out working, however when I zoom out it goes past the world bounds and has the cornflower blue background showing. How do I sort it that I can only zoom out as far as showing the entire world (which is a picture of OZ) and thats it? I dont want any of the cornflower blue showing. Cheers! namespace GamesCoursework_1 { /// <summary> /// This is the main type for your game /// </summary> public class Game1 : Microsoft.Xna.Framework.Game { GraphicsDeviceManager graphics; SpriteBatch spriteBatch; // player variables Texture2D Ship; Vector2 Ship_Position; float Ship_Rotation = 0.0f; Vector2 Ship_Origin; Vector2 Ship_Velocity; const float tangentialVelocity = 4f; float friction = 0.05f; static Point CameraViewport = new Point(800, 800); Camera2d cam = new Camera2d((int)CameraViewport.X, (int)CameraViewport.Y); //Size of world static Point worldSize = new Point(1600, 1600); // Screen variables static Point worldCenter = new Point(worldSize.X / 2, worldSize.Y / 2); Rectangle playerBounds = new Rectangle(CameraViewport.X / 2, CameraViewport.Y / 2, worldSize.X - CameraViewport.X, worldSize.Y - CameraViewport.Y); Rectangle worldBounds = new Rectangle(0, 0, worldSize.X, worldSize.Y); Texture2D background; public Game1() { graphics = new GraphicsDeviceManager(this); graphics.PreferredBackBufferWidth = CameraViewport.X; graphics.PreferredBackBufferHeight = CameraViewport.Y; Content.RootDirectory = "Content"; } /// <summary> /// Allows the game to perform any initialization it needs to before starting to run. /// This is where it can query for any required services and load any non-graphic /// related content. Calling base.Initialize will enumerate through any components /// and initialize them as well. /// </summary> protected override void Initialize() { // TODO: Add your initialization logic here base.Initialize(); } /// <summary> /// LoadContent will be called once per game and is the place to load /// all of your content. /// </summary> protected override void LoadContent() { // Create a new SpriteBatch, which can be used to draw textures. spriteBatch = new SpriteBatch(GraphicsDevice); // TODO: use this.Content to load your game content here Ship = Content.Load<Texture2D>("Ship"); Ship_Origin.X = Ship.Width / 2; Ship_Origin.Y = Ship.Height / 2; background = Content.Load<Texture2D>("aus"); Ship_Position = new Vector2(worldCenter.X, worldCenter.Y); cam.Pos = Ship_Position; cam.Zoom = 1f; } /// <summary> /// UnloadContent will be called once per game and is the place to unload /// all content. /// </summary> protected override void UnloadContent() { // TODO: Unload any non ContentManager content here } /// <summary> /// Allows the game to run logic such as updating the world, /// checking for collisions, gathering input, and playing audio. /// </summary> /// <param name="gameTime">Provides a snapshot of timing values.</param> protected override void Update(GameTime gameTime) { // Allows the game to exit if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed) this.Exit(); // TODO: Add your update logic here Ship_Position = Ship_Velocity + Ship_Position; keyPressed(); base.Update(gameTime); } /// <summary> /// This is called when the game should draw itself. /// </summary> /// <param name="gameTime">Provides a snapshot of timing values.</param> protected override void Draw(GameTime gameTime) { GraphicsDevice.Clear(Color.CornflowerBlue); // TODO: Add your drawing code here spriteBatch.Begin(SpriteSortMode.Deferred, BlendState.AlphaBlend, null, null, null,null, cam.get_transformation(GraphicsDevice)); spriteBatch.Draw(background, Vector2.Zero, Color.White); spriteBatch.Draw(Ship, Ship_Position, Ship.Bounds, Color.White, Ship_Rotation, Ship_Origin, 1.0f, SpriteEffects.None, 0f); spriteBatch.End(); base.Draw(gameTime); } private void Ship_Move(Vector2 move) { Ship_Position += move; } private void keyPressed() { KeyboardState keyState; // Move right keyState = Keyboard.GetState(); if (keyState.IsKeyDown(Keys.Right)) { Ship_Rotation = Ship_Rotation + 0.1f; } if (keyState.IsKeyDown(Keys.Left)) { Ship_Rotation = Ship_Rotation - 0.1f; } if (keyState.IsKeyDown(Keys.Up)) { Ship_Velocity.X = (float)Math.Cos(Ship_Rotation) * tangentialVelocity; Ship_Velocity.Y = (float)Math.Sin(Ship_Rotation) * tangentialVelocity; if ((int)Ship_Position.Y < playerBounds.Bottom && (int)Ship_Position.Y > playerBounds.Top) cam._pos.Y = Ship_Position.Y; if ((int)Ship_Position.X > playerBounds.Left && (int)Ship_Position.X < playerBounds.Right) cam._pos.X = Ship_Position.X; Ship_Position += new Vector2(tangentialVelocity, 0); if (!worldBounds.Contains(new Point((int)Ship_Position.X, (int)Ship_Position.Y))) Ship_Position -= new Vector2(tangentialVelocity * 2, 0.0f); Ship_Position += new Vector2(-tangentialVelocity, 0.0f); if (!worldBounds.Contains(new Point((int)Ship_Position.X, (int)Ship_Position.Y))) Ship_Position -= new Vector2(-tangentialVelocity * 2, 0.0f); Ship_Position += new Vector2(0.0f, -tangentialVelocity); if (!worldBounds.Contains(new Point((int)Ship_Position.X, (int)Ship_Position.Y))) Ship_Position -= new Vector2(0.0f, -tangentialVelocity * 2); Ship_Position += new Vector2(0.0f, tangentialVelocity); if (!worldBounds.Contains(new Point((int)Ship_Position.X, (int)Ship_Position.Y))) Ship_Position -= new Vector2(0.0f, 2 * tangentialVelocity); } else if(Ship_Velocity != Vector2.Zero) { float i = Ship_Velocity.X; float j = Ship_Velocity.Y; Ship_Velocity.X = i -= friction * i; Ship_Velocity.Y = j -= friction * j; if ((int)Ship_Position.Y < playerBounds.Bottom && (int)Ship_Position.Y > playerBounds.Top) cam._pos.Y = Ship_Position.Y; if ((int)Ship_Position.X > playerBounds.Left && (int)Ship_Position.X < playerBounds.Right) cam._pos.X = Ship_Position.X; Ship_Position += new Vector2(tangentialVelocity, 0); if (!worldBounds.Contains(new Point((int)Ship_Position.X, (int)Ship_Position.Y))) Ship_Position -= new Vector2(tangentialVelocity * 2, 0.0f); Ship_Position += new Vector2(-tangentialVelocity, 0.0f); if (!worldBounds.Contains(new Point((int)Ship_Position.X, (int)Ship_Position.Y))) Ship_Position -= new Vector2(-tangentialVelocity * 2, 0.0f); Ship_Position += new Vector2(0.0f, -tangentialVelocity); if (!worldBounds.Contains(new Point((int)Ship_Position.X, (int)Ship_Position.Y))) Ship_Position -= new Vector2(0.0f, -tangentialVelocity * 2); Ship_Position += new Vector2(0.0f, tangentialVelocity); if (!worldBounds.Contains(new Point((int)Ship_Position.X, (int)Ship_Position.Y))) Ship_Position -= new Vector2(0.0f, 2 * tangentialVelocity); } if (keyState.IsKeyDown(Keys.Q)) { if (cam.Zoom < 2f) cam.Zoom += 0.05f; } if (keyState.IsKeyDown(Keys.A)) { if (cam.Zoom > 0.3f) cam.Zoom -= 0.05f; } } } }

    Read the article

  • How to count the letters in a text with Javascript?

    - by Doguhanca
    I am currently trying to write a ''web application'' that has a simple text area inside, in which I want the letters of the text written to be pointed out. For example, if I write: ''How old are you? I am 19 years old'' I need a code to tell me how many 'A's and 'Y's and 'D's (and all letters of the alphabet from 0-26) are used in this sentence when I press a button on a HTML/ CSS page. Could you please tell me what I must write into my .JS file and what I should write into my .HTML file to do this with a click of a button when something is written in the ? I hope my explanation was detailed enough. Thanks! Edit (I'm very sorry for the problems I caused) - What I have done so far looks like this: HTML: <link rel="stylesheet" type="text/css" href="theme.css"> <meta charset="utf-8"> <script src="test.js" type="text/javascript"></script> <div class='header'> Al.Fa.Be </div> <div class='yaz'> <textarea></textarea> </div> <div class='description'> <a href='http://www.google.com'>Ara</a> </div> <div class='description2'> <input id="clickMe" type="button" value="Hesapla" onclick="doFunction();" /> </div> CSS: body{ background:white; } selection{ background:#CCC; } #clickMe{ background:#CCC; border:1px solid #333; } .header{ font-size:70px; font-weight:bold; font-family:Arial; color:#333; margin-left:580px; padding-top:200px; } textarea{ width:1210px; height:40px; color:black; margin-top:20px; margin-left:100px; padding-left:10px; padding-top:10px; font-size:18px; font-family:Arial; } .description{ background:#f2f2f2; padding:6px; width:50px; text-align:center; border:1px solid #ddd; font-family:Arial; margin-left:620px; margin-top:20px; font-size:14px; } .description a{ color:#555; text-decoration:none; } .description2{ background:#f2f2f2; padding:6px; width:60px; text-align:center; border:1px solid #ddd; font-family:Arial; margin-left:750px; margin-top:-30px; font-size:14px; } .description2 a{ color:#555; text-decoration:none; } .yaz{ color:white; } Javascript: // Input name. Count number of alphabets a-z class program                                                          {     public static void main(String[] args)     {         String name = args[0];         int count[] = new int[29];         int i,p;         int n = name.length();         name = name.toUpperCase();         char c;         for (i=0; i<29; i++)         {             count[i] = 0;           }         for (i=0; i<n; i++)         {             c = name.charAt(i);             p = (int) c;             count[p-65]++;         }         for (i=0; i<29 ; i++)         {             if (count[i] >0)             {                 System.out.println((char)(i+65) + " occurs " + count[i] + " times");             }         }     } }

    Read the article

  • Drop down menus and pathetic art of styling

    - by fmz
    Sorry folks, I must be brain-dead or something but I can't get the styling on these drop-down menus to cooperate. I have the color and the font right, but I have unwanted spaces between the list elements and the a and the a:hover sizes should be the same. I would appreciate some help getting this to work correctly. Here is the page Here is the html: <ul class="dropdown"> <li><a href="#" id="home">Home</a></li> <li><a href="#" id="about">About Us</a> <ul class="sub-menu"> <li><a href="#">Our History</a></li> <li><a href="#">Our Process</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Financing</a></li> <li><a href="#">Testimonials</a></li> <li><a href="#">Subcontractors</a></li> </ul> </li> <li><a href="#" id="personal">Personal Banking</a></li> <li><a href="#" id="commercial">Commercial Banking</a></li> <li><a href="#" id="service">Customer Service</a> <ul class="sub-menu"> <li><a href="#">Our History</a></li> <li><a href="#">Our Process</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Financing</a></li> <li><a href="#">Testimonials</a></li> <li><a href="#">Subcontractors</a></li> </ul> </li> <li><a href="#" id="investors">Investor Relations</a></li> <li><a href="#" id="contact">Contact Us</a></li> Here is the CSS: ul.dropdown { position: relative; background: #4e8997; height: 40px; padding-left: 5px; } ul.dropdown li { float: left; zoom: 1; } ul.dropdown li a ul.dropdown li a:visited { display: block; margin-top: 5px; padding: .5em .6em; line-height: 16px; color: #fff; font: bold 14px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; text-transform: uppercase; border: none; } ul.dropdown a:hover { background-color: #c29c5d; color: #fff; } ul.dropdown a:active { background-color: #c29c5d; color: #fff; } /* LEVEL TWO */ ul.dropdown ul { padding-left: 0; width: 200px; display: none; top:36px; margin-left: 0; position: absolute; } ul.dropdown ul li { font: 10px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; border-bottom: 1px solid #ccc; display: block; margin: 0; padding: 0; float: none; color: #fff; background-color: #c29c5d; } ul.dropdown ul li a:link { display: block; font-size: 10px; width: 188px; height: 16px; } ul.dropdown ul li a:hover { background-color: #a2834d; color: #fff; } Thanks!

    Read the article

  • How to add a 3rd level to my CSS drop down menu?

    - by Cynthia
    I have a 2-level drop down menu that looks great in all browsers. Now I want to add a 3rd level. How do I do that? Here is my HTML for the menu: <div class="nav"> <div class="navbar"> <ul class="menu"> <li><a href="#">Home</a></li> <li><a href="#">About JoyFactory</a> <ul class="sub-menu"> <li><a href="#">Who We Are</a></li> <li><a href="#">Our Education Concept</a></li> <li><a href="#">References</a></li> </ul> </li> <li><a href="#">JoyFactory Kinderkrippe</a> <ul class="sub-menu"> <li><a href="#">JoyFactory Kinderkrippe Oerlikon</a> <ul> <li><a href="#">item 1</a></li> <li><a href="#">item 2</a></li> <li><a href="#">item 3</a></li> <li><a href="#">item 4</a></li> </ul> </li> <li><a href="#">JoyFactory Kinderkrippe Seebach</a></li> </ul> </li> </ul> </div> </div> and here is my CSS: .nav { clear:both ; width:1020px ; height:55px ; background:url("images/nav-bg.png") no-repeat ; position:absolute ; top:125px ; left:-10px ; } .navbar { width:1000px ; height:50px ; margin:auto ; } ul.menu { margin-left:0 ; padding-left:0 ; list-style-type:none ; } .menu li { display:inline ; float:left ; height:50px ; margin:0 6px ; } .menu li a { font-family:'MyriadPro-SemiboldCond' ; font-size:24px ; color:#ffffff ; text-decoration:none ; height:50px ; line-height:50px ; padding:0px 10px ; } .menu li:hover, .menu li:hover a { background:#ffd322 ; color:#e32a0e ; } .sub-menu { position:absolute ; float:none ; padding:0 ; top:50px ; z-index:9999 ; background:#ffd322 ; margin-left:0 ; padding-left:0 ; } .sub-menu li { display:none ; min-width:175px !important ; margin: 0 !important; padding: 0 !important; } .sub-menu li a, .current-menu-parent .sub-menu li a { display:block ; background:#ffd322 ; font-family:arial,helvetica,sans-serif ; font-size:16px ; padding:0 10px ; border-top:1px solid #f37f10 ; border-left:none ; } .sub-menu li a:hover, .menu li.current-menu-parent .sub-menu li.current-menu-item a { background:#f37f10 } .menu li:hover li { float: none; display:block; clear: both; } Any help would be most appreciated! Many thanks :)

    Read the article

  • How to properly override Drupal imagecache presets

    - by volocuga
    Say I need to override defaul presets, provided by Ubercart module. This is what I wrote: function config_imagecache() { $presets = array( array( 'presetname' => 'product', 'actions' => array( array( 'action' => 'imagecache_crop', 'data' => array('width' => 300, 'height' => ''), 'weight' => 0, 'module' => 'imagecache', ), array( 'action' => 'canvasactions_canvas2file', 'data' => array('xpos' => 'center', 'ypos' => 'center', 'path' => 'actions/pad_300_300.gif', 'dimensions' => 'background',), 'weight' => 1, 'module' => 'imagecache_canvasactions', ), ), ), array( 'presetname' => 'uc_thumbnail', 'actions' => array( array( 'action' => 'imagecache_scale', 'data' => array('width' => 55, 'height' => 55, 'upscale' => 0), 'weight' => 0, 'module' => 'imagecache', ), array( 'action' => 'canvasactions_canvas2file', 'data' => array('xpos' => 'center','ypos' => 'center', 'path' => 'actions/pad_60_60.gif','dimensions' => 'background'), 'weight' => 1, 'module' => 'imagecache_canvasactions', ), ), ), array( 'presetname' => 'product_full', 'actions' => array( array( 'action' => 'imagecache_scale', 'data' => array('width' => 600, 'height' => 600, 'upscale' => 0), 'weight' => 0, 'module' => 'imagecache', ), ), ), array( 'presetname' => 'product_list', 'actions' => array( array( 'action' => 'imagecache_scale', 'data' => array('width' => 100, 'height' => 100, 'upscale' => 0), 'weight' => 0, 'module' => 'imagecache', ), array( 'action' => 'canvasactions_canvas2file', 'data' => array('xpos' => 'center', 'ypos' => 'center', 'path' => 'actions/pad_100_100.jpg','dimensions' => 'background',), 'weight' => 1, 'module' => 'imagecache_canvasactions', ), ), ), array( 'presetname' => 'uc_category', 'actions' => array( array( 'action' => 'imagecache_scale', 'data' => array('width' => 100, 'height' => 100, 'upscale' => 0), 'weight' => 0, 'module' => 'imagecache', ), array( 'action' => 'canvasactions_canvas2file', 'data' => array('xpos' => 'center', 'ypos' => 'center', 'path' => 'actions/pad_100_100.gif', 'dimensions' => 'background',), 'weight' => 1, 'module' => 'imagecache_canvasactions', ), ), ), array( 'presetname' => 'cart', 'actions' => array( array( 'action' => 'imagecache_scale', 'data' => array('width' => 50, 'height' => 50, 'upscale' => 0), 'weight' => 0, 'module' => 'imagecache', ), array( 'action' => 'canvasactions_canvas2file', 'data' => array('xpos' => 'center', 'ypos' => 'center', 'path' => 'actions/pad_60_60.gif', 'dimensions' => 'background',), 'weight' => 1, 'module' => 'imagecache_canvasactions', ), ), ), ); foreach ($presets as $preset) { drupal_write_record('imagecache_preset', $preset); foreach ($preset['actions'] as $action) { $action['presetid'] = $preset['presetid']; drupal_write_record('imagecache_action', $action); } } imagecache_presets(true); cache_clear_all('imagecache:presets', 'cache'); } I can see in imagecache UI the settings was applied, but really images disappeared at all. Nothing works now. Where is the mistake?

    Read the article

  • Oracle EBS?????(Order->AR)

    - by Pan.Tian
    ???? ??:Order Management > Orders,Returns > Sales Orders ???????,??,????,???? ???????,????,??... ??Book Order,??Book??,????????Status??????“Booked”,???????"Awaiting Shipping",?????????,??????????????? ??:??Book??,????????????,????Shipping Transactions Form,????,?????????Line Status?Ready to Release,Next Step?Pick Release Pick Release ??:Order Management > Shipping > Release Sales Orders > Release Sales Orders Pick Release????(?????????).?Order  Number?????????? Auto Pick Confirm???No Auto Allocate???N Auto Allocate?Auto Pick Confirm??????Yes,???????????,??????No,???Yes??,?????Allocate?Pick Confirm??,??????????? ??????????Pick  Release,”Concurrent“??Pick Release?????Concurrent Request???,"Execute Now"????????Pick Release,??????????????User,??????Concurrent??? Pick Release?????????Pick Release?????Pick Wave??Move Order,??Move Order????????????????????(Staging),????INV??????????? INV_MOVE_ORDER_PUB.CREATE_MOVE_ORDER_HEADER???Move Order??(??Pick Release?????????????:Pick Release Process) ????????,?Pick Release??,?????????????Reservation(??),?????????Soft Reservations,?????????????,????Org?????????? ??:????,Shipping Transaction?Line Status?"Released to Warehouse",Next Step?"Transact Move Order";????????Booked,?????”Awaiting Shipping“? Pick Confirm Pick Confirm(????)????????Transact Move Order????,?Allocate????,?Transact Move Order. ??:Inventory > Move Orders > Transact Move Orders ????,Pick Wave??Tab,????? ??TMO????,??Allocate,Allocate?????????Picking Rule?????,??????Suggestion????,Suggestion?????? MTL_MATERIAL_TRANSACTIONS_TEMP?(?Pending Transactions)? ????Allocate??,??????Allocation????Single,Multiple??None???,Single??, ??????????Suggestion?Transaction??,Multiple???????;None??????Suggestion? ?(????????????????) ????????Transact??Move Order ?Transact??,Inventory Transaction Manager ???Suggestion Transactions(MMTT),???????????????,??????Subinventory??????(Staging)??? Transction???Material Transaction?Form????? ????Reservation??,?Transact??,???????,Reservation????????,????Sub,locator???? ??:????,Shipping Transaction?Line Status?"Staged/Pick Confirmed",Next Step?"Ship Confirm/Close Trip Stop";????????Booked,??????”Picked“? Ship Confirm Deliveries ??:Order Management > Shipping > Transactions ???Delivery??,??Ship Confirm(????),????Pick Release???,????Autocreate Delivery,???????Define Shipping Parameters????????,??shipping parameters???????,?????????Ship Confirm?????Action->Auto-create Deliveries. Delivery????????????????,????????.... Delivery??,??Ship Confirm???,???????,"Defer Interface"?????,?????????Interface Trip Stop SRS,????Defer Interface,?OK? Delivery was successfully confirmed!!! Ship Confirm????????????MTL_TRANSACTIONS_INTERFACE??,??MTI??????Sales Order Issue,??????????Interface Trip Stop???,???MTI??MMT??? ??:????,Shipping Transaction?Line Status?"Shipped",Next Step?"Run Interfaces";????????Booked,??????”Shipped“? Interface Trip Stop - SRS ?????Ship Confirm??????Defer Interface,??????????????Interface Trip Stop - SRS? ??:Order Management > Shipping > Interface > Run > Request:Interface Trip Stop - SRS Interface Trip Stop????????:Inventory Interface  SRS(????????)? Order Management Interface  SRS(?????????????AR??)? Inventory Interface  SRS???Shipping Transaction??????MTI,??INV Manager????MTI????MMT??,??Sales Order Issue?transaction??????,???????????Reservation????Inventory Interface  SRS?????,???WSH_DELIVERY_DETAILS??INV_INTERFACED_FLAG???Y? Order Management Interface - SRS??Inventory Interface  SRS?????,??Request?????????????AR??,OM Interface????????WSH_DELIVERY_DETAILS??OE_INTERFACED_FLAG?Y? ??:????,Shipping Transaction?Line Status?"Interfaced",Next Step?"Not Applicable";????????Booked,??????”Shipped“? Workflow background Process ??:Inventory > Workflow Background Engine Item Type:OM Order Line Process Deferred:Yes Process Timeout:No ??program????Deffered???workflow,Workflow Background Process???,???????Order????RA Interface???(RA_INTERFACE_LINES_ALL,RA_INTERFACE_SALESCREDITS_ALL,RA_Interface_distribution) ????????SQL???RA Interface??: 1.SELECT * FROM RA_INTERFACE_LINES_ALL WHERE sales_order = '65961'; 2.SELECT * FROM RA_INTERFACE_SALESCREDITS_ALL WHERE INTERFACE_LINE_ID IN (SELECT INTERFACE_LINE_ID FROM RA_INTERFACE_LINES_ALL WHERE sales_order = '65961' ); 3.SELECT * FROM RA_INTERFACE_DISTRIBUTIONS_ALL WHERE INTERFACE_LINE_ID IN (SELECT INTERFACE_LINE_ID FROM RA_INTERFACE_LINES_ALL WHERE sales_order = '65961' ); ?????RA Interface??,??OE_ORDER_LINES_ALL?INVOICE_INTERFACE_STATUS_CODE????? Yes,INVOICED_QUANTITY?????????????????????????Closed,????????Booked? AutoInvoice ????AR?? ??:Account Receivable > Interface > AutoInvoice Name:Autoinvoice Master Program Invoice Source:Order Entry Default Day:???? ???,?request????”Autoinvoice Import Program“???? ???,????Auto Invoice Program????RA?interface?,?????????????,???????AR???? (RA_CUSTOMER_TRX_ALL,RA_CUSTOMER_TRX_LINES,AR_PAYMENT_SCHEDULES). ?????? Order > Action > Additional Information > Invoices/Credit Memos????????,???????SQL?????AR??, SELECT ooha.order_number , oola.line_number so_line_number , oola.ordered_item , oola.ordered_quantity * oola.unit_selling_price so_extended_price , rcta.trx_number invoice_number , rcta.trx_date , rctla.line_number inv_line_number , rctla.unit_selling_price inv_unit_selling_price FROM oe_order_headers_all ooha , oe_order_lines_all oola , ra_customer_trx_all rcta , ra_customer_trx_lines_all rctla WHERE ooha.header_id = oola.header_id AND rcta.customer_trx_id = rctla.customer_trx_id AND rctla.interface_line_attribute6 = TO_CHAR (oola.line_id) AND rctla.interface_line_attribute1 = TO_CHAR (ooha.order_number) AND order_number = :p_order_number; ??Autoinvoice Import Program???error???,?????RA_INTERFACE_ERRORS_ALL?Message_text??,???????? Closing the Order ?????????,?????????(Close??Cancel)?0.5?,??????Workflow Background Process??????? ????????:you can wait until month-end and the “Order Flow – Generic” workflow will close it for you. Order&Shipping Transactions Status Summary Step Order Header Status Order Line Status Order Flow Workflow Status (Order Header) Line Flow Workflow Status (Order Line) Shipping Transaction  Status(RELEASED_STATUS in WDD) 1. Enter an Order Entered Entered Book Order Manual Enter – Line                              N/A 2. Book the Order Booked Awaiting Shipping Close Order Schedule ->Create Supply ->Ship – Line                       Ready to Release(R) 3. Pick the Order Booked Picked Close Order Ship – Line 1.Released to Warehouse(S)(Pick Release but not pick confirm) 2.Staged/Pick Confirmed(Y)(After pick confirm) 4. Ship the Order Booked Shipped Close Order Fulfill – Deferred 1.Shipped(After ship confirm) 2.Interfaced(C)(After ITS) Booked Closed Close Order Fulfill ->Invoice Interface ->Close Line -> End 5. Close the Order Closed Closed End End ????,shipping txn???,??????????:http://blog.csdn.net/pan_tian/article/details/7696528 ======EOF======

    Read the article

  • Right div pushing center div further down

    - by Chase
    I cannot get this last div to go up properly in my layout and have tried countless things. I'm not sure what's going on with my css? Here is a screenshot: http://img291.imageshack.us/img291/5377/screenshot20100528at123.png #events { float: left; width: 420px; margin:0 0 5px 0; font-family:Helvetica, Arial, sans-serif; font-size: 16px; background-image: url(images/lastfmhead.jpg); background-repeat: no-repeat; height:360px; overflow:hidden; display: inline; } #events table { width:419px; } #events th, td { padding: 3px 3px; } #whatsup ul, #citywhatsup ul { margin:0 5px 0 5px; text-align:left; font-family:Helvetica, Arial, sans-serif; } #whatsup ul li, #citywhatsup ul li{ list-style-type:none; list-style: none; } #whatsup hr, #citywhatsup hr{ border: none 0; border-top: 1px dashed #990000;/*the border*/ width: 100%; height: 1px; margin: 1px auto 5px auto;/*whatever the total width of the border-top and border-bottom equal*/ } #events ul { margin:5px 5px 0 5px; } #events ul li{ list-style-type:none; list-style: none; } #attending ul { display: inline-block; margin: 0; width:200px; } #attending ul li { display: inline-block; list-style-image:none; margin:0; padding:2px 5px 2px 5px; } #attending { width: 230px; margin:0 13px 5px 12px; float: left; display: inline; background-image: url(images/otherhead.jpg); background-repeat: no-repeat; text-align:center; height:360px; overflow:hidden; } #whatsup { width: 230px; margin:0 0 5px 0; float: left; display:inline; background-image: url(images/otherhead.jpg); background-repeat: no-repeat; text-align:center; } #eventtitle{ margin: 3px 0 -3px 0; } #eventtitle { color: #900; margin-left: 5px; font-size:16px; } #tweetit { color: #487B96 !important; font-size:16px; margin: 3px 0 -4px 0; } #photos { background-image: url(images/flickrheader.jpg); background-repeat: no-repeat; width: 665px; clear:both; } <div id="cityevents"> <h2> Events </h2> <table> <th>Date </th><th> Who's Playing </th><th> Venue </th><th> City </th><th> Tickets </th> <tr><td>May 28</td><td><a href='http://www.songkick.com/concerts/5384486?utm_source=1121&utm_medium=partner' target='_blank'>Jill King</a></td><td>Open Eye Cafe</td><td>Carrboro</td><td style='text-align:center;'><span style='color: #999'> Find </span></td></tr><tr><td>May 28</td><td><a href='http://www.songkick.com/concerts/5281141?utm_source=1121&utm_medium=partner' target='_blank'>Ahleuchatistas</a></td><td>Nightlight</td><td>Chapel Hill</td><td style='text-align:center;'><span style='color: #999'> Find </span></td></tr><tr><td>May 28</td><td><a href='http://www.songkick.com/concerts/4970896?utm_source=1121&utm_medium=partner' target='_blank'>Sam Quinn</a></td><td>Local 506</td><td>Chapel Hill</td><td style='text-align:center;'><span style='color: #999'> Find </span></td></tr><tr><td>May 29</td><td><a href='http://www.songkick.com/concerts/5303661?utm_source=1121&utm_medium=partner' target='_blank'>Cagematch Mayhem, Champion Vs Au Jus, Heartbreaker Vs Au Jus</a></td><td>DSI Comedy Theater</td><td>Carrboro</td><td style='text-align:center;'><a href='http://www.songkick.com/concerts/5303661/tickets?utm_source=1121&utm_medium=partner' target='_blank'> Find </a></td></tr><tr><td>May 29</td><td><a href='http://www.songkick.com/concerts/4722066?utm_source=1121&utm_medium=partner' target='_blank'>Lewd Acts, Converge, Gaza, Black Breath</a></td><td>Cat's Cradle</td><td>Carrboro</td><td style='text-align:center;'><a href='http://www.songkick.com/concerts/4722066/tickets?utm_source=1121&utm_medium=partner' target='_blank'> Find </a></td></tr><tr><td>May 29</td><td><a href='http://www.songkick.com/concerts/4647076?utm_source=1121&utm_medium=partner' target='_blank'>Nate Currin</a></td><td>Broad Street Cafe</td><td>Durham</td><td style='text-align:center;'><span style='color: #999'> Find </span></td></tr><tr><td>May 29</td><td><a href='http://www.songkick.com/concerts/5580211?utm_source=1121&utm_medium=partner' target='_blank'>International Night</a></td><td>Serena Rtp</td><td>Durham</td><td style='text-align:center;'><a href='http://www.songkick.com/concerts/5580211/tickets?utm_source=1121&utm_medium=partner' target='_blank'> Find </a></td></tr><tr><td>May 29</td><td><a href='http://www.songkick.com/concerts/4770241?utm_source=1121&utm_medium=partner' target='_blank'>Jill King</a></td><td>Caffe Driade</td><td>Chapel Hill</td><td style='text-align:center;'><span style='color: #999'> Find </span></td></tr><tr><td>May 29</td><td><a href='http://www.songkick.com/concerts/5406411?utm_source=1121&utm_medium=partner' target='_blank'>Sunbears!</a></td><td>Local 506</td><td>Chapel Hill</td><td style='text-align:center;'><span style='color: #999'> Find </span></td></tr><tr><td>May 29</td><td><a href='http://www.songkick.com/concerts/4924136?utm_source=1121&utm_medium=partner' target='_blank'>Studio Gangsters</a></td><td>The Reservoir</td><td>Carrboro</td><td style='text-align:center;'><span style='color: #999'> Find </span></td></tr><tr><td>May 30</td><td><a href='http://www.songkick.com/concerts/5252161?utm_source=1121&utm_medium=partner' target='_blank'>She Wants Revenge</a></td><td>Cat's Cradle</td><td>Carrboro</td><td style='text-align:center;'><span style='color: #999'> Find </span></td></tr><tr><td>May 30</td><td><a href='http://www.songkick.com/concerts/4436326?utm_source=1121&utm_medium=partner' target='_blank'>Unheard Radio Battle of the Bands</a></td><td>Mansion 462</td><td>Chapel Hill</td><td style='text-align:center;'><a href='http://www.songkick.com/concerts/4436326/tickets?utm_source=1121&utm_medium=partner' target='_blank'> Find </a></td></tr><tr><td>May 30</td><td><a href='http://www.songkick.com/concerts/4924141?utm_source=1121&utm_medium=partner' target='_blank'>Studio Gangsters</a></td><td>The Cave</td><td>Chapel Hill</td><td style='text-align:center;'><span style='color: #999'> Find </span></td></tr><tr><td>Jun 2</td><td><a href='http://www.songkick.com/concerts/5252881?utm_source=1121&utm_medium=partner' target='_blank'>Jeanne Jolly</a></td><td>Caffe Driade</td><td>Chapel Hill</td><td style='text-align:center;'><span style='color: #999'> Find </span></td></tr><tr><td>Jun 2</td><td><a href='http://www.songkick.com/concerts/4628026?utm_source=1121&utm_medium=partner' target='_blank'>James Husband, Of Montreal</a></td><td>Cat's Cradle</td><td>Carrboro</td><td style='text-align:center;'><a href='http://www.songkick.com/concerts/4628026/tickets?utm_source=1121&utm_medium=partner' target='_blank'> Find </a></td></tr><tr><td>Jun 2</td><td><a href='http://www.songkick.com/concerts/5019466?utm_source=1121&utm_medium=partner' target='_blank'>Camera Obscura</a></td><td>Duke Gardens</td><td>Durham</td><td style='text-align:center;'><a href='http://www.songkick.com/concerts/5019466/tickets?utm_source=1121&utm_medium=partner' target='_blank'> Find </a></td></tr><tr><td>Jun 3</td><td><a href='http://www.songkick.com/concerts/4226511?utm_source=1121&utm_medium=partner' target='_blank'>Reverend Horton Heat, Cracker, Legendary Shack Shakers</a></td><td>Cat's Cradle</td><td>Carrboro</td><td style='text-align:center;'><a href='http://www.songkick.com/concerts/4226511/tickets?utm_source=1121&utm_medium=partner' target='_blank'> Find </a></td></tr><tr><td>Jun 3</td><td><a href='http://www.songkick.com/concerts/5253371?utm_source=1121&utm_medium=partner' target='_blank'>American Aquarium</a></td><td>Local 506</td><td>Chapel Hill</td><td style='text-align:center;'><span style='color: #999'> Find </span></td></tr><tr><td>Jun 4</td><td><a href='http://www.songkick.com/concerts/4285251?utm_source=1121&utm_medium=partner' target='_blank'>Laurence Juber</a></td><td>The ArtsCenter</td><td>Carrboro</td><td style='text-align:center;'><span style='color: #999'> Find </span></td></tr><tr><td>Jun 4</td><td><a href='http://www.songkick.com/concerts/5642566?utm_source=1121&utm_medium=partner' target='_blank'>Community Jam, Pt Scarborough Is a Movie, Armageddon'it</a></td><td>DSI Comedy Theater</td><td>Carrboro</td><td style='text-align:center;'><a href='http://www.songkick.com/concerts/5642566/tickets?utm_source=1121&utm_medium=partner' target='_blank'> Find </a></td></tr><tr><td>Jun 4</td><td><a href='http://www.songkick.com/concerts/4676216?utm_source=1121&utm_medium=partner' target='_blank'>Big Bill Morganfield</a></td><td>Papa Mojos Roadhouse</td><td>Durham</td><td style='text-align:center;'><span style='color: #999'> Find </span></td></tr> </table> </div> <!-- Events --> <div id="citywhatsup"> <h2> What's Up? <div id="tweetit"><a class="btn-slide">Tell em'</a> </div></h2> <div id="twitpanel"></div> <script type="text/javascript"> twttr.anywhere(function (T) { T("#twitpanel").tweetBox({ height: 100, width: 215, label: '', defaultContent: "" }); }); </script> <script type="text/javascript"> twttr.anywhere(function (T) { T("#whatsup").linkifyUsers(); }); </script> <ul> <li><img src='http://a1.twimg.com/profile_images/898693876/4604414396_0464180430_b_normal.jpg' alt='kaiten_keiku' height=40px; width=40px; style='border:0px; float: left; padding-right:4px;'/> @kaiten_keiku: <span style='text-align:justify;'>@Charlotte_Nao ????????~?????????!</span> - <span class='twittertime'>May 28 12:37AM</span></li><hr/><li><img src='http://a3.twimg.com/profile_images/612153581/bowdown_normal.jpg' alt='bugn' height=40px; width=40px; style='border:0px; float: left; padding-right:4px;'/> @bugn: <span style='text-align:justify;'>@Bravotv (sitc2 as rhony) Bethenny-Carrie, Sonja-Samantha, Alex-Miranda, Ramona-Charlotte</span> - <span class='twittertime'>May 28 12:36AM</span></li><hr/><li><img src='http://a1.twimg.com/profile_images/844630278/mj_normal.jpg' alt='Myra_Jones' height=40px; width=40px; style='border:0px; float: left; padding-right:4px;'/> @Myra_Jones: <span style='text-align:justify;'>@t_weet123 If you're still in Charlotte then you need to head to Whiskey River...they say Luke B. just walked in and started drinking.</span> - <span class='twittertime'>May 28 12:36AM</span></li><hr/><li><img src='http://a1.twimg.com/profile_images/936667468/110971230_normal.jpg' alt='THEORACLE2' height=40px; width=40px; style='border:0px; float: left; padding-right:4px;'/> @THEORACLE2: <span style='text-align:justify;'>@MsKamilah08 are yall in charlotte?</span> - <span class='twittertime'>May 28 12:36AM</span></li><hr/><li><img src='http://a1.twimg.com/profile_images/767244842/7AM_normal.jpg' alt='mtollefsrud' height=40px; width=40px; style='border:0px; float: left; padding-right:4px;'/> @mtollefsrud: <span style='text-align:justify;'>@vosler09 thinks I'm Charlotte.</span> - <span class='twittertime'>May 28 12:36AM</span></li><hr/><li><img src='http://a3.twimg.com/profile_images/936496517/DSCF0317_-_Copy_normal.JPG' alt='Thasian' height=40px; width=40px; style='border:0px; float: left; padding-right:4px;'/> @Thasian: <span style='text-align:justify;'>I like #CharMeck #Charlotte | Atlanta = #No #FAIL #EPICFAIL</span> - <span class='twittertime'>May 28 12:36AM</span></li><hr/><li><img src='http://a3.twimg.com/profile_images/695551715/NASCAR_logo_flag_normal.jpg' alt='NascarNewsNow' height=40px; width=40px; style='border:0px; float: left; padding-right:4px;'/> @NascarNewsNow: <span style='text-align:justify;'>#NASCAR #RACING News from the track: Charlotte Motor Speedway | Nascar Leath: Ahh, the waiting is... http://bit.ly/b2DToq #NHRA #DAYTONA500</span> - <span class='twittertime'>May 28 12:35AM</span></li> </ul> </div> <div id="photos"> <h2> Recent Photos </h2> <ul> <li><a href='http://farm5.static.flickr.com/4029/4646832962_980f936db9.jpg' target='_blank' rel='lightbox-photos' title='05 23 10 Jamie's Baby Shower 097'><img src='http://farm5.static.flickr.com/4029/4646832962_980f936db9_t.jpg' alt='05 23 10 Jamie's Baby Shower 097' height=100px; width=100px; style='border:0px;'/></a></li><li><a href='http://farm4.static.flickr.com/3176/4646218481_d06829a778.jpg' target='_blank' rel='lightbox-photos' title='summer'><img src='http://farm4.static.flickr.com/3176/4646218481_d06829a778_t.jpg' alt='summer' height=100px; width=100px; style='border:0px;'/></a></li><li><a href='http://farm5.static.flickr.com/4032/4646833312_7b1de5390a.jpg' target='_blank' rel='lightbox-photos' title='100_0064'><img src='http://farm5.static.flickr.com/4032/4646833312_7b1de5390a_t.jpg' alt='100_0064' height=100px; width=100px; style='border:0px;'/></a></li><li><a href='http://farm5.static.flickr.com/4008/4646832834_784a0a9ed1.jpg' target='_blank' rel='lightbox-photos' title=''><img src='http://farm5.static.flickr.com/4008/4646832834_784a0a9ed1_t.jpg' alt='' height=100px; width=100px; style='border:0px;'/></a></li><li><a href='http://farm5.static.flickr.com/4066/4646218735_b37d8fd9e5.jpg' target='_blank' rel='lightbox-photos' title='DSC05524'><img src='http://farm5.static.flickr.com/4066/4646218735_b37d8fd9e5_t.jpg' alt='DSC05524' height=100px; width=100px; style='border:0px;'/></a></li><li><a href='http://farm5.static.flickr.com/4054/4646830604_97afd54623.jpg' target='_blank' rel='lightbox-photos' title='DTLA graff'><img src='http://farm5.static.flickr.com/4054/4646830604_97afd54623_t.jpg' alt='DTLA graff' height=100px; width=100px; style='border:0px;'/></a></li><li><a href='http://farm5.static.flickr.com/4066/4646833048_7a9ab28733.jpg' target='_blank' rel='lightbox-photos' title='100_0243.jpg'><img src='http://farm5.static.flickr.com/4066/4646833048_7a9ab28733_t.jpg' alt='100_0243.jpg' height=100px; width=100px; style='border:0px;'/></a></li><li><a href='http://farm4.static.flickr.com/3399/4646832626_de89d0fb0e.jpg' target='_blank' rel='lightbox-photos' title='6W????'><img src='http://farm4.static.flickr.com/3399/4646832626_de89d0fb0e_t.jpg' alt='6W????' height=100px; width=100px; style='border:0px;'/></a></li><li><a href='http://farm5.static.flickr.com/4005/4646832826_0d9e8afe19.jpg' target='_blank' rel='lightbox-photos' title='IMG_9381'><img src='http://farm5.static.flickr.com/4005/4646832826_0d9e8afe19_t.jpg' alt='IMG_9381' height=100px; width=100px; style='border:0px;'/></a></li><li><a href='http://farm5.static.flickr.com/4046/4646830752_dfc32b1740.jpg' target='_blank' rel='lightbox-photos' title='11'><img src='http://farm5.static.flickr.com/4046/4646830752_dfc32b1740_t.jpg' alt='11' height=100px; width=100px; style='border:0px;'/></a></li><li><a href='http://farm5.static.flickr.com/4010/4646215929_80b78f0007.jpg' target='_blank' rel='lightbox-photos' title='GEDC8592'><img src='http://farm5.static.flickr.com/4010/4646215929_80b78f0007_t.jpg' alt='GEDC8592' height=100px; width=100px; style='border:0px;'/></a></li><li><a href='http://farm5.static.flickr.com/4064/4646832384_7fc8d31e11.jpg' target='_blank' rel='lightbox-photos' title='2010 Advanced Grappling'><img src='http://farm5.static.flickr.com/4064/4646832384_7fc8d31e11_t.jpg' alt='2010 Advanced Grappling' height=100px; width=100px; style='border:0px;'/></a></li><li><a href='http://farm5.static.flickr.com/4049/4646218143_c108276325.jpg' target='_blank' rel='lightbox-photos' title='P1270352'><img src='http://farm5.static.flickr.com/4049/4646218143_c108276325_t.jpg' alt='P1270352' height=100px; width=100px; style='border:0px;'/></a></li><li><a href='http://farm5.static.flickr.com/4009/4646217767_3900f39475.jpg' target='_blank' rel='lightbox-photos' title='P1270351'><img src='http://farm5.static.flickr.com/4009/4646217767_3900f39475_t.jpg' alt='P1270351' height=100px; width=100px; style='border:0px;'/></a></li><li><a href='http://farm5.static.flickr.com/4027/4646831284_30b6e6da36.jpg' target='_blank' rel='lightbox-photos' title='Image245'><img src='http://farm5.static.flickr.com/4027/4646831284_30b6e6da36_t.jpg' alt='Image245' height=100px; width=100px; style='border:0px;'/></a></li><li><a href='http://farm4.static.flickr.com/3399/4646218295_63a899d322.jpg' target='_blank' rel='lightbox-photos' title='IMG_0037'><img src='http://farm4.static.flickr.com/3399/4646218295_63a899d322_t.jpg' alt='IMG_0037' height=100px; width=100px; style='border:0px;'/></a></li><li><a href='http://farm5.static.flickr.com/4059/4646218159_01d5b02c3f.jpg' target='_blank' rel='lightbox-photos' title='DooDah2010-6665'><img src='http://farm5.static.flickr.com/4059/4646218159_01d5b02c3f_t.jpg' alt='DooDah2010-6665' height=100px; width=100px; style='border:0px;'/></a></li><li><a href='http://farm5.static.flickr.com/4053/4646834404_615e09b715.jpg' target='_blank' rel='lightbox-photos' title='IMG_2668'><img src='http://farm5.static.flickr.com/4053/4646834404_615e09b715_t.jpg' alt='IMG_2668' height=100px; width=100px; style='border:0px;'/></a></li> </ul> </div> <div id="videos"> <h2> Recent Videos </h2> <ul> <li><a href='http://www.youtube.com/watch?v=_oc5-0yFoYg&feature=youtube_gdata' target='_blank'><img src='http://i.ytimg.com/vi/_oc5-0yFoYg/default.jpg'height=100px; width=100px; style='border:0px;'/></a></li><li><a href='http://www.youtube.com/watch?v=1pRXKeYVYHc&feature=youtube_gdata' target='_blank'><img src='http://i.ytimg.com/vi/1pRXKeYVYHc/default.jpg'height=100px; width=100px; style='border:0px;'/></a></li><li><a href='http://www.youtube.com/watch?v=yzRQUu-ZBdw&feature=youtube_gdata' target='_blank'><img src='http://i.ytimg.com/vi/yzRQUu-ZBdw/default.jpg'height=100px; width=100px; style='border:0px;'/></a></li><li><a href='http://www.youtube.com/watch?v=mud-A76nLro&feature=youtube_gdata' target='_blank'><img src='http://i.ytimg.com/vi/mud-A76nLro/default.jpg'height=100px; width=100px; style='border:0px;'/></a></li><li><a href='http://www.youtube.com/watch?v=TLOboW19_OA&feature=youtube_gdata' target='_blank'><img src='http://i.ytimg.com/vi/TLOboW19_OA/default.jpg'height=100px; width=100px; style='border:0px;'/></a></li><li><a href='http://www.youtube.com/watch?v=PcYja2jjvi0&feature=youtube_gdata' target='_blank'><img src='http://i.ytimg.com/vi/PcYja2jjvi0/default.jpg'height=100px; width=100px; style='border:0px;'/></a></li><li><a href='http://www.youtube.com/watch?v=KKjklCEMrPk&feature=youtube_gdata' target='_blank'><img src='http://i.ytimg.com/vi/KKjklCEMrPk/default.jpg'height=100px; width=100px; style='border:0px;'/></a></li><li><a href='http://www.youtube.com/watch?v=AyUwY6PRX0Y&feature=youtube_gdata' target='_blank'><img src='http://i.ytimg.com/vi/AyUwY6PRX0Y/default.jpg'height=100px; width=100px; style='border:0px;'/></a></li><li><a href='http://www.youtube.com/watch?v=8Sf2-7RjVYs&feature=youtube_gdata' target='_blank'><img src='http://i.ytimg.com/vi/8Sf2-7RjVYs/default.jpg'height=100px; width=100px; style='border:0px;'/></a></li><li><a href='http://www.youtube.com/watch?v=xGMayoJmhE8&feature=youtube_gdata' target='_blank'><img src='http://i.ytimg.com/vi/xGMayoJmhE8/default.jpg'height=100px; width=100px; style='border:0px;'/></a></li><li><a href='http://www.youtube.com/watch?v=paseBeB6Cb8&feature=youtube_gdata' target='_blank'><img src='http://i.ytimg.com/vi/paseBeB6Cb8/default.jpg'height=100px; width=100px; style='border:0px;'/></a></li><li><a href='http://www.youtube.com/watch?v=l_FSRUtMMik&feature=youtube_gdata' target='_blank'><img src='http://i.ytimg.com/vi/l_FSRUtMMik/default.jpg'height=100px; width=100px; style='border:0px;'/></a></li> </ul> </div> </div><!-- #content -->

    Read the article

< Previous Page | 136 137 138 139 140 141 142 143 144 145 146 147  | Next Page >