Develop Reference

Using stellar.js for Parallax images

I'm not having any luck using stellar.js. Below, I've included in HTML the div that I'm trying to have scroll at a separate speed than the rest of my webpage to give it the Parallax effect. After the HTML is also the CSS and the JavaScript and jQuery involved in the stellar.js.
<div data-stellar-background-ratio="0.5" id="faq1">
<div class="container-fluid anchor" id="faq">
<div class="row">
<h1>FAQ</h1>
<h2 class="learn-more">Learn More</h2>
<div class="modal-button">
<!-- Large modal button -->
<button class="btn btn-primary" data-target=".bd-example-modal-lg" data-toggle="modal" type="button">Resume/CV</button> <!-- Large modal -->
<div aria-hidden="true" aria-labelledby="myLargeModalLabel" class="modal fade bd-example-modal-lg" data-keyboard="false" role="dialog" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button aria-label="Close" class="close" data-dismiss="modal" type="button"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Resume</h4>
</div>
<div class="modal-body">
<embed id="resume" src="pdf/resume.pdf">
</div>
</div>
</div>
</div>
</div>
</div>
Next is the CSS for the code involved.
#faq1 {
background-image: url("../img/question.jpg");
background-attachment: fixed;
color: black;
height: auto;
width: 100%;};
Finally, the JavaScript file that's linked to the page contains all of my other JavaScript involved with the whole page, but includes:
$.stellar();
I've been using the code in jquery.stellar.min.js on the https://github.com/markdalgleish/stellar.js.
I've been reading the directions and using all sorts of configurations to get the code to work but it just isn't working. If somebody could help me with this or let me know if I'm doing it completely wrong, I would appreciate it.

Issues while starting modal

I have a bootstrap modal working well by a button click. But if I show the modal at the end of the , console says:
$(...).modal is not a function
My scripts in real sequence:
'js/jquery.min.js'
'js/jquery.easing.1.3.js',
'js/bootstrap.min.js',
'js/jplayer/jquery.jplayer.min.js',
'js/jquery.nicescroll.min.js',
'js/jquery.nicescroll.plus.js'
My Html:
<!-- Modal -->
<div class="modal fade" id="divConteudoModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header" style="height:40px; border:none;">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<iframe name="janelaModal" id="janelaModal" style="width: 100%; border: none; min-height: 350px;"></iframe>
</div>
</div>
</div>
</div>
Trigger:
$(document).ready(function(){
$('#divConteudoModal').modal('show');
});
If I run $('#divConteudoModal').modal('show'); directly at console it works, if I put before /body, as I mentioned above, I get $(...).modal is not a function.
Can you guys see anything that can causing that?

how can I load a div into bootstrap modal

I know this is the basic question, but I'm not able to solve this. Please do help me.
I'm trying to load the content of div on a click of a hyperlink into the bootstrap modal. How can I able to do this?
Below is my code :
<a id="myModalId" href="#">myLink1</a>
<a id="myModalId" href="#">myLink2</a>
my modal structure:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false" >
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
</div>
<div class="modal-body">
<!-- I would like my div content here -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
and here's my div structure:
<div>
<div id="d1" style="display:none">
div1 content
</div>
<div id="d2" style="display:none">
div 2 content
</div>
and modal calling function:
$(document).ready(function(){
$('#myModalId').click(function(){
$('#myModal').modal('show');
});
});
.
There are few such links and for each link I wold like to load a separate div using only single modal.
Can we do this ?

U can use this function to load content in order by the clicked button link:
Buttons:
myLink1
myLink2
Modal:
<div class="modal fade" id="myModalId" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false" >
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
</div>
<div class="modal-body">
<div id="d1" class="display-none">
div1 content
</div>
<div id="d2" class="display-none">
div 2 content
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Jquery:
$('#myModalId').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget), // here is the button clicked
content = button.data('content'), // here you can get information of the button
modal = $(this); // Here is the modal
modal.find('#'+content).slideDown('fast');
});
CSS:
.display-none{
display: none;
}
You can review this method in the boostrap documentation here: http://getbootstrap.com/javascript/#modals-related-target
Regards!

How to increase the width of a modal-body of twitter bootstrap modal popup

I have a twitter bootstrap modal popup
<div class="modal fade" id="Div1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog custom-class">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="H2">Log</h4>
</div>
<div class="modal-body">
<asp:GridView id ="GridView1" runat="server" AutoGenerateColumns="false"
CssClass="table table-hover table-striped"
DataKeyNames="FieldID"
Font-Name="Verdana" GridLines="Both"
Font-Size="10pt" CellPadding="4">
<Columns>
Few Columns
</Columns>
</asp:GridView>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
And my CSS is
#media screen and (min-width: 768px) {
.custom-class {
width: 70%; /* either % (e.g. 60%) or px (400px) */
}
}
But my CSS changes are not reflecting on the pop-up
The grid columns are coming out of the body, I mean the body is not increasing with the width of the grid.How can I make the width of the body more responsive with
grid

Add "modal-wide" to the main modal div, and adjust the width in the CSS. In this example, I'm using 90%.
Since I'm using jQuery to set the max-height of the content area based on the browser dimensions, the modal will be only as tall as necessary, and will provide a scrollbar if needed.
<a data-toggle="modal" href="#normalModal" class="btn btn-default">Normal</a>
<a data-toggle="modal" href="#tallModal" class="btn btn-primary">Wide, Tall Content</a>
<a data-toggle="modal" href="#shortModal" class="btn btn-primary">Wide, Short Content</a>
<div id="normalModal" class="modal fade"></div>
<div id="tallModal" class="modal modal-wide fade"></div>
<div id="shortModal" class="modal modal-wide fade"></div>
jsFiddle
I hope this will work for you.

Change height of large Bootstrap modal

I have a large bootstrap modal that I am using from the documentation website:
http://getbootstrap.com/javascript/#modals-sizes
After adjusting it to my needs, this is what I have:
<div class="modal fade bs-example-modal-lg" id="editPackageModal" tabindex="-1" role="dialog" aria-labelledby="editPackages" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Edit Package</h4>
</div>
<div class="modal-body">
<div>
<label class="control-label">Package Name: </label>
<input type="text" class="form-control" id="package-name" placeholder="Name">
</div>
<!-- Other fields here-->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="savePackageChangesBtn" >Save changes</button>
</div>
</div>
</div>
</div>
Now the problem is that I want the Modal's height to be bigger than it is now because when the user starts typing content, the modal "grows" and that is quite ugly. Instead, I prefer to have a big modal, with a fixed size and use scrolling if needed inside the modal.
To achieve this I added <div class="modal-dialog modal-lg" style="height:80%;">, but it did nothing.
If however, I use <div class="modal-dialog modal-lg" style="height:600px;"> I end up with a retarded modal:
So now I am out of options and out of ideas. How can I achieve the following objectives?
Have a Modal that has X% of the screen's height (like 80%)
Have a Modal with that fixed size, and make the content scrollabe if necessary

CSS
#editPackageModal .modal-body{
max-height: 50vh;
overflow-y: auto;
}
Chanhe max-height to your needs

Try giving max-height and make the dive scroll y
max-height:80%;
overflow-y:scroll;
I hope it works.