I have nearly a thousand HTML pages that form a book as a whole. I need a "Next" button/link on these pages which will load the next pages serially - so that the reader can navigate from one page to the next serially. The only way I know of doing this is to manually insert the links of every single page to the previous page with the label "Next". For a few pages it's okay - but for thousand pages??? I get a heart attack even thinking about it!
So I was thinking maybe this can be done by a little bit of Javascript / Jquery coding which may simplify and automate the process without requiring opening and closing a thousand pages and copying and pasting a thousand links. After that, I can simply insert the same code in one go to all the pages using Dreamweaver or any similar HTML editor. Problem is, I am not a programmer or coder and know almost nothing about Java, Borneo or any other scripts! So, can anybody help me on this?
All my HTML pages (filenames) are named serially like - page1.html, page2.html, page3.html... and so on. They are all in the same folder. I was thinking if it is possible to read the current page's name programmatically and only the number part of it replaced with the next number by adding 1 to it - without disturbing the rest of the filename - and then open the HTML file with that name onClick? Is this possible? Can anybody help me with a little bit of code?
Thanks in advance for taking the time to read this!
Here we cannot use "Next" button method,because we cannot open every book html and add "Next" button in (lots of work). To avoid to open the content html. We need to use .load() function here, to load book html content into a new HTML page.
Below code may help you on this:
First create a html page in same directory and add a and a "Next". Assume the book content are in DIV with ID = "bookContent"
If start page is 1, then the code will be
var currentPage;
$(window).on('load', function () {
currentPage = 1;
var contentHtml = 'page' + currentPage + '.html #bookContent';
//load html book content from page1.html
$('#content').load(contentHtml);
});
//set next button
$('#next').onclick(function(){
currentPage++;
var contentHtml = 'page' + currentPage + '.html #bookContent';
//load next page
$('#content').load(contentHtml);
});
Related
I want to scroll down to load more posts instead of loading all posts in the first time.
The one way that I know is using ajax(getpost) and JS(check scroll down)
When JS scrolling down event occurs,use JS to append a new post with html code
so for the append content, I am using '/' at the end of each line and put new element with '"+XXX+"' and need to change " to "
but I think it is not very efficient way for me to change post html code
Is there any other way to do this function instead of every time append a whole bunch of code? since one post may more than 100 lines of code, so it is too inconvenient.
append("<div class='post'>\
<h2>"+title+"</h2>\
<p>"+description+"</p>\
.....\
</div>");
I'm using the following theme for our site: http://themes.vivantdesigns.com/vpad/#dashboard.html
I want an ajax loader to show NEXT to the link/tab, when a user clicks a link within the drilldown menu on the left. As you can see from the link, content is dynamically loaded within a:
<section id="main-section">Pagename.html loaded here</section>
So basically, I want the ajax loader to show to the right of the menu links and disappear when the dynamic content loads. It will be hard to see this pause on the demo link, but heavier database queries will cause it to sit there a moment, and slower connections of course.
Any immediate help is appreciated very much.
I've tried show/hide onClick methods, hiding class on document ready, and nothing seems to work cleanly.
Okay, after a lot of screwing around trying to find where the ajax was happening, I think I've worked it out (little familiarity with jQuery/never heard of hashchange or bbq before), so give this a shot.
Assuming you have access to it, the page you referenced is including a JavaScript file called global.js.
Add an initially hidden "loading" image/div/whatever next to each menu item, with an id set similarly to the menu item's name e.g. id="mediaLoading".
Open global.js and head down to line 117:
$('#'+id).length && $('#'+id).remove();
After this line the ajax call is made, so add the code to show the ajax loader, e.g.
var loaderId = h.replace(/^\#/, "") + "Loading";
document.getElementById(loaderId).style.display = 'block';
//or $("#" + loaderId).show() or whatever you would use in jQuery
Finally, to re-hide it, add similar code into the inline 'complete' function (which would now be around line 127):
complete: function(jqXHR, textStatus) {
document.getElementById(loaderId).style.display = 'none';
}
Hope that solves it. It was difficult to test locally.
Keep in mind that since the file's called "global," that obviously might impact a bunch of other pages, so you may want to use null-checks for the loader or a separate file...
I am trying to refresh just a part of my website (the left part in which a list with topics appear), but it don't work for me. I get a very weird screen on that left part if I click the refresh button. The script I am using is this:
$(function() {
$("#refresh").click(function(evt) {
$(".bgleft").load("left.php")
evt.preventDefault();
})
})
The weird screen I am getting is a white blank screen with a random text on it (that does not exist). I don't understand why it is happening. For a live example: go to (edited out)
and click on "refresh" at the left frame.
Edit:
The HTML snippet: <body class="bgleft">
In left.php there are two lines of code which are showing theese characters.
for(var n = 1; n < 7; n++)
document.write(String.fromCharCode(Math.round(Math.random()*25)+97));
Try to remove them, it should help.
Also as sad in other answers send only contents of <body> in response because scripts are already included in the site.
It's generally not a good idea to send a complete HTML page when doing a partial update. If you look at what's produced by your left.php, it's the complete page (with <html> tags and everything) you use in your iframe.
Either create a page that only renders the body of the left.php and use that for partial update. Or look here for how to refresh an iframe.
PS: Framesets are hopelessly deprecated and really limiting in terms of design, dynamic/javascript functionality and future extensibility. Consider not using them...
You should be only fetching the content to be updated, not the whole page. Currently, the whole page is being fetched including html, body and even script tags. The jQuery and other scripts are also being loaded again because of this. This can cause major problems later.
How come you are loading the same page HTML, HEAD, BODY inside the current BODY tag?
$(function() {
$("#refresh").click(function(evt) {
evt.preventDefault();
$(window.top.window).find('frame[name=left]').reload();
})
})
I have some images from another source that need to refresh from their offsite source every 30 seconds. I would like to use JavaScript to accomplish this so as to avoid an entire page reload.
Presently I've attempted something similar to this question: "reloading a page after every 10 sec in rails 3.1"
(This is a Rails application, but I probably don't need a Rails specific answer in this case.)
Notwithstanding, I am ending up with no appreciable result when I add a div around the link + image nor when I add a div to the image itself. I have attempted both solutions in this example by creating a element-reload.js.
The first solution that's marked as the answer simply reloads the page with nearly all of the page elements absent. The second solution makes the image that I'm trying to refresh actually disappear upon first refresh when I surround the link + image with a div, but when I place the id upon which it's acting on the actual image tag, it yields nothing.
I'm sure I'm missing something rather simple since JS is not a strong suit for me at the moment.
Finally, I do have a number of sources to refresh and would like to see an example of performing this for a class vs an id if possible, but having more granular control over each one may be best in the end for varied times for the refreshes.
If you're up for jQuery, this can be done quite easily:
$(function() {
setInterval(function() {
$('img').each(function() {
$this = $(this);
$this.attr('src', $this.getAttribute('src') + '?timestamp=' + new Date().getTime());
console.log($this.prop('src'));
});
}, 30 * 1000);
});
In order to prevent browser caching, you have to fool the browser and load the image with a GET request variable timestamp. It doesn't matter what the parameter is, but the image will load brand-new and not from cache because the URL changes.
jQuery is famous for its use of CSS-like selectors.
Replace $('img') with one of these:
$('img.yourClassName'); // Class
$('#your_id, #another_id, ...'); // ID(s). Omit the comma for a single id
$('img[id^="common_base_id"]'); // Selects all images with an id that starts with "common_base_id".
There's also the :not() selector, which can filter your results:
$('img.yourClassName:not(.do-not-reload)');
$('img.yourClassName:not([src="img/spinner-skip.gif"])');
I am trying to get a variable from a URL,
for example if the users can link to this page: www.example.com?var1=blabla&var2=blabla
and there are many links on this site www.example.com.
What I want is no matter where my users click, they will always see the link appended with 2 variables they got from this link www.example.com?var1=blabla&var2=blabla
for example: if there is another link
<a href="www.example.com/page1.php"/>Go to page1</a>
on www.example.com?var1=blabla&var2=blabla, they will go to page www.example.com/page1.php?var1=blabla&var2=blabla.
This is my code:
<script type="text/javascript">
$(document).ready(function() {
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1);
var links = $('a');
links.each(function(){
var curLink=$(this);
var href = curLink.attr('href');
var newhref = href +'?'+ hashes;
curLink.attr('href',newhref);
});
});
</script>
My question is: I can only make all the links on the same page append those 2 variable. If the users go to another page, it won't do the same thing, because there is no script on it... but I can't add same script on every pages...
And another question, I want to clear the things after question mark and append the new ones.. is that possible to do that?
Thanks!
Your code looks good to me. And from your question it appears that your problems lie outside this.
My question is: I can only make all the links on the same page append
those 2 variable. If the users go to another page, it won't do the
same thing, because there is no script on it... but I can't add same
script on every pages...
If you can't run your script on every page then you can't modify the url's. You will need to do it server side. If you can't do it server side then you are out of luck.
And another question, I want to clear the things after question mark
and append the new ones.. is that possible to do that?
Yes, that is certainly possible. To strip the querystring use the following code.
var strippedHREF = window.location.href.substring(0, window.location.href.indexOf('?'));