Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • May 16 22:15
    gilbertoayala12 closed #6482
  • May 16 17:47
    kuza2010 closed #6667
  • May 16 17:47
    kuza2010 commented #6667
  • May 16 11:40
    LoganTann commented #6667
  • May 16 11:35
    LoganTann commented #6662
  • May 16 11:34
    LoganTann commented #6661
  • May 01 17:14

    acburst on gh-pages

    Patreon may (compare)

  • Apr 27 01:44
    ValmorMoreira commented on 824e782
  • Apr 20 10:51
    nomuna commented #6638
  • Apr 19 20:59
    jshster commented #4070
  • Apr 19 16:57
    jemedina112 commented #4070
  • Apr 17 18:37
    Baraw commented #3397
  • Apr 16 22:42
    jshster commented #6638
  • Apr 16 21:41
    nomuna commented #6638
  • Apr 15 18:53
    nomuna commented #6638
  • Apr 12 10:13
    jshster commented #6633
  • Apr 12 08:35
    JohnSundarraj commented #6633
  • Apr 07 04:37
    Posandu commented #6615
  • Apr 07 04:33
    Posandu commented #6441
  • Apr 07 04:33
    Posandu commented #6441
Sean Doherty
@doughballs
Listen for the key up on that specific input, if it’s enter, grab the value and do your thing.
Chuck McKnight
@cmcknight
Hmm, thought I tried that. Lemme try it again...
Sees all of the keyup but not the enter and then forces an empty query string in the location. :-/
Code:
const searchField = document.getElementById('search')

if (searchField !== null && searchField !== undefined) {
  searchField.addEventListener("keyup", (e) => {
    e.preventDefault()
    console.log(e);
    if (e.key === 13) console.log('Hit Enter');

  })
}
Chuck McKnight
@cmcknight
Yeah, right. Now the events work, but now I'm curious why the value of the input field isn't automatically put into the query string if it's going to force a query string after the location. 🤔
Chuck McKnight
@cmcknight

OK, trying a simplified test.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@materializecss/materialize@1.1.0-alpha/dist/css/materialize.min.css">

  <title>Document</title>
</head>

<nav>
  <div class="nav-wrapper">
    <form>
      <div class="input-field">
        <input id="search" type="search" required>
        <label class="label-icon" for="search"><i class="material-icons">search</i></label>
        <i class="material-icons">close</i>
      </div>
    </form>
  </div>
</nav>

<body>

  <script src="https://cdn.jsdelivr.net/npm/@materializecss/materialize@1.1.0-alpha/dist/js/materialize.min.js"></script>
  <script src="js/scripts.js"></script>
</body>

</html>

Javscript:

const sb = document.getElementById('search')
sb.addEventListener('change', (e) => {
  e.preventDefault()

  let parms = e.target.value
  window.location.href = 'https://google.com'
})

I also tried:

window.location.assign('https://google.com')

Maybe it's the sleep deprivation, but I thought that should cause a redirect to the Google home page...

But it doesn't...

Missing an if statement after the let is declared too.
And you’re missing semi colons after most statements. In any custom js I write I use console.log() after every new thing, see which piece is working/breaking down.
Edi Septriyanto
@joglomedia
Hi there,
Any Materialize component for Svelte?
Chuck McKnight
@cmcknight

@doughballs

https://stackoverflow.com/questions/5999118/how-can-i-add-or-update-a-query-string-parameter

Thanks for the articles. I don't think it's the lack of semi-colons that causing the issue. :-)

Chuck McKnight
@cmcknight
More fascinating is that if I move the window.location.href = 'https://google.com' or window.location.assign('https://google.com') outside of the event listener then the browser loads that page correctly.
Chuck McKnight
@cmcknight

I'm suspicious now. I stripped the form tags out:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
  <title>Document</title>

  <style>
    .search-bar {
      position: relative;
      margin: 0 auto;
      width: 60%;
    }

    input {
      width: 100%;
      height: 1.6rem;
    }

    .fa-search, .fa-times {
      position: absolute;
      padding-top: .35rem;
    }

    .fa-search {
      padding-left: .25rem;
    }

    .fa-times {
      padding-right: .25rem;
    }
  </style>
</head>

<body>
  <div class="search-bar">
    <input id="search" type="search">
    <i class="fas fa-search"></i>
    <i class="fas fa-times"></i>
  </div>

  <script>
    const sb = document.getElementById('search');
    if (sb !== null && sb !== undefined) {
      sb.addEventListener('change', (e) => {
        e.preventDefault();

        console.log(`change event`);
        window.location.href = 'https://google.com';
        // window.location.assign('https://google.com');
      });
    }
  </script>
</body>

</html>

and it works...

Chuck McKnight
@cmcknight
Hmm, so something in the form seems to be preventing the page from being changed...
Sean Doherty
@doughballs
That if statement looks in the wrong place to me. It should be inside the event listener.
Chuck McKnight
@cmcknight
Nah, it's boilerplate to ensure that I don't assign the eventListener if the object doesn't exist. :grin:
Sean Doherty
@doughballs
Ah. Of course.
Chuck McKnight
@cmcknight
Hmm, so somehow when the change event is triggered on the input the form seems to be doing something to intercept the attempted location change...
Chuck McKnight
@cmcknight

