Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
  • Aug 17 09:32
    User @bjorno43 unbanned @linkin-park
  • Jun 20 21:19
    @bjorno43 banned @shenerd140
  • Apr 25 17:13
    @mstellaluna banned @cmal
  • Jan 08 22:05
    @mstellaluna banned @dertiuss323
  • Nov 07 2018 04:42
    User @texas2010 unbanned @ows-ali
  • Nov 02 2018 16:25
    @texas2010 banned @ows-ali
  • Oct 12 2018 05:50
    @bjorno43 banned @NACH74
  • Oct 05 2018 23:02
    @mstellaluna banned @JomoPipi
  • Sep 16 2018 12:21
    @bjorno43 banned @yash-kedia
  • Sep 16 2018 12:16
    @bjorno43 banned @vnikifirov
  • Sep 05 2018 08:12
    User @bjorno43 unbanned @androuino
  • Sep 05 2018 07:38
    @bjorno43 banned @androuino
  • Aug 23 2018 16:57
    User @bjorno43 unbanned @rahuldkjain
  • Aug 23 2018 16:23
    @bjorno43 banned @rahuldkjain
  • Jul 29 2018 14:13
    User @bjorno43 unbanned @jkyereh
  • Jul 29 2018 01:00
    @bjorno43 banned @jkyereh
  • Jul 10 2018 22:09
    @bjorno43 banned @manafn
  • Jul 06 2018 15:20
    @texas2010 banned @imlegend19
  • Jul 03 2018 12:28
    @bjorno43 banned @vbvmatta
  • Jun 29 2018 13:54
    @bjorno43 banned @OGTechnoBoy
Kingsley
@Kingwindie
i can't remember how to format the markdown thing
function showMenu() {
    var dropMenu = document.getElementsByClassName("dropMenu");
    dropMenu.style.display = "block";
}

function hideMenu() {
    var dropMenu = document.getElementsByClassName("dropMenu");
    dropMenu.style.display = "none";
}

var dropBtn = document.getElementById("dropBtn");
dropBtn.addEventListener("mouseover", showMenu);

dropBtn = document.getElementById("dropBtn");
dropBtn.addEventListener("mouseout", hideMenu);
Markus Kiili
@Masd925
@Kingwindie One problem that I saw is that getElementsByClassName returns an array-like HTMLCollection, and you are using its style property:
Kingsley
@Kingwindie
so it say's document is not defined
Markus Kiili
@Masd925
var dropMenu = document.getElementsByClassName("dropMenu");
dropMenu.style.display = "none";
DOM elements are elements of that array-like object.
Kingsley
@Kingwindie
  <li id="dropBtn">
                <a href="kco_3_buying.htm">Buying Tips &#9662</a>
                <ul class="dropMenu">
                    <li>
                        <a href="#tip1">First time buyers</a>
                    </li>
                    <li>
                        <a href="#tip2">The Size Of Your Wallet</a>
                    </li>
                    <li>
                        <a href="#tip3">Your Terrain Preference</a>
                    </li>
                    <li>
                        <a href="#tip4">Gearing Up To Ride</a>
                    </li>
                    <li>
                        <a href="#tip5">Size Matters</a>
                    </li>
                    <li>
                        <a href="#tip6">Materials That Matter</a>
                    </li>
                    <li>
                        <a href="#tip7">The Best Brands</a>
                    </li>
                    <li>
                        <a href="#tip8">Test It</a>
                    </li>
                </ul>


            </li>
Ian
@toianw
@PatrickMoumiet [858] > [1001] will become "858" > "1001" which is true. The javascript engine will first try to convert the arrays to primitives. It seems that first it tries with the valueOf() method and if that doesn't return a primitive it uses the toString() method. If you want to (just for fun :smile: ) you could make it work how you expect by defining a custom valueOf() method for arrays.
const arr1 = [858];
const arr2 = [1001];

console.log(arr1 + arr2); // "8581001"
console.log(typeof(arr1 + arr2));  // 'string'
console.log(arr1 > arr2); // true (string comparison)

// Define a custom valueOf method for arrays:
Array.prototype.valueOf = function() {
  if (this.length === 1) {
    return this[0];
  }
};

