How to obtain href values from a div using xpath? - html

I have a div like this:
<div class="widget-archive-monthly widget-archive widget">
<h3 class="widget-header">Monthly Archives</h3>
<div class="widget-content">
<ul>
<li>October 2010</li>
<li>September 2010</li>
<li>August 2010</li>
<li>July 2010</li>
<li>June 2010</li>
<li>May 2010</li>
<li>April 2010</li>
<li>March 2010</li>
<li>February 2010</li>
<li>January 2010</li>
<li>December 2009</li>
<li>November 2009</li>
<li>October 2009</li>
<li>September 2009</li>
<li>August 2009</li>
<li>July 2009</li>
<li>June 2009</li>
<li>May 2009</li>
<li>April 2009</li>
<li>March 2009</li>
<li>February 2009</li>
</ul>
</div>
</div>
I'm trying to get the href values inside the widget-content div.
How would I target these links using xpath and ignore any other link on the page such as the one for "Archives" so that I end up just with these values:
http://myblog.com/blogs/my_name/2010/10/
http://myblog.com/blogs/my_name/2010/09/
http://myblog.com/blogs/my_name/2010/08/
http://myblog.com/blogs/my_name/2010/07/
... etc ...

//div[#class="widget-content"]//a/#href
That should give you the href values of links that are ONLY inside the widget-content DIV.

relative answer = XPath: find link URL by link text
"//a/#href"

Related

How To Sort And Reindex Numbered List Index On Unordered List In HTML?

