clone() dose not bind event / plugin - javascript

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!

Related

on scroll "sticky-element" will need stick to before "footer-area" not on bottom of page

I have one "sticky-element" div, on page load which I have been set position:fixed with bottom right aligned.
Requirement : on page scroll I would like to set it stick to just before on my "footer-area".
Issue : I have handled successfully css and js part on load, but I am not able to find logic that how can i add another class to my "sticky-element" once "footer-area" will start visible on window.
HTML
<div class="container">
<div class="page-section">
<p>lots of code and other div nested in this as well</p>
</div>
<div class="sticky-element">
</div>
<div class="footer-area">
</div>
</div>
jquery
$(window).on("load",function(){
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if(){
$(".sticky-element").addClass("some-class");
}
else {
$(".sticky-element").removeClass("some-class");
}
});
});
css
.sticky-element { position:fixed; }
.sticky-element.some-class { position:static; }
In above one if() my logic is that I would like to use if "footer-area" is visible on window than only add class will works.
Please suggest if anyone has Simple and short(not too much complex) coding way for this.
Thanks in advance
Try something like that:
<div class="container">
<div id='wraper'>
<div class="page-section">
<p>lots of code and other div nested in this as well</p>
</div>
<div class="sticky-element">
</div>
</div>
<div class="footer-area">
</div>
</div>
$(window).on("load",function(){
$(window).scroll(function() {
var bottomOfWraper = $('#wraper').offset().top + $('#wraper').outerHeight();
var bottomOfWin = $(window).scrollTop() + $(window).height();
if( bottomOfWin > bottomOfWraper){
$(".sticky-element").addClass("some-class");
}
else {
$(".sticky-element").removeClass("some-class");
}
});
});

Javascript not activating

I have a script that is made to add .fix class to a header tag with #header-wrap id once the page is scrolled a certain amount, but for some reason nothing happens on scroll.
HTML:
<header id="header-wrap">
<div id="redline"></div>
<div id="velkommen"></div>
<div id="header">
<div id="indre">
<h1 id="logo">MCBERGBYS</h1>
</div>
</div>
</header>
<script>
var wrap = $("#header-wrap");
wrap.on("scroll", function(e) {
if (this.scrollTop > 143) {
wrap.addClass("fix");
} else {
wrap.removeClass("fix");
}
});
</script>
I'm very new to javascipt so I bet something obvious is off. Any help is appreciated, thank you.
You need to bind your .on('scroll') event to the $(window), not to your #header-wrap element. This will check when the document is being scrolled up and down, as opposed to seeing when an individual element is being "scrolled" (like when you move up and down in a textarea).

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/

Can't avoid a div step on another div

Here is the problem site.
Let me explain in case I will solve it, so everyone can know about it.
I have two divs with the following html code
<div id="dataview" class="data-views" style="width:100%; height:580px; padding:0; border:solid; margin-bottom:10px;">
<div class="row-fluid">
<div class="col-md-8">
<div class="timeline"></div>
</div>
<div class="col-md-4">
<div id="map" class="map"></div>
</div>
</div>
</div>
The two divs I am talking about are the "col-md-8" and "col-md-4"
If you try to resize the window, then the second div will move on the bottom of the first one, but it covers everything else behind it. I try to play with css, but without a success. Any suggestion?
Edit:
Screenshots from the problem
How it is on full window: screen1
How it is after resize: screen2
Edit 2: I think something as a sollution but it is to complicated for me. Maybe someone could help. If the size of the screen is less than col-md-8 (so the second div will move to the bottom), I will change the height of the div (data-views) to 580+(height of map).
I tried this:
<script>
$(window).resize(resizemap);
function resizemap() {
var winWidth = $(window).width();
if (winWidth < 995) <--on 995px the map doesn't fit and move on the bottom.
{
var Hmap = $("#map").height();
$('#dataview').css("height", 580+Hmap);
}
}
</script>
The problem is that instead of change the size of the whole div, it changes the height only of the timeline. And the map moves again.
I figure how to do it. Here is the result:
HTML:
<div id= "dataview" style = "height:590px;border:solid;">
<div class="data-views" style="width:100%;height:580px;padding:0;margin-bottom: 10px;">
<div class="row-fluid">
<div class="col-md-8">
<div class="timeline"></div>
</div>
<div class="col-md-4">
<div id="map" class="map"></div>
</div>
</div>
</div>
</div>
And here is the javascript:
<script>
$(window).resize(resizemap);
window.onload = resizemap;
function resizemap() {
var winWidth = $(window).width();
if (winWidth < 995)
{
var Hmap = $("#map").height();
$('#dataview').css("height", 590+Hmap);
}
}
</script>
The only problem is that if I resize the window with the maximize button of the browser, the dataview height stay the same.

Javascript change div content upon a click

I'm pulling a content from PHP array and I have a situation like this:
<div class="weight-display">
<span>04/25/2011</span> <span>100lbs</span> <span>Edit</span> <a href="http://foo.com">Delete</span>
</div>
<div class="weight-display">
<span>04/27/2011</span> <span>150lbs</span> <span>Edit</span> <a href="http://foo.com">Delete</span>
</div>
etc...
Now when somebody clicks on Edit within, let's say, first div where weight is 100lbs, I just need that "div" to change and to have input field instead of simple text where weight is (while others will remain the same) and to be like this:
<div class="weight-display">
<span>04/25/2011</span> <input type="text" value="100" /> <span>Save</span> <span>Cancel</span>
</div>
<div class="weight-display">
<span>04/27/2011</span> <span>150lbs</span> <span>Edit</span> <a href="http://foo.com">Delete</span>
</div>
etc..
So basically div has to "reload itself" and change content. Now I really need some very simple Javascript solution. Preferably I would like a solution with a hidden div beneath original one, so they just swap places when user clicks on EDIT and in a case if CANCEL is pressed to swap places again so original div with text is displayed...
Thanks,
Peter
<style type="text/css">
/* Normal mode */
.weight-display div.edit {display:none}
/* Editor mode */
.weight-edit div.show {display:none}
</style>
<div class="weight-display">
<button onclick="toggle(this)">Edit this!</button>
<div class="edit"><input type="text" value="Test" /></div>
<div class="show">Test</div>
</div>
<script type="text/javascript">
function toggle(button)
{
// Change the button caption
button.innerHTML = button.innerHTML=='Edit this!' ? 'Cancel' : 'Edit this!';
// Change the parent div's CSS class
var div = button.parentNode;
div.className = div.className=='weight-display' ? 'weight-edit' : 'weight-display';
}
</script>
What you suggest is basically correct. I would generate two div's one for display and one edit. The edit div will initially have display: none. When the Edit is clicked, hide the display div and show the edit div.
How about something like:
onClick event calls a function (EDITED to be a little smarter than my original brute force method):
function swapdivs ( id_of_topdiv, id_of_bottomdiv ) {
var topdiv = getRefToDiv( id_of_topdiv );
var bottomdiv = getRefToDiv( id_of_bottomdiv );
var temp = topdiv.style.zIndex;
topdiv = bottomdiv.style.zIndex;
bottomdiv = temp.style.zIndex;
}
Could that or similar work for you? Or am I missing some subtle yet crucial requirement?

Categories