Problem wrapping text around dynamic image slideshow (created using jQuery innerfade plugin) RSS

• • Reply
  

  jarnail

  Member

  3 Points

  9 Posts

  Problem wrapping text around dynamic image slideshow (created using jQuery innerfade plugin)

  Apr 07, 2012 01:17 AM|LINK

  I am having issues wrapping text around images populated from code behind. Please note that I am fadding the images using jQuery innerfade plugin. The images are just displaying on top of the text. Any assistance would be greatly appreciated. I am pasting the relevant codes: .aspx, .cs and css.

  <asp:LinkButton ID="LinkButton1" PostBackUrl="~/Search.aspx" runat="server">Back</asp:LinkButton>
      <table>
          <tr>
              <td>
                  <asp:ListView ID="lvInfo" runat="server" ItemPlaceholderID="itemPlaceholder1" OnItemDataBound="lvInfo_ItemDataBound">
                      <LayoutTemplate>
                          <asp:PlaceHolder ID="itemPlaceholder1" runat="server"></asp:PlaceHolder>
                      </LayoutTemplate>
                      <ItemTemplate>
                          <div>
                              <asp:Label ID="lblTempleId" Visible="false" runat="server" Text='<%# Eval("templeId") %>'></asp:Label>
                              <asp:Label ID="lblName" CssClass="lblTemp" runat="server" Text='<%# Eval("Name") %>'></asp:Label>
                              <asp:Label ID="lblBuilt" CssClass="lblBuilt" runat="server" Text='<%# "(Estd." + Eval("Built","{0:yyyy}") + ")" %>'></asp:Label>
                              <br />
                              <asp:Label ID="lblCity" CssClass="lblLocation" runat="server" Text='<%#Eval("City") %> ' />,
                              <asp:Label ID="lblState" CssClass="lblLocation" runat="server" Text='<%#Eval("State") %>' />,
                              <asp:Label ID="lblCountry" CssClass="lblLocation" runat="server" Text='<%#Eval("Country") %>' />
                              <br />
                              <br />
                              <table id="tblSearch">
                                  <tr>
                                      <td style="vertical-align: top"> <div> <a id="lnkImg" runat="server" href='<%# Eval("templeId","SlideShow.aspx?Id={0}") %>'> </a> </div> <div id="divcontent"> <p> <%# Eval("History")%></p> </div> </td>                                 </tr>
                              </table>
                          </div>
                      </ItemTemplate>
                      <EmptyDataTemplate>
                          No data available.
                      </EmptyDataTemplate>
                  </asp:ListView>
                  <br />
                  <div class="Map">
                      <uc1:Map ID="Map1" runat="server" />
                  </div>
              </td>
              <td class="events" style="width: 25%">
                  Events
                  <hr />
              </td>
          </tr>
      </table>

  -----------

  protected void lvInfo_ItemDataBound(object sender, ListViewItemEventArgs e)
      {
          if (e.Item.ItemType == ListViewItemType.DataItem)
          {
              Label lblId = (Label)e.Item.FindControl("lblTempleId");
              var templeId = Convert.ToInt32(lblId.Text);
              ListViewDataItem dataItem = (ListViewDataItem)e.Item;
  
              DataTable dtPhotos = new DataTable();
              dtPhotos = DataCon.GetPhotosByTemple(templeId).Tables[0] as DataTable;
  
              if (dtPhotos.Rows.Count < 2)
              {
                  TextBox txtDesc = (TextBox)e.Item.FindControl("txtDesc");
              }
  
              var lnkImg = (HtmlAnchor)e.Item.FindControl("lnkImg");
  
              if (lnkImg.HasControls())
              {
                  lnkImg.Controls.Clear();
              }
  
            for (int i = 0; i < dtPhotos.Rows.Count; i++) { HtmlImage img = new HtmlImage(); img.ID = "imgPhoto" + dtPhotos.Rows[i][0].ToString(); img.Src = "~/templeImages/" + dtPhotos.Rows[i][2].ToString(); img.Attributes["class"] = "img"; lnkImg.Controls.Add(img); if ((i == dtPhotos.Rows.Count)) { lnkImg.Controls.Add(new LiteralControl("<br />")); } } if (dtPhotos.Rows.Count == 0) { HtmlImage img = new HtmlImage(); img.ID = "imgPhoto_default"; img.Src = "~/templeImages/default.jpg"; img.Attributes["class"] = "img"; lnkImg.Controls.Add(img); } 
          }
  
      }

  ------------

  #divcontent
  {
  width: 600px;
  min-height: 155px;
  word-wrap: break-word;
  }

  .img
  {
  width: 175px;
  height: 150px;
  word-wrap: break-word;
  float: left;
  margin: 4px;
  }

  
  

  
  

  
  
  

  
  
  

  • Edited by jarnail on Apr 10, 2012 04:53 AM
