put all img src in element as list - beautifulsoup

I would like to extract only the img ['src'] tags. How can I do this? I want them to be in a list too.
from bs4 import BeautifulSoup as bs
import pandas as pd
html = '''
<div class="exp-grid-item-colorways-wrapper">
</div>
<div class="color-options" style="overflow: hidden; position: relative; z-index: 2; left: 0px; width: 180px;">
<ul style="margin: 0px; padding: 0px; position: relative; list-style-type: none; z-index: 1; width: 244px;">
<li style="">
<a class="color-chip" data-lp="$130" data-op="" data-bp="$78" data-obp="$130" data-coming-soon="false" data-product="amazon.com" data-pre-order="false" data-in-stock="true" data-sprite-index="0" data-imgurl="https://images.amazon.com/is/image/DotCom/pwp_sheet2?$amazon_PWPx3$&$img0=AQ1189_001&$img1=AQ1189_006&$img2=AQ1189_010" href="https://www.amazon.com/t/metcon-5-training-shoe-lFwjMP/AQ1189-001" style="overflow: hidden; float: left;" data-iscached="true">
<img src="https://images.amazon.com/is/image/DotCom/pwp_sheet2?$amazon_PWPx3$&$img0=AQ1189_001&$img1=AQ1189_006&$img2=AQ1189_010" class="sprite-sheet sprite-index-0">
</a>
</li>
<li>
<a class="color-chip" data-lp="$130" data-op="" data-bp="$78" data-obp="$130" data-coming-soon="false" data-product="amazon.com" data-pre-order="false" data-in-stock="true" data-sprite-index="1" data-imgurl="https://images.amazon.com/is/image/DotCom/pwp_sheet2?$amazon_PWPx3$&$img0=AQ1189_001&$img1=AQ1189_006&$img2=AQ1189_010" href="https://www.amazon.com/t/metcon-5-training-shoe-lFwjMP" style="overflow: hidden; float: left;" data-iscached="true">
<img src="https://images.amazon.com/is/image/DotCom/pwp_sheet2?$amazon_PWPx3$&$img0=AQ1189_001&$img1=AQ1189_006&$img2=AQ1189_010" class="sprite-sheet sprite-index-1">
</a>
</li>
<li>
<a class="color-chip" data-lp="$130" data-op="" data-bp="$78" data-obp="$130" data-coming-soon="false" data-product="amazon.com" data-pre-order="false" data-in-stock="true" data-sprite-index="2" data-imgurl="https://images.amazon.com/is/image/DotCom/pwp_sheet2?$amazon_PWPx3$&$img0=AQ1189_001&$img1=AQ1189_006&$img2=AQ1189_010" href="https://www.amazon.com/t/metcon-5-training-shoe-lFwjMP/AQ1189-010" style="overflow: hidden; float: left;" data-iscached="true">
<img src="https://images.amazon.com/is/image/DotCom/pwp_sheet2?$amazon_PWPx3$&$img0=AQ1189_001&$img1=AQ1189_006&$img2=AQ1189_010" class="sprite-sheet sprite-index-2">
</a>
</li>
<li>
<a class="color-chip" data-lp="$130" data-op="" data-bp="$78" data-obp="$130" data-coming-soon="false" data-product="amazon.com" data-pre-order="false" data-in-stock="true" data-sprite-index="3" data-imgurl="https://images.amazon.com/is/image/DotCom/AQ1189_344?$amazon_PWP_GRAY$" href="https://www.amazon.com/t/metcon-5-training-shoe-lFwjMP/AQ1189-344" style="overflow: hidden; float: left;" data-iscached="true">
<img data-src="https://images.amazon.com/is/image/DotCom/AQ1189_344?$amazon_PWP_GRAY$" src="https://images.amazon.com/is/image/DotCom/AQ1189_344?$amazon_PWP_GRAY$">
</a>
</div>
'''
soup = bs(html, "html.parser")
items = soup.select('.exp-grid-item-colorways-wrapper')
lista = []
imurl = soup.findAll('img')
print(imurl)