I need to sort and reindex the following numbered, unordered sample list.
<ul>
<li>0001 - Apple</li>
<li>0002 - Banana</li>
<li>0003 - Mango</li>
</ul>
Where the "0001 - Apple" is moved down as follows.
<ul>
<li>0002 - Banana</li>
<li>0003 - Mango</li>
<li>0001 - Apple</li>
</ul>
Where it is supposed to be as the following list.
<ul>
<li>0001 - Banana</li>
<li>0002 - Mango</li>
<li>0003 - Apple</li>
</ul>
Another issue raises when I move a list item one row down.
<ul>
<li>0002 - Mango</li>
<li>0001 - Banana</li>
<li>0003 - Apple</li>
</ul>
Or for example I move a list item one row up.
<ul>
<li>0002 - Mango</li>
<li>0003 - Apple</li>
<li>0001 - Banana</li>
</ul>
All of each index is supposed to be "0001", "0002", "0003" respectively.
The movement is triggered by buttons for moving upward or moving downward.
Based on only moving 001 to the bottom and maintaining the same order of the others try the following:
const $ul = $('ul');
$ul.append($ul.children().filter(':contains(001)'));// or if move top to bottom use `first()`
$ul.children().text((i, txt) => {
let parts = txt.split('-');
parts[0] = (i + 1).toString().padStart(3, '0');
return parts.join(' -');
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>0001 - Apple</li>
<li>0002 - Banana</li>
<li>0003 - Mango</li>
</ul>

set two elements width equal to container using bootstrap?

I have two div inside container and those divs should be settled according to the width of container and there should be a proper space between them
<div id="testimonial-wrapper">
<div class="container">
<ul class="inline-section row">
<li class="signature-interior-features green-background col-sm-5 col-md-5">
<div class="signature-interior-content">
<h2>Signature Interior Features</h2>
<ul>
<li>Full-sized washer and dryer in every home</li>
<li>Walk-in closets and walk-in pantries and
vaulted ceilings available*</li>
<li>Appliance packages with multi-cycle dishwasher,
range and frost-free refrigerators</li>
<li>Large stainless steel sinks with disposal</li>
<li>Linen closets</li>
<li>Cozy wood-burning fireplace in every home</li>
<li>Spacious patios with exterior storage</li>
<li>Individual hot water heaters</li>
<li>Electric HeatM</li>
<li>Pre-wired for phone, cable and high-speed Internet access</li>
<li>Interior packages available*</li>
</ul>
</div><!--signature-interior-content-closed-->
</li>
<li class="community-elements-details sky-background col-sm-5 col-md-5">
<div class="community-elements-content">
<h2>Community Elements</h2>
<ul>
<li>Clubhouse with social room and kitchen</li>
<li>Athletic center with cardio equipment and free weights</li>
<li>Sparkling outdoor swimming pool</li>
<li>Invigorating indoor spa</li>
<li>Complimentary tanning studio</li>
<li>Sports court</li>
<li>Close proximity to the Sounder commuter train and
the Super Mall</li>
<li>Only minutes to Emerald Downs and I-5 with
easy access to Highway 167 and Highway 18</li>
<li>Professional on-site maintenance</li>
<li>Professional on-site management
*in select apartment home</li>
</ul>
</div><!--community-elements-content-closed-->
</li>
</ul>
</div><!--container-closed-->
</div><!--testimonial-wrapper-closed-->

Situating two lists side by side

Why don't these line up? I am using Bootstrap to make a tutoring website and I am trying to maximize the use of the grid system but I don't want to unecessarily write JavaScript functions to dynamically create the lists just yet... Is this an incorrect way to create two lists side by side? My previous solution had the lists one after the other but I think from a UX perspective they should both be immediately visible, but for some reason "Science" is a centimeter lower than "Mathematics" and I don't understand why.
<h2> MATHEMATICS </h2>
<div id = "math_div">
<ul style="width:10%; float:left;">
<li>K-5 Math</li>
<li>Middle School Math</li>
<li>Algebra</li>
<li>Plane Geometry</li>
<li>Algebra 2</li>
<li>Trigonometry</li>
<li>Solid & Analytical Geometry</li>
<li>Precalculus</li>
<li>Calculus</li>
<li> Advanced Specialties
<ul>
<li>Symbolic Logic</li>
<li>Finite Math</li>
<li>Linear & Matrix Algebra</li>
<li>Multivariable Calculus (Analysis)</li>
<li>Differential Equations</li>
<li>Linear Programming (Finance)</li>
</ul>
</li>
</ul>
</div>
<h2> SCIENCE </h2>
<div id = "science_div">
<ul style="width:10%; float:left;">
<li>Chemistry</li>
<li>Physics</li>
<li>General Physical Science</li>
<li> Advanced Specialties
<ul>
<li>Nuclear Physics & Chemistry</li>
<li>Radiochemistry</li>
<li>Radiation Science</li>
<li>Measurement Theory</li>
<li>Uncertainty Treatments</li>
</ul>
</li>
<li> Advanced Specialties
<ul>
<li>Symbolic Logic</li>
<li>Finite Math</li>
<li>Linear & Matrix Algebra</li>
<li>Multivariable Calculus (Analysis)</li>
<li>Differential Equations</li>
<li>Linear Programming (Finance)</li>
</ul>
</li>
</ul>
</div>
I'd say the issue is how the html is structured and the float:left that should probably be in the div instead of the ul (this is what is causing the second list to be a little bit below the other, because it is floating below the first title).
If you change the code a little, you get the expected behavior:
<div id="math_div" style="float:left;">
<h2> MATHEMATICS </h2>
<ul style="width:10%;">
<li>K-5 Math</li>
<li>Middle School Math</li>
<li>Algebra</li>
<li>Plane Geometry</li>
<li>Algebra 2</li>
<li>Trigonometry</li>
<li>Solid & Analytical Geometry</li>
<li>Precalculus</li>
<li>Calculus</li>
<li>Advanced Specialties
<ul>
<li>Symbolic Logic</li>
<li>Finite Math</li>
<li>Linear & Matrix Algebra</li>
<li>Multivariable Calculus (Analysis)</li>
<li>Differential Equations</li>
<li>Linear Programming (Finance)</li>
</ul>
</li>
</ul>
</div>
<div id="science_div" style="float:left;">
<h2> SCIENCE </h2>
<ul style="width:10%;">
<li>Chemistry</li>
<li>Physics</li>
<li>General Physical Science</li>
<li>Advanced Specialties
<ul>
<li>Nuclear Physics & Chemistry</li>
<li>Radiochemistry</li>
<li>Radiation Science</li>
<li>Measurement Theory</li>
<li>Uncertainty Treatments</li>
</ul>
</li>
<li>Advanced Specialties
<ul>
<li>Symbolic Logic</li>
<li>Finite Math</li>
<li>Linear & Matrix Algebra</li>
<li>Multivariable Calculus (Analysis)</li>
<li>Differential Equations</li>
<li>Linear Programming (Finance)</li>
</ul>
</li>
</ul>
</div>
As you can see in this Fiddle. I don't know if that works for you.

p:commandlink url not getting refreshed

Iam using p:commandlink for my menulinks..
the problem is that url in the browser is not getting refreshed with the page provided in th action..
Here goes my code...
any help
<li>Masters
<ul>
<li><p:commandLink action="ParcelMaster1.xhtml" value="ParcelMaster" /></li>
<li><p:commandLink action="ZoneMaster1.xhtml" value="ZoneMaster" ajax="false"/></li>
<li><p:commandLink action="PropertyFlatMaster1.xhtml" value="PropertyFlatMaster" ajax="false"/></li>
<li><p:commandLink action="WardMaster1.xhtml" value="WardMaster" ajax="false"/></li>
<li><p:commandLink action="MaMaster1.xhtml" value="MAMaster" ajax="false"/></li>
<li><p:commandLink action="PropertyParentMaster.xhtml" value="PropertyParentMaster" ajax="false"/></li>
<li>Usage Types</li>
<li>Custom Types</li>
</ul></li>
You have to add ajax = "false" to your commandLink. It is by default ajax call and it cannot redirect. Also try adding ?faces-redirect=true to url to which you are redirecting.

Passing the id of an HTML <li> tag to a VBScript subroutine when clicked on

I have loads of VBScripts that I plan to give a GUI front end (using an HTA). At the top of the HTA's window I have a drop down menu bar created as follows (haven't included CSS code as I don't think that it adds any relevent information).
I have been trying for sometime but have been unable to work out how I can pass the value of the id of the clicked li to the MenuClicked subroutine.
My previous experience with HTML was using it to create static documents so I might have got this all wrong. If that is the case then please let me know.
<script type="text/VBScript">
Sub MenuClicked()
Select Case WhatDoIPutHere
Case "#Option1A" : Sub_Option1A
Case "#Option1B" : Sub_Option1B
Case "#Option2A" : Sub_Option2A
Case "#Option2B" : Sub_Option2B
Case "#Option3" : Sub_Option3
End Select
End Sub
</script>
<div>
<ul id="nav" class="drop" onClick="MenuClicked()">
<li><a>Option1A</a>
<ul>
<li id="#Option1A"><a>Option 1A</a></li>
<li id="#Option1B"><a>Option 1B</a></li>
</ul>
</li>
<li><a>Option 2</a>
<ul>
<li id="#Option2A"><a>Option 2A</a></li>
<li id="#Option2B"><a>Option 2B</a></li>
</ul>
</li>
<li id="#Option3"><a>Option 3</a></li>
</ul>
</div>
Since HTAs are run by an Internet Explorer engine, you should use the srcElement property
<script type="text/VBScript">
Sub MenuClicked()
Dim target
' .parentNode because the <a> element is really what's being clicked,
' but we want the ID of the <li> element
Set target = window.event.srcElement.parentNode
Select Case target.id
Case "#Option1A" : Sub_Option1A
Case "#Option1B" : Sub_Option1B
Case "#Option2A" : Sub_Option2A
Case "#Option2B" : Sub_Option2B
Case "#Option3" : Sub_Option3
End Select
End Sub
</script>
<div>
<ul id="nav" class="drop" onClick="MenuClicked()">
<li><a>Option1A</a>
<ul>
<li id="#Option1A"><a>Option 1A</a></li>
<li id="#Option1B"><a>Option 1B</a></li>
</ul>
</li>
<li><a>Option 2</a>
<ul>
<li id="#Option2A"><a>Option 2A</a></li>
<li id="#Option2B"><a>Option 2B</a></li>
</ul>
</li>
<li id="#Option3"><a>Option 3</a></li>
</ul>
</div>
Here's how I would do it:
<script type="text/VBScript">
Sub MenuClicked(obj)
Select Case obj.id
Case "#Option1A" : Sub_Option1A
Case "#Option1B" : Sub_Option1B
Case "#Option2A" : Sub_Option2A
Case "#Option2B" : Sub_Option2B
Case "#Option3" : Sub_Option3
End Select
End Sub
</script>
<div>
<ul id="nav" class="drop">
<li><a>Option1A</a>
<ul>
<li id="#Option1A" onClick="MenuClicked Me"><a>Option 1A</a></li>
<li id="#Option1B" onClick="MenuClicked Me"><a>Option 1B</a></li>
</ul>
</li>
<li><a>Option 2</a>
<ul>
<li id="#Option2A" onClick="MenuClicked Me"><a>Option 2A</a></li>
<li id="#Option2B" onClick="MenuClicked Me"><a>Option 2B</a></li>
</ul>
</li>
<li id="#Option3" onClick="MenuClicked Me"><a>Option 3</a></li>
</ul>
</div>