Isotope is not defined

See also questions close to this topic

• how to change prettier format for react native

  my code formatting prettier didn't works well for react native, i don't understand where to config it but it works well with flutter

  from this code

        import { View, Text } from 'react-native'
      
      import React from 'react'
      
      export default function App() {
        return (
          <View>
      
      <Text>Apps</Text>   
  </View>
        )
      }
  

  it's formatted to this

  import {
    View,
    Text
  } from 'react-native'
  
  import React from 'react'
  
  export default function App() {
    return ( <
      View >
  
      <
      Text > Apps < /Text>
  
  
      <
      /View>
    )
  }
  
• MarkLogic server-side JavaScript and XQuery

  I am just starting using NoSQL MarkLogic DB and trying to choose for me the best query language to learn and use in future. On server side MarkLogic provides the possibility to use JavaScript API or XQuery API.

  I want to receive an advice. Which language is better to concentrate on and learn? JavaScript or XQuery?
• Popover in chrome extension using js

  My goal is I want to create a chrome extension like Toucan Extension. I want to highlight some paragraphs in random site then translate it to specific language. The problem is I do not have an idea on how to implement a popover in chrome extension like in the picture below.

  
• Isotope - Dropdown filter + tag 'clone' for delete 'data-filter'
  
  I modified an isotope filter to work with the dropdown menu and a prototype of "tag" capable of eliminating data-filter on multiple data-filter-group.

  <!--Filter button dropdown-->
  <li class="location location-nav">
      <div class="dropdown space-dropdown">
          <div class="filterstyle filterstyle-text dropdown-toggle button-topnav btn-select" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">location</div>
              <div class="dropdown-menu" id="location" aria-labelledby="dropdownMenuButton">
                  <div class="option-combo location" id="location">
                      <div class="filter option-set button-group" data-filter-group="location">
                          <a class="dropdown-item filter-dropdown">
                              <button class="button all is-checked" data-filter="">Cancella</button>
                          </a>
                          <a class="dropdown-item filter-dropdown">
                              <button class="button location spiaggia" data-filter=".spiaggia">Spiaggia</button>
                          </a>
                          <a class="dropdown-item filter-dropdown">
                              <button class="button location mare" data-filter=".mare">Mare</button>
                          </a>
                          <a class="dropdown-item filter-dropdown">
                              <button class="button location fiume-lago" data-filter=".fiume-lago">Fiume Laghetto</button>
                          </a>
                          <a class="dropdown-item filter-dropdown">
                              <button class="button location fiume-lago" data-filter=".piccolo-laghetto">Laghetto</button>
                          </a>
                      </div>
                  </div>
            </div>
      </div>
  </li>
  

  <p id="filter-display">
    <button class="button location spiaggia active clone" data-filter=".spiaggia" id="clone1">Spiaggia</button>
  <a onclick="clearAll();" id="reset-filters" class="pull-right filter-btn">Cancella tutto</a><span class="filter-label data-counter pull-right">&nbsp;</span></p>
  

  Thats' the problem:

  • If i click on "tag" the url hash does not automatically update to delete the data-filter
  • The label of "tag" don't update correctly:
  • All elements must be dynamic, if I click on the dropdown or on a "tag" it changes automatically
  • Possibility to insert extra filters after we add the editing

  This is my code
  https://jsfiddle.net/marcogattoo/54jeybL2/4/

  Optimal situation:
  I make click on dropdown > The tag is active.
  I make click on tag > The tag is delete and "data-filter" and url-hash is clear.
  I make click on dropdown (another voice is already active) > Only one selected is active from goup of data-filter-group

  Can anyone tell me how to integrate and make these implementations work?
• isotope: with a 2-column layout, how can I have the first one wider than the second one?

  I want to set the width of the first column 33% while the second one 66%, like this: https://i.stack.imgur.com/WleQq.png

  Is this possible with Isotope or another grid library?

  I have tried to do this:

  <div class="grid">
      <div class="grid-sizer"></div>
      // FOR ITERATOR
             <article class="grid-item <?php
             if ($i & 1) {
                 echo 'grid-item--width2';
             }
             ?>">
             //content
             </article>
      <?php $i++; ?>
      //END FOR
  </div>
  

  CSS:

  .grid-sizer, .grid-item { width: calc(100% / 3); }
  .grid-item--width2 { width: calc((100% / 3)*2); }
  

  JS:

            $('.grid').isotope({
              itemSelector: '.grid-item',
              percentPosition: true,
              masonry: {
                // use outer width of grid-sizer for columnWidth
                columnWidth: '.grid-sizer'
              }
            })
  

  Thanks in advance.