CODEWITHSUNDEEP
jqueryurl-parameters
Cress
Cress

Reputation: 65

how to change URL parameters to stop an image reloading

I have an image which I only want to load one time only on the homepage, accessed via my intro page (it fades away, on load, a kind of visual echo from my intro page). I dont want the image to appear on the homepage on subsequent views, after clicking the 'home'in the nav bar .

I've been advised to either set a cookie, or use URL parameters "to designate whether to fade the image or not"(set /index?nofade=true). I wish to try the latter, as not everyone enables cookies.

Thing is, after spending a day trawling the net, I dont know how to do either, (blushes).

Can anyone help me? I'm new to coding, so am uncertain how to write/enclose the 'no fade true' bit, I'm using jquery.

Upvotes: 1

Views: 397

Answers (3)

Pastor Bones
Pastor Bones

Reputation: 7361

You can parse the parameters of the url with javascript easily, then check if that particular 'nofade' param exists (or any other) and fade your image if it does

$(function(){
  // Grab our url parameters and split them into groups
  var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
  // assign parameters to our object
  var params = {};
  for(var i = 0; i < hashes.length; i++){
    var hash = hashes[i].split('=');
    params[hash[0]] = hash[1];
  }
  // Now params contains your url parameters in an object
  if(typeof(params['nofade']) === 'undefined' || !params[nofade]){
    // Perform image fade here

  }
})

Upvotes: 2

mhps
mhps

Reputation: 166

If i understand correctly you want for when someone visits your page http://www.example.com for your logo to be there everytime they visit that page and then have to click on your logo to enter and be taken to http://www.example.com/homepage.php where your logo will fade out.

But if they subsequently reload your page you want the logo to not be there? Is that correct.

If so, you just need to set the href on your logo to "homepage.php?fade=true". Then you can grab that passed variable and do an if statement to see if you should just reload the page or show them the fade out.

Upvotes: 1

idrumgood
idrumgood

Reputation: 4934

You can just add a check to see if that query string was set before your code to fade the image.

function getQuerystring(key, defaultVal) {
    if (defaultVal == null) {
        defaultVal = "";
    }
    key = key.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
    var regex = new RegExp("[\\?&]" + key + "=([^&#]*)");
    var qs = regex.exec(window.location.href);
    if (qs == null) {
        return defaultVal;
    }
    else {
        return qs[1];
    }
}

if(getQuerystring('nofade') == 'true'){
    //do your fading
}

the function uses a regular expression to parse out the query string you pass it and return its value with an optionally set default if that query string is not found

Upvotes: 1

Related Questions