Got a question about the Anchor point.
I have a URL like domain.tld/sub/#point1/#point2 and I also using tabs which is triggered by the first #point1. So if someone opens the link the browser is detecting the first tab on that page and then it needs to find the second #point2 which is a anchor point like <div id="point2"></div>.
But now comes te question, since it is not possible to use multiple anchor scrolldowns when the pages is loaded, I have to find a other option. But offcourse didn't have that much experience. Who could help me out?
Regards Martijn
$(document).ready(function() {
goToUrl();
});
function goToUrl() {
var newUrl = document.URL;
var newUrlArr = newUrl.split("#");
var newUrlArrLength = newUrlArr.length;
if (newUrlArrLength>0) {
var last = parseInt(newUrlArrLength) -1;
var lastUrl = newUrlArr[last];
var lastItem = $("#"+lastUrl);
$('html, body').animate({
scrollTop: lastItem.offset().top
}, 1000);
}
}
Ok I changed the answer from Stavros a bit like underneath:
$(function() {
goToUrl();
function goToUrl() {
var newUrl = document.URL;
var newUrlArr = newUrl.split("?target=");
var defUrl = newUrlArr[1].slice(0, newUrlArr[1].indexOf("#"));
var newUrlArrLength = defUrl.length;
if (newUrlArrLength>0) {
var tag = $("#"+defUrl+"");
$(window).scrollTop(tag.offset().top);
}
}
});
This does the job for me! Thanks Stavros.
Related
My JQuery .animate() function seems to not working on IE. Could You please help me transform it to a pure JS solution?
var brandLink = $('#brand');
var pageTop = $('#page-top');
var navLinks = $('.nav-link');
var offerSection = $('#offer');
var techSection = $('#tech');
var portfolioSection = $('#portfolio');
var contactSection = $('#contact');
var moreBtn = $('.more-button');
navLinks.eq(0).click(() => {
$('html, body').animate({
scrollTop: pageTop.offset().top
}, 500);
});
As You can see this is used for scrolling page to propper section/page-top in One page website.
Can someone explain why animate() doesn't work on IE?
Quick shot, try:
var brandLink = $('#brand');
var pageTop = $('#page-top');
var navLinks = $('.nav-link');
var offerSection = $('#offer');
var techSection = $('#tech');
var portfolioSection = $('#portfolio');
var contactSection = $('#contact');
var moreBtn = $('.more-button');
navLinks.eq(0).click(function(e) {
e.preventDefault(); // to prevent native behaviour of the thing you press
$('html, body').animate({
scrollTop: pageTop.offset().top
}, 500);
});
Depending on the version of IE you need to support, have a look at this site. You will find some generic turnarounds that might help.
Also have a look at this (adding a preventDefault(); to make sure the script is working properly).
I have two problems on my website.
There is a menu, and if you click on a link then the browser scrolls to the point (id) of the link. A few days ago everything worked fine, but not now. I didn't work on the webpage, so I don't know where the problem is.
Here is my Code:
jQuery.fn.anchorAnimate = function(settings) {
settings = jQuery.extend({
speed : 1000
}, settings);
return this.each(function(){
var caller = this
$(caller).click(function (event) {
event.preventDefault()
var locationHref = window.location.href
var elementClick = $(caller).attr("href")
var destination = $(elementClick).offset().top - 135;
$("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination}, settings.speed, function() {
//window.location.hash = elementClick
});
return false;
})
})
};
$(document).ready(function() {
$("li.anchorLink a").anchorAnimate();
});
Can you help me?
Make sure you load JQuery library first and then your jquery plugin. Basically it doesn't recognize your current file, because Jquery wasn't loaded / wasn't found.
I'm sure this is very simple, but I'm not getting it.
I'm using the following AJAX script to load content from a particular div of an external page into a div of the same name on my root page.
$(function() {
var newHash = "",
$mainContent = $("#main-content"),
$pageWrap = $("#page-wrap"),
$el;
$(document).delegate(".dyn a", "click", function() {
window.location.hash = $(this).attr("href");
return false;
});
$(window).bind('hashchange', function(){
newHash = window.location.hash.substring(1);
if (newHash) {
$mainContent
.find("#guts")
.fadeOut(200, function() {
$mainContent.hide().load(newHash + " #guts", function() {
$mainContent.fadeIn(200, function() {
$pageWrap.animate({
});
});
$(".dyn a").removeClass("current");
$(".dyn a[href="+newHash+"]").addClass("current");
});
});
};
});
$(window).trigger('hashchange');
});
Could someone please help me with changing the title of the root page for the title of the page I am loading?
I have tried using:
var newTitle = $(responseHtml).filter('title').text();
document.title = newTitle;
As it mentions in this post, which almost worked but stopped the ajax functioning correctly. I'm not sure, though whether I am placing this in the right place.
Thanks in advance!
Could you possibly want: window.top.document.title = newTitle; ?
I managed to achieve this by adding the following to the hashchange function:
String.prototype.toTitleCase = function(n) {
var s = this;
if (1 !== n) s = s.toLowerCase();
return s.replace(/\b[a-z]/g,function(f){return f.toUpperCase()});
}
newHash = window.location.hash.substring(1);
function changeTitle(title) {
document.title = window.location.hash.replace("#","").replace(/[_]/g,"").replace(".html","").replace("and","+").toTitleCase(); }
changeTitle("");
This takes the title from the page filenames, removes the hash and any underscores, then capitalizes the first letter of each word.
I'm certain there's a better, simpler way of doing this. What I've got will do for now.
How can i rewrite all external links with a single onmousedown event?
Kinda like what facebooks does with it's link shim
Please check the original Facebook Article about the link shim:
http://on.fb.me/zYAq0N
Requirements:
Should work for all subdomains on mainsite.com.
Should redirect example.com to
mainsite.com/link.cgi?u=http://example.com
Should only redirect links not belonging to mainsite.com.
Uses:
This is for security of the users of a private web app, and to protect referrers.
Best to do it on the fly for good UI as pointed out in the FB article.
That's so when users hovers over some link it shows the correct link but when he clicks it, js redirects it to my.site.com/link.cgi=http://link.com
Thanks in advance
SOLVED: https://gist.github.com/2342509
For an individual link:
function $(id){ return document.getElementById(id); }
$(link).onclick = function(){ this.href = "http://otherlink.com"; }
My Sheisty Link
So to get all external links:
window.onload = function(){
var links = document.getElementsByTagName("a");
for(a in links){
var thisLink = links[a].href.split("/")[2];
if(thisLink !=== window.location.hostname){
links[a].href = "http://mainsite.com/link.cgi?u=" + links[a]; }
// Or you could set onclick like the example above
// May need to accommodate "www"
}}
Edit:
Found this answer and got a better idea.
document.onclick = function (e) {
e = e || window.event;
var element = e.target || e.srcElement;
if (element.tagName == 'A') {
var link = element.href.split("/")[2];
if(link !=== window.location.hostname){
links[a].href = "http://mainsite.com/link.cgi?u=" + links[a]; }
return false; // prevent default action and stop event propagation
}else{ return true; }
}};
If you use jQuery then the following will work
$('a:link').mousedown(function() {
this.href = 'http://my.site.com/link.cgi=' + this.href;
});
Otherwise
var anchors = document.getElementsByTagName('a');
for(var i = 0; i < anchors.length; i++) {
var a = anchors[i];
if(a.href) {
a.addEventListener('mousedown', function(e) {
this.href = 'http://my.site.com/link.cgi=' + this.href;
}, false);
}
}
I'm trying to remove a landing page when I click on a link on a page. The page isn't mine so I'm trying to change the href with a user script.
Without any modification, the link looks like this:
https://www.domain.com/out.php?u=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DPUZ1bC-1XjA%26amp%3Bfeature%3Drelated
What I want:
http://www.youtube.com/watch?v=PUZ1bC-1XjA&feature=related
What I got so far:
http://www.youtube.com%2fwatch%3fv%3dpuz1bc-1xja%26amp%3bfeature%3drelated/
But that adress doesn't work in the browser.
This is my current code:
$('a').each(function(index) {
var aLink = $(this).attr('href');
if(aLink) {
if(aLink.indexOf("out.php?u=") > 0) {
aLink = aLink.substring(51);
console.log(aLink);
$(this).attr('href', "http://"+aLink);
console.log($(this).prop('href'));
}
}
});
All help and tips are appreciated.
You need to decode the URL using decodeURIComponent
Change:
$(this).attr('href', "http://"+aLink);
To:
$(this).attr('href', 'http://' + decodeURIComponent(aLink));
Take a look at decodeURIComponent
You can also make use of the hostname, pathname, and search parameters of anchor elements.
// general function to turn query strings into objects
function deserialize_query_string(qs) {
var params = {};
var fields = qs.split('&');
var field;
for (var i=0; i<fields.length; i++) {
field = fields[i].split('=');
field[0] = decodeURIComponent(field[0]);
field[1] = decodeURIComponent(field[1]);
params[field[0]] = field[1];
}
return params;
}
$(document.links).each(function(i){
if (this.hostname=='www.domain.com' && this.pathname=='/out.php') {
var params = deserialize_query_string(this.search);
if (params.u) {
this.href = u;
}
}
});