Search Results

Search found 7592 results on 304 pages for 'center align'.

Page 246/304 | < Previous Page | 242 243 244 245 246 247 248 249 250 251 252 253  | Next Page >

  • Find Control in Grid

    - by Eric
    I have a RadGrid with radio buttons on the inside of a FormTemplate. I want hide the panels below or show the panels below on checkchanged of the radio button. However, my issue is that i don't know how to access the panels oncheckchanged. Any help would be appreciate. Thanks in advance. protected void RadioButtonCompany_CheckChanged(object sender, EventArgs e) { RadioButton RadioButtonCompany = (RadioButton)sender; Panel pnlPerson = (Panel)RadGridInjuries.Items[1].FindControl("pnlPerson"); Panel pnlcomp = (Panel)RadGridInjuries.MasterTableView.FindControl("pnlComp"); if (RadioButtonCompany.Checked) { pnlPerson.Visible = false; pnlcomp.Visible = true; } else { pnlPerson.Visible = true; pnlcomp.Visible = false; } } <telerik:RadGrid ID="RadGridInjuries" DataSourceID="DSource"> <GroupingSettings CaseSensitive="false" /> <SelectedItemStyle CssClass="Cursor" /> <ItemStyle CssClass="Cursor" /> <MasterTableView TableLayout="Auto" CssClass="Cursor" CanRetrieveAllData="true" CommandItemDisplay="Top" ShowHeadersWhenNoRecords="false" GridLines="Both" runat="server"> <ItemStyle CssClass="Cursor" /> <EditFormSettings EditFormType="Template" > <FormTemplate> <table id="Table2" width="100%" border="0" rules="none" style="border-collapse: collapse;background:#F0F0F0"> <tr> <td style="font-size: medium;color:Blue"> <b>Provider Details Information</b></td> </tr> <tr><td><br /></td></tr> <tr> <td> <asp:RadioButton ID="RadioButtonCompany" OnCheckedChanged="RadioButtonCompany_CheckChanged" runat="server" Text="Company" GroupName="Type" AutoPostBack="true" /> <asp:RadioButton ID="RadioButtonPerson" runat="server" Text="Person" GroupName="Type" AutoPostBack="true" /> </td> </tr> <tr><td><br /></td></tr> <tr> <td align="center"> <asp:Panel ID="pnlPerson" runat="server" Visible="false"> //stuff in here <asp:/Panel> <asp:Panel ID="pnlCompany" runat="server" Visible="false"> //stuff in here <asp:/Panel> </FormTemplate> </EditFormSettings> </MasterTableView> <ClientSettings EnableRowHoverStyle="true" EnablePostBackOnRowClick="false"> <Selecting AllowRowSelect="True" EnableDragToSelectRows="true" /> <ClientEvents /> </ClientSettings> </telerik:RadGrid>

    Read the article

  • Jqgrid search option not working and edit popups not closed after submit

    - by Sajith
    i have facing two problem in Jqgrid. Search option not working and there is not closed editpopups after submit. my code below <table id="jQGridpending" style="width:auto"> </table> <div id="jQGridpendingPager"> </div> <table id="searchpending"></table> <div id="filterpending"></div> jQuery("#jQGridpending").jqGrid({ url: '@Url.Action("DiscountRequest", "Admin")', datatype: "json", mtype: "POST", colNames: [ "Id", "ClientName", "BpName", "Pdt", "DiscountReq", "DiscountAllowed", "Status", ], colModel: [ { name: "Id", width: 100, key: true, formatter: "integer", sorttype: "integer", hidden: true }, { name: "ClientName", width: 150, sortable: true,search:true,stype:'text', editrules: { required: false } }, { name: "BpName", width: 200, sortable: true, editable: false, editrules: { required: false } }, { name: "Pdt", width: 150, sortable: true, editable: false, editrules: { required: false } }, { name: "DiscountReq", width: 150, sortable: false, editable: false, editrules: { required: false } }, { name: "DiscountAllowed", width: 200, sortable: true, editable: true, editrules: { required: true } }, { name: 'Status', index: 'Status', width: 200, sortable: false, editable: true, formatter: 'select', edittype: 'select', editoptions: { value: "pending:pending;approved:approved;rejected:rejected" } }, @* { name: "Status", width: 200, sortable: false, editable: true, editrules: { required: true, minValue: 1, }, edittype: "select", editoptions: { async: false, dataUrl: "@Url.Action("GetStatus", "Admin")", buildSelect: function (response) { var s = "<select>"; s += '<option value="0">--Select--</option><option value="pending">pending</option>'; return s + "</select>"; } } },*@ //{ name: "Status", width: 150, sortable: true, editable: true, editrules: { required: true } }, //{ name: "Created", width: 120, formatter: "date", formatoptions: { srcformat: "ISO8601Long", newformat: "n/j/Y g:i:s A" }, align: "center", sorttype: "date" }, ], loadtext: "Processing pending request data please wait...", rowNum: 10, gridview: true, autoencode: true, loadonce: true, height: "auto", rownumbers: true, prmNames: { id: "Id" }, rowList: [10, 20, 30], pager: '#jQGridpendingPager', sortname: 'id', sortorder: "asc", viewrecords: true, jqModal: true, caption: "Pending List", reloadAfterSubmit: true, editurl: '@Url.Action("UpdateDiscount", "Admin")', }); jQuery("#jQGridpending").jqGrid('navGrid', '#jQGridpendingPager', { search: true,recreateFilter: true, add: false, searchtext: "Search", edittext: "Edit", deltext: "Delete", }, {//EDIT url: '@Url.Action("UpdateDiscount", "Admin")', width: "auto", jqModal: true, closeOnEscape: true, closeAfterEdit: true, reloadAfterSubmit: true, afterSubmit: function () { // Reload grid records after edit a entry in the db. $(this).jqGrid('setGridParam', { datatype: 'json' }); return [true, '', false]; }, }, {//DELETE url: '@Url.Action("DelDiscount", "Admin")', closeOnEscape: true }, {//SEARCH closeOnEscape: true, searchOnEnter: true, multipleSearch: true, //overlay: 0, width: "auto", height: "auto", });

    Read the article

  • Stretching width correctly to 100% of an inline-block element in IE6 and IE7

    - by Simon Lieschke
    I have the following markup, where I am attempting to get the right hand side of the second table to align with the right hand side of the heading above it. This works in IE8, Firefox and Chrome, but in IE6/7 the table is incorrectly stretched to fill the width of the page. I'm using the Trip Switch hasLayout trigger to apply inline-block in IE6/7. Does anyone know how (or even if) I can get the table only to fill the natural width of the wrapper element displayed with inline-block in IE6/7? You can see the code running live at http://jsbin.com/uyuva. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Test</title> <style> .wrapper { display: inline-block; border: 1px solid green; } /* display: inline-block triggers the wrapper element to have layout for IE 6/7. The trip switch then provides the inline component of the display behaviour. See http://www.brunildo.org/test/InlineBlockLayout.html for more details. */ .wrapper { *display: inline; } table { border: 1px solid red; } </style> </head> <body> <h1>No width on table:</h1> <div class="wrapper"> <h2>The right hand side of the table doesn't stretch to the end of this heading</h2> <table><tr><td>foo</td></tr></table> </div> text <h1>Width on table:</h1> <div class="wrapper"> <h2>The right hand side of the table should stretch to the end of this heading</h2> <table style="width: 100%"><tr><td>foo</td></tr></table> </div> text </body> </html>

    Read the article

  • Jquery flowplayer - tabs - content inside div tags not displaying

    - by Gublooo
    Hey guys, I'm looking for a simple example of JQuery tabs in which I am planning to show two different forms. I came across this example http://flowplayer.org/tools/demos/tabs/index.htm which is perfect for my needs. So I implemented the simple example. The code in question is: <div class="panes" <divFirst tab content. Tab contents are called "panes"</div <divSecond tab content</div <divThird tab content</div </div Now my content for the first tab is a form which has several of its own div tags - when I put that form with div tags as the content for the first tab - nothing appears. So I made a simple change and added another div tag to the content of the first tab as shown below and still nothing appears: <div class="panes" <div<divFirst tab content. Tab contents are called "panes"</div</div <divSecond tab content</div <divThird tab content</div </div Is there a simple way to fix this. This is the content that I want to display in my first tab - Thanks for your help <div id="formbox" class="formbox" <form id="shopping_form" method="post" <div id="3" style="width:520px;" <textarea id="message" name="message" rows="3" cols="50"</textarea </div <div id="store_row" style="width:220px;float:left;padding-bottom:10px;"<bStore</b <input type="text" id="store" name="store" class="required" size="20" / <input type="hidden" id="store_id"/ </div <div id="city_column" style="width:200px;float:left;padding-bottom:10px;"<bCity</b <input type="text" id="city" name="city" size="15"/ </div <div id="findbutton_column" style="vertical-align:top;width:80px;float:left;" <input class="find_address" id="findaddress" type="button" value="Find Store"/ </div <div id="googlerow" style="width:120px;float:left;padding-bottom:10px;" <bSelect Store</b<select id="google_stores" name="google_stores"</select <input type="hidden" id="google_address"/ </div <div id="google_message" style="float:left;padding-bottom:10px;display:none;"</div <div id="locationrow" style="float:left;padding-bottom:10px;display:none;" <bAddress/Country</b <input type="text" id="address" name="address" size="20" / <input type="text" id="country" name="country" size="20"/ </div <div style="width:520px;float:left;padding-bottom:10px;" <bPrice    <input type="text" id="price" name="price" size="20" / </div <div id="buttonrow" style="width:200px;float:right;display:none;" <input id="it" type="image" src="http://images.pe.com.s3.amazonaws.com/it.png" height="35px"/ </div </form </div

    Read the article

  • Casting interfaces in java

    - by owca
    I had two separate interfaces, one 'MultiLingual' for choosing language of text to return, and second 'Justification' to justify returned text. Now I need to join them, but I'm stuck at 'java.lang.ClassCastException' error. Class Book is not important here. Data.length and FormattedInt.width correspond to the width of the line. The code : public interface MultiLingual { static int ENG = 0; static int PL = 1; String get(int lang); int setLength(int length); } class Book implements MultiLingual { private String title; private String publisher; private String author; private int jezyk; public Book(String t, String a, String p, int y){ this(t, a, p, y, 1); } public Book(String t, String a, String p, int y, int lang){ title = t; author = a; publisher = p; jezyk = lang; } public String get(int lang){ jezyk = lang; return this.toString(); } public int setLength(int i){ return 0; } @Override public String toString(){ String dane; if (jezyk == ENG){ dane = "Author: "+this.author+"\n"+ "Title: "+this.title+"\n"+ "Publisher: "+this.publisher+"\n"; } else { dane = "Autor: "+this.author+"\n"+ "Tytul: "+this.title+"\n"+ "Wydawca: "+this.publisher+"\n"; } return dane; } } class Data implements MultiLingual { private int day; private int month; private int year; private int jezyk; private int length; public Data(int d, int m, int y){ this(d, m, y, 1); } public Data(int d, int m, int y, int lang){ day = d; month = m; year = y; jezyk = lang; } public String get(int lang){ jezyk = lang; return this.toString(); } public int setLength(int i){ length = i; return length; } @Override public String toString(){ String dane=""; String miesiac=""; String dzien=""; switch(month){ case 1: miesiac="January"; case 2: miesiac="February"; case 3: miesiac="March"; case 4: miesiac="April"; case 5: miesiac="May"; case 6: miesiac="June"; case 7: miesiac="July"; case 8: miesiac="August"; case 9: miesiac="September"; case 10: miesiac="October"; case 11: miesiac="November"; case 12: miesiac="December"; } if(day==1){ dzien="st"; } if(day==2 || day==22){ dzien="nd"; } if(day==3 || day==23){ dzien="rd"; } else{ dzien="th"; } if(jezyk==ENG){ dane =this.day+dzien+" of "+miesiac+" "+this.year; } else{ dane = this.day+"."+this.month+"."+this.year; } return dane; } } interface Justification { static int RIGHT=1; static int LEFT=2; static int CENTER=3; String justify(int just); } class FormattedInt implements Justification { private int liczba; private int width; private int wyrownanie; public FormattedInt(int s, int i){ liczba = s; width = i; wyrownanie = 2; } public String justify(int just){ wyrownanie = just; String wynik=""; String tekst = Integer.toString(liczba); int len = tekst.length(); int space_left=width - len; int space_right = space_left; int space_center_left = (width - len)/2; int space_center_right = width - len - space_center_left -1; String puste=""; if(wyrownanie == LEFT){ for(int i=0; i<space_right; i++){ puste = puste + " "; } wynik = tekst+puste; } else if(wyrownanie == RIGHT){ for(int i=0; i<space_left; i++){ puste = puste + " "; } wynik = puste+tekst; } else if(wyrownanie == CENTER){ for(int i=0; i<space_center_left; i++){ puste = puste + " "; } wynik = puste + tekst; puste = " "; for(int i=0; i< space_center_right; i++){ puste = puste + " "; } wynik = wynik + puste; } return wynik; } } And the test code that shows this casting "(Justification)gatecrasher[1]" which gives me errors : MultiLingual gatecrasher[]={ new Data(3,12,1998), new Data(10,6,1924,MultiLingual.ENG), new Book("Sekret","Rhonda Byrne", "Nowa proza",2007), new Book("Tuesdays with Morrie", "Mitch Albom", "Time Warner Books",2003, MultiLingual.ENG), }; gatecrasher[0].setLength(25); gatecrasher[1].setLength(25); Justification[] t={ new FormattedInt(345,25), (Justification)gatecrasher[1], (Justification)gatecrasher[0], new FormattedInt(-7,25) }; System.out.println(" 10 20 30"); System.out.println("123456789 123456789 123456789"); for(int i=0;i < t.length;i++) System.out.println(t[i].justify(Justification.RIGHT)+"<----\n");

    Read the article

  • Programming an Android Button to update EditText views

    - by bergler77
    Ok guys, I have a button in android that i'm trying to use to update 8 EditText Views with different random numbers. Everything works up until I click the button. It appears I am missing a resource according to the debugger, but I'm not sure what. I've tried several different ways of implementing the button. Here is what I have after looking at several posts. import java.util.Random; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import android.widget.Button; import android.widget.EditText; public class MyCharNewChar extends MyCharActivity { private OnClickListener randomButtonListener = new OnClickListener(){ public void onClick(View v) { //Button creates a set of random numbers and updates the values //of the EditText views. Random rand = new Random(); int STR = 1 + rand.nextInt(12); int AGI = 1 + rand.nextInt(12); int DEX = 1 + rand.nextInt(12); int WIS = 1 + rand.nextInt(12); int INT = 1 + rand.nextInt(12); int CON = 1 + rand.nextInt(12); int HP = 1 + rand.nextInt(20); int AC = 1 + rand.nextInt(6); EditText str = (EditText) findViewById(R.id.str); str.setText(STR); EditText agi = (EditText) findViewById(R.id.agi); agi.setText(AGI); EditText dex = (EditText) findViewById(R.id.dex); dex.setText(DEX); EditText wis = (EditText) findViewById(R.id.wis); wis.setText(WIS); EditText intel = (EditText) findViewById(R.id.intel); intel.setText(INT); EditText con = (EditText) findViewById(R.id.con); con.setText(CON); EditText hp = (EditText) findViewById(R.id.baseHP); hp.setText(HP); EditText ac = (EditText) findViewById(R.id.baseAC); ac.setText(AC); } }; @Override public void onCreate(Bundle savedInstanceState){ super.onCreate(savedInstanceState); setContentView(R.layout.newchar); Button randomButton = (Button) findViewById(R.id.randomButton); randomButton.setOnClickListener(randomButtonListener); } } Here is the xml: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/linearlayoutNew1" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:background="@drawable/background" > <TextView android:id="@+id/newCharLabel" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/new_character_screen" android:textSize="24dp" android:textColor="@color/splash" android:textStyle="bold" android:gravity="center"/> <TextView android:id="@+id/nameLabel" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/nameLabel" android:textSize="18dp" android:textColor="@color/splash"/> <EditText android:id="@+id/editText1" android:layout_width="match_parent" android:layout_height="wrap_content" android:ems="10" android:inputType="textPersonName" > <requestFocus /> </EditText> <TableLayout android:id="@+id/statsLayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="5dp"> <TableRow android:id="@+id/tableRow01" android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="5dp"> <TextView android:id="@+id/strLabel" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/strLabel" android:textSize="18dp" android:textColor="@color/splash"/> <EditText android:id="@+id/str" android:layout_width="wrap_content" android:layout_height="wrap_content" android:ems="3" android:inputType="number" /> <TextView android:id="@+id/agiLabel" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/agiLabel" android:textSize="18dp" android:textColor="@color/splash"/> <EditText android:id="@+id/agi" android:layout_width="wrap_content" android:layout_height="wrap_content" android:ems="3" android:inputType="number"/> <TextView android:id="@+id/dexLabel" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/dexLabel" android:textSize="18dp" android:textColor="@color/splash"/> <EditText android:id="@+id/dex" android:layout_width="wrap_content" android:layout_height="wrap_content" android:ems="3" android:inputType="number"/> </TableRow> <TableRow android:id="@+id/tableRow02" android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="5dp"> <TextView android:id="@+id/intLabel" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/intLabel" android:textSize="18dp" android:textColor="@color/splash"/> <EditText android:id="@+id/intel" android:layout_width="wrap_content" android:layout_height="wrap_content" android:ems="3" android:inputType="number"/> <TextView android:id="@+id/wisLabel" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/wisLabel" android:textSize="18dp" android:textColor="@color/splash"/> <EditText android:id="@+id/wis" android:layout_width="wrap_content" android:layout_height="wrap_content" android:ems="3" android:inputType="number"/> <TextView android:id="@+id/conLabel" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/conLabel" android:textSize="18dp" android:textColor="@color/splash"/> <EditText android:id="@+id/con" android:layout_width="wrap_content" android:layout_height="wrap_content" android:ems="3" android:inputType="number"/> </TableRow> </TableLayout> <LinearLayout android:id="@+id/linearlayoutNew02" android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="5dp" android:gravity="center"> <TextView android:id="@+id/baseHPLabel" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/hpLabel" android:textSize="18dp" android:textColor="@color/splash"/> <EditText android:id="@+id/baseHP" android:layout_width="wrap_content" android:layout_height="wrap_content" android:ems="3" android:inputType="number"/> <TextView android:id="@+id/baseACLabel" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/acLabel" android:textSize="18dp" android:textColor="@color/splash"/> <EditText android:id="@+id/baseAC" android:layout_width="wrap_content" android:layout_height="wrap_content" android:ems="3" android:inputType="number"/> </LinearLayout> <LinearLayout android:id="@+id/linearlayoutNew03" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <Button android:id="@+id/randomButton" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="@string/randomButton" android:textSize="16dp" android:clickable="true"/> </LinearLayout> </LinearLayout> I have also tried setting the onClick in xml to setup a specific onClick method. Still the same error so I must have a problem elsewhere. Any suggestions would be great!

    Read the article

  • how to display image in repeater after AJAX AsyncFileUpload ?

    - by Gordon Shamway
    Hello i am using the AsyncFileUpload from the ajaxtoolkit, upter the upload is complete , i want to display all the images that were uploaded (and their URL is inserted into the DB) with my repeater and binding method. but its not working! the images are uploaded, the DB insert works file, but i cant see the images after the repeater is dinded. (i have to mention that if i go step by step, i do see that the ITEMBOUND is being binded and executed) <ajax:TabContainer runat="server" ID="testTab"> <ajax:TabPanel runat="server" ID="testTabContainer"> <ContentTemplate> <ajax:AsyncFileUpload ID="uploadAsyncImage" runat="server" OnUploadedComplete="InsertToTemp" ThrobberID="Throbber"/> <asp:Label ID="Throbber" runat="server" Style="display: none"> <img src="Images/indicator.gif" align="absmiddle" alt="loading" /> </asp:Label> <br /> <asp:UpdatePanel runat="server" ID="pnlImages" UpdateMode="Conditional" ChildrenAsTriggers="true"> <ContentTemplate> <asp:Repeater runat="server" ID="rptImages" > <ItemTemplate> <a href="<%# DataBinder.Eval(Container.DataItem, "PicURL")%>" rel="lightbox"> <asp:Image ImageUrl='<%# DataBinder.Eval(Container.DataItem, "PicURL")%>' Width="50" Height="50" runat="server" ID="testPic" /> </a> </ItemTemplate> </asp:Repeater> </ContentTemplate> </asp:UpdatePanel> </ContentTemplate> </ajax:TabPanel> </ajax:TabContainer> </form> also adding my Code Behind, since it might be important or will help you get an idea of what i am trying to do.private void BindRepater() { ProjDataContext db = DbContext.DbContextProvider(); var pic = from p in db.TempProdCats where p.SessionID == Session.SessionID.ToString() select new { PicURL = p.PicURL }; rptImages.DataSource = pic; rptImages.DataBind(); pnlImages.Update(); } protected void rptImages_ItemDataBound(object sender, RepeaterItemEventArgs e) { if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem) { Image lblCat = (Image)e.Item.FindControl("testPic"); lblCat.ImageUrl = (string)DataBinder.Eval(e.Item.DataItem, "PicURL"); pnlImages.Update(); } } your help will be highly appreciated , if any of you got any idea how to make it work...

    Read the article

  • 100% width table cell

    - by Elvis
    Hello! I have this table layout. I want to align the whole content to the right. So i'm using one cell with width: 100%;. Usually everything looks good and nice. But there is something, which i don't understand. If the content in cell, which has colspan, becomes bigger than normal cell in this column (you can test this by clicking Click to test button), it brakes whole layout. This happens on Chrome, Safari 4 and 5, IE8, but on Opera, FF and IE7 is OK. Any ideas? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>TEST</title> <style type="text/css"> table { width: 100%; } table td { border: 1px solid black; white-space: nowrap; } .delimiter { width: 100%; } </style> </head> <body> <table> <tr> <td><label>Row 1</label></td> <td>&nbsp;</td> <td><input type="text" value="Field 1" id="field1" size="25"></td> <td><input type="button" value="Click to test" onclick="var o = document.getElementById('field2'); o.size = o.size == 25 ? 50 : 25;"></td> <td class="delimiter">&nbsp;</td> </tr> <tr> <td><label>Row 2</label></td> <td>&nbsp;</td> <td colspan="3"><input type="text" id="field2" value="Field 2" size="25"></td> </tr> </table> </body> </html>

    Read the article

  • Controls not aligning properly.

    - by RPK
    I am using following code to design my home page. The output (as shown below) is not appearing properly. You can see the banner going to far left and the navigation links have a huge gap in between. How to set this? Can it be done using only the DIV tag instead of TABLE? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> First Website </title> </head> <body> <table id="main" align="center" width="600 px"> <tr id="trBanner"> <td id="tdBanner"> <img src="../../../My Pictures/banner copy.bmp.jpg" </td> </tr> <tr id="trNavLinks"> <td id="lnkHome"> <a href="" id="lnkHome" name="lnkHome">Home</a> </td> <td id="lnkLife"> <a href="" id="lnkLife" name="lnkLife">Life</a> </td> <td id="lnkTeachings"> <a href="" id="lnkTeachings" name="lnkTeachings">Teachings</a> </td> <td id="lnkExperiences"> <a href="" id="lnkExperiences" name="lnkExperiences">Experiences</a> </td> <td id="lnkPhotoGallery"> <a href="" id="lnkPhotoGallery" name="lnkPhotoGallery">Photo Gallery</a> </td> <td id="lnkReach"> <a href="" id="lnkReach" name="lnkReach">How to Reach</a> </td> <td id="lnkContact"> <a href="" id="lnkContact" name="lnkContact">Contact Us</a> </td> </tr> </table> </body> </html>

    Read the article

  • jQuery show/hide menu problem

    - by jerrygarciuh
    Hi folks, I am encountering an odd behavior using jQuery to show/hide a menu. I have an absolutely positioned div which contains an "activator " div (relatively positioned) which I want to reveal a menu on moseover. Menu div is contained by the activator div and is also relatively positioned. I was working on assumption that since it would be contained by the activator that rolloff would not be triggered when the mouse travels over into the reveled menu. When you roll onto the revealed menu however show/hide starts pulsing and does so a second or so even after the mouse clears the area. CSS looks like this #myAbsolutePos { position:absolute; height:335px; width:213px; top:508px; left:0; z-index:2; } #activator { position:relative; height:35px; margin-top:95px; text-align:center; width:inherit; cursor:pointer; } #menu { position:relative; height:255px; width:243px; top:-45px; left:190px; padding:20px 25px 20px 25px; } #menuContents { width:190px; } jQuery funcs: $('#activator').mouseover(function () { $('#menu').show('slow'); }); $('#activator').mouseout(function () { $('#menu').hide('slow'); }); HTML: <div id="myAbsolutePos"> <div id="activator"> // content <div id="menu" style="display:none"> <div id="menuContents"> // content </div> </div> </div> </div> To see problem in action roll over the current weather location (Thunder Horse) in the lower left here: http://www.karlsenner.dreamhosters.com/index.php Any advice is most appreciated! JG

    Read the article

  • Collapse span when input button is hidden

    - by Evan
    I have a style that wraps around an input button, so the button can be styled very creatively. When the button is hidden in .Net, i would like the style to collapse so it renders like its hidden as well. What the style does, as a result of no value in the button or its hidden, is it keeps a small shape. Click to see a demo: http://media.apus.edu/it/evan-testing/button.htm <style> .button { cursor:pointer; text-decoration:none; background:url(button_bg.gif) no-repeat right top; padding-right:10px; display:inline-block; line-height:29px; height:29px; font-size:12px; color:#FFFFFF; font-weight:bold; } span.button { vertical-align: middle; } .button span { background:url(button_bg.gif) no-repeat left top; padding-left:10px; line-height:20px; height:29px; display:inline-block; } .button span span { background:transparent; padding:0; font-size:12px; } .button span input { cursor:pointer; font-weight:bold; background:transparent; border:0; padding-top:.4em; font-size:12px; font-family:verdana; color:#FFFFFF; } .button:hover { background-position:right -39px; } .button:hover span { background-position:left -39px; } .button:active { background-position:right -78px; } .button:active span { background-position:left -78px; } </style> Input button wrapped in a span with no value: <span class="button"><span><input type="button" value=""></span></span> <P> Input button wrapped in a span with a value: <span class="button"><span><input type="button" value="test"></span></span> <P> Span with no data value: <span class="button"><span></span>

    Read the article

  • How to make multiple Popups using Jquery

    - by Rajasekar
    For pop up im using the following code style : a.selected { background-color:#1F75CC; color:white; z-index:100; } .messagepop { background-color:#FFFFFF; border:1px solid #999999; cursor:default; display:none; margin-top: 15px; position:absolute; text-align:left; width:394px; z-index:50; padding: 25px 25px 20px; } label { display: block; margin-bottom: 3px; padding-left: 15px; text-indent: -15px; } .messagepop p, .messagepop.div { border-bottom: 1px solid #EFEFEF; margin: 8px 0; padding-bottom: 8px; } JavaScript : $(function() { $("#contact").live('click', function(event) { $(this).addClass("selected").parent().append('<div class="messagepop pop"><form method="post" id="new_message" action="/messages"><p><label for="email">Your email or name</label><input type="text" size="30" name="email" id="email" /></p><p><label for="body">Message</label><textarea rows="6" name="body" id="body" cols="35"></textarea></p><p><input type="submit" value="Send Message" name="commit" id="message_submit"/> or <a class="close" href="/">Cancel</a></p></form></div>'); $(".pop").slideFadeToggle() $("#email").focus(); return false; }); $(".close").live('click', function() { $(".pop").slideFadeToggle(); $("#contact").removeClass("selected"); return false; }); }); $.fn.slideFadeToggle = function(easing, callback) { return this.animate({ opacity: 'toggle', height: 'toggle' }, "fast", easing, callback); }; and finally <a href="/contact" id="contact">Contact Us</a> I need to include another pop up when the register link is clicked. Whether i should use the same function with modifications or seperate functions. Please provide me the code with modifications. Im so weird. Help me.

    Read the article

  • Unable to get simple ruby on rails Search to work :/

    - by edu222
    I am new to RoR, any help would be greatly appreciated :) I have a basic scaffolding CRUD app to add customers. I am trying to search by first_name or last_name fields. The error that I am getting is: NoMethodError in Clientes#find You have a nil object when you didn't expect it! You might have expected an instance of Array. The error occurred while evaluating nil.each Extracted source (around line #9): 6: <th>Apellido</th> 7: </tr> 8: 9: <% for cliente in @clientes %> 10: <tr> 11: <td><%=h cliente.client_name %></td> 12: <td><%=h cliente.client_lastname %></td> Application Trace C:/Rails/clientes/app/views/clientes/find.html.erb:9:in `_run_erb_app47views47clientes47find46html46erb' My find function in controllers/clientes_controlee.rb is: # Find def find @cliente = Cliente.find(:all, :conditions=>["client_name = ? OR client_lastname = ?", params[:search_string], params[:search_string]]) end My views/layouts clientes.html.erb form code fragment is: <span style="text-align: right"> <% form_tag "/clientes/find" do %> <%= text_field_tag :search_string %> <%= submit_tag "Search" %> <% end %> </span> The search template I created in views/clientes/find.html.erb: <h1>Listing clientes for <%= params[:search_string] %></h1> <table> <tr> <th>Nombre</th> <th>Apellido</th> </tr> <% for cliente in @clientes %> <tr> <td><%=h cliente.client_name %></td> <td><%=h cliente.client_lastname %></td> <td><%= link_to 'Mostrar', cliente %></td> <td><%= link_to 'Editar', edit_cliente_path(cliente) %></td> <td><%= link_to 'Eliminar', cliente, :confirm =>'Estas Seguro de que desear eliminar a este te cliente?', :method => :delete %></td> </tr> <% end %> </table> <%= link_to 'Atras', clientes_path %

    Read the article

  • jquery plus minus sign on collaps and expand

    - by user295189
    hi I am using the code below. What I wanted is to have a + or - sign on expanded or collapsed view. How can I do that. Here is the code Thanks in advance! XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX <!--//---------------------------------+ // Developed by Roshan Bhattarai | // http://roshanbh.com.np | // Fell Free to use this script | //---------------------------------+--> <title>Collapsible Message Panels</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ //hide the all of the element with class msg_body $(".msg_body").show(); //toggle the componenet with class msg_body $(".msg_head").click(function(){ $(this).next(".msg_body").slideToggle(100); }); }); </script> <style type="text/css"> body { margin: 10px auto; width: 570px; font: 75%/120% Verdana,Arial, Helvetica, sans-serif; } p { padding: 0 0 1em; } .msg_list { margin: 0px; padding: 0px; width: 383px; } .msg_head { padding: 5px 10px; cursor: pointer; position: relative; background-color:#FFCCCC; margin:1px; } .msg_body { padding: 5px 10px 15px; background-color:#F4F4F8; } </style> </head> <body> <div align="center"> <p>Click on the each news head to toggle </p> </div> <div class="msg_list"> <p class="msg_head">Header-1 </p> <div class="msg_body"> orem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit </div> <p class="msg_head">Header-2</p> <div class="msg_body"> orem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit </div> </div> </body> </html>

    Read the article

  • jQuery tools modal overlay display problem in IE6-8

    - by Michael Stone
    I'm trying to enable the overlay to be modal. It works perfectly fine in FireFox, but the window object is behind the mask when it becomes modal. This prevents any interaction with it and the page is actually useless. I've tried debugging this for a while and can't figure it out. Here is a link to the example on their site: http://flowplayer.org/tools/demos/overlay/modal-dialog.html $.fn.cfwindow = function(btnEvent,modal,draggable){ //error checking if(btnEvent == ""){ alert('Error in window :\n Please provide an id that instantiates the window. '); } if(!modal && !draggable){ $('#'+btnEvent+'[rel]').overlay(); $('#content_overlay').css('cursor','default'); } if(!modal && draggable){ $('#'+btnEvent+'[rel]').overlay(); $('#content_overlay').css('cursor','move'); $('#custom').draggable(); } if(modal){ $('#'+btnEvent+'[rel]').overlay({ // some mask tweaks suitable for modal dialogs mask: { color: '#646464', loadSpeed: 200, opacity: 0.6 }, closeOnClick: false }); $('#content_overlay').css('cursor','default'); //$('#custom').addClass('modal'); } }; That's what I'm referencing when I call through: <script type="text/javascript"> $(document).ready(function(){ $(document).pngFix(); var modal = <cfoutput>#attributes.modal#; var drag = #attributes.draggable#; var btn = '#attributes.selector#'; var src = '#attributes.source#'; var wid = '#attributes.width#'; $('##custom').width(parseInt(wid)); $('div##load_content').load(src); $('##custom').cfwindow(btn,modal,drag,wid); }); </script> CSS for the modal: <style type="text/css"> .modal { display:none; text-align:left; background-color:#FFFFFF; -moz-border-radius:6px; -webkit-border-radius:6px; } </style> Exclude the and the additional pound signs, IE. "##". Screen shot of the problem: http://twitpic.com/1tak06 Note: IE6 and IE8 have the same problem. Any help would be appreciated.

    Read the article

  • Problem in vertical navigation menu using css sprites

    - by ShiVik
    Hello all I am trying to create to a vertical navigation menu using CSS sprites. I want to put in it a hover effect where the menu option slides out a bit. a:link { background: url(images/nav.png); background-position: -100px 0px; width: 150px; } a:hover { background: url(images/nav.png); background-position: -100px 0px; width: 160px; } So I am using the same image, I am just increasing its size to create a pop out effect. But my problem is that right now the image's size is increasing to the right. I want to keep the image's base aligned and its head should pop out. Here's my complete css code: #navmenu { left: 100px; margin: 0; padding: 0; position: absolute; top: 150px; width: 150px; z-index: 99; } #navmenu ul { list-style-type: none; margin: 0px; padding: 0px; } #navmenu ul li { line-height: 1.5em; padding: 0px; } #navimenu ul li a { color: black; display: block; font-weight: bold; height: 26px; padding: 0px 15px 0px 0px; text-align: right; width: 150px; } #navmenu a:link, #navmenu a:visited { background: url(images/nav.png) no-repeat; background-position: -150px 0px; width: 150px; } #navmenu a:hover { background: url(images/nav.png) no-repeat; background-position: -150px 0px; width: 160px; } Don't know how much if I've put the problem correctly but can somebody help me out here? Thanks

    Read the article

  • CSS class not having an effect on a div

    - by ETFairfax
    Hi Peeps, The following is an section of my css file plus some HTML. Can anyone tell me when I put class="containerHeader selected" (as is on Test Header A) the background colour is not being set to Red??? Cheers, ET Fairfax. div#builderContainer { margin-top: 15px; width: 390px; height: 700px; border: solid 0px #CCCCCC; background-repeat: no-repeat; } div#builderContainer .container { display: none; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; /* Corner radius */ border: solid 1px #999999; } div#builderContainer .container div:hover { background-color: #EEEEEE; } div#builderContainer .containerHeader { -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; background: #93c3cd url(images/ui-bg_diagonals-small_50_93c3cd_40x40.png) 50% 50% repeat; border-bottom: solid 0px #999999; margin: 0px; margin-top: 25px; padding: 10px; /* display: none; */ border: solid 1px #999999; font-weight: bold; font-family: Verdana; background-color: #FFF; cursor: pointer; vertical-align: middle; } div#builderContainer .containerHeader:hover { background: #ccd232 url(images/ui-bg_diagonals-small_75_ccd232_40x40.png) 50% 50% repeat; } div#builderContainer .containerHeader:active { background: #db4865 url(images/ui-bg_diagonals-small_40_db4865_40x40.png) 50% 50% repeat; } div#builderContainer .containerHeader .selected { background-color: Red; } <div id="builderContainer"> <div class="containerHeader selected" id="CHA">Test Header A</div> <div class="container" id="CA"></div> <div class="containerHeader" id="CHB">Test Header B</div> <div class="container" id="CB"></div> </div>

    Read the article

  • WPF Button Image only showing in last control

    - by Ryan
    Hello All! I am fairly new to WPF and am probably missing something simple here. If I have 3 controls, only the last control will show the OriginalImage that I specify. Any help would be most appreciated. Thanks Ryan Main Window <Grid> <Grid.RowDefinitions> <RowDefinition Height="200*"/> <RowDefinition Height="60" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="85" /> <ColumnDefinition Width="85" /> <ColumnDefinition Width="85" /> <ColumnDefinition Width="85" /> <ColumnDefinition Width="300" /> </Grid.ColumnDefinitions> <Grid Grid.Row="1"> <but:ListButton OriginalImage="/CustomItemsPanel;component/ListBox/Images/add.png" DisableImage="/CustomItemsPanel;component/ListBox/Images/addunselect.png" /> </Grid > <Grid Grid.Row="1" Grid.Column="1" > <but:ListButton OriginalImage="/CustomItemsPanel;component/ListBox/Images/add.png" DisableImage="/CustomItemsPanel;component/ListBox/Images/addunselect.png" /> </Grid > <Grid Grid.Row="1" Grid.Column="2" > <but:ListButton OriginalImage="/CustomItemsPanel;component/ListBox/Images/add.png" DisableImage="/CustomItemsPanel;component/ListBox/Images/addunselect.png" /> </Grid> </Grid> Control XAML <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:CustomItemsPanel.ListButton"> <LinearGradientBrush x:Key="ButtonBackground" EndPoint="0.5,1" StartPoint="0.5,0"> <LinearGradientBrush.GradientStops> <GradientStop Color="#FF0E3D70"/> <GradientStop Color="#FF001832" Offset="1"/> </LinearGradientBrush.GradientStops> </LinearGradientBrush> <LinearGradientBrush x:Key="ButtonBackgroundMouseOver" EndPoint="0.5,1" StartPoint="0.5,0"> <LinearGradientBrush.GradientStops> <GradientStop Color="#FF1E62A1" /> <GradientStop Color="#FF0A3C6D" Offset="1"/> </LinearGradientBrush.GradientStops> </LinearGradientBrush> <LinearGradientBrush x:Key="ButtonBackgroundSelected" EndPoint="0.5,1" StartPoint="0.5,0"> <LinearGradientBrush.GradientStops> <GradientStop Color="Red" /> <GradientStop Color="#FF0A2A4C" Offset="1"/> </LinearGradientBrush.GradientStops> </LinearGradientBrush> <Style x:Key="Toggle" TargetType="{x:Type Button}"> <Setter Property="Content"> <Setter.Value> <Image> <Image.Style> <Style TargetType="{x:Type Image}"> <Setter Property="Source" Value="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:ListButton}}, Path=OriginalImage}"/> <Style.Triggers> <Trigger Property="IsEnabled" Value="False"> <Setter Property="Source" Value="{Binding Path=DisableImage, RelativeSource={RelativeSource TemplatedParent}}"/> </Trigger> </Style.Triggers> </Style> </Image.Style> </Image> </Setter.Value> </Setter> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type Button}"> <Grid Cursor="Hand"> <Border Name="back" Margin="0,1,0,0" Background="{StaticResource ButtonBackground}"> <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" x:Name="content" /> </Border> <Border BorderThickness="1" BorderBrush="#FF004F92"> <Border BorderThickness="0,0,1,0" BorderBrush="#FF101D29" /> </Border> </Grid> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="True" > <Setter TargetName="back" Property="Background" Value="{StaticResource ButtonBackgroundMouseOver}"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> <Style TargetType="{x:Type local:ListButton}"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type local:ListButton}"> <Button Style="{StaticResource Toggle}" /> </ControlTemplate> </Setter.Value> </Setter> </Style> </ResourceDictionary> Control Code Behind public class ListButton : Control { public static readonly DependencyProperty MouseOverImageProperty; public static readonly DependencyProperty OriginalImageProperty; public static readonly DependencyProperty DisableImageProperty; static ListButton() { DefaultStyleKeyProperty.OverrideMetadata(typeof(ListButton), new FrameworkPropertyMetadata(typeof(ListButton))); MouseOverImageProperty = DependencyProperty.Register("MouseOverImage", typeof(ImageSource), typeof(ListButton), new UIPropertyMetadata(null)); OriginalImageProperty = DependencyProperty.Register("OriginalImage", typeof(ImageSource), typeof(ListButton), new UIPropertyMetadata(null)); DisableImageProperty = DependencyProperty.Register("DisableImage", typeof(ImageSource), typeof(ListButton), new UIPropertyMetadata(null)); } public ImageSource MouseOverImage { get { return (ImageSource)GetValue(MouseOverImageProperty); } set { SetValue(MouseOverImageProperty, value); } } public ImageSource OriginalImage { get { return (ImageSource)GetValue(OriginalImageProperty); } set { SetValue(OriginalImageProperty, value); } } public ImageSource DisableImage { get { return (ImageSource)GetValue(DisableImageProperty); } set { SetValue(DisableImageProperty, value); } } }

    Read the article

  • Justifying UIVIews on the iPhone: Algorithm Help

    - by coneybeare
    I have been messing around with a way to justify align a collection of UIView subclasses within a containing view. I am having a little bit of trouble with the algorithm and was hoping someone could help spot my errors. Here is pseudocode of where I am now: // 1 see how many items there are int count = [items count]; // 2 figure out how much white space is left in the containing view float whitespace = [containingView width] - [items totalWidth]; // 3 Figure out the extra left margin to be applied to items[1] through items[count-1] float margin = whitespace/(count-1); // 4 Figure out the size of every subcontainer if it was evenly split float subcontainerWidth = [containingView width]/count; // 5 Apply the margin, starting at the second item for (int i = 1; i < [items count]; i++) { UIView *item = [items objectAtIndex:i]; [item setLeftMargin:(margin + i*subcontainerWidth)]; } The items do not appear to be evenly spaced here. Not even close. Where am I going wrong? Here is a shot of this algorithm in action: EDIT: The code above is pseudocode. I added the actual code here but it might not make sense if you are not familiar with the three20 project. @implementation TTTabStrip (JustifiedBarCategory) - (CGSize)layoutTabs { CGSize size = [super layoutTabs]; CGPoint contentOffset = _scrollView.contentOffset; _scrollView.frame = self.bounds; _scrollView.contentSize = CGSizeMake(size.width + kTabMargin, self.height); CGFloat contentWidth = size.width + kTabMargin; if (contentWidth < _scrollView.size.width) { // do the justify logic // see how many items there are int count = [_tabViews count]; // 2 figure out how much white space is left float whitespace = _scrollView.size.width - contentWidth; // 3 increase the margin on those items somehow to reflect. it should be (whitespace) / count-1 float margin = whitespace/(count-1); // 4 figure out starting point float itemWidth = (_scrollView.size.width-kTabMargin)/count; // apply the margin for (int i = 1; i < [_tabViews count]; i++) { TTTab *tab = [_tabViews objectAtIndex:i]; [tab setLeft:(margin + i*itemWidth)]; } } else { // do the normal, scrollbar logic _scrollView.contentOffset = contentOffset; } return size; } @end

    Read the article

  • 100% height with fixed footer and embedded Google Map

    - by Carl
    I have a problem with a layout - it's not online anywhere, just local, but if you copy and paste the code below into an html page and run it locally you will see the same page I do. It's very nearly there. What I'm trying to achieve is a page with no scrollbars using up all available vertical space. Yes, I can set "overflow:hidden" on the container declaration and that helps, but it's not quite right. I want to actually have the google map surrounded with a 1em border. I have this on 3 sides but the 100% height declaration on the content div crashes the bottom border. If you don't realise the implications of a percentage-sized google map div, then the parent HAS to have a height declared for it to work. As the footer is absolute and outside of the flow, there is no "bottom" border to work to and the layout just doesn't work. The content div 100% height basically seems to take its size from the viewport and not the containing div. It's driving me mad... just can't seem to work out how to do this and I'd really appreciate some input. Start here: <!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>Google map test</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <style type="text/css"> html,body { margin:0; padding:0; height:100%; /* needed for container min-height */ background:fff; font-family:arial,sans-serif; font-size:small; color:#666; } h1 { font:1.5em georgia,serif; margin:0.5em 0; } h2 { font:1.25em georgia,serif; margin:0 0 0.5em; } div#container { position:relative; /* needed for footer positioning*/ margin:0 auto; /* center, not in IE5 */ width:960px; background:#fff; border-left:1px solid #ccc; border-right:1px solid #ccc; /*height:auto !important; real browsers */ height:100%; /* IE6: treaded as min-height*/ min-height:100%; /* real browsers */ } div#header { border-bottom:1px solid #ccc; border-left:1em solid #ccc; height:108px; position:relative; } div#header h1 { position:absolute; bottom: 0; left:0.5em; } div#header2 { border-bottom:1px solid #ccc; border-left:1em solid #999; height: 40px; position: relative; } div#header2 p { position:absolute; bottom: 0; left:0.5em; } div#headerInternal { border-bottom:1px solid #ccc; border-left:1em solid #cc3300; height: 40px; position: relative; } div#headerInternal p { position:absolute; bottom: 0; left:0.5em; } div#headerInternal2 { height: 40px; position: relative; } div#headerInternal2 p { position:absolute; bottom: 0; left:0.5em; } div#rightCol { float:right; width:29%; padding-bottom:5em; /* bottom padding for footer */ } div#content { float:left; width:70%; height:100%; /* fill that hole! */ border-right:1px solid #ccc; } div#content p { } div#footer { position:absolute; clear:both; width:100%; height:40px; bottom:0; /* stick to bottom */ background:#fff; border-top:1px solid #ccc; } div#footer p { padding:1em; margin:0; } .paddedContent { height:100%; margin: 1em; } </style> <script type="text/javascript"> function initialize() { var latlng = new google.maps.LatLng(52.397, 1.644); var myOptions = { zoom: 8, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); } </script> </head> <body onload="initialize()"> <div id="container"> <div id="header"> <h1>Title here...</h1> </div> <div id="header2"> <p>Secondary menu...</p> </div> <div id="rightCol"> <div id="headerInternal2"> <p>Right Header</p> </div> <p class="paddedContent">This is the right column</p> </div> <div id="content"> <div id="headerInternal"> <p>Page Context Menu</p> </div> <div class="paddedContent"> <div id="map_canvas" style="width: 100%; height: 100%;"></div> </div> <div id="footer"> <p>This footer is absolutely positioned</p> </div> </div> </div> </body> </html>

    Read the article

  • Scriptaculous Draggable/Droppable script not working properly when dragging into a scrolling div

    - by George
    I am using the Scriptaculous Draggable/Droppable scripts and have a problem when dragging into a scrolling div. I have the following layout (based on this question): #grid-container { left:33px; position:relative; width:300px; } #grid { width:310px; height:400px; overflow:auto; margin-bottom: 15px; } #grid-container ul { width:400px; list-style-type:none; white-space: nowrap; } #grid-container li { display:inline; list-style-type:none; padding:5px 15px 5px 15px; height:88px; text-align:center } .image-row { margin-left: 10px; } .grid-image { height:50px; margin-left:-20px; } Here is the html: <div id="grid-container"> <div id="grid"> <div id="row1" class="image-row"> <ul> <li><img id="img1" class="grid-image" src="images/img1.jpg"></li> <li><img id="img2" class="grid-image" src="images/img2.jpg"></li> <li><img id="img3" class="grid-image" src="images/img3.jpg"></li> <li><img id="img4" class="grid-image" src="images/img4.jpg"></li> </ul> </div> <div id="row2" class="image-row"> <ul> <li><img id="img5" class="grid-image" src="images/img5.jpg"></li> <li><img id="img6" class="grid-image" src="images/img6.jpg"></li> </ul> </div> </div> </div> I have another div with draggable items, while all of the img elements are droppable. This works very well for most cases, but when there are too many images for the grid and it has to scroll, I run into issues. I can still drag/drop into most items in that div, but when I scroll down and then try to drag onto an item in the bottom of the list, it drops on the row that was at the bottom before I scrolled the div. Even if I set the scroll attribute when creating the Draggable items, it will scroll the grid div, but not use the proper Droppable item. Is there any way to make the Draggable items drop onto the proper Droppable element regardless of if the containing div is scrolled or not?

    Read the article

  • Populating fields in modal form using PHP, jQuery

    - by Benjamin
    I have a form that adds links to a database, deletes them, and -- soon -- allows the user to edit details. I am using jQuery and Ajax heavily on this project and would like to keep all control in the same page. In the past, to handle editing something like details about another website (link entry), I would have sent the user to another PHP page with form fields populated with PHP from a MySQL database table. How do I accomplish this using a jQuery UI modal form and calling the details individually for that particular entry? Here is what I have so far- <?php while ($linkDetails = mysql_fetch_assoc($getLinks)) {?> <div class="linkBox ui-corner-all" id="linkID<?php echo $linkDetails['id'];?>"> <div class="linkHeader"><?php echo $linkDetails['title'];?></div> <div class="linkDescription"><p><?php echo $linkDetails['description'];?></p> <p><strong>Link:</strong><br/> <span class="link"><a href="<?php echo $linkDetails['url'];?>" target="_blank"><?php echo $linkDetails['url'];?></a></span></p></div> <p align="right"> <span class="control"> <span class="delete addButton ui-state-default">Delete</span> <span class="edit addButton ui-state-default">Edit</span> </span> </p> </div> <?php }?> And here is the jQuery that I am using to delete entries- $(".delete").click(function() { var parent = $(this).closest('div'); var id = parent.attr('id'); $("#delete-confirm").dialog({ resizable: false, modal: true, title: 'Delete Link?', buttons: { 'Delete': function() { var dataString = 'id='+ id ; $.ajax({ type: "POST", url: "../includes/forms/delete_link.php", data: dataString, cache: false, success: function() { parent.fadeOut('slow'); $("#delete-confirm").dialog('close'); } }); }, Cancel: function() { $(this).dialog('close'); } } }); return false; }); Everything is working just fine, just need to find a solution to edit. Thanks!

    Read the article

  • Passing XML markers to Google Map

    - by djmadscribbler
    I've been creating a V3 Google map based on this example from Mike Williams http://www.geocodezip.com/v3_MW_example_map3.html I've run into a bit of a problem though. If I have no parameters in my URL then I get the error "id is undefined idmarkers [id.toLowerCase()] = marker;" in Firebug and only one marker will show up. If I have a parameter (?id=105 for example) then all the sidebar links say 105 (or whatever the parameter in the URL was) instead of their respective label as listed in the XML file and a random infowindow will be opened instead of the window for the id in the URL. Here is my javascript: var map = null; var lastmarker = null; // ========== Read paramaters that have been passed in ========== // Before we go looking for the passed parameters, set some defaults // in case there are no parameters var id; var index = -1; // these set the initial center, zoom and maptype for the map // if it is not specified in the query string var lat = 42.194741; var lng = -121.700301; var zoom = 18; var maptype = google.maps.MapTypeId.HYBRID; function MapTypeId2UrlValue(maptype) { var urlValue = 'm'; switch (maptype) { case google.maps.MapTypeId.HYBRID: urlValue = 'h'; break; case google.maps.MapTypeId.SATELLITE: urlValue = 'k'; break; case google.maps.MapTypeId.TERRAIN: urlValue = 't'; break; default: case google.maps.MapTypeId.ROADMAP: urlValue = 'm'; break; } return urlValue; } // If there are any parameters at eh end of the URL, they will be in location.search // looking something like "?marker=3" // skip the first character, we are not interested in the "?" var query = location.search.substring(1); // split the rest at each "&" character to give a list of "argname=value" pairs var pairs = query.split("&"); for (var i = 0; i < pairs.length; i++) { // break each pair at the first "=" to obtain the argname and value var pos = pairs[i].indexOf("="); var argname = pairs[i].substring(0, pos).toLowerCase(); var value = pairs[i].substring(pos + 1).toLowerCase(); // process each possible argname - use unescape() if theres any chance of spaces if (argname == "id") { id = unescape(value); } if (argname == "marker") { index = parseFloat(value); } if (argname == "lat") { lat = parseFloat(value); } if (argname == "lng") { lng = parseFloat(value); } if (argname == "zoom") { zoom = parseInt(value); } if (argname == "type") { // from the v3 documentation 8/24/2010 // HYBRID This map type displays a transparent layer of major streets on satellite images. // ROADMAP This map type displays a normal street map. // SATELLITE This map type displays satellite images. // TERRAIN This map type displays maps with physical features such as terrain and vegetation. if (value == "m") { maptype = google.maps.MapTypeId.ROADMAP; } if (value == "k") { maptype = google.maps.MapTypeId.SATELLITE; } if (value == "h") { maptype = google.maps.MapTypeId.HYBRID; } if (value == "t") { maptype = google.maps.MapTypeId.TERRAIN; } } } // this variable will collect the html which will eventually be placed in the side_bar var side_bar_html = ""; // arrays to hold copies of the markers and html used by the side_bar // because the function closure trick doesnt work there var gmarkers = []; var idmarkers = []; // global "map" variable var map = null; // A function to create the marker and set up the event window function function createMarker(point, icon, label, html) { var contentString = html; var marker = new google.maps.Marker({ position: point, map: map, title: label, icon: icon, zIndex: Math.round(point.lat() * -100000) << 5 }); marker.id = id; marker.index = gmarkers.length; google.maps.event.addListener(marker, 'click', function () { lastmarker = new Object; lastmarker.id = marker.id; lastmarker.index = marker.index; infowindow.setContent(contentString); infowindow.open(map, marker); }); // save the info we need to use later for the side_bar gmarkers.push(marker); idmarkers[id.toLowerCase()] = marker; // add a line to the side_bar html side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length - 1) + ')">' + id + '<\/a><br>'; } // This function picks up the click and opens the corresponding info window function myclick(i) { google.maps.event.trigger(gmarkers[i], "click"); } function makeLink() { var mapinfo = "lat=" + map.getCenter().lat().toFixed(6) + "&lng=" + map.getCenter().lng().toFixed(6) + "&zoom=" + map.getZoom() + "&type=" + MapTypeId2UrlValue(map.getMapTypeId()); if (lastmarker) { var a = "/about/map/default.aspx?id=" + lastmarker.id + "&" + mapinfo; var b = "/about/map/default.aspx?marker=" + lastmarker.index + "&" + mapinfo; } else { var a = "/about/map/default.aspx?" + mapinfo; var b = a; } document.getElementById("idlink").innerHTML = '<a href="' + a + '" id=url target=_new>- Link directly to this page by id</a> (id in xml file also entry &quot;name&quot; in sidebar menu)'; document.getElementById("indexlink").innerHTML = '<a href="' + b + '" id=url target=_new>- Link directly to this page by index</a> (position in gmarkers array)'; } function initialize() { // create the map var myOptions = { zoom: zoom, center: new google.maps.LatLng(lat, lng), mapTypeId: maptype, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU }, navigationControl: true, mapTypeId: google.maps.MapTypeId.HYBRID }; map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var stylesarray = [ { featureType: "poi", elementType: "labels", stylers: [ { visibility: "off" } ] }, { featureType: "landscape.man_made", elementType: "labels", stylers: [ { visibility: "off" } ] } ]; var options = map.setOptions({ styles: stylesarray }); // Make the link the first time when the page opens makeLink(); // Make the link again whenever the map changes google.maps.event.addListener(map, 'maptypeid_changed', makeLink); google.maps.event.addListener(map, 'center_changed', makeLink); google.maps.event.addListener(map, 'bounds_changed', makeLink); google.maps.event.addListener(map, 'zoom_changed', makeLink); google.maps.event.addListener(map, 'click', function () { lastmarker = null; makeLink(); infowindow.close(); }); // Read the data from example.xml downloadUrl("example.xml", function (doc) { var xmlDoc = xmlParse(doc); var markers = xmlDoc.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { // obtain the attribues of each marker var lat = parseFloat(markers[i].getAttribute("lat")); var lng = parseFloat(markers[i].getAttribute("lng")); var point = new google.maps.LatLng(lat, lng); var html = markers[i].getAttribute("html"); var label = markers[i].getAttribute("label"); var icon = markers[i].getAttribute("icon"); // create the marker var marker = createMarker(point, icon, label, html); } // put the assembled side_bar_html contents into the side_bar div document.getElementById("side_bar").innerHTML = side_bar_html; // ========= If a parameter was passed, open the info window ========== if (id) { if (idmarkers[id]) { google.maps.event.trigger(idmarkers[id], "click"); } else { alert("id " + id + " does not match any marker"); } } if (index > -1) { if (index < gmarkers.length) { google.maps.event.trigger(gmarkers[index], "click"); } else { alert("marker " + index + " does not exist"); } } }); } var infowindow = new google.maps.InfoWindow( { size: new google.maps.Size(150, 50) }); google.maps.event.addDomListener(window, "load", initialize); And here is an example of my XML formatting <marker lat="42.196175" lng="-121.699224" html="This is the information about 104" iconimage="/about/map/images/104.png" label="104" />

    Read the article

  • how would you debug this javascript problem?

    - by pedalpete
    I've been travelling and developing for the past few weeks. The site I'm developing was running well. Then, the other day, i connected to a network and the page 'looked' fine, but it turns out the javascript wasn't running. I checked firebug, and there were no errors, as I was suspecting that maybe a script didn't load (I'm using the google api for jQuery and jQuery UI, as well as loading google maps api and fbconnect). I would suspect that if the issue was with one of these pages not loading I would get an error, and yet there was nothing. Thinking maybe i didn't connect properly or something, i reconnected to the network and even restarted my computer, as well as trying to run the local version. I got nothing. The local version not running also hinted to me that it was the loading of an external javascript which caused the problem. I let it pass as something strange with that one network. Unfortunately now I'm 100s of miles away. Today my brother sent me an e-mail that the network he was on at the airport wouldn't load my page. Same issue. Everything is laid out properly, and part of the layout is set in Javascript, so clearly javascript is running. he too got no errors. Of course, he got on his plane, and now he is no longer at the airport. Now the site works on his computer (and i haven't changed anything). How on earth would you go about figuring out what happened in this situation? That is two of maybe 12 or so networks. But I have no idea how i would find a network that doesn't work (and living in a small town, it could be difficult for me to find a network that doesn't work). Any ideas? The site is still in Dev, so I'd rather not post a link just yet (but could in a few days). What I can see not working is the javascript functions which are called on load, and on click. So i do think it is a javascript issue, but no errors. This wouldn't be as HUGE an issue if I could find and sit on one of these networks, but I can't. So what would you do? EDIT ---------------------------------------------------------- the first function(s - their linked) that doesn't get called is below. I've cut the code of at the .ajax call as the call wasn't being made. function getResultsFromForm(){ jQuery('form#filterList input.button').hide(); var searchAddress=jQuery('form#filterList input#searchTxt').val(); if(searchAddress=='' || searchAddress=='<?php echo $searchLocation; ?>'){ mapShow(20, -40, 0, 'areaMap', 2); jQuery('form#filterList input.button').show(); return; } if (GBrowserIsCompatible()) { var geo = new GClientGeocoder(); geo.setBaseCountryCode(cl.address.country); geo.getLocations(searchAddress, function (result) { if(!result.Placemark && searchAddress!='<?php echo $searchLocation; ?>'){ jQuery('span#addressNotFound').text('<?php echo $addressNotFound; ?>').slideDown('slow'); jQuery('form#filterList input.button').show(); } else { jQuery('span#addressNotFound').slideUp('slow').empty(); jQuery('span#headerLocal').text(searchAddress); var date = new Date(); date.setTime(date.getTime() + (8 * 24 * 60 * 60 * 1000)); jQuery.cookie('address', searchAddress, { expires: date}); var accuracy= result.Placemark[0].AddressDetails.Accuracy; var lat = result.Placemark[0].Point.coordinates[1]; var long = result.Placemark[0].Point.coordinates[0]; lat=parseFloat(lat); long=parseFloat(long); var getTab=jQuery('div#tabs div#active').attr('class'); jQuery('div#tabs').show(); loadForecast(lat, long, getTab, 'true', 0); var zoom=zoomLevel(); mapShow(lat, long, accuracy, 'areaMap', zoom ); } }); } } function zoomLevel(){ var zoomarray= new Array(); zoomarray=jQuery('span.viewDist').attr('id'); zoomarray=zoomarray.split("-"); var zoom=zoomarray[1]; if(zoom==''){ zoom=5; } zoom=parseFloat(zoom); return(zoom); } function loadForecast(lat, long, type, loadForecast, page){ jQuery('div#holdForecast').empty(); var date = new Date(); var d = date.getDate(); var day = (d < 10) ? '0' + d : d; var m = date.getMonth() + 1; var month = (m < 10) ? '0' + m : m; var year='2009'; toDate=year+'-'+month+'-'+day; var genre=jQuery('span.genreblock span#updateGenre').html(); var numDays=''; var numResults=''; var range=jQuery('span.viewDist').attr('id'); var dateRange = jQuery('.updateDate').attr('id'); jQuery('div#holdShows ul.showList').html('<li class="show"><div class="showData"><center><img src="../hwImages/loading.gif"/></center></div></li>'); jQuery('div#holdShows ul.'+type+'List').livequery(function(){ jQuery.ajax({ type: "GET", url: "processes/formatShows.php", data: "output=&genre="+genre+"&numResults="+numResults+"&date="+toDate+"&dateRange="+dateRange+"&range="+range+"&lat="+lat+"&long="+long+'&page='+page, success: function(response){ EDIT 2 ----------------------------------------------------------------------------- Please keep in mind that the problem is not that I can't load the site, the site works fine on most connections, but there are times when the site doesn't work, and no errors are thrown, and nothing changes. My brother couldn't run it earlier today while I had no problems, so it was something to do with his location/network. HOWEVER, the page loads, he had a connection, it was his first time visiting the site, so nothing could have been cashed. Same with when I had the issue a few days before. I didn't change anything, and I got to a different network and everything worked fine.

    Read the article

  • Mapscript queryByPoint return no results

    - by lucian.jp
    I have a dynamically generated mapfile made with c# mapscript that is defined like: MAP EXTENT 5.91828 45.63552 5.92346 45.65051 IMAGECOLOR 192 192 192 IMAGETYPE png SIZE 256 256 STATUS ON TRANSPARENT TRUE UNITS METERS NAME "GMAP_TILE" OUTPUTFORMAT NAME "png" MIMETYPE "image/png" DRIVER "GD/PNG" EXTENSION "png" IMAGEMODE "PC256" TRANSPARENT TRUE END SYMBOL NAME "circle" TYPE ELLIPSE FILLED TRUE POINTS 1 1 END END SYMBOL NAME ">" TYPE TRUETYPE ANTIALIAS TRUE CHARACTER ">" GAP -20 FONT "arial" POSITION CC END PROJECTION "proj=merc" "a=6378137" "b=6378137" "lat_ts=0.0" "lon_0=0.0" "x_0=0.0" "y_0=0" "units=m" "k=1.0" "nadgrids=@null" END LEGEND IMAGECOLOR 255 255 255 KEYSIZE 20 10 KEYSPACING 5 5 LABEL SIZE MEDIUM TYPE BITMAP BUFFER 0 COLOR 0 0 0 FORCE FALSE MINDISTANCE -1 MINFEATURESIZE -1 OFFSET 0 0 PARTIALS TRUE END POSITION LL STATUS OFF END QUERYMAP COLOR 255 255 0 SIZE -1 -1 STATUS ON STYLE HILITE END SCALEBAR ALIGN CENTER COLOR 0 0 0 IMAGECOLOR 255 255 255 INTERVALS 4 LABEL SIZE MEDIUM TYPE BITMAP BUFFER 0 COLOR 0 0 0 FORCE FALSE MINDISTANCE -1 MINFEATURESIZE -1 OFFSET 0 0 PARTIALS TRUE END POSITION LL SIZE 200 3 STATUS OFF STYLE 0 UNITS MILES END WEB IMAGEPATH "" IMAGEURL "" QUERYFORMAT text/html LEGENDFORMAT text/html BROWSEFORMAT text/html END LAYER NAME "Troncons" PROJECTION "proj=longlat" "ellps=WGS84" "datum=WGS84" END STATUS DEFAULT TEMPLATE "nofile.html" TOLERANCE 100 TOLERANCEUNITS METERS TYPE LINE UNITS METERS CLASS NAME "Troncons" STYLE ANGLE 360 COLOR 0 0 255 SIZE 5 SYMBOL "circle" WIDTH 5 END STYLE ANGLE 360 COLOR 0 0 0 SIZE 12 SYMBOL ">" WIDTH 1 END END FEATURE POINTS 5.91828 45.63552 5.91876 45.63611 5.91898 45.6364 5.91936 45.63701 5.91952 45.63731 5.91968 45.63762 5.91993 45.63825 5.92003 45.63856 5.92018 45.63919 5.92028 45.63983 5.92031 45.64014 5.92033 45.64046 5.92034 45.64077 5.92034 45.64108 5.92034 45.64171 5.92035 45.64234 5.92035 45.6428 5.92037 45.6433 5.9204 45.64394 5.92046 45.64458 5.92056 45.64522 5.92062 45.64554 5.92069 45.64586 5.92077 45.64617 5.92097 45.64679 5.92122 45.64739 5.92136 45.64769 5.92169 45.64828 5.92207 45.64886 5.92228 45.64914 5.92272 45.64969 5.92321 45.65023 5.92346 45.65051 END END END END I try to queryByPoint to retreive the index of the shape clciked near. In the code below I made a specific test function with fixed point instead of points passed by parameter so I am sure the point I use is actually part of a feature. In my case I use the first point of the only feature contained in mapfile. public string GetTronconId() { //_map is my dynamically created mapObj if (_map != null) for (int i = 0; i < _map.numlayers; i++) { layerObj layer = _map.getLayer(i); // Code never pass this point if (layer.queryByPoint(_map, new pointObj(5.91898, 45.6364, 0, 0), (int) MS_QUERY_MODE.MS_QUERY_MULTIPLE, 100) == (int) MS_RETURN_VALUE.MS_SUCCESS) { int numresults = layer.getNumResults(); if (numresults != 0) { layer.open(); for (int j = 0; j < numresults; j++) { resultCacheMemberObj resultat = layer.getResult(j); shapeObj shape = null; if (layer.getShape(shape, resultat.tileindex, resultat.shapeindex) == (int) MS_RETURN_VALUE.MS_SUCCESS) return shape.getValue(0); } } } } return null; } I have a dummy TEMPLATE set, I do not eveen have to use the tolerance since the point is derectly in a shape, but the queryByPoint keep returning me MS_FAILURE. From my searches on the web everything seem to be OK. Any idea?

    Read the article

< Previous Page | 242 243 244 245 246 247 248 249 250 251 252 253  | Next Page >