We Keep Coding

How to find the height of the individual slides of a carousel

I have a carousel in which there are three slides the markup is something like this below
<div id="corpsite-carousel">
<div class="slide">
<!-- slide 1 content -->
</div>
<div class="slide">
<!-- slide 2 content -->
</div>
<div class="slide">
<!-- slide 3 content -->
</div>
<div class="controls">
</div>
</div>
So there are three slides and each has a varying length of content(which includes text and images), after implementation, I see each slide to have its own height based on the content inside it which makes it a very bad user experience (as by changing the slides the sliding bullet controls change up and down). I am trying to set the height of the slides to the slide whose height is the highest.
I am trying using the following jquery code to find the height of each slide
$(document).ready(function(){
var slides = $('#corpsite-carousel .cmp-carousel__item');
var heightsArr
console.log(slides);
slides.each(funiction(i){
var height = $(this).innerHeight();
console.log(height)
})
})
but the console shows me the height of the first slide which is correct but the rest 2 slides heights are not correct(i checked in the dom after sliding and checked the height of each slide) I think this is because the slide 2 and 3 are not available yet on the screen. what should be the approach or the best method to set the height of the slides.

Maybe a little sleight of hand - something like this?
$(document).ready(function(){
maxHeight = 0 ;
var slides = $('#corpsite-carousel .cmp-carousel__item');
var heightsArr
console.log(slides);
slides.each(function(i){
maxHeight = Math.max( maxHeight, quickMeasure($(this)));
})
})
function quickMeasure(el) {
var previousCss = el.attr("style");
el.css({
position: 'absolute', // Optional if #myDiv is already absolute
visibility: 'hidden',
display: 'block'
});
theHeight = $(el).height();
el.attr("style", previousCss ? previousCss : "");
return theHeight
}

How to create span content on mouse hover?

I want a slider with content. but the content should appear only when mouse hover. This is the code I'm using:
<div id="slideshow" style="width:560px; background:#999;">
<div id="slidesContainer">
<div class="slide">
<img src="js/1.jpg" />
<div> some text </div>
</div>
<div class="slide">
<img src="js/2.jpg" />
<div> some text </div>
</div>
<div class="slide">
<img src="js/3.jpg" />
<div> some text </div>
</div>
<div class="slide">
<img src="js/4.jpg" />
<div> some text </div>
</div>
</div>
</div>
and the jquery 1.8.3 lib and this code
$(document).ready(function(){
var currentPosition = 0;
var slideWidth = 560;
var slides = $('.slide');
var numberOfSlides = slides.length;
// Remove scrollbar in JS
$('#slidesContainer').css('overflow', 'hidden');
// Wrap all .slides with #slideInner div
slides
.wrapAll('<div id="slideInner"></div>')
// Float left to display horizontally, readjust .slides width
.css({
'float' : 'left',
'width' : slideWidth
});
// Set #slideInner width equal to total width of all slides
$('#slideInner').css('width', slideWidth * numberOfSlides);
// Hide left arrow control on first load
manageControls(currentPosition);
// manageControls: Hides and Shows controls depending on currentPosition
function manageControls(position){
if(position >= 4)
{
position=0;
currentPosition=0;
}
// Hide left arrow if position is first slide
if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
// Hide right arrow if position is last slide
if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
}
function Aplay(){
// Determine new position
currentPosition = currentPosition+1 ;
// Hide / show controls
manageControls(currentPosition);
// Move slideInner using margin-left
$('#slideInner').animate({
'marginLeft' : slideWidth*(-currentPosition)
});
setTimeout(function(){Aplay();},2000);
}
setTimeout(Aplay(),20000);
});
now the <div> some text </div> should appear only when mouse hover, example: http://www.backslash.gr/demos/contenthover-jquery-plugin/#demo4

CSS
<style type="text/css">
.title {visibility:hidden;}
</style>
HTML add a class title to all needed DIV elements
<div class="title"> some text </div>
Add this to your script
$('#slideInner').mouseover(function() {
$('#slideInner .title').css('visibility', 'visible');
});
$('#slideInner').mouseout(function() {
$('#slideInner .title').css('visibility', 'hidden');
});
Working jsBin

A simple solution would be to set up your 'slide' divs like this:
<div class="slide" onMouseOver="$('#TEXT1').css('display','block')" onMouseOut="$('#TEXT1').css('display','none')">
<img src="js/1.jpg" />
<div id="TEXT1" style="display:none;"> some text </div>
</div>

