Databases
StackOverflow2013
Postsdbo
POUpdate Bootstrap Carousel based on window.location.hash
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POUpdate Bootstrap Carousel based on window.location.hash
    primarykey
    data
    text
    <p>The code below updates the hash based on the carousel slide - I'm looking to update the slide based on the hash. The question explains it pretty well.</p> <p>There's a great way to update the window.location.hash onslide</p> <pre><code>var url = document.location.toString(); if (url.match('#')) { // Clear active item $('#my-carousel-id .carousel-inner .item.active').removeClass('active'); // Activate item number #hash $('.carousel-inner div:nth-child(' + url.split('#')[1] + ')').addClass('active'); } $('#my-carousel-id').bind('slid', function (e) { // Update location based on slide (index is 0-based) window.location.hash = "#"+ parseInt($('#my-carousel-id .carousel-inner .item.active').index()+1); }); </code></pre> <p>This is from: <a href="http://www.ozmonet.com/2013/01/08/tweaking-the-bootstrap-carousel/" rel="nofollow">http://www.ozmonet.com/2013/01/08/tweaking-the-bootstrap-carousel/</a> Here is his example: <a href="http://www.ozmonet.com/photography/" rel="nofollow">http://www.ozmonet.com/photography/</a></p> <p><strong>However</strong></p> <p>I would like to update this code to listen for the hash change and update the carousel. </p> <p>Here is a good reference: <a href="https://developers.google.com/tv/web/articles/location-hash-navigation#detect-loc-hash" rel="nofollow">https://developers.google.com/tv/web/articles/location-hash-navigation#detect-loc-hash</a></p> <p>The purpose of this is to take the existing code, and get it to work with the browsers back button. </p> <p>You'll notice with the demo I linked to ( <a href="http://www.ozmonet.com/photography/" rel="nofollow">http://www.ozmonet.com/photography/</a> ) that the back button updates the hash; however, it just needs to update the carousel. </p> <p>This should be a solution that get's a lot of use for a lot of people as the use potential for this is huge. </p> <p><strong>Update: Solution works in fiddle...</strong></p> <p>Yes, I had a comment party below. </p> <p>But, it looks like I may have solved it. <a href="http://jsfiddle.net/pcarguy/Pd4rv/" rel="nofollow">http://jsfiddle.net/pcarguy/Pd4rv/</a></p> <p>The full code is: </p> <pre><code>// invoke the carousel $('#myCarousel').carousel({ interval: false }); var url = document.location.toString(); if (url.match('#')) { // Clear active item $('.carousel-inner div').removeClass('active'); // Activate item number #hash var index = url.split('#')[1]; $('.carousel-inner div:nth-child(' + index + ')').addClass('active'); } $('#myCarousel').bind('slid', function (e) { // Update location based on slide (index is 0-based) var item = $('#myCarousel .carousel-inner .item.active'); window.location.hash = "#"+parseInt(item.index()+1); }) $(window).bind( 'hashchange', function(e) { var item = $('#myCarousel .carousel-inner .item.active'); window.location.hash = "#"+parseInt(item.index()+1); }) </code></pre> <p><strong>Update: Doesn't work</strong></p> <p>Still waiting on an answer I guess!</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USLawrence Black
    1. USLawrence Black
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. COFound a potentially good resource - it's for BS tabs and not BS carousel, but it accomplishes this for tabs https://gist.github.com/badsyntax/2875426
      singulars
      1. POUpdate Bootstrap Carousel based on window.location.hash
      1. USLawrence Black
    2. CONoticed that both the google developer page I referenced and the link in the comment above use: `$(window).bind( 'hashchange', function(e) {`
      singulars
      1. POUpdate Bootstrap Carousel based on window.location.hash
      1. USLawrence Black
    3. COHere is another solution for Tabs - but not carousel http://jqueryfordesigners.com/enabling-the-back-button/
      singulars
      1. POUpdate Bootstrap Carousel based on window.location.hash
      1. USLawrence Black
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload