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);
});
Related
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');
?>
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 have a website made with foundation 4 and I have an accordion in the footer. It's just a link that when you click, it expands with further information. It works but I have to manually scroll to see the new content after it's displayed, and the user will not notice anything has happened after the click so I need the page to scroll automatically after he clicks so he can see the expanded content.
My Accordion is this (http://foundation.zurb.com/docs/v/4.3.2/components/section.html):
<div class="section-container accordion" data-section="accordion" data-options="one_up:false;">
<section>
<p class="title" data-section-title>CLICK TO SEE MORE</p>
<div class="content" data-section-content>
<p>The hidden content is here</p>
</div>
</section>
</div>
Using jquery will allow you to scroll the page on click, to allow the accordion container to be visible:
$(document).ready(function(){
$(".title").click(function(event){
event.preventDefault();
var sectionHeight = $('.section-container').height();
var target_offset = $(this).offset();
//this variable sets your target anchor place, adjust as needed
var target_top = target_offset.top-sectionHeight;
$('html, body').animate({scrollTop:target_top}, 1500);
});
});
how can i handle a self-reference in mootools?
After i made the next container visible, i would remove the clicked "remove" Button.
With Jquery i can do it throug the "this" operator.
window.addEvent('domready', function(){
$$('div.showButton').addEvent('click', function(){
// show next Container
$$('div.container').getNext().show('inline');
// remove this "showButton"
$(this).remove() // not working
});
});
<!-- container 1 -->
<div class="container">
<div class="showButton">Show next container</div>
<div class="hideButton">hide this container</div>
</div>
<!-- container 2 -->
<div class="container" style="display:none">
<div class="showButton">Show next container</div>
<div class="hideButton">hide this container</div>
</div>
You have to remember mootools is not jquery and they different in the implementation of stuff.
First the $$ function return array of elements and not element so you can't call show on an array - you have to take the element you want (usually it's the first).
Second - you can call the current element using $(this) but it's a bit unnecessary because you are already inside the element event so you just can use "this":
http://jsfiddle.net/kk4gz/2/
$$('div.showButton').addEvent('click', function(){
// show next Container
$$('div.container')[0].getNext().show('inline');
// remove this "showButton"
this.remove();
});
Here is a piece of code that shows an issue I'm having http://jsfiddle.net/XmqgA/
HTML:
<div id="dialogg" style="display:none">
<input type="text" id="textinp" />
</div>
<p>Draggable boxes. Click a clickable box to open a dialog</p>
<div class="draggable ui-sortable">
<div class="dragme" id="clickbox">Clickable box</div>
<div class="dragme">Box</div>
</div>
<br/>
<p>Simple button that opens up a dialog</p>
<button id="click">Click</button>
JS:
$('.draggable').sortable({
connectWith: ".draggable",
items: "> .dragme",
appendTo: "body"
});
$("#click").unbind().bind("click", function () {
$("#dialogg").dialog();
$("#textinp").focus();
});
$("#clickbox").unbind().bind("click", function () {
$("#dialogg").dialog();
$("#textinp").focus();
});
Basically I have a simple button, a draggable/sortable element and a ui-dialog window with a text input field.
Both button and a sort element have an on-click event that opens up a ui-dialog.
Everything works fine except for the fact that when you open a dialog by clicking on the sort element a cursor/caret inside an input box in the ui-dialog won't blink. However in both cases input field will have focus.
Seems like this can be only replicated in Chrome but I couldn't find it among Chrome-only bugs.
Thanks!