We Keep Coding

Selecting only one div of entire css class in jQuery

my goal is to show an overlay on a div when that div is hovered on. The normal div is called .circleBase.type1 and the overlay is circleBase.overlay. I have multiple of these divs on my page. When I hover over one .cirlceBase.type1, overlays show on every .circleBase.type1. How do I prevent this?
Here is some code:
HTML
<div class="circleBase type1">
<p class="hidetext">Lorem ipsum</p>
<hr size="10">
<strong class="gray hidetext">gdroel</strong>
</div>
<div class="circleBase overlay">
<p class="date">11/12/14</p>
</div>
and jQuery
$(document).ready(function(){
$('.overlay').hide();
$('.date').hide();
$(".circleBase.type1").mouseenter(function(){
$(".overlay").fadeIn("fast");
$('.date').show();
$('.hidetext').hide();
});
$(".overlay").mouseleave(function(){
$(this).fadeOut("fast");
$('.date').hide();
$('.hidetext').show();
});
});

Use $(this) to get current element reference and do like this:
$(".circleBase.type1").mouseenter(function(){
$(this).next(".overlay").fadeIn("fast");
$(this).next(".overlay").find('.date').show();
$(this).find('.hidetext').hide();
});
and:
$(".overlay").mouseleave(function(){
$(this).fadeOut("fast");
$(this).find('.date').hide();
$(this).prev(".circleBase").find('.hidetext').show();
});

usually when I want to target something specific you just give it an ID.
ID's play better in JavaScript than classes.
If you had a specific container, using the container as your starting point is a good route as well
$('#container').find('.something.type1').doSomething();
This is much more efficient for jquery, because it only searches .something.type1 inside of #container.

Well I'm not sure exactly what you're looking to do, but it looks like you want to replace content in some kind of circle with a hover text, but with a fade. To do that you'll have to add some CSS and it would be best to change your HTML structure too.
The HTML should look like this:
<div class="circleContainer">
<div class="circleBase">
<p>Lorem ipsum</p>
<hr>
<strong class="gray">gdroel</strong>
</div>
<div class="overlay" style="display: none;">
<p class="date">11/12/14</p>
</div>
</div>
so your js can look like this:
$(function(){
$(".circleContainer").mouseenter(function(){
$(this).find(".overlay")
$(this).find('.circleBase').hide();
});
$(".circleContainer").mouseleave(function(){
$(this).find('.circleBase').show();
$(this).find(".overlay").hide();
});
});
Here's a working solution that includes some CSS to make it nice. Try taking it out and running it, you'll see the problems right away.

Bootstrap.js Carousel with only text

I follow this tutorial to make Carousel slide .
When I define each item contain image and paragraph as -
<div class="item">
<img src="http://placehold.it/1200x480" alt="" />
<div class="carousel-caption">
<p>Caption text here</p>
</div>
</div>
it's work fine (here its jsFiddle) .
But when I reduce it to paragraph only as -
<div class="item">
<div class="carousel-caption">
<p>Caption text here</p>
</div>
</div>
it stop working (here its jsFiddle) .
How could I make it work with only paragraph such that is slide the text each switch ?

The position property of the .carousel-caption was causing the problem, without the image it goes haywire, so set it to static:
.carousel-caption{
position:static;
}
Here's the demo of it working both with and without image:
DEMO

The easiest way will simply to make images that are a background colour. If you want a cleaner way to do it, you can probably achieve the same effect using CSS.

See after removing image and leaving only paragraph
i gave the item container class the width and height of image with a background colour to div to indicate the presence just copy and paste this code in fiddle css section and run to see the change
.item{
height:480px;
width:1200px;
background-color:orange;
}

Loading hidden HTML content into DIV from anchor link

