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.
Related
So my goal is to have a modal that acts as a timer that will follow as the user scrolls a second modal that acts as a test.
** <div class="modal-window" id="testTimer" role='dialog' data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" id = 'timerCountdown'>
<h4 class="modal-title text-center">Time Remaining</h4><br>
<h4 class="modal-title text-center">90:00</h4>
</div>
<div class='modal-footer text-right'>
<button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal-window" id="quizModal" tabindex="-1" role="dialog"data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-lg" style="position: relative; display: table; overflow-y: auto; overflow-x: auto; width: auto; min-width: 700px; max-width: 1080px">
<div class="modal-content">
<div class="modal-title text-center"><h2 id='quizModalTitle'></h2></div>
<div class="modal-body" id='quizModalContent' max-height='calc(100vh - 210px)' overflow-y ='auto'></div>
<div class='modal-footer text-right'>
<button type="button" id = 'testClose' class="btn btn-white" data-dismiss="modal" onclick="fetchQuizProgress()">Close</button>
</div>
</div>
</div>
</div>**
This is what I have for the two modals and it looks like this
In my JavaScript I used .scrollIntoView() on the first modal but it doesn't seem to affect it at all. The issue is that the second modal isn't scrollable and both are locked in place. Is it feasible to get this working like I want?
I have a timeout to hide the 'testTimer' once it reaches a certain time. Once it closes the 'quizModal' becomes scrollable.
So having two modals function at once is really messy. Instead, I thought to make the title the timer and have only the body of the modal (the test) scrollable.
<div class="modal inmodal fade" id="quizModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="false" data-keyboard="false">
<div class="modal-dialog" style="overflow-y: scroll; width: 1200px;max-height:100%; max-width: 100%; margin-bottom: 25px" >
<div class="modal-content">
<div class="modal-header text-center"><h2 class = "modal-title" id='quizModalTitle'></h2></div>
<div class="modal-body " style = 'height: 400px;overflow-y: auto;' id='quizModalContent'></div>
<div class='modal-footer text-right'>
<button type="button" id = 'testClose' class="btn btn-white" data-dismiss="modal" onclick="fetchQuizProgress()">Close</button>
</div>
</div>
</div>
</div>
Worked like a charm. Thanks to: https://www.codeply.com/go/bp/T0yF2ZNTUd
And Carlos Calla on Stack Overflow.
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?
The demo with the image loading when clicked on Modal button is here: http://www.bootply.com/7kS6Ube98u
I need to place the iframe instead of the image, but have no idea what code to change, so it loads the same way (i.e. when clicked on the Open Modal button)
Any help is appreciated.
You can simply change the html to use an iframe (without a src attribute), then change the references in the js to iframe to make it clearer. You can see it here
Below is an example of using vanilla JS with Bootstrap 5:
JS:
var modal = document.getElementById('modalId')
modal.addEventListener('show.bs.modal', function (event) {
var iframe = modal.querySelector('iframe');
iframe.src = iframe.getAttribute('data-src');
})
HTML:
<div class="modal modal-blur fade" id="modalId" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">
Heading
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body p-0">
<iframe data-src="http://www.stackoverflow.com" class="w-100"></iframe>
</div>
<div class="modal-footer">
<button type="button" class="btn me-auto" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
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.
I have a spread-sheet like overview with hundreds of cells in there and each cell is a link that opens a modal with form to adjust the contents of the cell (and some additional data, so inline edit is not preferable).
I'm not very familiar with JS but what the page (html with php db) currently does, is creating hundreds of JS Scripts (for each cell 1) but I don't believe thats the correct way, it most definitely is not improving the performance of the page.
What I need, is that each link call on teh same modal, but with different content to show. But how can I pass on some variables or something?(eg. some GET variables or so).
I now create a unique ID for each cell to call on the modal with the pre-filled content (so there are hundreds of forms in this page), but better would be a single modal that receives information I can use to communicate with the DB and fetch the content the moment the modal is opened.
0,00
<div id="42aa04334a02670b6cf0fbe7b4be3e37" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">xx modal content that is created related to the cell</div>
ps. I used bootstrap 2, including jQuery etc. but I don't think that matters for my question
Much thanks in advance!
Yes, you can use single modal. Just apply class, use data-target=".className" to call modal, use data-* to pass formula.
$(document).ready(function() {
$(".cell").click(function() {
$(".modal .modal-body").html("<input type='text' value='" + $(this).data('formula') + "'/>");
});
});
.cell {
border: 1px solid #ddd;
float: left;
padding: 3px 5px;
cursor: pointer;
}
<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">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div class="cell" data-formula="x-y/z" role="button" data-toggle="modal" data-target=".modal">1</div>
<div class="cell" data-formula="x-a/z" role="button" data-toggle="modal" data-target=".modal">2</div>
<div class="cell" data-formula="x*b*cz" role="button" data-toggle="modal" data-target=".modal">3</div>
<div class="cell" data-formula="c*d/0.5" role="button" data-toggle="modal" data-target=".modal">4</div>
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<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>
<h4 class="modal-title" id="myModalLabel">Edit cell formula</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>