I want to make Jade mixin which will output something like this
<div class="progress__graph">
<div class="progress__bar two">
<p>Web Design 80%</p>
</div>
</div>
<div class="progress__graph">
<div class="progress__bar three">
<p>Web Design 80% </p>
</div>
</div>
So far I have this but I can't figure out how to make it so I can add classes as well ( 'two', 'three' etc)
mixin progress(text)
.progress__graph
.progress__bar
p #{text}
You can use the following mixin in jade:
mixin progress(text, className)
.progress__graph
.progress__bar(class=className)
p #{text}
+progress('Text goes here', 'one')
+progress('More text here', 'two')
Which will render the following HTML:
<div class="progress__graph">
<div class="progress__bar one">
<p>Text goes here</p>
</div>
</div>
<div class="progress__graph">
<div class="progress__bar two">
<p>More text here</p>
</div>
</div>
Hope that helps. You can see an example of this here - http://codepen.io/AdamCCFC/pen/dXdWXy
Related
I have html that looks something like the below.
dataId below is the data-id that has just been scrolled over. At this point I want to get the closes data-id to this element. I have taken many approaches, unfortunately none of which are working.
<div data-id='12345'>
<p>hello there</p>
</div>
<div class='break'>
<p>no man's land</p>
</div>
<div data-id='5678'>
<p>Go for it</p>
</div>
<div class='test'>
<p>just a test</p>
</div>
<div class='example'>
<p>example</p>
</div>
<div data-id='5789'>
<p>Last one</p>
</div>
The js looks like this:
const firstDiv = $('div').attr('data-id["12345"]')
const nextDiv = firstDiv.next().attr('data-id');
// I am looking for the nextDiv to give me 5678
My website shows different articles each in one thumbnail.
The problem is that the thumbnails seems to float everywhere. They are not aligned as it should be.
This is how my HTML code looks like.
</head>
<body>
<div class="top-bar">
<div class="logo"></div>
</div>
<div class="title-bar">
</div>
<br></br>
<div class="col-md-4">
<div class="thumbnail">
<img alt="300x200" src="[PIC]" width="300" />
<div class="caption">
<h3>
[Name]
</h3>
<p>
[Text]
</p>
<p>
<a class="btn btn-primary" href="index.php?action=DETAILE&id=[ID]">Go!</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
The result is that the columns are not aligned. There are 3 columns next to each other, but the height differs, as well the position on the page.
How can I solve this?
Now it looks like a staircase like in the code with the
I want:
Box 1. Box2. Box 3.
Bootstrap 3 column layout will be like
<div class="col-md-12">
<div class="row">
<div class="col-md-4">.col1</div>
<div class="col-md-4">.col2</div>
<div class="col-md-4">.col3</div>
</div>
</div>
To maintain equal height for all boxes assign equal height for all images,h3 and p tags(which are in the box)
Example snippet https://bootsnipp.com/snippets/featured/store-product-layout
and in your html code there are many closing < /div> tags check html validations once.
A list of different div elements with same class name can be written briefly with the help of jade preprocessor like :
-var num = 4
while num--
.c
which is equivalent to in html :
<div class="c"> </div>
<div class="c"> </div>
<div class="c"> </div>
<div class="c"> </div>
Is there any way to generate the list of different div elements with different class names with the help of some other loop functions in Jade or Haml or Markdown or Slim or any other html preprocessor.
<div class="c1"> </div>
<div class="c2"> </div>
<div class="c3"> </div>
<div class="c4"> </div>
Yes. In Jade you could do it like this:
- var num=1
while num <= 4
div(class="c#{num++}")
Or you could put your classnames in an array and do it like this:
- var arr = ['c1','c2','c3','c4']
each i in arr
div(class=i)
Both ways will give you the output of:
<div class="c1"> </div>
<div class="c2"> </div>
<div class="c3"> </div>
<div class="c4"> </div>
I'm trying to make a simple page header with bootstrap 3. Here's the code:
<div class="page-header">
<h1>Text on the left</h1>
<h3 class="text-right">This to the right but on the same line</h3>
</div>
Here's a jsfiddle to try: http://jsfiddle.net/DTcHh/2450/
Basically I just want to have text on the left and right inside the page-header, but on the same line.
The usual tricks of using float:left and float:right as with normal html "break" the page-header, meaning the text is properly aligned but is displayed outside (under) the page-header, which remains empty.
Any clues?
you can use "pull-right" and "pull-left" classes, with "clearfix" class after.
(Bootstrap 3)
<div class="page-header">
<div class="pull-left">
<h1>Text on the left</h1>
</div>
<div class="pull-right">
<h3 class="text-right">This to the right but on the same line</h3>
</div>
<div class="clearfix"></div>
</div>
also you can adjust line height on the h3 tag in the right, if you want to match with h1
Fiddle for Bootstrap 3: https://jsfiddle.net/darkosss/dy9wjk2q/
(as of Bootstrap 4.1)
use float-left and float-right instead. You still need the clearfix.
<div class="page-header">
<div class="float-left">
<h1>Text on the left</h1>
</div>
<div class="float-right">
<h3 class="text-right">This to the right but on the same line</h3>
</div>
<div class="clearfix"></div>
</div>
Fiddle for Bootstrap 4: https://jsfiddle.net/darkosss/eozs65qb/
if you are using Bootstrap, you should do something like
<div class="page-header">
<div class="row">
<div class="col-md-6">
<h1>Text on the left</h1>
</div>
<div class="col-md-6">
<h3 class="text-right">This to the right but on the same line</h3>
</div>
</div>
</div>
if you want to "stylize" the h1, h2, etc, change it to "display:block" and you'll have to add a "width" attribute anyway
use the following structure to position with bootstrap:
<div class= 'container'>
<div class='row'>
<div class ='md-col-4'>
<h1>Text on the left</h1>
</div>
<div class = 'md-col-4.col-md-offset-4'>
<h3 class='text-right'>This to the right but on the same line</h3>
</div>
</div>
Think of the row as a grid across of 12. So fist 4 left 3rd. 2nd div is the 3rd third with a 4 grid offset or gap.
http://getbootstrap.com/css/
I would like to select only the p tag without any attributes from the following html code.
<div id="review">
<div class="partial_review">
<div class="1">.....</div>
<div class="2">
<div class='inner_Bubble'>
<div class="entry">
<p class="partial_entry>it was a good...</p>
</div>
</div>
</div>
</div>
<div class="full_review">
<div class="1">.....</div>
<div class="2">
<div class='inner_Bubble'>
<div class="entry">
<p>it was a good trip.</p>
</div>
</div>
</div>
</div>
</div>
I have tried //div[#class='entry']/p[not class = 'partial_entry']/text(). But, its not working.
If you want all p elements with no attributes at all then the simplest path would be
//p[not(#*)]
If you want to check for the absence of class specifically then
//p[not(#class)]