Develop Reference

Not able to display image and text side by side using float

I want to display image and text side by side (image on the left and text on the right(which is ordered using ).
I achieved this in .html page in visual studio
For image div I gave float: left and for text div I gave float:right
I want to achieve the same by passing the html page code to a string variable and displaying the ouput in WebBrowser.
Eg:
string html= #"<div style=""float:left"">
<img src=""smiley.jpg"" alt=""smiley"" />
<div style=""float:right;font-family:Calibri"">
<h2>Dispalying Image and text</h2>
</div>
</div>"
webBrowser1.DocumentText = html;
But here, the image and text is not displayed side by side instead the text is displayed in the next line.
Float:right is not working as expected here. How to resolve this?

You may do it like this:
<div style="float:left">
<img style="display:inline-block;vertical-align:middle" src="http://www.smilys.net/lachende_smilies/smiley7702.jpg" alt="smiley" />
<div style="display:inline-block;font-family:Calibri">
<h2>Dispalying Image and text</h2>
</div>
</div>

<img> is an inline element, and <div> and <h2> are block elements, you are mixing both together. And also, you can't set "float" to inline element.
Maybe you can try to put img inside, like this:
<div>
<div style=""font-family:Calibri"">
<h2>
<img src=""smiley.jpg"" alt=""smiley""/>
Dispalying Image and text
</h2>
</div>
</div>
This is little different view to this problem, but it is really simple, without any additional styles.

Well if you want to put your image to the left and the text to right you are doing well just assign the float:left style to the image instead of the main block like:
string html= #"<div>
<img src=""smiley.jpg"" alt=""smiley"" style=""float:left""/>
<div style=""float:left;font-family:Calibri"">
<h2>Displaying Image and text</h2>
</div>
</div>"

I've got the expected output by placing image in one div and text in one div and both the div in one div. It worked:)
Like,
<div>
<div><img></div>
<div>text</div>
</div>

You could use a table.
<table>
<tr>
<td> <img src="smiley.jpg" alt="smiley"/> </td>
<td> Displaying Image and text </td>
</tr>
</table>

unable to click element with value zero

I am trying to click on the div tag that has id="0". Although it can find that id, unable to click on it. clicking on other ids work.
This was working in Firefox 12 but failing in 13
I am using Selenium2 with C#
driver.FindElement(By.XPath("//div[#class='MenuItem' and #id='0']")).Click();
<div style="position: absolute; top: 72px; left: 9px; " id="file" class="Menu">
<div class="MenuItem" id="0"> <img src="images/UI/Icons/folder.png">Folder</div>
<div class="MenuItem" id="1"> <img valign="middle" src="images/UI/Icons/tree/folderBlogClosed.png">Blog</div>
<div class="MenuItem" id="2"> <img valign="middle" src="images/UI/Icons/folderBoard.png">Discussion Board</div>
</div>

Elements with ID attributes that start with numbers are invalid HTML. While most browsers will render this just fine, it's entirely possible that attempting to use JavaScript to locate the element by the ID (as Selenium WebDriver does) will fail.

Is there a reason you're using an XPath and not just selecting by the ID?
driver.FindElement(By.Id("0"));
HTML id's should be unique on a page.

I resolved this issue by using mouse actions
. Thank you all for your input.
Actions builder = new Actions(driver);
IWebElement tagElement = driver.FindElement(By.XPath("//div[#id='0' and #class='MenuItem']"));
//mouse hover on first item
builder.MoveToElement(tagElement).Perform();
//click on first item
driver.FindElement(By.XPath("//div[#id='0' and #class='MenuItem']")).Click();

Refresh iframe when refreshing page

i have web page it has a page header content like main menu,logo and so..on..
and in iframe i am loading the side menu and content. while loading the web page i am using an empty home page to display. after some time in mid of some page while refresing the page it reloads the home page. But i need to display the page that i am using as a current page
code is
<form id="form1" runat="server">
<div>
<table>
<tr>
<td style="vertical-align: top; width: 100%" height="115px">
<div>
<uc1:MainMenu ID="ucMainMenu" runat="server" />
</div>
</td>
</tr>
<tr>
<td>
<iframe src="HomePage.aspx" runat="server" width="1250px" height="675px" id="ifSideMenu"
frameborder="0"></iframe>
</td>
</tr>
</table>
</div>
</form>
in that iframe deafult page is Homepage.aspx,it is empty page. When i clicked the sub menu it loads the content like AddMaster.aspx. When i refresh the page it loads Homepage.aspx, but i need to display AddMaster.aspx
help me

this code will help u to refresh the iframe only.. not the whole web page. but., i dont understand your que clearly brother.
<IFRAME id="frame1" src="http://www.google.com/" runat="server">
<script type="text/javascript">
function refreshiframe()
{
parent.frame1.location.href="http://www.google.com/"
setTimeout("refreshiframe()",3000);
}
</script>
<body onload="refreshiframe();">

I finally found the answer for this question.
It may help for others.
Add the below code in HomePage.aspx and other pages that are going to load in the iframe
Session["CurrentPage"] = Request.RawUrl.ToString().Replace(Request.ApplicationPath.ToString() + #"/", "");
in Main Page in page load event.
if (Session["CurrentPage"] == null)
Session["CurrentPage"] = "Exit_Tracker.aspx";
ifSideMenu.Attributes["src"] = Session["CurrentPage"].ToString();

I am trying to hide text in a ASPX page that is tied to a textbox

So there is a a table and a text box in one of the cells
<td>
<asp:TextBox ID="tbSomeTextBox" Columns="5" runat="server"> %
</td>
This textbox gets shown if a certain selection is made in a drop down. The problem is that I would like the "%" character to also be hidden or shown with the textbox.
I have tried putting the whole textbox control inside a DIVand in my JQuery hiding the DIV at the same time I hid the textbox.
<td>
<div id="divSomeDIV"><asp:TextBox ID="tbSomeTextBox" Columns="5" runat="server"> % </div
</td>
But I get an error in my java script that id="divSomeDIV" doesn't exist in the current context.
$("#<%=divSomeDiv.ClientID%>").hide();
Wrapping that single character in a asp:Label seems like overkill.
Any suggestions?

divSomeDiv is running client-side (i.e. no "runat=server"), so there's no need for
$("#<%=divSomeDiv.ClientID%>").hide();
Just do
$("#divSomeDiv").hide();

create an asp.net label, set the label value to be %, and make them both visible or both not visible at the same time... ?

If you were getting "does not exist" in your Javascript it's probably because your Javascript is running before the div is created in the dom. In other words, this is incorrect.
<script>$("#divSomeDiv").hide()</script>
<div id="divSomeDiv">...</div>
You can either put the Javascript after the div
<div id="divSomeDiv">...</div>
<script>$("#divSomeDiv").hide()</script>
Or you can make your Javascript run after the DOM has loaded.
<script>
$(function() {
$("#divSomeDiv").hide()
});
</script>
<div id="divSomeDiv">...</div>

xVal and jQuery Submit Button

I have a simple form. Its got one field and a submit button.
I hide the submit button. The submit button is actually triggered with an anchor
tag that calls a javascript method that uses jQuery to get the element and execute
a click(). This works fine, the form posts and record is successfully written into the DB.
So now I added xVal for validation. I am trying to add in the simple client side validation.
It doesn't work when I click the anchor tag. However, if I un-hide the submit button and try posting the form with that instead of using the anchor tag that's calls the js method, it does work. So basically I am trying to figure out why it doesn't work when I use the js method to trigger the click of the submit button.
Any grande ideas? Thanks much!
Heres some code...
<div id="manufacturerButtons" class="moduleRow">
<%= Html.ActionImage(Url.Content("~/Content/Icons/bullet_go_back.png"), "Back To Admin", "Admin", "Admin")%>
| <a class="actionImage" href="javascript: addManufacturer();">
<img border="0" src="<%= Url.Content("~/Content/Icons/accept.png")%>"> <span>Add
Manufacturer </span></a>
</div>
<div class="moduleContent">
<div id="manufacturerContainer">
<div class="moduleRow">
<h3>
New Manufacturer</h3>
</div>
<div class="moduleRow">
<% Html.BeginForm("NewManufacturer", "Admin", FormMethod.Post); %>
<table class="noBorder" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width: 125px">
<h6>Name:</h6>
</td>
<td>
<%= Html.TextBox("Name") %>
</td>
</tr>
<tr style="display: none;">
<td>
</td>
<td>
<input type="submit" id="btnAdd" name="btnAdd" />
</td>
</tr>
</table>
<% Html.EndForm(); %>
<%= Html.ClientSideValidation<EquipmentManufacturer>() %>
</div>
</div>
Javascript:
function addManufacturer() {
//$('form').submit(); // doesnt work when trying to validate either
$('#btnAdd').click();
return true;
}

What you need to do is trigger the jQuery validation on your form. Try:
$('form').validate();
To submit the form upon successful validation, try:
$('form').validate({ submitHandler: function(form) { form.submit(); } });
Note that 'form' should be a valid jQuery selector for your form...