What comes in between prepend() and append()? - javascript

I'll make to quick. I'm trying to position an element wrt my target. Normally we have prepend (before the target) and append (after the target). But is there smth along those lines that helps us place that element ON what we’re targeting, instead of putting it before (prepend) or after(append)?

If you want new HTML Elements add to target... I don't know if this is what you want.
$('.target-x').html('<div class="target-b">new elements</div>')
.target-x {background:#bbb;padding:10px;}
.target-b {background:#fff;color:#222;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="target-top">Elements</div>
<div class="target-x">New Elements Target</div>
<div class="target-bottom">Elements</div>
</body>

You can use position:absolute on a :before to place it ON the actual content.
HTML
<div class="example">This is an example div</div>
CSS
.example {
background-color: #5BC8F7;
}
.example::before {
position:absolute;
content: "Above!";
background-color: #FFBA10;
}

Related

How can I swap the order of divs in HTML code?

I have two divs placed one after another in my html. I wan't to swap them.
<div class="1"></div>
<div class="2"></div>
I want to swap 1 and 2.
Use after() or insertAfter() method when you want to move the element after the current element or use before() or insertBefore() method when you want to move the element before the current element.
$('#a').before($('#b'));
// or
$('#b').insertBefore('#a');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="a">a</div>
<div id="b">b</div>
I think you want to change the positions of you div.
the code is simple but you need to import jQuery to your code.
<div class="www">
<div class="div1">first div</div>
<div class="div2">second dive</div>
</div>
create a js file and use this jQuery code
$('.div2').each(function () {
$(this).insertBefore($(this).prev('.div1'));
});
you cAN CHECK THIS CODEPEN link also
http://codepen.io/feizel/pen/egPBEz
You need to insert div 1 into a temp variable then remove it and insert after div 2.
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<div id='div_1'>this is div 1</div>
<div id='div_2'>this is div 2</div>
<script>
jQuery(document).ready(function(){
var temp = jQuery('#div_1');
jQuery('#div_1').remove();
jQuery('#div_2').after(temp);
})
</script>
You can use css flexbox to achieve this. wrap your divs in a parent container and apply flexbox to position them as you wish.
suppose you wrap your divs and then your html code is
<div class="wrapper">
<div id="first_div">first div</div>
<div id="second_div">second div</div>
</div>
and your css code
.wrapper {
display: flex;
flex-direction: column;
}
#first_div {
height: 200px;
order: 2;
}
#second_div {
height: 300px;
order: 1;
}
though only disadvantage being you wont be able to use it in older IE browsers.
Flexbox will be your friend if you're okay with alienating anybody still using IE9 or older.
You'll only need two lines of code on the container/parent div.
display: flex;
flex-direction: column-reverse;
https://jsfiddle.net/PaulvdDool/Lzq7vpxn/

How to add style relevant to class name to element using jquery?

