Basically.... Get this working... JSFiddle!
I am trying to use the jQuery plugin for filtering items inside 3 UL's. (Each <ul></ul> will have a unlimited amount of list items.)
The plugin I am using is located at the link below (Quicksand) (along with the documentation & demo).
Quicksand: http://razorjack.net/quicksand/
Documentation http://razorjack.net/quicksand/docs-and-demos.html
The plugin will basically filter the results of the items contained within my <ul></ul>.
I attempted this on a number of occasions, but I am getting no console errors or anything to point me where I am going wrong, and have no idea why its not working.
I have 3 <ul class="column"></ul> tags each with list items below them (3 in this case). I need to be able to filter (and animate) all of them, using the plugin.
I have also made a - JS Fiddle - with my code for you to play with. (Quicksand is included as a 'resource').
The basic structure of my HTML is:
Menu
<!-- On click of these, filter according to 'data-value' -->
<ul id="definations" class="wrapper">
<li>all</li>
<li data-value="web">digital - web</li>
<li data-value="iphone">digital - mobile</li>
<li data-value="android">branding & print</li>
<li>event</li>
<li>motion</li>
</ul>
Content to Filter
<div id="portfolio" class="wrapper">
<ul class="column">
<li class="work item" data-id="id-1" data-type="iphone" data-title="iPhone" data-project="iPhone and Android App" data-year="2012 Project">
<img src="/css/img/product/work-demo1.png" alt="Omega"/>
<a class="view" href="javascript:;"></a>
</li>
<li class="work item" data-id="id-2" data-type="android" data-title="Android" data-project="Rich Web Application" data-year="2012 Project">
<img src="/css/img/product/work-demo3.png" alt="Description"/>
<a class="view" href="javascript:;"></a>
</li>
<li class="work item" data-id="id-3" data-type="web" data-title="Web" data-project="Site Rebrand" data-year="2011 Project">
<img src="/css/img/product/work-demo2.png" alt="Description"/>
<a class="view" href="javascript:;"></a>
</li>
</ul>
<!-- I have 3 of the above columns, I would like the filter to act on all of them -->
<!-- I have only included 1 to keep it short -->
</div>
-
Ready: JSFiddle!!
- Update -
I decided to purchase and use the Isotope plugin in the end. The examples on the site are great, and I could achieve the effect I needed.
Very customizable and the perfect plugin for what I needed it for. (If your reading this, its probably what your after).
Check it out at: http://isotope.metafizzy.co/
STATUS: Here is an example of what you want using the live demo below: jsFiddle
I highly recommend this tutorial with live demo that shows an excellent method to use the Quicksand plugin. The comments show below include a couple of tips by me explaining how to have clickable links in the navigation.
The markup is very similar yours except in addition to the Quicksand JavaScript file a separate asset file is required that configures Quicksand, which your jsFiddle is not using.
To be sure, this asset file is the Click Event handler that activates the Quicksand filtering based on your markup layout. For example this jsFiddle shows 1 of 5 ready to use examples from the Quicksand website that are linked in the Examples Section. The separate asset file I was referring to can be considered as the jQuery markup in the JavaScript window.
Also note that jQuery UI Library is required, and is loaded as an asset in the above jsFiddle.
I created a Quicksand Demo with Shadowbox, a lightbox alternative, based on the original demo. It's on the Shadowbox Forum. If you need help with that, visit and post there and I'll be glad to help.
this error/bug is 'cause the plugin doesn't work with the latest verions of jQuery. You can solved it with using just old jQuery (1.7.2 i just tryed and it works).
please sorry my english...
Related
EDIT: Did some more digging around and emberJS doesn't allow inline script execution. How would I go about creating a slideshow? Do I create a component?
I've only started out with emberJS. I've followed the guides on the website by Ember and looked on here to learn, but I've found myself in a bit of a dead end and I need your help!
This is the situation:
I want to add a slideshow to one of my templates. Now, to the best of my abilities I have added the slideshow .js and .css using 'BOWER INSTALL' and then edited my 'ember-cli-build.js' to reference the app.import for those two dependencies.
It's a basic website pages such as 'About Me', 'Services', 'Contact Us'. Nothing fancy. Say I want to add this slideshow to the 'Services' page, at first when I visit the site it loads up with no issues but when I switch between the templates/pages using {{#link-to}} function it disappears and won't load again.
Can anyone explain how I should add inline scripting on templates?
Sorry for the beginners question.
In order for me to run the slide show I need to execute the following script after the DOM elements on the page.
<script type="text/javascript">
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>
The HTML is as follows:
<div class="flexslider">
<ul class="slides">
<li>
<img src="http://placehold.it/350x150/0889d8/000000" />
</li>
<li>
<img src="http://placehold.it/350x150/c1a4f0/ffffff" />
</li>
<li>
<img src="http://placehold.it/350x150/8b4513/000000" />
</li>
</ul>
</div>
I tried to use the slick addon, but ran into issues with it. So I created another ember addon that wraps the jquery unslider plugin. Check out ember-cli-unslider.
See the simple demo.
The un-slider component expects an array of slides. Within its block you must define the HTML content used for each slide.
{{#un-slider slides=model as |slide|}}
<img src="{{slide.url}}"/>
{{/un-slider}}
In the above example, model could look like this:
[
{ url: 'https://placeholdit.imgix.net/~text?txtsize=33&txt=slide 1&w=600&h=400' },
{ url: 'https://placeholdit.imgix.net/~text?txtsize=33&txt=slide 2&w=600&h=400' },
{ url: 'https://placeholdit.imgix.net/~text?txtsize=33&txt=slide 3&w=600&h=400' }
];
You can use an ember addon that already does that: ember-cli-slick
Install it using :
ember install ember-cli-slick
You can use it in your template like this:
{{#slick-slider autoplay=true arrows=false}}
<div class="box"> <img src="https://static2.businessinsider.com/image/4f3433986bb3f7b67a00003c/a-parasite-found-in-cats-could-be-manipulating-our-brains.jpg"> </div>
<div class="box"> <img src="https://static2.businessinsider.com/image/4f3433986bb3f7b67a00003c/a-parasite-found-in-cats-could-be-manipulating-our-brains.jpg"> </div>
<div class="box"> <img src="https://static2.businessinsider.com/image/4f3433986bb3f7b67a00003c/a-parasite-found-in-cats-could-be-manipulating-our-brains.jpg"> </div>
<div class="box"> <img src="https://static2.businessinsider.com/image/4f3433986bb3f7b67a00003c/a-parasite-found-in-cats-could-be-manipulating-our-brains.jpg"> </div>
{{/slick-slider}}
If you want to learn how to make a slideshow component look at the source code here:
https://github.com/laantorchaweb/ember-cli-slick/blob/master/addon/components/slick-slider.js
This is just a wrapper component for the slick.js plugin . You would do the same for the flexslider plugin.
I have this part of HTML
<ul class="list-group" ng-repeat="thing in things">
<li class="list-group-item" ng-bind-html="tmpfcn(thing.text, thing.objects)"></li>
</ul>
Which for every iteration returns some text with hyperlinks inside. e.g.
I like the winter
I want to use qtip for each of the hyperlinks with different content for each hyperlink.
I've defined a qtip directive which I've tested with an HTML element like this
<span qtip="This is the message printed"> hover over me</span>
and it works just fine.
I've looked at many solutions for similar problems like this but I couldn't get my code to work.
Could someone provide some guidelines? An example would bereally helpful as well.
I have a folder in my angular apps directory called demos that I want to load into an iframe and a navigation that I want populated based off of the folder name. Then I want it to list only 10 of the demos and it should be a random selection.
Here is my code but I am missing some steps obv.
app/demos/democara
app/demos/randomeDemo
app/demos/anotherDemo
//UL generated from app/demos/ structure
<ul class="randomDemoNav">
<li ngClick="{{cPDemo}}"><span class="pseudo">/democara</span></li>
<li ngClick="{{cPDemo}}"><span class="pseudo">/randomeDemo</span></li>
<li ngClick="{{cPDemo}}"><span class="pseudo">/anotherDemo</span></li>
</ul>
<iframe class="demo-loader" ng-src="{{cPDemo}}"></iframe>
<script>
and that's about as far as I get.
</script>
Any thoughts on what I should search in API to accomplish this? I would also be ok using just jquery for this.
I'm having problems getting Foundation orbit to work. I can call it from regular HTML and it works fine but when I try to use dynamically generated Handlebars HTML, it does not load.
The page is here: http://danheidel.github.io/resume-foundation/#art-contact
The non-functional Orbit carosel is above, the functioning one is at the bottom of the page. (formatting on the latter is a bit screwy since it's not in the Foundation grid)
Source is here: https://github.com/danheidel/resume-foundation
I'm not seeing any errors on load so I suspect that Orbit is not firing on the dynamically templated HTML. Has anyone gotten Orbit to work with templating?
The dynamically generated HTML from Handlebars is below. As far as i can tell, it's all formatted properly.
EDIT: I'm almost certain that Orbit is not firing because it doesn't intercept HTML changes after the initial page load. I tested by having JQuery post-load modify a div with the proper HTML and Orbit did not intercept that either. Can anyone tell me how to get Orbit to fire post-load?
<div class="panel" id="minor-panel">
<h3>Contact</h3>
<ul data-orbit="">
<li>
<img src="img/contact part3_lbox.jpg">
<div class="orbit-caption">caption 1</div>
</li>
<li>
<img src="img/contact part4_lbox.jpg">
<div class="orbit-caption">caption 1</div>
</li>
<li>
<img src="img/contact part5_lbox.jpg">
<div class="orbit-caption">caption 1</div>
</li>
<li>
<img src="img/contact part6_lbox.jpg">
<div class="orbit-caption">caption 1</div>
</li>
</ul>
</div>
Ugh, poor showing Stack Overflow. :(
Anyhow, I dug through the JS and found the answer. Just make a call to:
Foundation.libs.orbit.init();
after each HTML update and it will properly format the slider.
I followed the tutorial on the site to get inline content working. Even checked their source and made changes to my own site.
Here is the site: http://miuzer.com/new/
Check the links in the upper right. About works, but register and login don't as their content is inline. What is the issue here?
I find a lot of js libraries are buggy, overcomplicated and poorly documented, fancybox is one of the worse.
Delete this line:
<a id="popup_img" style="display:none" href="img/popup_img.jpg"><img src="img/popup_img.jpg" alt="" /></a>
Alter about/register/login part like this:
<div class="header-content">
<ul>
<li>About</li>
<li>Register</li>
<li>Login</li>
</ul>
Delete these lines from interface.js
$('#popup_img').fancybox();
$('#register-dialog').fancybox({'type':'inline'});
$('#login-dialog').fancybox({'type':'inline'});
// $('#popup_img').click();
and add this line instead:
$('.header-content ul a').fancybox();
By the way, it's a very well documented and well written plugin and I can't say same thing for your code...