I have a 5 step checkout and what I am trying to achieve is putting a checkmark in the previous steps after they have been completed.
I tried some javascript but it seems to me that I am using a wrong function
here is the html of the elements:
so basically when you move forward the previous steps will be highlighted as completed
edit: here is the code:
<ul class="checkout-steps steps-5">
<li class="cart">
<a href="https://www.eyerim.sk/checkout/cart/">
<small>Krok</small>
<em>Môj Košík</em>
</a>
</li>
<li class="address">
<a href="https://www.eyerim.sk/stepcheckout/step/address/">
<small>Krok</small>
<em>Adresa</em>
</a>
</li>
<li class="active payment">
<span>
<small>Krok</small>
<em>Spôsob platby</em>
</span>
</li>
<li class="review">
<span>
<small>Krok</small>
<em>Spolu</em>
</span>
</li>
<li class="success">
<span>
<small>Krok</small>
<em>HOTOVO</em>
</span>
</li>
</ul>
and here is the code of the currently
active step
<li class="active payment">
<span>
<small>Krok</small>
<em>Spôsob platby</em>
</span>
</li>
Icon change on click in JS, change the icon as per requirement.
JS
function change (iconID){
if(document.getElementById(iconID).className=="fa fa-chevron-up"){
document.getElementById(iconID).className = "fa fa-chevron-down";
}else{
document.getElementById(iconID).className = "fa fa-chevron-up";
}
}
HTML
<i id="icon1" onclick="change('icon1')" class="fa fa-chevron-up" aria hidden="true">
Related
I have Category list sidebar and I want to make it sortable up and down, also remove one list of them with bottom.
Here is image:
example
HTML CODE:
<div class="side-nav-categories">
<div class="title"><strong>Category</strong></div>
<ul id="category-tabs">
<li> Web Applications<i class="fa fa-minus"></i>
<ul class="sub-category-tabs">
<li>HTML</li>
<li>CSS</li>
<li>SCSS</li>
</ul>
</li>
</ul>
<ul id="category-tabs">
<li>Script<i class="fa fa-minus"></i>
<ul class="sub-category-tabs">
<li>Javascript</li>
<li>jQuery</li>
<li>Angular JS</li>
</ul>
</li>
</ul>
<ul id="category-tabs">
<li>Server Script<i class="fa fa-minus"></i>
<ul class="sub-category-tabs">
<li>C#</li>
<li>PHP</li>
<li>ASP.Net</li>
</ul>
</li>
</ul>
</div>
You can grab the element from its id:
document.getElementById(**yourId**).innerHTML = 'Realtime';
The above line just changed the value inside an element in realtime, using JavaScript. Keep in mind though, that you don't need to use innerHTML, you can use any JavaScript attribute that you want.
Here is the code of the sidebar :
$('.sidebar-nav-menu,sidebar-nav-submenu').click(function(){
$(this).toggleClass('open');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidebar-alt">
<div class="sidebar-content">
<ul class="sidebar-nav">
<li>
<i class="fa fa-dashboard sidebar-nav-icon"></i><span class="sidebar-nav-mini-hide">Dashboard</span>
</li>
<li>
<i class="fa fa-chevron-left sidebar-nav-indicator sidebar-nav-mini-hide"></i><i class="fa fa-cogs sidebar-nav-icon"></i><span class="sidebar-nav-mini-hide">Advanced Settings</span>
<ul>
<li>
Site Settings
</li>
<li>
Appearance
</li>
<li>
Login & Registration Settings
</li>
<li>
Session Settings
</li>
<li>
Mailer Settings
</li>
</ul>
</li>
<li class="active">
<i class="fa fa-chevron-left sidebar-nav-indicator sidebar-nav-mini-hide"></i><i class="fa fa-rocket sidebar-nav-icon"></i><span class="sidebar-nav-mini-hide">User Interface</span>
<ul>
<li>
Widgets
</li>
<li>
<i class="fa fa-chevron-left sidebar-nav-indicator"></i>Elements
<ul>
<li>
Blocks & Grid
</li>
<li>
Typography
</li>
<li>
Buttons & Dropdowns
</li>
<li>
Navigation & More
</li>
<li>
Progress & Loading
</li>
<li>
Tables
</li>
</ul>
</li>
<li>
<i class="fa fa-chevron-left sidebar-nav-indicator"></i>Forms
<ul>
<li>
Components
</li>
<li>
Wizard
</li>
<li>
Validation
</li>
</ul>
</li>
<li class="active">
<i class="fa fa-chevron-left sidebar-nav-indicator"></i>Icon Packs
<ul>
<li>
Font Awesome
</li>
<li>
Glyphicons Pro
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
WHAT I WANT
On clicking the a tag having class 'sidebar-nav-menu' it adds the 'open' class to the a tag and shows the first level of ul.
On clicking the a tag having class 'sidebar-nav-submenu' it adds the 'open' class to the a tag and shows the second level of ul.
Now i want to close all other second level 'sidebar-nav-submenu' if i open one second level 'sidebar-nav-submenu'.
Also if i open 1st level 'sidebar-nav-menu' then it should hide all other 'sidebar-nav-menu'
Any idea?
If I understand correctly, you can check to see if the (sub)menu is already open and if it is not then remove the class open from all other (sub)menus.
Edited the click submenu
$('.sidebar-nav-menu,.sidebar-nav-submenu').click(function() {
if (!$(this).hasClass('open')) {
if ($(this).hasClass('sidebar-nav-menu')) {
$('.sidebar-nav .sidebar-nav-menu .sidebar-nav-submenu.open').removeClass('open');
$('.sidebar-nav .sidebar-nav-menu.open').removeClass('open');
} else if ($(this).hasClass('sidebar-nav-submenu')) {
$('.sidebar-nav .sidebar-nav-submenu.open').removeClass('open');
}
}
$(this).toggleClass('open');
});
Let me know if this helps.
My sidebar menu has the ability to expand and reveal the subsections of a section as shown below. The open section has the open active class and the clicked link has the active class.
All of my links has a different #url.So this will determine the classes.
How can I automatically place the open active and active classes based on the opened link? I can also use PHP.
<ul class="menu-items scroll-content">
<li class="open active">
<a href="javascript:;"><span class="title">first section</span>
<span class="open arrow"></span></a>
<span class="icon-thumbnail">LV</span>
<ul class="sub-menu">
<li class="active">
First Section 1
<span class="icon-thumbnail">au</span>
</li>
<li class="">
First Section 2
<span class="icon-thumbnail">ou</span>
</li>
</ul>
</li>
<li class="">
<a href="javascript:;"><span class="title">Second section</span>
<span class="arrow"></span></a>
<span class="icon-thumbnail">LV</span>
<ul class="sub-menu">
<li class="">
Second Section 1
<span class="icon-thumbnail">au</span>
</li>
</ul>
</li>
</ul>
Try like this:
HTML:
<ul>
<li class="">
<a href="javascript:;"><span class="title">first section</span>
<ul class="sub-menu">
<li class="">
First Section 1
<span class="icon-thumbnail">au</span>
</li>
<li class="">
First Section 2
<span class="icon-thumbnail">ou</span>
</li>
</ul>
</li>
<li class="">
<a href="javascript:;"><span class="title">Second section</span>
<ul class="sub-menu">
<li class="">
Second Section 1
<span class="icon-thumbnail">au</span>
</li>
</ul>
</li>
</ul>
JS:
var href = location.pathname+location.hash;
$('.sub-menu > li > a').each(function() {
if ($(this).attr("href") == href) {
$(this).parent('li').addClass('active');
$(this).parent().parent().parent('li').addClass('open active');
}
});
I am writing my automated test scripts using selenium-webdriver, phantomJS and mocha.
My script file is javascript file by nature.
I want to wait till an element(<a>) becomes completely visible. After it becomes visible, the element will be clicked.
Let me explain in details:
There are some menus and submenus. The menu is collapsible in nature. When I click on a menu, then its corresponding submenus are displayed.
My following script first iterates(And clicks) through the menu and then iterates and displays the submenu status.
for(var iMajor = 2; iMajor <= majorLinkLast ; iMajor++)
{
majorMenuXPath = "//ul[contains(#id, 'side-menu')]/li["+iMajor+"]/a";
if(iMajor != 2)
{
driver.findElement(By.xpath(majorMenuXPath)).click();
driver.manage().timeouts().implicitlyWait(30 * 10000);
}
for(var iMinor = 1; iMinor <= minorSize[iMajor] ; iMinor++)
{
minorMenuXPath = "//ul[contains(#id, 'side-menu')]/li["+iMajor+"]/ul/li["+iMinor+"]/a";
driver.findElement(By.xpath(minorMenuXPath)).isDisplayed().then(function(elem){
console.log(elem);
});
}
The above code displays the status of the submenus like:
true
true
true
true
true
true
true
false
true
false
true
false
true
false
false
true
true
true
true
true
true
true
true
true
true
I have used implicit method for making the driver wait. But still some submenus are displayed as false(means they are not visible). They should have been visible after the parent menu got clicked.
I need some help regarding the following:
How can I wait till the submenu is visible? After each submenu
becomes visible, I need to perform some action.
Or, how can I make the submenu visible after a particular time.
Here is my HTML:
<ul id="side-menu" class="nav">
<li class="nav-header">
<img class="logo" alt="Track Revenue" src="/images/3c4939d.png">
<div class="logo-element"> TR </div>
</li>
<li class="">
<a href="#home">
<i class="fa fa-bolt"></i>
<span class="nav-label">Tr Admin Menu</span>
<span class="fa arrow"></span>
</a>
<ul class="nav nav-second-level collapse" aria-expanded="false" style="height: 0px;">
<li>
All Users
</li>
<li>
All Companies
</li>
<li>
Devices
</li>
<li>
Send Email
</li>
<li>
Impersonate User
</li>
<li>
Test Encryption
</li>
</ul>
</li>
<li class="">
<a href="#home">
<i class="fa fa-th-large"></i>
<span class="nav-label">Campaigns</span>
<span class="fa arrow"></span>
</a>
<ul class="nav nav-second-level collapse" aria-expanded="false" style="height: 0px;">
<li>
Overview
</li>
<li>
CPC Update
</li>
<li>
SubID Update
</li>
<li>
Add Campaign
</li>
</ul>
</li>
<li>
<a href="#home">
<i class="fa fa-bar-chart-o"></i>
<span class="nav-label">Stats</span>
<span class="fa arrow"></span>
</a>
<ul class="nav nav-second-level collapse">
<li>
Campaign Stats
</li>
<li>
Week / Day Parting Stats
</li>
</ul>
</li>
<li>
<a href="#home">
<i class="fa fa-files-o"></i>
<span class="nav-label">Reports</span>
<span class="fa arrow"></span>
</a>
<ul class="nav nav-second-level collapse">
<li>
Custom Data Reports
</li>
<li>
SubID Analysis Report
</li>
<li>
Scheduled Reports
</li>
</ul>
</li>
<li>
<a href="#home">
<i class="fa fa-cog"></i>
<span class="nav-label">Settings</span>
<span class="fa arrow"></span>
</a>
<ul class="nav nav-second-level collapse">
<li>
Account
</li>
<li>
Plan Management
</li>
<li>
Campaign Groups
</li>
<li>
Affiliate Networks
</li>
<li>
Traffic Source
</li>
<li>
Manage Users
</li>
<li>
Manage Company
</li>
<li>
Blocking & Filter Rules
</li>
<li>
Domains
</li>
<li>
Campaign Maintenance
</li>
</ul>
</li>
</ul>
Note:
I am new to selenium. I need javascript procedure to solve the problem. I have no knowledge in JAVA or Python or C#
Can somebody help me please?
It is invisible for a reason, isn't it? Automate whatever a normal user would do to make that element visible. Sometimes sections of a page are hidden, because it there are multiple "views" on a single page. A user can usually navigate between those views by clicking on something or filling out forms. You have to automate the same interaction a user would do.
The following snippet helped the elements to get displayed.
minorMenuXPath = "//ul[contains(#id, 'side-menu')]/li["+iMajor+"]/ul/li["+iMinor+"]/a";
//Following snippet is stated for making the driver wait till the element is visble.
driver.wait(function()
{
return driver.isElementPresent(By.xpath(minorMenuXPath));
}, 20*1000);
driver.findElement(By.xpath(minorMenuXPath)).then(function(elem)
{
elem.isDisplayed().then(function(stat){
console.log(stat);
});
});
I have an unordered list with various tab items:
<nav class="navigation-area">
<ul>
<li>
<a href="#home"><i class="fa fa-home"></i>
Home</a>
</li>
<li>
<i class="fa fa-pencil"></i>Blog
</li>
<li>
<a href="#profile"><i class="fa fa-user"></i>
Profile</a>
</li>
<li>
<a href="#portfolio"><i class=
"fa fa-briefcase"></i> Portfolio</a>
</li>
<li>
<a href="#resume"><i class=
"fa fa-file-text"></i> Resume</a>
</li>
<li>
<a href="#contact"><i class=
"fa fa-envelope"></i> Contact</a>
</li>
</ul>
</nav>
I am trying to get the "Blog" element to link to a site instead of be used as a tab. however the easytabs is breaking the page as it is unable to find the referenced element in the code. How can I skip including this element in the easy tabs? The way I am initializing easytabs is like so:
$('#tab-container').easytabs({
updateHash: false
});
http://jsfiddle.net/6dqc6r4j/1/
the element LI in which is url change in SPAN tag
<span>
<i class="fa fa-pencil"></i>Blog
</span>