In the HTML page while inspecting a drop-down I press Ctrl + F to find the drop-down css selector and it is like that
div .wrapperDropdown
But I found two drop-down lists with the same css selector . the first has tab index = 1 and the second has tab index = 2
How to refer to the first one whose tab index = 1
<div class="dropDownDiv">
<div class="wrapper-demo">
<div class="wrapperDropdown icon-downArrow active" tabindex="1">
<span>السعودية</span>
<ul class="dropdown" id="ulCountryList">
<li><a class="Country" countryid="1">مصر</a></li>
<li><a class="Country" countryid="13">السعودية</a></li>
<li><a class="Country" countryid="14">الإمارات</a></li>
<li><a class="Country" countryid="15">المغرب</a></li>
<li><a class="Country" countryid="17">تونس</a></li>
<li><a class="Country" countryid="18">العراق</a></li>
<li><a class="Country" countryid="19">البحرين</a></li>
<li><a class="Country" countryid="20">الكويت</a></li>
<li><a class="Country" countryid="21">الجزائر</a></li>
<li><a class="Country" countryid="23">سلطنةعمان</a></li>
<li><a class="Country" countryid="24">قطر</a></li>
<li><a class="Country" countryid="27">لبنان</a></li>
<li><a class="Country" countryid="28">الأردن</a></li>
</ul>
</div>
</div>
<div class="wrapper-demo">
<div class="wrapperDropdown icon-downArrow" tabindex="2">
<span>الرياض</span>
<ul class="dropdown" id="ulCityList">
<li><a class="City" cityid="27">جدة</a></li>
<li><a class="City" cityid="28">الرياض</a></li>
<li><a class="City" cityid="29">مكة</a></li>
<li><a class="City" cityid="85">الجبيل</a></li>
<li><a class="City" cityid="86">الدمام</a></li>
<li><a class="City" cityid="87">الظهران</a></li>
<li><a class="City" cityid="88">الخبر</a></li>
<li><a class="City" cityid="89">المدينه</a></li>
</ul>
</div>
</div>
</div>
I could solve the point of selecting the first drop-down but I can't select an option from it and I got error at the last line
Dim ie As New InternetExplorer
Dim html As HTMLDocument
Dim drp As HTMLFormElement
Dim x As Long
Dim e, r As Long
ie.Visible = True
ie.Navigate "https://www.masrawy.com/Islameyat/Prayer-Times"
Do While ie.readyState <> READYSTATE_COMPLETE: DoEvents: Loop
Set html = ie.document
Set drp = html.querySelector("div .wrapperDropdown[tabindex='1']")
drp.selectedIndex = 2
Assuming default is first active then use faster class selector of
.wrapperDropdown.active
Otherwise, shorten your existing to
.wrapperDropdown[tabindex='1']
being sure to use single quotes round number or double up on ".
To select an item, as they are anchor tags you need to click and can use nth-of-type to index into li nodes
html.querySelector(".wrapperDropdown[tabindex='1'] li:nth-of-type(2) a").Click
Related
I can't click on an element in the screen, it's not a button but works like one. I have successfully located it through the web inspector (I think) but I can't figure out the reason of why isn't working... Previously in my code I used the same code for clicking in a "Log in" button and it worked perfectly. Here it is the code:
Set objCollection = IE.document.getelementsbytagname("div")
For Each elem In objCollection
If IsObject(IE.document.getElementsByClassName("btn-group")) Then 'Scratchpad button clicking
If IsObject(IE.document.getElementsByClassName("pull-left fang-button fang-button-subtle no-margin ng-binding")) Then
Debug.Print "found it"
elem.Click
Exit For
End If
End If
Next elem
I'm trying to click in the element "Scratchpad" at the top of the page, Thanks in advance!
HTML:
<div class="btn-group" role="group" style="border:1px solid #ccc"> <a ng-class="{'active': !CrossSegmentConfig.showScratchPad && !CrossSegmentConfig.showGraph}" class="pull-left fang-button fang-button-subtle no-margin ng-binding active" ng-click="CrossSegmentConfig.showScratchPad=false; CrossSegmentConfig.showGraph=false;" style=""> <i class="fa fa-align-left"></i> Parameters </a> <a ng-class="{'active': CrossSegmentConfig.showScratchPad}" class="pull-left fang-button fang-button-subtle no-margin ng-binding" ng-click="CrossSegmentConfig.toggleScratchPad()" style=""> <i class="fa fa fa-columns"></i> Scratchpad </a> <a ng-class="{'active': CrossSegmentConfig.showGraph}" class="pull-left fang-button fang-button-subtle no-margin ng-binding" ng-click="CrossSegmentConfig.toggleGraph()"> <i class="fa fa-line-chart"></i> Plot </a> </div>
It's an Angular JS directive. Try either of the following 2
ie.document.querySelector("[ng-click*=toggleScratchPad]").click
ie.document.parentWindow.execScript "document.querySelector('[ng-click*=toggleScratchPad]').click();"
I am trying to select 09 from the time picker below using excel VBA. I have got as far as the line below but do not know how to proceed. Any assistance would be greatly appreciated.
Set e = appIE.document.getElementbyid("timepicker-pickup")
<div class="timepicker" id="timepicker-pickup">
<div class="arrow"></div>
<div class="icon close-btn"></div>
<div class="inner-time-picker clearfix">
<div class="section hours">
<div class="up-arrow"><span class="icon arrow"></span></div>
<div class="selectors">
<ul>
<li data-value="00">00</li>
<li data-value="01">01</li>
<li data-value="02">02</li>
<li data-value="03">03</li>
<li data-value="04">04</li>
<li data-value="05">05</li>
<li data-value="06">06</li>
<li data-value="07">07</li>
<li data-value="08" class="selected">08</li>
<li data-value="09">09</li>
<li data-value="10">10</li>
<li data-value="11">11</li>
</ul>
</div>
<div class="down-arrow"><span class="icon arrow"></span></div>
CSS selectors:
Try selector #timepicker-pickup li:nth-child(10)
appIE.document.querySelector("#timepicker-pickup li:nth-child(10)").Click
The # means className and so selects the 10th li tag within element with className timepicker-pickup
or selector #timepicker-pickup [data-value='09']
appIE.document.querySelector("#timepicker-pickup *[data-value='09']").Click
This is simply an abbreviation where I look for anything with attribute data-value='09' within the className of timepicker-pickup
I tested with the latest which works.
CSS selector:
VBA code:
Public Sub test()
Dim ieApp As InternetExplorer, URL As String
URL = "https://www.europcar.co.za/"
Set ieApp = New InternetExplorer
With ieApp
.Visible = True
.navigate URL
While .Busy Or .readyState < 4: DoEvents: Wend
.document.querySelector("#timepicker-pickup [data-value='09']").Click
Stop '<== Delete me
'.Quit <'== Uncomment me
End With
End Sub
I am trying to select a time from a time picker on a website with the excel VBA code below. While the code loops through it does not select 09. What am I doing wrong? Website code also below.
Set e = appIE.document.getElementbyid("timepicker-pickup").getElementsByTagName("li")
For Each e In e
If e.innerHTML = "09" Then
e.Click
End If
Next
Website code:
<div class="timepicker" id="timepicker-pickup">
<div class="arrow"></div>
<div class="icon close-btn"></div>
<div class="inner-time-picker clearfix">
<div class="section hours">
<div class="up-arrow"><span class="icon arrow"></span></div>
<div class="selectors">
<ul>
<li data-value="00">00</li>
<li data-value="01">01</li>
<li data-value="02">02</li>
<li data-value="03">03</li>
<li data-value="04">04</li>
<li data-value="05">05</li>
<li data-value="06">06</li>
<li data-value="07">07</li>
<li data-value="08" class="selected">08</li>
<li data-value="09">09</li>
<li data-value="10">10</li>
<li data-value="11">11</li>
</ul>
</div>
Try this:
Dim iL as iHTMLElement
Dim e As IHTMLElementCollection
Set e = appIE.document.getElementbyid("timepicker-pickup").getElementsByTagName("li")
For Each iL In e
If il.innerText = "09" Then
iL.Click
End If
Next iL
You can use querySelector of:
appIE.document.querySelector("#timepicker-pickup *[data-value='09']").Click
No loop required.
I have following nested tabs that I want to show in
<div id="1">
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
<div id="a">
<div id="aa1h">
Sub Tab AA1 Header
</div>
<div id="aa1c">
Sub Tab AA1 Content
</div>
<div id="aa2h">
Sub Tab AA2 Header
</div>
<div id="aa2c">
Sub Tab AA2 Content
</div>
</div>
</div>
$('#1').tabs();
Now I want to display three tabs using jQuery tabs or YUI tabview as following:
First tab displays #a (the whole thing)
Second tab displays #aa1c (only content for aa1)
Third tab displays #aa2c (only content for aa2)
I am having some problems with this method, any help is appreciated.
http://jsfiddle.net/RQcwE/1/
See above example for my problem.
UPDATE:
With help from Hanlet Escaño I have achieved what I wanted with couple of blank divs and some jQuery Code..
http://jsfiddle.net/RQcwE/3/
This is an example with sub-tabs that might work for you:
<div id="1">
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
<div id="a">
<ul>
<li>Sub A 1</li>
<li>Sub A 2</li>
</ul>
<div id="aa1">
Sub Tab A content 1
</div>
<div id="aa2">
Sub Tab A content 2
</div>
</div>
<div id="b">
<ul>
<li>Sub B 1</li>
<li>Sub B 2</li>
</ul>
<div id="bb1">
Sub Tab B content 1
</div>
<div id="bb2">
Sub Tab B content 2
</div>
</div>
<div id="c">
<ul>
<li>Sub C 1</li>
<li>Sub C 2</li>
</ul>
<div id="cc1">
Sub Tab C content 1
</div>
<div id="cc2">
Sub Tab C content 2
</div>
</div>
</div>
you just build them like this:
$("#1" ).tabs();
$("#a" ).tabs();
$("#b" ).tabs();
$("#c" ).tabs();
JSFiddle: http://jsfiddle.net/p84kC/
How do I customize a Joomla Menu? I have a MainMenu with 1 row 1 item menu. I want to customize the menu with example style: 1 item 2 row. (each row each text field).
Now:
<ul class="menu">
<li class="item-464">
Home
</li>
<li class="item-444 active deeper parent">
About
</li>
</ul>
To:
<ul class="menu">
<li class="item-464">
<a href="#">
<span style="display:block">Home</span>
<span style="display:block,font-size:10px">Home</span>
</a>
</li>
<li class="item-444 active deeper parent">
<a href="#">
<span style="display:block">About</span>
<span style="display:block,font-size:10px">About</span>
</a>
</li>
</ul>
You just need to assign the items with a Parent Item of the first level in Menu Manager > Main Menu > Edit Menu Item which will create a menu tree as you add sub items.