I have HTML file like this
<html>
<head>
<title>Page Name in a Folder</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<link href="resources/css/jquery-ui-themes.css" type="text/css" rel="stylesheet"/>
<link href="resources/css/axure_rp_page.css" type="text/css" rel="stylesheet"/>
<link href="data/styles.css" type="text/css" rel="stylesheet"/>
<link href="files/page_name_in_a_folder/styles.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div id="base" class="">
<!-- Image Shape Name (Image) -->
<div id="u0" class="ax_image" data-label="Image Shape Name">
<img id="u0_img" class="img " src="images/page_name_not_in_a_folder/u0.png"/>
<!-- Unnamed () -->
<div id="u1" class="text">
<p><span> </span></p>
</div>
</div>
<!-- Heading 1 Shape Name (Shape) -->
<div id="u2" class="ax_h1" data-label="Heading 1 Shape Name">
<img id="u2_img" class="img " src="resources/images/transparent.gif"/>
<!-- Unnamed () -->
<div id="u3" class="text">
<p><span>Heading 1</span></p>
</div>
</div>
<!-- Heading 2 Shape Name (Shape) -->
<div id="u4" class="ax_h2" data-label="Heading 2 Shape Name">
<img id="u4_img" class="img " src="resources/images/transparent.gif"/>
<!-- Unnamed () -->
<div id="u5" class="text">
<p><span>Heading 2</span></p>
</div>
</div>
<!-- Label Shape Name (Shape) -->
<div id="u6" class="ax_paragraph" data-label="Label Shape Name">
<img id="u6_img" class="img " src="resources/images/transparent.gif"/>
<!-- Unnamed () -->
<div id="u7" class="text">
<p><span>Label</span></p>
</div>
</div>
<!-- Unnamed (HTML Button) -->
<div id="u26" class="ax_html_button">
<input id="u26_input" type="submit" value="Submit"/>
</div>
</div>
</body>
</html>
And I need to extract all DIV's with its classes and attributes, eg:
Class name: (ax_html_button) extract value of the button = “Submit”
Class name: (ax_paragraph) extract value of the data-label = “Label
Shape Name”
etc.
Tried with using HtmlAgilityPack:
Public Shared Sub parseAgility(fName As String)
Dim htmlDoc As New HtmlAgilityPack.HtmlDocument()
htmlDoc.OptionFixNestedTags = True
htmlDoc.Load(fName)
Dim classes As New List(Of String)()
For Each node As HtmlNode In htmlDoc.DocumentNode.SelectNodes("//body//div")
classes.Add(node.InnerHtml)
Next
End Sub
But not sure how to handle all the attributes.
Any idea ?
and how to get value of input element ("Submit") ?
<div id="u26" class="ax_html_button">
<input id="u26_input" type="submit" value="Submit"/>
</div>
if I type this I get value of "u16_input" element instead of "u26" !?
For Each node As HtmlNode In htmlDoc.DocumentNode.SelectNodes("//body//div")
Dim className = node.GetAttributeValue("class", "")
Select Case className
Case "ax_html_button"
Dim node2 As HtmlNode = node.SelectSingleNode("//input")
value= node2.GetAttributeValue("value", "")
Case "ax_paragraph"
Case "ax_h1"
Case "ax_h2"
Case "ax_h3"
Case "ax_h4"
Case "ax_h5"
Case "ax_h6"
Case "ax_checkbox"
End Select
Next
EDIT: Found the solution.
It isn't entirely clear what you're trying to get. But here is an example to get class name from class attribute :
For Each node As HtmlNode In htmlDoc.DocumentNode.SelectNodes("//body//div")
Dim className = node.GetAttributeValue("class", "");
If Not String.IsNullOrEmpty(className) Then classes.Add(className)
Next
You can use similar approach to get other attributes of the <div>s.
Related
So I am trying to dynamically (using javascript) add an input field in a form by clicking the button "Add". The semantic-ui dropdown css styling to the first field since it is not added with javascript. However, after I press add, a new field created by the css styling is not applied.
Here is a link to a demo.
https://jsfiddle.net/traorefly/h83245ju/#&togetherjs=QidJs02nya
Here is my code
<!DOCTYPE html>
<html>
<head>
<title>TOPS</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
<body>
<div class="ui text container" style="margin-top: 20%">
<form action="" class="ui form">
<div class="field" id="timekeyword">
<label>Segment Start Time/Keywords</label>
<div class="ui action input">
<input type="text" placeholder="Ex: 08:23" name="cut"> <select id="keywords" multiple="multiple" class="ui fluid search dropdown" name="video[keywords][]">
<option value="Absolute">Absolute</option>
<option value="Absolute Two">Absolute Two</option>
</select>
<div class="ui positive button" id="addField">Add</div>
</div>
</div>
</form>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.js"></script>
<script >
$('.dropdown').dropdown();
$('#addField').click(function(){
var html = "<div class=\"field\">" +
" <div class=\"ui action input\">" +
" <input type=\"text\" placeholder=\"Ex: 08:23\" name=\"cut\">" +
"<select id=\"keywords\" multiple=\"multiple\" class=\"ui fluid search dropdown\" name=\"video[keywords][]\"><option value=\"Absolute\">Absolute</option>" +
"<option value=\"Absolute Convergence\">Absolute Convergence</option>" +
"<option value=\"Absolute Maximum\">Absolute Maximum</option>" +
" </div>" +
" </div>"
$('#timekeyword').after(html)
})
</script>
</body>
</html>
fiddle: https://jsfiddle.net/8pcfz2a7/
you should call $('.dropdown').dropdown(); for new elements as well.
so add $('.dropdown').dropdown(); to end of your click handler.
you can also put this in a function called update_ui, for reuse code.
This is the chunk of my code
<div class="form-control">
<div class="input-group">
<span class="input-group-addon">
<input type="text" id = "fromuser"></input>
<select id="combobox">
<option value="">Select one...</option>
<option value="abc">abc</option>
<option value="cde">cde</option>
<option value="xyz">xyz</option>
</select>
</span>
<button type="submit">Submit</button>
</div>
</div>
What I am trying to achieve is that the User can either Type the value or select from the dropdown list. The challenge here is that the Input from Keyboard will be different from that given in dropdown. For example, the dropdown has three character string options but the user can type a number such as 10, 20, 30 etc.
Is this type of input allowed possible? If so, can someone help me.
The Closest I could come to my problem is by dropping the select and use autocomplete . The full test code is as follows:-
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
var availableTags = [
"abc",
"def",
"xyz"
];
$( "#tags" ).autocomplete({
source: availableTags
});
} );
function myFunction(){
var NameValue = document.forms["FormName"]["tags"].value;
window.alert(NameValue);
}
</script>
</head>
<body>
<form name="FormName" method="post" />
<div class="ui-widget" >
<input name= "tags" id="tags" type="text" onchange="myFunction()"/>
<button name="btn-signup" type="submit" value="Submit">Submit</button>
</div>
</form>
</body>
</html>
I know this is the final solution but maybe a way ahead.
I'm trying to create a MaterialiseCSS range slider which is based on noUiSilder. The documentation says:
Add a range slider for values with a wide range. This one is set to be a number between 0 and 100. We have two different types of sliders. nouiSlider is a 3rd party plugin which we've modified. To use the noUiSlider, you will have to manually link the nouislider.css and nouislider.js files located in the extras folder.
I did everyting unfortunately it is showing the defaut HTML range (like the one in the link).
My html:
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<link href="extras/noUiSlider/nouislider.css" rel="stylesheet">
<link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="Stylesheet"></link>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script type="text/javascript" src="extras/noUiSlider/nouislider.min.js"></script>
<script type="text/javasript" src="js/phonefinder.js"></script>
</head>
<body class="grey lighten-4">
<form>
<div class="input-field">
<p class="range-field">
<input type="range" id="test5" min="0" max="100" />
</p>
</div>
</form>
</body>
</html>
js/phonefinder.js:
$(function(){
var slider = document.getElementById('test5');
noUiSlider.create(slider, {
start: [20, 80],
connect: true,
step: 1,
range: {
'min': 0,
'max': 100
},
format: wNumb({
decimals: 0
})
});
});
What am I doing wrong?
The noUiSlider range isn't a a input type, it should be a div.
So:
<form>
<div class="input-field">
<p class="range-field">
<input type="range" id="test5" min="0" max="100" />
</p>
</div>
</form>
should be:
<form>
<div id="connect"></div>
</form>
I'm trying to use customized css on bootstrap 3, but failed. What I want is(on wide screen):
combo box located in vertical center on the left side.
The h3 Title located in center(This item is the highest).
The date mark located in bottom(This item is the shortest) on the right side.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js" />
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js" />
<![endif]-->
<style>
.vcenter {
vertical-align:middle
}
.vbottom {
vertical-align:bottom
}
</style>
</head>
<body>
<div class="container">
<form class="form-horizontal bg-info" role="form">
<div class="form-group">
<div class="col-md-4 vcenter">
<div class="input-group input-group-lg">
<select class="form-control">
<option>a</option>
<option>b</option>
</select>
</div>
</div>
<div class="col-md-6">
<h3>Title</h3>
</div>
<div class="col-md-2 vbottom">
<p class="text-right"><small>2014.09.03</small></p>
</div>
</div>
</form>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" />
</body>
</html>
Try this:
for vertical align use display: table-cell
.vcenter {
vertical-align:middle;
display:table-cell;
}
Use inline padding-top, here is the demo
left column: height 46px, add 5 px (=(56-46)/2)
middle column: height 56px
right column: height 30px, added 26 px(=56-30)
Cons:
Should manual calculate.
This method works on wide screen. It will get extra height on mobile phone.
Having trouble constructing a button dynamically with jQuery Mobile. Copy and run. See notes in code.
<!DOCTYPE html>
<html>
<head>
<title>MSC Pre-Close Application</title>
<meta charset="utf-8"/>
<!-- standard Jquery/jQuery Mobile Libraries -->
<script src="jquery.mobile/jquery.js"></script>
<script src="jquery.mobile/jquery.mobile.js"></script>
<link rel="stylesheet" href="jquery.mobile/jquery.mobile.css" />
<BR/>
<div data-role="page" id="mainmenu">
<div data-role="header" data-position="inline">
<h1>Main Menu</h1>
</div>
<div class="ui-body ui-body-c">
<div data-role="content">
<div class="ui-block-a"><button id="click_me" type="submit" data-theme="a" data-icon="home">Click me to change the button to my right</button></div>
<div class="ui-block-a"><button class="cl_pre_phone1" type="submit" rel="external" data-theme="a" data-icon="home">Primary Phone</button></div>
<script>
$(document).ready(function()
{
// this changes the label but not the href action.
$(".cl_pre_phone1").html("<a href='google.com'> Google</a>");
$("#click_me").click(function() {
alert("this should change the text and href of the button!");
// here I would like to change the value as well as the href action, but it does not work.
$(".cl_pre_phone1").html("<a href='yahoo.com'>Yahoo</a>");
//$(".cl_pre_phone1").append("<a href='yahoo.com'>Yahoo</a>");
//$(".cl_pre_phone1").append("<a href='yahoo.com'>Yahoo</a>").reload(true);
});
});
</script>
You're getting messed up by the enhancement which jQM does. Your button is getting rewritten to:
<span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Primary Phone</span>
<span class="ui-icon ui-icon-home ui-icon-shadow"></span></span>
<button class="cl_pre_phone1 ui-btn-hidden" type="submit" data-theme="a" data-icon="home" aria-disabled="false">Primary Phone</button>
One way round this would be to change the call inside the callback to:
$(".cl_pre_phone1").attr("href", "http://yahoo.com").parent().find(".ui-btn-text").text("Yahoo");
or you could replace the whole ui-block-a div.