I require code for checking where a user has come from or change phone number?
JQuery i have is:
$(document).ready(function() {
var referrer = document.referrer;
});
I need an If Else Statement to see:
if (user is from (testsite1.com.au))
// run referrer
else
//change phone number to 0438 789 999
Please Help
UPDATED CODE SO FAR -----
$(document).ready(function() {
var referrer = document.referrer;
});
var site = 'http://www.tp1.websyte.com.au/';
if(site == true) {
alert('Came From .websyte site');
} else {
$(function(){
$('body *').replaceText( /\b03 9532 1600\b/gi, '0438 610 584' );
});
}
In order to check if a user came from your site we can use document.referrer, note that this only works when you are moving from one site to another by a link. It will not work if a user typed in a URL website directly.
To change phone numbers on the site is simple. We just look for our phone numbers decribed the the anumber class, cycle through them and change there html contents to the number you want.
var lastUrl = document.referrer;
if(lastUrl.search("websyte") == -1) {
$( ".anumber" ).each(function() {
$(this).html("0438765876");
});
}
This means that we first get the last url, call it lastUrl. Then if it had "websyte" somewhere in that url we assume that they came from your website. In that case it returns some positive number. If we didn't find it -1 is returned. Only when we didn't find "websyte" is when we cycle through all the anumber classes and change their html content to 0438765876.
Fiddle Here
Related
I'm running a code that displays content based on the url. If the user is in page X, the page displays the content number 1 and hides number 2, if he's in page Y, it displays the content number 2 and hides number 1. It works, but I would like to add a second URL to be checked.
My code is as follows:
jQuery(document).ready(function($){
var url = document.location.href;
if(url == "http://w.com/") {
$(".banner1").show();
$(".adsenselistingtop").show();
$("#leheaderbanner").hide();
$("#showhide-in-home").hide();
} else {
$(".banner1").hide();
$(".adsenselistingtop").hide();
$("#leheaderbanner").show();
$("#showhide-in-home").show();
}
});
I tried using something like this, but it didn't work:
if(url == "http://w.com/" && url == "http://w.com/index.php") {
Use OR instead of AND as the URL can be either of them.
if(url == "http://w.com/" || url == "http://w.com/index.php")
I am new at AJAX and JQuery and trying to use them in the part of my website. Basically the website that I have, has this kind of design and currently it is functional (Sorry for my poor paint work :)
The items in the website are created by user. This means item number is not constant but can be fetched by db query.
Each item has a unique URL and currently when you click an item, all page is refreshing. I want to change the system to let the user have a chance to navigate quickly between these items by only chaning middle content area as shown above. However I also want to have a unique URL to each item. I mean if the item has a name like "stack overflow", I want the item to have a URL kind of dev.com/#stack-overflow or similar.
I don't mind about the "#" that may come from AJAX.
In similar topics I have seen people hold constant names for items. For instance
<a href="#ajax"> but my items are not constant.
WHAT I HAVE TRIED
Whats my idea is; while fetching all item's links, I'm holding links in $link variable and using it in <a href="#<?php echo $link; ?>">.
Inside $link it is not actual URL. it is for instance a name like "stack-overflow" as I ve given example above. Until this part there is no problem.
PROBLEM
In this topic a friend suggested this kind of code as an idea and I ve changed it for my purpose.
<script>
$(document).ready(function() {
var router = {
"<?php echo $link ?> ": "http://localhost/ajax_tut/link_process.php"
};
$(window).on("hashchange", function() {
var route = router[location.hash];
if (route === undefined) {
return;
} else {
$(".content-right").load("" + route + " #ortadaki_baslik");
}
});
});
</script>
I'm trying to post the value of $link to the link_process.php and at link_process.php I will get the value of $link and arrange neccessary page content to show.
The questions are;
- How should I change this code to do that?
- I couldnt see someone doing similar to take as an example solve this
issue. Is this the right way to solve this situation?
- Do you guys have a better solution or suggestion for my case?
Thanks in advance.
WHEN your server side AJAX call handler [PHP script - handling AJAX requests at server side] is constant and you are passing item_id/link as GET parameter...
For example:
localhost/ajax_tut/link_process.php?item_id=stack-overflow OR
localhost/ajax_tut/link_process.php?item_id=stack-exchange
Then you can use following code.
<script>
$(document).ready(function() {
var ajax_handler = "localhost/ajax_tut/link_process.php?item_id=";
$(window).on("hashchange", function() {
var route = location.hash;
if (route === undefined) {
return;
} else {
route = route.slice(1); //Removing hash character
$(".content-right").load( ajax_handler + route );
}
});
});
</script>
WHEN you are passing item_id/link as URL part and not parameter...
For example:
localhost/ajax_tut/stack-overflow.php OR
localhost/ajax_tut/stack-exchange.php
Then you can use following code.
<script>
$(document).ready(function() {
var ajax_handler = "localhost/ajax_tut/";
$(window).on("hashchange", function() {
var route = location.hash;
if (route === undefined) {
return;
} else {
route = route.slice(1); //Removing hash character
$(".content-right").load( ajax_handler + route + ".php");
}
});
});
</script>
WHEN Your server side AJAX handler script url is not constant and varies for different items...
For example: localhost/ajax_tut/link_process.php?item_id=stack-overflow OR localhost/ajax_tut/fetch_item.php?item_id=stack-exchange OR localhost/ajax_tut/stack-exchange.php
Then I suggest to change PHP script which is generating item's links placed on left hand side.
<?php
foreach($links as $link){
// Make sure that you are populating route parameter correctly
echo '<a href="'.$link['item_id'].'" route="'.$link['full_ajax_handler_route_url_path'].'" >'.$link['title'].'</a>';
}
?>
Here is Javascript
<script>
$(document).ready(function() {
var ajax_handler = "localhost/ajax_tut/"; //Base url or path
$(window).on("hashchange", function() {
var route = location.hash;
if (route === undefined) {
return;
} else {
route = route.slice(1); //Removing hash character
route = $('a [href="'+.slice(1)+'"]').attr('route'); //Fetching ajax URL
$(".content-right").load( ajax_handler + route ); //Here you need to design your url based on need
}
});
});
</script>
This code is supposed to show/hide a text based on the page's url, but it's not working:
var pages = window.location.href;
if(pages == "page1.html"){
//display page 1 text
}
else if(pages == "page2.html"){
//display page 2 text
}
http://jsfiddle.net/yp8h2moe/1/
I tested it localy, didn't work, so I tested with jsfiddle, but unfortunately every time you save a jsfiddle, you get a new url.
UPDATE
Here is the updated code, I was able to run it specifying the file extention, but I need it to run with the url only:
<script>
var pages = window.location.href;
if( pages.split('/').pop() === 'http://akecheta.com/free-blogger-templates/' ) {
document.write('<b>Hello World 1</b>');
}
else if( pages.split('/').pop() === 'http://akecheta.com/free-blogger-templates/' ) {
document.write('<b>Hello World 2</b>');
}
</script>
THE SOLUTION
How can I insert HTML text in Javascript the right way?
The value of href is usually an absolute URL so you have to use .indexOf() as follows:
var pages = window.location.href;
if(pages.indexOf("page1.html") > -1){
//display page 1 text
}
else if(pages.indexOf("page2.html") > -1 ){
//display page 2 text
}
Alternatively you could use .split() and .pop(), assuming your urls do not have query strings:
if( pages.split('/').pop() === 'page1.html' ) {
//...
UPDATE
When using absolute URLs or larger parts thereof, you do not need to use .split() and .pop(). Bear in mind that split creates an array whereas pop obtains the last element of that array. You won't be needing this process with absolute URLs.
var pages = window.location.href;
if( pages.indexOf( 'http://akecheta.com/free-blogger-templates/' ) > -1 ) {
document.write('<b>Hello World 1</b>');
}
else if( pages.indexOf( 'http://akecheta.com/free-blogger-templates/xx' ) > -1 ) {
document.write('<b>Hello World 2</b>');
}
It doesn't work because in your jsfiddle var pages is "http://fiddle.jshell.net/_display/ "
try to console.log it and make sure to trim it too if it is needed..
In your case for page1.html etc.. you have to compare it to the full/absolute path
If your URL is http://wwww.example.com/page1.html, then you need the URL path. So, code will look something like below
var pages = location.pathname;
if(pages == "/page1.html"){
//display page 1 text
}
else if(pages == "/page2.html"){
//display page 2 text
}
I'm trying to set up a website that loads pages through ajax calls replacing the current contents of with the ajax response. I'm putting a # and a page name at the end of my URLs so that people can book mark pages.
www.examplesite.com#home
www.examplesite.com#examples
www.examplesite.com#examples/example1
www.examplesite.com#examples/example2
I'm new to jQuery and to a lesser extent JavaScript but I'm trying to get a different page animation when I go to a page that is stored in a sub folder. fadeIn() works fine on both pages and pages in sub-folders however I can't get .slideDown() or .animate() to work at all. Here is an extract from my code:
<script>
//All pages are stored in a folder called 'pages' or a subfolder of 'pages'
$(document).ready(function(){
var myUrl = $(location).attr('href');
var noPage = myUrl.indexOf('#');
if(noPage == -1) {
location.hash = 'home';
}
window.onhashchange = function() {
pageChange();
}
function pageChange() {
var myUrl = $(location).attr('href');
var page = myUrl.substring(myUrl.indexOf('#') + 1, myUrl.length);
$.get('pages/' + page + '.html', function(pageHtml) {
if (page.indexOf('/') != -1) {
$('.main').hide().html(pageHtml).slideDown(400);
} else {
$('.main').hide().html(pageHtml).fadeIn(400);
}
});
};
pageChange();
});
</script>
If I'm approaching this from completely the wrong direction and that's why it's not working do feel free to point me in the correct direction by giving me an example of how it should work.
Got it!
I was using the css min-height property with a couple of my divs so that the page would expand automatically with the content if there was a lot on the page. If I remove the min-height property and replace it with a fixed height .slideDown() works fine.
Here are some links for more info if anyone else has the same issue:
http://www.only10types.com/2011/09/jquery-slidedown-doesnt-work-on.html
http://docs.jquery.com/Tutorials:Getting_Around_The_Minimum_Height_Glitch
I would take this...
if (page.indexOf('/') != -1) {
$('.main').hide().html(pageHtml).slideDown(400);
} else {
$('.main').hide().html(pageHtml).fadeIn(400);
}
And rearrange it to make sure your if statement is correct
if (page.indexOf('/') != -1) {
$('.main').hide().html(pageHtml).fadeIn(400);
} else {
$('.main').hide().html(pageHtml).slideDown(400);
}
If it now slides instead of fades, the if statement is corrupt
What about this ? Does this work ?
var main_div=$('.main');
main_div.hide();
$.get('pages/' + page + '.html', function(pageHtml) {
if (page.indexOf('/') != -1) {
main_div.html(pageHtml)
} else {
main_div.html(pageHtml)
}
});
main_div.slideDown(400);
maybe something in the CSS must be blocking it ? try disabling the CSS for the main class and try again ?
I am not looking for a simple redirect.
What I am trying to do is this.
Person A loads site BOB.com and clicks a link to page X.
Person B loads site TIM.com and clicks a link to the same page X.
Page X has a javascript command on it that says, If user came from site Bob.com then redirect to Bob.com/hello.
If user came from TIM.com then redirect to Tim.com/hello.
If user didnt come from ether then redirect to Frank.com/opps.
This page X is going to handle 404 errors for multiple domains so it will need to ONLY look at the domain name upto ".com". It should ignore everything past the ".com".
This is the script I started with.
<script type='text/javascript'>
var d = new String(window.location.host);
var p = new String(window.location.pathname);
var u = "http://" + d + p;
if ((u.indexOf("bob.com") == -1) && (u.indexOf("tim.com") == -1))
{
u = u.replace(location.host,"bob.com/hello");
window.location = u;
}
</script>
Use document.referrer
if(/http:\/\/(www\.)?bob\.com/.test(document.referrer)) {
window.location = "http://bob.com/hello";
}
else if(/http:\/\/(www\.)?tim\.com/.test(document.referrer)) {
window.location = "http://tim.com/hello";
}
else {
window.location = "http://frank.com/oops";
}
Instead of the regex, you can use indexOf like you did initially, but that would also match thisisthewrongbob.com and thisisthewrongtim.com; the regex is more robust.
document.referrer is the place to be
Use document.referrer to find where the user came from.
The updated code is
<script type='text/javascript'>
var ref = document.referrer,
host = ref.split('/')[2],
regexp = /(www\.)?(bob|tim).com$/,
match = host.match(regexp);
if(ref && !regexp.test(location.host)) {
/* Redirect only if the user landed on this page clicking on a link and
if the user is not visiting from bob.com/tim.com */
if (match) {
ref = ref.replace("http://" + match.shift() +"/hello");
} else {
ref = 'http://frank.com/oops';
}
window.location = ref;
}
</script>
working example (it displays a message rather than redirecting)