I am using ember view, once the page loads i want to scroll down to the page.In view didInsertElement will call and make the page load to scroll down, here is my code
App.MessagesView = Ember.View.extend({
didInsertElement: function() {
this._super();
var $target = $('.chat-area .chat-list')
, height = 0;
if ($target) {
$target.each(function(i, items_list) {
$(items_list).find('li').each(function() {
console.log($(this).height());
height = height + parseInt($(this).height());
});
});
$target.animate({ scrollTop: height});
}
}
But once in controller if new other messages are loaded, because the view is already loaded ,the scroll bar is not scrolling down to the page.for the other message. the new messages are updated to the computed property and i want to call after the DOM messages are updated and call scrolldown code.
App.MessagesController = Ember.ArrayController.extend({
newmsgsCaptured: function(uuid) {
this.setProperties({
'newSelectedMessages': response,
});
var $target = $('.chat-area .chat-list')
, height = 0;
if ($target) {
$target.each(function(i, items_list) {
$(items_list).find('li').each(function() {
console.log($(this).height());
height = height + parseInt($(this).height());
});
});
console.log(height);
$target.animate({ scrollBottom: height});
}
}
});
after calling newmsgsCaptured 'acction', the property is updated with new data and the scrolled down is not working.
You will need to set up an observer on wherever the messages are stored:
messagesUpdated: function() {
//scroll action here
}.observes('messagesArray'),
This will fire the function whenever the 'messagesArray' changes
Actually i have done it view as follows
didInsertElement: function() {
Ember.run.schedule("afterRender", this, function() {
if (this.get('controller.isScrollDown')) {
this.send("scrollDown");
}
});
}.observes('controller.vehicleSelectedMessages'),
Related
I have a jQuery scrollTop function that is activated on a button click, i also have a scrollView function that is activated on scroll.
The intention is that the landing image is either clicked or the user scrolls down, the landing image is hidden by the jQuery and the navigation menu shows.
This is working well in Chrome, but in FF and Safari, the page jumps further down the page and you have to scroll back up to see the top of the page.
Also, using the Divi WP theme.
Any help would be most appreciated!
Code below is what i have used, apologies new to Jquery so have put things together from different places, i'm sure this can be made simpler!
//click-scroll-hide
(function($) {
$(document).ready(function() {
$(".cf_news_link").click(function() {
$("html,body").animate({
scrollTop: $("#news").offset().top
}, 1000, function() {
$("#cf_my-header").hide();
$("#main-header").slideDown("slow");
});
return false;
});
});
})(jQuery);
//scroll-hide
jQuery(function($) {
$.fn.scrollView = function() {
return this.each(function() {
$('html,body').animate({
scrollTop: $(this).offset().top
});
});
}
var $header = $('#cf_my-header');
var $win = $(window);
var winH = $win.height();
$win.on("scroll", function() {
if ($(this).scrollTop() > winH) {
$header.addClass("hide");
$('#news').scrollTop();
$('#main-header').slideDown("slow");
}
}).on("resize", function() {
winH = $(this).height();
});
});
I've got a button, that when I click executes a js code. Like this.
jQuery( ".button" ).on('click', function(){
var page = jQuery(this).attr('data-href');//Get data-href with permalink.
jQuery('#ajax_div').load(page,
function(){
var newHeight = jQuery('#content_loaded').height()+200;
var el = jQuery('#div_containing_ajax_div_and_content_loaded');
el.css({'height': newHeight + 'px'});
});
});
The first time it loads the page works wrong, but after have the images, etc, in cache it works ok. How can I wait that the content is fully rendered to execute the height calc?
All of this without use delay functions and with out use a plugin. There is a function like $(windows).ready().
I'm using wordpress, and with jquery load() it gets the height before the image is fully render and the height is less than the real height of the content in the div.
Thanks.
You could check that all images added are loaded using following snippet:
jQuery(".button").on('click', function () {
var page = jQuery(this).attr('data-href'); //Get data-href with permalink.
jQuery('#ajax_div').load(page, function () {
var $self = $(this),
$contentImages = $(this).find('img');
$contentImages.one('load', function () {
$(this).addClass('loaded');
if ($self.find('img.loaded').length === $contentImages.length) {
var newHeight = jQuery('#content_loaded').height() + 200;
var el = jQuery('#div_containing_ajax_div_and_content_loaded');
el.css({
'height': newHeight + 'px'
});
}
}).each(function () {
if (this.complete) $(this).triggerHandler('load');
});
});
});
maybe I should say that you have 2 ways to do that .. one I'm not tested it and another I tested it
1st: untested way .promise().done();
jQuery('#ajax_div').load(page).promise().done(function(){
// var newHeight ......
});
2nd: tested way in .load callback function loop through images and check if loaded or not using Image.error(function() {});
$('img').each(function(){
var Image = $(this);
var GetSrc = $(this).attr('src');
Image.error(function() {
// newHeight ......
});
});
DEMO
I'm currently experiencing some conflict between a hashchange function I have set up and jQuery mobile (used for sliding page transitions).
To demonstrate here's an isolated demo on my server: http://nealfletcher.co.uk/transition/
Click on transition click which slides the relevant page in, as it should and appends the url accordingly: /transition/news.
This is where the problem lies, click on news hash click and this will fire my hashchange function and load in the relevant div, BUT instead of the url being like so: /transition/news/#news-01 the url is being rendered like so /transition/#news-01 which causes problems when navigating to the url.
Is there anyway to force the /news/ to be added before the hash, so I get /transition/news/#news-01 instead of /transition/#news-01?
The relevant jQuery is below, is it at all possible to append /news/ before the hash?
Any suggestions would be greatly appreciated!
jQuery:
$(document).ready(function () {
$(window).hashchange(function () {
var hash = location.hash;
if (hash) {
var element = $('.click-block[data-hook="' + hash.substring(1) + '"]');
if (element) showDetail(element);
}
});
$(document).ready(function () {
$(document).hashchange();
var $container = $('#main-grid, #news-grid');
$(function () {
$container.imagesLoaded(function () {
$container.isotope({
itemSelector: '.grid-block, .grid-break, .hidden',
animationEngine: 'best-available',
filter: '*:not(.hidden), .grid-block',
masonry: {
columnWidth: 8,
gutterWidth: 25
}
});
});
});
$(".click-block").click(function () {
document.location.hash = $(this).attr('data-hook');
});
});
function showDetail(element) {
var newHeight = $('#post-' + element.attr('data-hook')).height();
$('#post-' + element.attr('data-hook')).removeClass('hidden').addClass('grid-break').delay(300).fadeIn('slow');
newHeight = (Math.floor((newHeight + 10) / 230) + 1) * 230 - 10;
$('#post-' + element.attr('data-hook')).css('height', newHeight);
element.children('.up-arrow').fadeIn('slow');
setTimeout(function () {
$('html, body').animate({
scrollTop: $('#post-' + element.attr('data-hook')).offset().top - 90
}, "slow");
}, 1500);
$('#main-grid').isotope();
$('#news-grid').isotope();
}
Just add the section in your data-hook attribute. So for your news links they will be prefixed by news/ like so data-hook="news/news-01"
Now, I would reccomend you to consider using something like http://backbonejs.org/#Router for what you'r doing. Or atleast take a look at https://github.com/browserstate/history.js/
whats wrong with this code? im trying to change the height of each section to the height of window.
function setsize()
{
var w=$(window).width();
var h=$(window).height();
var sections = new Array("home","about","skills");
for (var i=0;i<3;i++)
{
var element = document.getElementById(sections[i]);
$(element).height(h);
}
}
$(window).ready(function() {
setsize();
});
$(window).resize(function() {
setsize();
});
here is sample of the markup:
<section id="#home">
<h1>..................</h1>
</header>
Seems like a strange way to do that ?
$(window).on('resize load', function() {
$('#home, #about, #skills').height( $(this).height() );
});
You have to update the variables when the window changes size, i.e. inside the resize function
EDIT:
You'll also need a DOM ready handler, and window.onload isn't always triggered when doing it that way, so just do the same thing on DOM ready, like so :
$(function() {
$('#home, #about, #skills').height( $(window).height() );
$(window).on('resize', function() {
$('#home, #about, #skills').height( $(this).height() );
});
});
FIDDLE
So I'm using the History.js plugin to load pages in my Wordpress theme via AJAX. I've been successful in doing so and have the entire loading feature working fine. However, I have many scripts working in the same file and they of course do not get loaded on the state change.
Here's (a very brief) version of my functions.js file to explain:
(function($){})(window.jQuery);
$(document).ready(function() {
/* THIS IS CODE RELATIVE TO MY HOME PAGE ONLY */
$projects = $("#projects");
$projects.append($(".contact"));
$projects.isotope({
itemSelector : '.item',
layoutMode : 'masonry'
});
/* END PREVIOUS BLOCK */
/* BEGIN HISTORY.JS IMPLEMENTATION */
var History = window.History,
State = History.getState();
$('.nav a, .leftHold a').on('click', function(event) {
event.preventDefault();
var path = $(this).attr('href');
var title = $(this).text();
History.pushState('ajax', title, path);
});
History.Adapter.bind(window, 'statechange', function() {
load_site_ajax();
});
function load_site_ajax() {
State = History.getState();
$('body, html').animate({ scrollTop : 0 }, 250, function() {
$("#article").animate({ left : -1*$(window).width() }, 250, function() {
$(this).load(State.url + ' #article', function() {
$(".nav li").each(function() {
$(this).removeClass("current_page_item").removeClass("current_page_parent").removeClass("current_page_ancestor");
}).promise().done(function() {
$(".nav a").each(function() {
if(State.title.indexOf($(this).text()) != -1) {
$(this).parent().addClass('current_page_item');
return false;
}
});
});
}).promise().done(function() { $(this).css("left", $(window).width()).animate({ left : 0 }, 250); });
});
});
}
/* END HISTORY.JS */
});
I load this functions.js file at the end of my document, just before the closing body tag. I can tell that whenever I change browser states, the code in $(document).ready(); doesn't run again, therefore Isotope and none of my other Javascripts load again.
QUESTION:
How should I ensure that the code in functions.js runs every time the pushstate is initiated by History.js?
It sounds like you'll need to execute the ready code again. Wrap your initialization code in a function:
$(document).ready(initializePage);
function initializePage() {
/* THIS IS CODE RELATIVE TO MY HOME PAGE ONLY */
...
}
And then, when "statechange" fires, you can call initializePage() again.
You will also need to make sure the History code only runs once, so put that code in a separate function:
$(document).ready(setupHistory);
function setupHistory() {
/* BEGIN HISTORY.JS IMPLEMENTATION */
var History = window.History,
State = History.getState();
});
....
}