How to create 2 Image rotation carousels on the same page using one jquery script file - javascript

new to jquery need help please!!... - I'm trying to create two carousels on the home page using the example below but doesn't seem to work.
I realise that the example is using ids, tried to change them to classes but didnt it do much.
http://www.dreamcss.com/2009/04/create-beautiful-jquery-sliders.html
Thanks

An important philosophy in jQuery is "Don't reinvent the wheel."
Just use a plugin for features like this, such as Easy Slider!
Here's a demo of more than one on a single page
Oh, and in the future, be sure to describe what doesn't work as well as your code if you want people to actually be able to help you with your specific problem.

Related

KNockout JS - Loading external templates

Hi folks I am building a CRUD system very similar to this example http://jsfiddle.net/rniemeyer/WpnTU/.
Context:
I have several HTML pages that each contain the same table of data but showing different information (each page have their diffirent use).
On each row theres an edit button like yuo see in the example. Since the modal form is the same accross all the HTML pages I decided to create one HTML page containing the modal form. I then use jquerys load function like so $("#load_modal").load("pages/modal_form.html"); on each of the HTML pages.
Problem:
On a basic HTML page this is working out great. I tought this was a brilliant approach and gave myself a pat on the back. But now the problem I have is that when started implementing knockout it dosent seems to be working together very well. Modal dosent always pop up correctly and such.
My question:
At this point im not looking to figure out my code issue. I spent days and weeks staring at it and I came to the conclusion that I need to rethink my approach altogether. Im curios to hear some of your opnions on what would be the best aproach to tackle something like this.
Ideas so far:
I found this https://github.com/rniemeyer/knockout-amd-helpers/tree/master/examples But dosent use the latest knockout version and seems more complicated for something simple I need.
I also saw that using requireJS would be another idea but honestly these seem to complicate things for me.
Would anyone know of a simpler template solution or even have a whole different approach to this?
Using jQuery to modify your DOM is not going to work well in Knockout. You can use components to define the form HTML. Use an observable to switch which component is displayed.

angular-isotope image overlap

I'm using angular-isotope in my homepage to organize my items but sometimes it overlap my images...
To fix it I know I should use imagesLoaded and when I used Isotope with jQuery it was pretty easy to implement but now I'm using it with AngularJS how can I add it?
I tried to modify a bit the directive but I still don't have the knowledge to do it properly and I received tons of errors or it didn't worked at all...
I also found angular-images-loaded but I can not understand how to implement it to work with angular-isotope.
I'm pretty sure someone already had this kind of problem but I didn't found any Question related to this argument here or Googleling around.
A link to a tutorial or a small piece of code would be appreciated to understand how to fix / implement it.

Get a style switcher like on themeforest

I would like to add a style switcher to my site and I like the ones used on themeforest templates.. How is that done and what library are they using?
Example: http://centum.envato.tabvn.com/demo.php
Slides in from the left side.
I use drupal so I'm hoping there is a module but I couldn't find anything like it.
Any ideas?
WHY AM I GETTINGS VOTED DOWN? PLEASE EXPLAIN IF I'VE DONE SOMETHING WRONG HERE
This is fairly easy to create yourself just by adding classes with an onClick handler, and then styling with the classes how you see fit. They're probably not using a plugin for this but is actually a bespoke function they've created them selves with the jQuery library.
For example.
$('.style').on('click',function(){
$('.itemToChange').addClass('styleOne');
});
Please see a basic example with this Fiddle.
Please note this is a VERY basic version, and the example you show is much more indepth
if someone still looking here are two solutions
Blast.js or
JTS
The example you provided is using this
http://drupal.org/project/flexslider
EDIT
I'm sorry I got confused.
The style switcher is custom made by Envato, the company behind themeforest you can find the code here
http://centum.envato.tabvn.com/sites/all/themes/centum/js/switcher.js

Simple lightbox feedback form? Included screenshot

There are so many lightboxes to choose from, I'm looking for a very lightweight one to use in an embedded javascript widget that would be a single domain name. I saw the perfect one on chainreactioncycles.com, it popped up out of nowhere so I took a screenshot:
I tried looking for info on it on the page source, but couldn't find anything that would let me trace where it came from... Would anybody know of one like this? Or exactly that one?
If not exactly like above, anything similar would be great too, keeping the following in mind:
Very small javascript download (animation not needed)
Self contained, not dependent on any libraries other than jquery (since I'm already using that anyway).
Works in major browsers
Close button (like GetSatisfaction or UserVoice)
Dims background
Avoids javascript namespace conflicts (or can easily be made to avoid them)
CSS styling of lightbox does not interfere with site styling
Have you used an existing lightbox scripts for this same purpose with similar requirements? Did you roll your own? Insights welcome!
What you are looking for is called a modal box.
Here is a list of them
... and here is a striking replica of what you are looking for
Check out Zoombox.. It sounds like what you're looking for... Simple to use... Allows custom content.. jQuery Module... From past experience it covers what you have outlined as requirements etc
http://www.grafikart.fr/zoombox will tell you all you need to know.

fancybox-like inline popup implementation problem

i'm busy writing my very first jquery plugin and i ran into some problems. I have modified and customized other people's plugins quite succesfully in the past, but i'm more a designer than a programmer and this is my first javascript/jquery experiment build from scratch. with a lot of research and plenty of try and error i managed to realize most of the features i wanted. and besides the code probably being dirty, inconsistent and a pita for every pro, the plugin is working pretty well. the problem i have is, the way i've written it, i apparently cannot use more than one intance of the plugin on one page. if i do, it breaks appart. i tried to wrap the whole thing into a this.each function, but this as well breaks everything appart. right now, i have no clue at all, how to make this work. I'm grateful for any suggestions or hints, as my brain slowly starts to boil.
here's the little sucker: the .js file
you can see it in action here: demo
when you say more then one instance, I'm imagining a clone of your demo, so two of the same thing on one page.
one problem I see is that you are using ID's in your plugin, and you shouldn't be using ID's when you want multiples of the same thing to be able to live on the same page. try and switch to classes.

Categories