Here is the way::
from bs4 import BeautifulSoup
soup = BeautifulSoup(html, "html.parser")
src_list = [i.get("src") for i in soup.find_all('img')]
print(src_list)
Your output will be::
['https://images.amazon.com/is/image/DotCom/pwp_sheet2?$amazon_PWPx3$&$img0=AQ1189_001&$img1=AQ1189_006&$img2=AQ1189_010', 'https://images.amazon.com/is/image/DotCom/pwp_sheet2?$amazon_PWPx
3$&$img0=AQ1189_001&$img1=AQ1189_006&$img2=AQ1189_010', 'https://images.amazon.com/is/image/DotCom/pwp_sheet2?$amazon_PWPx3$&$img0=AQ1189_001&$img1=AQ1189_006&$img2=AQ1189_010', 'https://im
ages.amazon.com/is/image/DotCom/AQ1189_344?$amazon_PWP_GRAY$']
Hope this is what you expected.
Happy Coding :)

Related

object-fit: cover and IE11

I'm using object-fit: cover; in my CSS to line up images on a page, because they need to be the same height. It works perfectly in most browsers however IE11 is distorting the images.
I read that I might be able to use #support to fix this but I don't understand how to do this? Or is there another option that I might be able to use?
The code I have used is below - would really appreciate any help.
.brands {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
grid-gap: 1rem;
}
.brands__item img {
display: block;
/* Make sure max-width is added */
max-width: 100%;
height: 70px;
}
.brands__item img {
width: 130px;
height: 75px;
object-fit: contain;
}
.brands__item a {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
<div class="row" style="padding: 10px 30px 40px;">
<hr style="border-color: #000000; border-width: 2px; width: 90px; margin-bottom: 10px;" />
<h5 style="text-align: center;font-size: 2.4rem;margin-bottom:30px;">Trending now</h5>
<ul class="brands">
<li class="brands__item">
<a href="#">
<img src="https://static.prd.echannel.linde.com/wcsstore/UK_BOC_Industrial_Ntl_Store/images/steel-blue-logo-148x75.png" alt="Steel Blue logo" />
</a>
</li>
<li class="brands__item">
<a href="#">
<img src="https://static.prd.echannel.linde.com/wcsstore/UK_BOC_Industrial_Ntl_Store/images/dewalt-logo-103x45.png" alt="Dewalt logo" />
</a>
</li>
<li class="brands__item">
<a href="#">
<img src="https://static.prd.echannel.linde.com/wcsstore/UK_BOC_Industrial_Ntl_Store/images/3m-logo-105x55.png" alt="3M logo" />
</a>
</li>
<li class="brands__item">
<a href="#">
<img src="https://static.prd.echannel.linde.com/wcsstore/UK_BOC_Industrial_Ntl_Store/images/bahco-logo-125x75.png" alt="Bahco logo" />
</a>
</li>
<li class="brands__item">
<a href="#">
<img src="https://static.prd.echannel.linde.com/wcsstore/UK_BOC_Industrial_Ntl_Store/images/honeywell-logo-211x40.png" alt="Honeywell logo" />
</a>
</li>
<li class="brands__item">
<a href="#">
<img src="https://static.prd.echannel.linde.com/wcsstore/UK_BOC_Industrial_Ntl_Store/images/metabo-logo-166x65.png" alt="Metabo logo" />
</a>
</li>
</ul>
</div>
<!-- end -->
I test your code in IE 11 and the issue seems not only with object-fit.
CSS Grid part of your code doesn't work in IE 11.
You need to use -ms- prefix to elements such as display: grid, grid-column and grid-row.
grid-template-areas isn't supported, you can convert it to work with grid lines.
The repeat() notation doesn't work in IE 11. You need to write in all row and column lengths.
object-fit is not supported by IE 11. You can refer to this thread for the fix.
I use #media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {} to target IE 11 in CSS to add some codes for IE 11 to fix the issue. The added code is like below:
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.brands__item img {
width: 130px;
height: auto;
max-width: 100%;
max-height: 100%;
}
.brands {
display: -ms-grid;
-ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}
li:nth-of-type(1) {
-ms-grid-column: 1;
-ms-grid-row: 1;
}
li:nth-of-type(2) {
-ms-grid-column: 2;
-ms-grid-row: 1;
}
li:nth-of-type(3) {
-ms-grid-column: 3;
-ms-grid-row: 1;
}
li:nth-of-type(4) {
-ms-grid-column: 4;
-ms-grid-row: 1;
}
li:nth-of-type(5) {
-ms-grid-column: 5;
-ms-grid-row: 1;
}
li:nth-of-type(6) {
-ms-grid-column: 6;
-ms-grid-row: 1;
}
}

