When user goes from fullscreen to window view in chrome or any browser. The main class mdl-layout__content seems to add a vertical (up and down) scrollbar, which means there are now two scrollbars on the right side of the users screen.
From what I have read, people are saying it is the footer that causes this issue, however I don't believe that to be the case, as I can do an easy fix by changing MDL css from
.mdl-layout__container {
position: absolute;
width: 100%;
height: 100%;
}
to
.mdl-layout__container {
position: absolute;
width: 100%;
height: auto !important;
}
However this fix is horrible, and means changing the code Google supplies.
Picture of issue:
Browser is full screen
Browser is now in a window and NOT full screen
Code
header.tpl
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--fixed-drawer">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">TEST</span></span>
<!-- Add spacer, to align navigation to the right -->
<div class="mdl-layout-spacer"></div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label mdl-textfield--align-right">
<label class="mdl-button mdl-js-button mdl-button--icon" for="fixed-header-drawer-exp">
<i class="material-icons">search</i>
</label>
<div class="mdl-textfield__expandable-holder">
<input class="mdl-textfield__input" type="text" name="sample" id="fixed-header-drawer-exp" />
</div>
</div>
<button id="demo-menu-lower-right"
class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">chat</i>
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
for="demo-menu-lower-right">
<li class="mdl-menu__item">Some Action</li>
<li class="mdl-menu__item">Another Action</li>
<li disabled class="mdl-menu__item">Disabled Action</li>
<li class="mdl-menu__item">Yet Another Action</li>
</ul>
</div>
</header>
<div class="mdl-layout__drawer">
<div class="mdl-navigation card">
<div class="up background-tint">
<div class="text">
<h2>Russell Harrower</h2>
</div>
<div class="add"><i id="tooltip1" class="fa fa-paw" aria-hidden="true"></i>
<div class="mdl-tooltip" for="tooltip1">Your Pet's</div>
</div>
</div>
<div class="down">
<div>
<p>Followers</p>
<p>26</p>
</div>
<div>
<p>Following</p>
<p>21579</p>
</div>
<div>
<p>Like</p>
<p>976</p>
</div>
</div>
<div class="back">
<p>Users Pets goes here.</p>
</div>
<br>
</div>
<!-- END OF ANIMATED MENU -->
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
</nav>
</div>
<main class="mdl-layout__content">
Feed.tpl
{*********************************************************
Multi line comment block with credits block
# author: Harrower.xyz
# maintainer: support#harrower.xyz
**********************************************************}
{* The header file with the main logo and stuff *}
{include file='./tpl-files/header.tpl'}
<div class="mdl-section__centre mdl-grid mdl-cell mdl-cell--12-col">
<div class="
">
<!-- this is the status box -->
<div id="show-dialog" class="mdl-card mdl-cell mdl-cell--8-col mdl-cell--12-col-tablet mdl-cell--12-col-phone mdl-cell--4-col-tablet mdl-shadow--2dp card-height-small">
<div class="mdl-section__centre mdl-grid mdl-cell mdl-cell--12-col">
<div class="mdl-cell mdl-cell--1-col mdl-cell--top">
<div class="card__author">
<img src="http://lorempixel.com/40/40/sports/" alt="user">
</div>
</div>
<div class="mdl-cell mdl-cell--10-col mdl-cell--top">
<div class="mdl-card__title">
<h1 id="what_are_u_up_too" class="mdl-card__title-text">What are you up to?</h1>
</div>
</div>
<div id="tt3" class="icon material-icons">add_a_photo</div>
</div>
</div>
</div>
<!-- end status box -->
<div class="mdl-card mdl-cell mdl-cell--6-col mdl-cell--12-col-tablet mdl-cell--12-col-phone mdl-cell--4-col-tablet mdl-shadow--2dp">
<figure class="mdl-card__media imgcl">
</figure>
<div class="mdl-card__title">
<h1 class="mdl-card__title-text">Learning Web Design</h1>
</div>
<div class="mdl-card__supporting-text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam accusamus, consectetur.</p>
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--accent mdl-js-button mdl-js-ripple-effect">Read More</a>
<div class="mdl-layout-spacer"></div>
<button class="mdl-button mdl-button--icon mdl-button--colored"><i class="fa fa-thumbs-o-up"></i></button>
</div>
</div>
<div class="mdl-card mdl-cell mdl-cell--6-col mdl-cell--12-col-tablet mdl-cell--12-col-phone mdl-cell--4-col-tablet mdl-shadow--2dp">
<figure class="mdl-card__media">
</figure>
<div class="mdl-card__title">
<h1 class="mdl-card__title-text">Learning Web Design</h1>
</div>
<div class="mdl-card__supporting-text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam accusamus, consectetur.</p>
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">Read More</a>
<div class="mdl-layout-spacer"></div>
<button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">favorite</i></button>
<button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">share</i></button>
</div>
</div>
<div class="mdl-card mdl-cell mdl-cell--6-col mdl-cell--12-col-tablet mdl-cell--12-col-phone mdl-cell--4-col-tablet mdl-shadow--2dp">
<figure class="mdl-card__media">
</figure>
<div class="mdl-card__title">
<h1 class="mdl-card__title-text">Learning Web Design</h1>
</div>
<div class="mdl-card__supporting-text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam accusamus, consectetur.</p>
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">Read More</a>
<div class="mdl-layout-spacer"></div>
<button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">favorite</i></button>
<button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">share</i></button>
<div class="mdl-cell mdl-cell--1-col mdl-cell--top">
</div>
</div>
<div class="mdl-card mdl-cell mdl-cell--6-col mdl-cell--12-col-tablet mdl-cell--12-col-phone mdl-cell--4-col-tablet mdl-shadow--2dp">
<figure class="mdl-card__media">
</figure>
<div class="mdl-card__title">
<h1 class="mdl-card__title-text">Learning Web Design</h1>
</div>
<div class="mdl-card__supporting-text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam accusamus, consectetur.</p>
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">Read More</a>
<div class="mdl-layout-spacer"></div>
<button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">favorite</i></button>
<button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">share</i></button>
</div>
</div>
<div class="mdl-card mdl-cell mdl-cell--6-col mdl-cell--12-col-tablet mdl-cell--12-col-phone mdl-cell--4-col-tablet mdl-shadow--2dp">
<figure class="mdl-card__media">
</figure>
<div class="mdl-card__title">
<h1 class="mdl-card__title-text">Learning Web Design</h1>
</div>
<div class="mdl-card__supporting-text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam accusamus, consectetur.</p>
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">Read More</a>
<div class="mdl-layout-spacer"></div>
<button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">favorite</i></button>
<button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">share</i></button>
</div>
</div>
</div>
<div class="mdl-cell mdl-cell--3-col mdl-cell--12-col-tablet mdl-cell--hide-phone mdl-cell--top">
<!-- LOST PET WIDGET -->
<div class="mdl-card mdl-cell mdl-cell--6-col mdl-cell--12-col-phone mdl-cell--12-col-tablet mdl-shadow--2dp">
<figure class="mdl-card__media imgcl" style="background-image:url('//static.pexels.com/photos/7720/night-animal-dog-pet.jpg');">
</figure>
<div class="mdl-card__title">
<h1 class="mdl-card__title-text card-lost_header">LOST: MELBOURNE CDB</h1>
</div>
<div class="mdl-card__supporting-text">
<p><b>Name:</b> SAMMY
<br>
<b>Last Seen:</b> 2 Days Ago, Bourke Street
<br>
<b>Kid Friendly:</b> Unsure
</p>
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--accent mdl-js-button mdl-js-ripple-effect">View Pet Profile</a>
<div class="mdl-layout-spacer"></div>
<button class="mdl-button mdl-button--icon mdl-button--colored"><i class="fa fa-share"></i></button>
</div>
</div>
<!-- LOST PET -->
</div>
</div>
{include file='./tpl-files/footer.tpl'}
footer.tpl
<div id="footer" class="navbar navbar-fixed-bottom">
<nav class="navbar navbar-gray" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-inner">
<div class="navbar-inner">
<div class="container-fluid">
<ul class="nav navbar-nav navbar-left">
<li {if {$smarty.get.t} eq 'faq'}class="active"{/if}>FAQ</li>
<li {if {$smarty.get.t} eq 'tos'}class="active"{/if}>Terms Of Service</li>
<li {if {$smarty.get.t} eq 'privacy'}class="active"{/if}>Privacy</li>
<li {if {$smarty.get.t} eq 'contact'}class="active"{/if}>Contact Us</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li {if {$smarty.get.t} eq 'faq'}class="active"{/if}>- In Loving Memory Of OneSpot</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
<script src="{$smarty.current_dir}/javascript/bootstrap.min.js"></script>
</body>
</html>
Solution for the above
Make the Users image smaller - from 330px to 200px;
Come up a with a better menu system for your users: for example - if a user
wants to fav a community group, this menu navigation will continue
to have this issue.
Don't over complicate the navbar.
By doing the above it solved your issue, note any small small screens may still have issues.
Related
I'm trying to use bootstrap carousel inside CSS flexbox.
My issue is that I made some mistakes in the HTML and the second slide of the carousel doesn't show up. I can use the next button to move from the first slide, but it doesn't display the second and stays blank.
Here's my code:
.news {
display: flex;
height: 600px;
width: 100%;
}
#flex-box-1 {
width: 50%;
height: 100%;
background-color: green;
}
#flex-box-2 {
width: 50%;
height: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- <meta name="description" content="Unilab career acceleration project" /> -->
<title>UniLab</title>
<script src="https://kit.fontawesome.com/b51b7dd055.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<section class="news">
<div id="flex-box-1">
<div id="places">
<h2>WORLD NEWS</h2>
<hr>
<h2>Amazing places in America to visit.</h2>
<p>For some reason — this country, this city, this neighborhood, this particular street — is the place you are living a majority of your life in.</p>
<button onclick="location.href = './Desktop 3/main.html';" id="myButton">LEARN MORE</button>
</div>
</div>
<div id="flex-box-2" class="container">
<div id="news-header" class="column">
<div id='box-1'>
<h2>MORE NEWS</h2>
</div>
<div id='box-2'>
<div class="col-6 text-right">
<a class="btn" href="#carouselExampleIndicators2" role="button" data-slide="prev">
<i class="fa-solid fa-angle-left"></i>
</a>
<a class="btn" href="#carouselExampleIndicators2" role="button" data-slide="next">
<i class="fa-solid fa-angle-right"></i>
</a>
</div>
</div>
</div>
<hr>
<div id="carouselExampleIndicators2" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="column">
<article class="card">
<h3 class="pink">TRAVEL</h3>
<h3 class="article-title">Article title</h3>
<p>Lorem ipsum dolor sit amet, ipsum labitur lucilius mel id, ad has appareat…</p>
<i class="fa-regular fa-clock"></i>
<span>2 mins ago</span>
</article>
<article class="card">
<h3 class="pink">TECHNOLOGY</h3>
<h3 class="article-title">Article title</h3>
<p>Lorem ipsum dolor sit amet, ipsum labitur lucilius mel id, ad has appareat…</p>
<i class="fa-regular fa-clock"></i>
<span>2 mins ago</span>
</article>
</div>
<div class="carousel-item">
<div class="column">
<article class="card">
<h3 class="pink">TRAVEL</h3>
<h3 class="article-title">Article title</h3>
<p>Lorem ipsum dolor sit amet, ipsum labitur lucilius mel id, ad has appareat…</p>
<i class="fa-regular fa-clock"></i>
<span>2 mins ago</span>
</article>
<article class="card">
<h3 class="pink">TECHNOLOGY</h3>
<h3 class="article-title">Article title</h3>
<p>Lorem ipsum dolor sit amet, ipsum labitur lucilius mel id, ad has appareat…</p>
<i class="fa-regular fa-clock"></i>
<span>2 mins ago</span>
</article>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- <script src="./scripts.js"></script> -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Thanks in advance <3
Your carousel-item weren't nested correctly, so when the buttons were triggering the active class change it was applying it to an element that was nested in an element that was no longer visible. When you do these, make sure you check to ensure that your items are inside the carousel-inner or the primary carousel container in whatever framework you use and not inside of each other as you had them initially. If you watch it in the browser inspector, you can see the class change when you use the nav arrows
.news {
display: flex;
height: 600px;
width: 100%;
}
#flex-box-1 {
width: 50%;
height: 100%;
background-color: green;
}
#flex-box-2 {
width: 50%;
height: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- <meta name="description" content="Unilab career acceleration project" /> -->
<title>UniLab</title>
<script src="https://kit.fontawesome.com/b51b7dd055.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<section class="news">
<div id="flex-box-1">
<div id="places">
<h2>WORLD NEWS</h2>
<hr>
<h2>Amazing places in America to visit.</h2>
<p>For some reason — this country, this city, this neighborhood, this particular street — is the place you are living a majority of your life in.</p>
<button onclick="location.href = './Desktop 3/main.html';" id="myButton">LEARN MORE</button>
</div>
</div>
<div id="flex-box-2" class="container">
<div id="news-header" class="column">
<div id='box-1'>
<h2>MORE NEWS</h2>
</div>
<div id='box-2'>
<div class="col-6 text-right">
<a class="btn" href="#carouselExampleIndicators2" role="button" data-slide="prev">
<i class="fa-solid fa-angle-left"></i>
</a>
<a class="btn" href="#carouselExampleIndicators2" role="button" data-slide="next">
<i class="fa-solid fa-angle-right"></i>
</a>
</div>
</div>
</div>
<hr>
<div id="carouselExampleIndicators2" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="column">
<article class="card">
<h3 class="pink">TRAVEL</h3>
<h3 class="article-title">Article title</h3>
<p>Lorem ipsum dolor sit amet, ipsum labitur lucilius mel id, ad has appareat…</p>
<i class="fa-regular fa-clock"></i>
<span>2 mins ago</span>
</article>
<article class="card">
<h3 class="pink">TECHNOLOGY</h3>
<h3 class="article-title">Article title</h3>
<p>Lorem ipsum dolor sit amet, ipsum labitur lucilius mel id, ad has appareat…</p>
<i class="fa-regular fa-clock"></i>
<span>2 mins ago</span>
</article>
</div>
</div>
<div class="carousel-item">
<div class="column">
<article class="card">
<h3 class="pink">TRAVEL</h3>
<h3 class="article-title">Article title</h3>
<p>Lorem ipsum dolor sit amet, ipsum labitur lucilius mel id, ad has appareat…</p>
<i class="fa-regular fa-clock"></i>
<span>2 mins ago</span>
</article>
<article class="card">
<h3 class="pink">TECHNOLOGY</h3>
<h3 class="article-title">Article title</h3>
<p>Lorem ipsum dolor sit amet, ipsum labitur lucilius mel id, ad has appareat…</p>
<i class="fa-regular fa-clock"></i>
<span>2 mins ago</span>
</article>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- <script src="./scripts.js"></script> -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
I am having trouble getting multiple Masonry type portfolios to work correctly on a webpage. For reference a Masonry type portfolio should look like this.
Here is an example from the templates site
(http://ottavio.kleis.agency/portfolio.html), if you can't view that page then essentially what it is, is a 4*3 image display where the 3 images on either side are of base size 1*1, and there are to images in the middle that are of sizes 2*2 and 2*1.
However when I try to add a second portfolio the second image down from the top left moves to the bottom of the portfolio and leaves white-space where it should be.
Which if the explanation wasn't clear looks like this
The code for the portfolio is this
<section id="portfolio-gallery" data-folder="/portfolio" class="sep-top-md">
<div class="container">
<div id="filters" class="sep-bottom-lg">
<button data-filter="*" class="btn btn-sm btn-primary upper">show all</button>
<button data-filter=".branding" class="btn btn-sm upper">branding</button>
<button data-filter=".design" class="btn btn-sm upper">design</button>
<button data-filter=".photography" class="btn btn-sm upper">photography</button>
<button data-filter=".videography" class="btn btn-sm upper">videography</button>
</div>
</div>
<!-- Start Ajax Section-->
<div style="position:relative;" class="ajax-section section-gray">
<div class="closeProject"><i class="fa fa-times"></i></div>
<div class="loader"><i class="fa fa-circle-o-notch fa-spin fa-2x"></i></div>
<div class="container">
<div class="status-message"></div>
<div class="ajax-content-outer">
<div class="ajax-content-inner"></div>
<div class="project-navigation nav-arrows"><span class="nav-arrow-next"></span><span class="nav-arrow-prev"></span></div>
</div>
</div>
</div>
<!-- End Ajax Section-->
<ul id="isotope" class="portfolio isotope">
<li class="item videography">
<!-- images should be in 1:1 format or multiples (2:1. 1:2, ...)--><img src="img/portfolio/05.jpg" alt="Extreme Freestyle" class="img-responsive">
<div class="mask">
<div class="mask-content">
<div class="mask-wrapper text-center"><i class="fa fa-link fa-border"></i><i class="fa fa-expand fa-border"></i>
<h4 class="upper">Extreme Freestyle</h4><span>Mood is a crucial component of well-being. It is an emotional state that can be influenced by personality or a variety of specific circumstances. This sub-category identifies worry, anxiety, happiness, mood fluctuations, and fatigue. Monitoring and managing mood can be vital for a student with regard to their life in general and school success.</span>
</div>
</div>
</div>
</li>
<li class="item photography width2x height2x">
<!-- images should be in 1:1 format or multiples (2:1. 1:2, ...)--><img src="img/portfolio/11asw5.jpg" alt="Looking at The Horizon" class="img-responsive">
<div class="mask">
<div class="mask-content">
<div class="mask-wrapper text-center"><i class="fa fa-link fa-border"></i><i class="fa fa-expand fa-border"></i>
<h4 class="upper">Looking at The Horizon</h4><span>Lorem Ipsum is simply dummy text of the printing</span>
</div>
</div>
</div>
</li>
<li class="item photography design">
<!-- images should be in 1:1 format or multiples (2:1. 1:2, ...)--><img src="img/portfolio/wr4c5.jpg" alt="Design Studio" class="img-responsive">
<div class="mask">
<div class="mask-content">
<div class="mask-wrapper text-center"><i class="fa fa-link fa-border"></i><i class="fa fa-expand fa-border"></i>
<h4 class="upper">Design Studio</h4><span>Lorem Ipsum is simply dummy text of the printing</span>
</div>
</div>
</div>
</li>
<li class="item design">
<!-- images should be in 1:1 format or multiples (2:1. 1:2, ...)--><img src="img/portfolio/mac.jpg" alt="Minimalist Design" class="img-responsive">
<div class="mask">
<div class="mask-content">
<div class="mask-wrapper text-center"><i class="fa fa-link fa-border"></i><i class="fa fa-expand fa-border"></i>
<h4 class="upper">Minimalist Design</h4><span>Lorem Ipsum is simply dummy text of the printing</span>
</div>
</div>
</div>
</li>
<li class="item branding width2x">
<!-- images should be in 1:1 format or multiples (2:1. 1:2, ...)--><img src="img/portfolio/2048asxsax.jpg" alt="Business Card" class="img-responsive">
<div class="mask">
<div class="mask-content">
<div class="mask-wrapper text-center"><i class="fa fa-link fa-border"></i><i class="fa fa-expand fa-border"></i>
<h4 class="upper">Business Card</h4><span>Lorem Ipsum is simply dummy text of the printing</span>
</div>
</div>
</div>
</li>
<li class="item branding">
<!-- images should be in 1:1 format or multiples (2:1. 1:2, ...)--><img src="img/portfolio/20aaaaa48.jpg" alt="Horst brand identity" class="img-responsive">
<div class="mask">
<div class="mask-content">
<div class="mask-wrapper text-center"><i class="fa fa-link fa-border"></i><i class="fa fa-expand fa-border"></i>
<h4 class="upper">Horst brand identity</h4><span>Lorem Ipsum is simply dummy text of the printing</span>
</div>
</div>
</div>
</li>
<li class="item design photography">
<!-- images should be in 1:1 format or multiples (2:1. 1:2, ...)--><img src="img/portfolio/20sshsh48.jpg" alt="Infinity Mirror" class="img-responsive">
<div class="mask">
<div class="mask-content">
<div class="mask-wrapper text-center"><i class="fa fa-link fa-border"></i><i class="fa fa-expand fa-border"></i>
<h4 class="upper">Infinity Mirror</h4><span>Lorem Ipsum is simply dummy text of the printing</span>
</div>
</div>
</div>
</li>
<li class="item design">
<!-- images should be in 1:1 format or multiples (2:1. 1:2, ...)--><img src="img/portfolio/247610222_460fa350b6_o.jpg" alt="Simple Desk Design" class="img-responsive">
<div class="mask">
<div class="mask-content">
<div class="mask-wrapper text-center"><i class="fa fa-link fa-border"></i><i class="fa fa-expand fa-border"></i>
<h4 class="upper">Simple Desk Design</h4><span>Lorem Ipsum is simply dummy text of the printing</span>
</div>
</div>
</div>
</li>
</ul>
</section>
And all I have done to create the second portfolio is copy and paste that code. I am stuck and have tried to resolve the issue in a number of ways, but I have still not been able to fix it. Any help would be much appreciated
There is a plugin that can do as you like. Try this one https://github.com/sapegin/jquery.mosaicflow
From this code i have three button ,now i cliked ** Reply button 1** means i want to show one textarea for bottom of the button( Reply button 1).else i have to select Reply button 2 means i want show the textarea for under this Reply button 2..i don't know how to do.i am new developer please help me some one
<div class="comment">
<div class="img-thumbnail">
<img class="avatar" alt="" src="../TV/dist/img/user2-160x160.jpg">
</div>
<div class="comment-block">
<div class="comment-arrow"></div>
<span class="comment-by">
<strong>Kani</strong>
<span class="pull-right">
<i class="fa fa-reply"></i> Reply button 1
</span>
</span>
<p>Lorem ipsum dolor sit amet,</p>
<span class="date pull-right">19-Apr-2016 </span>
</div>
</div>
<div class="comment">
<div class="img-thumbnail">
<img class="avatar" alt="" src="../TV/dist/img/user2-160x160.jpg">
</div>
<div class="comment-block">
<div class="comment-arrow"></div>
<span class="comment-by">
<strong>Kani</strong>
<span class="pull-right">
<i class="fa fa-reply"></i> Reply button 2
</span>
</span>
<p>Lorem ipsum dolor sit amet,</p>
<span class="date pull-right">19-Apr-2016 </span>
</div>
</div>
<div class="comment">
<div class="img-thumbnail">
<img class="avatar" alt="" src="../TV/dist/img/user2-160x160.jpg">
</div>
<div class="comment-block">
<div class="comment-arrow"></div>
<span class="comment-by">
<strong>Kani</strong>
<span class="pull-right">
<i class="fa fa-reply"></i> Reply button 3
</span>
</span>
<p>Lorem ipsum dolor sit amet,</p>
<span class="date pull-right">19-Apr-2016 </span>
</div>
</div>
After click that button i want to show this
<textarea class="the-new-com"></textarea>
Now this should help you surely. You need not use seperate ids for each
JS
$('.reply-btn').on('click',function() {
$(this).closest('.comment').next('.reply').html("<div><textarea class='the-new-com'></textarea></div>");
})
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="comment">
<div class="img-thumbnail">
<img class="avatar" alt="" src="../TV/dist/img/user2-160x160.jpg">
</div>
<div class="comment-block">
<div class="comment-arrow"></div>
<span class="comment-by">
<strong>Kani</strong>
<span class="pull-right">
<i class="fa fa-reply"></i> Reply button 1
</span>
</span>
<p>Lorem ipsum dolor sit amet,</p>
<span class="date pull-right">19-Apr-2016 </span>
</div>
</div>
<div class="reply"></div>
<div class="comment">
<div class="img-thumbnail">
<img class="avatar" alt="" src="../TV/dist/img/user2-160x160.jpg">
</div>
<div class="comment-block">
<div class="comment-arrow"></div>
<span class="comment-by">
<strong>Kani</strong>
<span class="pull-right">
<i class="fa fa-reply"></i> Reply button 2
</span>
</span>
<p>Lorem ipsum dolor sit amet,</p>
<span class="date pull-right">19-Apr-2016 </span>
</div>
</div>
<div class="reply"></div>
<div class="comment">
<div class="img-thumbnail">
<img class="avatar" alt="" src="../TV/dist/img/user2-160x160.jpg">
</div>
<div class="comment-block">
<div class="comment-arrow"></div>
<span class="comment-by">
<strong>Kani</strong>
<span class="pull-right">
<i class="fa fa-reply"></i> Reply button 3
</span>
</span>
<p>Lorem ipsum dolor sit amet,</p>
<span class="date pull-right">19-Apr-2016 </span>
</div>
</div>
<div class="reply"></div>
use this below jQuery...and also include this below js library
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
$('.reply-btn').on('click',function() {
$(this).after("<div><textarea class='addedText'></textarea></div>");
});
try this
$('div [id |=reply-btn]').on('click',function() {
$(this).after("<div><textarea class='the-new-com'></textarea></div>");
});
https://jsbin.com/
I am looking to get a container containing a row and then a list-group-horizontal group of items and ensure that it fills the entire HTML page horizontally, and is centered. Currently, these group items bunch to the left and do not fill the page horizontally until the screen size is very narrow, rescaling to lower width when the page is reduced in width.
Currently the result of the code is the following:
I want category 1, 2 and 3 to fill the page, and adjust when more categories are added.
/*!
* Start Bootstrap - Shop Homepage HTML Template (http://startbootstrap.com)
* Code licensed under the Apache License v2.0.
* For details, see http://www.apache.org/licenses/LICENSE-2.0.
*/
body {
padding-top: 70px; /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}
.slide-image {
width: 100%;
}
.list-group-horizontal .list-group-item {
display: inline-block;
}
.list-group-horizontal .list-group-item {
margin-bottom: 0;
margin-left:-4px;
margin-right: 0;
}
.list-group-horizontal .list-group-item:first-child {
border-top-right-radius:0;
border-bottom-left-radius:4px;
}
.list-group-horizontal .list-group-item:last-child {
border-top-right-radius:4px;
border-bottom-left-radius:0;
}
.carousel-holder {
margin-bottom: 30px;
}
.carousel-control,
.item {
border-radius: 4px;
}
.caption {
height: 130px;
overflow: hidden;
}
.caption h4 {
white-space: nowrap;
}
.thumbnail img {
width: 100%;
}
.ratings {
padding-right: 10px;
padding-left: 10px;
color: #d17581;
}
.thumbnail {
padding: 0;
}
.thumbnail .caption-full {
padding: 9px;
color: #333;
}
footer {
margin: 50px 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Shop Homepage - Start Bootstrap Template</title>
<!-- Bootstrap Core CSS -->
<!-- <link href="css/bootstrap.min.css" rel="stylesheet">-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Custom CSS -->
<link href="css/shop-homepage.css" rel="stylesheet">
<link href="css/dropdown.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Navigation -->
<!-- Support paging via http://www.tutorialspoint.com/php/mysql_paging_php.htm-->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">eBuy Platform</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
Your Profile
</li>
<li>
<!-- This should be dependent on your user type-->
Your Bids/Your Auctions
</li>
<li>
<!-- This should be depending on user type-->
Submit Auction
</li>
<li>
Logout
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div class="container">
<div class="row">
<div class="col-md-12" style="padding-top:50px">
<p class="lead">Username</p>
<div class="list-group list-group-horizontal">
Category 1
Category 2
Category 3
</div>
</div>
<!-- End of row of categories-->
</div>
</div>
<!-- Page Content -->
<div class="container">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="input-group" id="adv-search">
<input type="text" class="form-control" placeholder="Search for items" />
<div class="input-group-btn">
<div class="btn-group" role="group">
<div class="dropdown dropdown-lg">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span></button>
<div class="dropdown-menu dropdown-menu-right" role="menu">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="filter">Filter by</label>
<select class="form-control">
<option value="0" selected>All Snippets</option>
<option value="1">Featured</option>
<option value="2">Most popular</option>
<option value="3">Top rated</option>
<option value="4">Most commented</option>
</select>
</div>
<div class="form-group">
<label for="contain">Author</label>
<input class="form-control" type="text" />
</div>
<div class="form-group">
<label for="contain">Contains the words</label>
<input class="form-control" type="text" />
</div>
<button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
</form>
</div>
</div>
<button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Start listings of auctions-->
<div class="col-md-9">
<!--
<div class="row carousel-holder" style="padding-top:50px">
<div class="col-md-12">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img class="slide-image" src="http://placehold.it/800x300" alt="">
</div>
<div class="item">
<img class="slide-image" src="http://placehold.it/800x300" alt="">
</div>
<div class="item">
<img class="slide-image" src="http://placehold.it/800x300" alt="">
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
-->
<div class="row" style="padding-top:50px">
<div class="col-sm-4 col-lg-4 col-md-4">
<div class="thumbnail">
<img src="http://placehold.it/320x150" alt="">
<div class="caption">
<h4 class="pull-right">$24.99</h4>
<h4>First Auction
</h4>
<p>Description of product</p>
</div>
<div class="ratings">
<p class="pull-right">15 reviews</p>
<p>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
</p>
</div>
</div>
</div>
<div class="col-sm-4 col-lg-4 col-md-4">
<div class="thumbnail">
<img src="http://placehold.it/320x150" alt="">
<div class="caption">
<h4 class="pull-right">$64.99</h4>
<h4>Second Auction
</h4>
<p>This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="ratings">
<p class="pull-right">12 reviews</p>
<p>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star-empty"></span>
</p>
</div>
</div>
</div>
<div class="col-sm-4 col-lg-4 col-md-4">
<div class="thumbnail">
<img src="http://placehold.it/320x150" alt="">
<div class="caption">
<h4 class="pull-right">$74.99</h4>
<h4>Third Auction
</h4>
<p>This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="ratings">
<p class="pull-right">31 reviews</p>
<p>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star-empty"></span>
</p>
</div>
</div>
</div>
<div class="col-sm-4 col-lg-4 col-md-4">
<div class="thumbnail">
<img src="http://placehold.it/320x150" alt="">
<div class="caption">
<h4 class="pull-right">$84.99</h4>
<h4>Fourth Auction
</h4>
<p>This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="ratings">
<p class="pull-right">6 reviews</p>
<p>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
</p>
</div>
</div>
</div>
<div class="col-sm-4 col-lg-4 col-md-4">
<div class="thumbnail">
<img src="http://placehold.it/320x150" alt="">
<div class="caption">
<h4 class="pull-right">$94.99</h4>
<h4>Fifth Auction
</h4>
<p>This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="ratings">
<p class="pull-right">18 reviews</p>
<p>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star-empty"></span>
</p>
</div>
</div>
</div>
<!--
<div class="col-sm-4 col-lg-4 col-md-4">
To be filled out
</div>
-->
</div>
</div>
</div>
</div>
<!-- /.container -->
<div class="container">
<hr>
<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © Your Website 2014</p>
</div>
</div>
</footer>
</div>
<!-- /.container -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
.Here where you have <!--Start listings of auctions--> .col-md-9, change to .col-md-12
Update:
Add to .list-group-horizontal .list-group-item this:
width:33.3%;
text-align:center
Snippet
/*!
* Start Bootstrap - Shop Homepage HTML Template (http://startbootstrap.com)
* Code licensed under the Apache License v2.0.
* For details, see http://www.apache.org/licenses/LICENSE-2.0.
*/
body {
padding-top: 70px;
/* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}
.slide-image {
width: 100%;
}
.list-group-horizontal .list-group-item {
display: inline-block;
width:33.3%;
text-align:center
}
.list-group-horizontal .list-group-item {
margin-bottom: 0;
margin-left: -4px;
margin-right: 0;
}
.list-group-horizontal .list-group-item:first-child {
border-top-right-radius: 0;
border-bottom-left-radius: 4px;
}
.list-group-horizontal .list-group-item:last-child {
border-top-right-radius: 4px;
border-bottom-left-radius: 0;
}
.carousel-holder {
margin-bottom: 30px;
}
.carousel-control,
.item {
border-radius: 4px;
}
.caption {
height: 130px;
overflow: hidden;
}
.caption h4 {
white-space: nowrap;
}
.thumbnail img {
width: 100%;
}
.ratings {
padding-right: 10px;
padding-left: 10px;
color: #d17581;
}
.thumbnail {
padding: 0;
}
.thumbnail .caption-full {
padding: 9px;
color: #333;
}
footer {
margin: 50px 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<!-- Support paging via http://www.tutorialspoint.com/php/mysql_paging_php.htm-->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">eBuy Platform</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
Your Profile
</li>
<li>
<!--This should be dependent on your user type-->
Your Bids/Your Auctions
</li>
<li>
<!-- This should be depending on user type-->
Submit Auction
</li>
</ul>
<!-- /.navbar-collapse -->
</div>
</div>
<!-- /.container -->
</nav>
<div class="container">
<div class="row">
<div class="col-md-12" style="padding-top:50px">
<p class="lead">Username</p>
<div class="list-group list-group-horizontal">
Category 1
Category 2
Category 3
</div>
</div>
<!-- End of row of categories-->
</div>
</div>
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="input-group" id="adv-search">
<input type="text" class="form-control" placeholder="Search for items" />
<div class="input-group-btn">
<div class="btn-group" role="group">
<div class="dropdown dropdown-lg">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span>
</button>
<div class="dropdown-menu dropdown-menu-right" role="menu">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="filter">Filter by</label>
<select class="form-control">
<option value="0" selected>All Snippets</option>
<option value="1">Featured</option>
<option value="2">Most popular</option>
<option value="3">Top rated</option>
<option value="4">Most commented</option>
</select>
</div>
<div class="form-group">
<label for="contain">Author</label>
<input class="form-control" type="text" />
</div>
<div class="form-group">
<label for="contain">Contains the words</label>
<input class="form-control" type="text" />
</div>
<button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</button>
</form>
</div>
</div>
<button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Start listings of auctions-->
<div class="col-md-12">
<div class="row" style="padding-top:50px">
<div class="col-sm-4 col-lg-4 col-md-4">
<div class="thumbnail">
<img src="http://placehold.it/320x150" alt="">
<div class="caption">
<h4 class="pull-right">$24.99</h4>
<h4>First Auction
</h4>
<p>Description of product</p>
</div>
<div class="ratings">
<p class="pull-right">15 reviews</p>
<p>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
</p>
</div>
</div>
</div>
<div class="col-sm-4 col-lg-4 col-md-4">
<div class="thumbnail">
<img src="http://placehold.it/320x150" alt="">
<div class="caption">
<h4 class="pull-right">$64.99</h4>
<h4>Second Auction</h4>
<p>This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="ratings">
<p class="pull-right">12 reviews</p>
<p>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star-empty"></span>
</p>
</div>
</div>
</div>
<div class="col-sm-4 col-lg-4 col-md-4">
<div class="thumbnail">
<img src="http://placehold.it/320x150" alt="">
<div class="caption">
<h4 class="pull-right">$74.99</h4>
<h4>Third Auction
</h4>
<p>This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="ratings">
<p class="pull-right">31 reviews</p>
<p>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star-empty"></span>
</p>
</div>
</div>
</div>
<div class="col-sm-4 col-lg-4 col-md-4">
<div class="thumbnail">
<img src="http://placehold.it/320x150" alt="">
<div class="caption">
<h4 class="pull-right">$84.99</h4>
<h4>Fourth Auction
</h4>
<p>This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="ratings">
<p class="pull-right">6 reviews</p>
<p>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
</p>
</div>
</div>
</div>
<div class="col-sm-4 col-lg-4 col-md-4">
<div class="thumbnail">
<img src="http://placehold.it/320x150" alt="">
<div class="caption">
<h4 class="pull-right">$94.99</h4>
<h4>Fifth Auction
</h4>
<p>This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="ratings">
<p class="pull-right">18 reviews</p>
<p>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star-empty"></span>
</p>
</div>
</div>
</div>
<!--
<div class="col-sm-4 col-lg-4 col-md-4">
To be filled out
</div>
-->
</div>
</div>
<!-- /.container -->
<div class="container">
<hr>
<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © Your Website 2014</p>
</div>
</div>
</footer>
</div>
<!-- /.container -->
Hi friends I try learning jquery but I get some issues,
red label below picture- when i clicked it toggle is opening but when I clicked second one again first div is opening
my html
<ul class="otel-filtre-fiyat-tab">
<li class="otel-views"><a href="#"><img src="http://anitur.streamprovider.net/images/otel-filtre/d2.png" alt="" class="memnuniyet-durum" />
<strong>88/100</strong>
<span class="otel-goruntuleme">274 Görüntüleme</span>
</a></li>
<li class="otel-prices"><a href="#">
<strong>Tüm Fiyatlar</strong>
<span class="otel-goruntuleme">Size Özel en uygun fiyatlar</span>
</a></li>
</ul>
</div><!--otel filtre ozellikler-->
<div class="clr"></div>
</div><!--otel tek liste-->
<div class="otel-filtre-tab">
<div class="otel-tab-icerik otel-full-detay">
<div class="otel-degerlendirme">
<div class="degerlendirme-baslik">Değerlendirme</div>
<div class="otel-tab-detay">
<div class="degerlendirme-not">
<div class="c100 p85 green">
<span>85%</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div><!--dairesel genel değerlendirme-->
</div><!-- degerlendirme not -->
<div class="degerlendirme-yorum">
<div class="yorum-bar">
<div class="yorum-bilgi">
<p>
<span class="otel-yorum-kisi">Hakan2020</span>
<span class="otel-yorum-konum">Denizli,Türkiye</span>
<span class="otel-yorum-tarih">26 Eylül 2015</span>
</p>
</div><!-- yorum bilgi -->
<div class="otel-yorum-profil">
<img src="http://anitur.streamprovider.net/images/otel-filtre/profile.jpg" alt="" />
</div>
<div class="yorum-content">
<h3>“Özellikle, yeme içme kalitesi arayanlar için...”</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque provident accusantium sint tempore! Fugiat debitis maxime eos? Devamını oku</p>
</div>
</div><!-- yorum bar-->
<div class="yorum-bar">
<div class="yorum-bilgi">
<p>
<span class="otel-yorum-kisi">Hakan2020</span>
<span class="otel-yorum-konum">Denizsiz,Türkiye</span>
<span class="otel-yorum-tarih">26 Eylül 2015</span>
</p>
</div><!-- yorum bilgi -->
<div class="otel-yorum-profil">
<img src="http://anitur.streamprovider.net/images/otel-filtre/profile.jpg" alt="" />
</div>
<div class="yorum-content">
<h3>“Özellikle, yeme içme kalitesi arayanlar için...”</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque provident accusantium sint tempore! Fugiat debitis maxime eos? Devamını oku</p>
</div>
</div><!-- yorum bar-->
</div><!-- degerlendirme yorum -->
</div>
<div class="clr"></div>
</div><!-- otel degerlendirme-->
<h3>Genel Değerlendirme</h3>
<div class="otel-genel-degerlendirme">
<div class="tum-degerlendirmeler">
Tüm Değerlendirmeler
<h4>Tüm İzlenimler</h4>
<h4 class="degerlendirme">%77 Çok İyi <span>2524 yoruma göre</span></h4>
</div><!--tum degerlendirmeler-->
<div class="diger-degerlendirmeler">
<ul class="tab-degerlendirme">
<li>%35 Çiftler</li>
<li>%35 Aile</li>
<li>%35 İş Seyahati</li>
<li>%35 Yalnız Gezginler</li>
</ul><!--tab menuler-->
<div class="tab-degerlendirme-icerik">
<div class="tab-filtre-icerik" id="ciftler">
<div class="demo-show2">
<h3>KAHVALTI <span class="accord-progress"></span><span class="mmn-oran">59%</span><span class="span-list">“Kahvaltı İyi”</span><span class="accord-chevron"></span></h3>
<div>Deneme 1 'in içeriği</div>
<h3>KAHVALTI <span class="accord-progress"></span><span class="mmn-oran">59%</span><span class="span-list">“Kahvaltı İyi”</span><span class="accord-chevron"></span></h3>
<div>Deneme 2 'in içeriği</div>
<h3>KAHVALTI <span class="accord-progress"></span><span class="mmn-oran">59%</span><span class="span-list">“Kahvaltı İyi”</span><span class="accord-chevron"></span></h3>
<div>Deneme 3 'in içeriği</div>
</div>
<!--<div id="progressbar-durum">
<div></div>
</div>-->
</div>
<div class="tab-filtre-icerik" id="aile">aile..
%35
</div>
<div class="tab-filtre-icerik" id="is-seyahati">iş seyahati..</div>
<div class="tab-filtre-icerik" id="yalniz-gezginler-bg">yalnız gezginler..</div>
</div><!-- tab icerik kismi-->
</div><!--diger degerlendirmeler-->
</div><!-- otel genel değerlendirme-->
</div><!-- tab icerik-->
<div class="otel-tab-icerik otel-fiyat-detay-icerik">otel içerik 2..</div><!-- tab icerik -->
</div><!-- otel filtre tab -->
toggle.js
$(document).ready(function(){
$(".otel-views a").on("click",function(){
$(".otel-full-detay:first").slideToggle();
return false;
});
});
what was my mistake ?
and codepen link:
http://codepen.io/cowardguy/pen/rxdpLp
You need to use other selector to reach your needed element. First you need to climb up in dom tree with .parent() or similar selector and then go down to your element in dom tree with .children() or .find() or other similar selector.
This is your working example:
$(".otel-views a").on("click",function(){
$(this).parents('.otel-tekli-listeleme').find('.otel-full-detay').slideToggle();
return false;
});
Here's fixed codepen