My web page which is a info screen site for big screens consists of 3 bootstrap panels two on the top (left and right) and the main panel below (a tabbed panel).
It becomes some annoying that the tab panel does not fill the rest of the display (after the top panels) when clicking on the tabs.
So I need some tips on how to solve this. I need to think about many screen formats but most important big wide screens. I have searched through the net trying to find an answer but no luck yet. Hope you can help me out
regards Geir
<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>Information Screen</title>
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700,inherit,400" rel="stylesheet" type="text/css">
<!-- Bootstrap Core CSS -->
<link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="../bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="../dist/css/sb-admin-2.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<!--<div id="loading">
<div id="spinner"></div>
</div>-->
<!-- Page Content -->
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="page-header">
<div class="pull-left">
<h1> Information Screen</h1>
</div>
<div class="pull-right">
<h3 class="text-right">
<small><span id="divLocal"> </span></small>
</h3>
</div>
<div class="clearfix"></div>
</div>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-9">
<div class="panel panel-default" id="UpperLeftPart">
<div class="panel-heading">
<i class="fa fa-bar-chart-o fa-fw"></i> Key figures 1
</div>
<!-- /.panel-heading -->
<div class="panel-body pane">
upper left
</div>
<div class="clearfix"></div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-9 -->
<div class="col-lg-3">
<div class="panel panel-default" id="UpperRightPart">
<div class="panel-heading">
<i class="fa fa-bar-chart-o fa-fw"></i> Key figures 2
</div>
<!-- /.panel-heading -->
<div class="panel-body">
upper right
</div>
<!-- /.panel-body -->
</div>
<div class="clearfix"></div>
<!-- /.panel -->
</div>
<!-- /.col-lg-3 -->
<div class="clearfix visible-lg visible-md"></div>
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
Basic Tabs
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="active">
Home
</li>
<li>
Profile
</li>
<li>
Messages
</li>
<li>
Settings
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane fade in active" id="home">
<h4>Home Tab</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="tab-pane fade" id="profile">
<h4>Profile Tab</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="tab-pane fade" id="messages">
<h4>Messages Tab</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="tab-pane fade" id="settings">
<h4>Settings Tab</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
</div>
</div>
</div>
<!-- /#page-wrapper -->
<!-- /#wrapper -->
<!-- Bootstrap Core JavaScript -->
<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- jQuery -->
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="../bower_components/metisMenu/dist/metisMenu.min.js"></script>
<!-- Custom Theme JavaScript -->
<script src="../dist/js/sb-admin-2.js"></script>
</body>
</html>
You can do it that way:
HTML: I added 3 classes to identify rows and panel with tabs (you can see it on Codepen)
CSS: I set min-height and overflow-y to see the content when you browse the site on mobile devices or when height of the window is small, you can change that value and set different min-height on different screen sizes.
.panel-with-tabs {
min-height: 200px;
overflow-y: auto;
}
JS: when you resize the window, this code will calculate current window height, current height of the rows and set height value to the panel with tabs (100% of the window height minus height of the rows minus 50px to see the bottom border).
$(window).resize(function () {
var heightRows = $('.row-1').outerHeight() + $('.row-2').outerHeight();
$('.panel-with-tabs').css('height', $(window).height() - heightRows - 50);
});
$(window).trigger('resize');
CODEPEN
Related
so i'm relatively new to programing,and i wanted to create a loader that whenever the page loads or refreshes it shows a centered loading animation that greys out and fades the entire page then all goes back to normal when the page fully loads.
i managed to get everything else working except centering the animation and fading/greying the page. idk if i'm missing something really obvious but i've searched everywhere and i didn't quite get what i wanted.
here's the html
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>S&B Clothes</title>
<link rel="icon" type="image/x-icon" href="logo/icons8-needle-96.png">
</head>
<body id="body">
<!--Navbar-->
<nav class="navbar navbar-expand-sm sticky-top" id="navbar1">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">
<img src="logo/logo_svg.svg" class="rounded" id="navbar_logo">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#men_women">
<div class="container_menu" onclick="menu(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</button>
<div class="collapse navbar-collapse" id="men_women">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<button type="button" class="btn" onclick="women_index_fn()" id="navbar_men">Women</button>
</li>
<li>
<vr class="vr"></vr>
</li>
<li class="nav-item">
<button type="button" class="btn" onclick="children_index_fn()" id="navbar_women">Children</button>
</li>
</li>
<li>
<vr class="vr"></vr>
</li>
<li class="nav-item">
<button type="button" class="btn" onclick="men_index_fn()" id="navbar_children">Men</button>
</li>
</ul>
</div>
<div class="input-group rounded">
<input type="search" class="form-control rounded" placeholder="Search" aria-label="Search" aria-describedby="search-addon" />
<button type="button" class="btn rounded" id="src_btn">Search</button>
</div>
<div>
<button class="btn" id="user_btn" onmouseover="change_img_user()" onmouseout="change_img_user_2()">
<img src="Icons/user-white.png" id="user_btn_ico"/>
</button>
</div>
<div>
<button class="btn" id="favorite_btn" onmouseover="change_img_fav()" onmouseout="change_img_fav_2()">
<img src="Icons/favorite-white.png" id="favorite_btn_ico"/>
</button>
</div>
<div>
<button class="btn" id="shop_cart_btn" onmouseover="change_img_cart()" onmouseout="change_img_cart_2()">
<img src="Icons/shopping-cart-white.png" id="shop_cart_ico"/>
</button>
</div>
</div>
</nav>
<!--Loader-->
<div class="preloader" id="ld">
<div class="box">
<div class="box__inner">
<div class="box__back-flap"></div>
<div class="box__right-flap"></div>
<div class="box__front-flap"></div>
<div class="box__left-flap"></div>
<div class="box__front"></div>
</div>
</div>
<div class="box">
<div class="box__inner">
<div class="box__back-flap"></div>
<div class="box__right-flap"></div>
<div class="box__front-flap"></div>
<div class="box__left-flap"></div>
<div class="box__front"></div>
</div>
</div>
<div class="line">
<div class="line__inner"></div>
</div>
<div class="line">
<div class="line__inner"></div>
</div>
<div class="line">
<div class="line__inner"></div>
</div>
<div class="line">
<div class="line__inner"></div>
</div>
<div class="line">
<div class="line__inner"></div>
</div>
<div class="line">
<div class="line__inner"></div>
</div>
<div class="line">
<div class="line__inner"></div>
</div>
here's the js
window.addEventListener("load", function()
{
var loader = document.getElementById("ld");
loader.style.display = "none";
})
all the css i've done so far is just loader style and coloring nothing really related to positioning.
i tried putting my loader in a container and centering that but it didn't work out as planned and the navbar didn't get greyed out
thank you all
Ok you are asking how to create an overlay and center your loading widget in the middle of the screen. There are a lot of ways your could do this, here is one of them.
function removeOverlay() {
const overlay = document.querySelector('#overlay');
overlay.classList.remove('show');
document.body.style.overflow = 'auto';
}
body {
overflow: hidden;
}
#overlay {
background-color: rgba(255,255,255,0.7);
display: none;
position: absolute;
bottom: 0;
top: 0;
left: 0;
right: 0;
z-index: 2;
}
#overlay.show {
display: block;
}
#overlay-container {
align-items: center;
justify-content: center;
display: flex;
flex-direction: column;
height: 100%;
}
<article>
<header><h2>My Article</h2></header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
</p>
</article>
<div id="overlay" class="show">
<div id="overlay-container">
<h3>Loading ...</h3>
<p>Place your loading widget in the overlay-container</p>
<button onclick="removeOverlay()">Remove Overlay</button>
</div>
</div>
I am pretty new to javascript, I have learned some of the basics but don't completely grasp it yet. I am trying to get the color of my nav on the right to change by adding an active class to it depending on what section I am at. I don't quite understand how I would implement appending the class to my nav item when it passes the specific div. Any help would be greatly appreciated. I just placed some random code below just so I can link the codepen. It's alot easier than me posting my entire html/css code here.
HTML
div class="global-container">
<div class="logo">
<div class="layer2">
</div>
</div>
<div class="copy">
<p>© text</p>
</div>
<div class="links">
<a href="#">
<img src="">
</a>
<br>
<a href="#">
<img src="">
</a>
</div>
<!-- End of Logo !-->
<ul class="sidebar">
<a href="#section1">
<div class="item">
</div>
</a>
<a href="#section2" >
<div class="item">
</div>
</a>
<a href="#section3">
<div class="item">
</div>
</a>
<a href="#section4" >
<div class="item" >
</div>
</a>
<a href="#section5" >
<div class="item">
</div>
</a>
</ul>
<!-- Sidebar!-->
<div class="content-container">
<div id="section1">
<div class="inner-container">
<div class="intro-message center">
<h1 class="headline-big center">
section1</h1>
<h2>
text
</h2>
<p>text</p>
<div class="button">
text
text
</div>
<h6 class="change">text</h6>
</div>
</div>
<div id="section2">
<div class="about-message">
<div class="left">
<h1>
Section 1</h1>
<p> text
<br>
<br>
text</p>
</div>
</div>
</div>
<div id="section3">
<div class="inner-container">
<div class="education-message ">
<h1 >
section3</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>
<div id="section4">
<div class="inner-container">
<div class="intro-message center">
<h1 class="headline-big center">
Section4</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<div id="section5">
<div class="inner-container">
<div class="intro-message center">
<h1 class="headline-big center">
section 5</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
CSS - I want to add to .item class
.active {
background-color: red;
}
https://codepen.io/anon/pen/BZzbGz
Heres an example:
https://bonhomme.lol/
The nav-lines on the right change color as you scroll. I want to achieve this effect but the color changes depending on which section div I've reached.
First, I get the scroll position of the items in the navigation. Then add/remove the class based on the current scroll position. Check this out:
Your modified Codepen
$(document).ready(function() {
$(document).on("scroll", onScroll);
function onScroll(event) {
var scrollPos = $(document).scrollTop();
$(".sidebar a").each(function() {
var currDiv = $(this).find("div");;
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if(refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos)
{
$(".sidebar a div").removeClass("active");
currDiv.addClass("active");
} else {
currDiv.removeClass("active");
}
});
}
});
Edit: Here's the explanation you requested of the items we're using in the IF
refElement.position().top returns how many pixels from the top of the page of that element is.
refElement.height() is returns the pixels representing the height of the element.
scrollPos returns in pixels how far down on the page we currently are.
For changing class of an element on scroll - jquery:
<script>
if($(document).scrollTop>10){
$("#myDiv).addClass("active");
}
else{
$("#myDiv").removeClass("active");
}
You have different options to do this: use a library or write the code yourself. If you chose the latter, you can try the following approaches.
1) Compare offsets
window.scrollY gives your the scroll amount of the page. element.offsetTop gives you the (fixed) offset of an element on the page. You can compare these values to determine, which element is currently in view.
2) get screen coordinates
element.getBoundingClientRect() gives you the screen coordinates of an element. You can use these to check if it is at the top of the page.
Now you just use a hook on the scroll event to check the positions and know where you are at. My code snippet only accounts for scrolling down, I leave the "scroll up" case for you to implement as an exercise.
var headings = [document.querySelector("h1"),document.querySelector("h2"),document.querySelector("h3"),document.querySelector("h4")];
var nav = document.querySelector("nav span");
var currentIndex=0;
document.addEventListener("scroll",function(){
// get the current position of the element
let currentElPos = headings[currentIndex].getBoundingClientRect().top;
// if it's near the top border update the navigation
if (currentElPos < 100){
// in your case, you would update the class
nav.innerHTML = headings[currentIndex].innerHTML;
if (currentIndex+1<headings.length) currentIndex++;
}
});
h1,h2,h3{
margin-bottom:20em;
}
h4{
margin-bottom:30em;
}
nav{
position:fixed;right:20px;top:20px;
border:2px solid red;padding:5px;
}
<nav>You are viewing:<br><span>First heading!</span></nav>
<h1>First heading!</h1>
<h2>Second heading!</h2>
<h3>Third heading!</h3>
<h4>Fourth heading!</h4>
I am facing a very weird problem that never experienced in past!! I have a html link in my website as follows:
<div>
Facebook
</div>
Unfortunately it is showing as plain text "Facebook", not as clickable link text!
What can be the possible reasons behind this kind of weird behavior?? Expecting help from the expert guys!!
Here is the Complete Code:
#{
ViewBag.Title = "News";
}
<link rel="stylesheet" type="text/css" href="~/Content/css/pixeden-icons.css">
<link rel="stylesheet" href="~/Content/css/main.css">
<div id="banner-area">
<img src="~/Content/images/banner/banner2.jpg" alt="" style="width: 100%; height: 350px;" />
<div class="parallax-overlay"></div>
<!-- Subpage title start -->
<div class="banner-title-content">
<div class="text-center">
<h2>News and Events</h2>
<ul class="breadcrumb">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("News and Events", "News", "NewsAndEvents")</li>
</ul>
</div>
</div><!-- Subpage title end -->
</div><!-- Banner area end -->
<div>
FaceBook
</div>
<div class="container archive">
<div class="pageContentArea archive-content">
<div class="timeline-wrap">
<article>
<time datetime="2015-01-31 08:30:45.687">26 jan,2015</time>
<div class="article_inner">
<h1>The Lego Movie” snubbed at the Oscars</h1>
<img src="~/Content/images/News/img1.jpg" alt="" />
<p>
Pellentesque quis sapien eleifend aliquet, morbi ideru dictum finibus blandit. Phasellus a iaculis hiri habitase platea dictumst neque, tincinq mangas.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<!-- <a class="readMore" href="#">Read More..</a> -->
</div>
</article>
</div><!--timeline-wrap-->
</div><!--pageContentArea-->
</div><!--container-->
#section scripts {
<script src="~/Scripts/js/jquery.dlmenu.js"></script>
<script src="~/Scripts/js/jquery.sticky.js"></script>
<script src="~/Scripts/js/main.js"></script>
}
Thanks!!
The problem isn't in your html syntax. Everything is okay with FaceBook. Maybe it's overridden by some styles (text-decoration: none) in your css file, which is included in <head> section. To debug the problem, try to set text-decoration:underline(default value) to your anchor tag, make it from browser inspect to be sure, that it won't be overridden by the other styles or script.
I have created one page in that there is on button like MORE.if i click on MORE next page will display.In next page there are 5 accordion tab created..the issue is that accordion tab click event is not working.Please help me..
<html>
<head>
<meta charset="utf-8">
<title>DUMMY</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<meta name="format-detection" content="telephone=no">
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/responsive.css">
<link rel="stylesheet" href="css/themes.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style>
.accordion-toggle{
display:inline-block;
width:100%;
}
</style>
</head>
<body class="blue-skin">
<div class="wrapper">
<!-- SECTION -->
<section id="home">
<div class="wrap inverse bg-dark vpadding-strong anima">
</div>
</section>
<section id="advs">
<div class="wrap">
<header class="content-header"></header>
<article id="fumeExhaustSystem" class="container_12 content center">
<div class="grid_1"></div>
<div class="grid_10">
<div class="grid_6">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
<span>More</span>
</div>
</div>
<div class="grid_1"></div>
</article>
<footer class="content-footer"></footer>
</div>
</section>
</div> <!-- /wrapper -->
<div class="overlay"></div> <!-- overlay layer -->
<!-- POPUP: portfolio -->
<div id="work-popup-2" class="popup work-popup">
<div class="slides-container fullslider">
<ul class="sliderwrap">
<li><div class="bgimg"><img src="images/slides/slide-3.jpg" alt=""></div></li>
<li><div class="bgimg"><img src="images/slides/slide-4.jpg" alt=""></div></li>
<li><div class="bgimg"><img src="images/slides/slide-5.jpg" alt=""></div></li>
<li><div class="bgimg"><img src="images/slides/slide-6.jpg" alt=""></div></li>
<li><div class="bgimg"><img src="images/slides/slide-9.jpg" alt=""></div></li>
</ul>
</div>
<div class="container_12 vpadding">
<div class="grid_3">
<h2> System</h2>
</div>
<div class="grid_9">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
1.
</a><i class="indicator glyphicon glyphicon-chevron-down pull-right"></i>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
2.
</a><i class="indicator glyphicon glyphicon-chevron-up pull-right"></i>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
3.
</a><i class="indicator glyphicon glyphicon-chevron-up pull-right"></i>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</div>
</div>
</div> <div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapsefour">
4.
</a><i class="indicator glyphicon glyphicon-chevron-up pull-right"></i>
</h4>
</div>
<div id="collapsefour" class="panel-collapse collapse">
<div class="panel-body">
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapsefive">
5.
</a><i class="indicator glyphicon glyphicon-chevron-up pull-right"></i>
</h4>
</div>
<div id="collapsefive" class="panel-collapse collapse">
<div class="panel-body">
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
</div>
</div>
</div>
<script>
function toggleChevron(e) {
$(e.target)
.prev('.panel-heading')
.find("i.indicator")
.toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
}
$('#accordion').on('hidden.bs.collapse', toggleChevron);
$('#accordion').on('shown.bs.collapse', toggleChevron);
</script>
<script src="js/jquery-2.1.0.min.js"></script>
<script src="js/jquery.plugins.js"></script>
<script src="js/custom.js"></script>
</body>
</html>
What you are doing here is that you are collapsing div on click of anchor tag.
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
and it's working fine, but maybe you want it to be opened on click of whole slide,
you can do it with CSS workaround by making anchor spread on whole clickable panel.
see the attached fiddle for more info
Updated Fiddle : http://jsfiddle.net/RockRathore/f6au4bn9/3/
That's basically my question, here a Plunker
http://plnkr.co/edit/SNFy2XcOBefUavG1QCqD?p=preview
<button class="btn btn-default"
data-template="customer.tpl.html"
bs-modal="modal">New Customer
</button>
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" ng-show="title">
<button type="button" class="close" ng-click="$hide()">×</button>
<h4 class="modal-title" ng-bind="title">Hello</h4>
</div>
<div class="modal-body" ng-bind="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" ng-click="$hide()">Close</button>
</div>
</div>
</div>
</div>
why ?
It is showing the template, but it does not seems that way because you have ng-bind="content" in the template. This means that the modal will replace any modal-body content with the content of the data-content attribute (or if passed by javascript). Your data-content is nothing, so the "Lorem ipsum ..." is replaced with "".
So change
<div class="modal-body" ng-bind="content">
to
<div class="modal-body">
and it works.
forked plnkr -> http://plnkr.co/edit/18cyHRx8fQ6gXrdLnWG8?p=preview