Need to summarize a dynamic xpath

I have a far too large dynamic xpath and would like to know if there is a shortened version that can be used. This is for a legend to a chart object, "Campaign Response" (which cannot be found by contains(text(), as it is embedded within the chart and isn't recognized as a string.) There are 4 locations of "Campaign Response" at different locations on different charts on the same screen.
I've tried using dynamic (//) body//section//div etc, and tend to wind up with something that grabs multiple objects.
//body[contains(#class,'desktop')]
/div[contains(#class,'desktop container forceStyle oneOne
lafStandardLayoutContainer lafAppLayoutHost forceAccess forceStyle
oneOne')]
/div[contains(#class,'viewport')]
/section[contains(#class,'stage panelSlide hasFixedFooter')]
/div[#id='brandBand_1']
/div[contains(#class,'slds-template__container')]
/div[contains(#class,'center oneCenterStage lafSinglePaneWindowManager')]
/div[contains(#class,'windowViewMode-normal oneContent active lafPageHost')]
/div[contains(#class,'container homeLanding')]
/div[contains(#class,'flexipagePage')]
/div[contains(#class,'responsiveContents homeDesktopTemplate')]
/div[contains(#class,'colMain')]
/div[contains(#class,'bottomWrapper')]
/div[contains(#class,'bottomLeft')]
/div[4]
/article[1]
/div[2]
/div[1]
/div[1]
/div[1]
/div[1]
/div[2]
/div[1]
/div[2]
/div[1]
/div[1]
html snippet - DIV CLASS="PS-CONTAINER" DATA-PS-ID="70C963EF-4CA2-07A3-6B48-394D11135709" is what is highlighted when looking at the code.
<div class="loadingPanel" data-aura-rendered-by="27:812;a"></div><span class="loadingMsg" data-aura-rendered-by="28:812;a">Loading report chart...</span></div>
<!--render facet: 75:812;a-->
<!--render facet: 82:812;a-->
<!--render facet: 96:812;a-->
<div class="eclair-component-container reportsEclairChart" data-aura-rendered-by="106:812;a" data-aura-class="reportsEclairChart" style="">
<div class="eclair-component-chart" data-aura-rendered-by="107:812;a" data-ngname="chart_0" style="width: 464.609px;">
<div style="position: relative;">
<div style="z-index: 2; position: absolute; overflow: hidden; background-color: rgba(255, 255, 255, 0); width: 464.609px; height: 300px; left: 0px; top: 0px;" class="ps-container" data-ps-id="aee85f92-8bd4-9aeb-b095-68aac4a00821">
<div style="width: 465px; height: 300px;"></div>
<div class="ps-scrollbar-x-rail" style="left: 0px; bottom: 3px;">
<div class="ps-scrollbar-x" style="left: 0px; width: 0px;"></div>
</div>
<div class="ps-scrollbar-y-rail" style="top: 0px; right: 3px;">
<div class="ps-scrollbar-y" style="top: 0px; height: 0px;"></div>
</div>
</div>
<canvas class="chart" style="z-index: 1; position: absolute; -webkit-font-smoothing: antialiased; width: 464.609px; height: 300px; left: 0px; top: 0px;" width="464" height="300"></canvas>
<button aria-live="polite" class="reportsEclairChart ng-button assistiveText">Enable Tab Navigation for This Chart<span class="assistiveText">Enable table equivalent for screen reader users</span></button>
</div>
<div data-ngname="legend_chart_0" style="">
<div style="position: relative;">
<DIV CLASS="PS-CONTAINER" DATA-PS-ID="70C963EF-4CA2-07A3-6B48-394D11135709" STYLE="">
<div style=""></div>
<div class="ps-scrollbar-x-rail" style="left: 0px; bottom: 3px;">
<div class="ps-scrollbar-x" style="left: 0px; width: 0px;"></div>
</div>
<div class="ps-scrollbar-y-rail" style="top: 0px; right: 3px;">
<div class="ps-scrollbar-y" style="top: 0px; height: 0px;"></div>
</div>
</div>
<canvas class="legend" style="z-index: 2; position: absolute; -webkit-font-smoothing: antialiased; width: 124px; height: 88px; left: 338.609px; top: 2px;" width="124" height="88"></canvas>
</div>
</div>
<div class="ng-annotations-container" style="margin: 2px; width: 460.609px; height: 296px;"></div>
</div>
<div class="error-div hide" data-aura-rendered-by="108:812;a"></div><span class="eclair-component-alt-text" data-aura-rendered-by="109:812;a">Chart: Priority Campaigns by Response</span></div>
<!--render facet: 111:812;a-->
</div>
</div>
</div>
<div class="lightning" data-aura-rendered-by="113:812;a"><span class="reportFooter" data-aura-rendered-by="114:812;a"><button class="slds-button navigateButton uiButton" aria-live="off" type="button" data-aura-rendered-by="118:812;a" data-aura-class="uiButton"><!--render facet: 119:812;a--><span class=" label bBody" dir="ltr" data-aura-rendered-by="121:812;a">View Report</span>
<!--render facet: 123:812;a-->
</button>
<div class="refreshContainer" data-aura-rendered-by="125:812;a"><span class="asOfDate" data-aura-rendered-by="128:812;a">As of Today at 10:​33 AM</span>
<button class="slds-button refreshButton uiButton" aria-live="off" type="button" data-aura-rendered-by="137:812;a" data-aura-class="uiButton">
<!--render facet: 138:812;a--><span class="assistiveText" data-aura-rendered-by="141:812;a">Refresh</span>
<lightning-icon class="slds-icon-utility-refresh slds-icon_container" data-data-rendering-service-uid="393" data-aura-rendered-by="135:812;a">
<lightning-primitive-icon lightning-primitiveicon_primitiveicon-host="">
<svg lightning-primitiveIcon_primitiveIcon="" focusable="false" data-key="refresh" aria-hidden="true" class="slds-icon slds-icon-text-default slds-icon_xx-small">
<use lightning-primitiveIcon_primitiveIcon="" xlink:href="/_slds/icons/utility-sprite/svg/symbols.svg?cache=9.28.0#refresh"></use>
</svg>
</lightning-primitive-icon><span class="slds-assistive-text">Refresh</span></lightning-icon>
</button>
</div>
</span>
</div>
I presume you want to access the span tag contains Priority Campaigns by Response
Try following xpath:
//span[#class='eclair-component-alt-text'][contains(.,'Campaigns by Response')]
OR
//div[#data-aura-class='reportsEclairChart']//span[#class='eclair-component-alt-text'][contains(.,'Campaigns by Response')]
Edited
To access the canvas element try below xpath.
//div[#class='PS-CONTAINER']/following::canvas[#class='legend']

How we can select item from drop down combo box using value of element in selenium webdriver

I need to know how we can select a value from drop down combo box using value of that item.
Below is the form tag
<form id="rahul" onkeypress="EnterHandler();" onsubmit="javascript:return WebForm_OnSubmit();" action="./RequestSubmission?CC8510F49CCCF2&" method="post">
<div class="rcbSlide" style="z-index: 6000; visibility: visible; display: block; overflow: visible; margin-left: 0px; position: absolute; top: 575.2px; left: 768.183px; height: 202px; width: 300px;">
<div id="ctl00_MainContent_ucAdditionalDetailsMAP_txtResponsiblePerson_DropDown" class="RadComboBoxDropDown RadComboBoxDropDown_MetroTouch rcbAutoWidth rcbAutoWidthResizer" style="display: block; visibility: visible; top: 0px; left: 0px; transition: none 0s ease 0s ;">
<div class="rcbScroll rcbWidth rcbNoWrap" style="height: 200px; width: 100%; overflow: auto;">
<ul class="rcbList" style="list-style:none;margin:0;padding:0;zoom:1;">
<li class="rcbItem">Aava, Ruth</li>
<li class="rcbItem">Abdelgawwad, Khaled</li>
<li class="rcbItem">Achcar, Cecilia</li>
<li class="rcbItem">Achilles, Karin</li>
<li class="rcbItem">Adachi, Masatoshi</li>
<li class="rcbItem">admin, bayer</li>
<li class="rcbItem">Adriane, Fernandes</li>
<li class="rcbItem">Aeschliman, Lisa</li>
<li class="rcbItem">Afonja, Olubunmi</li>
</ul>
</div>
</div>
</div>
</form>
Here is the div tag from where we are selecting the value from drop down combo box.
<div id="ctl00_MainContent_ucAdditionalDetailsMAP_txtResponsiblePerson" class="RadComboBox RadComboBox_MetroTouch" style="width:350px;">
<table class="" style="border-width: 0px; border-collapse: collapse;" summary="combobox">
<tbody>
<tr>
<td class="rcbInputCell rcbInputCellLeft" style="width:100%;">
<input id="ctl00_MainContent_ucAdditionalDetailsMAP_txtResponsiblePerson_Input" class="rcbInput radPreventDecorate rcbEmptyMessage" type="text" value="Select" name="ctl00$MainContent$ucAdditionalDetailsMAP$txtResponsiblePerson" autocomplete="off">
</td>
<td class="rcbArrowCell rcbArrowCellRight">
<a id="ctl00_MainContent_ucAdditionalDetailsMAP_txtResponsiblePerson_Arrow" style="overflow: hidden;display: block;position: relative;outline: none;">select</a>
</td>
</tr>
</tbody>
</table>
</div>
I want to know how we can select li item "Aava, Ruth" in selenium webdriver using its value.
Use below XPath
//ul[#class='rcbList']/li[1]
OR
//ul[#class='rcbList']/li[contains(.,'Aava, Ruth')]
You can select it directly by using below code:-
driver.findElement(By.xpath("//ul[#class='rcbList']/li[1]")).click();
Note:- First click on dropbox then use above code
Hope it will help you :)

Query results not properly displaying sometimes

Results show up like this
http://puu.sh/hZrVY/cbfe561492.jpg
How can I make it so that they show up in rows of 3 with no offsetting.
Code:
#foreach ($posts as $post)
<div class="col-md-4 portfolio-item">
<a href="/stories/{{ $post->slug }}#disqus_thread">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
{{ str_limit($post->title, 34) }}
</h3>
<p>{{ str_limit($post->content) }}</p>
<em>({{ $post->published_at->format('M jS Y g:ia') }})</em>
</div>
#endforeach
CSS:
body {
background-image: url("http://www.ruschgaming.tv/img/bg.png");
background-attachment: fixed;
background-repeat: no-repeat;
}
.portfolio-item {
margin-bottom: 25px;
}
.container {
margin-top: 80px;
padding-top: 20px;
height: 100%;
background-color: #ffffff;
border-radius: 12px;
box-shadow: 2px 2px 5px grey;
}
Missing the rows tags:
#foreach ($posts as $key => $post)
#if(($key==0) || is_int($key/3))
<div class="row">
#endif
<div class="col-md-4 portfolio-item">
<a href="/stories/{{ $post->slug }}#disqus_thread">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
{{ str_limit($post->title, 34) }}
</h3>
<p>{{ str_limit($post->content) }}</p>
<em>({{ $post->published_at->format('M jS Y g:ia') }})</em>
</div>
#if(is_int($key/3))
<div>
#endif
#endforeach

Getting Bootstrap 3 Tab Panes to Work with TreeView

I am trying to get the TreeView from BootSnipp here: 1 to work with Bootstrap 3 tabs.
It works as expected initially, but breaks down after a few clicks, then responding/not responding arbitrarily. Here's the html+js+css I am working with:
// ***************** BEGIN TREE JS *****************
$.fn.extend({
treed: function() {
return this.each(function() {
//initialize each of the top levels
var tree = $(this);
tree.addClass("tree");
tree.find('li').has("ul").each(function() {
var branch = $(this); //li with children ul
branch.prepend("<i class='indicator glyphicon glyphicon-plus-sign'></i>");
branch.addClass('branch');
branch.on('click', function(e) {
if (this == e.target) {
var icon = $(this).children('i:first');
icon.toggleClass("glyphicon-minus-sign glyphicon-plus-sign");
$(this).children().children().toggle();
}
})
branch.children().children().toggle();
});
//fire event from the dynamically added icon
$('.branch .indicator').on('click', function() {
$(this).closest('li').click();
});
//fire event to open branch if the li contains an anchor instead of text
$('.branch a').on('click', function(e) {
$(this).closest('li').click();
e.preventDefault();
});
//fire event to open branch if the li contains a button instead of text
$('.branch button').on('click', function(e) {
$(this).closest('li').click();
e.preventDefault();
});
});
}
});
$('.tree').treed();
//***************** END TREE JS *****************
/*BEGIN TREE CSS*/
.tree,
.tree ul {
margin: 0;
padding: 0;
list-style: none
}
.tree ul {
margin-left: 1em;
position: relative
}
.tree ul ul {
margin-left: .5em
}
.tree ul:before {
content: "";
display: block;
width: 0;
position: absolute;
top: 0;
bottom: 0;
left: 0;
border-left: 1px solid
}
.tree li {
margin: 0;
padding: 0 1em;
line-height: 2em;
color: #369;
font-weight: 700;
position: relative
}
.tree ul li:before {
content: "";
display: block;
width: 10px;
height: 0;
border-top: 1px solid;
margin-top: -1px;
position: absolute;
top: 1em;
left: 0
}
.tree ul li:last-child:before {
background: #fff;
height: auto;
top: 1em;
bottom: 0
}
.indicator {
margin-right: 5px;
}
.tree li a {
text-decoration: none;
color: #369;
}
.tree li button,
.tree li button:active,
.tree li button:focus {
text-decoration: none;
color: #369;
border: none;
background: transparent;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
outline: 0;
}
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-7">
<ul id="tabs" class="tree">
<li>Continent Overview
</li>
<li>Countries
<ul>
<li>Country 1
<ul>
<li>Country Overview
</li>
</ul>
</li>
<li>Country 2
<ul>
<li>Country Overview
</li>
<li>Cities
<ul>
<li>City P
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>Cities
<ul>
<li>
City A
<ul>
<li>Overview
</li>
</ul>
</li>
<li>
City B
<ul>
<li>Overview
<li>Neighborhoods
<ul>
<li>Neighborhood X
</li>
</ul>
</li>
</li>
</ul>
</li>
</ul>
</li>
<li>Neighborhoods
<ul>
<li>Neighborhood T
</li>
</ul>
</li>
</ul>
</div>
<div class="col-xs-5">
<div class="tabbable" id="tabbable-proj">
<div class="tab-content main-tab-content">
<div class="tab-pane fade in active" id="panel-continent-overview">
<strong>Continent Details</strong>
</div>
<div class="tab-pane fade" id="panel-country-9400470e-fa49-46ea-b587-2ceb108600c0">
<strong>Country Details</strong>
</div>
<div class="tab-pane fade" id="panel-country-45f97844-9773-4059-bafd-a2782fc06db1">
<strong>Country Details</strong>
</div>
<div class="tab-pane fade" id="panel-city-2120d7aa-2b93-4d0d-a42b-8c6fedc9333a">
<strong>City Details</strong>
</div>
<div class="tab-pane fade" id="panel-neighborhood-babea547-cfb6-4e12-8c4a-bbbb25068d8a">
<strong>Neighborhood Details</strong>
</div>
<div class="tab-pane fade" id="panel-city-b4a991ce-80ef-4406-b1d2-9892c0d93d18">
<strong>City Details</strong>
</div>
<div class="tab-pane fade" id="panel-city-2e6f1227-66d0-4061-9243-bf6cf4feaabd">
<strong>City Details</strong>
</div>
<div class="tab-pane fade" id="panel-neighborhood-f3fd5e2f-583d-4ccb-b163-03e118896f71">
<strong>Neighborhood Details</strong>
</div>
<div class="tab-pane fade" id="panel-neighborhood-319d56ac-286f-4afa-af42-5ec74bbcac19">
<strong>Neighborhood Details</strong>
</div>
</div>
</div>
</div>
</div>
</div>
I am totally at a loss as to what is causing the problem. Could someone please help me with flushing out the bug?
Okay, I will attempt it myself.
It was not working because Bootstrap expects the tabs to be one flat ul - and I had multiple nested uls.
I got it working by
dissociating the tree from the tabbable;
creating a hidden flat ul for tabs; and
hooking the relevant tree anchor clicks to manually call $('...).tab('show') on the respective tab.
I have also discovered that using this strategy, I can call up my tabs from anywhere on the page - e.g. from a breadcrumb or a random anchor.
Now I know my question was too noobish for most people out there to tackle - the html itself was all over the place.
The answer I have been able to work out looks slightly hackish. Will somebody at least comment as to how good or bad it is? Like, will it incur search engine penalties for hiding the ul? What will the implications for accessibility be - especially as I have removed text from the anchor tags?
Or should I post one or more new questions to solicit this kind of feedback?
Cheers
// ***************** BEGIN TREE JS *****************
$.fn.extend({
treed: function() {
return this.each(function() {
//initialize each of the top levels
var tree = $(this);
tree.addClass("tree");
tree.find('li').has("ul").each(function() {
var branch = $(this); //li with children ul
branch.prepend("<i class='indicator glyphicon glyphicon-plus-sign'></i>");
branch.addClass('branch');
branch.on('click', function(e) {
if (this == e.target) {
var icon = $(this).children('i:first');
icon.toggleClass("glyphicon-minus-sign glyphicon-plus-sign");
$(this).children().children().toggle();
}
})
branch.children().children().toggle();
});
//fire event from the dynamically added icon
$('.branch .indicator').on('click', function() {
$(this).closest('li').click();
});
//fire event to open branch if the li contains an anchor instead of text
$('.branch a').on('click', function(e) {
$(this).closest('li').click();
e.preventDefault();
});
//fire event to open branch if the li contains a button instead of text
$('.branch button').on('click', function(e) {
$(this).closest('li').click();
e.preventDefault();
});
});
}
});
$('.tree').treed();
//***************** END TREE JS *****************
$(document).ready(function() {
$("a.tree-link").on('click', function (event) {
var hrefTab = $(this).attr('href');
$('#hidden-tabs a[href='+hrefTab+']').tab('show');
});
});
#hidden-tabs{
height: 0px;
list-style-type: none;
padding:0;
margin:0;
}
#hidden-tabs{
height: 0px;
list-style-type: none;
padding:0;
margin:0;
}
#hidden-tabs li{
height: 0px;
padding:0;
margin:0;
}
#hidden-tabs li a{
height: 0px;
padding:0;
margin:0;
}
/*BEGIN TREE CSS*/
.tree,
.tree ul {
margin: 0;
padding: 0;
list-style: none
}
.tree ul {
margin-left: 1em;
position: relative
}
.tree ul ul {
margin-left: .5em
}
.tree ul:before {
content: "";
display: block;
width: 0;
position: absolute;
top: 0;
bottom: 0;
left: 0;
border-left: 1px solid
}
.tree li {
margin: 0;
padding: 0 1em;
line-height: 2em;
color: #369;
font-weight: 700;
position: relative
}
.tree ul li:before {
content: "";
display: block;
width: 10px;
height: 0;
border-top: 1px solid;
margin-top: -1px;
position: absolute;
top: 1em;
left: 0
}
.tree ul li:last-child:before {
background: #fff;
height: auto;
top: 1em;
bottom: 0
}
.indicator {
margin-right: 5px;
}
.tree li a {
text-decoration: none;
color: #369;
}
.tree li button,
.tree li button:active,
.tree li button:focus {
text-decoration: none;
color: #369;
border: none;
background: transparent;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
outline: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-7">
<ul class="tree">
<li>Continent Overview
</li>
<li>Countries
<ul>
<li>Country 1
<ul>
<li>Country Overview
</li>
</ul>
</li>
<li>Country 2
<ul>
<li>Country Overview
</li>
<li>Cities
<ul>
<li>City P
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>Cities
<ul>
<li>
City A
<ul>
<li>Overview
</li>
</ul>
</li>
<li>
City B
<ul>
<li>Overview
<li>Neighborhoods
<ul>
<li>Neighborhood X
</li>
</ul>
</li>
</li>
</ul>
</li>
</ul>
</li>
<li>Neighborhoods
<ul>
<li>Neighborhood T
</li>
</ul>
</li>
</ul>
</div>
<div class="col-xs-5">
<div class="tabbable" id="tabbable-proj">
<ul id="hidden-tabs" role="tablist" aria-expanded="false">
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
<div class="tab-content main-tab-content">
<div class="tab-pane fade in active" id="panel-continent-overview">
<strong>Continent Details</strong>
</div>
<div class="tab-pane fade" id="panel-country-9400470e-fa49-46ea-b587-2ceb108600c0">
<strong>Country 1 Details</strong>
</div>
<div class="tab-pane fade" id="panel-country-45f97844-9773-4059-bafd-a2782fc06db1">
<strong>Country 2 Details</strong>
</div>
<div class="tab-pane fade" id="panel-city-2120d7aa-2b93-4d0d-a42b-8c6fedc9333a">
<strong>City P Details</strong>
</div>
<div class="tab-pane fade" id="panel-neighborhood-babea547-cfb6-4e12-8c4a-bbbb25068d8a">
<strong>Neighborhood Details</strong>
</div>
<div class="tab-pane fade" id="panel-city-b4a991ce-80ef-4406-b1d2-9892c0d93d18">
<strong>City A Details</strong>
</div>
<div class="tab-pane fade" id="panel-city-2e6f1227-66d0-4061-9243-bf6cf4feaabd">
<strong>City B Details</strong>
</div>
<div class="tab-pane fade" id="panel-neighborhood-f3fd5e2f-583d-4ccb-b163-03e118896f71">
<strong>Neighborhood X Details</strong>
</div>
<div class="tab-pane fade" id="panel-neighborhood-319d56ac-286f-4afa-af42-5ec74bbcac19">
<strong>Neighborhood T Details</strong>
</div>
</div>
</div>
</div>
</div>
</div>