I am trying to use Semantic UI Step (https://semantic-ui.com/elements/step.html) in my app, but can't figure out how to use it.
I understand the UI aspect of it, but can't figure out the following:
How can I change the <a class="active step"> whenever a user clicks on a step, and make other steps inactive?
How do I display different content in <div class="ui attached segment"> everytime a step is clicked?
How do I disable other steps while something is being processed in one of the steps?
I am new to semantic and web in general. I was thinking to use jQuery to get these components and update everything through that, but I am not sure if that's a good approach?
Can someone please suggest something with a code snippet? Thank you for your help!
This is the UI part of it from Semantic UI.
<div class="ui three top attached steps">
<a class="step">
<i class="truck icon"></i>
<div class="content">
<div class="title">Shipping</div>
<div class="description">Choose your shipping options</div>
</div>
</a>
<a class="active step">
<i class="payment icon"></i>
<div class="content">
<div class="title">Billing</div>
<div class="description">Enter billing information</div>
</div>
</a>
<a class="disabled step">
<i class="info icon"></i>
<div class="content">
<div class="title">Confirm Order</div>
<div class="description">Verify order details</div>
</div>
</a>
</div>
<div class="ui attached segment">
<p></p>
</div>
If you and an id to each step like stepShip, stepBill and stepConfirm
<a id="stepShip" class="step">
A function like this
var setStep = function(id){
$('#'+id).addClass('active').nextAll().addClass('disabled').removeClass('active');
};
Can then be called at start up like this
setStep("stepConfirm");
or attached to the steps like this
$('.step').click(function(){setStep($(this).attr('id'));})
Related
I am making a single page site that has containers which act as stops from the navigation links at the top of the screen which you can read that particular containers information. I have a button to Read More and here is the problem.
I am working on a services page that has a overview of services but I am trying to get a button that the user can click to learn more but I would like that services.html file to load into that container without leaving the current location on the page ie the new information would slide in from the right so the user can read and once done they can close the loaded information and still be where they were currently at in the one page site. I hope that makes sense? Thank you for your help!
I have tried calling the page via a <li> tag and a href but I get information cant be loaded.
<section class="single-items center-block parallax" id="corporate" style="background-color: cadetblue">
<div class="container">
<div class="row">
<div class="col-md-5 col-sm-8 col-xs-11">
<div class="area-heading text-start wow fadeInLeft">
<h3 class="area-title text-capitalize alt-font text-white mb-2 font-weight-100">
<a data-fancybox="group-three" href="images/single-portfolio3.jpg">Complete <strong>Services</strong></a>
</h3>
<p class="text-white">For a full list click below</p>
<a class="btn btn-transparent-white btn-rounded btn-large mt-4" data-fancybox="group-three" href="images/single-portfolio3.jpg">View More</a>
</div>
</div>
<div class="col-md-7 col-sm-4 col-xs-1"></div>
</div>
</div>
<div class="hidden">
<a data-fancybox="group-three" data-thumb="images/gallery-thumb1.jpg" href="images/gallery-thumb1.jpg"></a>
<a data-fancybox="group-three" data-thumb="images/gallery-thumb2.jpg" href="images/gallery-thumb2.jpg"></a>
<a data-fancybox="group-three" data-thumb="images/gallery-thumb3.jpg" href="images/gallery-thumb3.jpg"></a>
<a data-fancybox="group-three" data-thumb="images/gallery-thumb4.jpg" href="images/gallery-thumb4.jpg"></a>
<a data-fancybox="group-three" data-thumb="images/gallery-thumb5.jpg" href="images/gallery-thumb5.jpg"></a>
</div>
Currently I am trying to scrape some information off the web, but I kinda ran into a dead end.
So in order to get the data I want, I need to select the right currency off of a list. I click the link to change the currency and via java script the site gets another chunk of html that contains the list and opens an overlay, where I can select the right currency.
I tried to locate the div in which the list is stored:
driver.find_elements_by_xpath("//html/body/div[19]/div[2]/div/div/div[2]/form/div[2]")
I tried the list itself but I wasnt able to locate the element.
Then I wanted to see if something is found and using the following:
len(driver.find_elements_by_xpath("//html/body/div[19]/div[2]/div/div/div[2]/form/div[2]"))
the answer 0 was provided, so my webdriver wasnt able to locate the newly added chunk of html.
This is the newly added html:
<div class="module">
<div class="modal_mask" style="opacity: 0.5;"/>
<div class="modal_scroller">
<div class="modal_container" style="margin-top: 164.5px;">
<div class="modal_ship" style="margin: 0px auto;">
<div class="modal_title">
Address Currency
<i onclick="modal_remove();">×</i>
</div>
<div class="modal_ship_con">
<h3>Please select your shipping destination & currency</h3>
<p>Price may differ based on your Shipping destination.</p>
<form action="#" method="get">
<input value="81" name="country_sel" type="hidden"/>
<input value="USD" name="currency_sel" type="hidden"/>
<div class="currency">
<b>Currency:</b>
<div class="currency_list">
<div class="active">
<i class="arrow_a">
<i/>
</i>
<span>
USD
<u>US$</u>
</span>
</div>
<div class="currency_box" style="display: none;">
<ul>
<li sel="USD">
USD
<u>US$</u>
</li>
<li sel="EUR">
EUR
<u>€</u>
</li>
<li sel="GBP">
GBP
<u>£</u>
</li>
<li sel="AUD">
AUD
<u>AU$</u>
</li>
<li sel="CAD">
CAD
<u>CA$</u>
</li>
</ul>
</div>
</div>
</div>
<div class="submit">
<input onclick="saveShip(0);" value="Save" type="button"/>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
And this where I have to click:
<div class="active">
<i class="arrow_a">
<i/>
</i>
<span>
USD
<u>US$</u>
</span>
</div>
So now my question: is there any possibility to get to the newly added html code? Is there something like "refresh webdriver"?
Regards
I think you can simply use time.sleep() before trying to capture the button you want to click.
Just use this:
import time
time.sleep(2) #you can keep this behind the code for clicking the button
This will make selenium wait for sometime so that the code can load and then only selenium will click it
you can keep any no. of seconds instead of 2,I just kept it for an example
I have my angular directive, and that is some div's with around it an but when I click on the div it doesn't reload my page.
Am I doing something wrong?
This is the full directive
<div class="col s12 m6 l4">
<div class="video-card">
<a href="#/videos/detail/{{video.Id}}" target="_self">
<div class="card-image">
<img ng-src="{{video.ThumbnailUrl?video.ThumbnailUrl:'img/images.png'}}" src="" />
</div>
</a>
<a href="#/videos/detail/{{video.Id}}" target="_self">
<div class="card-content">
<div class="card-title-box">
<a href="#/videos/detail/{{video.Id}}">
<span class="card-title grey-text text-darken-4">
{{video.Title}}
</span>
</a>
</div>
<div class="card-action">
<div class="more-info">
<span class="group grey-text">
{{ video.Author}}
</span>
<a href="#/groups/detail/{{playlist.Id}}/List/{{video.Id}}" ng-if="playlist">
<i class="mdi-av-play-arrow right tooltipped black-text small "
data-position="top" data-delay="0" data-tooltip="{{'video.playFromhere' | translate}}"></i>
</a>
</div>
</div>
</div>
</a>
</div>
</div>
I need to reload the page due to a bug in a plugin I'm using on the detail page, and nor the author of that plugin nor I can figure out what is happening, and the only way to get it work is to reload the page when going to a video.
You can reload a page in Javascript using window.location.reload()
Target only sets which frame the link should act on. So if you want the document to reload use
window.location.reload();
I would like to implement links in nested submenus but it doesn't seem willing to work.
<div class="ui menu">
<div class="menu">
<div class="ui pointing dropdown link item">
<i class="dropdown icon"></i>
<span class="text">Menu</span>
<div class="menu">
<div class="item">
<i class="dropdown icon"></i>
<span class="text">Sub Menu</span>
<div class="menu">
<div class="header">Links</div>
<div class="item">Google</div>
<div class="item">StackOverflow</div>
</div>
</div>
</div>
</div>
</div>
</div>
The links in the submenu will not work (though links in the menu will).
Is this a bug or a "normal" feature. Has anyone find a way around this ?
Thanks a lot.
You don't need the div in the leaf menu item - try this under the links sub menu
<a class="item" href="http://www.google.com">Google</a>
I am trying to create following UI in bootstrap with responsive menu, can anyone provide me guide line how I can achieve this. Both top and side menu should be responsive.
Following is URL what I am trying to create.
In assuming that you know the basics of web design, I will give you the short explanation how the Bootstrap works.
Bootstrap is HTML, CSS and JS framework that handles the responsiveness AUTOMATICALLY. You must only include the libraries correctly and know which Bootstrap css-classes have you too include into your HTML tags.
For example, if you want to achieve the design part for search as in your drawing, you must do something like here in Bootstrap documentation
or for navbar.
I will give you quick hint for components structure of your problem (of course, there is a lot work in css :) ):
<!--The header-->
<div class="col-lg-12">
<div class="col-lg-12">
<div class="col-lg-3"> <!--Logo or whatever in top left side-->
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="../Content/img/chrome_logo.jpeg" />
</a>
</div>
</div>
<div class="6"></div>
<div class="col-lg-3" style="float:right"> <!--Search input-->
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
</div>
<div class="col-lg-12" style="margin-left:40%" ><!-- Menu-->
<ul class="nav nav-pills">
<li role="presentation" class="active">Menu1</li>
<li role="presentation">Menu2</li>
<li role="presentation">Menu3</li>
<li role="presentation">Menu4</li>
</ul>
</div>
</div>
<div class="col-lg-12">
<div class="col-lg-2">
//HTML PART FOR SIDEBAR
</div>
<div class="col-lg-10">
//HTML PART FOR MAIN CONTENT
</div>
</div>
You must wisely include exact col-lg, col-md, col-sm and col-xs classes to reach the responsiveness for each browser sizes.
One of the most important things also is to learn Boostrap grid system. This is unavoidable
for components organization.
Just practice as in documentation, learn the Bootstrap css-classes and organisations carefully and after are while, you will be able to design complexer stuffs.
I hope I theoretically covered everything what you need to design with Boostrap framework.