We Keep Coding

carousel javascript several times

I wanna use this carousel :
[http://codepen.io/ScottMarshall/pen/FwxpH][1] on a forum, but when I repeat the code, it doesn't work well.
Can you help me ?
here, it's working, but the second container doesn't want and I don't want to change anything in the HTML...
JSFiddle

Here is working fiddle: http://jsfiddle.net/1x6251wc/2/
This is the key change to get the context "Front" instead of all of them:
var $front = $this.parent().find(".Front");
It's a poorly written plugin, but this change should get it to work across multiple instances.

Javarscript issues with dynamic tooltipster

I'm using Tooltipster which seems to be a nice jquery plugin.
Regardless I need to have my tooltips dynamic, which I don't believe should be that difficult. However I wrote a script and maybe it's because I'm tired or I don't know the simplest of javascript. Probably a combination of both.
I can't seem to get around this particular error. TypeError: $(...).tooltipster is not a function.
Here is the basic javascript code:
$("img#box_image[data-img-number]").hover(function(e) {
e.preventDefault();
i = $(this).attr("data-img-number");
var w = "http://trailerbrokerimages.s3.amazonaws.com/pics/" + i ;
window.console.log('before tool');
window.console.log('before tool ' +w);
tool(w);
});
var tool = function (w) {
$('.tooltip_two').tooltipster({content: $('<span><img style="height:191px; width:256px;"src="http://trailerbrokerimages.s3.amazonaws.com/pics/'+w+'" /></span>')});
An example of the code can be found at http://www.trailerbroker.com/go/listings/view/219
I suspect it's lame mistake on my part, thanks.

You have the same id box_image for multiple elements.
I understand that you're trying to make it unique by appending the data-img-number, but this won't work, as there's no way you can do this at run time unless your explicitly specifying different hover handlers.
Instead you could attach the hover handler to a class.
Add a class="box_image" to your <img /> elements and attach the hover as follows,
$(".box_image").hover(//rest of your code here//)
This should give you the desired functionality.

I solved this problem by using twitter bootstrap popover. Don't waste your time with tooltipers.

How to change a DIV or BODY with Javascript from a navigation menu?

a quick question... How do I change the body (in a DIV) of a webpage from a navigation link?
I have music playing in the background and need it to keep playing through the navigation menu. I'm not sure how to code it but I think a function may be the way to go?
Thanks!

You can use
document.getElementById("idOfYourDiv").innerHtml = "<div>foo</div>";
to edit the body of <div id='idOfYourDiv'></div> in pure JavaScript.
The event you want to probably trigger is onClick.
If you want to use jQuery then you can use
$('#navigButton').click(function(){
$('#idOfYourDiv').html("<div>foo</div>");
});
Edit: Good point by Andy Holmes - take a look at jQuery's load() function in the API.

Basic JQuery .animate() does not work but same CSS can be changed with .css()!

I have a bizzare problem which I have been trying to resolve. Its very basic but I just don't get it. Here it is. I am using JQuery to animate a simple display of a div element to a "block" from "none." I tried the following two options:
$('#fort_link').click(function(){
$('#fort_content').animate({'display':'block'},500);
});
$('#fort_link').click(function(){
$('#fort_content').animate({display:'block'},500);
});
I also tried with the callback function after animation is done and it does alert me but nothing really happens as far as setting the display of the div to block.
But, when I try using simple .css method as shown below, it works, as expected. I am using JQuery 1.10.2. I even tried linking to Google's Jquery UI on the CDN. I am not exactly a novice in these things... May be just missing something stupid? Please help!
$('#fort_link').click(function(){
$('#fort_content').css('display','block');
});

use fadeIn() or fadeOut instead:
$('#fort_link_show').click(function(){
$('#fort_content').fadeIn(500);
});
$('#fort_link_hide').click(function(){
$('#fort_content').fadeOut(500);
});
or fadeToogle() for shorthand.
$('#fort_link').click(function(){
$('#fort_content').fadetoggle(500);
//#fort_content will fadeIn if its hidden, fadeOut if its visible
});

From the jQuery docs:
All animated properties should be animated to a single numeric value,
except as noted below; most properties that are non-numeric cannot be
animated using basic jQuery functionality (For example, width, height,
or left can be animated but background-color cannot be
So basically, you can't 'animate' block.

Minimizable side panel in html

I'm looking for a simple javascript to create side panel with hiding after some action(ex. after clicking on some area). Something like this example but appearing from left side not from up to down as the example works.
Will be appreciated for any help :)

You have 2 options. You can either use JQuery or scriptaculous to do this. There are plenty of examples and tutorials on the internet or you can simply use java script to this.
First download émile It's a very simple javascript animation framework.
Since you didn't provide any HTML markup, I'm assuming you have something like this.
<div id="side-panel">panel content..</div>
<div id="content">main content..</div>
and let's say your side-panel element has a CSS style of width:200px. Ok, now place a button somewhere and assign it a click event. Such as onclick="togglePanel()"
Here is the content of the togglePanel function:
function togglePanel(){
var panel = document.getElementById('side-panel');
if(!panel.__closed){
emile(panel, 'width:0px');
panel.__closed = true;
}else{
emile(panel, 'width:200px');
panel.__closed = false;
}
}
If you check the documentation of the emile framework you can do lot's of other cool things.

as you haven't provided us your code (which you have build) that's why I'm just giving a code to help you (And I don't know that this is a right answer or not). This code needs jQuery Ver.1.4 at least I think so, but I'm not clear. Anyways let's get started. Here is a link to live demo.
Hope this helps!