I am wondering if it is possible to load infinityScroll response content in a reverse order.
The way it is now is that you have your index.html that on scroll loads the external page2.html then page3.htmland so on.. so when the user wants to add content he just duplicates the pageX.html file, changes the content and assigns the corresponding next number to the html file. Nice and simple right? But now the latest update, with the freshest content, is on the bottom of the page - not on top, as one most like would like it to be.
So my grand idea is that if the user updates the
<nav id="page-nav">
</nav>
to whatever the highest number of his external html file and then have infinityScroll show all the files in reverse order down to page1.html being the last one.
At the moment it works like this:
index.html - loads the following files in this order
page1.html (oldest)
page2.html
page3.html
page4.html (newest)
But I'd like it to be like this:
index.html - loads the following files in this order
page4.html (newest)
page3.html
page2.html
page1.html (oldest)
and whenever one adds a page it would "land on top of the stack"
This could be pretty useful for all of us right?
Anyone up for the challenge? :)
Cheers
actually 'infinityScroll' only reads external files from number 2 onwards, but just to present my idea clearer I use the sequence one-two-three etc..
I am guessing you want to do this so you get urls that always point to the same content (permalinks), which in some cases can be very handy. For example, you know that article foo is located on page 5, and can then link to it with page5.html#foo.
You can achieve this by passing a function to the path option. However, you will have to know the amount of pages before hand, since that is what we use to calculate the path.
// Amount of pages
var numPages = 45;
// Initialize infiniteScroll plugin
$(selector).infinitescroll({
path: function (page) {
// Concatenate the path to a page
var path = "page";
// Only add a page number if page is below or equal numPages
if (page <= numPages) {
path += (numPages - page);
}
// Return path as "page%d.html"
return path + ".html";
}
});
As stated in the documentation, the path option can either be an array of URL parts (e.g. ["/page/", "/"]) or a function that accepts the page number and returns a URL.
You could put the read more button at the top of the page, make an event listener:
$('.selector').infinitescroll({
loading: {
finished: function(){
//move your newly-added content to the top using $.prepend()
}
}
})
I have created a sample in which new element(which you need to add) will add on top in the container element.
HTML:
<div id="container" class="container">
</div>
CSS:
.container {
border: 1px solid #ccc;
height: 100px;
width:500px;
overflow:auto;
}
JAVASCRIPT/JQUERY
// page count
var count = 0;
var content_to_add_on_top = '<div>Page {count}</div>';
// call this function in every 2 seconds
setInterval(function () {
// code which you need to call when you wants to add an element to top in container
var content = content_to_add_on_top;
content = content.replace(/{count}/g, count);
var container = $('#container');
var child_elements = container.children();
if (child_elements.length === 0) {
// if child element does not exists
container.append(content);
} else {
// if child exists
var first_element = child_elements[0];
$(first_element).prepend(content);
}
// increment count
count++;
}, 2000);
JSFiddle Link
Hope it helps.
Related
i have this function in the index page which show a part of the the page and hide the other:
var switchTab = function() {
var p = $(this).parent('li');
var i = p.index();
var s = section.eq(i);
var c = s.find('*');
section.removeClass('active');
sectionContent.removeAttr('style');
s.addClass('active');
c.css({
transform: 'none',
opacity: 1
});
linkParent.removeClass('active');
p.addClass('active');
return false;
};
link.on('click', switchTab);
</script>
now i wanted to jump to a certain part of the page in the index from the menu bar so i used this a href:
<li>NEWS</li>
and i as u can see had to use the function to be able to href this part.
the problem is that this works fine in the index page since the function is in the index page, but when i click on the news on the menu bar on another page it just takes me to the index page and not to the part i want in the index page.
is there a way to make it work? any ideas?
note: i tried adding this function to the other pages but still having the same result, i think it is because the function should be called in the index page and it is useless in the other pages.
this are the tabs in the index page, the function closes the old one and open the one i click on, i want to go to one of the tabs in the index page from another page.
the tabs in the index page
i want to directly switch to the news tab when the user clicks news in the menu bar in other pages.
is there a way i can write a js that first load the index page than call the function?
You must create a file javascript like app.js or whatever, then include to script tag like this :
<script src="app.js"></script>
And inside app.js you can declare your function inside document ready.
$(document).ready(function(){
function switchTab() {
var p = $(this).parent('li');
var i = p.index();
var s = section.eq(i);
var c = s.find('*');
section.removeClass('active');
sectionContent.removeAttr('style');
s.addClass('active');
c.css({
transform: 'none',
opacity: 1
});
linkParent.removeClass('active');
p.addClass('active');
return false;
};
});
I inherited a project where a page is loaded, then code attached to that page fills in a div with dynamically generated html - it basically fills an existing div with a html string.
This string contains links to images, etc.
I want to tell when all the images, etc have loaded- I cannot seem to get any jQuery standard checks
to work - ie I have tried attaching $(window).load() after the dynamic stuff has been inserted.
I am wondering if I should write $(window).load() dynamically as well, or if there is any other
method- ie $("#thediv").load (doesn't seem to work. I cannot query all the new html for image tags, etc-
too much stuff is being put in.
The $(window).load() doesn't work for dynamic content as far as I know. You can use the .load event for each image separated. Here's an example:
var container = $("<div> ... Stuff ... </div>");
var images = container.find('img');
var imageIdx = 0;
images.load(function(){
imageIdx++;
if (imageIdx == images.length){
callback();
}
});
Where callback() is the function that runs after all images where loaded.
From my comment: window load applies to the initial page load only. Not dynamic loading of content within it. Attach load handlers to each loaded image element and count them.
This is the shortest version I could come up with for you:
// After HTML load finishes
var img = 0;
var imgCount = $("#thediv img").load(function(){
if (++img == imgCount){
// We are done loading all images!
}
}).length;
$(window).ready() only applies to the content within the HTML file and you can only use load to attach an onload event handler to a specific image (not a container), something like this might work for you.
window.ImageLoadHandled = false;
window.ImageLoadCount = 0;
function ImageLoadHandler() {
// guard against calling this function twice
if(window.ImageLoadHandled) return;
window.ImageLoadHandled = true;
// All images have loaded || timeout expired...
}
$("#myAjaxedDiv img").load( function() {
window.ImageLoadCount++;
if( window.ImageLoadCount == $("#myAjaxedDiv img").length ) {
// all images in #myAjaxedDiv have loaded
ImageLoadHandler();
}
});
// if images haven't loaded after 5 seconds, call the code
setTimeout( ImageLoadHandler, 5000 )
The only problem with this is that if an image fails to load for whatever reason, the code will never be hit, which is quite risky. To counteract this I'd recommend creating a setTimeout() method to call your code after a few seconds timeout in-case there is a problem loading images (client or server side) and I've also taken #TrueBlueAussie's correction into account in the edit.
Your alternative is to preload the images with your HTML page
I have a few different web pages -
www.foo.com/index.html
www.foo.com/dog.html
www.foo.com/cat.html
Assume the pages are very similar, except for an image and some text in the middle of the page that's unique to that page.
I have an external script that dynamically creates the HTML for each page using templates and substituting in various variables and configurations. I'm trying to figure out how to display a certain piece of HTML only for a certain page (e.g. cat.html)
In psuedo-code, this is what I'd like to do -
<style>
function isCatPage() {
if page.url.contains("cat.html")
return true;
else
return false;
end
}
</style>
if isCatPage {
<bold>This text only appears on cat.html</bold>
}
<p> This is random dynamically generated HTML</p>
</body>
Using basic javascript to show <bold> on an specific HTML page.
Thanks!
I would use jquery and do something like the following:
<script type='text/javascript'>
// only run this when the page finishes loading
$(document).ready(function () {
// if cat.html exists in the url
if (window.location.href.indexOf('cat.html') > -1) {
// select the p by its id and hide it or -
$('#conditional').css('visibility', 'visible');
}
else {
// show it
$('#conditional').css('visibility', 'hidden');
}
});
</script>
<p id='conditional'>This text only appears on cat.html</p>
<p>This is random dynamically generated HTML</p>
Get the current url, and split it
var url_parts = location.href.split(/\//g);
var page = url_parts[url_parts.length-1];
page should contain the current page (eg cat.html)
Although, I'd really suggest you use a server for this kind of stuff
I tried with this code but, didn´t worked.
<a href="http://altodesign.pt/#portfolio" onClick="loadintoIframe('myframe,'portfolio/mmteam.html');">
you can try something like this
a href="javavcipt:document.getElementById('myframe').src = 'portfolio/mmteam.html';"
I would never use javascript ...
I have had a look into your webpage (plenty to learn, like add scripts to the end of the page, create a global javascript object to hold all website actions, etc ... but that's not the question)
I could see that, even thought you jump to #CONTACTOS you are not making the use of the hash at all... and you should!
using the hash would let you do things like:
http://altodesign.pt/#portfolio-cooptaxis
and that would jump to portfolio anchor and load the cooptaxis.html into the iframe and you stoped using javascript:loadintoIframe('myframe', 'portfolio/mmteam.html') at all, as that will cause Google Analytics and Crawlers not to follow up your links for example ...
your method could be something simple like
$(function() {
// let's see if we have an hash on the page
var hash = document.location.hash;
if(hash.length > 0) {
if(hash.instr('-') >= 0) {
// supposing will have only one char '-'
var img = hash.split('-')[1];
// let's remove the frame info from the hash
hash = hash.split('-')[0];
// there's a call to load into the iframe, let's load it
$("#myframe").attr("src", "portfolio/" + img + ".html")
}
// let's fly
jumpTo(hash);
}
// let's disable the anchor links by default and use the hash
$("a[href^=#]").click(function() {
// for all links that start with the hash, let's...
document.location.hash = $(this).attr("href");
return false;
});
$(window).bind('hashchange', function() {
// everytime the hash changes let's fly
jumpTo(document.location.hash);
});
});
function jumpTo(anchor) {
var a = $("a[name='" + anchor.replace('#','') + "']"),
pos = 0;
if(a.length > 0) {
// we have found the anchor, let's grab it's top position
pos = a.position().top;
}
// if we got here and pos === 0, we did not found the anchor
// for the given hash... maybe the user is playing around ...
// and we shall fly
$('body,html').animate({
scrollTop: pos
}, 800);
}
justthis will allow you to avoid using javascript to jump your links, as all they now have to have is simple: Portfolio
Let we say that you have page1.html in-which a link to page2.html you want it to be opened in an iframe in page1.html
in page1.html
link
<iframe name="iframe-name"></iframe>
Then you are able to add any anchor you want. It is just a matter of naming your iframe and then targeting it in the link!
I have an html file that I want to be loaded from various pages into a dijit.contentpane. The content loads fine (I just set the href of the contentpane), but the problem is that javascript within the html file specified by href doesn't seem to be executed at a consistent time.
The final goal of this is to load an html file into a contentpane at an anchor point in the file (i.e. if you typed in index.html#tag in order to jump to a certain part of the file). I've tried a few different methods and can't seem to get anything to work.
What I've tried:
1.
(refering to the href of the dijit.contentpane)
href="page.htm#anchor"
2.
(again, refering to the href of the dijit.contentpane -- didn't really expect this to work, but decided to try anyways)
href="#anchor"
3. (with this last try inside the html specified by href)
<script type="text/javascript">
setTimeout("go_to_anchor();", 2000);
function go_to_anchor()
{
location.href = "#anchor";
}
</script>
This last try was the closest to working of all of them. After 2 seconds (I put the delay there to see if something in the dijit code was possibly loading at the same time as my javascript), I could see the browser briefly jump to the correct place in the html page, but then immediately go back to the top of the page.
Dojo uses hashes in the URL to allow bookmarking of pages loaded through ajax calls.
This is done through the dojo.hash api.
So... I think the best thing you can do is use it to trigger a callback that you write inside your main page.
For scrolling to a given position in your loaded contents, you can then use node.scrollIntoView().
For example, say you have a page with a ContentPane named "mainPane" in which you load an html fragment called "fragment.html", and your fragment contains 2 anchors like this :
-fragment.html :
Anchor 1
<p>some very long contents...</p>
Anchor 2
<p>some very long contents...</p>
Now say you have 2 buttons in the main page (named btn1 and btn2), which will be used to load your fragment and navigate to the proper anchor. You can then wire that up with the following javascript, in your main page :
<script type="text/javascript">
require(['dojo/on',
'dojo/hash',
'dojo/_base/connect',
'dijit/layout/BorderContainer',
'dijit/layout/ContentPane',
'dijit/form/Button'],
function(on, hash, connect){
dojo.ready(function(){
var contentPane = dijit.byId('mainPane');
var btn1 = dijit.byId('btn1');
var btn2 = dijit.byId('btn2');
btn1.on("Click", function(e){
if (!(contentPane.get('href') == 'fragment.html')) {
contentPane.set("href", "fragment.html");
}
hash("anchor1");
});
btn2.on("Click", function(e){
if (!(contentPane.get('href') == 'fragment.html')) {
contentPane.set("href", "fragment.html");
}
hash("anchor2");
});
// In case we have a hash in the URL on the first page load, load the fragment so we can navigate to the anchor.
hash() && contentPane.set("href", "fragment.html");
// This callback is what will perform the actual scroll to the anchor
var callback = function(){
var anchor = Array.pop(dojo.query('a[href="#' + hash() + '"]'));
anchor && anchor.scrollIntoView();
};
contentPane.on("DownloadEnd", function(e){
console.debug("fragment loaded");
// Call the callback the first time the fragment loads then subscribe to hashchange topic
callback();
connect.subscribe("/dojo/hashchange", null, callback);
});
}); // dojo.ready
}); // require
</script>
If the content you're loading contains javascript you should use dojox.layout.ContentPane.