I have a link that opens a modal window.
I would like to open the modal window and scroll to a specific DIV inside it.
HTML:
read more
read more
read more
<div class="portfolio-modal modal fade" id="teamMembers" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="container" data-id="teamMemebrScroll1">....</div>
<div class="container" data-id="teamMemebrScroll2">....</div>
<div class="container" data-id="teamMemebrScroll3">....</div>
</div>
JS:
// scroll to team member 2
jQuery(document).ready(function ($) {
$(".teamMemebrScroll2").click(function (event) {
event.preventDefault();
$('html,body').animate({ scrollTop: $(this.hash).offset().top }, 1000);
});
});
The modal opened correctly, but it always scrolling to the top.
In your approach, you are targeting the $('html,body') but you want to scroll to content inside modal when modal open so it should be $('modalselector')
You are trying to create multiple click events which you don't need and can achieve the same result by using BS modal event function by adding addtional data attributes in modal trigger button.
Made some changes in Modal trigger button, added data attribute data-id and no need the click event as you are trying.
read more
read more
read more
and BS modal event function
$('#teamMembers').on('shown.bs.modal', function (e) {
//alert('modal shown');
var id = $(e.relatedTarget).data('id'); // <--fetch modal button data-id when modal shown
});
As you already added data attributes data-id to elements inside modal
<div class="container" data-id="teamMemebrScroll1">....</div>
<div class="container" data-id="teamMemebrScroll2">....</div>
<div class="container" data-id="teamMemebrScroll3">....</div>
So just need to match the modal button data-id with element data-id inside the modal and scroll to it when modal open
$(document).ready(function () {
$('#teamMembers').on('shown.bs.modal', function (e) {
var id = $(e.relatedTarget).data('id'); // Modal button data-id
var team = $('.container[data-id="' + id + '"]'); // Element data-id with match the Modal button data-id
$(this).animate({ // Modal
scrollTop: team.offset().top // Scroll to the element
}, 1000);
});
});
Fiddle Working Example
If you want to have more control over scrolling using same above approach, way back I found a very small script and it does a little better job. Check the following
Fiddle with Scroll Top plugin
Try to when you open the window, the first thing you do is going to a link.
This link goes to the specific div "teamMembers"
<a href="#TeamMembers" ... />
Use Php on your window like this:
<?php
header('Location: #TeamMembers');
?>
Related
I am building a simple front end site and I'm using Bootstrap for styling.
I have built a section using modals. The user clicks on a button to open the modal and then sees a centred modal.
What I would Like
I want to be able to allow the user to click a button at the bottom of the modal and be redirected to another part of the page and the modal close.
I have successfully been able to move the user to the new part of the page by using <a> tags, href and id's and also by using onclick="window.location.href='#middle'", and have also been able to dismiss the modal.
THE PROBLEM is when the user clicks the button on the modal, they are redirected to where I want them to go to and the modal closes BUT then instantaneously the window moves back to the original place where the modal button was pressed.
I want to stop the moving back to the place where the original modal was clicked and leave the user at the place they got to when they clicked the button.
I have tried using <a> tags instead of <button> and it has the same effect.
Here is a working example jsfiddle showing the problem.
https://jsfiddle.net/peamanschesthair/kdu5gno1/42/
Any ideas are greatly appreciated.
Use setTimeout to delay the location change, after the modal hide event. To determine the element that triggered the dismiss, check the document.activeElement...
$('#exampleModalCenter').on('hide.bs.modal', function (e) {
var closeTrigger = document.activeElement.id
if (closeTrigger === 'btnMove') {
setTimeout(()=>{
window.location.hash = '#middle'
},400)
}
})
Demo: https://codeply.com/p/WW9aB8OeNx
Alternate option: Set a data flag in the modal hide event if the btnMove has been clicked, then chain the hidden event and check the data flag...
$('#exampleModalCenter').on('hide.bs.modal', function (e) {
var closeTrigger = document.activeElement.id
if (closeTrigger === 'btnMove') {
this.data = 'move'
}
}).on('hidden.bs.modal', function (e) {
if (this.data === 'move') {
setTimeout(()=>{
window.location.hash = '#middle'
},400)
}
})
The resize event I created to show my slick sliders' images in my modal is only firing once on the initial width. If I close the modal, manually move the width of the window, and open the modal again, the images aren't resized. Therefore, they don't appear.
HTML:
<section>
<button id='show' onClick='showDialog()'><img src="img./(This is where I put the name of my image).jpg"style="width:100%;max-width: 400px"></button>
<div id='dialog'>
<span>
<div id="mySlickSlider">
<div class="mySlide">
(This is where I included the images in my slick slider)
</div>
</div>
</span>
<button id='close' onClick='closeDialog()'>×</button>
</div>
</section>
JS:
$('#show').on('click', function(e){
$('#mySlickSlider').resize();
});
Since the resize function was not working, I used a timeout function for the different classes that comprised my slick slider and set it to 0 so there was no lag.
$(window).on('click', function () {
setTimeout(function() {
$('.mySlideNav').slick("getSlick").refresh();
$('.mySlide').slick("getSlick").refresh();
},0);
});
http://jsfiddle.net/U6aKT/
go to id
<div style="margin-top:2000px;"></div>
<a id="id">id</a>
Based on the above example, is it possible for <div id="id"></div> to pop up without the page scrolling to where <div id="id"></div> is?
According to your question and comment under diffrent answer you want to scroll down to #id div or pop up the #id div when the link is clicked. If want to scroll then you have to use jquery animate function with scrollTop function; use the first way. And if you want pop up then use the second way.
First way:
Here is the JsFiddel with scroll animate
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
go to id
<div style="margin-top:2000px;">TEST</div>
<a id="id">id</a>
<script type="text/javascript">$(document) .ready(function() {
$('[href="#id"]').click(function() {
$("html,body") .animate({scrollTop: $("#id").offset().top},1200, "easeOutBounce");
return false;
});
});</script>
Second Way:
Here is JsFiddle
You have to use bootstrap modal. You just need to initialize the the anchor tag data-target attribute value as data-target="#id". And have to load the bootstrap css as well as jquery and bootstrap js. After that make your div class="modal fade" id="id". And also add the modal content, header, footer. Enjoy!
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" >
go to id
<div class="modal fade" id="id" tabindex="-1" role="dialog" aria-labelledby="id" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
Header
</div>
<div class="modal-body">
Body
<div class="modal-footer">
Footer
</div>
</div>
</div>
</div>
</div>
<script src = "https://code.jquery.com/jquery.js"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" > </script>
Your best option is probably using javascript.
Assuming jQuery is already initialized:
$('[href="#id"]').click(function(e){ // bind clicking said link
e.preventDefault(); // alternatively: e.stopPropagation();
});
You could also unbind and bind your click everytime, like so:
$('[href="#id"]').unbind('click').bind('click', function(e){ // bind clicking said link
e.preventDefault(); // alternatively: e.stopPropagation();
// EDIT:
// I **strongly** recommend you use a class such as `fakeLink`
// or something since targeting every `href` is a pain in the...
// so your selector would then be $('.fakeLink')
});
However, by default, it will look for an anchor by the name of #id, like so:
<a name="id"></a>
Hope this helps
Since the href="#id" mechanism is all about scrolling, what I can recommend is to attach a JavaScript method to all <A> elements on page and play a bit with the DOM when onClick.
The goal its to have a menu activated by a button.
This menu can have any type of content inside, so it must adapt according to its content.
In this example i have an accordion, but could be just a grid, or a form, since i'm making it as a bootstrap/jquery widget.
The problem is that the menu changes size after opening and closing it several times.
How can i improve it to make it adaptable to content and consistent, regarding that it will accept different contents.
Code
http://jsfiddle.net/fpmsusm5/
Javascript:
var button = $('#button');
var dialog = $('#modal');
button.on('click', function () {
dialog.toggleClass('hide');
dialog.position({
my: "right top",
at: "right-2 bottom",
of: button
});
})
$("#openpanel1").on("click", function () {
var curr_panel = $("#panel1")
curr_panel.toggleClass('show hide');
curr_panel.collapse(curr_panel.hasClass('show') ? 'show' : 'hide');
});
...
/* ensure any open panels are closed before showing selected */
$('#accordion').on('show.bs.collapse', function () {
$('#accordion .in').collapse('hide');
});
HTML:
<div class="pull-right">
<a id="button" class="btn">Settings</a>
</div>
<div id="modal" class="modal hide" style="overflow- y:hidden;width:auto;height:auto;max-height:100%; max-width:100% ">
<div class="modal-body" style="overflow-y:hidden; width:auto; height:auto; max-height:100%; max-width:100%">
<div id="accordion">
<button id="openpanel1" type="button" class="btn" style="width:100%;text-align:left"><i
class="icon-search"></i>Page Information
</button>
<div id="panel1" class="collapse">
<div class="panel-body">
Contents panel 1
</div>
</div>
....
</div>
</div>
</div>
Thanks for your insights.
Every time you position the dialog, it's changing the left property, and that's causing it to resize.
You don't have to reposition it every time you show/hide it, you can just do it once:
var dialog = $('#modal');
dialog.position({
my: "right top",
at: "right-2 bottom",
of: button
});
button.on('click', function () {
dialog.toggleClass('hide');
});
Then it stays the same size. Updated fiddle: http://jsfiddle.net/fpmsusm5/1/
I've created an overlay that loads content dynamically after it opens, but am having issues with VoiceOver in Safari when trying to add ARIA attributes.
After only adding role='dialog' to the overlay container, it is announced as a dialog, but reads the text contents first ("close loading... dialog close button").
When adding a label to the dialog with either aria-label and aria-labelledby the real problem occurs. The overlay is announced nicely ("Overlay dialog close button"), but then the rest of the dialog's contents are inaccessible after being loaded, and it just appears that the close button is the last (and only) item available.
HTML:
<div id="page">
<a id="opendialog" href="#" role="button">Open</a>
</div>
JavaScript:
jQuery(function ($) {
$('#opendialog').click(function (event) {
event.preventDefault();
// Attach the dialog container to the page with a loading placeholder.
$dialog = $('<div id="dialog" role="dialog" aria-labelledby="dialog-label">' +
'<span id="dialog-label">Overlay</span>' +
'close' +
'<div class="content"><span class="loading">Loading...</span></div>' +
'</div>')
.insertAfter('#page');
$dialog.find('.close').focus();
// Hide the other page contents to trap the user in the dialog.
$('#page').hide();
$dialog.find('.close').click(function (event) {
event.preventDefault();
$dialog.remove();
$('#page').show();
$('#opendialog').focus();
});
// Simulate an asynchronous request for the dialog contents.
setTimeout(function () {
$dialog.find('.content .loading')
.replaceWith('<div>Dialog Content</div>');
}, 250);
});
});
http://codepen.io/gapple/pen/FGhzl
Chrome also seems to have some weird issues with the codepen when in an iframe, but loading the iframe url directly seems to work correctly.
VoiceOver is quite persnickety when it comes to dynamic content and focus. This (if run on a page of any size) will not work at all on iOS because the .focus() on dynamic content does not work unless executed in a timeout of at least 500 ms (look here http://unobfuscated.blogspot.com/2013/08/messed-up-ios-focus-management-with.html).
However, for OS X, you can fix your problem by focussing on the dialog itself rather than the close button. Here is the snippet of code modified so it works. Once the focus is on the dialog, hit CTRL-OPTION DOWN to interact with the dialog content
$dialog = $('<div id="dialog" role="dialog" aria-labelledby="dialog-label" tabindex="-1">' +
'<span id="dialog-label">Overlay</span>' +
'close' +
'<div class="content"><span class="loading">Loading...</span></div>' +
'</div>')
.insertAfter('#page')
.focus();