Forum Replies Created
I’ve used jRespond on several projects and it is working very well. Might be overkill if you only have one single function to trigger, but once your project grows and more JS needs to trigger on breakpoints, it’s a nice lib to have.
Plus, it also does some nice things for performance, like window resize event throttling.
Something like this? (might be a bit sloppy, but hopefully you get the idea)..
The trick here is to use a callback function for jQuery’s
fadeOutfunction, which fires after the animation is done. So basically, first fadeOut the content. Then, fetch the new content and fadeIn. You could also add a loading animation between the first content has faded out and the new content begins to fade in.
Plugins totally vary depending on the size and complexity of the project. The ones I usually use regardless are:
jshint, concat, uglify, sassand
And then as the project grows, more might be needed (I probably forgot some):
bump– for better controlling the version of your app
yuidoc– if more devs are working on the same project, documentation is nice
copy– depending on different vars or environments, sometimes you don’t want to process a file, just copy it to another location
replace– I sometimes use this to replace strings in my JS-config module. For example, it can replace something like
devMode = %DEV_MODE%;to
devMode = true;depending on Grunt params
newer– only operate on src files that have actually changed
imagemin– optimize images
Uncaught ReferenceError: $ is not defined
You have not included jQuery?
Without knowing, I would suspect that flex-box would solve that problem, but that solution might not be all good depending on which browsers you need to support.
However, there is an ol’ CSS hack for making a column fill the entire height. Might be a solution for you. See this pen:
Notice the huge padding and negative margin on the sidebar, along with overflow-y: hidden on the containing element. That’s basically it.March 26, 2014 at 5:46 am in reply to: [Solved] Trying to understand css container shadows #166822
EDIT: Was going to ask for a code example but then you posted one, GJ! :)
Also, you can play around with http://css3generator.com/ if you want to experiment and see how the shadow behaves depending on its configuration.
Need a bit more info.. What have you tried so far? Do you have a code example?
When you say “gradients” I assume you’re talking about CSS3 gradients? They won’t work in IE8 without a polyfill or a CSS filter property if I’m not mistaken.
How are you testing for IE8? Are you using Emulation in IE’s Developer Tools or are you running a real native installation?
Something like this? http://codepen.io/chromawoods/pen/zKdwk/
Like @Paulie_D said, you should never use the same ID attribute more than once on a page. However, when capturing an event with jQuery, you can target the specific element using
$(this), even if your original jQuery selection was targeting a whole class of elements.
In my example, I make a selection on any
.boxelement but then I use
$(this)to add/remove a CSS class on the currently hovered box. You can do whatever you need to the targeted element.
Wow. Yeah that might be it. Totally different story. Can’t help you there. :)
If you’re using jQuery:
Plenty of examples there. For plain JS, your code might need to look different depending on what browsers you need to support.March 18, 2014 at 1:02 am in reply to: Google maps java script is not working(Search box + GPS location) #166117
Line 109: } --- Expected '(end)' and instead saw '}'
You can’t just specify
700– you need to define what kind of measurement you are using, for example px or em.
So if you want to use pixels in your example, you would do
Sure. Here’s a fork: http://codepen.io/chromawoods/pen/Iulgb
So, basically the jQuery selection is already done and has a reference every time the event fires, which can be quite frequently. We do the heavy lifting before bombarding the browser with onscroll-events.
As a small performance improvement, might I suggest saving references to
$(window)outside of the scroll function? Otherwise I believe jQuery will perform that selection every time the scroll event fires, which is very unnecessary. So above the scroll function, have something like
var $corner = $(".corner"), $window = $(window);
..and then reference those inside the function.March 12, 2014 at 3:27 am in reply to: [Solved] Max-width on fluid images does not work for IE #165509
IE handles this fine, the error is in your CSS. You have defined the width property twice for that image rule (line 1007), and the lower one looks broken. It says “width:auto\9;”. Remove that property and stick with the “width:100%;” one.