Posts

Showing posts with the label html

jQuery Validation rule based on select value

Image
Clash Royale CLAN TAG #URR8PPP jQuery Validation rule based on select value I have the following form. <form id="myform"> <select id="country" name="country"> <option value="US">United States</option> <option value="CA">Canada</option> <option value="AU">Australia</option> <option value="NZ">New Zealand</option> <option value="IE">Ireland</option> </select> <input type="text" name="zip_code" id="zip-code"> <input type="submit"> </form> I want the zip_code field to contain the digits: true rule when the selected country is United States . This is what I have tried based on this code. zip_code digits: true United States $("$myform").validate({ rules:{ zip_code: { required: true, ...

Flexbox fill available space vertically

Image
Clash Royale CLAN TAG #URR8PPP Flexbox fill available space vertically Now in a flexbox row I can write <div layout="row"> <div>some content</div> <div flex></div> <!-- fills/grows available space --> <div>another content</div> </div> I would like to achieve the same but vertically, like on this picture Currently the problem is that the div which would need to grow doesn't have any height so the two contents are below each other. I want my second content to be at the bottom of the parent container which have a fix height! I know I could solve this by positioning the second content absolute and bottom: 0; but can I achieve this with flexbox? bottom: 0; 2 Answers 2 So you can try this: flex-direction: column for the flex container. flex-direction: column flex: 1 for the element that needs to fill the remaining space. flex: 1 ...

How to SendKeys to input element that is created ad hoc when clicking in div element parent?

Image
Clash Royale CLAN TAG #URR8PPP How to SendKeys to input element that is created ad hoc when clicking in div element parent? I am stuck in this problem: our webpage has a dynamic table that will load values (students' marks) on a div element. If we click on said div , a new child element input will be appended to the div and we should be able to input a new mark using SendKeys method. However, when I try to SendKeys, a StaleElementReferenceException appears. div div input div SendKeys StaleElementReferenceException Here is the element when the input is added (had to use a breakpoint as the element disappears as soon as the div element loses focus): input div <tr> <td class="indice">1</td> <td id="accion-1-alumno-0" data-tooltip="" title="Bustos, Guido" class="has-tip titulo">Bustos, Guido</td> <td data-tooltip="" title="1º ESA" class="has-tip titulo"...

How can you increment a number on scroll without having the scrollbar(actually scrolling)?

Image
Clash Royale CLAN TAG #URR8PPP How can you increment a number on scroll without having the scrollbar(actually scrolling)? So, imagine 2 sections/divs (both with width: 100% and height: 100% ). I only see the first section, the second section is to the right side of the screen, unable to be seen(overflow: hidden; on the body). width: 100% height: 100% Now, when I scroll, I want that second section to appear gradually, with each pixel I'm "scrolling". But, the problem here is, I can't actually scroll, thus properties such as this: window.pageYOffset , element.getBoundingClientRect() do not work. Basically, I want to increment a number each time I do a scrolling gesture, so I can assign that number to the second section( to modify its left property so it can come in the viewport ). And I don't know how to increment the number. window.pageYOffset element.getBoundingClientRect() This is a recreation of what I'm trying to accomplish: var secondSection = document.g...

Bootstrap 4 Modal - Menu

Image
Clash Royale CLAN TAG #URR8PPP Bootstrap 4 Modal - Menu a { color: inherit; text-decoration: inherit; } a:hover { color: inherit; text-decoration: inherit; } body { font-family: 'Roboto Condensed', sans-serif; } /* ---------------------------------------------------- */ /* navigation */ .navbar-toggler:focus, .navbar-toggler:active { outline: none; border: none; box-shadow: none; } .menu { padding-left: 10px; } .fa-bars, .menu { color: #006699 !important; } .navbar-text { color: gray; } .mainlink { font-size: 1.75em; line-height: 1.25em; font-weight: 400; } .sublink { font-size: 1em; line-height: 1.15em; } .navbar-toggle { margin-left: 15px; margin-right: 0; } .modal-nav-content { /* width: 100%; */ height: auto; } .modal-nav-body { margin-top: 10em; } .modal-nav-body p { color: white; margin: 0; padding: 0; padding-top: 6px; padding-bottom: 6px; /* width: 100%; */ } .modal-nav-body h5 { color: white; line-...

placing of image and text at the bottom of the div

