Search Results

Search found 11482 results on 460 pages for 'style'.

Page 98/460 | < Previous Page | 94 95 96 97 98 99 100 101 102 103 104 105  | Next Page >

  • 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

  • how to define div or table cell height depending on the height of other divs or cells

    - by John
    I want to have a web page that contains 3 parts: A header at the top of the page , a footer (both of which having specific height in px)and the main part of the page which should be a div or table cell with the appropriate height attribute in order to take all the available space between them. I want the page to take 100% of the browser window height, trying to avoid scrollbars. The problems I have are the following: USING DIVs a) If I set the maindiv height to 100%, the page overflows and I get a vertical scrolbar. (the maindiv's height is set to the 100% of the browser window) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <style type="text/css"> <!-- body, html{ height: 100%; max-height:100%; width: 100%; margin:0; padding:0; } div{padding:0;margin:0;} #containerdiv{height:100%;width:100%;background-color:#FF9;border:0;} #headerdiv{height:150px;width:100%;background-color:#0F0;border:0;} #footerdiv{height:50px;width:100%;background-color:#00F;border:0; } #maindiv{ background-color:#F00; height:100%; } div{border:#000 medium solid;border:0;} </style> <body> <div id="containerdiv"> <div id="headerdiv">headerdiv</div> <div id="maindiv">maindiv</div> <div id="footerdiv">footerdiv</div> </div> </body> </html> b) If I set the maindiv height to auto, the maindiv height is depending on it's content, which is not what I want. USING tables a) If I set the main cell height to 100% it works fine with Firefox but in Internet Explorer 8 I get a vertical scrollbar (you can use the next code block using th style="height:100%" instead of "auto" to see this.) b) If I set the main cell to auto it seems to be working both in IE and FF but then I have the problem that anything I put inside the maincell (table or div) cannot get maincell's full height in IE. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <style type="text/css"> <!-- body, html, table{ height: 100%; width: 100%; margin:0; padding:0; } table{border:#000 0px solid} </style> <body> <table style="background:#063" cellpadding="0" cellspacing="0" border="0"> <tr><th style="height:150px;background-color:#FF0"></th></tr> <tr> <th style="height:auto"><table style="background:#0FF;" cellpadding="0" cellspacing="0" border="0"><tr><th style="height:auto">nested cell</th></tr></table> </th> </tr> <tr><th style="height:50px;background-color:#FF0"></th></tr> </table> </body> </html> </html> Any ideas? Maybe there is an easier way to define the size of the main part of the page in px using javascript? (my javascript skills are pretty poor so any help with this is welcome!)

    Read the article

  • Change font size for "Default Paragraph Font" in Word

    - by Richard Gadsden
    I have a document where the built-in style "Default Paragraph Font" has been set to a particular size. It shouldn't have a size - it should be inheriting from the paragraph style (that's the whole point of the style). If I go through the user interface, I can't modify this style (the modify button / dropdown is greyed out) While I can work around this in most places, it creates problems for the Table of Contents in particular, as that is forced to be in this style and it overrides the font size from the styles like TOC 1 (etc). I can set the font size through VBA - ActiveDocument.Styles("Default Paragraph Font").Font.size = 10 sets it to ten point, but I can't work out how to reset it back to inherit. At the moment, my table of contents is set to be all in the same size, but really TOC 1 should be bigger than TOC 2. Does anyone have any suggestions for how to fix this? One approach is to use the organizer to copy over the style from a working document, but ideally I'd like a way to resolve the problem without doing that - especially as that's not an easy approach to automate.

    Read the article

  • Passing variables to shopping cart with Javascript

    - by albatross
    This question is an extension of this one: http://stackoverflow.com/questions/2359238/calculate-order-price-by-date-selection-value I'm trying to make a conference registration page based off the previous page, which passes the variables(name, email, price) to my organization's outdated shopping cart using javascript. I'm also using Seminar Registration by CSSTricks (http://css-tricks.com/examples/SeminarRegTutorial/) Currently, my proceed to payment button produces an 'element is undefined' error on line 298(same thing on unresolved previous question, linked above^): switch (document.Information.amount.value) { Any help would be greatly appreciated. I'm at my wits end with this. Here is the page: <!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" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Seminar Registration Form with jQuery</title> <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" /> <script src="js/jquery-1.2.6.js" type="text/javascript" charset="utf-8"></script> <script src="js/form-fun.jquery.js" type="text/javascript" charset="utf-8"></script> <!--[if IE]> <style type="text/css"> legend { position: relative; top: -30px; } fieldset { margin: 30px 10px 0 0; } </style> <script type="text/javascript"> $(function(){ $("#step_2 legend").css({ opacity: 0.5 }); $("#step_3 legend").css({ opacity: 0.5 }); }); </script> <![endif]--> </head> <body> <div id="page-wrap"> <h1>Conference <span>Registration</span></h1> <form action="#" method="post"> <fieldset id="step_1"> <legend>Step 1</legend> <label for="num_attendees"> How cool are you? </label> <select id="amount"> <option id="0" value="0">Please Choose</option> <option id="prof" value="90.00">Professional</option> <option id="grad" value="55.00">Graduate Student</option> </select> <br /> <div id="attendee_1_wrap" class="name_wrap push"> <h3>Who are you?</h3> <p> <label for="FirstName"> First Name: </label> <input type="text" id="FirstName" class="name_input"></input> </p> <p> <label for="LastName"> Last Name: </label> <input type="text" id="LastName" class="name_input"></input> </p> <p> <label for="OfficialTitle"> Official Title: </label> <input type="text" id="OfficialTitle" class="name_input"></input> </p> <h3>How do we find you?</h3> <label for="email">Email: </label> <input id="email" name="email" class="required email" /> </p> <p> <label for="Address">Street Address: </label><input name="Address" id="Address" type="text" size="20" maxlength="75" /> </p> <p> <label for="City">City: </label><input name="City" id="City" /> </p> <p> <label for="State">State: </label><select name="State" id="State"> <option selected value="IL">IL</option> <option value="AL">AL</option> <option value="AK">AK</option> <option value="AZ">AZ</option> <option value="AR">AR</option> <option value="CA">CA</option> <option value="CO">CO</option> <option value="CT">CT</option> <option value="DE">DE</option> <option value="DC">DC</option> <option value="FL">FL</option> <option value="GA">GA</option> <option value="HI">HI</option> <option value="ID">ID</option> <option value="IN">IN</option> <option value="IA">IA</option> <option value="KS">KS</option> <option value="KY">KY</option> <option value="LA">LA</option> <option value="ME">ME</option> <option value="MD">MD</option> <option value="MA">MA</option> <option value="MI">MI</option> <option value="MN">MN</option> <option value="MS">MS</option> <option value="MO">MO</option> <option value="MT">MT</option> <option value="NE">NE</option> <option value="NV">NV</option> <option value="NH">NH</option> <option value="NJ">NJ</option> <option value="NM">NM</option> <option value="NY">NY</option> <option value="NC">NC</option> <option value="ND">ND</option> <option value="OH">OH</option> <option value="OK">OK</option> <option value="OR">OR</option> <option value="PA">PA</option> <option value="RI">RI</option> <option value="SC">SC</option> <option value="SD">SD</option> <option value="TN">TN</option> <option value="TX">TX</option> <option value="UT">UT</option> <option value="VT">VT</option> <option value="VA">VA</option> <option value="WA">WA</option> <option value="WV">WV</option> <option value="WI">WI</option> <option value="WY">WY</option> </select> </p> <p> <label for="Zip">Zip Code: </label><input name="Zip" id="Zip" type="text" value="" size="5" maxlength="10" /> </p> <p> <label for="Phone">Telephone: </label><input name="Phone" id="Phone" type="text" value="" size="10" maxlength="13" /> </p> </div> </fieldset> <fieldset id="step_2"> <legend>Step 2</legend> <p> Do you work in Higher Education? </p> <input type="radio" id="company_name_toggle_on" name="company_name_toggle_group"></input> <label for="company_name_toggle_on">Yes</label> &emsp; <input type="radio" id="company_name_toggle_off" name="company_name_toggle_group"></input> <label for="company_name_toggle_off">No</label> <div id="company_name_wrap"> <label for="company_name"> Which School? </label> <input type="text" id="company_name"></input> </div> <div class="push"> <p> Will anyone in your group require special accommodations? </p> <input type="radio" id="special_accommodations_toggle_on" name="special_accommodations_toggle"></input> <label for="special_accommodations_toggle_on">Yes</label> &emsp; <input type="radio" id="special_accommodations_toggle_off" name="special_accommodations_toggle"></input> <label for="special_accommodations_toggle_off">No</label> </div> <div id="special_accommodations_wrap"> <label for="special_accomodations_text"> Please explain below: </label> <textarea rows="10" cols="10" id="special_accomodations_text"></textarea> </div> </fieldset> <fieldset id="step_3"> <legend>Step 3</legend> <label for="rock"> Are you ready to rock? </label> <input type="checkbox" id="rock"></input> <p> <INPUT onclick="javascript:PaymentButtonClick()" type=button value="Proceed to payment" name=PaymentButton> <img src="images/visa1.gif" /> <img src="images/mastercard1.gif" /> </p> </fieldset> </form> </div> <FORM name="emailForm" action="mailform.asp" method=post"> <INPUT type="hidden" value="Conference Registration" name="mf_subject"> <INPUT type="hidden" value="Yes" name="mf_email_results"> <INPUT type="hidden" title="" style="BACKGROUND-COLOR: #ffffa0" size="20" name="num_attendees"> <INPUT type="hidden" title="" style="BACKGROUND-COLOR: #ffffa0" size="17" name="FirstName"> <INPUT type="hidden" title="" style="BACKGROUND-COLOR: #ffffa0" size="22" name="LastName"> <INPUT type="hidden" title="" style="BACKGROUND-COLOR: #ffffff" size="64" name="OfficialTitle"> <INPUT type="hidden" title="" style="BACKGROUND-COLOR: #ffffff" size="40" name="email"> <INPUT type="hidden" title="" style="BACKGROUND-COLOR: #ffffff" size="48" name="Address"> <INPUT type="hidden" title="" style="BACKGROUND-COLOR: #ffffa0" size="17" name="City"> <INPUT type="hidden" title="" style="BACKGROUND-COLOR: #ffffa0" size="17" name="State"> <INPUT type="hidden" title="" style="BACKGROUND-COLOR: #ffffa0" size="17" name="Zip"> <INPUT type="hidden" title="" style="BACKGROUND-COLOR: #ffffa0" size="17" name="Phone"> <INPUT type="hidden" title="" style="BACKGROUND-COLOR: #ffffa0" size="17" name="company_name"> <INPUT type="hidden" title="" style="BACKGROUND-COLOR: #ffffff" size="20" name="special_accomodations_text"> <INPUT type="hidden" value="[email protected]" name="mf_from"> <INPUT type="hidden" value="[email protected]" name="mf_to"> </FORM> <FORM name="addform" action="https://webcluster.niu.edu/CreditCard/servlet/Shopping_Cart_Add_Item_Servlet" method="post"> <INPUT type="hidden" value="orient" name="Dept_ID"> <INPUT type="hidden" value="Orientation" name="Product_Name"> <INPUT type="hidden" value="z000000" name="Product_Code"> <INPUT type="hidden" value="" name="amount"> <INPUT type="hidden" value="/orientation/index.shtml" name="return_link"> <INPUT type="hidden" value="http://www.niu.edu" name="return_server"> <INPUT type="hidden" value="1" name="quantity"> <INPUT type="hidden" value="0" name="tax"> <INPUT type="hidden" value="0" name="ship"> <INPUT type="hidden" value="DQ83225" name="sale_id"> <INPUT type="hidden" value="XXXXXX" name="sale_acct"> </FORM> <SCRIPT language="Javascript"> function PaymentButtonClick() { switch (document.Information.amount.value) { case 'prof': document.Information.amount.value = 90.00; break; case 'grad': document.Information.amount.value = 55.00; break; } document.addform.Product_Name.value = document.Information.FirstName.value + ","+ document.Information.LastName.value+","+ document.Information.OfficialTitle.value+","+ document.Information.email.name+","+","+ document.Information.Address.value+ "," + document.Information.City.value+ "," + document.Information.State.value+ "," + document.Information.Zip.value+ "," + document.Information.Phone.value+ "," + document.Information.company_name.value+ "," + document.Information.special_accomodations_text.value; document.addform.Product_Code.value = document.Information.LastName.value; if ((document.Information.UCheck.checked==true) && (document.Information.altDate1.value != "") && (document.Information.altDate1.value != "x")) { if (document.Information.StudentLastName.value != "" || document.Information.StudentFirstName.value != "" || document.Information.StudentID.value != "" ) { document.addform.submit(); } else { alert("Please enter missing information"); } } } </SCRIPT> </body> </html>

    Read the article

  • IE7 relative/absolute positioning bug with dynamically modified page content

    - by Matthias Hryniszak
    Hi, I was wondering if there's anyone having an idea how to tackle with the following problem in IE7: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>IE7 absolute positioning bug</title> <style type="text/css"> #panel { position: relative; border: solid 1px black; } #spacer { height: 100px; } #footer { position: absolute; bottom: 0px; } </style> <script type="text/javascript"> function toggle() { var spacer = document.getElementById("spacer"); var style = "block"; if (spacer.style.display == "block" || spacer.style.display == "") { style = "none"; } spacer.style.display = style; } </script> </head> <body> <div id="panel"> <button onclick="toggle();">Click me</button> <br /><br /><br /> <div id="spacer"></div> <div id="footer">This is some footer</div> </div> </body> </html> When you run this in IE7 you'll see that the "footer" element stays after modifying the CSS for "panel". The same example tested in IE8, FF and Chrome behaves exactly as expected. I've already tried updating the element's class but this does not work if the browser's window has been opened maximized and no further size changes were made to the window (which is about 90% of the use cases we have for our product.... :( ) I'm stuck with a CSS-based solution however I think that I can make an exception in this case if it can easily be made IE7-specific (which means that other browsers will behave in a standard way with this). Please help!

    Read the article

  • Cannot use standard android color attribute in custom color selector

    - by Manish Gupta
    So, android defines the following in themes.xml: <style name="Theme"> ... <item name="colorPressedHighlight">@color/legacy_pressed_highlight</item> </style> and: <style name="Theme.Holo"> ... <item name="colorPressedHighlight">@color/holo_blue_light</item> </style> I want to use this colorPressedHighlight as the background color for my custom Button when it is pressed. So I defined the following in res/color/app_button_background.xml: <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android" > <item android:state_pressed="true" android:drawable="?android:colorPressedHighlight"/> <item android:drawable="@android:color/transparent" /> </selector> Finally, I define my custom ImageButton style: <style name="App_ImageButtonStyle" parent="@android:style/Widget.ImageButton"> <item name="android:gravity">center</item> <item name="android:background">@color/app_button_background</item> </style> I crash on app launch with the following call stack: 06-27 20:24:41.954: E/AndroidRuntime(532): Caused by: org.xmlpull.v1.XmlPullParserException: Binary XML file line #6: <item> tag requires a 'drawable' attribute or child tag defining a drawable 06-27 20:24:41.954: E/AndroidRuntime(532): at android.graphics.drawable.StateListDrawable.inflate(StateListDrawable.java:178) 06-27 20:24:41.954: E/AndroidRuntime(532): at android.graphics.drawable.Drawable.createFromXmlInner(Drawable.java:867) 06-27 20:24:41.954: E/AndroidRuntime(532): at android.graphics.drawable.Drawable.createFromXml(Drawable.java:804) 06-27 20:24:41.954: E/AndroidRuntime(532): at android.content.res.Resources.loadDrawable(Resources.java:1920) I know that directly accessing @color/legacy_pressed_highlight or @color/holo_blue_light instead of accessing them through the colorPressedHighlight fixes the crash but it does not solve the problem. Themes can vary, hence I need to access it through the colorPressedHighlight attribute. PS: I had a similar problem to which I haven't found an answer yet. Can someone please help!

    Read the article

  • How to handle relative paths in ASP.NET MVC?

    - by AngryHacker
    I have a master page which references a style in the following manner: <link rel="stylesheet" type="text/css" href="../../Content/Style.css" /> All my pages inherit from this master page. And this works well when the URL is http://www.domain.com/home/details/5, however the URL is http://www.domain.com/home/create, then, of course, Style.css cannot be found because `../../Content/Style.css' resolves to a directory one higher where there is nothing there. How is this typically handled?

    Read the article

  • How to use imported css styles in GWT correctly

    - by Eduard Wirch
    Imagine you created the following simple widget with UiBinder: <!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent"> <ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui"> <ui:style type="my.package.Widget1.Widget1Style"> .childWidgetStyle { border-width: 1px; border-style: dotted; } </ui:style> <g:TextArea styleName="{style.childWidgetStyle}"/> </ui:UiBinder> package my.package; // some imports here public class Widget1 extends Composite { private static Widget1UiBinder uiBinder = GWT.create(Widget1UiBinder.class); interface Widget1UiBinder extends UiBinder<Widget, Widget1> { } public interface Widget1Style extends CssResource { String childWidgetStyle(); } @UiField TextArea textArea; public Widget1(String text) { initWidget(uiBinder.createAndBindUi(this)); textArea.setText(text); } } Than you use this simple widget in another (parent) widget you created: <!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent"> <ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui"> <ui:style> .parentWidgetStyle .childWidgetStyle { margin-bottom: 10px; } </ui:style> <g:VerticalPanel ui:field="listPanel" addStyleNames="{style.parentWidgetStyle}" /> </ui:UiBinder> package my.package; // imports go here public class ParentWidget extends Composite { private static ParentWidgetUiBinder uiBinder = GWT.create(ParentWidgetUiBinder.class); interface ParentWidgetUiBinder extends UiBinder<Widget, ParentWidget> { } @UiField VerticalPanel listPanel; public ParentWidget(final String... texts) { initWidget(uiBinder.createAndBindUi(this)); for (final String text : texts) { final Widget1 entry = new Widget1(text); listPanel.add(entry); } } } What you want to achieve is to get some margin between the Widget1 entries in the list using css. But this won't work. Because GWT will obfuscate the css names. And the obfuscated name for .childWidgetStyle in ParentWidget will be different from the .childWidgetStyle in Widget1. The resulting css will look similar to this: .G1unc9fbE { border-style:dotted; border-width:1px; } .G1unc9fbBB .G1unc9fDa { margin-bottom:10px; } So the margin setting wont apply. How do I do this correctly?

    Read the article

  • Fragment not showing up and breaks other buttons on Layout

    - by Devin Crane
    I'm learning how to use Fragments, and trying to add a fragment tag_button.xml at runtime to a FrameLayout tagFragmentContainer deep within another layout, deepLayout.xml. I get no errors, but the fragment doesn't show up. When I make its container visible, I can see a small sliver of layout between the other elements already existing, but then it disappears after onCreateView(), and all the remaining buttons are broken, which is even more confusing to me. tag_button.xml is just a regular layout file with some text and a button. tagFragmentContainer, within a LinearLayout in the middle of a large layout file, deepLayout.xml: <LinearLayout android:id="@+id/tagButtonsLayout" android:layout_marginBottom="10dip" android:visibility="gone" style="@style/Form"> <FrameLayout android:id="@+id/tagFragmentContainer" android:layout_marginBottom="10dip" style="@style/Form"> </FrameLayout> </LinearLayout> In deepLayoutActivity, I make visible tagButtonsLayout and start TagButtonActivity: final LinearLayout anotherlm = (LinearLayout) findViewById(R.id.tagButtonsLayout); anotherlm.setVisibility(View.VISIBLE); Intent i = new Intent (this, TagButtonActivity.class); startActivity(i); TagButtonActivity is as follows: public class TagButtonActivity extends FragmentActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.action_expense); if (savedInstanceState != null) return; TagButtonFragment firstFragment = new TagButtonFragment(); getSupportFragmentManager().beginTransaction().add(R.id.tagFragmentContainer, firstFragment, "tagOne").commit(); } } TagButtonFragment: public class TagButtonFragment extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { // Inflate the layout for this fragment return inflater.inflate(R.layout.tag_button, container, false); } } tag_button.xml: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" style="@style/Form"> <TextView android:id="@+id/tag_button_header" style="@style/FieldHeader" android:text="example text"/> <RelativeLayout android:id="@+id/tag_button_block" android:layout_width="match_parent" android:layout_marginLeft="2dip" android:layout_marginTop="3dip" android:layout_marginBottom="3dip" android:layout_marginRight="2dip" android:layout_height="43dip" android:clickable="true" android:background="@drawable/row_spinner_selector"> <ImageView android:id="@+id/question_arrow" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="10dip" android:layout_marginRight="10dip" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:src="@drawable/arrow_right"/> <TextView android:id="@+id/tag_question_text" android:layout_toLeftOf="@id/question_arrow" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginLeft="10dip" android:layout_centerVertical="true" android:textColor="@android:color/black" android:singleLine="true" android:ellipsize="end" android:textSize="15sp" android:text="@string/not_selected"/> </RelativeLayout> </LinearLayout> I would certainly appreciate any help in figuring this out from someone who knows fragments better than me! Thanks!

    Read the article

  • understanding logic of dijit css and styles

    - by Tom
    Hi, I am trying to use dijit.InlineEditBox. I have put the following code in my HTML, using the example in the dojo docs: <script type="text/javascript"> dojo.require("dijit.InlineEditBox"); dojo.require("dojo.parser"); dojo.require("dijit.form.TextBox"); function editableHeaderOnChange(id, arg){ alert("details changed with id " + id + " and arguments "+arg); } </script> ... <span id="myText" dojoType="dijit.InlineEditBox" onChange="editableHeaderOnChange(this.id,arguments[0])" autoSave="true" title="My Text">click to edit me</span> I am using tundra theme. It works, however it doesn't look so good. The widget has its own style, which doesn't fit my CSS. I used firebug to locate the source of the problem. The widget creates many nested div/span elements, each has it's own style (element style in firebug): <span id="dijit__InlineEditor_0" class="dijitReset dijitInline" style="margin: 0px; position: absolute; visibility: hidden; display: block; opacity: 0;" ...> <input type="text" autocomplete="off" class="dijit dijitReset dijitLeft dijitTextBox" id="dijit_form_TextBox_0" style="line-height: 20px; font-weight: 400; font-family: Trebuchet MS,Helvetica,Arial,Verdana; font-size: 14.5167px; font-style: normal; width: 100%;"> ...> </span></span> (showing only the relevant parts...) to get the visual that I want, which will not break to a newline, I need to change the width of dijit_form_TextBox_0** to 50%, and the positioning of dijit__InlineEditor_0 to display: inline**; or to change the positioning of everything (most of my layout is floated, so position: absolute doesn't fit) I cannot address those span elements in my css to change the properties, because the element.style has priority, of course. I don't understand the logic in this system... why is dijit generating the style directly inside the element? how can I change these properties? Thanks Tom

    Read the article

  • GWT styles not applying

    - by sernaferna
    I'm creating a GWT application that uses UiBinder, and I've come across a bizarre problem where styles aren't applying to my elements--until I refresh the browser, and then the styles briefly get applied, in that fraction of a second before the page refreshes. In other words: Open page; none of my defined styles are used. Hit Refresh For a fraction of a second the styles are used, before the page goes blank The page reloads, without the styles again I'm going to include my entire *ui.xml file, because it's not too big. <!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent"> <ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui"> <ui:style> .idLabelStyle { font-weight: bold; text-align: center; width: 100px; border-style: solid; border-width: 1px; margin-right: 5px; } .nameLabelStyle { font-weight: bold; text-align: center; width: 500px; border-style: solid; border-width: 1px; margin-right: 5px; } .addressLabelStyle { font-weight: bold; text-align: center; width: 500px; border-style: solid; border-width: 1px; } </ui:style> <g:HTMLPanel> <g:HorizontalPanel> <g:Label addStyleNames="{style.idLabelStyle}">ID</g:Label> <g:Label addStyleNames="{style.nameLabelStyle}">Name</g:Label> <g:Label addStyleNames="{style.addressLabelStyle}">Address</g:Label> </g:HorizontalPanel> </g:HTMLPanel> </ui:UiBinder> I really hope I'm missing something simple.

    Read the article

  • input type="text" not clickable in a jcarousel (jQuery based carousel) element

    - by AkaiKen
    Hello ! I work on a website where almost all objects are in a jCarousel element : <div> <ul id="mycarousel"> <li>object 1</li> <li>object 2</li> </ul> </div> is the "written" code, and : <div class=" jcarousel-skin-tango"> <div class="jcarousel-container jcarousel-container-horizontal" style="display: block;"> <div class="jcarousel-prev jcarousel-prev-horizontal jcarousel-prev-disabled jcarousel-prev-disabled-horizontal" style="display: block;" disabled="true"></div> <div class="jcarousel-next jcarousel-next-horizontal" style="display: block;" disabled="false"></div> <div class="jcarousel-clip jcarousel-clip-horizontal"> <ul class=" jcarousel-list jcarousel-list-horizontal" id="mycarousel" style="width: 2853px; left: 0px;"> <li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-1-horizontal" jcarouselindex="1" style="width: 307px;"> object 1 </li> <li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-1-horizontal" jcarouselindex="1" style="width: 307px;"> object 2 </li> </ul> </div> </div> is the generated code (here it lacks the ultimate </div>, maybe a number of rows limitation ?). I'm sorry I can't provide a link, I work on a local server currently. It works perfectly =) but... my problem is : an <input type="text" /> won't be clickable in this environment. I tried the others type of input, radio, checkbox, file : works. But text does not. I can specify a value on my input (it's its purpose on my work : a search in a database for datas to be modified and reinjected in database). In fact, I can access to the text input by clicking-right in then left. But it's pretty 'unergonomic', and in my project it's unthinkable. Ah, and I tried to style this input with a style="z-index:1000;", no changes, I think it's not a CSS problem. Does anybody have an idea ? Thank you very much in advance.

    Read the article

  • css name should be?

    - by kc rajput
    i am making style sheet for a website. css style name should be related to website or content? my website is about web development.is that right to use style name- #web-development-header .web-development-company-london-content or should use #header .content is css style name can help for seo?

    Read the article

  • How to get the default syle of my Button in WPF?

    - by Ashish Ashu
    I have create a Button style under Resource folder of the main application. I have added the reference of this button syle in the App.xml of the main application. Now this style is applicable to all the buttons in the main application or any other assembly. I want if I want to override my custom style of button to the normal button style , what should I do ?? Please help !!

    Read the article

  • Internet Explorer and onMouseOver/onMouseOut

    - by Thorbjørn Reimann-Andersen
    Hi all, I have tried looking a similar question on here but couldnt find one so here it comes: I have this html (ignore the "+whatever+@", its in a codebehind file so im putting some variables that im getting from there): <div id='ReferenceContainer"+UniqueID+@"' style='background-color:"+BackcolourOFF+@"; width:"+CompWidth+@"; height:"+CompHeight+@";'> <div id='Reference"+UniqueID+@"' style='width:"+CompWidth+@"; height:"+CompHeight+@"; '> <div id='RefTextContainer"+UniqueID+@"' style='float:left; width:"+CompWidth+@"; height:"+CompHeight+@"; ' > <div id='RefTitleCon' style='margin-top:"+RefTitleMargin+@"px; color:"+RefTitleColor+@"; z-index:-1;' ><p><b>"+RefTitle+@"</b></p> </div> <div id='RefTextCon'><p>"+RefText+@"</p></div> </div> <div id='RefPicContainer"+UniqueID+@"' style='float:right;'> <img id='RefImg"+UniqueID+@"first' class='first' name='RefImg"+UniqueID+@"' src=" + StartImg + @" style='position:absolute;' ></img> <img id='RefImg"+UniqueID+@"second' class='second' name='RefImg"+UniqueID+@"' src=" + AltImg + @" style='display:none;' ></img> </div> </div> <div id='ScriptContainer"+UniqueID+@"' style='width:"+CompWidth+@"; height:"+CompHeight+@"; position:relative; top:-"+CompHeight+@"px; left:0px;' onMouseOver='ChangeBackcolourON"+UniqueID+@"()' onMouseOut='ChangeBackcolourOFF"+UniqueID+@"()'></div> </div> Now in firefox, everything works just perfect. The div "ScriptContainer" sits in front of the whole thing and when the mouse enters or leaves the functions work exactly as they should. But IE8 places the text in front of everything and then the functions do not work as i would like them to. "ChangeBackcolourOFF" gets called every time the mouse enters the text, which sits in front of everything and "ChangeBackcolourON" gets called every time the mouse enters the "Scriptcontainer" from the text. So i either need to figure out how to force the text to be placed behind the "Scriptcontainer" or some other solutions. I appreciate you answers

    Read the article

  • Howcome I cannot make my javascript 'executable' in an address bar

    - by imHavoc
    The second link does not work like the first one. How come? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Dynamic CSS Properties</title> <script language="JavaScript"> function change(){ //document.getElementById("box1").style.visibility = "visible"; var spanArray = document.getElementsByTagName('span'); var number_spans = spanArray.length ; for( var i = 0; i < number_spans ; i++ ){ var target = spanArray[ i ] ; // do something with target like set visibility target.style.visibility = "visible"; } } function change2(){ var spanArray=document.getElementsByTagName('span');var number_spans=spanArray.length;for(var i=0;i<number_spans;i++){var target=spanArray[i];target.style.visibility="visible";} } </script> </head> <body> <a href="javascript:change2();">Change</a> <br /> <a href="javascript:var spanArray=document.getElementsByTagName('span');va r number_spans=spanArray.length;for(var i=0;i<number_spans;i++){var target=spanArray[i];target.style.visibility='visible';}; ">Show Spans</a> <br /> <div style="position: relative; overflow: hidden;"><center> <br><br> <font size="5" color="blue"> 1. just press the <img src="http://up203.siz.co.il/up1/jw2k4az1imny.jpg"> button on the top to see the picture i promise you its so funny!!!!: <br><br><br> <span style="background: none repeat scroll 0% 0% white;"><span style="visibility: hidden;"> <a onmousedown="UntrustedLink.bootstrap($(this), &quot;77a0d&quot;, event)" rel="nofollow" target="_blank" onclick="(new Image()).src = '/ajax/ct.php?app_id=4949752878&amp;action_type=3&amp;post_form_id=3917211492ade40ee468fbe283b54b3b&amp;position=16&amp;' + Math.random();return true;" href="http://thebigbrotherisrael.blogspot.com/2010/04/all-family-guy-characters-in-real-life.html">Press here to see the picture!!!</a> </span><span style="visibility: visible;"></span></span></font></center></div> </body> </html>

    Read the article

  • Silverlight Player Blank When Changing ism file

    - by Al Katawazi
    I am trying to get silverlight smooth streaming going on a site I am bilding and it works fine with the big buck bunny sample code which looks like this: <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%" id="Object2"> <param name="source" value="SmoothStreamingBlackGlass.xap"/> <param name="onerror" value="onSilverlightError" /> <param name="initparams"value='autoplay=False,muted=False,stretchmode=0,displaytimecode=False, playlist=<playList><playListItems><playListItem title="Big%20Buck%20Bunny" description="" mediaSource="Big%20Buck%20Bunny.ism/Manifest" adaptiveStreaming="True" thumbSource="Big%20Buck%20Bunny_Thumb.jpg" frameRate="24.0000384000614" ></playListItem></playListItems></playList>' /> <a href="http://go2.microsoft.com/fwlink/?LinkID=124807" style="text-decoration: none;"><img src="http://go2.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none" /></a> </object> <iframe style="visibility:hidden;height:0;width:0;border:0px"></iframe> but if i change the code like this i only get a blank area when the page is rendered instead of the movie clip. <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%" id="Object2"> <param name="source" value="SmoothStreamingBlackGlass.xap"/> <param name="onerror" value="onSilverlightError" /> <param name="initparams"value='autoplay=False,muted=False,stretchmode=0,displaytimecode=False, playlist=<playList><playListItems><playListItem title="Robotica_1080" description="" mediaSource="Robotica_1080.ism/Manifest" adaptiveStreaming="True" thumbSource="Robotica_1080_Thumb.jpg" frameRate="24.0000384000614" ></playListItem></playListItems></playList>' /> <a href="http://go2.microsoft.com/fwlink/?LinkID=124807" style="text-decoration: none;"><img src="http://go2.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none" /></a> </object> <iframe style="visibility:hidden;height:0;width:0;border:0px"></iframe> Any ideas? I am using Encoder 3 to do the encoding set on microsoft smooth streaming for 720p with all the default settings.

    Read the article

  • IE8 isn't resizing tbody or thead when a column is hidden in a table with table-layout:fixed

    - by tom
    IE 8 is doing something very strange when I hide a column in a table with table-layout:fixed. The column is hidden, the table element stays the same width, but the tbody and thead elements are not resized to fill the remaining width. It works in IE7 mode (and FF, Chrome, etc. of course). Has anyone seen this before or know of a workaround? Here is my test page - toggle the first column and use the dev console to check out the table, tbody and thead width: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>bug</title> <style type="text/css"> table { table-layout:fixed; width:100%; border-collapse:collapse; } td, th { border:1px solid #000; } </style> </head> <body> <table> <thead> <tr> <th id="target1">1</th> <th>2</th> <th>3</th> <th>4</th> </tr> </thead> <tbody> <tr> <td id="target2">1</td> <td>2</td> <td>3</td> <td>4</td> </tr> </tbody> </table> <a href="#" id="toggle">toggle first column</a> <script type="text/javascript"> function toggleFirstColumn() { if (document.getElementById('target1').style.display=='' || document.getElementById('target1').style.display=='table-cell') { document.getElementById('target1').style.display='none'; document.getElementById('target2').style.display='none'; } else { document.getElementById('target1').style.display='table-cell'; document.getElementById('target2').style.display='table-cell'; } } document.getElementById('toggle').onclick = function(){ toggleFirstColumn(); return false; }; </script> </body> </html>

    Read the article

  • How do you clear RootLayoutPanel in GWT?

    - by kerrr
    I have Buttons attached to elements on the modules entrypoint html page using RootPanel.get("foo").add(button). If I subsequently create a LayoutPanel and attach it using RootLayoutPanel.get.add(layoutpanal) then the buttons cannot be clicked. This is all fine. If I then try and remove the layoutpanel or clear the RootLayoutPanel the buttons still cannot be clicked. Any ideas how to clear this? Have I missed a step or should you simply never try and get back to using a page's RootPanel if you have used a RootLayoutPanel? Sample code: public void onModuleLoad(){ final LayoutPanel lp1=new LayoutPanel(); ClickPanel ping=new ClickPanel("Ping"); ping.getElement().getStyle().setBackgroundColor( "#fdd" ); ping.addClickHandler( new ClickHandler(){ @Override public void onClick( ClickEvent event ){ Window.alert( "Ping!!!" ); //lp1.removeFromParent(); //RootLayoutPanel.get().remove(lp1); //RootLayoutPanel.get().removeFromParent(); RootLayoutPanel.get().clear(); } } ); ClickPanel bong=new ClickPanel("Bong"); bong.getElement().getStyle().setBackgroundColor( "#ddf" ); bong.addClickHandler( new ClickHandler(){ @Override public void onClick( ClickEvent event ){ Window.alert( "Bong!!!" ); } } ); lp1.add( ping ); lp1.setWidgetLeftWidth( ping, 100, Style.Unit.PX, 500, Style.Unit.PX ); lp1.setWidgetTopHeight( ping, 100, Style.Unit.PX, 500, Style.Unit.PX ); lp1.add( bong ); lp1.setWidgetLeftWidth( bong, 50, Style.Unit.PCT, 600, Style.Unit.PX ); lp1.setWidgetTopHeight( bong, 50, Style.Unit.PCT, 200, Style.Unit.PX ); Button b=new Button("Click Me"); b.addClickHandler( new ClickHandler(){ @Override public void onClick( ClickEvent event ){ RootLayoutPanel.get().add( lp1 ); } } ); RootPanel.get("button1").add( b ); } ClickPanel is simply overrides HTMLPanel implementing HasClickHandelers. Clicking "Click Me" opens the layout panel. Clicking the panel ping gets rid of the layout panel, but the button "Click Me" cannot be clicked. I've tried various options.

    Read the article

  • accepting click events in RelativeLayout

    - by skooter
    Ok, I have a RelativeLayout with a few TextViews as children <RelativeLayout android:id="@+id/shift_parent_name" android:layout_width="fill_parent" android:layout_weight="0.25" > <TextView android:id="@+id/shift_parent_nametitle" android:text="@string/shift_parent_nametitle" style="@style/header_text" /> <TextView android:id="@+id/shift_parent_namefield" android:layout_alignParentRight="true" android:layout_below="@id/shift_parent_nametitle" style="@style/wrap" /> How do I go about using the RelativeLayout as the button to react to a click event if any part of the area is pressed?

    Read the article

  • Temporary Onmouseover

    - by 2x2p1p
    Hi guys :) Css "over" selector applys a temporary style to an element, it isn't definitive: div:hover { background-color: red; } I can use the same thing with javascript but it is a bit complicate and impossible for several elements: var elem = document.getElementByTagName ("div")[0]; elem.onmouseover = function () { this.style.backgroundColor = "red"; } elem.onmouseout = function () { this.style.backgroundColor = "transparent"; } There is a better way ? Something like this: document.getElementByTagName ("div")[0].ontemporarymouseover = function () { // LoL this.style.backgroundColor = "red"; } Thanks

    Read the article

  • Jquery problem with errorPlacement.

    - by Eyla
    Greetings, I have problem with errorPlacement, I'm trying to place the error message next to the field but it appearing on the top of the page. any advice how to fix this problem?? here is my code: <%@ Page Title="" Language="C#" MasterPageFile="~/Master.Master" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="IMAM_APPLICATION.WebForm1" %> <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %> <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"> <script src="js/jquery-1.4.1.js" type="text/javascript"></script> <script src="js/jquery.validate.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $("#aspnetForm").validate({ groups: { username: "fname lname", address: "address1 phone" }, errorPlacement: function(error, element) { if (element.attr("name") == "fname" || element.attr("name") == "lname") error.insertAfter("#lastname"); else error.insertAfter(element); }, debug: true }) }); </script> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"> </asp:Content> <asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder2" runat="server"> <p style="height: 313px"> <label style="position:absolute; top: 227px; left: 22px;">Your Name</label> &nbsp;<input name="fname" value="Pete" style="position:absolute; top: 226px; left: 102px;"/> <input name="lname" id="lastname" style="position:absolute; top: 264px; left: 95px;"/> <input name="address1" style="position:absolute; top: 347px; left: 102px;"/> <input name="phone" id="lastname" style="position:absolute; top: 315px; left: 102px;"/> <br/> <input type="submit" value="Submit Name" style="position:absolute; top: 407px; left: 73px;"/> <input type="submit" value="Submit Address" style="position:absolute; top: 370px; left: 437px;"/> </p> </asp:Content>

    Read the article

  • How to hide the title bar for an Activity in XML

    - by Janusz
    I want to hide the title bar for some of my activities. The problem is that I applied a style to all my activities, therefore I can't simply set the theme to @android:style/Theme.NoTitleBar. Using the NoTitleBar theme as a parent for my style would remove the title bar for to much activities. Can I set a no title style item somewhere?

    Read the article

  • get element position

    - by hopes
    how can i know that a specific is on another specific after dragging the first and drop it I am using this code in the head of my document to enable drag and drop of my divs var dragapproved=false var z,x,y function move(){ if (event.button==1&&dragapproved){ z.style.pixelLeft=temp1+event.clientX-x z.style.pixelTop=temp2+event.clientY-y return false } } function drags() { if (!document.all) return if (event.srcElement.className=="drag") { dragapproved=true z=event.srcElement temp1=z.style.pixelLeft temp2=z.style.pixelTop x=event.clientX y=event.clientY document.onmousemove=move } } document.onmousedown=drags document.onmouseup=new Function('dragapproved=false')

    Read the article

  • Unable to get index from jQuery UI slider range

    - by Phil.Wheeler
    I'm having a hell of a time trying to get (what I thought was) a simple index from a collection of multiple sliders. The HTML is as follows: <div id="left-values" class="line"> <span id="l1" style="padding: 0 1.8em;">0</span> <span id="l2" style="padding: 0 1.8em;">0</span> <span id="l3" style="padding: 0 1.8em;">0</span> <span id="l4" style="padding: 0 1.8em;">0</span> <span id="l5" style="padding: 0 1.8em;">0</span> <span id="l6" style="padding: 0 1.8em;">0</span> <span id="l7" style="padding: 0 1.8em;">0</span> <span id="l8" style="padding: 0 1.8em;">0</span> </div> And the jQuery code is: // setup audiometry sliders $("#eq > span").each(function (e) { // read initial values from markup and remove that var value = parseInt($(this).text()); // var index = $(this).index; <- this didn't work. $(this).empty(); $(this).slider({ value: value, slide: function (event, ui) { //console.log($(this).attr('id')); <- neither did this. //console.log(index); $('#left-values span:first').text(ui.value); } }) }); The problem is that jQuery UI - when creating a slider - replaces the existing HTML with its own markup. This includes any ID values and, for whatever reason, I can't get the index for a given slider to surface either. So I'm running out of ideas.

    Read the article

< Previous Page | 94 95 96 97 98 99 100 101 102 103 104 105  | Next Page >