Bootstrap collaspe div is not pushing the parallax div, but instead going on top of it.
See here: https://codepen.io/carlo-designer/pen/zYZoNYM
Code is below:
<div class="container my-5">
<!-- Collapse -->
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-target
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
<!-- Parallax.js -->
<div class="parallax-window" style="height:300px;" data-parallax="scroll" data-image-src="https://source.unsplash.com/4YhwiEsL0AQ/1000x600"></div>
</div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax.js/1.5.0/parallax.min.js"></script>
Any idea where it may come from ?
Thanks
Related
I've read previous threads that cover this issue for navbars and menus but it does not seem to apply. I have a very simple example: two cards, one opened by default the other collapsed. When I try to expand the second card by pressing Card 2 Button, it opens but then immediately closes again. I am not sure what I'm doing wrong.
Example here:
<div id="accordion">
<div class="card">
<div class="card-header" id="header1">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapse1" aria-expanded="true" aria-controls="collapse1">
Card 1 Button
</button>
</h5>
</div>
<div id="collapse1" class="collapse show" aria-labelledby="header1" data-parent="#accordion">
<div class="card-body">
Card 1 Content
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="header2">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapse2" aria-expanded="false" aria-controls="collapse2">
Card 2 Button
</button>
</h5>
</div>
<div id="collapse2" class="collapse" aria-labelledby="header2" data-parent="#accordion">
<div class="card-body">
Card 2 Content
</div>
</div>
</div>
</div>
Are you sure you are using Bootstrap 4?
In bootstrap 3 it works like following,
You need to use in class instead of show to make it open by default at the page load.
<div id="collapse1" class="collapse in" aria-labelledby="header1" data-parent="#accordion">
<div class="card-body">
Card 1 Content
</div>
</div>
jsFiddle
https://jsfiddle.net/0uk0xuvd/
Check your bootstrap version that your are importing.
I have tries to position the items like:
so the markup after my change is here
<div class="container">
<div class="row">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll col-4">
<button type="button" class="navbar-toggle" (click)="isCollapsed = !isCollapsed">
<span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="#/">Home</a>
<a class="navbar-brand" href="#/report">Report</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="searchBox col-4" [collapse]="isCollapsed">
<form class="navbar-form search">
<div class="form-group">
<!--</typeahead>-->
<input [(ngModel)]="country"
[typeahead]="countries"
autocomplete="off"
(typeaheadOnSelect)="countrySelected($event)"
class="form-control searchInput" [ngModelOptions]="{standalone: true}"/>
<div class="btn-group" dropdown>
<button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">
{{selectedSearchType.name}} <span class="caret"></span>
</button>
<ul dropdownMenu class="dropdown-menu" role="menu">
<li *ngFor="let type of searchType; let i = index;" role="menuitem">
<a (click)="onTypeChange(type)" class="dropdown-item cursor-pointer">{{type.name}}</a>
</li>
</ul>
</div>
</div>
</form>
</div>
<div class="col-4">
<button type="button" class="btn btn-primary" (click)="loadFromSheet()">
<span class="glyphicon glyphicon-paste"></span>
Load from sheet
</button>
</div>
</div>
</div>
But it seems like this:
How can I fix this so the "load" button is to the right most?
You can try changing the col-md-4 to col-md-3 or less and manipulate the spacing between the buttons with margin-left property on the Load button. You are probably pushing the button to the next row, so check the paddings and margins on the CSS properties surrounding the other elements if not finding success.
Hope this helps.
I published the still not finished website just to show you what I want
In this website:
http://urbanphenomena.net/shukri/#page3
the iFrame is redirecting to different images in different pages when the user clicks a specific link. Here is the code if needed:
<!--- Projects Section --->
<div class="section projects-section container-fluid" id="section4">
<div class="row">
<div class="col-lg-2 pull-left">
<div class="panel-group" id="accordion">
<div class="panel">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Architecture</a>
</h4>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">
<!--- FAF --->
<div>
<a class="collapsed" data-toggle="collapse" href="#collapseOne">
<h5>FAF</h5>
</a>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<ol>
<button type="button" onclick="setURL('imgs/projects/ARCH/A01-FAF/1.html')">A01-FAF-1</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A01-FAF/2.html')">A01-FAF-2</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A01-FAF/3.html')">A01-FAF-3</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A01-FAF/4.html')">A01-FAF-4</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A01-FAF/5.html')">A01-FAF-5</button><br>
</ol>
</div>
<!--- KSAF --->
<div>
<a class="collapsed" data-toggle="collapse" href="#collapseTwo">
<h5>KSAF</h5>
</a>
</div>
<div id="collapseTwo" class="collapse">
<ol>
<button type="button" onclick="setURL('imgs/projects/ARCH/A02-KSAF/1.html')">A02-KSAF-1</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A02-KSAF/2.html')">A02-KSAF-2</button><br>
</ol>
</div>
<!--- KSAF10V --->
<div>
<a class="collapsed" data-toggle="collapse" href="#collapseThree">
<h5>KSAF10V</h5>
</a>
</div>
<div id="collapseThree" class="collapse">
<ol>
<button type="button" onclick="setURL('imgs/projects/ARCH/A03-KSAF10V/1.html')">A03-KSAF10V-1</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A03-KSAF10V/2.html')">A03-KSAF10V-2</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A03-KSAF10V/3.html')">A03-KSAF10V-3</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A03-KSAF10V/4.html')">A03-KSAF10V-4</button><br>
</ol>
</div>
<!--- Makkah --->
<div>
<a class="collapsed" data-toggle="collapse" href="#collapseFour">
<h5>Makkah</h5>
</a>
</div>
<div id="collapseFour" class="collapse">
<ol>
<button type="button" onclick="setURL('imgs/projects/ARCH/A04-Makkah/1.html')">A03-Makkah-1</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A04-Makkah/2.html')">A03-Makkah-2</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A04-Makkah/3.html')">A03-Makkah-3</button><br>
</ol>
</div>
<!--- Marina --->
<div>
<a class="collapsed" data-toggle="collapse" href="#collapseFive">
<h5>Marina</h5>
</a>
</div>
<div id="collapseFive" class="collapse">
<ol>
<button type="button" onclick="setURL('imgs/projects/ARCH/A05-Marina/1.html')">A05-Marina-1</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A05-Marina/2.html')">A05-Marina-2</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A05-Marina/3.html')">A05-Marina-3</button><br>
</ol>
</div>
<!--- Residential --->
<div>
<a class="collapsed" data-toggle="collapse" href="#collapseSix">
<h5>Residential</h5>
</a>
</div>
<div id="collapseSix" class="collapse">
<ol>
<button type="button" onclick="setURL('imgs/projects/ARCH/A06-Residential/1.html')">A06-Residential-1</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A06-Residential/2.html')">A06-Residential-2</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A06-Residential/3.html')">A06-Residential-3</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A06-Residential/4.html')">A06-Residential-4</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A06-Residential/5.html')">A06-Residential-5</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A06-Residential/6.html')">A06-Residential-6</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A06-Residential/7.html')">A06-Residential-7</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A06-Residential/8.html')">A06-Residential-8</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A06-Residential/9.html')">A06-Residential-9</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A06-Residential/10.html')">A06-Residential-10</button><br>
</ol>
</div>
<!--- SAB4 --->
<div>
<a class="collapsed" data-toggle="collapse" href="#collapseSeven">
<h5>SAB4</h5>
</a>
</div>
<div id="collapseSeven" class="collapse">
<ol>
buttona type="button" onclick="setURL('imgs/projects/ARCH/A07-SAB4/1.html')">A07-SAB4-1</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A07-SAB4/2.html')">A07-SAB4-2</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A07-SAB4/3.html')">A07-SAB4-3</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A07-SAB4/4.html')">A07-SAB4-4</button><br>
</ol>
</div>
</div>
</div>
</div>
<div class="panel">
<h4>
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Interior</a>
</h4>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<div id="collapse2" class="collapse in" aria-labelledby="heading2">
<ol>
<button type="button" onclick="setURL('imgs/projects/INT/I01-Interior/1.html')">I01-Interior-1</button><br>
<button type="button" onclick="setURL('imgs/projects/INT/I01-Interior/2.html')">I01-Interior-2</button><br>
<button type="button" onclick="setURL('imgs/projects/INT/I01-Interior/3.html')">I01-Interior-3</button><br>
<button type="button" onclick="setURL('imgs/projects/INT/I01-Interior/4.html')">I01-Interior-4</button><br>
<button type="button" onclick="setURL('imgs/projects/INT/I01-Interior/5.html')">I01-Interior-5</button><br>
<button type="button" onclick="setURL('imgs/projects/INT/I01-Interior/6.html')">I01-Interior-6</button><br>
<button type="button" onclick="setURL('imgs/projects/INT/I01-Interior/7.html')">I01-Interior-7</button><br>
</ol>
</div>
<!--- SFS --->
<div>
<a class="collapsed" data-toggle="collapse" href="#collapseOneInt">
<h5>SFS</h5>
</a>
</div>
<div id="collapseOneInt" class="collapse">
<ol>
<button type="button" onclick="setURL('imgs/projects/INT/I02-SFS/1.html')">I02-SFS-1</button><br>
<button type="button" onclick="setURL('imgs/projects/INT/I02-SFS/2.html')">I02-SFS-2</button><br>
<button type="button" onclick="setURL('imgs/projects/INT/I02-SFS/3.html')">I02-SFS-3</button><br>
<button type="button" onclick="setURL('imgs/projects/INT/I02-SFS/4.html')">I02-SFS-4</button><br>
</ol>
</div>
</div>
</div>
</div>
<div class="panel">
<h4>
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Fabrication</a>
</h4>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">
<div id="collapse3">
<ol>
<button type="button" onclick="setURL('imgs/projects/FAB/F01-Fabrication/1.html')">F01-Fabrication-1</button><br>
<button type="button" onclick="setURL('imgs/projects/FAB/F01-Fabrication/2.html')">F01-Fabrication-2</button><br>
<button type="button" onclick="setURL('imgs/projects/FAB/F01-Fabrication/3.html')">F01-Fabrication-3</button><br>
<a type="button" onclick="setURL('imgs/projects/FAB/F01-Fabrication/4.html')">F01-Fbuttonbrication-4</button><br>
<button type="button" onclick="setURL('imgs/projects/FAB/F01-Fabrication/5.html')">F01-Fabrication-5</button><br>
</ol>
</div>
</div>
</div>
</div>
</div>
</div>
<!--- iFrame --->
<div class="col-lg-7
col-md-7
col-sm-12
col-xs-12 pull-right
col-lg-pull-3 img-container
col-md-pull-3">
<iframe id="iframe" src="imgs/projects/ARCH/A01-FAF/1.html" allowfullscreen></iframe>
</div>
<script>
function setURL(url) {
document.getElementById('iframe').src = url;
}
</script>
</div>
</div>
Is there an more accurate way to do this than iframe?
and the thing I need help with mostly is:
When I reload the page, I want one of the buttons to be highlighted after the reload.
Like the class .active in bootstrap, when you first reload the page, the <li> is already highlighted without clicking it, thats what I want for the first button which is "A01-FAF-1". But the class active doesn't work.
How to do it?
Here is a very simple example:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript">
</script>
<script type="text/javascript">
function showHer(){
$("#TestDiv").html("Something");
}
</script>
</head>
<body>
<div id="TestDiv" style="width:100px;height:100px;border:1px solid black">
Changeable stuff here.
</div>
<div onclick="showHer()" style="background:silver;border:1px solid black;cursor:pointer;display:inline;">
click me
</div>
</body>
</html>
You can see, in one line, I was able to change the content of a DIV elsewhere on the page.
Also note that there are no buttons. You can do this with a button, image, link, pretty much anything.
One other thing to note is that since you're using jquery to replace content in one small area of the page, the entire page doesn't need to update (faster) and hitting BACK doesn't just go back to the previous image, it would go back to the previous page.
This seems a bit like a simplistic question but it keeps bothering me and I can't solve it. I am currently trying to make a div be replaced by iframe on click of a button. Despite the simplistic nature of this issue and me already having the right answer, I cannot manage to run it for some reason.
Firstly it was giving me:
$ not defined
Which I know it's an issue regarding the jQuery library not being correctly inserted in the html file. Afterwards I reshuffled my libraries and it still doesn't execute properly.
I've ready most of the previous topics where jQuery is not working with all the possible solutions suggested. I am quite aware of the two previous questions one with 33 and the other with 26 answers.
I've even tried downloading jQuery to a file and utilizing it localy but it still doesn't run. Can you help me figure out how to fix this.
jQuery code:
$('.playbutton,img').click(function(){
var video = '<div class="video-container"><iframe src="'+ $('img').attr('data-video') +'"></iframe></div>';
$('.video').hide();
$('.tube').html(video);
$('.close').show();
});
$('.close').click(function(){
$('.video').show();
$('.tube').empty();
$('.close').hide();
});
HTML code:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src ="img/beme.png" class ="logo">
<a class="navbar-brand" href="#">Navbar</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<input type="password" placeholder="Password" class="form-control">
</div>
<button type="submit" class="btn btn-success">Sign in</button>
<button type="submit" class="btn btn-success">Register</button>
</form>
</div><!--/.navbar-collapse -->
</div>
</nav>
<div class ="banner">
<div class ="row" id ="mid-row">
<img src ="img/background.png" id ="big-image">
<img src ="img/play-button.png" id ="play">
</div>
<div class="video">
<div class="playbutton">Play</div>
<img src="http://cdn0.sbnation.com/uploads/chorus_image/image/5372321/battlefield3-screen-12.0_cinema_640.0.jpeg" data-video="http://www.youtube-nocookie.com/embed/U8HVQXkeU8U?&autoplay=1&rel=0&fs=0&showinfo=0&autohide=3&modestbranding=1">
</div>
<div class="tube"></div>
<div class="close">Close X</div>
</div>
How my libraries are inserted:
<script src="scripts/jquery-3.1.0.js"></script>
<!-- Angular and Bootstrap files -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Angular and Bootstrap Files -->
<!-- Personal CSS file -->
<link rel ="stylesheet" href ="css/style.css">
<!-- Personal CSs file -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
I am basically trying to recreate this JSFiddle but with no luck:http://jsfiddle.net/ANRHT/6/
$('.playbutton,img').click(function(){
var video = '<div class="video-container"><iframe src="'+ $('img').attr('data-video') +'"></iframe></div>';
$('.video').hide();
$('.tube').html(video);
$('.close').show();
});
$('.close').click(function(){
$('.video').show();
$('.tube').empty();
$('.close').hide();
});
#import url(http://getbootstrap.com/dist/css/bootstrap.min.css);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src ="img/beme.png" class ="logo">
<a class="navbar-brand" href="#">Navbar</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<input type="password" placeholder="Password" class="form-control">
</div>
<button type="submit" class="btn btn-success">Sign in</button>
<button type="submit" class="btn btn-success">Register</button>
</form>
</div><!--/.navbar-collapse -->
</div>
</nav>
<div class ="banner">
<div class ="row" id ="mid-row">
<img src ="img/background.png" id ="big-image">
<img src ="img/play-button.png" id ="play">
</div>
<div class="video">
<div class="playbutton">Play</div>
<img src="http://cdn0.sbnation.com/uploads/chorus_image/image/5372321/battlefield3-screen-12.0_cinema_640.0.jpeg" data-video="http://www.youtube-nocookie.com/embed/U8HVQXkeU8U?&autoplay=1&rel=0&fs=0&showinfo=0&autohide=3&modestbranding=1">
</div>
<div class="tube"></div>
<div class="close">Close X</div>
</div>
I am loading html using javascript call, this html has Bootstrap Collapse.
<li class="dd-item" data-id="home">
<div id="panel1" class="panel panel-default panel-collapsed">
<div class="panel-heading">
<div class="panel-actions">
<a role="button" data-collapse="#panel1" class="btn btn-sm btn-icon">
<i class="icon ion-chevron-down"></i>
</a>
</div>
<h3 class="panel-title">Home</h3>
</div>
<div class="panel-body" style="display: none;">
<p>some text</p>
</div>
</div>
</li>
data-toggle="collapse" and data-target="#id" are what you need to be able your bootstrap will work, data-toggle="collapse" will tell bootstrap for a collapse function while data-target="#text" point to the id of html tag
that will perform toggle collapse.
In you code, replace this line,
<a role="button" data-collapse="#panel1" class="btn btn-sm btn-icon">
with
<a role="button" data-collapse="#panel1" class="btn btn-sm btn-icon" data-toggle="collapse" data-target="#text">
where #text is the div ID. In your
<div class="panel-body" style="display: none;">
remove this inline css style style="display: none;" and put an id attribute id="#text" for example. Look like this,
<div id="text" class="collapse panel-body">
And there you go.