Image
Clash Royale CLAN TAG #URR8PPP placing of image and text at the bottom of the div I need to place an image and text at the bottom of the div which contains text. After following various posts about this question I have come up with this Fiddle HTML <div class="container"> <div class="row"> <div id="col-lg-4" class="col-lg-4"> <div class="cta-text"> <h3>Heading text that Can span 2 or 3 lines</h3> </div> <p><strong>Hypertext Markup Language (HTML) is the standard markup language for creating web pages and web applications. With Cascading Style Sheets (CSS) and JavaScript, it forms a triad of cornerstone technologies for the World Wide Web</strong></p> <div class="cta-text"> <table> <tr> <td><img src="~/img/icon2.png" /></td> <td valign=...

Editable field saved to database

Image
Clash Royale CLAN TAG #URR8PPP Editable field saved to database I've got this editable field. I need it to save the new data and store it in the database. HTML: <ng-container *ngIf="groupedVolumes"> <ng-container *ngFor="let model of groupKeys() | slice:-3" > <tr> <th class="model">{{ carValues(model)[0].model }}</th> <ng-container *ngFor="let value of carValues(model)"> <td contenteditable='true' class="data"> {{ value.scheduledVolume }} </td> </ng-container> </tr> </ng-container> </ng-container> The HTML data sh...

Restrict user input in HTML

Image
Clash Royale CLAN TAG #URR8PPP Restrict user input in HTML Hello guys I want to restrict user from entering date manually in an input field in HTML. I want user to select date from the date-picker provided to avoid input date entry Here is the my code in which I've used date-picker. <!DOCTYPE html> <html class="html"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.4/themes/redmond/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"> </script> <script> $(function() { $("#datepicker").datepicker( { dateFormat:'dd-mm-yy', changeMonth: true, ...

xpath match first and last child

Image
Clash Royale CLAN TAG #URR8PPP xpath match first and last child Trying to determine if any P tag text's is entirely within strong/B tags // Match (unacceptable, flag to user): <p><strong>Any text and <span>maybe</span> other <em>tags</em></strong></p> // Don't match (acceptable): <p>Any text and <strong>maybe</strong> other <em>tags</em></p> You can compare string(//p) and string(//p/strong) – gangabass Jul 23 at 2:36 string(//p) string(//p/strong) 4 Answers 4 p //p strong //p[.//strong] //p[.//strong[normalize-space(.) != ""]] and no text node descendant with content that has no strong ancestor node: strong //p[ .//strong[normalize-space(.) != ...

Read Description list in selenium python

Image
Clash Royale CLAN TAG #URR8PPP Read Description list in selenium python How can I read text of <dd> tag which has <dt> like Commodity code. <dd> <dt> `<dl class="dl"> <dt>Trading Screen Product Name</dt> <dd>Biodiesel Futures (balmo)</dd> <dt>Trading Screen Hub Name</dt> <dd>Soybean Oil Pen 1st Line</dd> <dt>Commodity Code</dt> <dd><div>S25-S2Z</div></dd> <dt>Contract Size</dt> <dd><div>100 metric tonnes (220,462 pounds)</div></dd> </dl>` from selenium import webdriver driver = webdriver.Chrome("C:\Python36-32\selenium\webdriver\chromedriver.exe") link_list = ["http://www.theice.com/products/31500922","http://www.theice.com/products/243"] driver.maximize_window() for link in link_list: driver.get(link) desc_list = driver...

Jquery hide / show div but to keep toggle link from “hiding” too

Image
Clash Royale CLAN TAG #URR8PPP Jquery hide / show div but to keep toggle link from “hiding” too I've just posted a question on stackoverflow about a hide/show issue I was having but that's been resolved, though this is a follow up on that as I have come across another issue. Ok, so I've got a sticky footer nav and there is a link just above the nav (also "sticky") that says "Toggle menu" ... when I click to hide the menu, the link that I've just clicked also hides. So basically there is no way to make the menu visible again cos the toggle button has also disappeared! Javascript: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $("#stickyfooter").show(); $(".show_hide").show(); $('.show_hide').click(function(){ $("#stickyfooter").slideToggle...

How can I select ID and get a value of it in input data in this row?

Image
Clash Royale CLAN TAG #URR8PPP How can I select ID and get a value of it in input data in this row? here is what I want to do. When I click the modify button, I wish div that contains role of 'ucomment' changes into in-line input form with its original value typed. But I can't even start with selecting the div. I thought the code here would work and could select what I aimed, but it didn't. $(this).closest("div[role='ucomment']") How can I select the div here? <ul id="comments" class="list-group"> <script id="commentTemplate" type="text/x-handlebars-template"> {{#each list}} <li class="list-group-item d-flex justify-content-between align-items-center"> <div class="row w-100"> <div class="col-2" name="uid">{{uid}}</div> <div class="col-8" role="ucomment" name="ucomment...