Member Avatar for Albert Pinto

Hi People.........

I've got some weird issue....

I have 2 sliders... one is a timeline...with previous and next links... when I click next link the new contents gets displayed and the older content gets slided to left...

Another slider is having a set of images which just slide... when I click on any particular image, its gets expanded (I mean some sort of overlay effect). Now at this point of time my url changes, some sort of id value gets passed in the url.

And now when I try to click on Previous and Next links of the above slider, they just don't work.... I mean they do work when the url is proper(with no id being passed or displayed i url)

I hope I'm clear with my query...

Thing is that I want to know, how to avoid the id of the image being getting passed in the url when I click on that image in the slider.

Its like say, the url is http://127.0.0.1/xyz/

and after clicking the image of the below slider, the url turns as... http://127.0.0.1/xyz/#!/-1/

how to avoid that #!/-1/ being getting passed in url.

Thanx for any reply.

Regards

  • 3 Contributors
  • 5 Replies
  • 126 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Albert Pinto

Dani AI

Generated

Clicking an image overlay changes the URL to include a fragment (the "#!/...") and after that the timeline's previous/next stops working until a reload. already reported the controls work before any gallery click and come back after refresh. Two common root causes fit that behaviour: (A) the overlay/gallery code is intentionally changing the location (hash or history) and that change interferes with navigation handlers, or (B) the gallery alters DOM or event bindings (replacing nodes or clobbering globals) so the timeline's handlers no longer run.

Quick diagnostic checklist

  • Search scripts for code that touches the URL or history (look for uses of location.hash, location.replace, pushState, or onhashchange).
  • Inspect event listeners with browser DevTools (Chrome: getEventListeners(el); with jQuery: $._data(element, "events")) for the timeline controls before and after opening the overlay.
  • Watch the DOM when the overlay opens: confirm the timeline elements are not being removed/recreated.
  • Confirm there are no global variable or ID selector collisions between the two widgets.

Concrete, non-invasive fixes

  • Prevent the overlay from changing the URL, or stop the default anchor behaviour and open the overlay programmatically:
    document.querySelectorAll('.overlay-trigger').forEach(function(el){
el.addEventListener('click', function(e){
  e.preventDefault();
  openOverlayFor(el.dataset.item);
});
});
  • If the overlay must update the hash for back-button support, remove it immediately after open using history API:
    if (history.replaceState) {
history.replaceState(null, '', window.location.pathname + window.location.search);
} else {
window.location.hash = '';
}
  • Make the timeline handlers resilient: bind with delegation on a persistent container and use namespaced events so handlers survive DOM churn and are easy to remove:
    $('#timelineContainer').on('click.timeline', '.nav-next', function(e){
e.preventDefault();
advanceTimeline();
});

Notes and context
's suggestion to inspect the click handlers is spot on — trace what runs on the gallery click. 's advice about using a well-maintained slider/plugin is also valid when custom code becomes hard to isolate. Removing the hash can break intended back-button behaviour, so prefer disabling history in the overlay's options (if available) or using replaceState rather than bluntly clearing history.

Recommended Answers

All 5 Replies

Member Avatar for JorgeM

You need to focus on the code that executes when you click on the image. Look for an "onclick" event, or if this is written in asp.net, look for an event in the script code section, or code behind.

This sounds like where the link URL is being created.

Member Avatar for Albert Pinto

Thanx Jorge for your reply.... I removed the code where the id was getting passed... but still the prev and next buttons won't work of the top slider.... It works before I click any image from the below slider...

Member Avatar for drjohn

Are you using a slider you wrote yourself, or one you found on the internet?
There are many reliable jQuery sliders which are free to use, as well as some for sale.

try one of these

or these

Member Avatar for JorgeM

Ok, the next step is to figure out how the prev/next links are getting assigned the src URL information. have you checked your server side scripting code (php, asp.net, asp, etc...)?

Member Avatar for Albert Pinto

I'm passing id prev and next for both the links...

Its like.........

<a href="#" id="next">+</a>
<a href="#" id="prev">-</a>

these ids are read in jquery.timelinr-0.9.5.js file...

I found that prev and next variables are also present in my second slider files.... Is it clashing with that...?

I renamed those things as prevslide and nextslide... in all places, ........my .js files, .php file and css file also....

But still it doesn't make any difference......

The timeline slider links (previous and Next ) Start working once i refresh the page.... but i wanted to it to be functional without page refresh... I mean I can't tell the user to refresh every time to make it work....

Thanx for your reply Jorge and drjohn.......

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.