• • Reply
  

  asteranup

  All-Star

  30184 Points

  4906 Posts

  Re: Problem wrapping text around dynamic image slideshow (created using jQuery innerfade plugin)

  Apr 07, 2012 07:15 AM|LINK

  Hi,

  Check this post-

  http://www.tizag.com/cssT/float.php

  Thanks & Regards
  Anup Das Gupta
  Mark as Answer if you feel so. Visit My Blog
  • Edited by asteranup on Apr 10, 2012 04:54 AM
  • Marked as answer by Allen Li - MSFT on Apr 13, 2012 02:16 AM
• • Reply
  

  jarnail

  Member

  3 Points

  9 Posts

  Re: Problem wrapping text around dynamic image slideshow (created using jQuery innerfade plugin)

  Apr 08, 2012 07:08 PM|LINK

  Hello asteranup. I have already done lots of google-ing on this issue including the link you provided above. Issue still not resolved.

  • Edited by jarnail on Apr 10, 2012 04:54 AM
• • Reply
  

  Allen Li - M...

  Star

  10411 Points

  1196 Posts

  Re: Problem wrapping text around dynamic image slideshow (created using jQuery innerfade plugin)

  Apr 09, 2012 01:08 AM|LINK

  Hi, you can try to set “align” attribute to the image, please refer to the following site:

  http://www.w3schools.com/tags/att_img_align.asp

  Please mark the replies as answers if they help or unmark if not.
  If you have any feedback about my replies, please contact msdnmg@microsoft.com
  Microsoft One Code Framework
  
  • Edited by Allen Li - MSFT on Apr 09, 2012 01:23 AM
  • Edited by Allen Li - MSFT on Apr 10, 2012 04:54 AM
• • Reply
  

  asteranup

  All-Star

  30184 Points

  4906 Posts

  Re: Problem wrapping text around dynamic image slideshow (created using jQuery innerfade plugin)

  Apr 09, 2012 05:01 AM|LINK

  Ok,

  Then you should share rendered HTML and related CSS for our reference.

  Thanks & Regards
  Anup Das Gupta
  Mark as Answer if you feel so. Visit My Blog
  • Edited by asteranup on Apr 10, 2012 04:54 AM
• • Reply
  

  jarnail

  Member

  3 Points

  9 Posts

  Re: Problem wrapping text around dynamic image slideshow (created using jQuery innerfade plugin)

  Apr 10, 2012 04:51 AM|LINK

  Hi asteranup,

  Below is the rendered html along with relevant css and codebehind.

  Thanks.

  ........
              <br />
              <div>
                  <a href="SlideShow.aspx?Id=10" id="ctl00_ContentPlaceHolder1_lvInfo_ctrl0_lnkImg"><img src="templeImages/10_golden-temple-500.jpg" id="ctl00_ContentPlaceHolder1_lvInfo_ctrl0_imgPhoto102" class="img" /><img src="templeImages/10_Hydrangeas.jpg" id="ctl00_ContentPlaceHolder1_lvInfo_ctrl0_imgPhoto107" class="img" /><img src="templeImages/10_Lighthouse.jpg" id="ctl00_ContentPlaceHolder1_lvInfo_ctrl0_imgPhoto110" class="img" /></a>
              </div>
              <p>
                  this is test data. this is test data. this is test data. this is test data. this is test data. this is test data. this is test data. this is test data. this is test data. this is test data. this is test data. this is test data. </p>
          
          
      <br />
      
  
          </div>
          <hr />
  ........
              
  

  .img
  {
  float: left;
  margin:0 100px 0 0;
  width:150px;
  height:150px;
  }

  ............

  protected void lvInfo_ItemDataBound(object sender, ListViewItemEventArgs e)
  {
  if (e.Item.ItemType == ListViewItemType.DataItem)
  {
  Label lblId = (Label)e.Item.FindControl("lblTempleId");
  var templeId = Convert.ToInt32(lblId.Text);
  ListViewDataItem dataItem = (ListViewDataItem)e.Item;

  DataTable dtPhotos = new DataTable();
  dtPhotos = DataCon.GetPhotosByTemple(templeId).Tables[0] as DataTable;

  //Panel phPhoto = new Panel();
  //phPhoto = (Panel)e.Item.FindControl("pSlideshow");
  if (dtPhotos.Rows.Count < 2)
  {
  TextBox txtDesc = (TextBox)e.Item.FindControl("txtDesc");
  //txtDesc.CssClass = "desc_1";
  }

  var lnkImg = (HtmlAnchor)e.Item.FindControl("lnkImg");

  if (lnkImg.HasControls())
  {
  lnkImg.Controls.Clear();
  }

  for (int i = 0; i < dtPhotos.Rows.Count; i++)
  {

  HtmlImage img = new HtmlImage();
  img.ID = "imgPhoto" + dtPhotos.Rows[i][0].ToString();
  img.Src = "~/templeImages/" + dtPhotos.Rows[i][2].ToString();
  img.Attributes["class"] = "img";
  //img.Attributes["style"] = "width:150px;height:150px;";
  lnkImg.Controls.Add(img);
  if ((i == dtPhotos.Rows.Count))
  {
  lnkImg.Controls.Add(new LiteralControl("<br />"));
  }
  }
  if (dtPhotos.Rows.Count == 0)
  {
  HtmlImage img = new HtmlImage();
  img.ID = "imgPhoto_default";
  img.Src = "~/templeImages/default.jpg";
  img.Attributes["class"] = "img";
  lnkImg.Controls.Add(img);
  }

  }

  }

  • Edited by jarnail on Apr 10, 2012 04:54 AM
  • Marked as answer by Allen Li - MSFT on Apr 13, 2012 02:16 AM
