anyone here good with resolving CORS stuff?
can anyone tell me why my navbar shadow effect isnt working?
@akosuadenell woo NC in the house
@akosuadenell your navbar shadow is there. its only covered by the footer. try adding margin-top: 100px to the footer and you will see it
@ShionAt Hello, please be aware advertising in any of the FCC rooms is against our code of conduct which you can read here https://code-of-conduct.freecodecamp.org/. Please remove your post.
Unfortunately you do not support me
@adamfaraj what type of CORS stuff?
@jtan3 i got it. but thanks
adamfaraj sends brownie points to @jtan3 :sparkles: :thumbsup: :sparkles:
:cookie: 462 | @jtan3 |http://www.freecodecamp.com/jtan3
Starting the random quote machine project yay
Has anyone recommendation for resources on AJAX and JSON?
@X140hu4 MDN is a good resource. W3Schools JS material is somewhat bad but the JS ajax part seems good.
@Masd925 Ok thanks! :)
x140hu4 sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
:star2: 4542 | @masd925 |http://www.freecodecamp.com/masd925
@X140hu4 And jQuery docs if you use jQuery.
@akosuadenell your drop shadow is working but your footer is covering it up. If I turn off the
float: left; on your .sidebar you can see your nav’s drop shadow
hi could someone help me. i have made this https://www.alternativeeducation.in/learning-spaces not for profit community website with my fcc knowledge. I used a js modal window to display more information when clicked on more information. the trouble is I can only scroll the modal window when the mouse pointer is over it. this makes for terrible ux experience as the user doesnt know he/she needs to keep the mouse pointer over the modal to scroll.
@alteducation I think its a browser specific issue. I'm able to scroll no matter where i have my pointer. Im using firefox
Okay i found it
i mean not the solution but the bug
it happens only for some of the modals
@ashwins93 i checked with firefox the behavior is you need to scroll from inside the modal the first time before it becomes active to scroll from outside
@alteducation Yeah i noticed it now
@ashwins93 can you think of some possible fixes for this?
I'll see, i haven't seen this kind of behavior before. Most of the cases the modals fit within the viewport
first time i'm seeing modals taller than viewport
It will even more tougher with mobiles won't it?
i have given overflow:scroll to accomodate the content
In mobile the modal fits the whole width of the screen so this is not an issue
@alteducation The probelm is there are two scrolls one for body and one for modal. It doesn't detect the scroll for modal until the pointer is over the center modal box
the body scrollbar doesn't show because its height is set to 100vh
if you remove the 100vh you will be able to see 2 scrollbars and clearly see which scrollbar moves when
@ashwins93 yeah is there a way to disable the body scrollbar alltogether
without having two scrollbars
even with two scrollbars the scroll keeps defaulting to the body content
I think scroll gets triggered based on what content the pointer is pointing to
should i hide the body content when the modal is active? is that a possible solution?
@alteducation I will ttry that too
its not possible to hide the body content because the modal itself is nested inside
@ashwins93 shit
@alteducation okay i made something to wrok
try this
@ashwins93 Yeah
.modal-box {
width: 70%;
margin: 100px 15%;
}
Hold on a second
i saw that you are using bootstrap
you can try this change the class from
modal-box to container modal-box
and in the modal-box css rule remove all the rules relating to width and max-width
make sure to remove the even the rules that are inherited
on this specific page actually i am not using bootstrap. its included in all pages. should i remove that>
?
okay forget bootstrap
i thought the scroll got triggered inside
.modal-box
but i was wrong, it gets triggered only inside
.modal-body because thats where the text is
the browser is determining what to scroll based on the content present i guess
Middle mouse click to scroll works though
sorry man, i'm out of idea
ideas*
@ashwins93 this is a weird situation altogether. many users will think the site is broken. I think i should get away from using modals and generate specific pages for each card. I'm using jekyll to generate this page from a data.json file. Currently I dont know how to generate pages from data file in jekyll. have you worked with static site genarators?
@alteducation nope i haven't
you could move the scroll bar to the modal-box to signal the users that they need to scroll inside modal box
@ashwins93 thanks for working on helping the community. Really appreciate it.
alteducation sends brownie points to @ashwins93 :sparkles: :thumbsup: :sparkles:
:cookie: 379 | @ashwins93 |http://www.freecodecamp.com/ashwins93
by setting the modal-box max-height to 100vh and setting the overflow to scroll
Lol but i was of no help
@ashwins93 that is an ugly hack :smile: I will look into creating specific pages and getting rid of modals.
Yeah that sounds good
In general i believe modals can be displayed if they are within the viewport
if there is content taller than view port height, then it does deserve a separate content area
You can however place all the modal content you have below all the cards and hide it when the page loads
whenever the user clicks a card, you can just
$('.cards').fadeOut() and then ('#specifccontent').fadeIn()
@ashwins93 will try that. that seems like a good solution
in which case you don't have to create a separate page and make a server request
Hello world
Anyone here to help
@vipuldcoder yeah vipul
Hii @alteducation
Happy Diwali
A festival of lights
Do you have experience in bootstrap
???
@vipuldcoder little. I will look into your issue
OK issue is of responsive
@vipuldcoder Post your code or a link to codepen
Check link www.indinoxsolutions.com
ask for specific issues and please don't ask to ask
Check share link
You get to know
@vipuldcoder Okay i saw it, if you are using bootstrap
you can specify multiple classes
Like
like
<div class="col-12 col-sm-9 col-md-6 col-lg-4"
If you
What that code means is that the column will be displayed with a width of
12 columns in very small devices
9 columns on small devices
6 columns on medium devices
4 columns on large devices
when you resize the browser the column will wrap instead of slimming down
Wait let me
okay i see you are using Boostrap 3.3.7
But one can also have one more issue
Yes
the link i sent you is for 4.0.0-beta
Hmm
for 3.3.7 the responsive classes are same
OK
you need to give the classes to the parent container of the element that needs to be responsive
Like
I saw that you have give the
col-sm-12 to the div that contains 3 images together
Hmm
what that means is that the 3 images will always stay in a single row irrespective of the width of the viewport
if you want the images to wrap to the next row in case of smaller widths you need to give a class to each of the images
Like
Eating food
Hello
disregarding style/looks and focusing on functionality, what are your guys opinion on this
Out of Adobe CC photoshop and Adobe CC Muse, which Software is best for making mockups? The concern is "Excellence of mockup" not "ease of making it".
P.S. : Muse is known for making responsive prototype
P.S. : Muse is known for making responsive prototype
@NeelDVirus Dreamweaver?
@NeelDVirus https://www.sketchapp.com/
@adamfaraj there is some reason i dont want to go for dreamweaver. i want to go for either photoshop or muse
@NeelDVirus probably muse then
@adamfaraj sketchapp is only for mac i guess
@adamfaraj yeah i was thinking that too. does Muse has any limitation as compared to photoshop cc
@NeelDVirus honestly dont know. i don't use that stuff. i just go at it from scratch
@adamfaraj oh thats ok. thanks anyways
neeldvirus sends brownie points to @adamfaraj :sparkles: :thumbsup: :sparkles:
:cookie: 290 | @adamfaraj |http://www.freecodecamp.com/adamfaraj
Hello
any pug aficionados around
can someone take a look at this codepen and help me understand why nothing is addint to my display?https://codepen.io/rscales02/pen/NaoYpO?editors=1010
also, if someone knows the css trick to move that bottom row left all of like 3px that would be helpful
@rscales02 The
toDisplay function is not on the global scope and those onclick calls cannot call it.
You can place is outside the onload callback.
@Masd925 it wasn't working without the on load function, now it is... thanks
rscales02 sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
:star2: 4543 | @masd925 |http://www.freecodecamp.com/masd925
@rscales02 Best way would be to use addEventListener for handling the click events.
isn't that covered with the
onclick in my html?
@rscales02 Yes, but you have to use global variables and place some code outside the onload callback for easy fix. Modern way would be to bind the handlers on JS inside an onload handler. That way you can be sure that the DOM is ready to be manipulated.
so add an event listener like
document.getElementByClass('keys').addEventListener('click', toDisplay(9))?
but adding that inside the onload breaks everything, and I am not sure how I would pull the value from each button
would I need to set an
id for each separate button and a different event handler?
upon loading that now sets display to 9 before any click occurs...
@rscales02 The method is
getElementsByClassName and it returns an array-like object that has those elements as elements. You can loop it and assign event handlers to those elements. Even better is to add the click handler to the mother element if possible and inside the callback check what child element (button) was clicked.
You have totally lost me... add the click handler to the mother element? what is that in this case?
@rscales02 Some element that contains those buttons. Not sure that is the way to go in this case. Maybe you just loop those element and add the click handlers.
ok thanks @Masd925
rscales02 sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
api offline
so add an event listener like
document.getElementByClass('keys').addEventListener('click', toDisplay(9))?
the second argument to a listener should be a callback
Hi Guys!!! I have problems with the follow Pastbin "Build a Personal Portfolio Webpage"
Somebody can help me?
@eric777717 - you should post a URL or something that people can have a look at. And specific questions about what you have problems with. The easiest way for people to help is if you put your page on CodePen - it's an easier way for people to look at it and offer help.
okay so i started my "simon game" project and i wanna ask if i should have the #innerCirlce's div inside the #outerCircle's div. And what difference will it make?
hi there! could someone help me? I'm trying to make my navbar menu items at the top align to the right but it won't let me when i justify-content-end (bootstrap). here is the link to my site
and here is the code for my navbar
<nav class="navbar navbar-expand-lg fixed-top">
<!-- logo -->
<a class="navbar-brand" href="#"><img src="logo.png" width="30" height="30" class="icon-img d-inline-block align-top" alt="logo"></a>
<!-- hamburger button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-bars" aria-hidden="true"></i>
</button>
<div class="collapse navbar-collapse navbar-right" id="navbarTogglerDemo02">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0 justify-content-end">
<li class="nav-item">
<a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#projects">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://juliscodingadventure.wordpress.com/" target="_blank">Blog</a>
</li>
</ul>
</div>
</nav>
<!-- navbar end -->
Hello guys, I've been struggling with the challenge "Inventory Update". I've run a loop to add the items to the new inventory but when it finds an existing item is not just adding the amounts as it should, but it adds the whole item as if it doesn't exist
my code:
function updateInventory(arr1, arr2) {
// All inventory must be accounted for or you're fired!
var v = arr1;
for(var i = 0; i < arr2.length; i++){
if(arr2[i][1] == arr1[i][1]){
v.push([arr1[i][0] + arr2[i][0], arr1[i][1]]);
} else {
v.push(arr2[i]);
}
}
return v;
}
// Example inventory lists
var curInv = [
[21, "Bowling Ball"],
[2, "Dirty Sock"],
[1, "Hair Pin"],
[5, "Microphone"]
];
var newInv = [
[2, "Hair Pin"],
[3, "Half-Eaten Apple"],
[67, "Bowling Ball"],
[7, "Toothpaste"]
];
updateInventory(curInv, newInv);
I tried adding just the name of the items to a new array, but then I don't know how to add the stock of each item once the names have been sorted. Because when the amount is added, ".sort()" doesn't work anymore
Thanks Ken Haduck!!!
https://www.freecodecamp.org/challenges/build-a-personal-portfolio-webpage
https://www.freecodecamp.org/challenges/build-a-personal-portfolio-webpage
Hi guys!! I have problems with this binpass above... I dont undestanding very welll what a really need to do.. First of all, the Java Script and the CSS is difficult to my understanding,
I will aprecciate if someone can help me with that
I will aprecciate if someone can help me with that
@julicheng add in css:
.navbar-nav{
width: 100%;
}
@sorinr thanks so much! worked like a charm :sparkles: :smile:
julicheng sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1342 | @sorinr |http://www.freecodecamp.com/sorinr
@julicheng :+1:
what up what up what up
hey does anyone know an easy way to float a larger version of an image while hovering over said image?
@j-cryer I used something like this:
.thumbnail {
...
transition: all 600ms cubic-bezier(0.39, 0.575, 0.565, 1);
}
.thumbnail:hover {
...
transform: scale(1.6);
z-index: 5;
}
You can also put the transition on the hover itself
Hello
can anyone help with Javascript api and geo location?
i am trying to pass the var latitude and longitude to the API call, but the variables aren't passed until the user clicks the button again
what's the general best practice for uploading file to a server? would there be a problem if I use html form input file type? what's the benefit of using ajax to upload files?
how can i align those squares to be in an order:
1 2
3 4 ??
@thodorisanta this is what you want to achieve?
@sorinr right now yes, then im about to turn it to a circle
i think i kinda suck at understanding css
@thodorisanta so u want it rounded as one object?
@sorinr well my final destination is to make them look like those colors in the "simon game" project. thats what im working on now.
@thodorisanta https://codepen.io/fcccder/pen/YrBoRY check this one
u have to open it :)
Всем привет:) Я тут поинтересоваться хотел. Где бы я мог ознакомиться с общими правилами чата 'gitter'?
Could I send an information that not related with programming? And where can I acquainted with rules of this chat?
For instance, if I want to share this video https://www.youtube.com/watch?v=ldK9qvRBkMI to this group.
Could I send an information that not related with programming? And where can I acquainted with rules of this chat?
For instance, if I want to share this video https://www.youtube.com/watch?v=ldK9qvRBkMI to this group.
get acquainted*
When I return an object using AJAX call, it returned undefined. Why is that?
function loadSunTime() {
var URL = "https://api.wunderground.com/api/800715b6ce08dbb1/astronomy/q/IL/Rockford.json"
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if(this.readyState == 4 && this.status == 200) {
return JSON.parse(this.responseText);
}
}
xhttp.open("GET", URL, true);
xhttp.send();
}
//ignore the parameter for getWeatherData()
function getWeatherData(jsonObject) {
var sunJsonObject = loadSunTime();
console.log("Sun object: " + sunJsonObject);
}Here is the link to codepen: https://codepen.io/quickspeedy/pen/XeomjK
@quickspeedy You return the object from the inner function, not the outer function. Because you get the response in a callback (Much later time than you call the function), this data cannot be returned synchronously. The function body of
loadSunTime is already handled and left when your data arrives. Also your console.log in getWeatherData already happened at the point when you get your data
Oh ok thanks for the explaination. @alpox I have been researching on how to force a function to stay synchronously, would promise method work in this situation?
quickspeedy sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1369 | @alpox |http://www.freecodecamp.com/alpox
@quickspeedy You cannot force a function to stay synchronous when it has to work asynchronous.
All right. Got it. Will have to rewrite my code in another way.
The thing that comes (for the eye) closest, would be the ES7 async/await syntax - which is generators and promises behind the scenes and makes the code READ like synchronous even though its NOT
@quickspeedy Promises are one way to handle such a case though, that you see right. But it doesn't make, by any means, make your code synchronous
@quickspeedy Another way is the "old-school-way" which you should maybe learn first - and is widely used
Even though promises are today the better interface, you have to know how callbacks work
Ok thanks for the advice @alpox Definitely appreciated it!
quickspeedy sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
api offline
@quickspeedy For that, you can make your function take one parameter - the callback. A callback is nothing else than a simple function. You call that function with the data you got after it arrived and then you can access it from the other function through defining that function which you pass as argument.
Might sound complicated from my statement, but here is an example of a very simple callback:
function getDataDelayed(cb) {
// Simulate delayed action. Takes 2 seconds
setTimeout(function() {
cb("hey, this is data!");
}, 2000);
}
function print(received) {
console.log(received);
}
getDataDelayed(print); // Logs "hey, this is data!" after 2 seconds
So how does
getDataDelayed(print) work? Seems to me that print is a function and you didn't use getDataDelayed(print()) with a parenthesis?
@alpox
@quickspeedy No i didn't :-) the variable
print (yea you can see the function name as a variable in which the function is stored) is passed to getDataDelayed as an argument.
So i kinda "pass around" the function like data
in
getDataDelayed, the function is available under the name cb (The first argument where i passed the function)
Then, as soon as i get the data, i do the
actual function call with the () paranthesis
cb("hey, this is data!")
@alpox I think I got it. The callback function looks pretty tricky though!
You get used to it :-)
Promises are probably more difficult to grasp for you
So i think its best to first learn callbacks
@alpox Yeah I agree with you. Thanks again!
quickspeedy sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
api offline
@quickspeedy Np :-)
@quickspeedy If you used the functions
filter, reduce or map already, you've already seen callbacks. Because you kind of give them callbacks as argument :-)
@alpox Yes I feel kind of embarassed that I have used it but never recognized it. I need to make sure I understand callbacks well.
@quickspeedy Noone does at first glance :D
@alpox Haha, that makes me feel better :smile:
@AlexxMart
Hello guys, I've been struggling with the challenge "Inventory Update". I've run a loop to add the items to the new inventory but when it finds an existing item is not just adding the amounts as it should, but it adds the whole item as if it doesn't exist
my code:
function updateInventory(arr1, arr2) {
// All inventory must be accounted for or you're fired!
var v = arr1;
for(var i = 0; i < arr2.length; i++){
if(arr2[i][1] == arr1[i][1]){
v.push([arr1[i][0] + arr2[i][0], arr1[i][1]]);
} else {
v.push(arr2[i]);
}
}
return v;
}
// Example inventory lists
var curInv = [
[21, "Bowling Ball"],
[2, "Dirty Sock"],
[1, "Hair Pin"],
[5, "Microphone"]
];
var newInv = [
[2, "Hair Pin"],
[3, "Half-Eaten Apple"],
[67, "Bowling Ball"],
[7, "Toothpaste"]
];
updateInventory(curInv, newInv);I tried adding just the name of the items to a new array, but then I don't know how to add the stock of each item once the names have been sorted. Because when the amount is added, ".sort()" doesn't work anymore
@AlexxMart v === arr1 and you are pushing same things there, so I suppose you have duplicates in v
I would suggest to create temp object and store inventory in it.
It's easier to find "Hair Pin" as a property of object than loop both array every time.
It's easier to find "Hair Pin" as a property of object than loop both array every time.
@korzo but in the loop I use the double bracket notation for each item
array[i][0] to compare if the name of the new inventory matches the one already in the array
@korzo that's a good idea, let me try that
@AlexxMart yes, but you push then (add new item at the end of array)