Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
I've made a small SVG demo using React for drawing hex grids. It works fine in Google Chrome, but Firefox seems to have correct DOM, but is not displaying the elements. Is there anything wrong with my SVG?
http://freiksenet.github.io/hexdrawer-svg/demo/
The reason they are not rendering is that the SVG elements generated by your script have the XHTML namespace (ie. "http://www.w3.org/1999/xhtml"), when they should have the SVG namespace ("http://www.w3.org/2000/svg").
When you add elements to an SVG in Chrome it uses the SVG namespace by default, whereas FF is not as "clever".
I don't know ReactJS, so I don't know whether there is a workaround.
You can create them correctly if you use the generic DOM methods (eg. document.createElementNS() etc).
Embedding SVG into ReactJS
In the above link, Ben Alpert shows a way to include markup directly into the page without react preprocessing the element, using dangerouslySetInnerHTML.
This attribute doesn't have much documentation yet, but it is found on the following page:
http://facebook.github.io/react/docs/jsx-gotchas.html
See the following issue for more details on lack of documentation for this function: https://github.com/facebook/react/issues/413
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
I am making a bar chart in d3 but when I run locally and on Git it only shows the axes and not the bars.
Code and data: https://github.com/pshukl21/narrativevis.git
This can be frustrating! Looks like there are a couple of things going on, but the main thing is that your data had an extra line that was causing d3.csv to read it in improperly.
Here's the original, unmodified version of your code in a Codesandbox, only with that space deleted.
Delete the space and you can continue building your chart.
Solution:
A good thing to do when reading data into d3 is to do a quick sanity check by using the browser's developer console.
Using the dev tools to inspect, we can see that it looks like we're not getting a value that our D3 code expects -- it's telling us that the function that renders the rect is seeing NaN, which is a clue for where we can look.
And on closer inspection of the array that d3.csv creates, there's something off -- an extra row with no data. That appears to throw our entire array off!
Sure enough, turns out that Github was trying to warn us about this, too, but the soft colored, quiet warning is pretty easy to miss.
Once that's fixed, there may another problem -- we'll need to convert the values in career_WS to a number, or else our chart won't render and we'll get this helpful warning in the console:
We can do that by looping through our data and using the "+", which is a common replacement for parseFloat when working with D3.
data.forEach((row) => {
row.career_WS = +row.career_WS;
});
After we clean our data and make sure it's being read in, things are coming together.
It looks like there's still some work to do.
Fortunately, that is all in the implementation details -- it's not what your question was asking, but from here it's a matter of setting margins, setting scales, and rendering our chart.
Again, using the developer tools is a great way to understand what's failing. Hope this was helpful! ✌️
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have a fullpage.js site at the following link that is made up of 2 sections: 1 with a few slides, and a second section which is very long, and which takes some scrolling to navigate.
http://www.heartpatrick.com/indexnew.html
I noticed that the second section scrolls considerably faster now after i have implemented fullpage.js compared to what it used to behave previously. This happens both on a laptop using the mouse wheel, and on my iphone. I also don't get the smooth momentum scrolling effect on my iphone anymore, different from last time.
Can you tell what did I do wrong with my codes?
Thanks all! :)
I also don't get the smooth momentum scrolling effect on my iphone anymore, different from last time.
That's an already known issue when using scrollOverflow: true as you can see in this topic.
Regarding the speed. I see it normal. If you see it in the same way in this demo, then there's nothing wrong.
Try adjusting scrollingSpeed to your liking.
Look up the Initialization section in the docs.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I've got a problem with bxslider. Everything work just fine except showing images in slider after first loading. They just don't appear. When you refresh the website and wait a while they appear.
The address of website: PC-DATA
Looking at your website code right now when you first load the page the .bx-viewport are using some inline styles. One of these inline styles is setting the height of the container to 0. If you change the height to the size you want it to (in this case I am guessing 460px) then it should show correctly the first time.
.bx-wrapper, .bx-viewport {
height: 460px !important;
}
Alternatively you can see what others did here. Hope that helps.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 1 year ago.
Improve this question
I'm using isotope.js purely because of its animations for adding/removing elements.
I love the effect of items animating to fill the position of removed elements simultaneously as the removed elements fade out.
The thing is, my grid elements are all of a fixed and equal size, and I don't need any of the filtering stuff. I find isotope to be a little clunky, maybe because of the breadth of its functionality.
So I'm looking for an alternative which is:
lightweight
slick
robust and production ready
able to gracefully degrade
Original answer
If someone is still looking you might also want to take a look into a similar jQuery plugin I've written, Filterizr. Filterizr is:
Allows for filtering, sorting, shuffling and searching
Highly customizable (allows users to write their own CSS effects for the transitions when filtering in and out)
Uses CSS3 transitions and transform-translate.
Lightweight, ~20kb
Optimized for mobile performance
Responsive (with your media queries)
Open source and MIT licensed
Download links, tutorials and docs on the
Filterizr Website
Update 06/2019:
Filterizr has come a long way since then.
It is now written in TypeScript JavaScript and can be used without jQuery as a vanilla JavaScript library.
It still allows usage as a jQuery plugin though, you can still consult the Filterizr website as it's up-to-date.
In case someone is still looking check out
Shuffle.js. It is responsive alongwith MIT license.
I also searching that have extensive filter with animation:
Muuri - Open Source MIT (Seem Fast and Good)
MixitUp - High Quality Commercial Library (Extreme Polished)
Other open source either do not have both feature, or optional extensible, Good if you need fast animation only like Macy.js, gridfolio, Tympanus CSS (+ equal included, - equal excluded):
Macy.js: Animation +, Filtering - (Very lack of documentation of css transition)
gridfolio: Animation+, Filtering -
Mansory: Animation +, Filtering - - (but maybe with https://github.com/dynamick/multiple-filter-masonry)
Filtrify: Animation - , Filtering +
Tympanus CSS Tutorial: Animation +, Filtering -
Boardz.css: Animation -, Filtering - (Notable for mention as HQ CSS only Library)
jquery Woodmark: Animation +, Filtering - (Polished Demo)
Seems like you're looking for jQuery Masonry.
In general Isotope is pretty slick for most cases, all depending on the amount of content you throw at it of course.
The reason behind the clunkyness might be jQuery itself. While jQuery is an amazing selector, it's animation and speed of manipulation is lacking a bit because of the sheer amount of functionality included in the lib.
im using jquery Quicksand which is pretty neat and straight forward http://razorjack.net/quicksand/
I have also found some alternative of isotope masonry gallery
https://www.wix.com/app-market/wix-pro-gallery
https://github.com/wix/pro-gallery
---------------OR---------------
Image Photo Gallery Final Tiles Grid (Wordpress plugin)
Meow Gallery (+ Gallery Block) (Wordpress plugin)
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 9 years ago.
Improve this question
So I'm doing a pre-study on how to implement a responsive design to an existing site with a lot of images. These images would be nice if we could serve differently to the visitor according to device size, pixel ratio and/or bandwidth.
The site is using Akamai as a CDN so we must have a solution that uses different URLs for different image sizes. Doing this by Javascript is fine, we require it anyway.
I was looking at CSS-tricks spreadsheet (http://css-tricks.com/which-responsive-images-solution-should-you-use/) and specifically Foresight.js (https://github.com/adamdbradley/foresight.js) seemed to be the right stuff for us.
Basicly the markup would look something like this:
<img data-src="/images/imagefile.jpg" data-width="320" data-height="240" class="fs-img">
<noscript>
<img src="/images/imagefile.jpg">
</noscript>
But then I noticed that Google will ignore any fallback images placed within tags. This could be devastating to our SEO since the images from the press room are essential to be indexed by Google et al.
So my question is, how do you serve SEO friendly-enough images responsively? Is removing the src-attribute killing SEO? There will still be all the other attributes, the alt-one most important I guess.
yea, image alt tag is very important from search engine optimization point of view. Here there is no harm to resize the image by considering devices or element. Make sure you use meaningful image name to get them up in image search result of Google.
Interesting...
I don't really feel that you =need to "alt" tag all of the copies. From SEO point of view this is both redundant and somewhat spammy (imagine Google's response to a website in which each URL holds 5 [or more] different sized version of the same image, all with the same exact alt tags... )
Allowing Goolge to Recognize tags of the "default size" image should be enough for your SEO purposes.
Another workaround I can think of is to always have live links to all the different sizes (while presenting only one personalized version)
I`m not sure if its feasible, but you don't have to many version or want to present a few selected ones, this will do.
This will not solve the alt tag issue, but at least they all be crawled and indexed separately.
Also, alt tag is really over-rated. Speaking from almost 10 years of experience I can say that is's effect is marginal, at best. Especially if you link to the image includes the relevant KW.
If still worried, you can link to a different HTML page, containing said image and alt tag it there but it sound like too much trouble to me...