My website contains this simple menu home, about me and contact.
It's single page website, I want to make it easy for user's when visiting my page, user can scroll down the page to check the contact or about me etc or user can just simply click About me or Contact and the window will pop up and show only About me or Contact [using modals in bootstrap], I am able to do that ,but all things event containing modals are hidden on my page , how can I make those things containing modals visible on my page ?
Here is simple contact page codes with modals.
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="navbar-collapse collapse" id="navbar">
<ul class="nav navbar-nav" id="nav">
<li>
<a href="#">Home
</a>
</li>
<li>
<a href="#abt_modal" data-toggle="modal" data-target="#abt_modal">About me
</a>
</li>
<li>
<a href="#modal1" data-toggle="modal" data-target="#myModal"> Contact
</a>
</li>
<li>
</ul>
</div>
<div id="myModal" class="modal" role="dialog">
<div class="modal-dialog">
<footer class="f7" id="modal1">
<button type="button" class="btn btn-default" data-dismiss="modal" id="close1">Close</button>
<div class="container-fluid">
<div class="row" id="ft">
<div class="ft">
<h3> SAY HELLO </h3>
<span>get in touch</span>
</div>
<div class="col-md-4 a">
<p>
<i class="fa fa-mobile-phone fa-5x"></i> <br><br>
<span> Call us at </span><br>
<span> +467i7292518347</span><br>
</p>
</div>
<div class="col-md-4 a" >
<p>
<i class="fa fa-map-marker fa-5x"></i> <br><br>
<span> Ul.Zagórze 27A </span> <br>
<span>05-098 Sadowata,<br> Poland </span>
</p>
</div>
<div class="col-md-4 a">
<p>
<i class="fa fa-envelope fa-5x"></i><br><br>
<span> Email us at</span> <br>
<span>Hotbong20376gównoJebanye#gmail.com</span><br>
</p>
</div>
</div>
</div>
</footer>
</div>
</div>
Copy pest code in individual file and check in your local it will run. perfect. Given below is modern way of doing it. You can refer this link for further details of the way of creating modal dynamically.
function openModalDynamic() {
var message = $('#content-div');
BootstrapDialog.show({
title: 'Default Title',
message: $('#content-div'),
buttons: [{
label: 'Close',
action: function(dialog) {
dialog.close();
}
}],
onhide: function(dialog) {
$('#content-container').append(message);
}
});
};
function openModalDynamic2() {
BootstrapDialog.show({
title: 'Default Title',
message: $('#content-div').clone(true),
buttons: [{
label: 'Close',
action: function(dialog) {
dialog.close();
}
}],
onhide: function(dialog) {}
});
}
<!DOCTYPE html>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js"></script>
<button type="button" onclick="openModalDynamic()">Type 1</button>
<button type="button" onclick="openModalDynamic2()">Type 2</button>
<br> Type 1 : This code will cut the div from original location and put it into your modal.<br> Type 2 : This code will copy the div from original location and put it into your modal. So you will see same div at both the place.<br> This will work great
until and unless you have any activity depending upon id's of elements.
<div style="height : 250px">
</div>
<div id="content-container">
<div id="content-div">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">Panel with panel-default class</div>
<div class="panel-body">Panel Content</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">Panel with panel-primary class</div>
<div class="panel-body">Panel Content</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">Panel with panel-success class</div>
<div class="panel-body">Panel Content</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">Panel with panel-info class</div>
<div class="panel-body">Panel Content</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">Panel with panel-warning class</div>
<div class="panel-body">Panel Content</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">Panel with panel-danger class</div>
<div class="panel-body">Panel Content</div>
</div>
<div class="row">
<div class="col-sm-6">
About US will go here.
</div>
<div class="col-sm-6">
Contact US will go here.
</div>
</div>
</div>
</div>
</div>
Related
I am trying to build a page with a button and panel. The code is built in a reusable way as this button will be used in multiple pages. However, in a particular page we have a panel displaying info and now they wanted to show this button inside panel header. Can anyone help me to merge these two divs in a separate page using CSS.
Current:
Desired:
Button code:
<div>
<p class=""><span class="fa fa-star"></span>Mark Read</p>
</div>
Panel code:
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">Panel Content</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
You can just move it into the heading and remove the div
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
<p class=""><span class="fa fa-star"></span>Mark Read</p>Panel Heading</div>
<div class="panel-body">Panel Content</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
I have a collapsible box in adminlte. by default when page loads, it's expanded. How to make it collapsed by default?
Here is what I have used to make box:
https://adminlte.io/docs/2.4/js-box-widget
My HTML:
<div class="box">
<div class="box-header with-border">
<h3 class="box-title">Collapsible Box Example</h3>
<div class="box-tools pull-right">
<!-- Collapse Button -->
<button type="button" class="btn btn-box-tool" data-widget="collapse">
<i class="fa fa-minus"></i>
</button>
</div>
</div>
<div class="box-body">
The body of the box
</div>
<div class="box-footer">
The footer of the box
</div>
</div>
My script:
<script>
$('.box').boxWidget({
animationSpeed: 500,
collapseTrigger: '#my-collapse-button-trigger',
removeTrigger: '#my-remove-button-trigger',
collapseIcon: 'fa-minus',
expandIcon: 'fa-plus',
removeIcon: 'fa-times',
hide: true
})
Try boxWidget('collapse')
$('.box').boxWidget({
animationSpeed: 500,
collapseTrigger: '#my-collapse-button-trigger',
removeTrigger: '#my-remove-button-trigger',
collapseIcon: 'fa-minus',
expandIcon: 'fa-plus',
removeIcon: 'fa-times',
hide: true
})
$('.box').boxWidget('collapse')
OR add collapsed-box class
<div class="box collapsed-box">
...
</div>
First, add collapsed-box class to <div class="box">.
Then, add display: none inline style to <div class="box-body"> and <div class="box-footer">.
Like this:
<div class="box collapsed-box">
<div class="box-header with-border">
<h3 class="box-title">Collapsible Box Example</h3>
<div class="box-tools pull-right">
<!-- Collapse Button -->
<button type="button" class="btn btn-box-tool" data-widget="collapse">
<i class="fa fa-minus"></i>
</button>
</div>
</div>
<div class="box-body" style="display: none">
The body of the box
</div>
<!-- /.box-body -->
<div class="box-footer" style="display: none">
The footer of the box
</div>
</div>
It should work.
I have a multiple section accordion set up with two column. The page is setup something like this:
<div class="panel-group" id="Accordion">
<div class="panel panel-default">
<div class="panel-heading" data-toggle="collapse" data-parent="#Accordion" data-target="#ApplicantInfo">
<h4 class="panel-title">
<a class="accordion-toggle">
Applicant Information:
</a>
</h4>
</div>
<div id="ApplicantInfo" class="panel-collapse collapse in">
<div class="panel-body">
<div class="row">
<div id="divApplicant" class="col-xs-6">Applicant:</div>
<div id="divApplicantPhone" class="col-xs-6">Applicant Telephone:</div>
</div>
<div class="row spFieldRow">
<div class="col-xs-6">
<span dir="none">
<input id="applinantName" ...>
</span>
</div>
<div class="col-xs-6">
<span dir="none">
<input id="applinantPhone" ...>
</span>
</div>
</div>
<div class="row">
<div id="divApplicantEmail" class="col-xs-6">Applicant Email:</div>
<div id="divApplicantType" class="col-xs-6">Applicant Type:</div>
</div>
<div class="row spFieldRow">
<div class="col-xs-6">
<span dir="none">
<input id="applinantEmail" ...>
</span>
</div>
<div class="col-xs-6">
<span dir="none">
<input id="applinantType" ...>
</span>
</div>
</div>
</div>
</div>
</div>
For the most part it works very well. However, some of my fields are dynamic depending on the selection of one of the other fields. The problem I am running into is that if I remove say either of the input rows or even just the text box it shrinks the width of the panel.
I have attached a couple of pics to illustrate.
Before:
After:
I have tried affecting entire rows, I even added a div container around the label and input containers and hiding that. Doesn't matter, the second row shifts up and shrinks.
Please be kind, I am very new to bootstrap (my first time) and haven't done much front end development in recent years. I appreciate any assistance.
Edit:
I created a JSFiddle as close to this as possible and can't recreate the issue (you can find it here if you want).
I completely forgot to mention prior, but this page is sitting on a SharePoint site so there is all other kinds of css being loaded. My guess is one of them is getting in the way. If anyone has seen this before i would appreciate any input.
I am not sure this is what you are looking for but instead of dynamically adding the panels themselves, you can show/hide them at will.
(you can still dynamically add content to each panel as you see fit, just not the panels - they serve as containers for your dynamic content)
See demo below (select an applicant type in the dropdown box):
$(function() {
$("select").on("change", function() {
if ($(this).val() === 'Internal') {
$("#externalPanel").collapse('hide');
$("#internalPanel").removeClass('hide');
$("#internalPanel").collapse('show');
} else if ($(this).val() === 'External') {
$("#internalPanel").collapse('hide');
$("#externalPanel").removeClass('hide');
$("#externalPanel").collapse('show');
} else {
$(".secondary-panel").collapse('hide');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="panel-group" id="ADMSAccordion">
<div class="panel panel-default">
<div class="panel-heading" data-toggle="collapse" data-parent="#ADMSAccordion" data-target="#ApplicantInfo">
<h4 class="panel-title">
<a class="accordion-toggle">
Applicant Information:
</a>
</h4>
</div>
<div id="ApplicantInfo" class="panel-collapse collapse in">
<div class="panel-body">
<div class="row">
<div id="divApplicant" class="col-xs-6">Applicant:</div>
<div id="divApplicantPhone" class="col-xs-6">Applicant Telephone:</div>
</div>
<div class="row">
<div class="col-xs-6">
<input title="Applicant" type="text" maxlength="255" />
</div>
<div class="col-xs-6">
<input title="ApplicantPhone" type="text" maxlength="255" />
</div>
</div>
<div class="row">
<div id="divApplicantEmail" class="col-xs-6">Applicant Email:</div>
<div id="divApplicantType" class="col-xs-6">Applicant Type:</div>
</div>
<div class="row">
<div class="col-xs-6">
<input title="ApplicantEmail" type="text" maxlength="255" />
</div>
<div class="col-xs-6">
<select title="ApplicantType">
<option selected="Selected" value=""></option>
<option value="Internal">Internal</option>
<option value="External">External</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- External panel -->
<div id="externalPanel" class="panel panel-default hide secondary-panel">
<div class="panel-heading">
<h3 class="panel-title">External Panel</h3>
</div>
<div class="panel-body">
External Panel content
</div>
</div>
<!-- INternal panel -->
<div id="internalPanel" class="panel panel-default hide secondary-panel">
<div class="panel-heading">
<h3 class="panel-title">Internal Panel</h3>
</div>
<div class="panel-body">
Internal Panel content
</div>
</div>
.story_design
{
background:#5cb85c;
height: 300px;
padding: 50px 65px 58px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="container story_design">
<div class="col-lg-6 col-md-6">
<div class="panel-body">
<h2>Online Backup</h2>
<h3>Continuous automatic file backup</h3>
<a class="expand btn btn-success">LEARN MORE</a>
</div>
</div>
<div class="col-lg-6 col-md-6">
<ul class="panel-body">
<p class="tagLine">SugarSync's online backup service works quietly in the background without interfering with your productivity.</p>
<p class="callOut">Restore all your data</p>
<p class="callOut">File version control and recovery</p>
</ul>
</div>
</div>
</div>
In this code there is two section which were divided in to part of screen by using grid system but it's not working kindly suggest some example or provide right way to written a code.
Your div with 'container' class should be above the div with 'row' class.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container story_design">
<div class="row">
<div class="col-lg-6 col-md-6">
<div class="panel-body">
<h2>Online Backup</h2>
<h3>Continuous automatic file backup</h3>
<a class="expand btn btn-success">LEARN MORE</a>
</div>
</div>
<div class="col-lg-6 col-md-6">
<ul class="panel-body">
<p class="tagLine">SugarSync's online backup service works quietly in the background without interfering with your productivity.</p>
<p class="callOut">Restore all your data</p>
<p class="callOut">File version control and recovery</p>
</ul>
</div>
</div>
</div>
In the code below, for some reason when I switch to the 'experience' tab the gridspace used by 'home' is used while the 'home' content is hidden. Where exactly did I go wrong in my code?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="tab-content">
<div id='home' class='class="tab-pane fade in active' style='text-align: center;'>
<div class='container'>
<div class='row'>
<div class='col-xs-8 col-xs-offset-2 col-md-6 col-md-offset-3 col-lg-6 col-lg-offset-3'>
<div class='panel panel-primary' style='text-align: left;'>
<div class="panel-heading">
debug
</div>
<div class="panel-body">
temp
</div>
</div>
</div>
</div>
</div>
</div>
<div id="experience" class="tab-pane fade">
test
</div>
</div>
here is your Problem:
<div id='home' >>>>>>class='class="<<<<<tab-pane fade [...]
in HTML you should use " " instead of ' ', furthermore.
Fix this, and it will work ;)
http://www.bootply.com/WuGW32sWwn