I have included the page page loader script into my project with cakephp.I can see that it is loading as in body tag I can see the 'pace-running' and 'pace-done' class names.
As soon as I add this
$(function() {
Pace.on("done", function(){
alert('done');
// $("#pageToLoad").fadeIn(1000);
});
});
I get the alert and I can see that the div added from pace is active:
<div class="pace pace-active">
<div class="pace-progress" style="transform: translate3d(100%, 0px, 0px);" data-progress-text="100%" data-progress="99">
<div class="pace-progress-inner"></div>
</div>
<div class="pace-activity"></div>
</div>
which shoes me, everything is included well and works well.
But for some reason, I can't see the loading animation on my page.
I changed the z-index within the css template file of pace to '99999999' but the progress bar will not display :-(
There is a bug report regarding this. The recommended solution is:
$(document).ajaxStart(function() { Pace.restart(); });
I need something along these lines in one of my projects, but not in another, and I'm not sure what the difference is. :-(
Related
I have the following problem in Edge and IE11.
There is a button made as a div:
<div class='button loading'></div>
Initially it has the class 'loading', which has an animated spinner image. This works well.
.loading { background-image: url ('loading.gif'); }
When page loading and some other actions are completed, the 'loading' class is changed to 'ready':
<div class='button ready'> </div>
It should have another bg image:
.ready { background-image: url ('ready.svg'); }
The problem is that this image (ready.svg) is not shown in background. What is more, if i call this image in a hidden img element at the end of page, everything works:
<img src="ready.svg" style="display:none;" />
It seems to me that IE11 and Edge are not loading or not applying an image to the background of a div, if it's not used immediately on page load. Can it be so? Who faced something like this, and how to get rid of this behaviour?
Adding a timeout to the dynamic class addition solved this in IE and Edge for me (I am using jQuery).
setTimeout(function(){
$('#element').addClass('loading');
},1);
Not totally sure why! My class was being added on on a form submit event, so maybe the request was being prevented?! Hope this helps someone.
I am making a tumblr theme which will have a pretty large image in the background (approx. 2000x1600px). However I need the page's content, the tumblr posts, to load relatively quickly. Which of these options would be faster?
<style>
body {background-image: "background.png"}
</style>
<body>
<div id="content">
/* tumblr posts go here */
</div>
</body>
or
<style>
img {z-index: 0}
</style>
<body>
<div id="content">
/* tumblr posts go here */
</div>
<img src="background.png">
</body>
The two don't really differ from one another.
If you open up Chrome Dev Tools and take a look in the Network Tab, the load times will be the same because the size of the image remains as is.
However, what you can do here, is leverage the power of CSS along with some Javascript. Apply the background image to a class, say .with-background, and then with some jQuery:
$(window).load(function(){
$('body').addClass('with-background');
});
This way, when everything else on the page (including other images, thus the listener on 'window.load') is loaded, apply this class, which will then load up the background image.
As a simple sidenote, if you don't want your body to remain blank while the content loads, what you can do is take that huge image, downscale it, and blur it (in Photoshop or other image editing software). That way "something resembling that image is back there" - all the while being very small in Kb. In turn, when the class is applied, you'll get your full-sized image.
Check out posts with images on medium.com - they do a similar thing. It is a design choice, more than anything else.
I have some templates that look roughly like this:
<template name="items">
<div class="item-list">
{{#each items}}
{{> item}}
{{/each}}
<div>
{{> loadMore}}
</template>
<template name="item">
<div class="item" id="{{unique_string}}">
<!-- stuff here -->
</div>
</template>
<template name="loadMore">
Load more...
</template>
With associated javascript:
Template.items.items = function() {
return Items.find({}, {limit: Session.get("itemCount")});
}
Template.loadMore.events({
"click": function() {
Session.set("itemCount", Session.get("itemCount") + 10);
}
})
All that together more-or-less gives me something that pretty much works like an infinite scrolling section. (The actual code has a few more moving parts, but this is the important bit.)
Whenever I click on loadMore, though, it both pulls more data down and scrolls me back to the top of the page, rather defeating the purpose of infinite scroll. I can throw in some javascript to scroll back down to where it should be, but that leaves a nasty flicker as the page hops around quicly.
I've tried using preserve on the entire list as well as on each item div to keep them from getting updated, but that didn't seem to stop the scrolling. I've also tried putting {{#isolate}} blocks around just about any and everything, without any luck.
Is there something I can do here to make the page not scroll around while it re-renders? Composing templates differently? Some aspect of preserve or {{#isolate}} that I've missed?
The page scrolls to top because your
Load more... will make the page scroll to top. When your href links to "#" the page will scroll to the DOM element with #"element id". Clicking a link with only "#" will scroll to top.
You have two options:
Prevent the default behaviour on the click event (easy option):
Template.loadMore.events({
"click": function(event) {
event.preventDefault();
Session.set("itemCount", Session.get("itemCount") + 10);
} })
This will stop the page reload
Even better: make the Load more... link to "#{{_id}}" then the page will automatically scroll to the element with the id you provided. This will require some restructuring of the templates and maybe a helper method in the template to give you the id of the last item. But it will make your page load exactly where you want.
I've been reading threads (specifically this one: iFrame inside Jquery accordion) and still not finding (or not understanding) how to get the Spotify playlist I have hidden in a closed accordion section to fully load on page load.
Many solutions have been offered that I've tried, so far, nothing has done the trick (probably due to my JS noobness). I'd appreciate any insight. Please do be specific about where to put what as I'm very new at Javascript.
JS:
<script>
$(function() {
$( "#accordion" ).accordion({
collapsible: true,
autoHeight: false,
alwaysOpen: false,
active: true
});
});
</script>
Relevant HTML:
<h3 id="bubble">The Bubble Creatures</h3>
<section id="bubble">
<div id="bubble-story"><p>Blah blah</p></div>
<iframe id="spotify" src="https://embed.spotify.com/?uri=spotify:user:seedpodpub:playlist:4MsCt5Fkg5G99Tb5VFqzQ4" width="300" height="380" frameborder="0" allowtransparency="true"></iframe>
</section>
Thank you again!
o.
UPDATED WITH MORE INFO:
Essentially, I want to do this:
If the section style is "#section1 {display:none;}" then do nothing.
If the section style is "#section1 {display:block;}" then trigger the div #spotify to load.
This should overcome the half-loading issue I'm seeing with the hidden iframe (I hope)? I'm looking at this post: Event detect when css property changed using Jquery, again, failing to implement the suggested solution.
It seems like you have found your way out of this but for others I suggested a rather easy solution for this.
I was trying to load my Google map api into an iframe which was inside the jQuery Accordion.
The problem is if you load the accordion as closed, the iframe never loads so if you try to open the accordion you wont see anything in it.
The solution is that to load the accordion as open or active first (active: '0') and then use this code to close your accordion as soon as the page gets loaded:
$("#accordion-map").accordion(
{
active: 'none'
}
);
So what happens is that when you declare your accordion its open and the above code close it right after ;) so you never see it open.
Worked for me just fine in both Chrome and FireFox.
I have just added a 'Like' button from Facebook. The site is in Arabic, and I have added the necessary Arabic language locals to the FB code. Now the problem is the Icons are displaying slightly different, and I can see that can be controlled by CSS. The FB Code loads an iframe and within that there is a SPAN that has a class that controls the position of the Facebook (blue 'f' icon) which is overlapping over the text. When I try using FireBug and re-position it it words fine. My question is how can I write a CSS code that I can change the value on that iframe loaded CSS from my local CSS file ? The code is as follows:
=== Code on the iFrame that is loading ===
<div class="connect_button_slider">
<div class="connect_button_container">
<a class="connect_widget_like_button clearfix like_button_no_like">
<div class="tombstone_cross"></div>
<span class="liketext">أعجبني</span>
</a>
</div>
===
The CSS that is loaded by FireBug
.button_count .like_button_dark .like_button_no_like .liketext, .button_count .connect_widget_like_button .liketext {
background-position: -1px -47px;
}
====
I need to change the "class"="liketext".
I want to change the value of "background-position: -1px -47px;" from that to the following:
background-position: 38px -47px;
====
Now I have my local CSS file, how will I be able to access that element "liketext" and change the value from "-1" to "38" ...
The page, if you want to check, is on the following link ...
URL: http://www.majalla.com/arb/2011/09/article55227042
On top of the article you will find the facebook icon/like overlapping just next to the print icon.
I really don't like telling you that your work here was pretty much wasted. You can't influence an external iframe with css - that's why Facebook does it that way, to have full control over their icons. Anyway it's a shame that the like button doesn't get displayed properly, but all you can (and should) do is submitting a bug report to facebook!
By the way, try taking care of your spelling: It's that, not tath and THAT spelling makes it really hard to read your question ;)