So I have a very specific problem that presented itself recently (right before our planned launch day tomorrow) and I am not completely sure how to solve it. I have built our website of an HTML-template with my modest front-end skills and we are very pleased with it. However, I can't seem to solve this.
The problem:
I have a filter system that allows a user to filter articles that are presented on a page. A user can even fill in this filter on the home page, direct to the page with the articles and have the filter applied. However, if then the filter is broadened (less strict) and new articles present itself, the pictures do not show up. Found out this is the case because the flexslider behind it has to be initialized again which happens on a window load (e.g. when the window is resized). The function that controls the initialization of the flexslider is in an external js file and I am not sure whether I can call on it from my own custom.js file, so I am thinking of just calling a resize/reload window function to active it.
The question:
Can I run a resize window function (or something that activates the flexslider) without hindering user experience (more specifically, without ACTUALLY resizing/reloading the window)? I will run this on a change in the filter.
I know this is a very specific question but hopefully somebody can help me out.
Take care!
p.s. it would be ideal if I could run the actual function that loads the flexslider but this is located in an external js file.
EDIT:
Briefly some additional info. If I go straight to the article page, it has no filter active and thus shows all articles, if I then start flipping through the filter, all is good. It is however only if I arrive from the homepage with a set filter that the problems arise. You then arrive on the article page which shows only the articles that are within the boundaries, and when the filter is taken away it has problems loading the images of the new articles showing up. As if it had not loaded these because they were not open on window load the first time.
You can trigger a resize event by creating a new event and passing it into the dispatchEvent command on window. There's a nice guide here. You'll want the type of event to be resize, since that's what it's listening for.
window.dispatchEvent(new Event('resize'))
This will work for events that were added via jQuery as well as events added via addEventListener.
I managed to solve it after all by delaying the function that drops the filter values into my inputs so it loads in all images initially before applying the filter. It happens at such speed it's hardly noticeable.
Also, I did try to initiate a window resize function, it did work without actually resizing anything, but unfortunately the images did not load in properly (overlap and such).
Anyway, it has been solved. Thanks for all the input!
Related
I am adding the scroll event in javascript for one of my pages. The code is like this:
document.getElementById("myProject").addEventListener("scroll", myFunction);
function myFunction() {
document.getElementById("scrollEvent").innerHTML = "These are all my projects so far";
}
So, when users start scrolling, they will see a text "These are all my projects so far".
My problem is how to stop showing this text when users move to another page.
Please help ( I am a verrrry fresh developer)
Thanks so much
A few thoughts.
Without knowing your dev environment (e.g. are you using MVC with a framework?), I will assume you are simply talking about separate/individual HTML pages.
Each HTML page can have its own javascript. Just like HTML and CSS, there is no need to have the same javascript functions on every page. (You don't have the same HTML content on every page, right?) Usually, we divide up the javascript into multiple files - some files are added to every page, some are specific to a certain page. It is easiest to have one (external) javascript file that you reference on every page, and then specific javascript code for each page - either in a second external file that is referenced, or on the HTML page inside <script>//js here</script> tags.
If the DIV with ID myProject is not on the other page, then the javascript won't do anything. However, it is not good to have broken javascript on a page, so make sure it is not included on other pages.
If you are using a framework, like CodeIgniter or ReactJS or Angular, please tell us so we can adjust our answers accordingly.
If the case is a switching between browser tabs, you can use two different events like below.
$(window).blur(function(e) {
// stop scroll event, when switching to another tab
document.getElementById("myProject").removeEventListener("scroll");
});
$(window).focus(function(e) {
// start scroll event
document.getElementById("myProject").addEventListener("scroll", myFunction);
});
I am not sure what you are actually looking for, because when user switch between tabs, he can not see the text anymore no matter there is a scroll event or not. If you are concern about performance, then the above solution would help.
CKEDITOR is giving me some hard time with the first load, i use:
CKEDITOR.inline
on the first load it takes about 2 seconds to load, on these two seconds if the user edit the div's content, when the CKEDITOR finally loads it restores it to before the edit :\ is there a way to fix it or maybe read-only the text untill the CKEDITOR loads? Right now i use opacity0 untill ckeditor is ready but it is a cheap hack and doesnt look good.
on the first load, the toolbar starts at the most left side of the screen, which on the other loads doesnt happen when it appears perfectly above the div being eddited.
I cant figure out how on the ckeditor inline demo they did it perfectly.
The question is a little too vague to really grasp any single underlying question. I would post this as a comment, but it is too long, so I'll just go ahead and add as answer. What do you mean by preloading the editor? Do you want to stop the user from editing content or do you want to load the editor before loading the HTML body content? Both are basically the same as "use opacity0 until ckeditor is ready but it is a cheap hack and doesn't look good.", what is the difference?
I wasn't talking about server performance in my comment, I was talking about client performance. There are many, many things you could try
Build a prettier fake preloader; for example mask the site with an overlay until CKE is ready
Defer DOM creation until CKEDITOR.instanceready or whatever event is usable for you. By this I mean you can just create a pretty loading animation and get the actual editable content with JS, this will look like a preloader too
Enable content editable only in document.ready or in some other later event, that might help
Monitor the network, see how long CKE requests load and if that is acceptable for you
Check that you are not using the source version of CKE
Check that caching works as expected
Minimize the load by removing any and all plugins you don't need
All of that is just for question number 1. As for "on the first load, the toolbar starts at the most left side of the screen, which on the other loads doesn't happen when it appears perfectly above the div being edited.", could we get a sample or how to reproduce this or a URL where this happens or even a screenshot? Based on that it is very hard to reproduce.
I've got a pretty big complicated HTML5 app I'm working on (backbone, marionette, jQuery, underscore, handlebars, bootstrap, etc) and deep within the app is a modal popup with a form in it.
When the modal pops open, the first time you click on any form field the form field de-selects itself. After that first click you can use the form as normal. When the app is ultimately loaded into an iFrame in production (don't ask) the first time you click on any form field or hover over any button, the whole page scrolls down until the top of the div element the form is within inside of the modal is at the top of the page, but after it does this once, it doesn't do it again (confused yet? Yeah, it's complex and layered).
I'm at a loss for how to even begin debugging this problem (thousands of lines of code, two handfuls of libraries).
I tried these:
console.log('bound events: ', $._data(this.$el.find('#RandomFieldID')[0], 'events'));
console.dir($('#elmId').data('events'));
console.log('bound events: ', $._data($('body')[0], 'events'));
But that yielded nothing.
Since this is library upon library upon framework upon framework I'm not even sure where to begin trying to find the thing that has obviously bound itself to these fields, or even if it is the fields that are being bound to or something else entirely...
So, any suggestions on good strategies for how to debug a mysteriously bound Javascript event (with multiple JS libraries and frameworks, which can't be just commented out until the problem resolves because they are relied upon to even get the HTML to appear on the page in the first place)?
And, unfortunately I can't do a jsfiddle or something because, as I said, this is deep deep within the app and I'd basically have to re-create the app inside of JSFiddle (impossible) to link to an example (and, it's not in an external facing site, so, I can't just link to it live in production).
I'm stumped.
Here's how I do it with Chrome.
Ctrl-Shift-J to open Javascript console.
Click the little magnifying glass in bottom left, it lets you select an element with your mouse.
Click an element on your page (it will highlight as you go to it.) It will highlight in the DOM at the bottom and show a bunch of properties on the bottom right.
At the bottom right go all the way past the CSS attributes and stuff down to event listeners:
Pick the event listener you're interested in. It will show you the bound function as well as the exact line of code in what script would be executed. That should tell you what library is doing your crazy stuff.
I find the Chrome debugger to be much more powerful and fast (doesn't lag) compared to FireBug and the IE developer tools. It's highly recommended :)
SO basically I am using this plugin
https://github.com/webcreate/Infinite-Ajax-Scroll
It fits my needs perfectly and is working pretty seamless.
My website is articles, the problem is the javascript only appears for the first page of data.
For example, my facebook like buttons, hover effect, etc etc only works for the original rows loaded, not for the rows loaded by the plugin when you scroll to load more.
Anyone experience this issue and know how to approach this.
Thanks
Since version 0.1.5 of IAS there is a new option called onRenderComplete, this is a callback function you can use to reinitialize other javascript code after new items have been added to the DOM.
You can read more about here: https://github.com/webcreate/infinite-ajax-scroll#onrendercomplete
Basically you can put any code that lives in $(document).ready() into this callback.
How did google+ implement their infinite scrolling (https://plus.google.com/105354532715798223299/posts/gLnVUU7Y8DL) ?
example page: https://plus.google.com/photos/104987932455782713675/albums/posts
I'm wondering what's the event that trigger the ajax load that they use?
Did they fire a check on window.onscroll and check the pageYOffset to be of a certain value before triggering the ajax load? (because somehow this feels like a rather dirty solution to me)
Basically I'm wondering what's the trick usually used, and what other tricks can we use to mimick this behavior?
That's called lazy loading and I'm guessing there are numerous tricks behind it - scroll, visibility of elements in the viewport, and who knows what else.
I would suggest having a look at source of the many lazy load plugins (and tutorials) out there. That should give you a better idea of how it's done.
It can be a really annoying feature if content doesn't load until it's scrolled into view. If pages are that large, other strategies should be considered such as summaries with thumbnails that link to full articles (e.g. Google news), reducing the size of the page (nearly any news site), or letting users select how many entries are on a page (e.g. Stackoverflow).
For jQuery, there is the plugin "jquery-appear" http://code.google.com/p/jquery-appear/
From the description:
Mimics a custom "appear" event, which fires when an element scrolls into view or otherwise becomes visible to the user.
$('#foo').appear(function() {
$(this).text('Hello world');
});
This plugin can be used to prevent unnecessary requests for content that's hidden or outside the viewable area.
Check the examples http://code.google.com/p/jquery-appear/wiki/Examples