I'm ready to make a tool to improve my work. Please look at the code.
<div class="container width-200"></div>
<div class="container width-300"></div>
I want to set the first div width to 200px and second to 300px using jquery dynamicaly.
I don't know how to handle it in Javascript.
How can i do this work?
You need to find element has class width-* that * should be only digit. You can use .match() to check class name. If class name is right, add digit of class to width of element.
$("[class*=width-]").each(function(){
var match = $(this).attr("class").match(/width-([\d]+)/);
if (match)
$(this).css("width", match[1]);
});
div {
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="width-100">100</div>
<div class="width-200">200</div>
<div class="width-300">300</div>
Please use below in js:
$(document).ready(function(){
$('.width-300').css({'width':'300px','border':'1px solid #000' });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container width-300">
Width 300
</div>
.container
{
margin:0 auto;
}
.width-300
{
width: 300px;
}
I think you should use custom attributes.
HTML 5 explicitly allows custom attributes that begin with data. So, for example, <p data-date-changed="Jan 24 5:23 p.m.">Hello</p> is valid. Since it's officially supported by a standard, I think this is the best option for custom attributes. And it doesn't require you to overload other attributes with hacks, so your HTML can stay semantic.
Source: http://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes

How to highlight a HTML block element or fade out the rest of the Page with Animation

I've just started building a web page help (highlighting + tutorial steps) jQuery plugin. You can see the latest result here.
http://goo.gl/ZZ2xy
My first try for highlighting is to have 4 overlay div's which are just moved around by css transition. It's simple but not perfect. It creates space lines between the overlay elements, in Chrome at least.
What would be the best way to create this animation?
I've got better solution for ya'. It's a proff-of-concept and definetly needs tweaking but in general it works. The idea is to use table 3x3 as overlay, use semi-transparent background for all cells except for one that is suppose to work as a window through which you're looking at target html element.
I imagine there may be some quirks with browsers (probably fixable) but it's still cleaner and nicer option than one you're using right now.
The example code is available here http://jsbin.com/ekijev/4
Using jQuery .css() method right improved the thing a lot. Still sometimes a white line but it's ok for me. It's allready updated at github.
Old:
$elem.css({"left" : x})
.css({"top" : y})
.width(width)
.height(height);
New
$elem.css({
"left" : x,
"top" : y,
"width" : width,
"height" : height
});
so i have a fade solution for you. just the basics but should be enough to help you out.
just paste the code into a notepad file save and run
CODE UPDATED
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<style>
DIV{
width:200px;
height:200px;
display:inline-block;
}
.black{
background:black;
}
.yellow{
background:yellow;
}
.red{
background:red;
}
.green{
background:green;
}
</style>
</head>
<body>
<div id="container">
<div id="1" class="yellow"></div>
<div id="2" class="black"></div>
<div id="3" class="red"></div>
<div id="4" class="green"></div>
</div>
</body>
<script>
$(document).ready( function (){
var target = 2;//id of element we dont want faded
var pageElements = $('#container').find('*').toArray();//get all elements in our container
for(var counter = 0; counter < pageElements.length;counter++){//itterate through them
if(pageElements[counter].id != target){//if element is not our target fade
$(pageElements[counter]).fadeOut("slow",OnFadeComplete);//fade
}
}
});
function OnFadeComplete(){
$(this).attr('style','visibility:hidden;');
}
</script>

jquery get HTML of an element stripping the style attribute

Is it possible to obtain the raw HTML of an element or is it possible to get the HTML without the "style" attribute ? Consider the following example,
<div class="outer">
<div class="inner">
some text
</div>
</div>
Now, I apply some animation/CSS to the "inner" element.
​$('.inner').animate({
'margin': '-10px'
});​​
When I get the HTML of the "outer" element using console.log($('.outer').html());, I get the following
<div class="inner" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">
some text
</div>
But, I actually need this only
<div class="inner">
some text
</div>
What is the simplest way to get that output ?? I don't need to create a backup of the element before applying the animate() or css().
Thank you.
If you want to remove the style attribute totally (and don't want it back), use the code below:
/* Working code */
$(".outer").find(".inner").removeAttr('style').end().html();
/* Explanation of working code */
$(".outer") // Get the outer element
.find(".inner") // Find the inner div
.removeAttr('style') // Remove the attribute from the inner div
.end() // Return to the outer div
.html(); // Get outer div's HTML
Here's a working fiddle.
jQuery Docs:
find()
removeAttr()
end()
html()

How to move an entire group of objects with Javascript

I am trying to move everything contained within the div id "tile", to the center of the web browser. By default the CSS is undefined and it appears on the left side of the browser. What I would like to do is move the entire div to the center using javascript when the button "move" is clicked.
The html is shown directly below, and the attempted (but not working) javascript is shown below that.
html
<div id="tile">
<div class="menu">
<ul>
<li> Vis </li>
</ul>
</div>
<div id="tabcontent4">Some generic content</div>
<button onclick="move();" type="button">Move</button>
</div>
</div>
javascript
document.getElementsById("tile").style.align='center';
EDIT: How would I move the div to a specific location?
There is no "align" property in CSS. The closest is text-align, but you probably want to use the CSS declaration margin: 0 auto, which will move the whole <div> to the center of the page. So you want:
document.getElementById("tile").style.margin="0 auto";
Make sure that tile has a specified width.
You can do this with just CSS:
<div id="tile" style='margin:0 auto;width:300px'>
...
</div>
Or, put it in a container, and center its content:
<div id='container' style='text-align:center'>
<div id='tile' style='width:300px'>
...
</div>
</div>
Of course, non-inline styles are preferred.
Nice username, BTW.
// EDIT
To place the div in a specific location with javascript:
document.getElementById('tile').style.position = "absolute";
document.getElementById('tile').style.left = "100px";
document.getElementById('tile').style.top = "100px";
It must have a position defined, usually absolute or relative.
Once again, this can - and usually should - be done with CSS:
#tile { position:absolute; left:100px; top:100px }

Categories

Resources