How can I successfully loop through an array of classes in JQuery? - javascript

I'm trying to pass an array of classes holding a comment each into a function that will display all the comments in a list. The purpose of the function is to make the list drop down down with an animated feel to it. Slightly different to use .slideDown and very similar to google+'s way of showing all comments of a post.
Here is a JSFiddle link from one of my other questions. This what I'm trying to do:
http://jsfiddle.net/MZzUr/9/
Here is my attempt to do the same thing but using an array of classes holding the comments instead of a for loop:
http://jsfiddle.net/A9WLc/4/
Don't intend to give up on this.. been at it for days now.
Thanks in advance.
Kind regards

I think I know what you are going for. This isn't exactly it but it might be useful: http://jsfiddle.net/xkfqN/19/
I have tried to recreate how google does their animation for a social network I worked on but gave up and just went with the way facebook does it...it just pops :) I don't know what kind of voodoo magic google does but it is really hard to replicate.

When you use items[0] it returns the DOM node, not a jQuery object. It is equivalent of using .get(index). You want to use .eq(index) which returns the jQuery object.
var myItem = items.eq(0);
var height = myItem.height();
myItem.hide();

Related

How to implement Scroll Navbar?

I'm not sure if the name "scroll bar" is true at all. I would like to install a scrollbar, in which you can simply select a city with the mouse wheel (on a smartphone with a wipe) and then select the possible cities of the respective country in the second window.
I mean something like this has already been seen but unfortunately I could not find a good example.
Does anyone know the exact name and has perhaps a sample code?
Updated the answer as per comment
I think you better use Select2 for this.
You can find all the details and support you need in its Basic Usage page.
And about your Question - only post question if you have tried solving it by your self (if you have tried, post the method you have tried with a sample code) or try Googling it, this may help more than you know.
Update2
As per your comment, i understand that what you need is a spinner in this case you can use Input Spinner Plugin for this. You will need some styling changes but this will work your way.
Hope this was helpful for you.

Jquery ticker not working

I don't know why I've had a few issues explaining this problem so I have created this image to show what I am trying to do.
I have a ticker and I'm simply trying to duplicate it below the existing one with a different list. the black tile bar just represents a break so don't worry about styling. I hope this is possible, if not I would also like to know why.
Many Many thanks, attached is a JSfiddle if it is possible to show a working example in the JSfiddle it would be even nicer :)

Problems positioning nodes with d3.js force-layout. Nodes "re-entering" each data update, example inside

I previously asked this question a few days ago, but I do not think anyone besides paxRoman actually figured out what I was asking, as it was hard to describe without an example.
We did however manage to figure out what might be my problem, and I managed to put the code up on bl.ocks.org so you can see an example of what I mean!
Here is the example: http://bl.ocks.org/3020018
Each time the data is refreshed (in this example, just read from a json file), all the nodes are re-created and re-added to the drawing.
What I want to happen
I want the nodes to update without moving at all.
If a new node exists in the new array, it should just appear like they all do now, if something exists in the previous array but not in the new, it should simply disappear.
As you see in the example, that is not what is happening and I have not been able to figure out why for the past week.
So my question is:
What am I actually doing wrong? Is it my lack of links? What is the problem? The two of us spent over an hour looking at this yesterday and could not make sense of it, I have spent a good week on it now without much progress :/
My old question/post is still up, but it's badly formulated and I had no example to show.
Thanks for helping me :)
So, I am pretty sure I have solved most of my problems!
It came down to how I was adding/modifying the nodes when updating the data. I completely forgot about x/y and similar attributes since I did not set them myself, so I was adding "new" objects every time I updated the data, even if they weren't actually new.
With some jQuery magic using $.extend() I have sort of gotten it working, but it's still slightly moving/pulsing whenever I update the data.
I updated the gist to show the changes. http://bl.ocks.org/3020018
I would still like to remove that little pulsation too, so let me know if you have any ideas :)
Have you tried setting the friction parameter (where you have the linkDistance and charge set)? Setting it to 0.9 will speed up finding the final position as I think it defaults to 1 if not set. Its simply a case of adding
.friction(0.9) // or any suitable value closer to 0 - have a play!
Hope that helps

conflicting jQuery / Javascript with Galleria

Basically, it is quite hard to explain but I have two Imageslider's that are using the same code? However the first one work's perfect, the second one is displaying a list of images, I figured this might be to do with a DIV ID? Or something that only allows you to use it once...
I am new to this and the problems can be found at this link:
www.steveatattooartist.com
Basically when you click 'sketchbook' the images are all over the place, but when you use Tattoo's they are all perfect.
I am using exactly the same code, why is that a problem? :?
Any help is help, or if you can't help direction usually is a big helping hand!
looks like the main problem you're going to have is lack of uniqueness in your id's. change the id="gallery" to class="gallery" and change the javascript to look at $('.gallery').
jQuery expects id uniqueness and will only select the first element with a given id.

How to create an endless picture-show without marquee?

I wrote a module for Joomla! 1.5 which shows the pictures (banners) with the most clicks. Now I want to show this list scrolling on the home-site. With "marquee" there is a break after the last picture.
I've found an advice which said I'll have to create a div-container with overflow: hidden and a second div with javascripte which changes the positions of the pictures.
Can anyone help me to write this code, because I don't get javascripte?
There are plenty of free ones you can get that are already written for you.
Try one of these jquery scripts to do what you are looking for...
http://plugins.jquery.com/project/Plugins/category/48
The best way to implement such feature is looking to this great JQuery Video tutorial and you will have a great product :)
URL: JQuery Spy effect
MOV: Jquery Spy effect
Hope that is exactly what you are looking for.

Categories

Resources