We Keep Coding

clone() dose not bind event / plugin

I have parallax attached to same div which I clone but after I clone parallax stops working for cloned elements.
Check my example : https://codepen.io/anon/pen/rYOrEO
My Code:
Html :
<div class="container">
Clone
</div>
<section class="content">
<div class="jumbotron text-center bg-faded my-5" style="background: url('http://lorempixel.com/1200/600/abstract/1') no-repeat center;" data-paroller-factor="0.5">
<h1 class="heading-1 py-5 text-white">Hello Parallax!</h1>
</div>
</section>
JavaScript:
$(window).paroller();
$(function(){
$('.clone').on('click', function() {
alert('hi');
$(".jumbotron").clone().appendTo(".content");
});
});
Example : https://codepen.io/anon/pen/rYOrEO
Thanx in advance

I had a similar problem before and it can be done. It was a problem with CSS taking effect when page laods and not when you clone.
If I remembered right to fix it you need to create an object of the cloned div similar to this example:
// will be different for you!! but might set you on the right direction
var divToClone = document.getElementsByID("#cloneMe");
var clone = divToClone.cloneNode(true);
var element = clone.getElementsByTagName("h1");
Now with my var Element I can add attributes and style again like this
//Nothing to do with parallax here but look at you CSS and fill it in again like below
element.innerHTML = "Whatever you want or need";
element.style['background']= "url(/iwa/images/16x16/randomExample.png) no-repeat, fixed";
element.style['background-position']='center right';
element.style['border']='none';
Hope that helps!

Javascript align vertical center many child divs within parent

Trying to dynamically resize the div (col with pad) with JavaScript so that it is vertically middle of the parent div (row).
The text blocks vary in size as do the images and there are many of these divs within the page.
I'm quite close to achieving this with the provided code, but the loop seems to be repeating more times than it should and sets the height incorrectly on the last pass, almost like it is halving the space over and over again.
Is there a way to make the JavaScript only run once?
<div class="row">
<div class="col pad">
<p>Text here</p>
</div>
<div class="col">
<img src="image.jpg">
</div>
</div>
$(window).load(function(){
$('.row').each(function() {
var parentDiv = $(this).height();
$('.pad').each(function() {
var childDiv = $(this).height();
var space = parentDiv - childDiv;
var half = space/2;
$(this).css('paddingTop', half + 'px');
alert(half);
});
});
});
I'm unable to use css to achieve this as col are floated.

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/