My Movie Review Wont Work and Tried Everything - html
So Every Time I type a movie in it dosent show up which it should I dont know what to Ive tried everything
// Get input element
let filterInput = document.getElementById('filterInput');
// Add event listener
filterInput.addEventListener('keyup', filterNames);
function filterNames(){
// Get value of input
let filterValue = document.getElementById('filterInput').value.toUpperCase();
// Get names ul
let ul = document.getElementById('names');
// Get lis from ul
let li = ul.querySelectorAll('li.collection-item');
// Loop through collection-item lis
for(let i = 0;i < li.length;i++){
let a = li[i].getElementsByTagName('a')[0];
// If matched
if(a.innerHTML.toUpperCase().indexOf(filterValue) > -1){
li[i].style.display = '';
} else {
li[i].style.display = 'none';
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/css/materialize.css">
<title>NinjaWolf Movie Review</title>
</head>
<body>
<div class="container">
<h1 class="center-align">
Movies Watched
</h1>
<h4 class="center-align">
*Spoiler Warning*
</h4>
<input type="text" id="filterinput" placeholder="Search Movie">
<ul id="names" class="collection with-header">
<li class="collection-header">
<h5>2019</h5>
<li class="collection-item">
ARMY OF DARKNESS
</li>
<li class="collection-item">
THE CLOVERFIELD PARADOX
</li>
<li class="collection-item">
CLOVERFIELD (2008)
</li>
<li class="collection-item">
INSIDIOUS: CHAPTER 2
</li>
<li class="collection-item">
INSIDIOUS
<li class="collection-item">
TERMINATOR: DARK FATE (2019)
</li>
<li class="collection-header">
<h5>November</h5>
</li>
<li class="collection-item">
EVIL DEAD II
</li>
<li class="collection-item">
TRANSFORMERS
</li>
<li class="collection-item">
JOKER
<li class="collection-item">
INDEPENDENCE DAY
</li>
<li class="collection-item">
MISSION: IMPOSSIBLE FALLOUT M:I-6
</li>
<li class="collection-item">
<a href="file:///D:/Website/Movie%20Review/Movies/BLACK%20MIRROR.html">BLACK MIRROR (2011 - )
</li>
<li class="collection-item">
THE LION KING(2019)
</li>
<li class="collection-item">
TERMINATOR 2: JUDGEMENT DAY
<li>
<li class="collection-item">
MISSION: IMPOSSIBLE ROUGE NATION M:I-5
</li>
<li class="collection-item">
MISSION: IMPOSSIBLE GHOST PROTOCOL M:I-4
</li>
<li class="collection-item">
DADDY'S HOME 2
</li>
<li class="collection-item">
HAPPY DEATH DAY 2 U
</li>
<li class="collection-item">
DADDY'S HOME
</li>
<li class="collection-item">
HAPPY DEATH DAY
</li>
<li class="collection-item">
THE MAZE RUNNER
</li>
<li class="collection-item">
ASSASSIN'S CREED
</li>
<li class="collection-item">
Galaxy Quest(1999)
</li>
<li class="collection-header">
<h5>October</h5>
</li>
<li class="collection-item">
Goosebumps 2(2018)
</li>
<li class="collection-item">
THE EVIL DEAD(1981)
</li>
<li class="collection-item">
EVIL DEAD(2013)</li>
<li class="collection-item">
LOVE DEATH + ROBOTS(2018)
</li>
<li class="collection-header">
<h5>September</h5>
</li>
<li class="collection-item">
MAMMA MIA
<li class="collection-header">
<h5>2018</h5>
</li>
<li class="collection-item">
ANON(2018)
</li>
</ul>
<br/>
</div>
<div class="card">
<h2>Stranger Things (Season 3)</h2>
<h4>July 17, 2019 - July 18, 2019, Stranger Things (Season 3) is about In the summer of 1985 in Hawkins, the new Starcourt Mall has become the focal point of the town, driving other stores out of business. Sheriff Jim Hopper is conflicted over Eleven and Mike's budding relationship, while Joyce considers moving out of Hawkins for better prospects, leaving the state of the children's friendships and her relationship with Hopper in the air. However, strange power fluctuations trigger Will's awareness of something otherworldly, and Eleven and Max sense something is off about the town's residents, and despite having closed the portal to the Upside Down, fears that they are all in danger from it still.</h4>
<div class="img-wrapper">
<img src="./img/ST3.png" alt="ST3">
<p>I watched Stranger Things(Season 3) on July, 17, 2019 and I loved it and Stranger Things Season 3 had an upgrade because they went into the Gorrer selection and when they cut her leg open I just couldn't watch and I know hooper is still alive and remember that scene where Steve knocks that Russian out if that was me I would have said <b>"Fuck Mother Russia"</b> and Fun Fact I always watch Stranger Things (Season 3) with my Dad and my Brother got interested in Stranger Things when Season 2 came out and my Sister said we should watch it all together but my Brother said "No Way" and watched it without us and so while we watched Stranger Things (Season 3) he was playing Apex Legends I finished it on July 18, 2019, <p>
<br> <br/>
</div>
</div>
<div class="card">
<h2>RWBY: Volume 2 (2014)</h2>
<h4>July 4, 2019, RWBY: Volume 2 is about Team RWBY begins their second semester and try to take down a crime syndicate, a task that mabye far too difficult</h4>
<img src="./img/RWBY.jpg" alt="RWBY">
<p>I watched RWBY: Volume 2 on July, 4, 2019, I loved it because it introduced alot of new characters to RWBY and a lot of backstory even though my big brother hates the animation and I love it I cant wait to watch more RWBY</p>
<br/>
</div>
<div class="card">
<h2>Spider-Man: Far from Home(2019)</h2>
<h4>June 4, 2019, Spider-Man: Far From Home is Following the events of Avengers: Endgame (2019), Spider-Man must step up to take on new threats in a world that changed forever.</h4>
<img src="Spider-Man.jpg" alt="Spider-Man: Far from Home">
<p>I watched on July 2, 2019, my Big Brother took me and my sister to Spider-Man: Far from Home as a surprise and was a great a movie and my Brother Neil thought Mysterio was great. But then the credits ruined it the whole revealing identity. what is a head-scratcher is there were only a couple of people because it was the day it comes into theaters. and in the quote of Neil "The comics after Civil War where horrible" and my Dad always told me <b>"Joshua one of these days MARVEL
will have a downfall and decrease"</b> after thinking out it I think the day has come where MARVEL has failed</p>
<br/>
</div>
<h2>RWBY: Volume 1(2013)</h2>
<h4>June 16, 2019, RWBY is about In the land of Remnant, where boys and girls train to become huntsman and huntresses, 4 color-coded Teenage girls form who Team RWBY and train to fight crime and monsters known as the Grimm, team up to fight the mysterious shadow organization in this action-packed animated series from Rooster Teeth.</h4>
<div class="image-wrapper">
<img src="RWBY.png" alt="RWBY">
</div>
<p>I watched RWBY: Volume 1 on June 14, 2019, it was an Amazing Movie or Tv Show cause I thought it was a Movie but in actuality it was a TV Show ever episode combined into a movie and I originally got into the TV Show because I would listen to the soundtrack on Pandora and then I decided that since it was on Amazon Prime I would watch it and that the category: American animated series</p>
<br/>
<div class="card">
<h2>Dragon Prince(2018)</h2>
<h4>June 10, 2019, Dragon Prince is about An extraordinary discovery inspires two human princes and an elven assassin to team up on an epic quest to bring peace to their warring lands.</h4>
<div class="image-wrapper">
<img src="http://www.nerdreport.com/wp-content/uploads/2019/02/MV5BZDkzYzZjMmItYmE1Ny00MzJkLWFkOGItOWRiNjA0M2RiOWY2XkEyXkFqcGdeQXVyMTMxODk2OTU#._V1_.jpg" alt="Dragon_Prince">
</div>
</div>
<p>I watched Dragon Prince on June 1, 2019, It was Amazing, Excellent, Stunning, Beautiful it was a TV Show. People recommended it to my sister we were laughing almost the entire time. And we were shocked to know the actor of Zuko(The Last Airbender) We loved it can't wait for the next episode</p>
<br/>
<div class="card">
<h2>Good Omens</h2>
<h4>June 2, 2019, Good Omens is a television serial based on the 1990 novel Good Omens: The Nice and Accurate Prophecies of Agnes Nutter, Witch by Terry Pratchett and Neil Gaiman. It's about A tale of the bungling of Armageddon features an angel, a demon, an eleven-year-old Antichrist, and a doom-saying witch.</h4>
<div class="image-wrapper">
<img src="https://i2.wp.com/www.geektown.co.uk/wp-content/uploads/2017/08/goodomens.jpg?zoom=2.625&y=850%2C370&ssl=1" alt="Good_Omens">
</div>
</div>
<p>I watched Good Omens on May 31, 2019, It's an amazing TV show we were laughing almost the whole time throughout the first Episode and the TV Show that Book is Based on is something I enjoy because they are making fun of Christianity.</p>
<br/>
<div class="card">
<h3>IT(2017)</h3>
<h5>May 3, 2019, IT retroactively as IT Chapter One)is a 2017 American supernatural horror film based on Stephen King's 1986 novel of the same name. Produced by New Line Cinema, RatPac-Dune Entertainment, KatzSmith Productions, Lin Pictures, Vertigo Entertainment, and distributed by Warner Bros. It is the second adaptation of the novel following Tommy Lee Wallace's 1990 miniseries, and a sequel is planned. The film tells the story of the summer of 1989 In the Town of Derry a group of bullied kids "The Losers Club" together to destroy a shape-shifting monster, which disguises itself as a clown and preys on the children of Derry, their small Maine town
</h5>
<div class="image-wrapper">
<img src="https://upload.wikimedia.org/wikipedia/en/5/5a/It_%282017%29_poster.jpg" alt="IT">
<p>I watched IT on May 3, 2019, an Holy Shit this scared me out of my skin and gave me chills down my spine and I was cussing almost the entire movie it scared the Living Shit out of me. I can't wait for Chapter 2 because it has James McAvoy
</div>
</div>
<div class="card">
<h3>TAG(2018)</h3>
<h5>April 29, 2019, Tag is a 2018 American comedy film directed by Jeff Tomsic(in his directorial debut)
and written by Rob McKittrick and Mark Steilen. The film is based on a true story that was published in The Wall Street Journal about a group of grown men played by Ed Helms, Jake Johnson, Hannibal Buress, Jon Hamm, Jeremy Renner, who spend one month a year playing a game of tag.
</h5>
<div class="image-wrapper">
<img src="https://image.tmdb.org/t/p/w500/eXXpuW2xaq5Aen9N5prFlARVIvr.jpg" alt="TAG" >
<p>I watched Tag on April 29, 2019, I watched Tag and OMG it was Terrific and
I imagine me all grown up and playing Tag with friends because I also love Tag.
I would give it 100% on Rotten Tomato and Me and Dad laughed almost the entire Movie</p>
</div>
</div>
<div class="card">
<h3>Avengers: Endgame(2019)</h3>
<h5>April 30, 2019, Avengers: Endgame takes place 22 or 21 days After the devastating events of Avengers: Infinity War(2018) the universe is in ruins.
With the help of remaining allies, the Avengers assemble once more to undo Thanos' actions and restore order to the universe.
It was filmed back to back with Avengers: Infinity War based on the Marvel Comics film was Directed by Anthony and Joe Russo and
Avengers: Endgame was widely anticipated, and Disney backed the film with extensive marketing campaigns. It also broke numerous box office records and has grossed over $1.4 billion worldwide,
becoming the highest-grossing film of 2019, as well as the eighth highest-grossing film of all time </h5>
<div class="image-wrapper">
<img src="https://cnet3.cbsistatic.com/img/xLgPeuq6CW9A2N2V2kKmhMT6h2o=/1092x0/2019/03/14/dd4d8d9c-5f16-4f6b-a7d8-65a00d095c2c/avengers-endgame-poster-square-crop.jpg" alt="AVENGERS_ENDGAME">
</div>
</div>
<p>I watched Avengers: Endgame on April 28, 2019, it was a masterpiece, me and my Dad, my Big Sister, my Big Brother all loved it we were laughing almost the entire Movie and 100% on Rotten Tomato.
and I loved the thought of them Time Traveling and the look on my Dads face was priceless when they time travled 2013
<br/>
</body>
</html>
let filterInput = document.getElementById('filterInput');
... selects the first element in DOM with an id value of filterInput. Unfortunately, you have 0 elements in your markup with that id value. You probably want to use
let filterInput = document.getElementById('filterinput');
^
In the future, whenever you're getting unexpected results, use a console.log() (or a breakpoint) to look at what's inside your variables. In your case,
let filterInput = document.getElementById('filterInput');
console.log(filterInput);
... would have immediately revealed the problem.
Welcome to StackOverflow!
See it working:
let filterInput = document.getElementById('filterinput');
filterInput.addEventListener('keyup', filterNames);
function filterNames() {
const filterValue = filterInput.value.toUpperCase();
const ul = document.getElementById('names');
const li = ul.querySelectorAll('li.collection-item');
for (let i = 0; i < li.length; i++) {
const a = li[i].getElementsByTagName('a')[0];
if (a.innerHTML.toUpperCase().indexOf(filterValue) > -1) {
li[i].style.display = '';
} else {
li[i].style.display = 'none';
}
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/css/materialize.css" rel="stylesheet"/>
<div class="container">
<h1 class="center-align">
Movies Watched
</h1>
<h4 class="center-align">
*Spoiler Warning*
</h4>
<input type="text" id="filterinput" placeholder="Search Movie">
<ul id="names" class="collection with-header">
<li class="collection-header">
<h5>2019</h5>
</li>
<li class="collection-item">
<a href='#'>ARMY OF DARKNESS</a>
</li>
<li class="collection-item">
<a href='#'>THE CLOVERFIELD PARADOX</a>
</li>
<li class="collection-item">
<a href='#'>CLOVERFIELD (2008)</a>
</li>
<li class="collection-item">
<a href='#'>INSIDIOUS: CHAPTER 2</a>
</li>
<li class="collection-item">
<a href='#'>INSIDIOUS</a>
</li>
<li class="collection-item">
<a href='#'>TERMINATOR: DARK FATE (2019)</a>
</li>
<li class="collection-header">
<h5>November</h5>
</li>
<li class="collection-item">
<a href='#'>EVIL DEAD II</a>
</li>
<li class="collection-item">
<a href='#'>TRANSFORMERS</a>
</li>
<li class="collection-item">
<a href='#'>JOKER</a>
</li>
<li class="collection-item">
<a href='#'>INDEPENDENCE DAY</a>
</li>
<li class="collection-item">
<a href='#'>MISSION: IMPOSSIBLE FALLOUT M:I-6</a>
</li>
<li class="collection-item">
<a href='#'>BLACK MIRROR (2011 - )</a>
</li>
<li class="collection-item">
<a href='#'>THE LION KING(2019)</a>
</li>
<li class="collection-item">
<a href='#'>TERMINATOR 2: JUDGEMENT DAY</a>
</li>
<li class="collection-item">
<a href='#'>MISSION: IMPOSSIBLE ROUGE NATION M:I-5</a>
</li>
<li class="collection-item">
<a href='#'>MISSION: IMPOSSIBLE GHOST PROTOCOL M:I-4</a>
</li>
<li class="collection-item">
<a href='#'>DADDY'S HOME 2</a>
</li>
<li class="collection-item">
<a href='#'>HAPPY DEATH DAY 2 U</a>
</li>
<li class="collection-item">
<a href='#'>DADDY'S HOME</a>
</li>
<li class="collection-item">
<a href='#'>HAPPY DEATH DAY</a>
</li>
<li class="collection-item">
<a href='#'>THE MAZE RUNNER</a>
</li>
<li class="collection-item">
<a href='#'>ASSASSIN'S CREED</a>
</li>
<li class="collection-item">
<a href='#'>Galaxy Quest(1999)</a>
</li>
<li class="collection-header">
<h5>October</h5>
</li>
<li class="collection-item">
<a href='#'>Goosebumps 2(2018)</a>
</li>
<li class="collection-item">
<a href='#'>THE EVIL DEAD(1981)</a>
</li>
<li class="collection-item">
<a href='#'>EVIL DEAD(2013)</a></li>
<li class="collection-item">
<a href='#'>LOVE DEATH + ROBOTS(2018)</a>
</li>
<li class="collection-header">
<h5>September</h5>
</li>
<li class="collection-item">
<a href='#'>MAMMA MIA</a>
</li>
<li class="collection-header">
<h5>2018</h5>
</li>
<li class="collection-item">
<a href='#'>ANON(2018)</a>
</li>
</ul>
</div>
Related
Data-toggle won't work for the following code
Can anyone please tell me why my tabs aren't working? it's happening the same with the navigation bar dropdown button. <div class="col-12"> <h2>Corporate Leadership</h2> <ul class = "nav nav-tabs"> <li class = "nav-item"> <a class = "nav-link active" href = "#peter" role = "tab" data-toggle = "tab">Peter Pan, CEO</a> </li> <li class = "nav-item"> <a class = "nav-link active" href = "#witherspoon" role = "tab" data-toggle = "tab">Dhanasekaran Witherspoon, CFO</a> </li> <li class = "nav-item"> <a class = "nav-link active" href = "#tang" role = "tab" data-toggle = "tab">Agumbe Tang, Chief Taste Officer</a> </li> <li class = "nav-item"> <a class = "nav-link active" href = "#alberto" role = "tab" data-toggle = "tab">Alberto Somayya, Executive Chef</a> </li> </ul> <div class = "tab-content"> <div role = "tabpanel" class = "tab-pane fade show active" id = "peter"> <h3>Peter Pan <small>Chief Epicurious Officer</small></h3> <p class="d-none d-sm-block">Our CEO, Peter, credits his hardworking East Asian immigrant parents who undertook the arduous journey to the shores of America with the intention of giving their children the best future. His mother's wizardy in the kitchen whipping up the tastiest dishes with whatever is available inexpensively at the supermarket, was his first inspiration to create the fusion cuisines for which <em>The Frying Pan</em> became well known. He brings his zeal for fusion cuisines to this restaurant, pioneering cross-cultural culinary connections.</p> </div> <div role = "tabpanel" class = "tab-pane fade" id = "witherspoon"> <h3>Dhanasekaran Witherspoon <small>Chief Food Officer</small></h3> <p class="d-none d-sm-block">Our CFO, Danny, as he is affectionately referred to by his colleagues, comes from a long established family tradition in farming and produce. His experiences growing up on a farm in the Australian outback gave him great appreciation for varieties of food sources. As he puts it in his own words, <em>Everything that runs, wins, and everything that stays, pays!</em></p> </div> <div role = "tabpanel" class = "tab-pane fade" id = "tang"> <h3>Agumbe Tang <small>Chief Taste Officer</small></h3> <p class="d-none d-sm-block">Blessed with the most discerning gustatory sense, Agumbe, our CTO, personally ensures that every dish that we serve meets his exacting tastes. Our chefs dread the tongue lashing that ensues if their dish does not meet his exacting standards. He lives by his motto, <em>You click only if you survive my lick.</em></p> </div> <div role = "tabpanel" class = "tab-pane fade" id = "alberto"> <h3>Alberto Somayya <small>Executive Chef</small></h3> <p class="d-none d-sm-block">Award winning three-star Michelin chef with wide International experience having worked closely with whos-who in the culinary world, he specializes in creating mouthwatering Indo-Italian fusion experiences. He says, <em>Put together the cuisines from the two craziest cultures, and you get a winning hit! Amma Mia!</em></p> </div> </div> </div> please ignore the line below stackoverflow wasn't allowing me to post the question... AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAJdddddddddddddddddddddddddddoooooooooooooooooooooooooooooooooooooooooooooooooooooooowwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwddddddddddddddddddddddddddddddddddddd
What and how exactly is "not working"? In react you have to use "className" attribute intstead of "class".
Cypress - Choosing an option within a dropdown menu
Trying to use the bn.com to run a simple test to search for a book and sort by Lowest Price first. The HTML of that dropdown section after searching the bookstore for "left hand of darkness" is as follows:
<div class="sort-by">
<select name="sorter" id="sortProducts1" class="hidden selectBox" title="Sort by:" data-selectbox="" style="display: none;">
<option value="/s/left+hand+of+darkness" selected="selected">Top Matches</option>
<option value="/s/left+hand+of+darkness?Ns=P_Sales_Rank%7C0">Best Sellers</option>
<option value="/s/left+hand+of+darkness?Ns=P_Publication_Date%7C1">Newest to Oldest</option>
<option value="/s/left+hand+of+darkness?Ns=P_Publication_Date%7C0">Oldest to Newest</option>
<option value="/s/left+hand+of+darkness?Ns=P_Sale_Price%7C0">Price - Low to High</option>
<option value="/s/left+hand+of+darkness?Ns=P_Sale_Price%7C1">Price - High to Low</option>
<option value="/s/left+hand+of+darkness?Ns=P_Display_Name%7C0">Title - A to Z</option>
<option value="/s/left+hand+of+darkness?Ns=P_Display_Name%7C1">Title - Z to A</option>
</select>
<div class="selectBox-container">
<a class="selectBox hidden selectBox-dropdown selectBox--filled" title="Sort by:" tabindex="0" style="display: inline-block;" aria-labelledby="sortProducts1-button-label" id="sortProducts1-replacement" aria-expanded="false" aria-owns="selectBox-2">
<span class="selectBox-title">Sort by:</span>
<span class="selectBox-label" id="sortProducts1-button-label">Top Matches</span>
<span class="selectBox-arrow"></span>
</a>
<ul class="selectBox-dropdown-menu selectBox-options hidden-selectBox-dropdown-menu" style="display: none;" id="selectBox-2" role="listbox">
<li id="sortProducts1-option-0" role="option">
<a rel="/s/left+hand+of+darkness">Top Matches</a>
</li>
<li id="sortProducts1-option-1" role="option">
<a rel="/s/left+hand+of+darkness?Ns=P_Sales_Rank%7C0">Best Sellers</a>
</li>
<li id="sortProducts1-option-2" role="option">
<a rel="/s/left+hand+of+darkness?Ns=P_Publication_Date%7C1">Newest to Oldest</a>
</li>
<li id="sortProducts1-option-3" role="option">
<a rel="/s/left+hand+of+darkness?Ns=P_Publication_Date%7C0">Oldest to Newest</a>
</li>
<li id="sortProducts1-option-4" role="option">
<a rel="/s/left+hand+of+darkness?Ns=P_Sale_Price%7C0">Price - Low to High</a>
</li>
<li id="sortProducts1-option-5" role="option">
<a rel="/s/left+hand+of+darkness?Ns=P_Sale_Price%7C1">Price - High to Low</a>
</li>
<li id="sortProducts1-option-6" role="option">
<a rel="/s/left+hand+of+darkness?Ns=P_Display_Name%7C0">Title - A to Z</a>
</li>
<li id="sortProducts1-option-7" role="option">
<a rel="/s/left+hand+of+darkness?Ns=P_Display_Name%7C1">Title - Z to A</a>
</li></ul></div>
</div>
I can't seem to get the option in the dropdown selected.
My most recent attempt looks like this:
describe('Visits book store and finds cheapest book', () => {
it('Visits book store and finds cheapest book', () => {
cy.visit('https://www.barnesandnoble.com/');
cy.get(`[id="searchBarBN"]`).type('Left Hand of Darkness');
cy.get('.icon-search-2').click();
cy.get(`[id="sortProducts1-replacement"]`).find(`[id="sortProducts1-option-4"]`)
.click({ force: true });
There are no failures, but the sort option nevertheless remains unselected since the DOM does not have the book results sorted by price ascending.
Looking for some help in making sure I'm correctly selecting the dropdown choice that's needed.
You most likely need to wait for the results to be returned after the click (cy.get('.icon-search-2').click()) before trying to select any elements or make assertions. Cypress is trying to select elements that have not been rendered.
This can be done using cy.wait against the route for the results.
There are several examples in the Cypress Real World App, a payment application to demonstrate real-world usage of Cypress testing methods, patterns, and workflows of waiting on network requests that demonstrate this concept.
Adding content via CSS with data attribute
I would like to append dates to the end of several strings of text with screens smaller that 500px.
My HTML is:
<div class="left-section" id="activities">
<ul>
<li data-string="September 2012 - May 2014">National Student Advertising Competition</li>
<li data-string="January 2012 - May 2014">Advertising Club</li>
<li data-string="November 2012 - May 2013">Interactive Marketing Association | Student Board Member</li>
<li data-string="September 2011 - May 2014">University Intramural Co-Ed Volleyball and Soccer</li>
</ul>
</div>
And my CSS in the media query is:
#activities:after {
content: " - " attr(data-string);
}
All that displays are the strings and then after the list is the " - "
You need a space and * before the :after to get everything inside #activities like this:
#activities *:after {
content: " - " attr(data-string);
}
<div class="left-section" id="activities">
<ul>
<li data-string="September 2012 - May 2014">National Student Advertising Competition</li>
<li data-string="January 2012 - May 2014">Advertising Club</li>
<li data-string="November 2012 - May 2013">Interactive Marketing Association | Student Board Member</li>
<li data-string="September 2011 - May 2014">University Intramural Co-Ed Volleyball and Soccer</li>
</ul>
</div>
Hope it helped!
iMacros - TAG specific element with XPATH
and thank you in advance for taking a minute of your valuable time to solve this puzzle and educate me on the topic. (please forgive my terminology) I am using the following code in iMacros for Firefox to select an element on the site, which works fine, as long as the element exists and is in the same order. TAG XPATH=".//*[#id='contacts']/ul/li[1]/div/ul/li[1]" EXTRACT=TXT Which in this case would result in "New York, NY" From: <div id="contacts" class="article expanding_group"> <div class="article-header"> <!-- Public Company = Block. Public Name/Title = Restricted. --> <ul class="list"> <li class="list_item"> <div class="list_item_content contact-detail"> <div class="edit expanded"> <ul> <li class="name"> New York, NY </li> <li class=" ellipsis"> http://www.a24films.com </li> <li class="info "> +1 646 568 6015 <span class="attributes">phone</span> </li> <li class="info ellipsis"> info#a24films.com </li> <li class="address ">601 West 26th Street</li> <li class="address ">Suite 1740</li> <li class="address "> New York, NY 10001 </li> <li class="address ">USA</li> <li class="address "> </ul> </div> However, if the field is missing, it will skip to the next field which will, in essence, result in data being inserted into the incorrect row. E.g. if I am expecting columns "name, phone, address", and it is missing phone, it will result in "name, address, blank". I can see it I want only when list item 1's class="name", so my question is: is there a way to specify that I want the list item number 1 that contains "name" in class? I have tried a variation of strings to no avail, but I woulf imaging something like this is possible: TAG XPATH=".//*[#id='contacts']/ul/li[1]/div/ul/li[1]/name" EXTRACT=TXT Thank you for your time, Reinaldo
You can try the following code: TAG XPATH=".//*[#id='contacts']/ul/li[1]/div/ul/li[#class='name'][1]" EXTRACT=TXT
Try this Xpath: .//*[#id='contacts']//li[#class='name'][1] I don't think #Shugar's code will work.
set two elements width equal to container using bootstrap?
I have two div inside container and those divs should be settled according to the width of container and there should be a proper space between them <div id="testimonial-wrapper"> <div class="container"> <ul class="inline-section row"> <li class="signature-interior-features green-background col-sm-5 col-md-5"> <div class="signature-interior-content"> <h2>Signature Interior Features</h2> <ul> <li>Full-sized washer and dryer in every home</li> <li>Walk-in closets and walk-in pantries and vaulted ceilings available*</li> <li>Appliance packages with multi-cycle dishwasher, range and frost-free refrigerators</li> <li>Large stainless steel sinks with disposal</li> <li>Linen closets</li> <li>Cozy wood-burning fireplace in every home</li> <li>Spacious patios with exterior storage</li> <li>Individual hot water heaters</li> <li>Electric HeatM</li> <li>Pre-wired for phone, cable and high-speed Internet access</li> <li>Interior packages available*</li> </ul> </div><!--signature-interior-content-closed--> </li> <li class="community-elements-details sky-background col-sm-5 col-md-5"> <div class="community-elements-content"> <h2>Community Elements</h2> <ul> <li>Clubhouse with social room and kitchen</li> <li>Athletic center with cardio equipment and free weights</li> <li>Sparkling outdoor swimming pool</li> <li>Invigorating indoor spa</li> <li>Complimentary tanning studio</li> <li>Sports court</li> <li>Close proximity to the Sounder commuter train and the Super Mall</li> <li>Only minutes to Emerald Downs and I-5 with easy access to Highway 167 and Highway 18</li> <li>Professional on-site maintenance</li> <li>Professional on-site management *in select apartment home</li> </ul> </div><!--community-elements-content-closed--> </li> </ul> </div><!--container-closed--> </div><!--testimonial-wrapper-closed-->