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.
Related
I'm working with a third-party code and I'm quite limited in terms of filtering a list of elements.
Each of these elements has this structure:
<div class="item-preview">
<div class="item-info">
<div class="tag">
<svg class="tag-public"></svg>
</div>
</div>
</div>
The only thing that changes is the svg class, so it's whether tag-public or tag-private. Depending on the user type that's checking the content, I'd like to hide it when it's tag-private. I've tried this:
$('.tag-private').closest('.item-preview').hide();
And this:
$('.tag-private').parents('.item-preview').hide();
But any of them works. The code uses React and the items are brought by JSON/AJAX, so I guess the problem is related to trying to modify the page once is loaded...
Any thoughts on how to make my JS "override" the original code? Thanks a ton.
I am working on a website using Meteor. On one of the pages, I would like some of the images and divs at the top to be animated onto the page.
I have achieved this by adding:
Template.home.rendered=function(){
$('.animateblock').addClass('animated');
};
The added class changes some of the css properties, giving me the desired effect.
The problem I am having is that if I go to a different page of the site and then revisit the page with the animations, it doesn't reset. The class is only ever added once, and I haven't been able to figure out a way to have it removed when another page is visited.
My html code is as follows:
<div class="textAnimate animateblock">
<img src="/home/100.png" class="animateblock percent100" alt="100%">
<img src="/home/antibiotics.png" class="animateblock antibiotic" alt="Antibiotic Free">
<img src="/home/natural.png" class="animateblock natural" alt="All Natural">
<div class="horomoneAnimateContainer">
<div class="animateblock horomoneAnimate">
<img src="/home/horomone.png" class="horomone" alt="Horomone Free">
</div>
</div>
</div>
<div class="stampAnimate animateblock">
<img src="/home/tasty-stamp.png" class="tasty" alt="Tasty Certified">
</div>
I have tried a few different methods, such as adding a removeClass before the addClass, hoping that would fix it, but it did not.
Template.home.rendered=function(){
$('.animateblock').removeClass('animated');
$('.animateblock').addClass('animated');
};
I also tried creating a Template.destroyed section like so, but that didn't work either:
Template.home.destroyed=function(){
$('.animateblock').removeClass('animated');
};
I am using Meteor 1.2.0.1 and am also using iron router, but haven't been able to find a solution to add and remove classes with it. Any suggestions are appreciated!
I do something like this to call in jQuery on template loads:
Template.Messages.onCreated(function() {
var self = this;
self.autorun(function() {
self.subscribe('messageDB', function() {
$('.loader').delay(300).fadeOut('slow', function() {
$('.transition-wrapper').delay(200).fadeIn('slow');
});
});
});
});
Meteor Chef has a great resource on loading patterns here.
I want to implement carousel on my web page.I have created a plunker page for the same.
In that link, i have used CSS3 transformations to create circle effects.
In the above link i have removed the code which i had for carousel implementation because it was not working.Actually what happens is that most of the jquery caosuel available like(elastslide,liquidcarosel,flexslider) etc work only if the img(which needs to be slided) is directly under "li" tag.But in my case, i can't keep img directly under "li" because of the css3 transformations i need.(See index.html page)
http://plnkr.co/edit/PxTtJ2expidIamWUqXLj?p=preview&s=carousel
for eg
<li>
<div class="ch-item">
<div class="ch-info ch-info1" >
</div>
<div class="ch-thumb ch-img-1">
<p class="text"> Java7</p>
</div>
</div>
</li>
Could anyone please suggest how can i implement it.
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.
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...