i was working on some requirements of my project and one of the requirement was to hide/unhide a Div on client side(Project is in .net technology and div's visibility will be set on client side using JS)
Code Snippet:
var block = document.getElementById('Your_Div_Id');
block.style.display = "none"; //some where it works to hide
block.style.visibility = "hidden"; //some where it works to hide
my question is why?
This is just hit and trial. first one was not working in one place so I used second one.I could not got to know why...
In case you dont want to use jQuery, Make sure your Id of element is unique and is set properly in javascript code
you may also try writing the code in one line as below :
document.getElementById("element-id").style.display="none";
Remember that display: none and visibility: hidden are different.
The first one "delete" the node from the DOM, and the other nodes can take it place.
The second one just hide hide, but the node preserves it position and sizes.
Tip: Try to use jQuery
$("#foo").hide();
Related
I'm struggling a little with a method I need. Here is what I want to do:
I want to load a webpage
On that webpage, I want to wait until a specific element and it's style attribute contains "hidden: true;". When this style is present, the page has been fully loaded so I can continue my tests
I need to continue refreshing the webpage until the above condition is true - Please assume I need to keep refreshing. I know it seems stupid.
Here is what I'm trying
Step 1:
Navigating to a webpage (writing code from memory):
driver.Navigate().GoToUrl("http://example.com");
Step 2:
Find the style from the specific element (Writing code from memory)
Iwebelement MyElement = driver.findElement(By.id("example"));
Iwebelement MyElementStyle = MyElement.GetAttribute("style");
Step 3:
If the element has a style of "hidden: true;" on page load then do nothing else perform a page refresh until the element doesn't contain a style of "hidden: true;" (Writing code from memory)
if(MyElementStyle.Contains("hidden: true;"))
{
// do nothing
}
else
{
driver.Navigate().GoToUrl("http://example.com");
}
This appears to be working but the above code will only refresh the page one time so I need to loop rather than use an if statement.
Would anyone be able to offer a few pointers or suggest a better way of approaching this?
I am not sure what language binding you are using but looks like a mixture of C# and java and if that's the real test code it will not work.
Use do while loop to do a post check and check if the attribute has expected value or not.
IWebElement MyElement = Driver.FindElement(By.Id("example"));
string MyElementStyle = MyElement.GetAttribute("style");
do
{
Driver.Navigate().Refresh();
} while (MyElementStyle.Contains("hidden: true;"));
Without posting pages of C# code and markup, has anyone got a reason why this code
var link = _driver.FindElement(By.Id(field + "Field"));
var id = link.GetAttribute("id");
var text = link.Text;
given this markup
<a id="ForenameField" href="/MyUrl/MyFolder/MyId">3 errors</a>
Assigns an empty string to the text variable, but if I put a breakpoint on the second or third line and inspect the link variable, I can see the inner text of the element against the Text property on the inspector, it reads "3 errors", but the value of text is an empty string. It is not hidden, I can see the text if I add a watch or use quickview, any ideas?
Ok, it's my bad. Using jquery to toggle class on the div that contains the html in the question, meant that although users see the div appearing, the class that hides the div is still in the tag. A bit like this
<div class="hideThis showThis"><!-- my elements /--></div>
This makes it so that Selenium is right not give me a text value. It is strange however that the Visual studio debugger thinks that there should be a value. Visual Studio seems to go with what I can see, but Selenium is more pedantic about the hideThis class being there.
I go with the idea that if you can't see it you can't interact with it, so it is worth looking up the html graph from the element you expect to have a value to see if any class is present which would hide your element.
Feel free to recommend that I delete this rather obvious wisdom.
I know this was posted over a year ago, but I had this exact problem too and came across this thread. I was able to solve it by just waiting for the DOM to load--some elements aren't visible until the DOM is updated. So just putting Thread.Sleep(6000) or whatever after navigating to the page got it to work for me.
I am doing a website using asp.net C# and I would like to popup a small window with information as soon as mouse hover a particular word. I know that I have to use jquery but I don't know exactly how to do it.
Any suggestions please?
There are many plugins out there that will help you achieve what you are looking for. However it is also very possible to implement this functionality yourself. I wouldn't be surprised either if some of the plugins you come across also use similar code.
The following is my attempt to demystify tooltip/popup plugin behaviour.
You could wrap the desired word in a <span> element and give it a .hover class.
<div>
This is some text with a <span class="hover">special</span>
word that has hovercraft capabilities.
</div>
Your jQuery (ver 1.7+) would look something like this :
$(".hover").on('mouseenter',function(){
// The popup must be shown here (mouse is over element).
}).on('mouseleave',function(){
// The popup must be hidden here (mouse has left element).
});
I should add here that I am using a great and yet sometimes forgotten capability of jQuery called "chaining". The on() function actually returns the object that it was attached to. In this case $(".hover") - so if I want to call another function on that object I can just add it as another function at the end. Another example of this would be :
$("#myElement").text("An error has occured!").css("color","#FF0000");
That line of code would also at the text to #myElement and also turn the colour red.
With regard to your actual popup - I would suggest two things :
Have an element at the bottom of your markup (written last so highest index - or manually set the highest z-index)
You could also have the popup in a hidden element right next to the element that is supposed to trigger the popup.
What you're after sounds like a 'tool tip'.
The solutions using jQuery are somewhat involved - so I'll just direct you to external resources.
Possible solutions:
ToolTip Plugin for jQuery
Build a Better Tooltip with jQuery Awesomeness
I am writing a simple personal app that has a browser control and I want it to automatically "Refresh" gmail to check it more often than it does by default. There are monkey scripts that do this but I'm trying to add my personal style to it.
Anyhow, I've looked around and found everything but what I can do in csharp using the browser control.
I found this:
// Link the ID from the web form to the Button var
theButton = webBrowser_Gmail.Document.GetElementById("Refresh");
// Now do the actual click.
theButton.InvokeMember("click");
But it comes back with null in 'theButton' so it doesn't invoke anything.
Anyone have any suggestions?
It's been awhile since I've used JavaScript, but given the other answers and comments that there is no real ID associated with the element, could you do something like the following:
Search all Div's with an attribute of Role == 'Button' and an InnerHtml == 'Refresh'.
Once the correct InnerHtml is found, get the Element.
Invoke the click on the found Element.
Again, this may be blowing smoke, but thought I'd throw it out there.
edit: Just realized you are doing this with C# and a browser control; however, the concept would still be the same.
The best suggestion I could give you at this point involves an existing API that is used for .NET web browser based automation:
http://watin.org/
Since the div tag with the desired button really only seems to identify itself with the class name, you could use the Find.BySelector(“”) code included with the most recent version of watin.
I have a situation that I am stuck with, and hoping someone can help. I am building a .NET/C# web application in which I have a tabbed panel layout, and when the user clicks on each of the tabs the display panel is updated using javascript to hide and show some divs. None of these clicks cause postback, it is all client-side, so I can't use viewstate or session.
What I want to do is somehow remember which panel was last visible when the page is refreshed, yet without posting back to the server I am unsure how to do this. I have tried a hidden field but obviously its value is reset every time because the form is never submitted. I do know that I can achieve this using cookies but its a little annoying to implement for such a (seemingly) trivial operation ... but maybe this is the only way?
Does anyone have any more elegant solution to this problem?
Using a function like this to show and hide tabs):
function makeCurrent(tab) {
if (tab.title == 'Manage orders') {
document.getElementById('panelOrders').style.display = "block";
// Hide others
document.getElementById('panelAccounts').style.display = "none";
document.getElementById('panelProducts').style.display = "none";
document.getElementById('panelSettings').style.display = "none";
// Remember last viewed panel
document.getElementById('hdnCurrentlyViewing').value = "orders";
}
The panels are just divs with style.display controlling their visibility. Not sure if its useful to post HTML code because its fairly self explanatory ...?
You can make this happen without a postback is to make an AJAX call from Javascript where you tell your server what the current panel is as you switch it.
I prefer using a framework like JQuery or Prototype to help make these AJAX calls myself.
I think Hidden field will be the best option. have you tried ASP:HiddenField? It can be accessed across postbacks.
But if you still have some reservations with postbacks and hiddenfield you can also use cookies from JS http://techpatterns.com/downloads/javascript_cookies.php this is helper lib for cookies manipulation within JS.
Regards.