78763

Display #anchor instead of index in URL, with jQuery Cycle

Question:

To be Google friendly, I want to change this script a little bit.

I have a one page layout, where I use jQuery Cycle to animate between content. The script, as it is now, displays the current slide's number in the URL. Ex. "index.html#1" or "index.html#4". It looks horrible and I think Google would think too... ;-)

I want it to display the divs #anchor instead of its index, so the url would be "index.html#Projects" instead

<strong>The HTML menu:</strong>

<div id="menu"> <ul> <li><a href="#About">About</a></li> <li><a href="#Projects">Projects</a></li> <li><a href="#Learning">Learning</a></li> </ul> </div>

<strong>The script:</strong>

//Set .active to current page link var url = location.hash.slice(1); if (url < 1 ) { $("#menu li:nth-child(" + ( location.hash.slice(1) - 1 ) + ") a ").addClass("active"); } //Slide effect $('#logo').click(function() { $('.slideshow').cycle(0); return false; }); $('#menu li a').click(function() { $('.slideshow').cycle($(this).parent().index()+1); return false; }); $('.slideshow').cycle('pause'); var index = 0, hash = window.location.hash; if (hash) { index = /\d+/.exec(hash)[0]; index = (parseInt(index) || 1) - 1; // slides are zero-based } $('.slideshow').cycle({ fx: 'blindY', // choose your transition type, ex: fade, scrollUp, shuffle, etc... speed: 700, startingSlide: index, cleartype: 1, timeout: 3000, after: function(curr,next,opts) { window.location.hash = opts.currSlide + 1; } });

Is it possible to make it display the divs #anchor instead of its index?

Thank you in advance... :-)

Answer1:

The easiest way is to change the line of code :

window.location.hash = opts.currSlide + 1;

to:

window.location.hash = opts.currSlide + 1 + ': ' + $("#menu li:nth-child(" + (opts.currSlide + 1) + ") a ").attr('href');

This will proce a URL like: http://www..........#1: #Projects. You will then have to go through the rest of the code where you use the hash and strip this last bit off before you use the remainder e.g.

hash = window.location.hash.replace(/:[^0-9] .*$/, '');

Regards Neil

Answer2:

Make it so after or before each slide it has a callback with the Cycle

So After: Onafter,

function Onafter() { window.location.hash = this.hash; }

Recommend

  • JQuery Add class to certain list item
  • Jquery Show & ScrollTop (or ScrollTo)
  • Function JavaScript : on Menu CSS HTML
  • Can't delete li from to-do list
  • Cut the background to expose the layer below
  • Simulate click Geckofx vb,net
  • How do I pass the string value parameter of the selected list item from an auto-populated dropdown l
  • Jquery UI tool tip close icon
  • FileReader+canvas image loading problem
  • Using jQuery closest() method with class selector
  • Insert into database using onclick function
  • Deselecting radio buttons while keeping the View Model in synch
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • HTML download movie download link
  • VS2008 Enable C++ Exception with SEH
  • Why doesn't :active or :focus work on text links in webkit? (safari & chrome)
  • Release, debug version and Authorization Google?
  • Websockets service method fails during R startup
  • Alternatives to the OPTIONAL fallback SPARQL pattern?
  • Jquery - Jquery Wysiwyg return html as a string
  • How to get next/previous record number?
  • Why winpcap requires both .lib and .dll to run?
  • Apache 2.4 - remove | delete | uninstall
  • How to delete a row from a dynamic generate table using jquery?
  • json Serialization in asp
  • Rails 2: use form_for to build a form covering multiple objects of the same class
  • Proper way to use connect-multiparty with express.js?
  • Load html files in TinyMce
  • Trying to get generic when generic is not available
  • embed rChart in Markdown
  • How to stop GridView from loading again when I press back button?
  • How to get Windows thread pool to call class member function?
  • IndexOutOfRangeException on multidimensional array despite using GetLength check
  • JaxB to read class hierarchy
  • costura.fody for a dll that references another dll
  • Observable and ngFor in Angular 2
  • How to Embed XSL into XML
  • UserPrincipal.Current returns apppool on IIS
  • Conditional In-Line CSS for IE and Others?
  • java string with new operator and a literal