Menu icon Foundation

Developer | Boston, MA

Frontend dev & 3x founder using skills to support high-growth startups with incredible missions. Hustler/UX/UI//Philosopher/Evangelist

My Posts

No Content

My Comments

Gabriel Martin commented on Michael Karr's post about 4 years

This might be a better question for Stackoverflow, but the link at : //cdn.jsdelivr.net/velocity/1.2.2/velocity.min.js

might be better, as the scroll feature wasn't added until recently. You'll still need jquery for you selectors, but not the ui pack, or old jquery plugin version.

Gabriel Martin commented on Hari Harker's post almost 5 years

You'd want to do this with JS:

 function loadVideo(id)
{
var video = document.getElementById('video');
var mp4 = document.getElementById('mp4');
d = new Date();

mp4.src = "vidz/" + id + d.getTime();

video.load();
}

and then add this to a click event listener:

video.play(); 

And this should do the trick to add a pause button, if you'd like to go that route:

<button id="vidpause">Pause</button>

Then some JavaScript to the bottom of the page:

var vid = document.getElementById("bgvid");
var pauseButton = document.getElementById("vidpause");
function vidFade() {
vid.classList.add("stopfade");
}
vid.addEventListener('ended', function() {
// only functional if "loop" is removed
vid.pause();
// to capture IE10
vidFade();
});
pauseButton.addEventListener("click", function() {
vid.classList.toggle("stopfade");
if (vid.paused) {
vid.play();
pauseButton.innerHTML = "Pause";
} else {
vid.pause();
pauseButton.innerHTML = "Paused";
}
})

Gabriel Martin commented on Douglas Christopher's post about 5 years

Certainly Douglas,

I would recommend looking through the plugins with this tag https://wordpress.org/plugins/tags/custom-css

This should allow you to specifically apply css to the elements and backgrounds you're targeting.

I hope this was helpful!

Gabriel Martin commented on Tony Swaby's post about 5 years

gotta love the rubber duck phenomenon!

http://en.wikipedia.org/wiki/Rubber_duck_debugging

Gabriel Martin commented on Stylianos Chatziperis's post about 5 years

Personally, I think using a png is a good idea for a workaround, I'm guessing it's some kind of font/svg issue, depending on where you're loading the icon from.

Here's a great resource for that https://www.iconfinder.com/

Regarding your second question, I believe that I found a related issue, in which the commenter answers that non-webkit Opera is not supported. This could be the same issue you're running into.

http://foundation.zurb.com/forum/posts/19194-opera-drop-down-menu-issue

Gabriel Martin commented on Tony Swaby's post about 5 years

Can you add a bit of info?

Where are you running into issues?

Gabriel Martin commented on Ben Steinbrunner's post about 5 years

Let's use this small gruntfile as an example, note this is just one of multiple possible formats, and one of the easiest to grasp:

 grunt.initConfig({
  jshint: {
    foo: {
      src: ['src/aa.js', 'src/aaa.js']
    },
  },
  concat: {
    bar: {
      src: ['src/bb.js', 'src/bbb.js'],
      dest: 'dest/app.js',
    },
  },
});

Make note of the src and dest. Those are the integral components (technically objects) for grunt to identify for the concat task. Every format contains these components.

The src-dest relationship should be fairly intuitive, but if not, it's important you understand that by designating sources (src) and destinations (dest), you achieve the ideal outcome of: when running "grunt watch", the concat task (or compile as you called it) detects when the src files are saved, and outputs the concatenated version to the "dest" file.

Further, notice that jslint has no dest. This is because jllint is not compiling, but rather testing/linting your code, so no dest is required.

You can learn more here:

jslint: https://github.com/stephenmathieson/grunt-jslint
concat: https://github.com/gruntjs/grunt-contrib-concat
Configuring grunt tasks: http://gruntjs.com/configuring-tasks#files-object-format

Gabriel Martin commented on Steven Thate's post about 5 years

Here's a great article on specificity of css, and one from MDN which is a little drier, but is also good:

http://css-tricks.com/specifics-on-css-specificity/ (readable)

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity (MDN)

