I would like to convert
<div id="outer">
<div id="inner1"></div>
<div id="inner2"></div>
</div>
into
<div id="outer">
<div id="middle">
<div id="inner1"></div>
<div id="inner2"></div>
</div>
</div>
I would like to preserve any references to the inner divs that may have been set prior to this so just doing $("#outer").html($("<div id='middle>" + $("#outer").html() + "</div>")) will not work for me.
Is there a better way than just creating the middle div, moving all the children of outer to it and then appending it to the outer div?
Like this...
$('#outer').wrapInner($('<div>',{id:'middle'}));
DEMO: http://jsfiddle.net/uy6wg/
The .wrapInner() method will wrap all the content of #outer in the element you give it.
This will include inner text nodes if your actual content contains any.
If you care about performance, here's a native DOM solution...
var outer = document.getElementById('outer'),
middle = document.createElement('div');
middle.id = 'middle';
while(outer.firstChild)
middle.appendChild(outer.firstChild);
outer.appendChild(middle);
DEMO: http://jsfiddle.net/uy6wg/1/
This could be made into a reusable function...
function wrapInner(id, tag) {
var outer = document.getElementById(id),
wrapper = document.createElement(tag);
while(outer.firstChild)
wrapper.appendChild(outer.firstChild);
outer.appendChild(wrapper);
return wrapper;
}
wrapInner('outer','div').id = "middle";
DEMO: http://jsfiddle.net/uy6wg/2/
You can use the .wrapAll() method:
$("#outer > div").wrapAll('<div id="middle"></div>');
Related
var testbutton = document.getElementById("testbutton");
var content = document.getElementById("content");
testbutton.onclick = function () {
html2canvas(content, {
"onrendered": function(canvas) {
document.body.appendChild(canvas);
}
});
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<p>
<a id="testbutton" href="javascript:void(0);">test</a>
</p>
<div id="content">
<div class="element-1">1. Is visible</div>
<div class="element-2" data-html2canvas-ignore="true">2. No visible</div>
<div class="element-3">3. Is visible</div>
</div>
Is there a way to actually remove that element so that the resulting rendered image doesn’t leave that empty space?
Are you using any Framework? If yes, your framework might have some html functionality or attribute to do this.
For example in Angular you would manage it with*ngIf .
It will help you to delete the empty element from your DOM
I have a HTML string, I've assigned the div with the class parent an id of myid (in the HTML string). I then append this HTML string to an element with id main. Using the browsers inspect tool I can see that the id has been infact assigned, but for some reason JQuery doesn't know about the newly assigned id.
var html = `
<div class="parent">
<div id="content" >
</div>
<div>`
var newHtml = $(html);
newHtml.find('.parent').attr('id','myid');
$('#main').append(newHtml);
console.log($('.parent').attr('id')); // Logged as undefined.
The method $.fn.find() targets the descendant elements where as $.fn.filter() target the element at same level. As per your HTML .parent is at top level, hence you need to use $.fn.filter() while setting the ID of DIV element.
var html = `<div class="parent">
<div id="content" >
</div>
<div>`
var newHtml = $(html);
newHtml.filter('.parent').attr('id','myid');
$('#main').append(newHtml);
console.log($('.parent').attr('id'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div id="main"></div>
OR, You don't need to use $.fn.find() at all. Just directly use .attr()
var html = `<div class="parent">
<div id="content" >
</div>
<div>`
var newHtml = $(html);
newHtml.attr('id','myid');
$('#main').append(newHtml);
console.log($('.parent').attr('id'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div id="main"></div>
You should use find method in combination with andSelf() method.
andSelf() method add the previous set of elements on the stack to the current set.
Read more here.
var html = `<div class="parent">
<div id="content" >
</div>
<div>`;
var newHtml = $(html);
newHtml.find('.parent').andSelf().attr('id','myid');
$('#main').append(newHtml);
console.log($('.parent').attr('id'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div id="main"></div>
So i have a div element which will be filled dynamically with others divs using the appendChild Method, this should display a list. The User is now able to sort that list with the JqueryUI Sortable option.I also added some sortable option attribues like follows:
Options:
$("#NameContainer").sortable("option", "axis", "y");
$("#NameContainer").sortable( "option", "containment", "parent" );
LIST
<div id="NameContainer" class="ui-widget">
<div id="Name_1">John</div>
<div id="Name_2">Jack</div>
<div id="Name_3">Charlie</div>
<div id="Name_4">Sawyer</div>
<div id="Name_5">Yin</div>
<div id="Name_6">Ben</div>
</div>
Now comes my problem. The appendChild always inserts the new div at the bottom of the container but i want to to add some space at the bottom of to the Container Div with a "br" or something like that. I want to add that space to make sure that when the user sorts the last item of that list it will get sorted correctly because the "containment" bounds sometimes wont allow to sort under the last item.
<div id="NameContainer" class="ui-widget">
<div id="Name_1">John</div>
<div id="Name_2">Jack</div>
<div id="Name_3">Charlie</div>
<div id="Name_4">Sawyer</div>
<div id="Name_5">Yin</div>
<div id="Name_6">Ben</div>
<br><!--SPACEHOLDER-->
</div>
So here comes my Question is there away to appendChild above a certain element? Like a "br" "div" or "p"?
Try this instead of appendChild:
Please note I have used random value to add in div as I don't have your dynamic value.
check fiddle: https://jsfiddle.net/dqx9nbcy/
<div id="NameContainer" class="ui-widget">
<div id="divspacer"></div>
</div>
<button id="btn">ADD Element</button>
$(document).ready(function(){
$("#btn").click(function(){
var parentnode = document.getElementById("NameContainer");
var existnode = document.getElementById("divspacer");
var rand = Math.floor((Math.random() * 10) + 1);
var newName = document.createElement("div");
newName.setAttribute("id", rand);
newName.setAttribute("value", rand);
newName.setAttribute("class","ui-widget-content");
newName.innerHTML = rand;
parentnode.insertBefore(newName,existnode);
});
});
refer http://api.jquery.com/appendto/ but you need to make sure that your are targeting right tag.
You can try with this code snippet.
HTML Snippet
<div id="NameContainer" class="ui-widget">
<div id="Name1">Name1</div>
<div id="Name2">Name2</div>
<div id="Name3">Name3</div>
<div id="Name4">Name4</div>
<br>
<br>
</div>
Javascript Snippet
$(document).ready(function(){
$("#btn").click(function(){
var containerDiv= $("#NameContainer");
var childList = containerDiv.children("div");
var newElementid = childList.length;
var newName = document.createElement("div");
newName.setAttribute("id", "Name"+(newElementid+1));
newName.setAttribute("value", "Name"+(newElementid+1));
newName.setAttribute("class","ui-widget-content");
newName.innerHTML = "Name"+(newElementid+1);
$(childList[childList.length-1]).after(newName);
});
});
This is specific to a situation where there are some elements in the initial list. The same can be modified for dynamic list of implementation by validating that childList.length is != 0 before using the same.
My goal, essentially, is to have the CSS :hover replaced by JavaScript. The reason is that I need a loop to be executed on a variable number of divs that will be nested inside the parent div that should react upon :hover.
The problem, however, is that I have no idea how to target just the div being hovered over without hard-coding in specific IDs - something that I will not be able to do once applied to my project, a tumblr theme.
HTML
<div id="motherbox">
<div class="middlebox">
<div class="childbox">One</div>
<div class="childbox">Two</div>
<div class="childbox">Three</div>
</div>
</div>
<div id="motherbox">
<div class="middlebox">
<div class="childbox">One</div>
<div class="childbox">Two</div>
<div class="childbox">Three</div>
<div class="childbox">Four</div>
<div class="childbox">Five</div>
</div>
</div>
CSS
#motherbox {
width:30%;
height:100px;
margin:100px auto;
background-color:gray;
}
JavaScript
document.getElementById("motherbox").onmouseenter = function(){
this.style.backgroundColor = 'blue';
};
document.getElementById("motherbox").onmouseleave = function(){
this.style.backgroundColor = "gray";
};
JSFiddle
My question is - how do I cause divs with the same class or id to react individually (or, rather, not all at once) on hover using javascript, rather than CSS?
Thank you for your time.
Basically you can select elements having a particular class using getElementsByClassName.
Here is a working demo.
var elements = document.getElementsByClassName('childbox');
for(var i=0; i<elements.length; i++) {
elements[i].onmouseleave = function(){
this.style.backgroundColor = "blue";
};
}
So use instead of getElementById this:
http://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp
And provide classess for your divs, where you want have that event.
I'm using the liferay framework and I need to add a JavaScript detected inline height to a very very specific div in my page. The problem is I need to target it going through an unknown number of dynamically added divs with dynamically added classes and IDs. To complicate this even further, the divs are randomly siblings or nested in each other.
Here's what it looks like:
<div class="known-class">
<div class="unknown dynamicallygenerated"></div>
<div class="unknown dynamicallygenerated">
<div class="unknown dynamicallygenerated">
<div class="unknown dynamicallygenerated"></div>
<div class="unknown dynamicallygenerated">
<div class="DIV-I-WANT-TO-TARGET">this is the div i need to Target with my css/javascript</div>
</div>
</div>
</div>
obviously I can't target it simply with
function resize() {
var heights = window.innerHeight;
jQuery('.DIV-I-WANT-TO-TARGET').css('height', heights + "px");
}
resize();
Because that class is present elsewhere, I would rather target it with something like.
jQuery('.known-class .DIV-I-WANT-TO-TARGET')
Which obviously doesn't work because there's a ton of other divs in the middle and my div is not a child of ".known-class"
I was asking myself if there was any jQuery that could help. Something like:
Catch any div with .DIV-I-WANT-TO-TARGET class that is "generically" inside another div that has .known-class
Is this possible? thanks a lot for your help!
Something like this would work:
// this will target the known-class and find all children with DIV-I-WANT-TO-TARGET
$('div.known-class').find('div.DIV-I-WANT-TO-TARGET');
// this will target the known-class and find the first DIV-I-WANT-TO-TARGET
$('div.known-class').find('div.DIV-I-WANT-TO-TARGET').first();
$('div.known-class').find('div.DIV-I-WANT-TO-TARGET:first');
$('div.known-class').find('div.DIV-I-WANT-TO-TARGET:eq(0)');
$('div.known-class').find('div.DIV-I-WANT-TO-TARGET').eq(0);
You can try in your css file
.known-class div div div div{}
The last div being the DIV-I-WANT-TO-TARGET
Assuming that you are adding the divs starting from the outer to the inner
Assign an equal name plus a number starting from 1
<div class="known-class">
<div class="unknown dynamicallygenerated" id="dynamicdiv1"></div>
<div class="unknown dynamicallygenerated" id="dynamicdiv2">
<div class="unknown dynamicallygenerated" id="dynamicdiv3">
<div class="unknown dynamicallygenerated" id="dynamicdiv4"></div>
<div class="unknown dynamicallygenerated" id="dynamicdiv5">
<div class="DIV-I-WANT-TO-TARGET" id="dynamicdiv6"></div>
</div>
</div>
</div>
The use jQuery [.each][1] to loop through all the divs on the document
$( document.body ).click(function() {
$( "div" ).each(function( i ) {
if ( this.style.color !== "blue" ) {
this.style.color = "blue";
} else {
this.style.color = "";
}
});
});
When you reach the last item in numeric order. (you can use any split function) add the attributes to that div
you need to select last div inside the known-class:
$('.known-class').find('div:last').css('background', 'Red')
OR if you want to select all the .known-class :
$('.known-class').each(function() {$(this).find('div:last').css('background', 'Red')});
Actually your selector works just fine:
$('.known-class .DIV-I-WANT-TO-TARGET')
With a space, selectors will find any descendant.
The search is only limited to direct descendants (immediate children) if you use the > operator.
So $('.known-class > .DIV-I-WANT-TO-TARGET') would not find what you wanted.