I am trying to create a group of links or buttons that will change the content of a div
<p><button>EMPLOYEE NAME HERE</button></p>
<p><button>EMPLOYEE NAME HERE</button></p>
<p><button>EMPLOYEE NAME HERE</button></p>
<p><button>EMPLOYEE NAME HERE</button></p>
Each employee has a different image and description but each div are the same size, the first employee will be shown by default as so to have no empty space but when the other 3 are selected the div is filled with the respective div according to it, then you can cycle through the profiles as you wish. Here is my div structure
<div id="employee">
</div>
<div id="employee1">
</div>
<div id="employee2">
</div>
<div id="employee3">
</div>
<div id="employee4">
</div>
Here is the javascript im trying to use
<script type="text/javascript" charset="utf-8">
$('button').bind('click', function() {
$('div#employee').html($('div#employee' + ($(this).index()+1)).html());
});
</script>
All the help i can get would be really appreciated, im not that great at java script and really need a hand with this. Im not sure i explained myself very well but i did try.
Just to confirm, all the divs are hidden until the button is pressed, then the div for that employee will appear, except the first profile which will appear by default on load.
Thanks for your help in advance.
James

Here's a pretty simplified example. It may or may not be the most efficient, but it should do what you want. This is assuming that you're pre-loading all of the content into the divs, but just hiding it at the beginning. If you are wanting to dynamically load the content, then you'll want to use some ajax
HTML
<p><button id="button1">EMPLOYEE One</button></p>
<p><button id="button2">EMPLOYEE Two</button></p>
<p><button id="button3">EMPLOYEE Three</button></p>
<p><button id="button4">EMPLOYEE Four</button></p>
<p><button id="button5">EMPLOYEE Five</button></p>
<br/><br/>
<div id="employee1" class="employeeInfo">
Employee1 is a good employee
</div>
<div id="employee2" class="employeeInfo">
Emloyee2 is an alright employee
</div>
<div id="employee3" class="employeeInfo">
Emloyee3 is the best employee ever!
</div>
<div id="employee4" class="employeeInfo">
Employee4 is not a very good employee
</div>
<div id="employee5" class="employeeInfo">
Employee5 is about to be fired
</div>
Javascript
$(function(){
$("#employee1").show();
$("button").on("click", function(){
$(".employeeInfo").hide();
$("#employee"+String($(this).attr("id").substring(6))).show();
// OR if you don't want to have to give IDs to the buttons
// $("#employee"+String($("button").index($(this))+1)).show();
});
});
CSS
.employeeInfo {
display: none;
}
JSFiddle

Orbit Slider: Captions Not Displaying

I am trying to implement the Foundation 3 slideshow Orbit into my Foundation mobile responsive design. When I try to place captions on the slides, none show but the caption bar does. This is based on the included homepage template, so the CSS for the slider components has not been altered from what was provided, but an override CSS file was included but shouldn't effect anything. (style.css) I have tried two methods, neither works. You can see the issue here. Thanks for any help you can give me, I'm new to responsive design.
<div id="slider">
<img data-caption="#slide1" src="http://placehold.it/1000x400&text=[img 1]" />
<img data-caption="#slide2" src="http://placehold.it/1000x400&text=[img 2]" />
<img data-caption="#slide3" src="http://placehold.it/1000x400&text=[img 3]" />
</div>
<span class="orbit-caption" id="slide1">Caption for Slide 1</span>
<span class="orbit-caption" id="slide2">Caption for slide 2</span>
<span class="orbit-caption" id="slide3">Caption for slide 3</span>
</div>
I have also tried:
<div id="slider">
<div data-caption="#slide1"> <img src="http://placehold.it/1000x400&text=[img 1]" /></div>
<div data-caption="#slide2"><img src="http://placehold.it/1000x400&text=[img 2]" /></div>
<div data-caption="#slide3"><img src="http://placehold.it/1000x400&text=[img 3]" /></div>
</div>
<span class="orbit-caption" id="slide1">Caption for Slide 1</span>
<span class="orbit-caption" id="slide2">Caption for slide 2</span>
<span class="orbit-caption" id="slide3">Caption for slide 3</span>
</div>
My initiation JS:
<script type="text/javascript">
$(window).load(function() {
$('#slider').orbit({
bullets: false,
timer: true,
captions: true,
animation: 'fade' });
});
</script>