This seems like an opportunity to avoid using !important (another Coyier article on that: http://css-tricks.com/when-using-important-is-the-right-choice/) by leveraging specificity in your CSS.

Posts Followed





Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Michael Karr's post about 4 years

This might be a better question for Stackoverflow, but the link at : //cdn.jsdelivr.net/velocity/1.2.2/velocity.min.js

might be better, as the scroll feature wasn't added until recently. You'll still need jquery for you selectors, but not the ui pack, or old jquery plugin version.

You commented on Hari Harker's post almost 5 years

You'd want to do this with JS:

 function loadVideo(id)
{
var video = document.getElementById('video');
var mp4 = document.getElementById('mp4');
d = new Date();

mp4.src = "vidz/" + id + d.getTime();

video.load();
}

and then add this to a click event listener:

video.play(); 

And this should do the trick to add a pause button, if you'd like to go that route:

<button id="vidpause">Pause</button>

Then some JavaScript to the bottom of the page:

var vid = document.getElementById("bgvid");
var pauseButton = document.getElementById("vidpause");
function vidFade() {
vid.classList.add("stopfade");
}
vid.addEventListener('ended', function() {
// only functional if "loop" is removed
vid.pause();
// to capture IE10
vidFade();
});
pauseButton.addEventListener("click", function() {
vid.classList.toggle("stopfade");
if (vid.paused) {
vid.play();
pauseButton.innerHTML = "Pause";
} else {
vid.pause();
pauseButton.innerHTML = "Paused";
}
})

You commented on Douglas Christopher's post about 5 years

Certainly Douglas,

I would recommend looking through the plugins with this tag https://wordpress.org/plugins/tags/custom-css

This should allow you to specifically apply css to the elements and backgrounds you're targeting.

I hope this was helpful!

You commented on Tony Swaby's post about 5 years

gotta love the rubber duck phenomenon!

http://en.wikipedia.org/wiki/Rubber_duck_debugging

You commented on Stylianos Chatziperis's post about 5 years

Personally, I think using a png is a good idea for a workaround, I'm guessing it's some kind of font/svg issue, depending on where you're loading the icon from.

Here's a great resource for that https://www.iconfinder.com/

Regarding your second question, I believe that I found a related issue, in which the commenter answers that non-webkit Opera is not supported. This could be the same issue you're running into.

http://foundation.zurb.com/forum/posts/19194-opera-drop-down-menu-issue

You commented on Tony Swaby's post about 5 years

Can you add a bit of info?

Where are you running into issues?

You commented on Ben Steinbrunner's post about 5 years

Let's use this small gruntfile as an example, note this is just one of multiple possible formats, and one of the easiest to grasp:

 grunt.initConfig({
  jshint: {
    foo: {
      src: ['src/aa.js', 'src/aaa.js']
    },
  },
  concat: {
    bar: {
      src: ['src/bb.js', 'src/bbb.js'],
      dest: 'dest/app.js',
    },
  },
});

Make note of the src and dest. Those are the integral components (technically objects) for grunt to identify for the concat task. Every format contains these components.

The src-dest relationship should be fairly intuitive, but if not, it's important you understand that by designating sources (src) and destinations (dest), you achieve the ideal outcome of: when running "grunt watch", the concat task (or compile as you called it) detects when the src files are saved, and outputs the concatenated version to the "dest" file.

Further, notice that jslint has no dest. This is because jllint is not compiling, but rather testing/linting your code, so no dest is required.

You can learn more here:

jslint: https://github.com/stephenmathieson/grunt-jslint
concat: https://github.com/gruntjs/grunt-contrib-concat
Configuring grunt tasks: http://gruntjs.com/configuring-tasks#files-object-format

You commented on Steven Thate's post about 5 years

Here's a great article on specificity of css, and one from MDN which is a little drier, but is also good:

http://css-tricks.com/specifics-on-css-specificity/ (readable)

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity (MDN)

This seems like an opportunity to avoid using !important (another Coyier article on that: http://css-tricks.com/when-using-important-is-the-right-choice/) by leveraging specificity in your CSS.

Posts Followed

Following

  • No Content

Followers

  • No Content