I'm trying to create my own "previous" & "next" buttons on my portfolio that will read from a set or arrays that load static php file. I'm not againsts even doing in js, but I assume php might be easier since all my files are in php.
Looking for a simple loop to call and load the pages...
var pages = [
"index.php",
"project1.php",
"project2.php",
"project3.php",
"project4.php",
];
var Current = 0;
with some sort of function for prev(); and next();
function Prev(){
if(Current == 0){
Current = pages.length - 1;}
else{
Current--;}
}
function next(){
if(Current == 0){
Current = pages.length - 1;}
else{
Current++;}
}
them have my html look something like this...
<a href="prev();" class=“prev”>Previous </a>
<a href="next();" class=“next”>Next </a>
Any help would be greatly appreciated!
There are multiple ways of doing this.
One would be to add an iframe to your page and changing its src attribute to your page URL when one of the buttons is clicked. Another would be to have some container (e.g. a div) and then load the HTML dynamically (e.g. via fetch or AJAX) and insert it as the innerHTML of said container.
Related
Here's the issue:
Got multiple internal links on the web, still not connected to actual html files.
Im working with local files for the time being
Wanna make js redirect all of the dead links to one particular page (let's call the file: 404-error-page.html) up until I will finish the rest of html files to make those dead links active again
Purpose: wanna keep user away from seeing 404 blank page and instead show em some temporary page (404-error-page.html)
Sorry if that's messy - 1st time adding a question here.
HTML
<html><body><a href="random-link-directing-to-a-non-existing-page"></body></html>
JS
$('a').on('click', function(event) {
var $element = $(event.target);
var link = "404-error-page.html";
if(result.broken) {
if(result.http.response && ![undefined, 500].includes(result.http.response.statusCode)) {
event.preventDefault();
document.location.href = link;
}
}
});
I've already tried some alterations of this code but it's not working for me.
Firstly, need to make this functional on local files and then ofc online.
Any ideas?
Set the data-dead-link attribute to all your unfinished link tag as the follow.
Correct Link
<a data-dead-link>Dead Link</a>
<a data-dead-link>Dead Link</a>
Before the </body> tag insert the follow script
var deadLinks = document.querySelectorAll(`[data-dead-link]`)
deadLinks.forEach(el => {
el.href = "404-error-page.html"
})
I need to get URLs from my referring page via jQuery. The URLs are inside an <a> element that looks like this in HTML:
<a href="http://localhost/sr19repairables/vehicles/repairables/2011-chrysler-town-country-touring-minivan-4d/" title="2011 Chrysler Town & Country Touring Minivan 4D">
There are multiple <a> elements on the referring page and I need to get the URLs from all of them and put them in an array. Any help?
I have a button on my second page with this jQuery attached to it:
$(document).ready(function(){
$(".single_vehicle_previous_button").click(function(){
var referrer = document.referrer;
if (document.referrer == "http://localhost/sr19repairables/vehicles/rebuilt-vehicles") {
alert(value=referrer);
};
if (document.referrer == "http://localhost/sr19repairables/vehicles/repairables/") {
alert(value=referrer);
};
if (document.referrer == "http://localhost/sr19repairables/vehicles/") {
alert(value=referrer);
};
});
});
So if my referring page is one of these three, I want it to get the URLs in the anchors on those pages. The alert is just for testing purposes. Does that help clear things up?
If you already know it's on the same site (as you've checked the url), then you shouldn't have the usual problems with loading random pages via ajax.
You can use $.ajax to get the page, then jquery to parse the html returned:
$.ajax(document.referrer)
.done(function(html) {
var urls = $("<div/>").html(html)
.find("a")
.map(function(i, e) { return $(this).attr("href"); }
});
I'm using Tampermonkey, and I can't seem to get jQuery to work on it so this has to be Javacript only.
I'm trying to get a script to open (in a new window) the link of an item on a webpage. I've got a list of items I need to open, here is an example of those items:
<a class="market_listings" href="http://blabla.com/item1">...</a>
<a class="market_listings" href="http://blabla.com/item2">...</a>
<a class="market_listings" href="http://blabla.com/item3">...</a>
etc.
As you can see, the item is defined by a class and an href. The class is not unique, but the href is.
I'm new to programming but this is my idea on how to open specifically those links from the page:
The script gets elements with class="market_listings",
just to narrow down the search of hrefs on the page.
The script looks if the href of those elements corresponds with
"http://blabla.com/item*"
The script opens a new window with that href.
I have pretty much 0 experience with coding, but this is how I'd start it, considering I only want to open items 1 and 3:
function gethrefandopenwindow() {
var items = document.getElementsByClassName('market_listings')
//don't know how to code from here
if (*a href of items corresponds to*: 'http://blabla.com/item1')
{
*open new window to href of item1*
}
if (*a href of items corresponds to*: 'http://blabla.com/item3')
{
*open new window to href of item3*
}
else {
*refresh the page and start over*
}
}
As I said, I have barely programming experience, so I don't know if this is possible, and if it is and you're willing to help, please explain it to me like I'm a TOTAL idiot/newbie. :)
The only other way I could think of is this one: Javascript getElement by href? ; Except I don't know how to apply it in my situation due to my noobiness (and how to open a specific href out of the elements).
Anyway, I hope you can help me,
Thank you!
It looks like you had the right idea. This function might get you moving in the right direction.
function OpenHrefsInNewWindow() {
//Get reference to your elements
var items = document.getElementsByClassName("market_listings");
for (var i = 0; i < items.length; i++) //Loop through your elements
{
//Verify that the href starts with http://blabla.com/item
if (items[i].href.indexOf("http://blabla.com/item") === 0)
{
//If it does, open that URL in a new window.
window.open(items[i].href, "_blank");
}
}
}
Another way to write it:
function OpenHrefsInNewWindow() {
//Get reference to your elements
var items = document.getElementsByClassName("market_listings");
var i = 0;
while(i < items.length) //Loop through your elements
{
//Verify that the href starts with http://blabla.com/item
if (items[i].href.indexOf("http://blabla.com/item") === 0)
{
//If it does, open that URL in a new window.
window.open(items[i].href, "_blank");
}
i++; //Increment i here.
}
}
Can retrive the url of link taking value of atribute and do ankthing later
Url = $(this).attr ('href')
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.
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!