console.log(arr1 + arr2);  // 1859
console.log(typeof(arr1 + arr2)); // "number"
console.log(arr1 > arr2);  // false
It's easier to see what's happening with the + operator than the > operator
Amit Patel
@AmitP88
hey guys, I'm trying to get my (+) button to increment faster on click & hold by implementing this solution https://stackoverflow.com/questions/79816/need-javascript-code-for-button-press-and-hold but for some reason it won't work. There aren't any errors in dev console that indicate that something is wrong with the function, and I've read over the solution (and my implementation of it) over a few times, and I still can't figure out what I'm doing wrong. Please help
https://codepen.io/AmitP88/pen/ZxWRmx?editors=0010
Stephen James
@sjames1958gm
@toianw Cools thanks for that explanation. :+1:
CamperBot
@camperbot
sjames1958gm sends brownie points to @toianw :sparkles: :thumbsup: :sparkles:
:cookie: 512 | @toianw |http://www.freecodecamp.org/toianw
Ian
@toianw
@sjames1958gm I hope it's right. :smile: . I've not read the spec, just tried some experiments.
kerafyrm02
@kerafyrm02
There is one way to compare two arrays
I read above that it is not possible but it is-
[4, 2] === [4, 2]; // false
but, if you stringify both:
JSON.stringify([4, 2]) === JSON.stringify([4, 2]); //true
Markus Kiili
@Masd925
@kerafyrm02 It is possible, but if array elements can be objects, it is not sure that equality it uses matches what you need.
MROB0T
@MROB0T
hey could anyone help me with my button problem for my code im trying to make two different buttons but it doesnt allow me to how come? if you need to see my code let me know
Matej Bošnjak
@mbosnjak01
@MROB0T post codepen
Matej Bošnjak
@mbosnjak01
so .. what buttons exactly?
MROB0T
@MROB0T
you see the word highlighted blue like "home" and "about" i want to make them buttons but it wont let me ive tried all i can
Mark Kubik
@KUBIX90
@KUBIX90
Hi all my website is below. please feel free to comment
http://www.markkubik.co.uk/
It's a small thing, but upon the page loading there seems to be some weird code flash on the off canvas menu that then transitions out. any way to stop this happening? Just looks a bit irritating
Matej Bošnjak
@mbosnjak01

@MROB0T add this to your css

.main .navbar-collapse ul li {
  list-style-type:none;
  display:inline;
  margin-left:10px;  
}

.main .navbar-collapse ul li a {
  text-decoration:none;
  border:1px solid red;
  padding:10px;
  background-color:white;
  transition:0.3s;
}

.main .navbar-collapse ul li a:hover {
  background-color:#3e8e41;
}

This is not complete, and part of the code are tests ... remove/add whatever you like

I think you get the idea what this does
Lisa Copeland
@lisacopeland
The landing page is really pretty - as is your sidenav content. Why are the animations so slow? Would it be possible to collapse the sidenav after a choice and just leave the menu symbol? I think it doesn't look good to have the side nav remain open after the user makes a choice but it seems that if you close it there is no way to navigate back to the main page after it is closed. I get that you are tying for good mobile design but it would be better on a large screen to have some kind of header on your secondary portfolio page. I dislike the fact that if I click on your cv button it downloads your CV - which is quite nice! I would rather you displayed it in some format and then gave the user an opportunity to download it.
@KUBIX90 Somehow I didn't put your name on the feedback I made about your website - I hope you find it useful.
Mark Kubik
@KUBIX90
@lisacopeland Hi, I actually don't knwo why the animations are so slow, they were nothing like that when I was making this on my local server
It's actually really bad, anyone know why that's the case? It's only basic stuff I'm not sure why its so slow
Nate Mallison
@NJM8
@KUBIX90 You can run a performance profile in your browsers dev mode. Move things around and find out what function calls are making things slow
Mark Kubik
@KUBIX90
@NJM8 I run the audit on chrome and it came back with a score f 81 which seems decent enough
Im sure chrome has something similar.
Ian
@toianw
@KUBIX90 just change the transition duration in your css. The nav animation is this rule transition: all 1s ease-out; just after line 68 in your css file. Change the 1s for soething faster.
Nate Mallison
@NJM8
Yeah but i think that is a hypothetical situation. With performance profiling you can see what the code is really doing
Mark Kubik
@KUBIX90
@toianw Its the frame rate of the transition that's the issue, it's super jerky
Nate Mallison
@NJM8
Watch the video on that page you will see what I mean
Ian
@toianw
@KUBIX90 which transition?
Mark Kubik
@KUBIX90
@NJM8 Just tried it in chrome and its working smooth and fine, seems to be a firefox issue with the site
hovering over the menu or the portfolio projects
Nate Mallison
@NJM8
Hmm. Im on mobile now otherwise I could take a closer look
Moisés Man
@moigithub
probably u need to add VENDOR prefixes too
.example {
    -webkit-transition: background-color 500ms ease-out 1s;
    -moz-transition: background-color 500ms ease-out 1s;
    -o-transition: background-color 500ms ease-out 1s;
    transition: background-color 500ms ease-out 1s;
}
Nate Mallison
@NJM8
That could be it too. I always run my css through autoprefixer online
Great tool
Mark Kubik
@KUBIX90
interesting, I'll take a look at that tool, thanks
Closed a few windows and seems to be smoother now, really odd
Ian
@toianw
@KUBIX90 The hover animations seem fine to me on both firefox and chrome.
Mark Kubik
@KUBIX90
Yeah its working Ok for me now as well
not sure what happened tbh