<polymer-dragula>
<div class="row-holder">
<div class="column">
<p>item-1</p>
</div>
<div class="column">
<p>item-2</p>
</div>
<div class="column">
<p>item-3</p>
</div>
<div class="column">
<p>item-4</p>
</div>
<div class="column">
<p>item-5</p>
</div>
</div>
</polymer-dragula>
This doesn't work.
For drag and drop i will recommend you
polymer-sortablejs
its also available
"polymer-sortablejs": "bmwalters/polymer-sortablejs#2.0-preview"
easy to handle and impliment
Perhaps you forgot to read the information mentioned in the github.
Information: Before bevacqua/dragula#470 gets merged into dragula this
element might not work correctly inside Shadow DOM.
Related
I'm changing a database using phpmyadmin with several html pages inside it and I would like to remove, from all these pages, all the <div> and other tags that contain a certain class or id.
Example:
Case 1
<div class="undesirable">
<div class="container">
<div class="row">
<div class="col1"></div>
</div>
</div>
</div>
Case 2
<div class="undesirable">
<div class="container">
<div class="row">
<div class="col1"></div>
<div class="col2"></div>
</div>
</div>
</div>
i would like to remove all <div> that contain the class="undesirable". In some cases, there is still the possibility of appearing as class="pre_undesirable", or something similar.
Initially I thought of using regex, but as there are variations in htmls, code breaks are occurring, as there is no way to know when the <\div> will end.
Possibly the answer would be HTML parser, but I can't understand how to use it. Any indication of where to start?
Since you are dealing with html, you probably should use an html parser and search for the removal target using xpath. To demonstrate, I'll change your html a bit:
$original=
'<html><body>
<div class="undesirable">
<div class="container">
<div class="row">
<div class="col1"></div>
</div>
</div>
</div>
<div class="keepme">
<div class="container">
<div class="row">
<div class="col1"></div>
<div class="col2"></div>
</div>
</div>
</div>
<div class="pre_undesirable">
<div class="container">
<div class="row">
<div class="col1"></div>
<div class="col2"></div>
</div>
</div>
</div>
<div class="keepme">
<div class="container">
<div class="row">
<div class="col1"></div>
<div class="col2"></div>
</div>
</div>
</div>
</body>
</html>
';
$HTMLDoc = new DOMDocument();
$HTMLDoc->loadHTML($original);
$xpath = new DOMXPath($HTMLDoc);
$targets = $xpath->query('//div[contains(#class,"undesirable")]');
foreach($targets as $target){
$target->parentNode->removeChild($target);
}
echo $HTMLDoc->saveHTML();
The output should include only the two "keep me" <div>s.
We can make use D3JS to remove or append any the HTML elements by class name or id.
We can make use of Select() and Selectall() for the selection of the particular elements in the HTML. Incase if we want to append any div tag use append('div') to insert the div for the data.
<script>
function remove()
{
d3.select(.undesirable)
.selectAll("li")
.exit()
.remove()
}
</script>
I tried to format my HTML Selection of HTML Elements in Compact View I tried too many Visual Studio Extension but none of them working like Ctrl + J and Prettify so on
Here is the example of my code look likes
<div class="example">
<div class="section">
<div class="widget">
<div class="title">
<h3 class="title">I am a developer</h3>
</div>
</div>
</div>
</div>
I need Like this Below
<div class="example"><div class="section">
<div class="widget">
<div class="title"><h3 class="title">I am a developer</h3></div>
</div></div></div>
Like above this format there is too much code I need to format with help of any extension in VS code if possible Suggest me
Any Help is Highly Appreciated
it is always good to format your code well using indentation. This helps one identify parent and child elements especially when an element has more than to child elements.
e.g.
<div class="example">
<div class="section">
<div class="widget">
<div class="title">
<h3 class="title">I am a developer</h3>
</div>
</div>
</div>
</div>
The HTML code is:
<div id="topNavigationBar" style="bottom: 0px; display: block;">
<div id="topNavi_appSurrogates">
<div class="topNavi_appSurrogate prototype">
<div class="topNavi_appSurrogate_content">
<div class="function refresh_app">Refresh</div>
<div class="function show_app">Show</div>
<div class="function hide_app">Hide</div>
<div class="function quit_app">...</div>
</div>
</div>
<div class="topNavi_appSurrogate" style="left: 279px; display: block;">
<div class="topNavi_appSurrogate_content">
<div class="function refresh_app">Refresh</div>
<div class="function show_app">Show</div>
<div class="function hide_app">Hide</div>
<div class="function quit_app">Quit App1</div>
</div>
</div>
<div class="topNavi_appSurrogate">
<div class="topNavi_appSurrogate_content">
<div class="function refresh_app">Refresh</div>
<div class="function show_app">Show</div>
<div class="function hide_app">Hide</div>
<div class="function quit_app">Quit App2</div>
</div>
</div>
</div>
</div>
Initially this question was supposed to be different but I found a solution in "Similar questions". There are multiple div elements with Refresh text in the code above. I was looking for one specific which has a particular application name in the last sibling's text.
My solution is:
Click Element xpath://div[text()='Quit App1']/preceding::*[3]
However, I don't understand why
Click Element xpath://div[text()='Quit App1']/preceding::div[3]
doesn't work. There are only div elements and I'm not looking for any other.
I visited many websites that explain XPath but haven't found the answer. Please help me understand it.
Your expectation is correct. Both
//div[text()='Quit App1']/preceding::*[3]
and
//div[text()='Quit App1']/preceding::div[3]
should select the same element from your XML:
<div class="function refresh_app">Refresh</div>
If you're seeing different results in Robot Framework, then report an issue with the developers.
I am struggling adding spacing (or margin) between columns using the grid system in bootstrap. My html and css is below. I could not get any of the solutions posted online to work. The goal is spacing between col-8 and col-4. Any suggestions? Thanks!
HTML:
<div class="container">
<div class="row">
<div class="col-md-8">
hello
</div>
<div class="col-md-4">
<div class="row" align="center">
<div class="col-md-4">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/github_circle_black-128.png" class="icon-resize" alt="github">
</div>
<div class="col-md-4">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/linkedin_circle_black-128.png" class="icon-resize" alt="linkedin">
</div>
<div class="col-md-4">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/twitter_circle_black-128.png" class="icon-resize" alt="twitter">
</div>
</div>
</div>
</div>
</div>
CSS:
.container {
max-width: 960px;
height: 100%;
}
here is what you're looking for:
gridGutterWidth
It's usual to download the raw (.scss or .less) versions of bootstrap, so you can control the css output at build time. If you don't use any of them, you may find the http://getbootstrap.com/customize/ comfortable.
You could apply inline by
<div class="col-md-4" style="padding-left:1em">
So I'm trying to mimic some of the look of this website:
http://quay.com.au/
Since I'm intrigued by the design. I'm wondering how to go about overlapping containers in rows using Bootstrap, since I've looked into the code and it seems like that's what they're using.
This is what I have for HTML so far:
<div class="row">
<div class="col-md-5 col-md-offset-2"><div class="about img-rounded">
<h3>About</h3>
<p><b>Info1</b></p>
<p>Info2 </p>
</div></div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-1"></div>
<div class="col-md-3 col-md-offset-2"><div class="projects img-rounded">
<h3>Projects</h3>
<img class="img-responsive" src="img">
<p>Description</p>
<img class="img-responsive" src="img">
<p>Description</p>
<img class="img-responsive" src="img">
<p>Description</p>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3"><div class="work img-rounded">
<h3>Work</h3>
</div></div>
</div>
</div>
Any suggestions? Something to do with z-index in css is my only guess...
Looking at the code on the site the container has a position: relative and to get the sections overlapping the sections are offset from the top, like The Query Experience
.page-index .pattern-gray {
top: -240px;
}
quick bootply http://www.bootply.com/Blms3j1GjO
What you're looking for is called Parallax Scrolling. There are several tutorials out there, and a full implementation would be difficult to include in one answer here.
Here's a good resource from David Walsh on this
Basically, this is a combination of background-attachment: fixed and overlapping div elements, and some javascript to flop the selected image when it's hidden.
I hope that helps.