I am using the widget collapsed by default with class="panel-collapse collapse". When there are a number of items in the chat and it is opened scrolling starts at the top instead of at the bottom (which works fine if not collapsed by default). An example is at http://www.bestdealadvisors.com, add some items then refresh the page. When the widget is opened it starts at the top. How can I make this scroll from the bottom when opened?
You should listen on the event Bootstrap fires when something is collapsed. There is a bit of information here. Then scroll the chat window to the bottom.
This script has to be at the end of your page (after the bootstrap and jQuery script tags )
<script>
var panelBody = $("#chat-list")
$('#collapseOne').on('shown.bs.collapse', function () {
panelBody.stop().animate({scrollTop:panelBody.prop("scrollHeight")}, '100', 'swing')
})
</script>
Related
I have a JS conflict occurring and cannot figure it out.
My site is a one page layout that uses smooth scroll to move from section to section.
There are 4 scripts in particular that I believe are conflicting.
The problem is once I click an image to open it, the page bounces right back to the top instead of staying where it is. After closing the image popup, I have to scroll back down every time. You will also notice that after closing the popup image, clicking any nav button at the top forces a scroll from the top down and not from the current position (as shown earlier in the video).
This problem is even worse in Safari (Firefox does not do this part) as the active nav items do not display (green highlight) after closing a popup image.
Please have a look at a video screen grab I posted of the issue I am having.
http://whataprettyface.ca/video2.html
I have the Filterizr / Magnific Popup / Portfolio working perfectly on my mobile site. But the mobile site does not include the smooth scroll feature.
As mentioned above, I am using:
1) Magnific Popup v1.1.0 (Pops open images in forefront)
http://whataprettyface.ca/desktop/js/jquery.magnific-popup.js
2) J.Query Filterizr (arranges selected photo gallery)
http://whataprettyface.ca/desktop/js/jquery.filterizr.js
3) My 'Scripts' main JS (contain smooth scroll code)
http://whataprettyface.ca/desktop/js/scripts.js
4) And a 'portfolio" script:
$(function(){
'use strict';
// portfolio filter container
$('.filtr-container').filterizr('filter', '1');
// portfolio filter
$('.simplefilter li').click(function() {
$('.simplefilter li').removeClass('active');
$(this).addClass('active');
});
// portfolio image-popup
$(".image-popup").magnificPopup({
type: "image",
removalDelay: 300,
mainClass: "mfp-fade"
});
});
I have read about no.Conflict but am not sure how to properly implement it here or if it will even work.
I feel like the answer is before my eyes but I am a novice.
Any help is greatly appreciated!
To my dismay, the issue was not in my scripts at all. It was as simple as changing a few lines in my CSS.
By moving the 'hidden overflow' from the html/body and adding in to the portfolio container, the issue was resolved.
#work .container{
overflow: hidden;
}
I have a series of divs, that serve as a demo page. Initially I have only the first div showing, with the other 2 hidden using jQuery hide() on page load.
There is a button on each div which triggers a jQuery event of hiding the current div and showing the next div in the sequence.
I would like on the very last div (div 3), once displayed to also show the previous 2 divs, but to have div 3 still display. Meaning, the user can scroll up to see the other two divs, but without scrolling they will still be viewing div 3.
$(document).ready(function () {
$(".page-2").hide();
$(".page-3").hide();
$(".overlay").show();
$(".overlay-button").click(function () {
$(".overlay").hide();
$(".page-1").fadeOut(1000);
$(".page-2").show("slow");
});
$(".arrow-down").click(function () {
$(".page-2").fadeOut(1000);
$(".page-3").show();
$(".page-2").show();
$(".page-1").show();
});
});
This code brings the view back up to the first div (".page-1").
The problem is that when you have all of them open the height of the page changes and the scrollbar gets left behind, to fix this you can force the scrollbar to scroll to the bottom of the page with the following snippet:
$('html, body').scrollTop($(document).height());
I have an accordion-style menu that runs along the left side of my page. This is the script that I have written for each separate accordion button (they're stacked on each other):
$("a.about-us").on('click', function(eve) {
eve.preventDefault();
$(this).toggleClass("down");
$("ul.about-us").toggle()
});
I would like to have my page automatically scroll down to show a newly opened accordion if that open accordion extends beyond the bottom of the viewport.
This is what my HTML looks like for one of the buttons:
HTML for About Button
on the accordion parent add the css:
height:auto;
If you need further help please provide the HTML structure.
I have a chat system on my site and defaulted the message div position to always display the last message on page load. I accomplished this by using the following line of code:
msgDiv = document.getElementById('message_row_large');
msgDiv.scrollTop = msgDiv.scrollHeight;
However, this code sets the scroll position to be equal to the div height at all times, which doesn't allow users to scroll up and see other messages.
I need to re-enable scroll to its default functionality after the page loads. ANy help is welcome.
Thank you!
P.S. I am using ajax to load chat messages. When user clicks on a name on the left hand panel, the chat between him/her and the other person loads on the right hand panel.
Try
$display = $('#message_row_large');
$display.animate({scrollTop: $display[0].scrollHeight }, 'fast');
Working Fiddle:
https://jsfiddle.net/cshanno/3bo48dxj/1/
I am trying to integrate Royal Slider within my website. However I am having trouble with the first slide when the slider is within tabs on my page.
For example, you can see at http://christierichards.co.uk/slidertest/newtemplatefix.php that the slider is working perfectly (there is no styling as of yet).
On this page http://christierichards.co.uk/slidertest/newtemplate.php when you click on before and after (this is the tab I want the slider appearing in) the first slide does not show until you click tab 2 and then the height seems to appear.
I have managed to fix it within the tabs but this is only by adding a fixed height onto .rsOverflow. I cannot use a fixed height as I need the auto-height feature to work for clients to add their own photos. So I need a different way around it.
There must be a piece of conflicting code somewhere however I am stumped! Any help would be appreciated.
Thanks
The slider is being initialised while it is hidden behind a tab. Because of this, it cannot calculate its height and width, and is invisible. When you change to the next item in the slider, the heights and widths are recalculated, which is why you can see it again.
You can either add an initial height to .rsOverflow, or (re)initialise the slider when the tab is clicked, and the contents are made visible.
For example:
var sliderInitialised = false;
$j( "#tabs" ).tabs({
activate: function( event, ui ) {
// Check the activated tab, is the one that contains the slider
if(!sliderInitialised) {
// Initialise slider ...
sliderInitialised = true;
}
}
});
Alternatively, the slider could be initialised before all the tab contents are hidden.