Okay, now I feel really dumb. The event that I need to be looking for is the search event:

      sb.addEventListener('search', (e) => {
        console.log('Search: Go to Google!')
        window.location.href = 'https://google.com'
      })

That being said, it's always these little side journeys that are the most educational! :laughing:

Sean Doherty
@doughballs
No way. So you be could use a standard text input and still use change? Learn something new every day!
Chuck McKnight
@cmcknight
That's what keeps life interesting! :grinning:
mksuji
@mksuji:matrix.org
[m]
hey guys just had an inquiry...was implementing some script tags from the Materialize library but when i execute the code it doesn't show the functionalities that i wanted(slider and Nav bar)...here's the sample of the script tags;
//sidenav
const sideNav=document.querySelector ('.sidenav');
 M.sidenav.init(sideNav,{}); 
 //slider
 const slider = document.querySelector('.slider');
M.Slider.init(slider, {
    indicators: false,
    height: 500,
    transition: 500,
     interval: 6000
  });

  </script>
</body>
jake alex
@jakealex:matrix.org
[m]
hello if there is anyone can help me
SeCrEt BoY™
@khanh-nt
Hello, I have something wrong with textarea

<textarea id="test">some long string</textarea>

<label class="active" for="test">Test Textarea</label>
"some long string" will show in text area with extra spaces >>> " some long string "

anyone have the same problem?
SeCrEt BoY™
@khanh-nt

Found the solution for my issue:
My code:

<textarea id="test">
some long string
</textarea>
<label for="test" class="active">Test Textarea</label>

And it should be:

<textarea id="test">some long string</textarea> <!--In the same line-->
<label for="test" class="active">Test Textarea</label>
Excuse me. Is there any wysiwyg editor suit with Materialize?
yolandaglez
@yolandaglez
Hi everyone! I'm using the carousel only for mobile and tablet views and want to know if there is a way to set as active the first item instead of the one in the center. The items surrounding the one in the center are cut off and I prefer to have the first one fully visible. Thanks!
Dancul
@lajk5

Hello. I'm quite new to coding.. I'm getting error when compiling materialize.scss to css .... I have visual studio code and installed sass npm install -g sass

then in terminal: sass materialize.scss output.css and then I get error: /* Error: Can't find stylesheet to import.

Sean Doherty
@doughballs
@lajk5 if you’re using VsCode just get the sass extension. No need to use terminal, it compiles on save. The author is ritwick dey (I think)
Dancul
@lajk5
Still getting errors when compiling. Looks to me something is missing in materialize scss files package. Can you try if it is working for you? /* Error: Can't find stylesheet to import. is what I got in css compiled file
Chuck McKnight
@cmcknight

@doughballs

@lajk5 if you’re using VsCode just get the sass extension. No need to use terminal, it compiles on save. The author is ritwick dey (I think)

Which SASS extension? There are many. :joy:

Sean Doherty
@doughballs
@cmcknight the one by ritwick dey, as I mentioned 🙂
Chuck McKnight
@cmcknight
Ah, I thought you were replying to some. :joy:
This message was deleted
@doughballs Wish me luck, I'm playing with service workers and caches today.
Sean Doherty
@doughballs
@cmcknight nice, report back if you find something simple/working, I’ve never looked into it!
Chuck McKnight
@cmcknight
I've got something "relatively" simple, just doing a lot of testing today. There's a nice YouTube playlist here https://www.youtube.com/playlist?list=PLyuRouwmQCjl4iJgjH3i61tkqauM-NTGj
The only thing he leaves out seems to be the error handling for a promise, but that's pretty straightforward to do.
Guilherme Garcia
@guilegarcia
Hi, I would like to know if there are plans to update the materializecss project or has it been discontinued?
Chuck McKnight
@cmcknight
@guilegarcia It's been forked on Github http://github.com/materializecss/materialize. There's a 1.1.0-alpha branch that is currently being worked on. The 1.1 Gitter is https://gitter.im/materializecss/materialize.
Dero Kratzberg
@verdammte

I'm getting back into web development after several years and I'm running into issues just getting things set up right. I'm trying to initialize a modal with jQuery, but I'm getting an error that "$" isn't found. I added the jquery cdn and that fixed the inability to load jQuery, but then it can't find the modal function. I've downloaded the zip from materialize and included the materialize js and css. The css works, but I'm thinking that the js is supposed to include jQuery, but I'm rally not sure. I've forgotten so much of this.

What do I need to do to get the jQuery for modals working again?

Sean Doherty
@doughballs
Did you Include jQuery first?
Anthony Leonardi
@AJLeonardi
@verdammte a jsfiddle would be very helpful for this. the exercise of trimming down your code might help you figure it out too. https://jsfiddle.net/
kuruczp
@kuruczp
Hi guys, can someone please help me? I'm trying to use a select field. However, when I try to listen to the change event and get the selected value, the instance.getSelectedValues(); returns the previous selection and not the current one. How to get the current selected value of the field with JS?
kuruczp
@kuruczp
@Dogfalo can you check that out please?