Search Results

Search found 12182 results on 488 pages for 'ipod style'.

Page 85/488 | < Previous Page | 81 82 83 84 85 86 87 88 89 90 91 92  | Next Page >

  • JQuery Dynamic Element - In DOM but unable to bind

    - by Grant80
    Hi All, I'm new to using JQuery so bear with me. I had implmented some code based on a js file that I found online which enables a series of div tags within a nested structure on my page to step through and show each one individually on the page. This all works great when I define the div tags as static entries in the masterpage. I should add that this is being implemented in a SharePoint master page. Ultimately though, with a static collection of div tags ideally containing an image with some descriptive text, and a hyperlink its not very flexible. Roll on my changes to make this a little more configurable. I have implemented some additional code that will read from a SharePoint list via an ajax call to the lists web service. For each entry in the list I am building a div tag that contains the information required dynamically. For testing, I am only pulling the title through at present. I have used the following code: $('#beltDiv').append(divHTML) to append the divs in the loop that are created to my nested structure on the page. I figured that this would cause the fade code to work as expected but I was wrong. It doesn't do anything at all. When check the source on the page, the div tags are not shown. They are however available in the DOM model when viewed through the IE developer toolbar. The issue (I think) looks to be that the initiation of the featureFade code is not working due to the div tags being unavailable. Is there a way to address this? The code used is shown below: <script type="text/javascript"> $(document).ready(function() { var soapEnv = "<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \ <soapenv:Body> \ <GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \ <listName>Carousel Items</listName> \ <viewFields> \ <ViewFields> \ <FieldRef Name='Title' /> \ </ViewFields> \ </viewFields> \ </GetListItems> \ </soapenv:Body> \ </soapenv:Envelope>"; $.ajax({ url: "_vti_bin/lists.asmx", type: "POST", dataType: "xml", data: soapEnv, complete: processResult, contentType: "text/xml; charset=\"utf-8\"" }); }); function processResult(xData, status) { $(xData.responseXML).find("z\\:row").each(function() { var divHTML = "<div id=\"divPanel_" + $(this).attr("ows_Title") + "\" class=\"panel\" style=\"background:url('http://devSP2010/sites/SPSOPS/Style Library/SharePointOps/Images/01.jpg') no-repeat; width:650px; height:55px;\"><div><div class=\"content\"><div><P><A style=\"COLOR: #cc0000\" href=\"www.google.com\">" + $(this).attr("ows_Title") + "</A></P><P>&nbsp;</P><P>&nbsp;</P><P>&nbsp;</P><P>&nbsp;</P></div></div></div></div>"; $("#beltDiv").append(divHTML); }); } featureFade.setup({ galleryid: 'headlines', beltclass: 'belt', panelclass: 'panel', autostep: { enable: true, moveby: 1, pause: 10000 }, panelbehavior: { speed: 1000, wraparound: true }, stepImgIDs: ["ftOne", "ftTwo", "ftThree", "ftFour","ftFive"], defaultButtons: { itemOn: "Style Library/SharePointOps/Images/dotOn.png", itemOff: "Style Library/SharePointOps/Images/dotOff.png" } }); The section where the div tags are dynamically appended is shown below. I've commented out the static div tags that work as expected. The only change is that these are implmented by the JQuery logic: <div class="homeFeature" style="display:inline-block"> <div id="headlines" class="headlines"> <div id="beltDiv" class="belt"> <!-- <div id="divPanel_ct01" class="panel" style="position:absolute;background-image:url('http://devsp2010/sites/spsops/Style Library/SharePointOps/Images/01.jpg'); background-repeat:no-repeat">Static Test 1</div> <div id="divPanel_ct02" class="panel" style="position:absolute;background-image:url('http://devsp2010/sites/spsops/Style Library/SharePointOps/Images/02.jpg'); background-repeat:no-repeat">Static Test 2</div> --> </div> </div> I'm stumped as to why it's not recognising the dynamically added elements in the DOM. Any help would be greatly appreciated on this. I'm happy to provide any further information on this. Thanks in advance, Grant Further to the answer recieved: I have modified the function call: function processResult(xData, status) { $(xData.responseXML).find("z\\:row").each( function() { /*alert($(this).attr("ows_ImagePath"));*/ var divHTML = "<div id=\"divPanel_" + $(this).attr("ows_Title") + "\" class=\"panel\" style=\"background:url('http://devSP2010/sites/SPSOPS/Style Library/SharePointOps/Images/ClydePort01big.jpg') no-repeat; width:650px; height:55px;\"><div><div class=\"content\"><div><P><A style=\"COLOR: #cc0000\" href=\"www.google.com\">" + $(this).attr("ows_Title") + "</A></P><P>&nbsp;</P><P>&nbsp;</P><P>&nbsp;</P><P>&nbsp;</P></div></div></div></div>"; $("#beltDiv").append(divHTML); } ); featureFade.setup( { galleryid: 'headlines', beltclass: 'belt', panelclass: 'panel', autostep: { enable: true, moveby: 1, pause: 10000 }, panelbehavior: { speed: 1000, wraparound: true }, stepImgIDs: ["ftOne", "ftTwo", "ftThree", "ftFour","ftFive"], defaultButtons: { itemOn: "Style Library/SharePointOps/Images/dotOn.png", itemOff: "Style Library/SharePointOps/Images/dotOff.png" } } ); }

    Read the article

  • Advanced CSS layout problem

    - by Tower
    Hi, I want to create a dialog with a title, borders (left, right, bottom) as well as the content. The current source code: <html> <body> <div style="background: #0ff; width: 152px; height: 112px; position: absolute; top: 24px; left: 128px; display: table"> <div style="display: table-row;"> <div style="background: #f00; width: 100%; display: table-cell;height: 24px;">top</div> </div> <div style="display: table-row;"> <div style="background: #0f0; width: 100%; display: table-cell;"> <div style="display: table;"> <div style="display: table-row;"> <div style="display: table-cell; width: 4px; height: 100%; background: #000;"></div> <div style="display: table-cell;"> <div style="overflow: scroll; white-space: nowrap"> cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br /> cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br /> cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br /> cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br /> cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br /> cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br /> cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br /> cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br /> cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br /> </div> </div> <div style="display: table-cell; width: 4px; height: 100%; background: #000;"></div> </div> </div> </div> </div> <div style="display: table-row;"> <div style="background: #000; width: 100%; display: table-cell; height: 4px;"></div> </div> </div> </body> </html> produces an output of what happened to the left and the right borders and why does the size exceed the width specified in the top parent (152px)?

    Read the article

  • wmd editor (jquery version) over ajax forms

    - by Davide Barison
    i'm trying wmd editor over ajax. here there is the bugged code wdm code is based on openlibrary fork on github it work very good without ajax. but when i try to display editor over ajax form it doesn't load. non ajax version produce this html: <div id="wmd-container"> <div id="wmd-button-bar"></div> <div id="wmd-button-bar-0" class="wmd-button-bar"><ul class="wmd-button-row"><li style="background-position: 0px 0px;" title="Strong &lt;strong&gt; Ctrl+B" class="wmd-button wmd-bold-button"></li><li style="background-position: -20px 0px;" title="Emphasis &lt;em&gt; Ctrl+I" class="wmd-button wmd-italic-button"></li><li class="wmd-spacer"></li><li style="background-position: -40px 0px;" title="Hyperlink &lt;a&gt; Ctrl+L" class="wmd-button wmd-link-button"></li><li style="background-position: -60px 0px;" title="Blockquote &lt;blockquote&gt; Ctrl+Q" class="wmd-button wmd-quote-button"></li><li style="background-position: -80px 0px;" title="Code Sample &lt;pre&gt;&lt;code&gt; Ctrl+K" class="wmd-button wmd-code-button"></li><li style="background-position: -100px 0px;" title="Image &lt;img&gt; Ctrl+G" class="wmd-button wmd-image-button"></li><li class="wmd-spacer"></li><li style="background-position: -120px 0px;" title="Numbered List &lt;ol&gt; Ctrl+O" class="wmd-button wmd-olist-button"></li><li style="background-position: -140px 0px;" title="Bulleted List &lt;ul&gt; Ctrl+U" class="wmd-button wmd-ulist-button"></li><li style="background-position: -160px 0px;" title="Heading &lt;h1&gt;/&lt;h2&gt; Ctrl+H" class="wmd-button wmd-heading-button"></li><li style="background-position: -180px 0px;" title="Horizontal Rule &lt;hr&gt; Ctrl+R" class="wmd-button wmd-hr-button"></li><li class="wmd-spacer"></li><li style="background-position: -200px -20px;" title="Undo - Ctrl+Z" class="wmd-button wmd-undo-button"></li><li style="background-position: -220px -20px;" title="Redo - Ctrl+Shift+Z" class="wmd-button wmd-redo-button"></li><li style="background-position: -240px 0px;" class="wmd-button wmd-help-button"><a title="WMD website" target="_blank" href="http://wmd-editor.com/"></a></li></ul></div><div id="wmd-button-bar-2" class="wmd-button-bar"></div><div id="wmd-button-bar-4" class="wmd-button-bar"></div><textarea id="wmd-input" class="resizable" name="post-text" cols="92" rows="15" tabindex="101"></textarea><div id="wmd-preview-4" class="wmd-preview"></div><div id="wmd-preview-2" class="wmd-preview"></div><div id="wmd-preview-0" class="wmd-preview"></div> </div> with ajax form: <div id="wmd-container"> <div id="wmd-button-bar"></div> <div id="wmd-button-bar-1" class="wmd-button-bar"></div><div id="wmd-button-bar-3" class="wmd-button-bar"></div><textarea id="wmd-input" class="resizable" name="post-text" cols="92" rows="15" tabindex="101"></textarea><div id="wmd-preview-3" class="wmd-preview"></div><div id="wmd-preview-1" class="wmd-preview"></div> </div> any help?

    Read the article

  • Bookmarking n Joomla

    - by Aruna
    Hi, i am using the Plugin Content Bookmarker downloaded from http://dev.aarthikaindia.com/downloads/category/3-plugins.html for my site. Some of the Articles are able to Bookmark like if i click on the Bookmark (twitter) , it directly bookmarks in Twitter with Some description of the Article where some of the Articles are not bookmarked instead it just links to http://www.twitter.com.. Code : <?php // no direct access defined( '_JEXEC' ) or die( 'Restricted access' ); $mainframe->registerEvent( 'onAfterDisplayContent', 'plgContentBookmarker' ); function plgContentBookmarker( &$row, &$params, $page=0 ) { $plugin = & JPluginHelper::getPlugin('content', 'bookmarker'); // Load plugin params info $pluginParams = new JParameter($plugin->params); $id = $row-id; $desc_tags = addslashes(str_replace("\n","", $row->title )); $desc_tags = trim($desc_tags); $desc_tags_space= str_replace(',', ' ', @$desc_tags_space); $desc_tags_semi = str_replace(',', ';', @$desc_tags_semi); $desc_tags_space = str_replace(' ', ' ', @$desc_tags_space); $description1 = strip_tags( $row->introtext ); $description2 = str_replace("'", '', strip_tags($description1)); $description = str_replace('"', '', strip_tags($description2)); $markme_title = $desc_tags; $markme_ddesc = substr($description,0,400).'...'; $baseurl = JURI::base(); $title = $pluginParams->def('title', 'Book Mark this Article'); $facebook = $pluginParams->def('facebook', '1'); $twitter = $pluginParams->def('twitter', '1'); $html.= '<div onmouseover="javascript:if(document.getElementById(\'divShowAddBookmarker'.$id.'\').style.display ==\'none\'){document.getElementById(\'divShowAddBookmarker'.$id.'\').style.display =\'block\';}" onmouseout="javascript:if(document.getElementById(\'divShowAddBookmarker'.$id.'\').style.display ==\'block\'){document.getElementById(\'divShowAddBookmarker'.$id.'\').style.display =\'none\';}" id="divShowAddBookmarker'.$id.'" style="display:none;position:absolute; background-color:#F4F4F4;width:240px;padding:3px;border:2px solid #999999;z-index:999"> <div style="padding:2px;">'; if( $facebook == 1 ) { $html.= '<div style="width:115px;float:left"> <a style="text-decoration:none;" href="http://www.facebook.com/" onclick="window.open(\'http://www.facebook.com/share.php?u=\'+encodeURIComponent(location.href)+\'&amp;t='.$markme_title.'&amp;d='.$markme_ddesc.'\');return false;"> <img style="vertical-align:bottom;padding:1px;" src="'.$baseurl."plugins/content/smart_bookmarker/facebook.gif".'" title="Facebook" name="facebook" border="0" id="facebook" alt="" /> '.JText::_( 'Facebook' ).' </a> </div>'; } if( $twitter == 1 ) { $html.= '<div style="width:115px;float:left"> <a style="text-decoration:none;" href="http://www.twitter.com/" onclick="window.open(\'http://twitter.com/home/?status=\'+encodeURIComponent(location.href)+\'-'.$markme_ddesc.'\');return false;"> <img style="vertical-align:bottom;padding:1px;" src="'.$baseurl."plugins/content/smart_bookmarker/twitter.gif".'" title="twitter" name="twitter" border="0" id="twitter" alt="" /> '.JText::_( 'Twitter' ).' </a> </div>'; } $html.= '<div style="clear:both"></div> </div> </div>'; return $html; } ? In the CODE $markme_ddesc is used to give the status message which is the actual portion of the content which is tweeted .. I had a doubt whether this $markme_ddesc is used to make the issue.. Is it so.. Please suggest me..

    Read the article

  • Animated background image in a hidden <div> doesn't load or loads not animated

    - by Guanche
    Hello, I have spent the whole day trying to make a script which on "submit" hides the form and shows hidden with animated progress bar. The problem is that Internet Explorer doesn't show animated gif images in hidden divs. The images are static. I visited many websites and found a script which uses: document.getElementById(id).style.backgroundImage = 'url(/images/load.gif)'; Finally, my script works in Internet Explorer, Firefox, Opera but... Google Chrome doesn't display the image at all. I see only div text. After many tests I discovered the following: the only way to see the background image in Google Chrome is to include the same image somewhere in the page (outside of hidden div) with 1px dimensions: <img src="/images/load.gif" width="1" heigh="1" /> This did the trick but... after this dirty solution Microsoft Explorer for some reason shows the image as static again. So, my question is: is there any way how to force Gogle Chrome to show the image? Thanks. This is my script: <script language="JavaScript" type="text/javascript"> function ver (id, elementId){ if (document.getElementById('espera').style.visibility == "visible") { return false; }else{ var esplit = document.forms[0]['userfile'].value.split("."); ext = esplit[esplit.length-1]; if (document.forms[0]['userfile'].value == '') { alert('Please select a file'); return false; }else{ if ((ext.toLowerCase() == 'jpg')) { document.getElementById(id).style.position = 'absolute'; document.getElementById(id).style.display = 'inline'; document.getElementById(id).style.visibility = "visible"; document.getElementById(id).style.backgroundImage = 'url(/images/load.gif)'; document.getElementById(id).style.height = "100px"; document.getElementById(id).style.backgroundColor = '#f3f3f3'; document.getElementById(id).style.backgroundRepeat = "no-repeat"; document.getElementById(id).style.backgroundPosition = "50% 50%"; var element; if (document.all) element = document.all[elementId]; else if (document.getElementById) element = document.getElementById(elementId); if (element && element.style) element.style.display = 'none'; return true; }else{ alert('This is not a jpg file'); return false; } } } } </script> <div id="frmDiv"> <form enctype="multipart/form-data" action="/upload.php" method="post" name="upload3" onsubmit="return ver('espera','frmDiv');"> <input type="hidden" name="max_file_size" value="4194304" /> <table border="0" cellspacing="1" cellpadding="2" width="100%"> <tr bgcolor="#f5f5f5"> <td>File (jpg)</td> <td> <input type="file" name="userfile" class="upf" /></td></tr> <tr bgcolor="#f5f5f5"> <td>&nbsp;</td> <td> <input class="upf2" type="submit" name="add" value="Upload" /> </td></tr></table></form> </div> <div id="espera" style="display:none;text-align:center;float:left;width:753px;">&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;<br /> &nbsp;<br />Please wait...<br />&nbsp; </div>

    Read the article

  • Horizontal navigation from next previous buttons for Overflow:Hidden div

    - by brz dot net
    See following Code <div> <a id="west" href="javascript:void(0);" onclick="scrollBlockWest();"><<West</a> <a id="east" href="javascript:void(0);" onclick="scrollBlockEast();">East >></a> </div> <div id="myScrollContainer" style="overflow:hidden; width:900px; height:700px"> <table id="myScrollContent"><tr><td> <div id="block0" style="display:block;height:300px; width:300px; background-color:Lime">Content 0</div> </td><td> <div id="block1" style="display:block;height:300px; width:300px; background-color:Aqua">Content 1</div> </td><td> <div id="block2" style="display:block;height:300px; width:300px; background-color:Blue">Content 2</div> </td><td> <div id="block3" style="display:block;height:300px; width:300px; background-color:Gray">Content 3</div> </td><td> <div id="block4" style="display:block;height:300px; width:300px; background-color:Gray">Content 4</div> </td> </tr></table> </div> This is my script: <script type="text/javascript" > var totalBlock = 4; var currentBlock = 0; function scrollBlockEast() { var blk = document.getElementById('block'+currentBlock); //alert('block'+blockid); blk.style.display='none'; currentBlock++; //document.getElementById('myScrollContent').style.left = -100; if(currentBlock<totalBlock) { document.getElementById('west').style.display='inline'; } //alert(totlaBlock-1); if(currentBlock==totalBlock) { document.getElementById('east').style.display='none'; } } function scrollBlockWest() { currentBlock--; document.getElementById('block'+currentBlock).style.display='inline'; if(currentBlock<1) { document.getElementById('west').style.display='none'; } else { document.getElementById('east').style.display='inline'; } } </script> Now My object is to slide block on << and click. By default, 3 blocks(Content 0,Content 1,Content 2) are coming. When is clicked then (Content 1,Content 2,Content 3) will come. For this, I hide content 0 block. But layout will disturb on << click. I know this is wrong way. I should set left position instead of hiding content but it is empty I tried to set left position but no luck. Let me know How the block can be moved one by one using javascript and what is the best approach to do this?

    Read the article

  • How can I css for List/grid in div with border?

    - by Saidul Haque Nayan
    I want to create a list table in DIV with border. When more content of width of a column then line break and border increase but other column border not increase. see the example: Untitled Document /list/ .list_container{ float:left; width: 550px; margin-bottom:10px; font-family: vardana; } .list_row{ float:left; width: 548px; border-bottom:1px #9F9F9F solid; } .list_row:hover{ background-color:#CCCCCC; } .list_rowHeader{ float:left; width: 548px; border-bottom:1px #9F9F9F solid; border-top:1px #9F9F9F solid; font-weight: bold; background-color: #FF0000; color: #FFFFFF; } .list_column{ float:left; padding: 3px; border-left: 1px #9F9F9F solid; } .list_columnLast{ float:left; padding: 3px; border-left: 1px #9F9F9F solid; border-right: 1px #9F9F9F solid; } .even{ background-color:#E0E0E0!important;} .odd{ background-color:#FFFFFF!important;} </style> </head> <body> <div class="list_container" > <div class="list_rowHeader" > <div class="list_column" style="width: 250px;">Name</div> <div class="list_column" style="width: 96px;"> Bid Amount</div> <div class="list_columnLast" style="width: 180px;"> Email </div> </div> <div class="list_row even" > <div class="list_column" style="width: 250px;">Saidul Haque</div> <div class="list_column" style="width: 96px;"> 2131231</div> <div class="list_columnLast" style="width: 180px;"> [email protected]</div> </div> <div class="list_row odd" > <div class="list_column" style="width: 250px;">Saidul Haque, Sonargaon, Bangladesh Dhaka, </div> <div class="list_column" style="width: 96px;"> 2131231</div> <div class="list_columnLast" style="width: 180px;"> [email protected]</div> </div> <div class="list_row even" > <div class="list_column" style="width: 250px;">Saidul Haque</div> <div class="list_column" style="width: 96px;"> 2131231</div> <div class="list_columnLast" style="width: 180px;"> [email protected]</div> </div> </div> </body> Any body solve this problem?

    Read the article

  • HTML CheckBox labels within a container are not displayed as expected

    - by Tiny
    The following HTML code attempts to display checkboxes inside a <div></div> container. <div style="overflow: auto; width: auto; display:block; max-height:130px; max-width:200px; background-color: #FFF; height: auto; border: 1px double #336699; padding-left: 2px;"> <label for="chk12" style='white-space: nowrap;'> <input type='checkbox' id="chk12" name='chk_colours' value="12" class='validate[required] text-input text'> <div style='background-color:#FF8C00; width: 180px;' title="darkorange">&nbsp;&nbsp;</div> </label> <label for="chk11" style='white-space: nowrap;'> <input type='checkbox' id="chk11" name='chk_colours' value="11" class='validate[required] text-input text'> <div style='background-color:#D9D919; width: 180px;' title="brightgold">&nbsp;&nbsp;</div> </label> <label for="chk10" style='white-space: nowrap;'> <input type='checkbox' id="chk10" name='chk_colours' value="10" class='validate[required] text-input text'> <div style='background-color:#76EE00; width: 180px;' title="chartreuse2">&nbsp;&nbsp;</div> </label> <label for="chk9" style='white-space: nowrap;'> <input type='checkbox' id="chk9" name='chk_colours' value="9" class='validate[required] text-input text'> <div style='background-color:#2E0854; width: 180px;' title="indigo">&nbsp;&nbsp;</div> </label> <label for="chk8" style='white-space: nowrap;'> <input type='checkbox' id="chk8" name='chk_colours' value="8" class='validate[required] text-input text'> <div style='background-color:#292929; width: 180px;' title="gray16">&nbsp;&nbsp;</div> </label> </div> What it displays can be visible in the following snap shot. It is seen that various colour stripes which are displayed using the following <div> tag <div style='background-color:#FF8C00; width: 180px;' title="darkorange">&nbsp;&nbsp</div> are displayed below their respective checkboxes which are expected to be displayed in a straight line even though I'm using the white-space: nowrap; style attribute. How to display each stripe along with its respective checkbox in a straight line? It was explained in one of my questions itself but in that question each checkbox had a text label in place of such colour stripes. Here it is. I tried to do as mentioned in the accepted answer of that question but to no avail in this case.

    Read the article

  • jQuery how to add class to a parent div which has a 3rd level child div with a specific class name.

    - by Vikram
    Hello friends I have an issue adding a special class to a couple of my divs. My layout is like this. <div class="container"> <div class="grid-6 push-3 equal" style="height: 999px;"> <div class="block"> <div id="mainbody"> <!-- Body content here --> </div> </div> </div> <div class="grid-2 equal" style="height: 999px;"> <div class="block"> <div id="sidebar-a"> <!-- Sidebar-a content here --> </div> </div> </div> <div class="grid-2 equal" style="height: 999px;"> <div class="block"> <div id="sidebar-b"> <!-- Sidebar-b content here --> </div> </div> </div> <div class="grid-2 equal" style="height: 999px;"> <div class="block"> <div id="sidebar-b"> <!-- Sidebar-c content here --> </div> </div> </div> </div> I want to add a different background color to each of my sidebars via CSS and when I code like: #mainbody { background : #fff; } #sidebar-a { background : #eee; } #sidebar-b { background : #ddd; } #sidebar-c { background : #ccc; } It is applying the background only to that specific class but that specific class is not of equal height. I actually need to apply to this <div class="grid-2 equal" style="height: 999px;"> div. Now the issue is that in this <div class="grid-6 push-3 equal" style="height: 999px;"> and class="grid-2 equal" style="height: 999px;"> the class names grid-6 and grid-2 are generated dynamically by my PHP of 960 Grid System and also the style="height: 999px; is generated by a jQuery script for Equal-Columns. What I want is to add a unique class name like this...... Look for a div with a class of .equal which has a child div with a class of .block and which further has a child div with an ID of sidebar-a. IF TRUE then add a class of .sidebar-a to the maindiv which has a class of .equal So that the result looks like this: <div class="grid-6 equal push-3 mainbody" style="height: 999px;"> <div class="grid-2 equal sidebar-a" style="height: 999px;"> <div class="grid-2 equal sidebar-b" style="height: 999px;"> <div class="grid-2 equal sidebar-c" style="height: 999px;"> Then I'll be able to style it like this: .mainbody { background : #fff; } .sidebar-a { background : #eee; } .sidebar-b { background : #ddd; } .sidebar-c { background : #ccc; } Hence I thought since I am anyway using jQuery in my Template, why not use it to deal with this issue. Please feel free to suggest a better way if you have something else in mind.

    Read the article

  • [JavaScript-CSS-Firefox] Cannot change borderColor of TD

    - by Tadeus Prastowo
    Using JS to set the background color of a TD is fine. But, setting the border color is problematic in FF 3.0.18 although IE 6 doesn't experience this. FF is problematic in that it requires the TD element to have an attribute style initialized to border-style: solid. Without that, setting border color of a TD won't work. Is this known bug? How do I set the border color without having to set style attribute as well as the initialization value? I know another trick of setting the class attribute instead of setting the border color directly. Is this an indication that somehow TD hates having its border color set dynamically? Is this known as well? The problematic code is below (the goal is find out why setting the border color of simple truth 1 does not work while simple truth 3 works when I employ the trick described above): <html> <head> <title>Quirks FF 3.0.18</title> <style type="text/css"> table { border-collapse: collapse; } </style> <script type="text/javascript"> function changeBgColor() { document.getElementById('simple').style.backgroundColor='yellow'; document.getElementById('simple2').style.backgroundColor='yellow'; document.getElementById('simple3').style.backgroundColor='yellow'; } function quirk(id) { var x = document.getElementById(id); x.style.border = '2px solid red'; } </script> </head> <body> <input type="button" onclick="changeBgColor()" value="Change background color"/> <input type="button" onclick="quirk('simple')" value="Change border color 1"/> <input type="button" onclick="quirk('simple2')" value="Change border color 2"/> <input type="button" onclick="quirk('simple3')" value="Change border color 3"/> <table> <tr><td id="simple">Simple truth 1</td></tr> </table> <table> <tr><td><span id="simple2">Simple truth 2</span></td></tr> <table> <tr><td id="simple3" style="border-style: solid">Simple truth 3</td></tr> </table> </body> </html>

    Read the article

  • how to change a button into a imagebutton in asp.net c#

    - by sweetsecret
    How to change the button into image button... the button in the beginning has "Pick a date" when clicked a calender pops out and the when a date is selected a label at the bottom reading the date comes in and the text on the button changes to disabled... i want to palce a imagebutton having a image icon of the calender and rest of the function will be the same.... the code as follows: using System; using System.Collections.Generic; using System.ComponentModel; using System.Text; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; [assembly: TagPrefix("DatePicker", "EWS")] namespace EclipseWebSolutions.DatePicker { [DefaultProperty("Text")] [ToolboxData("<{0}:DatePicker runat=server")] [DefaultEvent("SelectionChanged")] [ValidationProperty("TextValue")] public class DatePicker : WebControl, INamingContainer { #region Properties public TextBox txtDate = new TextBox(); public Calendar calDate = new Calendar(); public Button btnDate = new Button(); public Panel pnlCalendar = new Panel(); private enum ViewStateConstants { ValidationGroup, RegularExpression, ErrorMessage, RegExText, CalendarPosition, FormatString, ExpandLabel, CollapseLabel, ApplyDefaultStyle, CausesValidation, } /// <summary> /// Defines the available display modes of this calendar. /// </summary> public enum CalendarDisplay { DisplayRight, DisplayBelow } /// <summary> /// Where to display the popup calendar. /// </summary> [Category("Behaviour")] [Localizable(true)] public CalendarDisplay CalendarPosition { get { if (ViewState[ViewStateConstants.CalendarPosition.ToString()] == null) { ViewState[ViewStateConstants.CalendarPosition.ToString()] = CalendarDisplay.DisplayRight; } return (CalendarDisplay)ViewState[ViewStateConstants.CalendarPosition.ToString()]; } set { ViewState[ViewStateConstants.CalendarPosition.ToString()] = value; } } /// <summary> /// Text version of the control's value, for use by ASP.NET validators. /// </summary> public string TextValue { get { return txtDate.Text; } } /// <summary> /// Holds the current date value of this control. /// </summary> [Category("Behaviour")] [Localizable(true)] [Bindable(true, BindingDirection.TwoWay)] public DateTime DateValue { get { try { if (txtDate.Text == "") return DateTime.MinValue; DateTime val = DateTime.Parse(txtDate.Text); return val; } catch (ArgumentNullException) { return DateTime.MinValue; } catch (FormatException) { return DateTime.MinValue; } } set { if (value == DateTime.MinValue) { txtDate.Text = ""; } else { txtDate.Text = value.ToShortDateString(); } } } [Category("Behavior"), Themeable(false), DefaultValue("")] public virtual string ValidationGroup { get { if (ViewState[ViewStateConstants.ValidationGroup.ToString()] == null) { return string.Empty; } else { return (string)ViewState[ViewStateConstants.ValidationGroup.ToString()]; } } set { ViewState[ViewStateConstants.ValidationGroup.ToString()] = value; } } /// <summary> /// The label of the exand button. Shown when the calendar is hidden. /// </summary> [Bindable(true)] [Category("Appearance")] [DefaultValue("PickDate")] [Localizable(true)] public string ExpandButtonLabel { get { String s = (String)ViewState[ViewStateConstants.ExpandLabel.ToString()]; return ((s == null) ? "PickDate" : s); } set { ViewState[ViewStateConstants.ExpandLabel.ToString()] = value; } } /// <summary> /// The label of the collapse button. Shown when the calendar is visible. /// </summary> [Bindable(true)] [Category("Appearance")] [DefaultValue("Disabled")] [Localizable(true)] public string CollapseButtonLabel { get { String s = (String)ViewState[ViewStateConstants.CollapseLabel.ToString()]; return ((s == null) ? "Disabled" : s); } set { ViewState[ViewStateConstants.CollapseLabel.ToString()] = value; } } /// <summary> /// Whether to apply the default style. Disable this if you want to apply a custom style, or to use themes and skins /// to style the control. /// </summary> [Category("Appearance")] [DefaultValue(true)] [Localizable(true)] public bool ApplyDefaultStyle { get { if (ViewState[ViewStateConstants.ApplyDefaultStyle.ToString()] == null) { ViewState[ViewStateConstants.ApplyDefaultStyle.ToString()] = true; } return (bool)ViewState[ViewStateConstants.ApplyDefaultStyle.ToString()]; } set { ViewState[ViewStateConstants.ApplyDefaultStyle.ToString()] = value; } } /// <summary> /// Causes Validation /// </summary> [Category("Appearance")] [DefaultValue(false)] [Localizable(false)] public bool CausesValidation { get { if (ViewState[ViewStateConstants.CausesValidation.ToString()] == null) { ViewState[ViewStateConstants.CausesValidation.ToString()] = false; } return (bool)ViewState[ViewStateConstants.CausesValidation.ToString()]; } set { ViewState[ViewStateConstants.CausesValidation.ToString()] = value; btnDate.CausesValidation = value; } } #endregion #region Events /// <summary> /// A day was selected from the calendar control. /// </summary> public event EventHandler SelectionChanged; protected virtual void OnSelectionChanged() { if (SelectionChanged != null) // only raise the event if someone is listening. { SelectionChanged(this, EventArgs.Empty); } } #endregion #region Event Handlers /// <summary> /// The +/- button was clicked. /// </summary> protected void btnDate_Click(object sender, System.EventArgs e) { if (!calDate.Visible) { // expand the calendar calDate.Visible = true; txtDate.Enabled = false; btnDate.Text = CollapseButtonLabel; if (DateValue != DateTime.MinValue) { calDate.SelectedDate = DateValue; calDate.VisibleDate = DateValue; } } else { // collapse the calendar calDate.Visible = false; txtDate.Enabled = true; btnDate.Text = ExpandButtonLabel; } } /// <summary> /// A date was selected from the calendar. /// </summary> protected void calDate_SelectionChanged(object sender, System.EventArgs e) { calDate.Visible = false; txtDate.Visible = true; btnDate.Text = ExpandButtonLabel; txtDate.Enabled = true; txtDate.Text = calDate.SelectedDate.ToShortDateString(); OnSelectionChanged(); } #endregion /// <summary> /// Builds the contents of this control. /// </summary> protected override void CreateChildControls() { btnDate.Text = ExpandButtonLabel; btnDate.CausesValidation = CausesValidation; txtDate.ID = "txtDate"; calDate.Visible = false; if (ApplyDefaultStyle) { calDate.BackColor = System.Drawing.Color.White; calDate.BorderColor = System.Drawing.Color.FromArgb(10066329); calDate.CellPadding = 2; calDate.DayNameFormat = DayNameFormat.Shortest; calDate.Font.Name = "Verdana"; calDate.Font.Size = FontUnit.Parse("8pt"); calDate.ForeColor = System.Drawing.Color.Black; calDate.Height = new Unit(150, UnitType.Pixel); calDate.Width = new Unit(180, UnitType.Pixel); calDate.DayHeaderStyle.BackColor = System.Drawing.Color.FromArgb(228, 228, 228); calDate.DayHeaderStyle.Font.Size = FontUnit.Parse("7pt"); calDate.TitleStyle.Font.Bold = true; calDate.WeekendDayStyle.BackColor = System.Drawing.Color.FromArgb(255, 255, 204); } ConnectEventHandlers(); pnlCalendar.Controls.Add(calDate); pnlCalendar.Style["position"] = "absolute"; pnlCalendar.Style["filter"] = "alpha(opacity=95)"; pnlCalendar.Style["-moz-opacity"] = ".95"; pnlCalendar.Style["opacity"] = ".95"; pnlCalendar.Style["z-index"] = "2"; pnlCalendar.Style["background-color"] = "White"; if (CalendarPosition == CalendarDisplay.DisplayBelow) { pnlCalendar.Style["margin-top"] = "27px"; } else { pnlCalendar.Style["display"] = "inline"; } Controls.Add(txtDate); Controls.Add(pnlCalendar); Controls.Add(btnDate); base.CreateChildControls(); } /// <summary> /// Render the contents of this control. /// </summary> /// <param name="output">The HtmlTextWriter to use.</param> protected override void RenderContents(HtmlTextWriter output) { switch (CalendarPosition) { case CalendarDisplay.DisplayRight: { txtDate.RenderControl(output); btnDate.RenderControl(output); pnlCalendar.RenderControl(output); break; } case CalendarDisplay.DisplayBelow: { pnlCalendar.RenderControl(output); txtDate.RenderControl(output); btnDate.RenderControl(output); break; } } } /// <summary> /// Connect event handlers to events. /// </summary> private void ConnectEventHandlers() { btnDate.Click += new System.EventHandler(btnDate_Click); calDate.SelectionChanged += new System.EventHandler(calDate_SelectionChanged); } } } using System; using System.Collections.Generic; using System.ComponentModel; using System.Text; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; [assembly: TagPrefix("DatePicker", "EWS")] namespace EclipseWebSolutions.DatePicker { [DefaultProperty("Text")] [ToolboxData("<{0}:DatePicker runat=server")] [DefaultEvent("SelectionChanged")] [ValidationProperty("TextValue")] public class DatePicker : WebControl, INamingContainer { #region Properties public TextBox txtDate = new TextBox(); public Calendar calDate = new Calendar(); public Button btnDate = new Button(); public Panel pnlCalendar = new Panel(); private enum ViewStateConstants { ValidationGroup, RegularExpression, ErrorMessage, RegExText, CalendarPosition, FormatString, ExpandLabel, CollapseLabel, ApplyDefaultStyle, CausesValidation, } /// <summary> /// Defines the available display modes of this calendar. /// </summary> public enum CalendarDisplay { DisplayRight, DisplayBelow } /// <summary> /// Where to display the popup calendar. /// </summary> [Category("Behaviour")] [Localizable(true)] public CalendarDisplay CalendarPosition { get { if (ViewState[ViewStateConstants.CalendarPosition.ToString()] == null) { ViewState[ViewStateConstants.CalendarPosition.ToString()] = CalendarDisplay.DisplayRight; } return (CalendarDisplay)ViewState[ViewStateConstants.CalendarPosition.ToString()]; } set { ViewState[ViewStateConstants.CalendarPosition.ToString()] = value; } } /// <summary> /// Text version of the control's value, for use by ASP.NET validators. /// </summary> public string TextValue { get { return txtDate.Text; } } /// <summary> /// Holds the current date value of this control. /// </summary> [Category("Behaviour")] [Localizable(true)] [Bindable(true, BindingDirection.TwoWay)] public DateTime DateValue { get { try { if (txtDate.Text == "") return DateTime.MinValue; DateTime val = DateTime.Parse(txtDate.Text); return val; } catch (ArgumentNullException) { return DateTime.MinValue; } catch (FormatException) { return DateTime.MinValue; } } set { if (value == DateTime.MinValue) { txtDate.Text = ""; } else { txtDate.Text = value.ToShortDateString(); } } } [Category("Behavior"), Themeable(false), DefaultValue("")] public virtual string ValidationGroup { get { if (ViewState[ViewStateConstants.ValidationGroup.ToString()] == null) { return string.Empty; } else { return (string)ViewState[ViewStateConstants.ValidationGroup.ToString()]; } } set { ViewState[ViewStateConstants.ValidationGroup.ToString()] = value; } } /// <summary> /// The label of the exand button. Shown when the calendar is hidden. /// </summary> [Bindable(true)] [Category("Appearance")] [DefaultValue("PickDate")] [Localizable(true)] public string ExpandButtonLabel { get { String s = (String)ViewState[ViewStateConstants.ExpandLabel.ToString()]; return ((s == null) ? "PickDate" : s); } set { ViewState[ViewStateConstants.ExpandLabel.ToString()] = value; } } /// <summary> /// The label of the collapse button. Shown when the calendar is visible. /// </summary> [Bindable(true)] [Category("Appearance")] [DefaultValue("Disabled")] [Localizable(true)] public string CollapseButtonLabel { get { String s = (String)ViewState[ViewStateConstants.CollapseLabel.ToString()]; return ((s == null) ? "Disabled" : s); } set { ViewState[ViewStateConstants.CollapseLabel.ToString()] = value; } } /// <summary> /// Whether to apply the default style. Disable this if you want to apply a custom style, or to use themes and skins /// to style the control. /// </summary> [Category("Appearance")] [DefaultValue(true)] [Localizable(true)] public bool ApplyDefaultStyle { get { if (ViewState[ViewStateConstants.ApplyDefaultStyle.ToString()] == null) { ViewState[ViewStateConstants.ApplyDefaultStyle.ToString()] = true; } return (bool)ViewState[ViewStateConstants.ApplyDefaultStyle.ToString()]; } set { ViewState[ViewStateConstants.ApplyDefaultStyle.ToString()] = value; } } /// <summary> /// Causes Validation /// </summary> [Category("Appearance")] [DefaultValue(false)] [Localizable(false)] public bool CausesValidation { get { if (ViewState[ViewStateConstants.CausesValidation.ToString()] == null) { ViewState[ViewStateConstants.CausesValidation.ToString()] = false; } return (bool)ViewState[ViewStateConstants.CausesValidation.ToString()]; } set { ViewState[ViewStateConstants.CausesValidation.ToString()] = value; btnDate.CausesValidation = value; } } #endregion #region Events /// <summary> /// A day was selected from the calendar control. /// </summary> public event EventHandler SelectionChanged; protected virtual void OnSelectionChanged() { if (SelectionChanged != null) // only raise the event if someone is listening. { SelectionChanged(this, EventArgs.Empty); } } #endregion #region Event Handlers /// <summary> /// The +/- button was clicked. /// </summary> protected void btnDate_Click(object sender, System.EventArgs e) { if (!calDate.Visible) { // expand the calendar calDate.Visible = true; txtDate.Enabled = false; btnDate.Text = CollapseButtonLabel; if (DateValue != DateTime.MinValue) { calDate.SelectedDate = DateValue; calDate.VisibleDate = DateValue; } } else { // collapse the calendar calDate.Visible = false; txtDate.Enabled = true; btnDate.Text = ExpandButtonLabel; } } /// <summary> /// A date was selected from the calendar. /// </summary> protected void calDate_SelectionChanged(object sender, System.EventArgs e) { calDate.Visible = false; txtDate.Visible = true; btnDate.Text = ExpandButtonLabel; txtDate.Enabled = true; txtDate.Text = calDate.SelectedDate.ToShortDateString(); OnSelectionChanged(); } #endregion /// <summary> /// Builds the contents of this control. /// </summary> protected override void CreateChildControls() { btnDate.Text = ExpandButtonLabel; btnDate.CausesValidation = CausesValidation; txtDate.ID = "txtDate"; calDate.Visible = false; if (ApplyDefaultStyle) { calDate.BackColor = System.Drawing.Color.White; calDate.BorderColor = System.Drawing.Color.FromArgb(10066329); calDate.CellPadding = 2; calDate.DayNameFormat = DayNameFormat.Shortest; calDate.Font.Name = "Verdana"; calDate.Font.Size = FontUnit.Parse("8pt"); calDate.ForeColor = System.Drawing.Color.Black; calDate.Height = new Unit(150, UnitType.Pixel); calDate.Width = new Unit(180, UnitType.Pixel); calDate.DayHeaderStyle.BackColor = System.Drawing.Color.FromArgb(228, 228, 228); calDate.DayHeaderStyle.Font.Size = FontUnit.Parse("7pt"); calDate.TitleStyle.Font.Bold = true; calDate.WeekendDayStyle.BackColor = System.Drawing.Color.FromArgb(255, 255, 204); } ConnectEventHandlers(); pnlCalendar.Controls.Add(calDate); pnlCalendar.Style["position"] = "absolute"; pnlCalendar.Style["filter"] = "alpha(opacity=95)"; pnlCalendar.Style["-moz-opacity"] = ".95"; pnlCalendar.Style["opacity"] = ".95"; pnlCalendar.Style["z-index"] = "2"; pnlCalendar.Style["background-color"] = "White"; if (CalendarPosition == CalendarDisplay.DisplayBelow) { pnlCalendar.Style["margin-top"] = "27px"; } else { pnlCalendar.Style["display"] = "inline"; } Controls.Add(txtDate); Controls.Add(pnlCalendar); Controls.Add(btnDate); base.CreateChildControls(); } /// <summary> /// Render the contents of this control. /// </summary> /// <param name="output">The HtmlTextWriter to use.</param> protected override void RenderContents(HtmlTextWriter output) { switch (CalendarPosition) { case CalendarDisplay.DisplayRight: { txtDate.RenderControl(output); btnDate.RenderControl(output); pnlCalendar.RenderControl(output); break; } case CalendarDisplay.DisplayBelow: { pnlCalendar.RenderControl(output); txtDate.RenderControl(output); btnDate.RenderControl(output); break; } } } /// <summary> /// Connect event handlers to events. /// </summary> private void ConnectEventHandlers() { btnDate.Click += new System.EventHandler(btnDate_Click); calDate.SelectionChanged += new System.EventHandler(calDate_SelectionChanged); } } } <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" % <%@ Register Assembly="EclipseWebSolutions.DatePicker" Namespace="EclipseWebSolutions.DatePicker" TagPrefix="ews" % Untitled Page       using System; using System.Data; using System.Configuration; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } protected void DatePicker1_SelectionChanged(object sender, EventArgs e) { Label1.Text = DatePicker1.DateValue.ToShortDateString(); pnlLabel.Update(); } }

    Read the article

  • Cannot change borderColor of TD

    - by Tadeus Prastowo
    Using JS to set the background color of a TD is fine. But, setting the border color is problematic in FF 3.0.18 although IE 6 doesn't experience this. FF is problematic in that it requires the TD element to have an attribute style initialized to border-style: solid. Without that, setting border color of a TD won't work. Is this known bug? How do I set the border color without having to set style attribute as well as the initialization value? I know another trick of setting the class attribute instead of setting the border color directly. Is this an indication that somehow TD hates having its border color set dynamically? Is this known as well? The problematic code is below (the goal is find out why setting the border color of simple truth 1 does not work while simple truth 3 works when I employ the trick described above): <html> <head> <title>Quirks FF 3.0.18</title> <style type="text/css"> table { border-collapse: collapse; } </style> <script type="text/javascript"> function changeBgColor() { document.getElementById('simple').style.backgroundColor='yellow'; document.getElementById('simple2').style.backgroundColor='yellow'; document.getElementById('simple3').style.backgroundColor='yellow'; } function quirk(id) { var x = document.getElementById(id); x.style.border = '2px solid red'; } </script> </head> <body> <input type="button" onclick="changeBgColor()" value="Change background color"/> <input type="button" onclick="quirk('simple')" value="Change border color 1"/> <input type="button" onclick="quirk('simple2')" value="Change border color 2"/> <input type="button" onclick="quirk('simple3')" value="Change border color 3"/> <table> <tr><td id="simple">Simple truth 1</td></tr> </table> <table> <tr><td><span id="simple2">Simple truth 2</span></td></tr> <table> <tr><td id="simple3" style="border-style: solid">Simple truth 3</td></tr> </table> </body> </html>

    Read the article

  • Silverlight 3 Application Background

    - by Rich Blumer
    I am new to Silverlight development. I have created a nice png file in Expression Design. I would like to use this png file as the background for my application. When I set the Stretch property to fill, it does not fill the entire page like I think it should. Here's the xaml: <Grid x:Name="LayoutRoot"> <Grid.Background> <ImageBrush ImageSource="IgniteTechDesign.png"/> </Grid.Background> <Border x:Name="ContentBorder"> <navigation:Frame x:Name="ContentFrame" Style="{StaticResource ContentFrameStyle}" Source="/Home" Navigated="ContentFrame_Navigated" NavigationFailed="ContentFrame_NavigationFailed"> <navigation:Frame.UriMapper> <uriMapper:UriMapper> <uriMapper:UriMapping Uri="" MappedUri="/Views/Home.xaml"/> <uriMapper:UriMapping Uri="/{pageName}" MappedUri="/Views/{pageName}.xaml"/> </uriMapper:UriMapper> </navigation:Frame.UriMapper> </navigation:Frame> </Border> <Grid x:Name="NavigationGrid" Style="{StaticResource NavigationGridStyle}"> <Border x:Name="BrandingBorder" Style="{StaticResource BrandingBorderStyle}"> <StackPanel x:Name="BrandingStackPanel" Style="{StaticResource BrandingStackPanelStyle}"> <ContentControl Style="{StaticResource LogoIcon}"/> <TextBlock x:Name="ApplicationNameTextBlock" Style="{StaticResource ApplicationNameStyle}" Text="Application Name"/> </StackPanel> </Border> <Border x:Name="LinksBorder" Style="{StaticResource LinksBorderStyle}"> <StackPanel x:Name="LinksStackPanel" Style="{StaticResource LinksStackPanelStyle}"> <HyperlinkButton x:Name="Link1" Style="{StaticResource LinkStyle}" NavigateUri="/Home" TargetName="ContentFrame" Content="home"/> <Rectangle x:Name="Divider1" Style="{StaticResource DividerStyle}"/> <HyperlinkButton x:Name="Link2" Style="{StaticResource LinkStyle}" NavigateUri="/About" TargetName="ContentFrame" Content="about"/> </StackPanel> </Border> </Grid> </Grid> Thanks in advance.

    Read the article

  • book style website, how to have different links on each page?

    - by dean nolan
    I am creating a website that is to have a book style layout. So you turn the pages and they fold over. I have this working in JQuery for images. What I am looking to do is have clickable links on the pages so that I can jump to a page further in the "book" or even to another site. Does anyone know the best way to go about this or have any examples to help out? Thanks

    Read the article

  • making the div width stretch to fit its contents

    - by Lina
    Hi, I have the following html code: <table> <tr> <td> <div id="fixmywidth" style="position:relative; height:30px;"> <div style="z-index: 2000; margin-top: 5px; height: inherit; position: absolute;"> <table style="height:inherit"> <tr style="height:inherit"> <td align="center" style="width: 31px; height: inherit;">&nbsp;</td> <td align="center" style="width: 31px; height: inherit;">&nbsp;</td> <td align="center" style="width: 31px; height: inherit;">&nbsp;</td> <td align="center" style="width: 31px; height: inherit;">&nbsp;</td> <td align="center" style="width: 31px; height: inherit;">&nbsp;</td> <td align="center" style="width: 31px; height: inherit;">&nbsp;</td> ........300 tds later <td align="center" style="width: 31px; height: inherit;">&nbsp;</td> </tr> </table> </div> </div> </td> </tr> </table> how do i make the div with the id "fixmywidth" width fit the width of the containing elemets? i tried width=100% and widht = auto but they wouldn't work thanks a trillion in advance, Lina

    Read the article

  • How to style the each cell of Flex DataGrid..

    - by Santosh
    I have a Flex DataGrid, which has some columns, i had put a item renderer, which makes all the elements in that column hyperlinked, i have a requirement, where i need to see the type of user, based on that i have to either enable or disable the hyper link. Is there any good way , where i can get the style properties at the cell level...? Thanks ...in advance..., i searched , but of not much help..!!

    Read the article

  • How can I change the animation style of a modal UIViewController?

    - by MrDatabase
    I'm currently displaying a UIViewController like this: [[self navigationController] presentModalViewController:modalViewController animated:YES]; and hiding it like this: [self.navigationController dismissModalViewControllerAnimated:YES]; The animation is "slide up from the bottom"... then slide back down. How can I change the animation style? Can I made it fade in/out? Cheers!

    Read the article

  • Trying to style the first tbody different than others without introducing another class.

    - by mwiik
    I have a table with multiple tbody's, each of which has a classed row, and I want it so that the classed row in the first tbody has style differences, but am unable to get tbody:first-child to work in any browser. Perhaps I am missing something, or maybe there is a workaround. Ideally, I would like to provide the programmers with a single tbody section they can use as a template, but will otherwise have to add a class to the first tbody, making for an extra test in the programming. The html is straightforward: <tbody class="subGroup"> <tr class="subGroupHeader"> <th colspan="8">All Grades: Special Education</th> <td class="grid" colspan="2"><!-- contains AMO line --></td> <td><!-- right 100 --></td> </tr> <tr>...</tr> <!-- several more rows of data --> </tbody> There are several tbody's per table. I want to style the th and td's within tr.subGroupHeader in the very first tbody differently than the rest. Just to illustrate, I want to add a border-top to the tr.subGroupHeader cells. The tr.subGroupHeader will be styled with a border-top, such as: table.databargraph.continued tr.subGroupHeader th, table.databargraph.continued tr.subGroupHeader td { border-top: 6px solid red; } For the first tbody, I am trying: table.databargraph.continued tbody:first-child tr.subGroupHeader th { border-top: 6px solid blue ; } However, this doesn't seem to work in any browser (I've tested in Safari, Opera, Firefox, and PrinceXML, all on my Mac) Curiously, the usually excellent Xyle Scope tool indicates that the blue border should be taking precedence, though it obviously is not. See the screenshot at http://s3.amazonaws.com/ember/kUD8DHrz06xowTBK3qpB2biPJrLWTZCP_o.png This screenshot shows (top left) the American Indian th is selected, and (bottom right), shows (via black instead of gray text for the css declaration), that, indeed, the blue border should be given precedence. Yet the border is red. I may be missing something fundamental, like pseudo-classes not working for tbodys at all... This really only needs to work in PrinceXML, and maybe Safari so I can see what I'm doing with webkit-based css tools. Note I did try a selector like tr.subGroupHeader:first-child, but such tr's apparently consider the tbody the parent (as I would suspect), thus made every border blue. Thanks...

    Read the article

  • How to set header font style as bold for the header of the table in a pdf file, in jsf

    - by Radhika
    Hi I have used PdfPTable to convert table data into a pdf file using com.itextpdf.text.pdf.PdfPTable. Table is displaying, but table data and the header are in same style. To make difference i have to set the header font style to bold. can anybody help me out in this, I have attached my code here.. Thanks in advance import java.awt.Color; import java.util.ArrayList; import java.util.List; import javax.faces.model.ListDataModel; import com.mypackage.core.filter.domainobject.FilterResultDO; import com.itextpdf.text.Font; import com.itextpdf.text.FontFactory; import com.itextpdf.text.Phrase; import com.itextpdf.text.pdf.PdfPTable; public class PDFGenerator { //This method will generate PDF for Filter Result Screen (only DataTable level) @SuppressWarnings("unchecked") public static PdfPTable generatePDF(PdfPTable table,List filterResultDOList ,List filterResultHeaderList ) { //Initialize the table with number of columns required for the Datatable header int numberOfFilterLabelCols = filterResultHeaderList.size(); //PDF Table Frame table = new PdfPTable(numberOfFilterLabelCols); //Getting Filter Detail Table Heading for(int i = 0 ; i < numberOfFilterLabelCols; i++) { ColumnHeader commandHeaderObj = filterResultHeaderList.get(i); table.addCell(commandHeaderObj.getLabel()); } //Getting Filter Detail Data (Rows X Cols) FilterResultDO filterResultDOObj = filterResultDOList.get(0); List filterResultDataList = filterResultDOObj.getFilterResultLst(); int numberOfFilterDataRows = filterResultDataList.size(); //each row iteration for(int row = 0; row < numberOfFilterDataRows; row++) { List filterResultCols = filterResultDataList.get(row); int numberOfFilterDataCols = filterResultCols.size(); //columns iteration of each row for(int col = 0; col < numberOfFilterDataCols ; col++) { String filterColumnsValues = (String) filterResultCols.get(col); table.addCell(filterColumnsValues); } } return table; }//generatePDF }

    Read the article

< Previous Page | 81 82 83 84 85 86 87 88 89 90 91 92  | Next Page >