@jrandallhansen The Wikipedia API doesn't allow data transfer between two different domain names, JSONP allows you to work around this.
jrandallhansen sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 813 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
I get stuck about bootstrap.https://codepen.io/giggle/pen/vXOqbj?editors=1000 why can't show navs when I resize to xs and click the collapsed button. Can someone help me?
@babycannotsay it isn't right. If you go to the javascript settings, you need to add bootstrap in there too I think, and also, that's the exact code from the project example isn't it? naughty naughty.
I tested it using browserling, and got it to work fine
@aszwet1 sorry..i miss bootstrap jscript cdn when you did not remind me.So I think it's right.but i get stuck again..now let me see what you say and think again.
Hi guys, I'm trying to complete this https://codepen.io/FreeCodeCamp/full/NNvBQW/ challenge right now and I'm trying to put a caption under my image but I can't figure out how to get the caption within the border and I'd rather somebody explain it to me than cheat and look at the example code. Is the image not supposed to be within a border? I read somewhere Googling for solutions just now that it's impossible to put anything on top of a border.
@aszwet1 when i got stuck,i indeed read the code from the project example.But before that, i wrote the code almost.Because i learn bootstrap a few months ago and i refer to the website http://v3.bootcss.com/components/#navbar-default . so i am a naughty..
@718Rogue assuming you are using bootstrap then just apply
class="caption" to your text
@aszwet1 he isnt looking to implement a thumbnail however. he wants to have caption text underneath his image
ok i'll try and figure that out and if i still have problems i'll let you know. thanks @jrandallhansen !
@aszwet1 aww i see it shows the use of captions right underneath as well
718rogue sends brownie points to @jrandallhansen :sparkles: :thumbsup: :sparkles:
:cookie: 324 | @jrandallhansen |http://www.freecodecamp.com/jrandallhansen
@718Rogue the link that @aszwet1 shared shows how use a caption
div perfectly. very easy
also, when i try to set notifications to only me it still gives me notifications for all messages. am i missing something or is chrome just being weird?
for this chat room
can anyone take a look at my WikiViewer project and see if you can figure out how to get the links to open in a new tab? thanks
@aszwet1 it can't be showed in the website codepen. But it can be showed when i use other tool..i am tired..why..
Hi all, I'm trying to add weather app project to codepen. My application works on my pc but when I add it to codepen, it doesn't work because there's this message "getCurrentPosition() and watchPosition() no longer work on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS". Has anyone else used navigator.geolocation for their weather app?
@jrandallhansen hovering over a link i see such as https://en.wikipedia.org/wiki/Einstein_on_the_Beachtarget=%22_blank%22 ... you're missing a space so that target="_blank" is separate ie <a href="http://www.moo.com/" target="_blank">moo</a>. btw that page took FOREVER to load
Ok, I've had to add "https://" to my codepen url https://codepen.io/aofadero/full/wzaVZv/ in order for it to work and also add "https://" to my weather api url for it to work
I logged the following:
console.log(io.nsps['/'].adapter.rooms[socket.room]);and it returned the following:
Room { sockets: { '/#O6L2als5FU-VfHSoAAAA': true }, length: 1 }How might I edit console.log so that it returns the length value? I tried .length, .sockets.length, I also added 1 to the end. These were all unsuccessful. This should be basic javascript but I cant get it :(
That was 1 in square brackets I tried adding to the end, sry
Will you please check out my site (codedbyhelena.wixsite.com/codedbyhelena) and tell me if you see ads? I know I'm using a service for the site but I coded the matching game and the site is an easy way to display my work for now. When I learn more I will make my own site from scratch with html
console.log(io.nsps['/'].adapter.rooms[socket.room].length)
Can someone look at my code and tell why everything below Portfolio is clickable to my link???? And also if you could find out why I have so much space between my contact me and my info form that would be great as well.
http://codepen.io/TrayBanks/pen/NRKvGg/
http://codepen.io/TrayBanks/pen/NRKvGg/
hello everyone, I am doing the twitch tv challenge and having some issues with the code. based on what i have so far, the name, status and the "not online" logo should already appear, but when i run it, nothing shows up. any help would be greatly appreciated
@KaviJo your console says: Failed to load resource: the server responded with a status of 400 (Bad Request)
you are pointing to this: https://api.twitch.tv/kraken/streams/OgamingSC2/?callback=?
which is not a correct link
@kirbyedy yea, the ogamingsc2 is closed. isnt the data2.error supposed to bring back the logo?
no, ogamingsc2 is not closed, in fact it is streaming right now
check the link
freecodecamp for example is offline
@kirbyedy oic i havent done the online ones yet but my issues is nothing at all is showing up under logo, displayname and status. is my callback wrong?
@kirbyedy ok i have removed the callback part but nothing has changed as far as the display goes. still all blank
I know i can use .mainheader and it works like that
but h1, span should work right?
nevermind
hey guys, I'm taking the time to organize my code and I was just wondering if there's a way to create a table of contents for my html code, where the user can click on it and it'll take them to specific lines in the text editor
that way it'll make it convenient to go to specific parts of my code instead of doing all that scrolling
@AmitP88
<a href="#myContent">Go to myContent</a><div id="myContent"></div> that's can do the work
you create a list with anchor links like this and give
ids to your elements and tada
or you want really do something for you text editor ? you can create some Readme in comments at the begining of your file
@maeswilliam move text-align: center; to the level higher that is your header, then it works, because it’s set to the parent
is there a way to css select all immediate children without specifying the child type? Like for eg, ul>li{} will get all <li> children, .class>h3 will get all <h3> children, but what if I want to get all immediate children regarless of type?
nvm got it
does anybody know how to force bootstrap's dropdown to work in codepen? I can't even run the default boostrap example code...
@Shamikk did you link the jquery and bootstrap library to your pen ?
radascript sends brownie points to @adityaparab :sparkles: :thumbsup: :sparkles:
Just include it from the settings and and it will work correctly.
@Radascript : it will work but that is a really bad idea :D
@kirbyedy @adityaparab you are absolutely right, and I think I need another coffee - I haven't seen that before :) Maybe the names should be ordered alphabetically?. Added the bootstrap in the js section, and it works great
@kirbyedy @adityaparab thanks a lot :)
shamikk sends brownie points to @kirbyedy and @adityaparab :sparkles: :thumbsup: :sparkles:
:star2: 1367 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
:cookie: 694 | @adityaparab |http://www.freecodecamp.com/adityaparab
Because CSS properties that you don't explicitly set on the element are inherited from it's parent (the upward hierarchy). So saying
parent > * is entirely pointless.
@adityaparab idk if i'm being too hacky. When I set a certain padding on a parent it fucks my layout, but when I set margin on children it
's ok
Hi guys! Anyone here has finished Intermediate Algorithm Scripting? :smile:
Intermediate Algorithm Scripting/Spinal Tap Case
Convert a string to spinal case. Spinal case is all-lowercase-words-joined-by-dashes.
I have created something like this:
function spinalCase(str) {
//The RegExp constructor creates a regular expression
// object for matching text with a pattern.
var pattern = /\s/g;
var toLowerCase = str.toLowerCase();
var newstr = toLowerCase.replace(pattern, '-');
return newstr;
}
spinalCase('This Is Spinal Tap');But I don't have any idea how can I detect this spinalCase("thisIsSpinalTap") and change it to that "this-is-spinal-tap"? Any ideas?
with split()
Ok, I will check it @kirbyedy :+1:
Hello everyone! My weather app works fine on localhost, but doesn’t work on CodePen. Can you give me a hint? https://codepen.io/Dominaz/pen/pEvOYa
@dm-nz just a guess but maybe it's because of location permission in browser?
@kirbyedy Thx, it worked!
But can you help me decode this RegEx?
function spinalCase(str) {
var test = str.split(/(?=[A-Z])/);
return test;
}
spinalCase("thisIsSpinalTap");What does /(?=[A-Z])/ mean exactly?
elminsterrr sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1368 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
@D0tM
hi i have a question, there is a way to target safari with jquery?
i am trying this $(document).ready(function() {
if ($.browser.safari) {
$("#portfolio > figure").css('max-width', '300px');
$("#about_us > figure").css('max-width', '385px');
}
});
hi i have a question, there is a way to target safari with jquery?
i am trying this $(document).ready(function() {
if ($.browser.safari) {
$("#portfolio > figure").css('max-width', '300px');
$("#about_us > figure").css('max-width', '385px');
}
});
which is in the bracket... which are capital letters A to Z
@dm-nz in chrome your pen is https which means it can't make http requests - only http - try removing the s from https in the address bar
@kirbyedy So every time RegEx finds one capital letter form A to Z It will split that string, correct?
?= Match a suffix but exclude it from capture.
from docs
I am terrible at explaining
@kirbyedy RegEx are confusing, without ?= I'm getting this:
function spinalCase(str) {
var test = str.split(/([A-Z])/);
return test;
}
spinalCase("thisIsSpinalTap");
=> [ 'this', 'I', 's', 'S', 'pinal', 'T', 'ap' ]
@GregatGit the only problem is he is using geolocation, so I think it will not work in chrome :(
so It is then splitting after capital character as well...
Can someone PLEASE tell me what changes do we have to make in the weather project so as to make it work on chrome???
dm-nz sends brownie points to @kirbyedy and @gregatgit :sparkles: :thumbsup: :sparkles:
:cookie: 761 | @gregatgit |http://www.freecodecamp.com/gregatgit
:star2: 1369 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
@Jay-20 1) connect with https:// to allow geolocation 2) use a proxy for openweather -
Or use an api for location
https://crossorigin.me/Or use an api for location
http://ip-api.com/json
@sjames1958gm like this? $(document).ready(function(){
var latitude;
var longitude;
$.getJSON("http://ip-api.com/json",function(data2){
latitude=data2.lat;
longitude= data2.lon;
console.log(latitude);
});
});
@Jay-20 You will need to make your next API call inside the callback
Oops sorry didnt read that okay will try that Thanks ! @sjames1958gm
jay-20 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 3175 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
@elminsterrr My reading is that /(?=[A-Z])/ is this
Matches x only if x is followed by y. on the MDN webpage. I can only think that with nothing before the ( that
It splits right before each capital letter.
BTW, it is (?:) that matches but doesn't capture
Matches x only if x is followed by y. on the MDN webpage. I can only think that with nothing before the ( that
It splits right before each capital letter.
BTW, it is (?:) that matches but doesn't capture
but your codepen link has to start with https:// as well
in other words, either all with https or all links with http, then you wont get that mixed content error
but keep in mind that geolocation wont work in chrome with http links, so you will have to use something else to get the user location, like ip lcoation
hey there for building a random quote machine is it required to use API for the random quotes or we can put some quotes manually in our code?
I am encountering some bugs
like the challenge sorry
and I am trying to get the temperature and convert it to celsius
but whenever I add the code to do this my whole page crashes
do I need to post my code?
and comment the crap of code which you entering before crash
HTML :
<center><h1 id = "title">WeatherCaster</h1></center>
<div class="container">
<center><img src = "#" id = "testimg"></center>
<p id = "description"></p>
<center><p id = "temperature"></p></center>
</div>CSS :
@import 'https://fonts.googleapis.com/css?family=Oswald';
body {JavaScript :
$( document ).ready(function() {
$.ajax ({url : "http://ip-api.com/json"
}).done(function(data) {
Weather(data.lat,data.lon);
}).fail(function(err) {
console.log(err);
});
});
function Weather(latitude , longtitude){
console.log(latitude, longtitude);
var apiKey = "fffc77f90fb489748fe36ae1b79ac8b5";
$.ajax ({
dataType : "json",
url : "http://api.openweathermap.org/data/2.5/weather?lat=" + latitude + "&lon=" + longtitude + "&APPID=" + apiKey,
type : "GET"
}).done(function(json){
console.log(json);
var Location = json.name + " , " + json.sys.country;
var currentWeather = json.weather[0].description;
var timeGet = new Date();
var time = timeGet.getTime();
var sunrise = json.sys.sunrise;
var sunset = json.sys.sunset;
var ico;
// var Fahrenheit = Math.floor(json.main.temp);
// var Celsius = Math.floor((Fahrenheit * 9 / 5) - 32);
// var Temperature = Celsius;
// document.GetElementById("temperature").html(Temperature);
if(currentWeather == "clear sky"){
if(time > sunset || time < sunrise){
var ico = "https://s9.postimg.org/7ak2dla3f/Clear_Sky_Night.png";
document.getElementById("testimg").setAttribute("src" , ico);
$('body').css('background-image', 'url(https://s21.postimg.org/lfd9y978z/Clear_Sky_Night.jpg)');
}else{
var ico = "https://s9.postimg.org/asw29zazf/Clear_Sky.png";
document.getElementById("testimg").setAttribute("src" , ico);
$('body').css('background-image' , 'url(https://s15.postimg.org/u38v1i3k7/Clear_Sky.jpg)');
}
}
if(currentWeather == "few clouds"){
if(time > sunset || time < sunrise){
var ico = "https://s9.postimg.org/xy6gvzg4b/Few_Clouds_Night.png";
document.getElementById("testimg").setAttribute("src" , ico);
$('body').css('background-image' , 'url(https://s21.postimg.org/tm59ptxbn/Few_Clouds_Night.jpg)');
}else{
var ico = "https://s9.postimg.org/j0xzuz2vv/Few_Clouds.png";
document.getElementById("testimg").setAttribute("src" , ico);
$('body').css('background-image' , 'url(https://s15.postimg.org/y0w4qwqdj/Few_Clouds.jpg)' );
}
}
if(currentWeather == "scattered clouds"){
var ico = "https://s9.postimg.org/xpdhjsspn/Scattered_Clouds.png";
document.getElementById("testimg").setAttribute("src" , ico);
$('body').css('background-image' , 'url(https://s15.postimg.org/d7ybg8n7r/Scattered_Clouds.jpg)' );
}
if(currentWeather == "broken clouds"){
var ico = "https://s9.postimg.org/415n74lzv/Broken_Clouds.png";
document.getElementById("testimg").setAttribute("src" , ico);
$('body').css('background-image' , 'url(https://s15.postimg.org/d1g0zeop3/Broken_Clouds.jpg)');
}
if(currentWeather == "shower rain"){
var ico = "https://s9.postimg.org/8kmh6dt97/Shower_Rain.png";
document.getElementById("testimg").setAttribute("src" , ico);
$('body').css('background-image' , 'url(https://s15.postimg.org/yvn9qonlz/Shower_Rain.jpg)');
}
if(currentWeather == "rain"){
var ico = "https://s9.postimg.org/cr2q7z3h7/Rain.png";
document.getElementById("testimg").setAttribute("src" , ico);
$('body').css('background-image' , 'url(https://s15.postimg.org/qnlc5ovpj/Rain.jpg)');
}
if(currentWeather == "thunderstorm"){
var ico = "https://s9.postimg.org/7kw6aoe3f/Thunderstorm.png";
document.getElementById("testimg").setAttribute("src" , ico);
$('body').css('background-image' , 'url(https://s15.postimg.org/lha6ungxz/Thunderstorm.jpg)' );
}
if(currentWeather == "snow"){
var ico = "https://s9.postimg.org/52ah9zsd7/Snow.png";
document.getElementById("testimg").setAttribute("src" , ico);
$(
ouch, that's a lot
oops css is not complete, although I don't think I really need to post it all :stuck_out_tongue:
the code that crashes it is from the declaration of the Fahrenheit variable to the assignment of Temperature to the element with ID temperature
when I remove it, the page runs :/
Hey, anybody knows a good script to scale font-size to fit it's container (viewport units)?
@KlausMana just a question, where is that temperature in your html that you are trying to get ?
it was a typo on my document.GetElementByID
the g needs to be lowercase
@718Rogue <div class="thumbnail">
<image src=""></image><div class="caption text-center">caption
</div>
</div> use this
<image src=""></image><div class="caption text-center">caption
</div>
</div> use this
how can i change? i think it should be cause of "href" thing
<ul class="nav navbar-nav navbar-right">
<li><a type="active" class="scrollable">About</a></li>
<li><a class="scrollable">Portfolio</a></li>
<li><a class="scrollable">Contact</a></li>
</ul>
<li><a type="active" class="scrollable">About</a></li>
<li><a class="scrollable">Portfolio</a></li>
<li><a class="scrollable">Contact</a></li>
</ul>
Someone help me to start single page portfolio application "Build a Personal Portfolio Webpage" Lession 121
@muralikumarch What do you need help with?
Just this
@adityaparab Hi..i need just start..how to build single page...give me some basic layout kind of stuff
@Bludfire : It must work. What do you mean when you say
it doesn't work?
do you mean you can't see the text?
:smile:
<banner>
<div id="banner" class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="row">
<div class="col-xs-3">
<a href="#top" class="scrollable"><img class="img" src="http://qlip.in/sites/default/files/qlip.png" class="logo" title="qlip | UI/UX Design and Development"></a>
</div>
<div id="menu" class="col-md-9">
<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
<span class=" icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<nav id="navbar" class="collapse navbar-collapse" role="navigation">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">About</a></li>
<li><a>Portfolio</a></li>
<li><a>Contact</a></li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</banner>
<div id="banner" class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="row">
<div class="col-xs-3">
<a href="#top" class="scrollable"><img class="img" src="http://qlip.in/sites/default/files/qlip.png" class="logo" title="qlip | UI/UX Design and Development"></a>
</div>
<div id="menu" class="col-md-9">
<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
<span class=" icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<nav id="navbar" class="collapse navbar-collapse" role="navigation">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">About</a></li>
<li><a>Portfolio</a></li>
<li><a>Contact</a></li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</banner>
@muralikumarch " Stick to the basic template as shown in the example project.
body{
margin:0;
padding:0;
color:#666;
background:#888;
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 20px;
font-color:white;
}
banner {
background-color:purple;
height:75px;
}
.img {
height:55px;
padding-top:15px;
}
menu {
padding-top:10px;
}
a {
color:white;
}
uh i found
error thing
idunno it looks fine but still there is an error
But i changed a elements to li elements and it worked better
Check this out, looks cool!
http://codepen.io/devilishalchemist/pen/LERvpM
http://codepen.io/devilishalchemist/pen/LERvpM
I am trying to implement this, so I copied the css and js code. Made an html file with proper syntax. And then upon opening it, it's just a plain blank page
Can anyone help me with this?
how can i apply border bottom to only the text as an underline instead of the whole page
text-decoration: none;
border-bottom: 2px solid white;
@adityaparab
This is my css
@U-ways
the code for it is here: https://github.com/Faiz7412/pageflip
and I made a github page for it: http://faiz.io/pageflip/
But I'm not able to emulate the animations that were there
(I have been awake since 50 hours so maybe I'm missing something really simple, I need to finish this in few hours so would appreciate any help!
i.e. add
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
It does need some fixing for small screens though @Faiz7412
faiz7412 sends brownie points to @labiej :sparkles: :thumbsup: :sparkles:
:cookie: 445 | @labiej |http://www.freecodecamp.com/labiej
I added jquery <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
and the custom js right before the closing </body> tag
it still doesnt work
do I need to add 2.1.3 one? I tried it with stable version of 3.x
as well
Any thing else you find missing? @labiej
oh damn
wait
Since I'm already going off due to lack of sleep, I made changes in other html file lying in a folder right before pageflip XD
Thanks @Belax8
faiz7412 sends brownie points to @belax8 :sparkles: :thumbsup: :sparkles:
:cookie: 439 | @belax8 |http://www.freecodecamp.com/belax8
I added font-awesome.min.css
in stylesheet
or go for the a cdn
hi for some reason my images are not loading within my html the paths are correct although I am using sass as well what could be the reason?
@MohammadHasham
Maybe you have a white page and cannot see the border because you picked a white border?
border-bottom: 1px solid black; the border-bottom property you're using should work!Maybe you have a white page and cannot see the border because you picked a white border?
@miriam-z Do you have a link that you could share so we can look at it?
@miriam-z check the developer console, its possible a mixed source issue (http vs https)
miriam-z sends brownie points to @labiej :sparkles: :thumbsup: :sparkles:
:cookie: 446 | @labiej |http://www.freecodecamp.com/labiej
@Belax8 my images are located here:
/public/src/assets/img and my index.html is placed on the root. I have tried every variation of path and still nothing loads
ive made some custom alerts and added css.. its a bad ai but could you review my TICTACTOE?!
@123xylem sometimes when I play the game my "O" doesn't appear. As if the character did not load?
@123xylem Nice job overall!
@123xylem If I choose "X" then "O" twice, your AI will also play "O" with me. That's all I could find haha goodluck!
@U-ways :) thanks .. yea i know abou that bug... when i tried togglin a noclick class to them buttons after a choice it stopped my cpu working and i thought to fix that small bug it wasnt wort so much effort
123xylem sends brownie points to @u-ways :sparkles: :thumbsup: :sparkles:
:cookie: 356 | @u-ways |http://www.freecodecamp.com/u-ways
@miriam-z Is it possible that I could see a bit of your img HTML related tags and any CSS related for it?
@123xylem Haha true, make it all work first then think about the polishing :P Industrial motto!
@labiej @U-ways @Belax8
<div class="container-fluid">
<h3 id="cards-title">Why choose our sightseeing bus tours?</h3>
<div id="home-tiles" class="row">
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<a href="public/src/assets/img/card-bus-md.jpg">
<div id="card-bus">Hop-on, Hop-off<span> As many times as you choose</span></div>
</a>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<a href="public/src/assets/img/card-route-md.jpg">
<div id="card-route">Our Amazing Routes<span>See Paris by day and night</span></div>
</a>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<a href="public/src/assets/img/card-cruise-md.jpg">
<div id="card-cruise">Free River Cruise<span>One ticket, two experiences</span></div>
</a>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<a href="public/src/assets/img/card-guide-md.jpg">
<div id="card-guide">Live Guides<span>With renowned local knowledge</span></div>
</a>
</div>
</div>
</div>
the images are being placed in the html although I have also tried this using background url in css
and still they do not load although my editor picks up the image path so they are clearly in the folder
@miriam-z
<a href="public/src/assets/img/card-route-md.jpg"> Use img tag instead of the a tag for images. one moment let me provide an example
miriam-z sends brownie points to @labiej and @u-ways and @belax8 :sparkles: :thumbsup: :sparkles:
:cookie: 357 | @u-ways |http://www.freecodecamp.com/u-ways
:warning: miriam-z already gave labiej points
:cookie: 440 | @belax8 |http://www.freecodecamp.com/belax8
I think you'd want to use
<img src="./public/src/assets/img/card-route-md.jpg" >, better to avoid possible ambiguities
@miriam-z
<a href="links goes here">
<img src="./public/src/assets/img/card-route-md.jpg">
<div id="card-route">Our Amazing Routes<span>See Paris by day and night</span></div>
</a>Something like that perhaps? o:
( @labiej Thanks for the path tip haha)
u-ways sends brownie points to @miriam-z and @labiej :sparkles: :thumbsup: :sparkles:
:cookie: 248 | @miriam-z |http://www.freecodecamp.com/miriam-z
:cookie: 447 | @labiej |http://www.freecodecamp.com/labiej
miriam-z sends brownie points to @labiej and @u-ways :sparkles: :thumbsup: :sparkles:
:warning: miriam-z already gave u-ways points
:warning: miriam-z already gave labiej points
@U-ways actually the border is there but it just occupies the whole page width
How can i draw these progress circles
Ohh, borders occupy their parents width. So you will need to change the parents width in order to configure that or
<div class="border"></div> use this empty div for a quick border!
I am checking the developer tools and it says there is a 404 error and it cannot get the image. The img src tag is not the issue here
hallo i have question : each pixel in 8-bits RGB color from 0 to 255 ? i mean R:0-255 G:0-255 B:0-255 \ RGB (157,45,241) is that a color in 8-bits RGB ?
404 error means the file is not found, should be a server related problem or the path is wrong.
(if the path
(if the path
./public/src/assets/img/card-route-md.jpg did not work, try: public/src/assets/img/card-route-md.jpg)
@miriam-z Maybe take off
./ so it doesn't try to find the root directory. Like <img src="public/src/assets/img/card-route-md.jpg" >
@miriam-z Where is your index.html file? Is it in the public folder or outside of it?
@miriam-z So maybe try
<img src="src/assets/img/card-route-md.jpg" >
how can i make progress circles like these is there a library or shall i do that with html,css
@MohammadHasham There should be a library somewhere for that. No clue where though :c
on the root like so:
public/src/assets - css - img - js - stylesheets index.html
@miriam-z Ok so maybe just try
<img src="img/card-route-md.jpg" > You have to think of the path from the HTML file not the full path
The folder that contains your html is the "root" of your folder structure
Can you try and show us the folder structure (by using a screenshot for example)
In other words in which folder does "index.html" sit?
i am having trouble triggering my AJAX function when the user presses enter on the search bar instead of pressing the search button. can anyone spot my problem? https://codepen.io/jrandall/pen/gwONZy?editors=0010
sorry haha
that was the easiest fix ive had yet!
@jrandallhansen : Slight mistake. It will work for some people and won't work for others, depending on their browsers.
However, this is a generic way to make sure it works everywhere
if (e.which == 13) { //Enter key pressed
//$('#searchButton').click(); //Trigger search button click event
$('#searchButton').trigger('click',{}); //Trigger search button click event
}.click is meant to be used as .addEventListenerequivalent. So refrain from violating standards even though it seems to work in short run. It will help you avoid the likelihood of running into pretty nasty and ugly issues in the long run.
@UsamaHameed Greetings!
im having a problem
faiz7412 sends brownie points to @labiej :sparkles: :thumbsup: :sparkles:
:cookie: 448 | @labiej |http://www.freecodecamp.com/labiej
@adityaparab so
.click should ONLY be used in place of .on('click',{}) essentially??
Can you guide me further on how to fix it for small screens? Only if you have time.
@jrandallhansen : Nope.
.click and .on('click' are equivalent. If you want to trigger the event on certain element then refrain from using .click. Use .trigger instead.
@adityaparab
i can't get the documentation right?
@MohammadHasham : Using that
require won't work directly in the browser. You will need some module loader to pull that off. Like Browserify or Webpack.
@adityaparab so is there any other library that could work directly in browser actually i want to make progress circles
@adityaparab right. so only use
.click as shorthand for .on('click') right? or are there other uses ?
You can load the js and use it directly normally, check out a react example on codepen to see how it works
@jrandallhansen : Correct. No other uses. Although I prefer using
.on syntax. for .click sounds a little counter intuitive to me.
@MohammadHasham : Include this in your codepen https://cdnjs.cloudflare.com/ajax/libs/progressbar.js/1.0.1/progressbar.min.js
actually i am worrking on sublime can you tell me how can i make use of it?
@adityaparab
@MohammadHasham Then put a script tag in your index.html and set it's src to above url
@jrandallhansen : I agree. It's personal choice though. Nothing wrong with that :D
Although, you might wanna consider the problem you ran into due to the naming. :D
Although, you might wanna consider the problem you ran into due to the naming. :D
.click does sound like you're triggering a even as well :D
@adityaparab
@MohammadHasham
var bar = new ProgressBar.Line('#container', {easing: 'easeInOut'});
bar.animate(1); // Value from 0.0 to 1.0Same as explained in that tutorial
@adityaparab well it apparently 'works' to trigger the event. but it is nice to get this clarification. i edited an answer on stackoverflow to detail that difference. @labiej yes it does.
$("#yourButton").click(function(){}); is the format
Hey guys, I am having trouble with the TwitchTV Project. I load the TwitchTV Streams API for a channel to check whether it is online, offline, or the account has been closed. I then load the Channels API for the same channel to get information like the logo, name, url etc based on the status of the channel. Now what I have a problem with is sometimes the Channels API has started to load before the Streams API has finished getting the status of the channel. This causes the status to be undefined when the Channels API loads causing some the results on my project to be wrong. http://codepen.io/BhavikSheth/full/KgwJWB/
I know that both brunofin and comster404 channels are closed but sometimes they show Offline
@MohammadHasham Alternatively, if you've
npm installed progressbar.js you can also set the src to node_modules/path/to/progressbarjs depending on folder structure
instead of using the cdn url
i am trying to do the way you have told
@adityaparab
I console logged the status and it showed that the Channels API had finished loading first causing the status to be undefined
$(document).ready(function(){
var bar = new ProgressBar.Line('.c100 p25', {easing: 'easeInOut'});
bar.animate(1);
});
am i doing right?
i highly recommend the "JSON formatter" chrome extension to anyone who hasn't installed it. so nice to have
@adityaparab
@MohammadHasham : Can you do a
console.log(ProgressBar); and see if it's getting set properly?
@adityaparab
I got it working here at this pen
mohammadhasham sends brownie points to @adityaparab :sparkles: :thumbsup: :sparkles:
:cookie: 695 | @adityaparab |http://www.freecodecamp.com/adityaparab
is there a way where I can delete all saved achievments on challanges ?
I wanna start over from scratch
nvm found it -.-
im having trouble with the buttons on my navbar making you scroll to the appropriate section
right now as it is, everytime you click on one of the buttons, it just reopens my pen
@Torayx You have to use Link to an element with a specified id within a page to goto that part of page.
Reference: http://www.w3schools.com/tags/att_a_href.asp
<a href="#contact">Contact</a>Reference: http://www.w3schools.com/tags/att_a_href.asp
just resends me to the page
<a role="button" href="#Contact" target="_blank" class="btn btn-default"><b>Contact</b></a>
i also just screwed up the size of the navbar so if you could help with that as well -.-
@Torayx First remove
target="_blank" on links and let me check if any other issues
also not sure why my navbar got huge all of a sudden when all morning its been the small size i needed
oh i think i found out that answer
@Torayx
<h1 id="About" class="text-center"><u>About</u></h1> you used id=#About
it should be only
id=About and on links it should be href=#About
duh
Got it!
@vinaypuppal Thanks so much!
torayx sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 486 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
i originally had the 3 buttons in the navbar on the righthand side using float:right
doesnt seem to work now
any suggestions for having them on the righthand side?
@Torayx use bootstrap nav component properly http://getbootstrap.com/components/#navbar
You did not close few tags properly may be thats causing problem see above link for reference
You did not close few tags properly may be thats causing problem see above link for reference
@Torayx And also include First
Jquery.js and then bootstrap.js in JS panel of your pen
hey idk why but my whole page is white after adding some js code
may I post the codepen link because the code is quite long
The code that broke it is
$("#celsius").on("click", function(){
Temperature = Celsius;
TemperatureString = Temperature.toString() + "°";
$("#temperature").html(TemperatureString);
});
$("#fahrenheit").on("click", function(){
Temperature = Fahrenheit;
TemperatureString = Temperature.toString() + "°";
$("#temperature").html(TemperatureString);
});
Anyone knows how to prevent the text of the calculator display to be selectable?
you mean the select cursor not to display?
add a class pointer for the buttons, then on css, in this class do cursor : pointer;
is there a possibility to prevent that?
to this class
@arvendragon what do you need?
I'm trying to remove the outline that appears when you focus on a form element
this is my code:
.form{
border: none;
border-bottom: 1px solid lightgrey;
background-color: #e6e6e6;
margin:10px;
padding-top: 20px;
padding-bottom: 20px;
font-size: 1.5em;
box-shadow:none;
outline:none;
}
*:focus {
outline:none;
outline-style:none;
box-shadow:none;
border-color:inherit;
-webkit-box-shadow: none;
}
@labiej the example didn't have it, and I'm trying to recreate it as much as I can
Forgot to add a name (was asking zelite), lemme check your question
I used
border: none
outline: none
-webkit-box-shadow: none
-moz-box-shadow: none
box-shadow: none
i don't recall which was for what browser
but gonna test that
the input HTML element, the .form class, form:focus, or what?
In fact I used
#left textarea:focus but that's because I wrote it in Sass
textarea:focus{
border: none;
outline: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
border: none;
outline: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
Well your form uses inputs and textareas so you need to do it for both, lemme check real quick
@labiej i'm an idiot. I was testing it for textarea but clicking on the inputs. Thank you for the help xD
arvendragon sends brownie points to @labiej :sparkles: :thumbsup: :sparkles:
:cookie: 449 | @labiej |http://www.freecodecamp.com/labiej
The easiest way is to use
.form-control:focus{
border: none;
outline: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
That'll affect all of them at once :-)
@labiej thank you for your help! that solution worked, but i needed to use a :not(:focus) to get rid of the opposite transition. do you know if there's a better solution?
arvendragon sends brownie points to @labiej :sparkles: :thumbsup: :sparkles:
@DavidDarius your buttons aren't highlighting based on your scroll position, are you using scrollspy?
After I change the quote,the tweet content doesn't change as well.
@DavidDarius another comment, your navbar isn't collapsing properly. if you intended to have a giant fixed menu, i'd recommend against that.
your image links are also broken
@arvendragon are broken beacuse i didnt have anything to show
@DavidDarius fair enough, it looks like its coming together nicely. the only real code-related concerns i'd have would be about your navbar, as i've mentioned
i would also move the styling to the CSS part instead of using style comments in HTML
if you're using bootstrap, why not use the built-in functionalities of its navbar? it's much easier to set up
and you should probably load bootstrap's javascript library too
https://codepen.io/hungnguyen1895/pen/vXOoBa can somebody take a look at my first challenge and give me a feedback, please ?
@Honesty1997 Since you loaded
Twitter widget you cant access your twitter-share-button from JS it will be replaced by iframe you can verify that chrome dev tools. So use your own a tag style it as button and change its href in JS dynamically using http://twitter.com/share?text=your quote and author
@hungnguyen1895 it seems fine! you could use more built-in features, i.e. <b> instead of <span + class/css>, or BootStrap's own quote functionalities, but other than that what you did works
thank you, I was wondering how to make the image center but does not consider like a block element
also, general help question, how do you get those boxes around code in chat? :smile:
@tadalox Nice Design. one suggestion give
.quotesquare some min-height so it won't flicker when quote text is small
@arvendragon use backtics ``` around code https://github.com/FreeCodeCamp/FreeCodeCamp/wiki/Code-Formatting
tadalox sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 487 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
thank's @vinaypuppal :smile:
arvendragon sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 488 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
Can someone familiar with bootstrap carousels please help me, I am trying to have any image under a certain height gain a top property of 120px but I am not sure how to affect the appropriate image. Thank you for any help. This is the javascript code
function imgChk()
{
var allImg = document.querySelectorAll('.item > img');
console.log(allImg.length);
console.log(allImg[0]);
console.log(allImg[0].height);
console.log(allImg[5]);
console.log(allImg[5].height);
for (var i =0;i<allImg.length; i++)
{
if (allImg[i].height < 350)
{
$(allImg[i]).css('top', '120px')
/*#myCarousel.carousel.slide is the element I need to affect but I'm not certain how to target a specific image this way, :active doesn't work*/
}
}
}
Hi everyone, I'm trying to create a page in .net where I have a list of "parameters" to the left side of the screen. Clicking on one will bring up each parameter's list of items in the center with checkboxes and a running list of items selected to the right of this listview. What is the best way to do this? AJAX?
@arvendragon Looks Good. Some suggestions contact form looks narrow on small screen i.e below 480px you can tweak padding for that
div.row using media queries and for PORTFOLIO images you can add links to those respective sites, so when we click on image it takes to that site .
This message was deleted
This message was deleted
@arvendragon 1) your
light class is not centered (or is it intentional?) 2) your GitHub icon is a bit off from the rest 3) well... overall pretty solid
<script>
$(document).ready(function() {
$("#target1").css("color", "red");
$("#target1").prop("disabled", true);
$("#target4").remove();
$("#target2").appendTo("#right-well");
$("#target5").clone().appendTo("#left-well");
$("#target1").parent().css("background-color", "red");
$("#right-well").children().css("color", "orange");
$("#left-well").children().css("color", "green");
$(".target:nth-child(2)").addClass("animated bounce");
$("target:even").addClass("animated shake");
});
</script>
idk what im doing wrong
Hi everyone!
Can somebody rate my tribute page from 1 to 5 please?!
http://codepen.io/linnk99/full/LRVvEQ/
Can somebody rate my tribute page from 1 to 5 please?!
http://codepen.io/linnk99/full/LRVvEQ/
@linnk99 it is, never mind. well... overall I think it's 4.5/5. not 5 because you can and some
line-height so the text will be more reading-friendly
@linnk99 also, some spacing here and there
linnk99 sends brownie points to @qubkon :sparkles: :thumbsup: :sparkles:
:cookie: 108 | @qubkon |http://www.freecodecamp.com/qubkon
hey guys can anybody tell me why my navbar is stacking like this?
Does anybody know how I only make the background image transparent?
@phuchle you added wrong class here
<ul class="nav nav-navbar"> it should be <ul class="nav navbar-nav">
phuchle sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
Hey, has anyone completed the React markup project?
hey all, I broke my Wikipedia viewer and I can't figure out how. Any help is appreciated!
$.ajax({
url: 'https://en.wikipedia.org/w/api.php',
data: {
action: 'query',
list: 'search',
srsearch: $("#search").val(),
format: 'json',
},
dataType: 'jsonp',
success: function(data) {
[some function]
}
},
error: console.log("error")
});
Hi everybody. Is there anybody who can help me with minimax algorithm
I'm doing a tic tac toe game btw)
I'm doing a tic tac toe game btw)
Hey everyone :grinning: I'm trying to do the portfolio page. In my CSS, I'd like to change the logo so that it has the "Righteous" font type and colour #38302E but it's not applying. Im not sure why. I added the font link at the top and I'm sure everything is in the correct div's. Thoughts? http://codepen.io/mzedl/pen/dXQkdq
@JitteryJoe This is what I used.... If that helps
var search = $('#searchbox').val();
// API request to wikipedia
$.getJSON('https://en.wikipedia.org/w/api.php?action=opensearch&datatype=json&limit=8&search='+search+'&callback=?',
function(data) {
@mzedlach I am looking into it now
@mzedlach Okay, you can get rid of the html tag and head tag at the top of your html. They are embedded.
you can also link that font at the head section of html under settings.... just make it cleaner
@wearenotgroot So I figured that one out so far, but why is the font colour not applying?
@eweiss17
It is being overridden is the short answer
@GabrielShaad header looks cool, in portfolio thing I'd change that animation to be played when u hover on actual picture, right now it does it when you have a mouse just close to it, little thing but somehow irritates me a bit :D, also fix connect to be maybe more confined? would look better imho
@GabrielShaad other than that looks very nice, grats
@GarrusNapp Thanks for the feedback! I'll do this.
gabrielshaad sends brownie points to @garrusnapp :sparkles: :thumbsup: :sparkles:
:cookie: 310 | @garrusnapp |http://www.freecodecamp.com/garrusnapp
Hello everyone, finally finished my tribute page and learned a lot and kept adding and adding. I used quite a bit of media queries to allow the text format to remain the same depending on the device being used. I welcome your feedback, thanks!
@zero2sixty Nice one page Portfolio! If you want, you can later add smooth scroll! https://css-tricks.com/snippets/jquery/smooth-scrolling
This message was deleted
Anyone?
you can also try <img src="pic.jpg" alt="pic" width="20" height="20" align="middle">
rosarend sends brownie points to @garrusnapp :sparkles: :thumbsup: :sparkles:
:cookie: 312 | @garrusnapp |http://www.freecodecamp.com/garrusnapp
rosarend sends brownie points to @zero2sixty :sparkles: :thumbsup: :sparkles:
:cookie: 140 | @zero2sixty |http://www.freecodecamp.com/zero2sixty
$("input").html("worked") why doesn't it work guys? You can't change input label with jQuery?
@GarrusNapp You need to use a <label> tag for radio buttons:
and then do
More info: http://stackoverflow.com/questions/5795499/changing-text-of-radio-button
<input id="wth" type="radio" name="choice"><label for="choice">WHATS</label>and then do
$('label[for=choice]').html('worked');More info: http://stackoverflow.com/questions/5795499/changing-text-of-radio-button
@TylerMoeller Thank you, I searched on SO but couldn't find anything :)
garrusnapp sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 814 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Any tribute topics? I'm bad at making choices..
gabrielshaad sends brownie points to @u-ways :sparkles: :thumbsup: :sparkles:
:cookie: 374 | @u-ways |http://www.freecodecamp.com/u-ways
how do I make the scrolling navigation bar in the portfolio project?