It's easy and i think this is the fastest solution, because require less jquery than the others (= keep your code clean)
Add the following class to every div which contain the description: class="slide-desc" to your HTML
Add var slideDesc = $('.slide-desc'); to your JS, which is just to fit your way of write jQuery, and slideDesc.hide(); (or $('.slide-desc').hide;, to use a faster way instead). This statement (it's better to call the .hide() method in first line of your JS, to avoid the description flashing while page is loading. Put it just after your declaration of variables.
Add somewhere in the JS these lines: $('#slidesContainer').hover(function(){
slideDesc.show();
});
You've done! :D

setting height of divs to window height

I have four divs with different IDs. How would I set height for all these divs?
<div id="slide-1">a</div>
<div id="slide-2">b</div>
<div id="slide-3">c</div>
<div id="slide-4">d</div>
I know we can do something like this below, but there are other divs too before this.
$('div').height($(window).height());
I want to set these four divs to window height alone. I can't hard-code here as the slides may vary.

this will select all the divs that their ids start with "slide-" and set the height to window height:
$('div[id^="slide-"]').height($(window).height());

$('div[id^="slide-"]').css("height", $(window).height() + 'px');
Demo:
http://jsfiddle.net/463KU/1/

DEMO
$('div').filter(function() { return /^slide-[1-4]$/.test( this.id ); })
.height( $(window).height() );

if you like to increase the hieght of specific divs use class for multiple
<div class="divHeight" id="slide-1">a</div>
<div class="divHeight" id="slide-2">b</div>
<div class="divHeight" id="slide-3">c</div>
<div class="divHeight" id="slide-4">d</div>
$('.divHeight').height($(window).height());

I also recommended you use this way to get window height:
var windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
<div class="divHeight" id="slide-1">a</div>
<div class="divHeight" id="slide-2">b</div>
<div class="divHeight" id="slide-3">c</div>
<div class="divHeight" id="slide-4">d</div>
$('.divHeight').height(windowHeight);

Div Inner Content width

I have a div structure as follows:
<div id="showHide">
<div>Alarm</div>
<div>Alarmasdf</div>
<div>Alarmasdffasdff</div>
Is there any way that I can get the width of the content like (Alarmasdffasdff). This content is the largest.
I am able to get the length of the content, but not the width.
Please suggest.

Assuming the div elements have been changed to display: inline, the width of the element will match the content.
If this is not the case I would suggest wrapping the content in a span, or any other suitable inline element, and getting the width of that. For example:
<div id="showHide">
<div>
<span>Alarm</span>
</div>
<div>
<span>Alarmasdf</span>
</div>
<div>
<span>Alarmasdffasdff</span>
</div>
</div>
$('#showhide').find('div:last span').width();

The Width of all of your 'div's is 100% regardless of their content. This is how block level elements behave...

use :contains()
$( "#showhide div:contains('Alarmasdffasdff')").width();

As said by others, width of a block level element is 100% regardless of its content's width. So first you need to change the display of the div to inline-block
<style>
#showHide div
{
display:inline-block;
}
</style>
<div id="showHide">
<div>Alarm
</div>
<div>Alarmasdf
</div>
<div>Alarmasdffasdff
</div>
</div>
$('#showhide>div:contains("Alarmasdffasdff")').innerWidth();

Jquery makes it very easy.
$('#showHide').find('div:last').css('width');
css() returns the computed style of the element, which is the inline styling as well as default styling and any other css selector.
Without jquery it goes a little less "clean"
var mystyle = window.getComputedStyle ? window.getComputedStyle(myobject, null) : myobject.currentStyle;
mystyle.width shows the calculated width, where myobject is the element you want to check.

html :
<div id="showHide">
<div>Alarm</div>
<div>Alarmasdf</div>
<div>Alarmasdffasdff</div>
</div>
script :
var lastDiv = $('#showHide').find('div').last();
var lastDivWidth = lastDiv.width();
alert(lastDivWidth);
jsFiddle

<div id="showHide">
<div class="content" style="width:50px" >Alarm</div>
<div class="content" style="width:60px">Alarmasdf</div>
<div class="content" style="width:120px">Alarmasdffasdff</div>
</div>
Custom width is given so that u can understand the difference, else every div will be having same width, and class content is added for convinience of processing
findWidth("Alarmasdf"); // Calls the function below
function findWidth(value)
{
var width=0;
$(".content").each(function(e){
if($(this).text()==value)
{
width = $(this).width();
}
});
alert(width);
}
Check the fiddle here
http://jsfiddle.net/46LH9/

How to set width of div#a equals to div#b

Let I've two divs on my page which I want to set the same width. Consider the following markup:
<div>
<div>
<!-- content -->
<div id="a">
</div>
</div>
</div>
<div id="b">
</div>
How can I set the width of div#b equal to the computed width of div#a

var width_a = document.getElementById("a").offsetWidth; //get the width of div#a;
document.getElementById("b").style.width = width_a + 'px' ; //set the width of div#b to width ofdiv#a

Just Simply do this
document.getElementById("a").offsetWidth=document.getElementById("b").offsetWidth;

this will work
$('#b').width($('#a').width());

By using jQuery you can set as below:
$('div#b').width($('div#a').width())
Working Example: JSFiddle Demo

Using Javascript:
document.getElementById('b').style.width = document.getElementById('a').offsetWidth + 'px';
Using jQuery:
$('div#b').css({
width: $('div#a').width()
});