I just encountered this issue as well. I managed to fix this issue by moving line 394 before line 391 in "jquery.foundation.orbit.js". The issue is that the current version orbit removes the # from the value of data-caption before it parses the text in the .orbit-caption span.
So I don't see anything wrong with your code examples. You just have to fix "jquery.foundation.orbit.js" yourself, or wait for the next release that fixes it.
Current Version:
390. // if location selector starts with '#', remove it so we don't see id="#selector"
391. if (captionLocation.charAt(0) == '#') {
392. captionLocation = captionLocation.substring(1, captionLocation.length);
393. }
394. captionHTML = $(captionLocation).html(); //get HTML from the matching HTML entity
Fixed Version:
390. captionHTML = $(captionLocation).html(); //get HTML from the matching HTML entity
391. // if location selector starts with '#', remove it so we don't see id="#selector"
392. if (captionLocation.charAt(0) == '#') {
393. captionLocation = captionLocation.substring(1, captionLocation.length);
394. }
If you're using "foundation.min.js," you'll want to edit line 46. Look for this:
t.charAt(0)=="#"&&(t=t.substring(1,t.length)),n=e(t).html()
and just reverse the two parts to look like this:
n=e(t).html(),t.charAt(0)=="#"&&(t=t.substring(1,t.length))
I haven't tested to see if this breaks anything else, but it does fix the caption issue that you encountered.

The framework obviously has predefined classes and ids so you have to use that, if you use others that aren't defined, it will not work. Your code is almost ok, but wherever you used "slide1", "slide2", "slide3" you should use "#captionOne", "#captionTwo", "#captionThree".
From the website: http://foundation.zurb.com/docs/orbit.php
Adding Captions
Another awesome feature in Orbit is the ability to add captions for each slide. The process is simple, just add data-caption="#captionId" to the content div or img. Then, below your div id="featured", add span class="orbit-caption" id="captionId" that will hold your caption content. You can add as many as slides you have available, just make sure the data-caption and the id of the span are the same and that you add # to the data-caption like in the code below.
<div id="featuredContent">
<div data-caption="#captionOne">
<h4>This is a content slider.</h4>
<p>Each slide holds arbitrary content, like text or actions.</p>
</div>
<div data-caption="#captionTwo">
<h4>We can include text and buttons, like this!</h4>
<p>We take no responsibility for what happens if you click this button.</p>
<p>Rock My World!</p>
</div>
<div data-caption="#captionThree">
<h4>What? You did not click it?</h4>
<p>We gave you the benefit of the doubt. Maybe you did, and now you are back!</p>
</div>
</div>
<span class="orbit-caption" id="captionOne">Here is a caption...</span>
<span class="orbit-caption" id="captionTwo">Here is a caption2...</span>
<span class="orbit-caption" id="captionThree">Here is a caption3...</span>
If you follow what i wrote it should work. Hope it helps.

Insert text in the middle of a dynamic div

How can I insert text in the middle of text?
This is my code:
<div class="MyText"> some content some dynamic dontent. my color is BLUE. some content </div>
Here I need to change the Value "Blue" to any other color by Jquery. Other Content in the div is come dynamically, So Apart from html(), append(), is there any way to fill it like php ?
Here we can do it via php like this
<div class="MyText"> some content some dynamic dontent. my color is <?php echo("blue") ?>. some content </div>
Can we do it in Jquery/ Javascript ?
Thanks in Advance

Use a SPAN tag with an id you can easily retrieve. Then you can change the content safely without having to resort to brittle manipulation.
<div class="MyText"> some content some dynamic dontent. my color is <span id="myColour">BLUE</span>. some content </div>

<div class="MyText"> some content some dynamic dontent. my color is <span id="blue" style="display:none">BLUE</span>. some content </div>
<button onclick="document.getElementById('blue').style.display='inline'">click me</button>
Sorry but i can't give you a jsfiddle of this but this will work.