I am a generic markup which I load at runtime froma file as follows:
<div id="pagewidth" >
<div id="header" > Head </div>
<div id="wrapper" class="clearfix" >
<div id="twocols" class="clearfix">
<div id="column2" > Main Content Column </div>
<div id="column3" > right Column </div>
</div>
<div id="column1" > Left Column </div>
Footer
I want to add this to a place holder control in asp.net web page. How do I do it?
Add the html string to an asp:Literal control and then add the literal control to the placeholder's control collection.
Related
I have the following HTML and I want to select the value "1933".
I tried $('div.mydata dl:nth-of-type(1)').text() but that returns "1933110 m243" where I'd expect "1933". What am I doing wrong?
I checked here already.
console.log($('div.mydata dl:nth-of-type(1)').text());
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mydata">
<div>
<div class="left">
Year: Lot size: Total: Cars: Motors:
</div>
<div class="right">
<div>
<dl>1933</dl>
</div>
<div>
<dl>110 m<sup>2</sup></dl>
</div>
<div>
N.A.
</div>
<div>
<dl>4</dl>
</div>
<div>
<dl>3</dl>
</div>
</div>
</div>
</div>
The selector: $('div.mydata dl:nth-of-type(1)').text() is essentially selecting the first of every <dl> inside of div.mydata.
If you just want the contents of the first <dl> on the page use:
$($('div.mydata div dl').get(0)).text()
I have a set of data which is an array of objects. Some objects have more data than the other. But each object will display in each col-md-4 div. Therefore, the height of each div will be different based on how much data an object has.
Here is my code:
<div class="col-md-12 eventlog-info-container">
<div class="row eventlogs-single-container">
<div class="col-md-4 eventlog-1-container" ng-repeat="record in records track by $index">
<h4>Event Log {{$index}}</h4>
<ul>
<li ng-repeat="(key, value) in record">{{::key}}: {{::value}}</li>
</ul>
</div>
</div>
</div>
My question is after ng-repeat, I want to find the biggest height of the element. And then apply the biggest height to each of the element using ng-style.
I have an idea to approach that using JQuery. However, I want to use Angular to do that? Any suggestion? Anuglar is not good for DOM manipulation?
Thank you in advanced.
After I did some research yesterday. I found an open source angular directive to solve my problem - angularJS Vertilize Directive An AngularJS directive to vertically equalize a group of elements with varying heights. In other words, it dynamically makes a group of elements the same height. Thank you Chris Collins who made this directive.
<div vertilize-container class="row">
<div ng-repeat="col in columns" class="col-sm-3">
<div class="well">
<div vertilize>
<h3>{{ col.title }}</h3>
<p>{{ col.body }}</p>
</div>
</div>
</div>
</div>
This answer should get you started on the right path.
<div class="col-md-12 eventlog-info-container">
<div class="row eventlogs-single-container">
<div class="col-md-4 eventlog-1-container" ng-repeat="record in records track by $index">
<h4>Event Log {{$index}}</h4>
<ul>
<li outer-height ng-repeat="(key, value) in record">{{::key}}: {{::value}}</li>
</ul>
</div>
</div>
</div>
app.directive('outerHeight', function(){
return{
restrict:'A',
link: function(scope, element){
//using outerHeight() assumes you have jQuery
// if not using jQuery
console.log(element.outerHeight());
}
};
});
I need to search for a keyword in the span element (class "D") and then based on the matching criteria, I want to click on the Choose input element button.
Assuming I am searching for "Test", I would like to see working code on how to achieve this.
Example markup:
<div class="A">
<div class="B">
<input class="C" type="submit" onclick="AddFacility(this)" data-facilityid="300075" value="Choose">
</div>
<div class="D">
<span class="js-open-more-info">Test</span>
</div>
</div>
Below is an code sample in java
//Get the text from span
String text = driver
.findElement( By.xpath("//span[#class='js-open-more-info']") )
.getText();
//if the text is equal to Test then click on the button
if( text.equals("Test") ){
driver.findElement( By.xpath("//input[#class='C']") ).click();
}
EDIT
For dealing with multiple divs of same structure sample html(just tweaked ur html and added multiple divs)
HTML
<html>
<body>
<div class="A">
<div class="B">
<input class="C" type="submit" onclick="AddFacility(this)" data-facilityid="300075" value="Choose">
</div>
<div class="D">
<span class="js-open-more-info">Test1</span>
</div>
</div>
<div class="A">
<div class="B">
<input class="C" type="submit" onclick="AddFacility(this)" data-facilityid="300075" value="Choose">
</div>
<div class="D">
<span class="js-open-more-info">Test2</span>
</div>
</div>
<div class="A">
<div class="B">
<input class="C" type="submit" onclick="AddFacility(this)" data-facilityid="300075" value="Choose">
</div>
<div class="D">
<span class="js-open-more-info">Test3</span>
</div>
</div>
</body>
<script>
document.getElementsByClassName('C')[2].addEventListener("click", myFunction);
function myFunction() {
alert('deleted');
}
</script>
</html>
Code in Java
//get all the divs into a list
List<WebElement> divs = driver.findElements(By.xpath("//div[#class='A']"));
//loop through the list
for(int i=0;i<divs.size();i++)
{
//get text of all the span elements inside multiple divs
String text=divs.get(i).findElement(By.xpath(".//span[#class='js-open-more-info']")).getText();
System.out.println(text);
//if text of span element is equal to Test3 click on the respective delete button
if(text.contentEquals("Test3")){
divs.get(i).findElement(By.xpath(".//input[#class='C']")).click();
}
}
Hope this helps you....Kindly get back if you need any further help
Probably not going about this correctly, but I have an ASP page using Razor and I'm trying to figure out how I can make it so when a user clicks a link in my navigation bar it only changes the main section... I've tried using helpers with the target="mainSection" parameter, but it gives me an error on the Click but that just gives me a runtime error saying " Cannot find '/' application"
Probly missing something stupid...
my _Layout:
<div id="content">
<!-- BANNER -->
<div id="banner">
#RenderSection("Banner")
</div>
<!-- NAVIGATION -->
<div id="navigation">
#RenderSection("Navigation")
</div>
<!-- MAIN DISPLAY -->
<div id="main">
#RenderBody()
</div>
<!-- FOOTER -->
<div id="footer">
#RenderSection("Footer")
</div>
I just want to change the "main" div to whatever page cooresponds with whatever link is clicked.
I'm trying to assign margin-left:20px to all divs inside a form, whose class contains edit, with the following:
form.edit > div {
margin-left:20px;
}
My idea was that: form identifies the element, .edit identifies all the forms with the edit class assigned, and that > div sets the style for all the div child items. but it is not working, so I must be wrong! Any idea of how achieving this?
PS here's the html, I would like to assign the above style to the last div in the following code (id="address"):
<form class="edit" action="edit.php" method="post" name="edit" id="edit" enctype="multipart/form-data">
<div class="row">
<ul class="breadcrumb">
<li>Data</li>
</ul>
<div class="span8 well">
<input type="text" name="lastname" id="lastname" class="span7">
<div id="address">
// many more divs after this one
> is the identifier for direct descendants, so in the following only the top level would be assigned by your css:
<form class="edit">
<div>
<div>
</div>
</div>
</form>
Removing the > will cause the style to apply to all divs under the form.