Suppose, I have 3 columns. I want to add different type content into the columns. Then I want to scroll single columns without scrolling others column (As like Facebook)? How can I do it?
If you have 3 containers next to each other- it is possible. If table with 3 columns- I think not possible without rewriting.
So for 3 separate divs- make them inline-block (prevent next line) and add width. Set the overflow to auto. You can also add the height.
Ugly snippet follows.
#left {
width:30vw;
height:100vh;
display:inline-block;
overflow:auto;
}
#center {
width:30vw;
height:100vh;
display:inline-block;
overflow:auto;
}
#right {
width:30vw;
height:100vh;
display:inline-block;
overflow:auto;
}
<div id="left">
left <br>left <br>left <br>left <br>more left <br>
left <br>left <br>left <br>left <br>more left <br>
left <br>left <br>left <br>left <br>more left <br>
left <br>left <br>left <br>left <br>more left <br>
left <br>left <br>left <br>left <br>more left <br>
left <br>left <br>left <br>left <br>more left <br>
</div>
<div id="center">
center </br>center </br>center </br>center </br>center </br>center </br>center </br>
more center </br>center </br>center </br>center </br>center </br>center </br>center </br>
some more center </br>center </br>center </br>
center </br>center </br>center </br>center </br>center </br>center </br>center </br>
more center </br>center </br>center </br>center </br>center </br>center </br>center </br>
some more center </br>center </br>center </br>
center </br>center </br>center </br>center </br>center </br>center </br>center </br>
more center </br>center </br>center </br>center </br>center </br>center </br>center </br>
some more center </br>center </br>center </br>
</div>
<div id="right">
right <br>right <br>right <br>more right <br>right <br>right <br>
right <br>more right <br>right <br>right <br>right <br>
more right <br>right <br>right <br>right <br>more right <br>
right <br>right <br>right <br>more right <br>right <br>
right <br>right <br>more right <br>right <br>right <br>
more right <br>right <br>right <br>right <br>more right <br>
right <br>right <br>right <br>more right <br>right <br>
right <br>right <br>more right <br>right <br>
right <br>right <br>more right <br>
</div>
Related
I want to study crawling with selenium and beautiful soup.
I did successfully accessing the website and logged in.
And I tried to get some value by text but it doesn't work.
This is the code that I made.
all3=soup.find("td",{"class": " text-right txt-r"}).text
print(all3)
all4=soup.find("td",{"class": " text-right txt-r"}).text
print(all4)
This is the website coding as follows. I want to get the value from 1st to 4th values by text. However, td class name is same, so I don't know how to get parsing the date with soup.
<td class=" text-right txt-r">7,730</td>
<td class=" text-right txt-r">33,500</td>
<td class=" text-right txt-r">72.8</td>
<td class=" text-right txt-r">88</td>
<td class=" text-right txt-r">0.72%</td>
<td class=" text-right txt-r">0.22%</td>
<td class=" text-center txt-c">높음</td>
<td class=" text-right txt-r">15</td>
I want to make the result as follows.
Print(all3)
Print(all4)
Print(all5)
Print(all6)
7,730, 33,500, 72.8, 88
First, sorry for my bad english. I'll try to explain the best i can.
So, i have problem with mobile's keyboards. When i try to search something on my search-bar, the virtual keyboard appears and destroy my design. Here you can see my problem :
Normal
Bug
On the first screen, you can see " Barre de recherche " means " SearchBar" and " Contenu du site " means " Website content "
On the second screen, as you can see, the content hide my searchbar, only when keyboard is open...
I don't really know how to solve this.
<div class="row bgBlanc clrNoir hidden-lg hidden-md search-container hidden-search-container">
<div class="col-24 flex flexRow flexAlignCenter-sm flexJustifySpace-sm">
<form class="row search-bar searchFormMob fullW" name="quickFind" action='advanced_search_result.php' method="get" autocomplete="off">
<input class="tup col-offset-1 col-18 col-sm-20 keywords fs40" type="search" name="keywords" placeholder="<?php echo TEXT_SEARCH_PEF_KEYWORDS; ?>" style="min-height:10rem; width:100%;border-style:none;opacity: 0.4;">
<!-- <button class="submitBtn-search col-2 ffwi pt15 fs60" type="submit"></button> -->
<button class="submitBtn-search col-2 col-sm-2 ffwi pt15 fs60" type="submit">
<svg width="44px" height="44px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Icones-nav-2" transform="translate(-805.000000, -25.000000)" fill-rule="nonzero" fill="#000000">
<g id="ic_search_black_24px-copy" transform="translate(805.000000, 25.000000)">
<path d="XXXXXXXXXXXXX" id="Shape"></path>
</g>
</g>
</g>
</svg>
</button>
</form>
</div>
</div>
We are in the process of updating our MathJax rendering option from HTML-CSS to Common HTML. Using HTML-CSS we had no problems displaying our Maths content however with the new Common HTML configuration we now have character display issues in iOS and Android phones. I have attached an example of the code. Can anyone point out a potential problem in the MML. The problem can bee seen on this CodePen using iPhone 6 or Android http://codepen.io/Terminalpunk/pen/pyxPWV
Here is an example image of the problem
<!DOCTYPE html>
<html lang="en" xmlns:mml="http://www.w3.org/1998/Math/MathML">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
</head>
<body>
<h2>Working in Android and iOS</h2>
<p>
<span data-equation-construct="true" class="math-equation-construct">
<span data-equation-mathml="true" class="math-equation-mathml">
<mml:math xmlns:mml="http://www.w3.org/1998/Math/MathML">
<msubsup xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<mover accent="true">
<mo stretchy="true">ˆ</mo>
<mrow>
<mi>γ</mi>
</mrow>
</mover>
</mrow>
<mrow>
<mi mathvariant="double-struck">G</mi>
<mo>+</mo>
<mi mathvariant="double-struck">B</mi>
</mrow>
<mrow>
<mtext>GLM</mtext>
</mrow>
</msubsup>
</mml:math>
</span>
</span>.
</p>
<p>
<span data-equation-construct="true" class="math-equation-construct">
<span data-equation-mathml="true" class="math-equation-mathml">
<mml:math xmlns:mml="http://www.w3.org/1998/Math/MathML">
<msubsup xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/1998/Math/MathML">
<mover accent="true">
<mrow>
<mrow>
<mi mathvariant="double-struck">ℙ</mi>
</mrow>
</mrow>
<mo stretchy="true">ˆ</mo>
</mover>
<mi>i</mi>
<mrow>
<mspace width="thinmathspace"></mspace>
<mrow></mrow>
<mrow>
<mi mathvariant="double-struck">𝔹</mi>
</mrow>
<mrow></mrow>
</mrow>
</msubsup>
<mo xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/1998/Math/MathML">=</mo>
<msubsup xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<mover accent="true">
<mi>p</mi>
<mo stretchy="true">ˆ</mo>
</mover>
</mrow>
<mi>i</mi>
<mrow>
<mspace width="thinmathspace"></mspace>
<mrow></mrow>
<mrow>
<mi mathvariant="double-struck">𝔹</mi>
</mrow>
<mrow></mrow>
</mrow>
</msubsup>
<msub xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<mrow>
<mi mathvariant="double-struck">ℙ</mi>
</mrow>
</mrow>
<mn>0</mn>
</msub>
</mml:math>
</span>
</span> and
<span data-equation-construct="true" class="math-equation-construct">
<span data-equation-mathml="true" class="math-equation-mathml">
<mml:math xmlns:mml="http://www.w3.org/1998/Math/MathML">
<msubsup xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/1998/Math/MathML">
<mover accent="true">
<mrow>
<mrow>
<mi mathvariant="double-struck">ℙ</mi>
</mrow>
</mrow>
<mo stretchy="true">ˆ</mo>
</mover>
<mi>i</mi>
<mrow>
<mspace width="thinmathspace"></mspace>
<mrow></mrow>
<mrow>
<mi mathvariant="double-struck">𝔾</mi>
</mrow>
<mrow></mrow>
</mrow>
</msubsup>
<mo xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/1998/Math/MathML">=</mo>
<msubsup xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<mover accent="true">
<mi>p</mi>
<mo stretchy="true">ˆ</mo>
</mover>
</mrow>
<mi>i</mi>
<mrow>
<mspace width="thinmathspace"></mspace>
<mrow></mrow>
<mrow>
<mi mathvariant="double-struck">𝔾</mi>
</mrow>
<mrow></mrow>
</mrow>
</msubsup>
<msub xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<mrow>
<mi mathvariant="double-struck">ℙ</mi>
</mrow>
</mrow>
<mn>0</mn>
</msub>
</mml:math>
</span>
</span>
</p>
<h2>Not Working Android and iOS</h2>
<p>
<span data-equation-construct="true" class="math-equation-construct">
<span data-equation-mathml="true" class="math-equation-mathml">
<mml:math xmlns:mml="http://www.w3.org/1998/Math/MathML">
<msubsup xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<mi mathvariant="bold">γ</mi>
</mrow>
<mrow>
<mspace width="thinmathspace"></mspace>
<mrow></mrow>
<mrow>
<mi mathvariant="double-struck">𝔾</mi>
</mrow>
<mo>+</mo>
<mrow>
<mi mathvariant="double-struck">𝔹</mi>
</mrow>
<mrow></mrow>
</mrow>
<mtext>GLM</mtext>
</msubsup>
</mml:math>
</span>
</span>
</p>
<p>
<span data-equation-construct="true" class="math-equation-construct">
<span data-equation-mathml="true" class="math-equation-mathml">
<mml:math xmlns:mml="http://www.w3.org/1998/Math/MathML">
<msub xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/1998/Math/MathML">
<mover accent="true">
<mrow>
<mi mathvariant="double-struck">𝔽</mi>
</mrow>
<mo stretchy="true">ˆ</mo>
</mover>
<mrow>
<mspace width="thinmathspace"></mspace>
<mrow></mrow>
<mrow>
<mi mathvariant="double-struck">𝔹</mi>
</mrow>
<mrow></mrow>
</mrow>
</msub>
</mml:math>
</span>
</span>,
<span data-equation-construct="true" class="math-equation-construct">
<span data-equation-mathml="true" class="math-equation-mathml">
<mml:math xmlns:mml="http://www.w3.org/1998/Math/MathML">
<msub xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/1998/Math/MathML">
<mover accent="true">
<mrow>
<mi mathvariant="double-struck">𝔽</mi>
</mrow>
<mo stretchy="true">ˆ</mo>
</mover>
<mrow>
<mspace width="thinmathspace"></mspace>
<mrow></mrow>
<mrow>
<mi mathvariant="double-struck">𝔾</mi>
</mrow>
<mrow></mrow>
</mrow>
</msub>
</mml:math>
</span>
</span>,
<span data-equation-construct="true" class="math-equation-construct">
<span data-equation-mathml="true" class="math-equation-mathml">
<mml:math xmlns:mml="http://www.w3.org/1998/Math/MathML">
<msub xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/1998/Math/MathML">
<mover accent="true">
<mrow>
<mi mathvariant="double-struck">𝔽</mi>
</mrow>
<mo stretchy="true">ˆ</mo>
</mover>
<mi mathvariant="normal">Z</mi>
</msub>
</mml:math>
</span>
</span>
</p>
<!-- This Works -->
<!-- script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=MML_HTMLorMML"></script-->
<!-- This doesn't work -->
<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=MML_CHTML"></script>
</body>
</html>
An issue has been accepted on the MathJax library however a content fix to the MML has been provided Git Hub Issue 1451
When you make a reference to a double-strick character like
<mi mathvariant="double-struck">𝔽</mi>
you are actually over-specifying the variant. The character 🔽 is already double-struck, so there should be no need to specify mathvariant="double-struck" in this case. The CommonHTML should still handle this situation correctly, but currently doesn't. What's happening is that MathJax doesn't actually find this character in its fonts and so makes a Unicode reference hoping that the character can be found in some font installed on your system. When you view this from a desktop machine, you apparently have fonts that do include these character positions (perhaps the STIX fonts?), and so the system can display them. Most mobile devices don't have fonts for these, so they are not being displayed there.
The example that does work on the mobiles uses the double struck P, which is at ℙ, and it turns out that CommonHTML does properly recognize the characters in the Letterlike Symbols block where this one is found, so it is handled properly for you (but note the missing double-struck B and G in the equations including the P's). The reason that the double-struck B (and G) works in the initial equation is that you used
<mi mathvariant="double-struck">B</mi> rather than using the Math Alphabet reference at 𝔹.
The CommonHTML output should translate the Math Alphabetic references to the proper locations in its own font, but it isn't currently doing so (the HTML-CSS and SVG output do, which is why it worked for you before). This should be fixed, but for now, you could use
<mi mathvariant="double-struck">F</mi> rather than <mi mathvariant="double-struck">𝔽</mi>
Answer supplied by #dpvc
What Layouts need use for make this?
HTML
<h1>Title</h1>
<div id="itemWrapper">
<div class="item">
<div class="png">
<img src="xxx.png">
</div>
<div class="text">
text text text text text text text text text text
</div>
</div>
<div class="item">
<div class="png">
<img src="xxx.png">
</div>
<div class="text">
text text text text text text text text text text
</div>
</div>
<div class="item">
<div class="png">
<img src="xxx.png">
</div>
<div class="text">
text text text text text text text text text text
</div>
</div>
<div class="item">
<div class="png">
<img src="xxx.png">
</div>
<div class="text">
text text text text text text text text text text
</div>
</div>
</div>
CSS
.item{clear:both;}
.item .png{float:left;height:50px}
.item .text{float:left;height:50px}
h1{text-align:center}
I am automating a site in which I want to click on the links inside a table.
In UI, the table showing like this:
Action Contract Line Item Number Product Product Code
Edit | Del CLI-757042 OpenTable System (Guest Center) SYS010
Edit | Del CLI-757043 Guests Seated from Online GC
I want to click the links CLI-757042,CLI-757043,CLI-757044 one by one. The numbers are random.
Below is the html code:
<!-- WrappingClass -->
<div class="listRelatedObject customnotabBlock"><div class="bPageBlock brandSecondaryBrd secondaryPalette"><div class="pbHeader"> … </div><div id="800f00000006cQt_00Na000000ASdVK_body" class="pbBody"><table class="list" cellspacing="0" cellpadding="0" border="0"><tbody><tr class="headerRow"> … </tr>
<!-- ListRow -->
<tr class="dataRow even first" onmouseover="if (window.hiOn){hiOn(this);}" onmouseout="if (window.hiOff){hiOff(this);}" onfocus="if (window.hiOn){hiOn(this);}" onblur="if (window.hiOff){hiOff(this);}"><td class="actionColumn"> … </td><th class=" dataCell " scope="row"><a href="/a1if0000000ZfEv">
CLI-757042
</a></th><td class=" dataCell "> … </td><td class=" dataCell "> … </td><td class=" dataCell CurrencyElement"> … </td><td class=" dataCell "> … </td><td class=" dataCell CurrencyElement"> … </td><td class=" dataCell numericalColumn"> … </td><td class=" dataCell numericalColumn"> … </td><td class=" dataCell CurrencyElement"> … </td><td class=" dataCell "> … </td></tr>
<!-- ListRow -->
<tr class="dataRow odd" onmouseover="if (window.hiOn){hiOn(this);}" onmouseout="if (window.hiOff){hiOff(this);}" onfocus="if (window.hiOn){hiOn(this);}" onblur="if (window.hiOff){hiOff(this);}"><td class="actionColumn"> … </td><th class=" dataCell " scope="row"> … </th><td class=" dataCell "> … </td><td class=" dataCell "> … </td><td class=" dataCell CurrencyElement"> … </td><td class=" dataCell "> … </td><td class=" dataCell CurrencyElement"> … </td><td class=" dataCell numericalColumn"> … </td><td class=" dataCell numericalColumn"> … </td><td class=" dataCell CurrencyElement"> … </td><td class=" dataCell "> … </td></tr>
<!-- ListRow -->
<tr class="dataRow even" onmouseover="if (window.hiOn){hiOn(this);}" onmouseout="if (window.hiOff){hiOff(this);}" onfocus="if (window.hiOn){hiOn(this);}" onblur="if (window.hiOff){hiOff(this);}"> … </tr>
<!-- ListRow -->
<tr class="dataRow odd" onmouseover="if (window.hiOn){hiOn(this);}" onmouseout="if (window.hiOff){hiOff(this);}" onfocus="if (window.hiOn){hiOn(this);}" onblur="if (window.hiOff){hiOff(this);}"> … </tr>
<!-- ListRow -->
<tr class="dataRow even last" onmouseover="if (window.hiOn){hiOn(this);}" onmouseout="if (window.hiOff){hiOff(this);}" onfocus="if (window.hiOn){hiOn(this);}" onblur="if (window.hiOff){hiOff(this);}"> … </tr></tbody></table><div class="pShowMore"> … </div></div><div class="pbFooter secondaryPalette"> … </div></div></div><div class="listElementBottomNav"></div><script> … </script>
<!-- End ListElement -->
</div>
<!-- End RelatedListElement -->
<!-- Begin RelatedListElement -->
<div id="800f00000006cQt_00Na000000ASdVM" class="bRelatedList"><a name="800f00000006cQt_00Na000000ASdVM_target"></a>
<!-- Begin ListElement -->
<!-- motif: Contract -->
<!-- WrappingClass -->
<div class="listRelatedObject Custom18Block"><div class="bPageBlock brandSecondaryBrd secondaryPalette"><div class="pbHeader"><table cellspacing="0" cellpadding="0" border="0"><tbody><tr><td class="pbTitle"><img class="minWidth" width="1" height="1" title="" alt="" src="/s.gif"></img><img class="relatedListIcon" title="Order" alt="Order" src="/s.gif"></img><h3 id="800f00000006cQt_00Na000000ASdVM_title"> … </h3></td><td class="pbButton"> … </td><td class="pbHelp"> … </td></tr></tbody></table></div><div id="800f00000006cQt_00Na000000ASdVM_body" class="pbBody"> … </div><div class="pbFooter secondaryPalette"> … </div></div></div><div class="listElementBottomNav"></div><script> … </script>
<!-- End ListElement -->
</div>
<!-- End RelatedListElement -->
<!-- Begin RelatedListElement -->
<div id="800f00000006cQt_00Na000000ASdVR" class="bRelatedList"> … </div>
<!-- End RelatedListElement -->
<!-- Begin RelatedListElement -->
<div id="800f00000006cQt_RelatedActivityList" class="bRelatedList"> … </div>
<!-- End RelatedListElement -->
<!-- Begin RelatedListElement -->
<div id="800f00000006cQt_RelatedHistoryList" class="bRelatedList"> … </div>
<!-- End RelatedListElement -->
<!-- Begin RelatedListElement -->
<div id="800f00000006cQt_00Na000000AT3VB" class="bRelatedList"> … </div>
<!-- End RelatedListElement -->
<!-- Begin RelatedListElement -->
<div id="800f00000006cQt_RelatedNoteList" class="bRelatedList"> … </div>
<!-- End RelatedListElement -->
<!-- Begin RelatedListElement -->
<div id="800f00000006cQt_00N3000000A6gu9" class="bRelatedList"> … </div>
<!-- End RelatedListElement -->
<!-- Begin RelatedListElement -->
<div id="800f00000006cQt_RelatedEntityHistoryList" class="bRelatedList"> … </div>
<!-- End RelatedListElement -->
<div class="fewerMore"> … </div><script> … </script>
<!-- Body events -->
<script type="text/javascript"> … </script><div id="datePicker" class="datePicker"> … </div>
<!-- End page content -->
</td></tr></tbody></table></div><div class="bPageFooter noTableFooter"> … </div><div></div></div><script> … </script><script src="/jslibrary/1402506602000/sfdc/ChatterDefer.js" defer="true"></script><script src="/jslibrary/1404472812000/sfdc/Zen.js" defer="true"></script><script> … </script><script async="" defer="" src="/jslibrary/1400606638000/sfdc/SfdcSessionBase190.js"></script><iframe title="sessionserver" style="position: absolute; top: -999px; left: -999px;" src="https://test.salesforce.com/login/sessionserver190.html"></iframe><div id="devSlide" style="display: block;"> … </div><div id="InlineEditDialog" class="overlayDialog cssDialog inlineEditDialog" role="dialog" aria-live="assertive" aria-describedby="InlineEditDialogTitle" style="margin-top: 0px; margin-left: 0px;"> … </div>
When I inspect element in the 1st link it shows table with class=datacell. But there are 2-3 more tables in the page with same class name.
You can use the links method to collect the links and then iterate through the link collection.
Here's a contrived table as an example:
<table class="foo"><tr>
<td>one</td>
<td>two</td>
</tr></table>
<table class="foo"><tr>
<td>three</td>
<td>four</td>
</tr></table>
<table class="bar"><tr>
<td>five</td>
<td>six</td>
</tr></table>
You can collect all the links on the page or target a specific table based on its class attribute or index position.
# print the text attribute for all links
b.links.each { |link| puts link.text}
#=> one
#=> two
#=> three
#=> four
#=> five
#=> six
# print the text attribute for links in the table with a class attribute of "foo"
b.table(:class => "foo").links.each { |link| puts link.text}
#=> one
#=> two
# print the text attribute for links in the table with a index position of 1
b.table(:index => 1).links.each { |link| puts link.text}
#=> three
#=> four
# print the text attribute for links in the table with a class attribute of "bar"
b.table(:class => "bar").links.each { |link| puts link.text}
#=> five
#=> six
In theory--once you've collected the appropriate set of links--you can iterate through the links and click them (although I find this prone to StaleElementReferenceError errors).