predatorx

Hello all I have created a gulpfile which I want to watch for any changes to PHP and SCSS files. When I run the gulp command in the terminal, Browser-sync starts up and the page is displayed fine. It also says it is watching files. If I try to edit a PHP or SCSS file in the terminal it says [Browsersync] Reloading Browsers..., but nothing happens. I want the SCSS to compile directly into the theme folder I have created and overwrite the style.css. I also want any changes I make to a PHP file to reload the broswer. My gulpfile is as follows: // Include gulp const gulp = require('gulp'); // Include plugins const concat = require('gulp-concat'), autoprefixer = require('gulp-autoprefixer'), sass = require('gulp-sass'), sourcemaps = require('gulp-sourcemaps'), browserSync = require('browser-sync').create(), reload = browserSync.reload; gulp.task('sass', function () { return sass('./assets/sass/style.scss', { sourcemap: true, style: 'compressed' }) .on('error', sass.logError) .pipe(autoprefixer()) .pipe(sourcemaps.write('.', { includeContent: false })) .pipe(gulp.dest('.')); }); gulp.task('browser-sync', function () { var files = [ './*.php', './template-parts/*.php', './inc/*.php', './assets/**/*.scss', 'style.css' ]; // Initialises browserSync browserSync.init(files, { proxy: "http://localhost/test/", notify: false }); }); // Watch for changes in files gulp.task('watch', function () { // Watch .scss files gulp.watch('./assets/**/*.scss', ['sass']); }); // Default task to compile css gulp.task('default', ['sass', 'browser-sync'], function () { gulp.watch('./assets/**/*.scss', ['sass']); }); Any help would be greatly appreciated.

Thanks for your reply @fisicx. I changed the icons to use the square set, but the problem is still there. I have added the background using css when it hovers. The instagram icon does not have have a background on it to change. Only the color. That is why that one is working as intended.

I have been working on a site which is using Font Awesome icons. I want them to display a different background colour on hover. I have got it to work, but the background colour is bigger than the actual icon, so the background displays around the icon. What I want is for the background to change, but not be bigger than the icon. The issue can be viewed by clicking the link above and hovering over the Facebook and Youtube social media icons. I have been trying to solve this, but with no success. Can anyone help and point me in the right direction?

I have manged to fix the issue.

Hello all I am trying to use the jQuery plugin EasyAutocomplete, but I have run into an issue. I have the plugin working in test from a json file which is fine. What happens is when the user types in a search, the search list filters and the user can click on one of the dropdown enters and be taken to another page. This is working as intended. My issue is that I have a submit button and when the user selects there search term, the submit button does not do anything. You also cannot select a search term by typing in the input field and pressing enter to be taken to that page. I would like the user to be able to go to the next page by either typing in the input field and pressing enter, pressing the submit button or clicking the link they want to use. You can view the test that I have mocked up here. Can anyone help with this? If more information is needed I can try to provide it? Thanks

Hello. I have used a CodePen to try and implement a smooth scroll effect when the nav links are clicked on a site, but have run into a few issues. The smooth scroll effect works as expected, but it throws up Javascript errors with every press on the nav links. The console error is as follows: The code I have in my script file is as follows: $(document).ready(function() { var scrollLink = $('.scroll'); // SMOOTH SCROLLING scrollLink.click(function(e) { e.preventDefault(); $('body,html').animate({ scrollTop: $(this.hash).offset().top }, 1000 ); }); // ACTIVE LINK SWITCHING $(window).scroll(function() { var scrollbarLocation = $(this).scrollTop(); scrollLink.each(function() { var sectionOffset = $(this.hash).offset().top - 20; if ( sectionOffset <= scrollbarLocation ) { $(this).parent().addClass('active'); $(this).parent().siblings().removeClass('active'); } }); }); }); I'm not sure why these errors appear. I am using jQuery 2.2.4min. Can anyone help? If more information is required please let me know. You can view the site here. Thank you for your help.

Hello all. I am having a play with the flexboxgrid system and have come across an issue. I would like to create a media that only works on medium screen sizes. The documentation does not seem to give you the widths of the different breakpoints that the system uses. Can anyone give me some advice on how to create a media query to only target medium screens? The flexboxgrid can be viewed here: http://flexboxgrid.com/ Thanks.

Thanks for all your help. You have both been very informative.

Thanks. I did have a brief look at that course before posting here. I didn't know it was also in print format. Thanks once again.

Thanks for this. I have been looking for a beginner's guide to es6, but couldn't find anything. That's why I reached out to people on here. I figured it would be best to learn es6 as it will help in the future.

Thanks. I'll check that out too.

Thanks for your replies. I had a look at the course from Wes Bos, but he says it's not really for beginners. Can you recommend any good courses for beginners? I will try Code Academy.

I really want to learn es6, but don't really know much javascript. Is it best to learn javascipt, then es6 or can I just try to learn es6? Can anyone point me in the right direction for good books/courses on es6 for beginners? Thanks

Thanks for your reply. I will take a look into this.

Thanks for your reply. 1and1 only gave me the SPF record to update. I updated this, but it didn't work and the emails I sent were still going to spam. I then deleted the SPF record and changed the MX record to the ones Google provide. I found those on a Google help page. I have not signed up to Google Apps. Do I need to sign up to this to use their MX records? Also will changing my MX records affect the outbound server? I can get mail fine to my 1and1 inbox, but when I reply to the email, that is when the problem occurs.