I am using a Google Map and Street View javascript code within two panels using Bootstrap Accordian. The first panel contains the map and the second contains the street view. Currently both panels load their JS code on page load but the second panel is collapsed so only the Map panel is visible.
Is it possible to delay the loading of the second panel which contains the street view code until the user clicks to expand/unhide the content rather than loading it all on page load?
Thanks
<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="#collapse1">Local Map</a></h4></div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">
**Google Map JS**
</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="#collapse2">Street View</a></h4></div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<div id="pano" style="width: 400px; height: 300px;"></div>
</div>
</div>
</div>
</div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".accordion-toggle").on('click',function(){
if($(this).attr('href') =="#collapse2"){
alert('');function initialize() {
var point= new google.maps.LatLng(51.524964,-0.34146399999997357);
var panoramaOptions = {
position: point,
pov: {
heading: 12.399999999999999,
pitch: 6.94
}
};
var panorama = new
google.maps.StreetViewPanorama(document.getElementById('pano'),panoramaOptions);
map.setStreetView(panorama);
}
google.maps.event.addDomListener(window, 'load', initialize);
}
});
});
}
});
});
</script>
you can try something like this:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Twitter Bootstrap 3 Accordion</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
<script>
$(document).ready(function(){
$(".accordion-toggle").on('click',function(){
if($(this).attr('href') =="#collapse2"){
alert('hi');
initialize();
}
});
});
function initialize() {
var fenway = new google.maps.LatLng(42.345573, -71.098326);
var mapOptions = {
center: fenway,
zoom: 14
};
var map = new google.maps.Map(
document.getElementById('map-canvas'), mapOptions);
var panoramaOptions = {
position: fenway,
pov: {
heading: 34,
pitch: 10
}
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), panoramaOptions);
map.setStreetView(panorama);
}
</script>
</head>
<body>
<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="#collapse1">Local Map</a></h4></div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">
**Google Map JS**
</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="#collapse2">Street View</a></h4></div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<div id="map-canvas" style="width: 400px; height: 300px"></div>
<div id="pano" style="width: 400px; height: 300px;"></div>
</div>
</div>
</div>
</div>
</body>
</html>
Related
There is a nearby location on the property listing page. I want to show is collapsed on the page load.
I tried add/removeclass and attr but didn't work.
Theme dynamically removes "in" to collapseFive class + "collapsed" to panel-title class
Original code, not collapsed
<div class="panel-wrapper yelp_wrapper">
<a class="panel-title" id="yelp_details" data-toggle="collapse" data-parent="#yelp_details" href="#collapseFive"><span class="panel-title-arrow"></span>Yakınlarda Neler Var</a>
<div id="collapseFive" class="panel-collapse collapse in">
Original code, collapsed
<div class="panel-wrapper yelp_wrapper">
<a class="panel-title collapsed" id="yelp_details" data-toggle="collapse" data-parent="#yelp_details" href="#collapseFive" aria-expanded="false"><span class="panel-title-arrow"></span>Yakınlarda Neler Var</a>
<div id="collapseFive" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
Add class
$(document).ready(function(){
$("#yelp_details").addClass("collapsed");
});
Remove class
$(document).ready(function(){
$("#collapseFive").removeClass("in");
});
Attr
$(document).ready(function(){
$("#collapseFive").attr("class", "panel-collapse collapse");
});
I assume this is a boostrap collapse. If that's right, you need to use:
.collapse('show'): hows a collapsible element.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<div class="panel-wrapper yelp_wrapper">
<a class="panel-title" id="yelp_details" data-toggle="collapse" data-parent="#yelp_details"
href="#collapseFive"><span class="panel-title-arrow"></span>Yakınlarda Neler Var</a>
<script>
$(function () {
$('#collapseFive').collapse('show');
});
</script>
<div id="collapseFive" class="panel-collapse collapse in">
<div class="well">
1
2
3
4
</div>
</div>
</div>
I am trying to make a collapsible div/panel/rows. I want to add arrow icon (right and down arrow) using jquery/javascript. Do you have idea on how to translate my CSS code on jQuery?
Here's my jQuery code:
$(document).ready(function(){
$(".collapse").on("hide.bs.collapse", function(){
$(".arrows").after().css({"content":"\e080","font-family": "Glyphicons Halflings"});
});
$(".collapse").on("show.bs.collapse", function(){
$(".arrows").after().css({"content":"\e114","font-family": "Glyphicons Halflings"});
});
});
Here's my css code:
.arrows:after {
font-family: "Glyphicons Halflings";
content: "\e114";
}
.arrows.collapsed:after {
font-family: "Glyphicons Halflings";
content: "\e080";
}
Here's my HTML code:
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Collapsible panel <span class="arrows"></span></a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">Panel Body</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
</div>
check this snipped.just toggle the class on hide and show events
$(".collapse").on("hide.bs.collapse", function() {
$(this).parent().find('.arrows').addClass('collapsed');
});
$(".collapse").on("show.bs.collapse", function() {
$(this).parent().find('.arrows').removeClass('collapsed');
});
.arrows:after {
font-family: "Glyphicons Halflings";
content: "\e114";
}
.arrows.collapsed:after {
font-family: "Glyphicons Halflings";
content: "\e080";
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Collapsible panel <span class="arrows collapsed"></span></a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">Panel Body</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
</div>
</body>
</html>
Hi I made a image map with 2 clickable areas. (The Netherlands and South Africa)
It works fine in Google chrome, Edge, Internet Explorere 11, Safari and mobile/tablet browser and chrome.
But if I open my page: http://www.fruitconneqt.jevdopilot.nl/index.php/teest/
in firefox on my MAC I can't click on the Netherlands or South Africa.
I really don't know why this is not working... so I hope maybe you know what I can change to make this work in mozilla firefox for MAC.
Thanks...
<!DOCTYPE HTML>
<head>
<title>relaties</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/ios-orientationchange-fix.min.js"></script>
<!--Fireworks CS5 Dreamweaver CS5 target. Created Wed Dec 02 16:20:39 GMT+0100 (CET) 2015-->
<style>
body {
font-family: Helvetica, Arial, sans-serif;
}
h1 {
font-size: 20px;
}
div {
width: 100%;
text-align: center;
}
img[usemap] {
border: none;
height: auto;
max-width: 100%;
width: auto;
}
</style>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/agency.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>
<!-- 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]AFRIKA 917,563,1062,614| NL 835,161,1000,240-->
</head>
<body bgcolor="#ffffff">
<div>
<img name="relaties" src="img/relaties.jpg" width="1909" height="832" border="0" id="relaties" usemap="#m_relaties" alt="" /><map name="m_relaties" id="m_relaties">
<a data-toggle="collapse" data-target="#collapseSix" class="page-scroll" data-parent="#accordion" href="#collapseSix">
<area shape="rect" coords="896,556,1072,632" href="#collapseSix" alt="" />
</a>
<a data-toggle="collapse" data-target="#collapseOne" class="page-scroll" data-parent="#accordion" href="#collapseOne">
<area shape="rect" coords="816,155,1016,253" href="#collapseOne" alt="" />
</a>
</map>
</div>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active">
<div id="wrap text-center">
</div>
</div>
</div>
</div>
<br><br>
<div class="container text-left">
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title text-left">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><strong>The Netherlands</strong><span class="caret" ></span></a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body text-left"> <p><img src="img/logo_fruitconneqt_klein.jpg" width="15%" > Fruit Conneqt - Bekijk de website</p><hr>
</div>
</div>
</div>
<!-- FRANCE -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title text-left">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"><strong>France</strong><span class="caret"></span></a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body text-left">
<p>Honey Crunch Learn more.</p>
</div>
</div>
</div>
<!-- ITALY -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title text-left">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"><strong>Italy</strong><span class="caret"></span></a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body text-left">
<p>Mazzoni Learn more.</p>
</div>
</div>
</div>
<!-- CHILE -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title text-left">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseFour"><strong>Chile</strong><span class="caret"></span></a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse">
<div class="panel-body text-left">
<p>CopeFrut Learn more.</p>
</div>
</div>
</div>
<!-- NEW ZEALAND -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title text-left">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseFive"><strong>New Zealand</strong><span class="caret"></span></a>
</h4>
</div>
<div id="collapseFive" class="panel-collapse collapse">
<div class="panel-body text-left">
<p>Taylor New Zealand Learn more.</p>
</div>
</div>
</div>
<!-- SOUTH AFRICA -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title text-left">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseSix"><strong>South Africa</strong><span class="caret"></span></a>
</h4>
</div>
<div id="collapseSix" class="panel-collapse collapse">
<div class="panel-body text-left">
<p><img src="img/capesupra.jpg" width="15%"> Cape Supra - Bekijk de website</p>
</div>
</div>
</div>
<section id="services">
</section>
</div>
</div>
</div>
<script src="js/scrolling-nav.js"></script>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Plugin JavaScript -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="js/classie.js"></script>
<!-- Contact Form JavaScript -->
<script src="js/jqBootstrapValidation.js"></script>
<!-- Custom Theme JavaScript -->
<script src="js/agency.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.rwdImageMaps.min.js"></script>
<script>
$(document).ready(function(e) {
$('img[usemap]').rwdImageMaps();
});
</script>
</body>
</html>
I am trying to nest accordion panels which works. However, I want the chevron icon to point down (fa-chevron-down) when the panel-body is collapsed and point right when the panel-body is not collapsed. I wrote a directive to get this effect and it too works.However, when I apply this directive to the nested panel, its working the effect on both the nested and parent panel-heading. What am I doing wrong? Is there a cleaner way to do this?
(function () {
'use strict';
angular
.module('myApp', [])
.directive('bsCollapse', bsCollapse);
function bsCollapse() {
var $ = window.$;
var directive = {
restrict: 'EA',
link: linkFunc,
};
return directive;
function linkFunc(scope, el, attr, ctrl) {
$(el[0])
.on('hide.bs.collapse', function (evt) {
$(evt.currentTarget)
.prev()
.children()
.children()
.removeClass('fa-chevron-down')
.addClass('fa-chevron-right');
})
.on('show.bs.collapse', function (evt) {
$(evt.currentTarget)
.prev()
.children()
.children()
.removeClass('fa-chevron-right')
.addClass('fa-chevron-down');
});
}
}
})();
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body>
<div class="container">
<!-- PARENT PANEL GROUP -->
<div class="panel-group col-sm-6 col-sm-offset-3" id="accordion">
<!-- PARENT PANEL -->
<div class="panel panel-default">
<!-- PARENT PANEL HEADING -->
<div class="panel-heading" data-parent="#accordion" data-target="#collapseOne" data-toggle="collapse" role="button">
<h4 class="panel-title">
PARENT PANEL HEADING
<i class="fa fa-chevron-down fa pull-right"></i>
</h4>
</div>
<!-- PARENT PANEL COLLAPSE BODY -->
<div bs-collapse class="panel-collapse collapse in" id="collapseOne" role="tabpanel">
<div class="panel-body">
<!-- NESTED PANEL GROUP -->
<div class="panel-group" id="accordion2">
<!-- NESTED PANEL -->
<div class="panel panel-default">
<!-- NESTED PANEL HEADING -->
<div class="panel-heading" data-parent="#accordion2" data-target="#nestedCollapseOne" data-toggle="collapse" role="button">
<h4 class="panel-title">
NESTED PANEL HEADING
<i class="fa fa-chevron-down fa pull-right"></i>
</h4>
</div>
<!-- NESTED PANEL COLLAPSE BoDY -->
<div bs-collapse class="panel-collapse collapse in" id="nestedCollapseOne" role="tabpanel">
<div class="panel-body">
NESTED PANEL BODY....
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- JS Assets -->
<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.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</body>
</html>
I've tried the method mentioned in the answer below. scope, flag and have faced the problem that when quickly opening and closing the panel/accordion, it fails. Please see the sreenshots - they are from the plnkr you've provided. Thanks though.
The icons in both the panels are affected is because the $on event is triggered at the same time in both the elements. I have edited your code and added few lines of code in script and used angularjs' ng-class which is lot easier. Here is a plunker demo . Hope it helps.
scipt.js:
scope.flag1 = true;
scope.flag2=true;
scope.parentDiv = function() {
scope.flag1 = !scope.flag1;
};
scope.nestedDiv = function() {
scope.flag2= !scope.flag2;
};
HTML:
<h4 class="panel-title">
PARENT PANEL HEADING
<i ng-class="{'fa fa-chevron-down': flag1, 'fa fa-chevron-right': !flag1}" class="pull-right"></i>
</h4>
<h4 class="panel-title">
NESTED PANEL HEADING
<i ng-class="{'fa fa-chevron-down': flag2, 'fa fa-chevron-right': !flag2}" class="pull-right"></i>
</h4>
I've found a CSS solution to this. Thankfully, Bootstrap throws in a collapsed class to the panel-heading. From there I can add this style which adds the chevron-right to :before pseudo class.
Also, this doesn't require directive or AngularJS code.
Thank you stackoverflow for reference to this :
Use Font Awesome Icons in CSS
div.panel-heading i {
position: relative;
}
div.panel-heading.collapsed i:before {
content: "\f054";
font-family: FontAwesome;
}
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body>
<div class="container">
<!-- PARENT PANEL GROUP -->
<div class="panel-group col-sm-6 col-sm-offset-3" id="accordion">
<!-- PARENT PANEL -->
<div class="panel panel-default">
<!-- PARENT PANEL HEADING -->
<div class="panel-heading" data-parent="#accordion" data-target="#collapseOne" data-toggle="collapse" role="button">
<h4 class="panel-title">
PARENT PANEL HEADING
<i class="fa fa-chevron-down fa pull-right"></i>
</h4>
</div>
<!-- PARENT PANEL COLLAPSE BODY -->
<div bs-collapse class="panel-collapse collapse in" id="collapseOne" role="tabpanel">
<div class="panel-body">
<!-- NESTED PANEL GROUP -->
<div class="panel-group" id="accordion2">
<!-- NESTED PANEL -->
<div class="panel panel-default">
<!-- NESTED PANEL HEADING -->
<div class="panel-heading" data-parent="#accordion2" data-target="#nestedCollapseOne" data-toggle="collapse" role="button">
<h4 class="panel-title">
NESTED PANEL HEADING
<i class="fa fa-chevron-down fa pull-right"></i>
</h4>
</div>
<!-- NESTED PANEL COLLAPSE BoDY -->
<div bs-collapse class="panel-collapse collapse in" id="nestedCollapseOne" role="tabpanel">
<div class="panel-body">
NESTED PANEL BODY....
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- JS Assets -->
<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.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</body>
</html>
I have a well-known basic collapsible panel which its codes mentioned belowed. I changed some properties via css sets like collapse-in and collapse height&width but could not achieve to change collapsing direction. I want to change it towards top opposite to default position. How can I do that? I assure you that I tried several ways but could not solve the issue.
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Collapsible panel</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">Panel Body</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
</div>
Just interchange the positions of .panel-heading and #collapse1.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="panel-group">
<div class="panel panel-default">
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">Panel Body</div>
<div class="panel-footer">Panel Footer</div>
</div>
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Collapsible panel</a>
</h4>
</div>
</div>
</div>
</body>
</html>