can someone help me out how to generate multiple cards in HTML without adding separate div for each card? the thing is I want the code length to be shorter so I want to use single that is applicable to shorten the length and generate the cards to display in a HTML page.As I'm new to development I'm not able to solve this problem in spite of many searches.
please see this
<div class="row">
<div class="col m4">
<div class="card">
<div class="card-image">
<img src="http://www.ilikewallpaper.net/ipad-wallpapers/download/2268/Square-Pattern-ipad-wallpaper-ilikewallpaper_com.jpg">
<span class="card-title" style="width:100%; background: rgba(0, 0, 0, 0.5);">Sample1</span>
</div>
<div class="card-content">
<p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
This is a link
</div>
</div>
</div>
<div class="col m4">
<div class="card">
<div class="card-image">
<img src="http://www.ilikewallpaper.net/ipad-wallpapers/download/2268/Square-Pattern-ipad-wallpaper-ilikewallpaper_com.jpg">
<span class="card-title" style="width:100%; background: rgba(0, 0, 0, 0.5);">Sample2</span>
</div>
<div class="card-content">
<p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
This is a link
</div>
</div>
</div>
</div>
<div class="fixed-action-btn click-to-toggle" style="bottom: 45px; right: 24px;">
<a class="btn-floating btn-large red">
<i class="large material-icons">menu</i>
</a>
<ul>
<li><a class="btn-floating red" class="fbtn" href="test.html"><i class="material-icons">home</i></a></li>
<li><a class="btn-floating yellow darken-1" class="fbtn" href="#"><i class="material-icons">work</i></a></li>
<li><a class="btn-floating green" class="fbtn" href="about.html"><i class="material-icons">account_circle</i></a></li>
<li><a class="btn-floating blue" class="fbtn" href="contact.html"><i class="material-icons">speaker_notes</i></a></li>
</ul>
</div>
<div class="clear" style="clear:both; height: 100px;">
</div>
<footer class="ui-footer" style="background:#fafafa; width:100%; position:fixed; z-index:99; clear:both;">
<div class="container">
<p>© Yogesh Singh Choudhary</p>
</div>
</footer>
Thank you
Related
Sorry for my elementary question, but I have spent a lot of time and I can't understand the mistake. I have a card and I'd like to show the button on the right inside the card footer. Now the button is displayed on the left.
Thank you in advance!
This is my HTML page where I have the card
<div class="row">
<div class="col-100 tablet-auto desktop-auto">
<div class="card">
<div class="card-content card-content-padding">
<div class="row">
<div class="col-100 tablet-auto desktop-80">
<div class="list">
<ul>
<li>
<!--<a class="item-link smart-select smart-select-init">-->
<a href="#" class="item-link smart-select smart-select-init" data-open-in="popup" data-virtual-list="fruits1" data-page-back-link-text="Indietro">
<select name="fruits1">
<option value="">apple</option>
<option value="">banana</option>
</select>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Fruits 1</div>
</div>
</div>
</a>
</li>
<li>
<a href="#" class="item-link smart-select smart-select-init" data-open-in="popup" data-virtual-list="fruits2" data-page-back-link-text="Indietro">
<select name="fruits2"> </select>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Fruits 2</div>
</div>
</div>
</a>
</li>
</ul>
</div>
<!-- ./ list -->
</div>
<!-- ./ block -->
</div>
<!--col-->
</div>
<!--row-->
</div>
<!--card-content-->
<div class="card-footer">
<div class="row justify-content-right">
<div class="col text-align-right">
<a class="button button-fill" href="#">Search</a>
</div>
</div>
</div>
<!--card-footer-->
</div>
<!--card-->
</div>
<!--col-->
You can resolve issue by distribute a footer to two section, one for left, and second one for right, or by custom style....
You can update your code by adding empty span before your button, then the card footer will display your button in right...
Look at this demo.
<div class="card">
<div class="card-header">Card header</div>
<div class="card-content card-content-padding">Card with header and footer. Card headers are used to display card titles and footers for additional information or just for custom actions.</div>
<div class="card-footer"><span></span><a class="button button-fill" href="#">Search</a>
</div>
I am making the footer in bootstrap which have links like Features, About, FQS, Contact us and logo-image(Hide for copyrights).
For large screens, the position of elements like links and logo-image are fine.
But for medium screens "links" started to display vertically, rather than displaying horizontally and logo-image moves downwards the link, as you can observe in picture provided.
Here i want 2 changes.
1)The links must display horizontally even at medium or small screen.
2) As soon as it reaches to the break-point, the elements should swap the position.(The logo-image should display at link's location and vice versa).
Code:
<div class="container-fluid">
<div class="container">
<div class="row">
<div class="form-group">
<div class="col-md-12">
<h5 align="center" class="copyRightFooterH">BF2F</h5>
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<div class="col-md-2">
<h3 id="FH"><a class="Features">Features</a></h3>
</br>
About
</div>
<div class="col-md-2">
<h3 id="FH"><a class="FQS">FQS</a></h3>
</br>
Contact us
</div>
<div class="col-md-8" align="right">
<img src="images/Logo Name2.png" class="" width="350" height="125" alt=""/>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<h5 align="center" class="copyRightFooterH">Copy-Right © 2015-2017;</h5>
</div>
</div>
</div><!--End Row-->
</div><!--End container-->
</div><!--End container-fluid-->
I would modify the css outside of bootstrap by giving the logo a specific class. Bootstrap is great framework, adding the custom CSS will let you leverage that framework and still add the manipulations you need. Hope that this helps.
Here is the working codepen.
http://codepen.io/anon/pen/oxJzQd?editors=1100
HTML Changes
<div class="col-md-8 logo">
<img src="images/Logo Name2.png" class="" width="350" height="125" alt=""/>
</div>
CSS
.logo {
text-align:center;
}
/*optional stuffs */
.logo img{ width:100%; height:auto;}
#media only screen and (min-width : 768px) {
.logo { text-align:right;}
/*optional stuffs */
.logo img {width:initial; height:initial;}
}
This is because you are saying at MEDIUM screen size have this column layout:
<div class="col-md-12">
<div class="col-md-2">
<h3 id="FH"><a class="Features">Features</a></h3>
</br>
About
</div>
<div class="col-md-2">
<h3 id="FH"><a class="FQS">FQS</a></h3>
</br>
Contact us
</div>
<div class="col-md-8" align="right">
<img src="images/Logo Name2.png" class="" width="350" height="125" alt=""/>
</div>
</div>
col-md-*
Only effect medium screen sizes and above. If you want to target every device you would use col-xs-*
Like so...
<div class="col-xs-12">
<div class="col-xs-2">
<h3 id="FH"><a class="Features">Features</a></h3>
</br>
About
</div>
<div class="col-xs-2">
<h3 id="FH"><a class="FQS">FQS</a></h3>
</br>
Contact us
</div>
<div class="col-xs-8 col-md-8" align="right">
<img src="images/Logo Name2.png" class="" width="350" height="125" alt=""/>
</div>
</div>
I believe this is the issue you are talking about. But it does not help since you provide no JSFiddle link for people to help you easily. I would recommend you attach JSFiddle link in future reference.
Try to remove div with form-group class as you have your col stacked.
Try this:
<div class="container">
<div class="row">
<h5 align="center" class="copyRightFooterH">BF2F</h5>
</div>
<div class="row">
<div class="col-xs-2">
<h3 id="FH"><a class="Features">Features</a></h3>
<br/>
About
</div>
<div class="col-xs-2">
<h3 id="FH"><a class="FQS">FQS</a></h3>
<br/>
Contact us
</div>
<div class="col-xs-8">
<img src="images/Logo Name2.png" class="" width="350" height="125" alt=""/>
</div>
</div>
<div class="row">
<h5 align="center" class="copyRightFooterH">Copy-Right © 2015-2017;</h5>
</div>
</div><!--End container-fluid-->
Regards.
i am a newb to jquery
i have a metro (horizontal layout)
<pre>
<section id="content" >
<section class="clearfix section" id="sharing-experience" style="margin-top: 100px; height: 525px;">
<h3 class="block-title">first</h3>
<div class="tile turquoise w3 h2 icon-fadeoutscaleup">
<a class="link" href="#">
<i class="fa-bookmark"></i>
<p class="title-right">one</p>
<p class="title">1</p>
</a>
</div>
<div class="tile brown w3 h2 icon-fadeoutscaleup">
<a class="link" href="#">
<i class="fa-clipboard"></i>
<p class="title-right">two</p>
<p class="title">2</p>
</a>
</div>
</section>
<section class="clearfix section" id="sharing-experience" style="margin-top: 100px; height: 525px;">
<h3 class="block-title">second</h3>
<div class="tile turquoise w3 h2 icon-fadeoutscaleup">
<a class="link" href="#">
<i class="fa-bookmark"></i>
<p class="title-right">one</p>
<p class="title">1</p>
</a>
</div>
<div class="tile brown w3 h2 icon-fadeoutscaleup">
<a class="link" href="#">
<i class="fa-clipboard"></i>
<p class="title-right">two</p>
<p class="title">2</p>
</a>
</div>
</section>
<section class="clearfix section" id="sharing-experience" style="margin-top: 100px; height: 525px;">
<h3 class="block-title">third</h3>
<div class="tile turquoise w3 h2 icon-fadeoutscaleup">
<a class="link" href="#">
<i class="fa-bookmark"></i>
<p class="title-right">one</p>
<p class="title">1</p>
</a>
</div>
<div class="tile brown w3 h2 icon-fadeoutscaleup">
<a class="link" href="#">
<i class="fa-clipboard"></i>
<p class="title-right">two</p>
<p class="title">2</p>
</a>
</div>
</section>
</section>
</pre>
The page on ready should start from the third section
for that there should be an animation from right to left on the page loads or ready
here is the example
which is been done
if anybody could help!! it will be really great
and here is the link for the metro design
i am using megametro
here is the link for it
http://themes.grozav.com/metromega/
HI i suppose you want to have section 3 in the center of the page when the page loads and the other two sections to the left of it.
If this is what you want, then the following could be done to achieve what you want.
$(document).ready(function(){
window.scrollTo($("#id-of-section-you-want-to-show").offset().left ,$("body").offset().left);
// apply your animations
});
And ya, please do change the id's of your section. Id attribute should be unique since the define a particular dom element in html page.
I am making a page with a bunch of items on it with differing headings and text. I want the headings and text to all line up at the same height. Some headings will be 2 lines, some only 1. It needs to also be responsive, so I can't just set a min-height.
(source: iforce.co.nz)
Is it possible to get the h2's and p's to always be the same height? The hacky way I was thinking was padding out the shorter ones with javascript, but that is a last resort.
The HTML is:
<div class="itemContainer" style="width:25.0%;">
<div class="catItemView groupPrimary">
<div class="catItemHeader">
<h3 class="catItemTitle">
Wairamarama-Onewhero Seal Extension
</h3>
</div>
<div class="catItemBody">
<div class="catItemImageBlock">
<span class="catItemImage">
<a href="/index.php/projects/item/46-wairamarama-onewhero-seal-extension" title="Wairamarama-Onewhero Seal Extension">
<img src="/media/k2/items/cache/64d93d666355a43c4a86679a030d35b6_M.jpg" alt="Wairamarama-Onewhero Seal Extension" style="width:359px; height:auto;" />
</a>
</span>
<div class="clr"></div>
</div>
<div class="catItemIntroText">
<p>Evergreen Landcare have been involved in the Wairamarama-Onewhero Seal Extension as a sub-contractor for Heb Construction.</p>
</div>
<div class="clr"></div>
</div>
<div class="clr"></div>
<div class="catItemReadMore">
<a class="k2ReadMore" href="/index.php/projects/item/46-wairamarama-onewhero-seal-extension">Read more...</a>
</div>
<div class="clr"></div>
</div>
This is generated by K2/Joomla! so there isn't much flexibility in it.
This is the page if you want to see it.
You could "fix" the appearance by setting the height of the elements that have variable content to some value that holds the largest. The follwoing CSS does this for the page you linked to:
div.catItemIntroText {
height: 180px;
}
div.catItemHeader h3.catItemTitle {
height: 45px;
}
This only works because you know in advance the height that looks best.
If you were in a position to alter your HTML you could take a fresh approach and use a grid system. Here is an approach that uses Twitter Bootstrap (demo)
<div class="container">
<div class="row">
<div class="span3">
<h2>Wairamarama-Onewhero Seal Extension</h2>
</div>
<div class="span3">
<h2>Te Rapa Pass</h2>
</div>
<div class="span3">
<h2>Stockton Mine</h2>
</div>
<div class="span3">
<h2>State Highway 88 Dunedin Realignment</h2>
</div>
</div>
<div class="row">
<div class="span3">
<img src="http://placekitten.com/200/300" />
</div>
<div class="span3">
<img src="http://placekitten.com/200/300" />
</div>
<div class="span3">
<img src="http://placekitten.com/200/300" />
</div>
<div class="span3 ReadMore">
<img src="http://placekitten.com/200/300" />
</div>
</div>
<div class="row">
<div class="span3 ReadMore"> <a href='#' class='btn btn-primary'>read more</a>
</div>
<div class="span3 ReadMore"> <a href='#' class='btn btn-primary'>read more</a>
</div>
<div class="span3 ReadMore"> <a href='#' class='btn btn-primary'>read more</a>
</div>
<div class="span3 ReadMore"> <a href='#' class='btn btn-primary'>read more</a>
</div>
</div>
</div>
By putting each row (of text, images and buttons) on it's own <div.row> the spill over is handled automatically.
I am using twitter bootstrap css and js frameworks. In this example I have two collapsible divs, and .
Currently both divs can be expanded at the same time.
The way I would like them to work is so only one div can be expanded at a time. E.g. if #about is expanded and the user clicks #videos, #about will be collapsed and #videos will be expanded in its place.
Is there an easy way to do this?
<div id="main" class="span12">
<div class="row">
<div class="span4">
<a href="#" data-target="#about" data-toggle="collapse">
<div class="unit red bloat">
<h3>About</h3>
<p>A Melbourne based social clan who enjoy a range of MMO, RTS and action based titles. Take a look at what we're all about.</p>
</div>
</a>
</div>
<div class="span4">
<a href="#" data-target="#videos" data-toggle="collapse">
<div class="unit red bloat">
<h3>Videos</h3>
<p>A selection of our best videos, of both the good times and the bad. Due to the poor nature of it's content, viewer discretion is advised and should not be viewed by anyone. </p>
</div>
</a>
</div>
<div class="span4">
<a href="forums/index.php">
<div class="unit grey bloat">
<h3>Forum</h3>
<p>If you think you'd fit in here, click this box and sign up to our forum. </p>
</div>
</a>
</div>
</div><!-- end row -->
<br />
<br />
<div class="row-fluid">
<div class="span12">
<!-- start accord -->
<div id="about" class="collapse">
<div class="row-fluid">
<div class="expanded">
<p>about</p>
</div>
</div>
</div>
<div id="videos" class="collapse">
<div class="row-fluid">
<div class="expanded">
<p>vid</p>
</div>
</div>
</div>
<!-- end accord -->
</div>
</div>
<hr><!-- Bottom border -->
</div> <!-- /container -->
I was able to make it work by following the bootstrap example. Had to use the data-parent tag instead of data-target.
Here is the working example;
<div id="main" class="span12">
<div class="row">
<div class="span4">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
<div class="unit grey bloat">
<h3>Heading 1</h3>
<p>Paragraph 1</p>
</div>
</a>
</div>
<div class="span4">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
<div class="unit grey bloat">
<h3>Heading 2</h3>
<p>Paragraph 2</p>
</div>
</a>
</div>
<div class="span4">
<a href="#">
<div class="unit grey bloat">
<h3>Heading 3</h3>
<p>Paragraph 3</p>
</div>
</a>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div id="collapseOne" class="accordion-body collapse">
<div class="accordion-inner">
<div class="expanded">
<p>Expanded 1</p>
</div>
</div>
</div>
</div>
<div class="accordion-group">
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
<div class="expanded">
<p>Expanded 2</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div> <!-- /container -->