• • Reply
  

  FightAsABull

  Contributor

  2228 Points

  424 Posts

  Re: Problem wrapping text around dynamic image slideshow (created using jQuery innerfade plugin)

  Apr 10, 2012 06:18 AM|LINK

  Hi, the text is around images now

  • Marked as answer by Allen Li - MSFT on Apr 13, 2012 02:17 AM
• • Reply
  

  asteranup

  All-Star

  30184 Points

  4906 Posts

  Re: Problem wrapping text around dynamic image slideshow (created using jQuery innerfade plugin)

  Apr 10, 2012 07:32 AM|LINK

  HI,

  I dont see any issue. The following code is working fine-

  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
      <style>
  .img
  {
  float: left;
  margin:0 100px 0 0;
  
  }
      </style>
  </head>
  <body>
              <br />
              <div>
                  <a href="SlideShow.aspx?Id=10" id="ctl00_ContentPlaceHolder1_lvInfo_ctrl0_lnkImg" class="img"><img src="http://th00.deviantart.net/fs38/150/i/2008/349/d/9/CS__Icon_Set_by_brsev.png" id="ctl00_ContentPlaceHolder1_lvInfo_ctrl0_imgPhoto102"  />
  <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Smiley_icon.svg/150px-Smiley_icon.svg.png" id="ctl00_ContentPlaceHolder1_lvInfo_ctrl0_imgPhoto107"  />
  <img src="http://hiddenpixels.com/wp-content/uploads/2008/09/free-icons-4.jpg" id="ctl00_ContentPlaceHolder1_lvInfo_ctrl0_imgPhoto110" /></a>
              </div>
              <p>
                  this is test data. this is test data. this is test data. this is test data. this is test data. this is test data. this is test data. this is test data. this is test data. this is test data. this is test data. this is test data.
  this is test data. this is test data. this is test data. this is test data. this is test data. this is test data. this is test data. this is test data. this is test data. this is test data. this is test data. this is test data.
  this is test data. this is test data. this is test data. this is test data. this is test data. this is test data. this is test data. this is test data. this is test data. this is test data. this is test data. this is test data.
  this is test data. this is test data. this is test data. this is test data. this is test data. this is test data. this is test data. this is test data. this is test data. this is test data. this is test data. this is test data.
  this is test data. this is test data. this is test data. this is test data. this is test data. this is test data. this is test data. this is test data. this is test data. this is test data. this is test data. this is test data.
   this is test data. this is test data. this is test data. this is test data. this is test data. this is test data. this is test data. this is test data. this is test data. this is test data. this is test data. this is test data.
  this is test data. this is test data. this is test data. this is test data. this is test data. this is test data. this is test data. this is test data. this is test data. this is test data. this is test data. this is test data.
  this is test data. this is test data. this is test data. this is test data. this is test data. this is test data. this is test data. this is test data. this is test data. this is test data. this is test data. this is test data.
  this is test data. this is test data. this is test data. this is test data. this is test data. this is test data. this is test data. this is test data. this is test data. this is test data. this is test data. this is test data.
  this is test data. this is test data. this is test data. this is test data. this is test data. this is test data. this is test data. this is test data. this is test data. this is test data. this is test data. this is test data.  </p>
  </div>
          <hr />
  
  </body>
  </html>

  Thanks & Regards
  Anup Das Gupta
  Mark as Answer if you feel so. Visit My Blog
  • Marked as answer by Allen Li - MSFT on Apr 13, 2012 02:17 AM