I've used shareaholic in the past and found it pretty good but they must have recently changed their formats which look great but are not functioning properly on my website.
The problems are:
The bookmarks are only showing the first row (not clearing the top row to show the second)
It's adding a background color to all of my links
Any ideas what the problem is and solutions?
I have the exact same problem..... I think Shareaholic is going down the toilet... Just look at what they did to 7.2. A very simplistic and stupid plugin. 6.1 was way better!
Related
I am taking my first steps in JS, I know that I have a lot of reading ahead of me, but I am searching and trying to make this little thing work. Maybe I've chosen a bad example of a website for testing influence of chrome extensions, but maybe solving this problem will somehow enlighten me and help with future learning.
I want to change the background-color of google calendar events depending on words/set of characters they contain.
I tried using contains() selector which seemed to work on simplier websites (I could see the CSS applied in DevTools) but divs with events on Google Calendar stay untouched.
Can the script somehow be blocked by Google Calendar? Should I use some of the permissions listed on developer.chrome.com/extensions ?
Sorry that I am not attaching any code at the moment, I don't have it with me, and I can't recreate it from the head. I wanted to post it in my free time, and at least get some new ideas.
I'll be grateful for any help!
I've build a carousel that will let users flick/scroll trough dates using the slick library. I've got some minor issues with the library, and a major one.
You can see the carousel here:
http://radiant-meadow-8480.herokuapp.com/
user=test,
pw=test
I'll list the issues in the hopes that you can help me fix them, but if not, it might help you recommend me another library.
Events only fire when you release you're click(mouse up). I would like to slide my finger/mouse back and forth, and see the data on the screen change.
You can't sling your finger/mouse to one side and scroll through a bunch of slides. You'll only slide though a few slides.
The biggest issue is the fact that the slide your currently looking at will change, if you add slides in front of it. To get past this you have to destroy the slick object, and reinitialize it. This makes it way less smooth, and close to unusable on my old iPhone 3g.
I don't have any easily sharable code, but I hope the demo on the page, plus my issues listed can help you recommend a better suited library, or a fix to my current implementation.
I've also looked at iScroll, but the infinity scroll gave me nothing but problems, and the documentation seemed a bid lacking. It's also my understanding that the author is working on an updated version, and haven't updated the current release for over 6 months.
I would go one step out and question your usage of a carousel at all.
Why?
If you are doing mobile development, just allow mobile devices to use their built in ones, e.g. for iPhone use
<input type="date"/>
See Date Picker for iPhone Web Application.
Carousels for date selection on desktop are kludgy at best, including this one.
Carousels (although yours is slightly different) are generally considered bad UI. This is more of a slider than a carousel, granted. Reference:
Humorous example:
http://shouldiuseacarousel.com/
Good explanation:
https://ux.stackexchange.com/questions/10312/are-carousels-effective
I'm trying to create a page similar to new google calendar landing page http://www.google.com/landing/calendar/
I'm using skrollr(https://github.com/Prinzhorn/skrollr) but I can't get the effect right, on google landing page if you do a small scroll it will send you to the next block and with skrollr I'm not able to get that navigation. Any ideas how I could reproduce that? is it possible to do with skrollr or you would recommend another js plugin?
Thanks!
In case you still haven't found a solution yourself, I've been tasked with doing a very similar thing. There are two ways of achieving this that I researched and choosing the right one mostly depends on the complexity of your design/expected result. Unfortunately I can't provide a link because the site won't be live for next couple of weeks.
This is what worked for me:
I used fullpage.js library to achieve 'full-page' scroll effect. You could also take a look at onepage-scroll.js and see which one fits you most - they don't differ that much in terms of functionality though.
Benefits of using fullpage.js (among other things):
integration is quick and simple
allows a lot of customisation through options hash
provides callbacks when scroll to another section is triggered (before or after it happens)
enables you to manually trigger a scroll via 'methods'
works surprisingly good on iPad/iPhones. Probably on other mobile devices as well, although I can't fully confirm that since that
wasn't a requirement for my project.
Now when you've got section-to-section scrolling in place, what's missing is the animations. Considering that fullpage.js provides you with callbacks, it's as easy as adding a class when a transition to another section/slide happens and then using that class to trigger an animation of your choice through CSS. This is what worked for me without facing major problems.
For more advanced things:
If you're looking to build something more complex, then I strongly recommend that you take a look at tween.js. This is what google used on the landing page that you've provided in your question.
It's a very powerful tool hence it requires quite some setup + it moves animations to javascript, which might be a hassle. I would rather keep them in CSS where they belong and dont use javascript until I really need to.
FYI I also started with skrollr but it won't really work with 'fullpage scroll' because what it really does is disabling scrolling and animating body/html through translate. Skrollr bases it's behaviour on scroll event which will not fire if you use libraries I proposed.
EDIT:
It appears that you can actually use skrollr in par with fullpage.js. You can see the answer on how in it's FAQ site. Thanks to Alvaro for claryfing that! Even then, I wouldn't use skrollr unless you really need it for some advanced parallax scrolling effect - as said before, depends on your needs though. :)
Let me know if you have any doubts or something is not clear in my answer.
Good luck!
Issue: I have problems with this page: http://kivusandcamera.com/blog/ The page loads with a proper layout, but then the two blog entries "jump" to the left behind the navigation bar. I have spent a good bit of time trying work through the various CSS, inspecting it with developer tools, etc..., but I have reached a point where I feel like I need some help. Any advice would be appreciated.
Background: This is just a basic Wordpress theme that I am trying to customize for a website, so I am not 100% sure how
Additional Information: Though I am passingly familiar with CSS, I have done hardly any work involving responsive design, media queries, etc... Basically, I am saying (1) I would not be surprised if it is something really simple that I am missing, and (2) if something could be done a better way, please feel free to let me know.
UPDATE - It looks like this issue might be Javascript or JQuery related. Basically, a style attribute is getting injected into one of the div tags. The style attribute used an absolute position, with a certain width, and I have no idea how to modify it.
UPDATE #2 - It appears the issue happens with any pages I set in the theme to "Full Width" (see also the http://kivusandcamera.com/about page.) I think those pages must get processed differently by JS layout framework that is used. Again, I still haven't figured out how that is all happening.
Turns out there were two separate issues:
(1) The JQuery auto-layout framework was resizing the various page columns with the assumption that the navigation bar was the same size as the individual columns of blog entries. That caused an issue that had to be solved.
(2) The full page CSS had to be updated to reflect the lack of a resizing navigation bar.
Ultimately, these issues were very specific to the this particular Wordpress theme, so I doubt full description of the solution would provide much of a benefit to the community. Thank you to everyone who helped lead me to the solution.
Let me start by saying I have read plenty of questions and blog posts relating to the use of combinations of backbone/jQuery mobile and comparisons of backbone/Sencha, and have actually had my head in this space for some time but still haven't found quite what I'm looking for.
I'm very familiar with Sencha and have used it for wrapped (phonegap etc.) apps in the past, and I really like it. However for a smaller code base for web projects and more control over browser compatibility and various other reasons it's not quite appropriate for certain tasks.
When I start trying to engineer mobile (but also desktop and tablet) backbone webapps from scratch I find I miss three key things
General mobile 'init', filling the screen etc. (although this is the easiest to replicate)
Tabbed, iOS-style, navigation (of course I can roll my own, but it seems silly)
Scrolling - both scrolling a piece of content, but especially the carousel and how the carousel is linked to the tabbed interface
I'm not massively bothered about mimicking each device's native OS style throughout the app, and in fact would prefer to (whilst following some sensible conventions) make them look a bit different.
Ember has flame and I've used that before, that's kind of the thing I'm looking for.
I know I can build up a toolkit of jQuery mobile, custom script, jQ plugins/iSroll, CSS libraries, backbone UI etc. and do like the idea of compiling my own 'stack' but for some reason it just doesn't feel right.
So, to bring this back around to more of an actual question. I guess I'm looking for ideally a single project that isn't specifically linked to a library - and in theory could run on it's own on a statically coded page if needs be (even though that wouldn't be the case for me now). Or perhaps some words from others who have been on a similar journey and perhaps ended up on the mix of libraries I mentioned earlier with why they decided this was the best solution.
I'm not looking to do anything too crazy, say something a bit like the old sencha oreilly example but using some carousels, and I'd cover the multiple devices and browsers with a mix of Responsive CSS and a bit of JS.
I'm going to continue looking at this myself too and report back if I find anything interesting
Cheers
EDIT
While looking into this, I realised its only really the carousel and scrolling that I really wanted from Sencha. I noticed that Cubiq has a nice slideview component that handles the carousel very neatly and with a small footprint. I found a stackoverflow answer about using this with the original iscroll for vertical scrolling. See my answer below for successfully using the two together
How to use iScroll4 with SwipeView?
This would need some tweaking to work appropriately on desktop. and I'd like to control it from a tabbed UI too. Anyway, I'm not near answering my own question but given this has had a couple of upvotes I'd post some of my thinking.
Quick edit
You can attach events for tabs to the slideview https://dl.dropbox.com/u/81328343/scroll/1.html but at the moment, it only animates for next/prev and not direct page (tab) access
Webix
Very big library of components.
I've used Twitter Boostrap with Backbone...
http://twitter.github.com/bootstrap/