Objective:
Want to move an element from one place to another in DOM.
Condition:
I can easily do this using jQuery but i am working in an environment where jQuery is not available and adding it is not an option for such a small task ~ so i need a vanila js solution.
Example:
Make this:
<div class="elem-1">Element 1</div>
<div class="elem-2">Element 2</div>
Into this (on page load):
<div class="elem-1">
Element 1
<div class="elem-2">Element 2</div>
</div>
Just append it where you want it.
document.querySelector('.elem-1').appendChild(
document.querySelector('.elem-2')
);
Related
I just want to count a div with the class of "element" inside another div with the class of "parent". This is the HTML structure:
<div class="parent">
<div class="element">Element 1</div>
<div class="element">Element 2</div>
</div>
The .length array / property works fine like this with jQuery:
$("div.parent > div.element").length;
If I copy and paste the code above into the Chrome console I get 2 as a result, which is correct.
But if I try to make it a variable:
var $numEx = $("div.parent > div.element").length;
It doesn't work correctly. For example, if I put numEx (or $numEx) in the console, I get 0 as a result...
This is the whole code together:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
var $numEx = $("div.examens > div.element").length;
</script>
<div class="parent">
<div class="element">Element 1</div>
<div class="element">Element 2</div>
</div>
I have actually got some normal javascript before the jQuery...
What am I doing wrong?
I believe you are trying to reach the property of an element before its properties are available through Jquery. #osama had mentioned this in a comment.You can either place the script tag at the bottom of your Document or inside $(document).ready(function(){}). This function will let the document object model render before executing your script.
I am trying to create a general widget (component) which maybe a one item component, a list component (like tabs) or anything else.
Exp:
<div class="widget-component">
<div class="item">
<div class="widget-component-title">Title 1</div>
<div class="widget-component-description">Description 1</div>
</div>
<div class="item">
<div class="widget-component-title">Title 2</div>
<div class="widget-component-description">Description 2</div>
</div>
</div>
Components are defined outside the widget script and they only need to respect the defined selectors (widget selector, editables selectors).
On a list widget case a title or description editable occurs more than once.
I have been digging a lot for a solution this is what i came across.
http://ckeditor.com/comment/135051#comment-135051
this solution works but it breaks the generality principle and also i have to keep track of index classes on repeated items.
I even tried to extend the "initEditable" function inside widget/plugin.js but because i did not want to modify the file (preventing my self from future updates) and i could'nt extend it by external script ("initEditable" not accessable) i let it go.
The best suggested solution i came across is this here but it does'nt seem to have been implemented yet.
Any bright idea is appreciated
Thanks
I'm trying to refactor the jquery related code to angular code.
I have the following use case. There are four a tags, on click of each a tag, its following event handler called which makes certain div visible. For example one of the a tag event handler looks like this:
$("#fistdiv").css('display','none');
$("#seconddiv").css('display','none');
$("#thriddiv").css('display','none');
$("#fourthdiv").css('display','block');
In this case fourthdiv is made visible. And each div shows particular contents in a table.
I want to refactor this jquery-code to angular-js. How that can be done? Rather than falling into querying dom and binding event handlers, how can be made in angular terms?
Thanks in advance.
Pretty naive approach but it should be something you actually need:
Link 1
Link 2
Link 3
Link 4
<div ng-show="visible == 1">Some content 1</div>
<div ng-show="visible == 2">Some content 2</div>
<div ng-show="visible == 3">Some content 3</div>
<div ng-show="visible == 4">Some content 4</div>
Demo: http://plnkr.co/edit/QyCzUuBwB4yoAbmsgXid?p=preview
You should take a look at this directive.
https://docs.angularjs.org/api/ng/directive/ngShow
By default image and text will fade in one after another once there are loaded, but is there a way to have a fading effect added on "each" element once there are loaded?
I can load the element using the code below:
$("#element,#element2,#element3,#element4").fadeIn("slow");
but the downsides are:
I have to specify all the elements in the page, #div1,#div3,#container2.....
Also the elements can only fade in once the page finish loading all together,but what I want is fade in the elements before all the html finishes loaded.
Is it possible?
I would give each element a specific class, then reference it with $(".whatever"). You also will probably check out $.each(), which iterates through objects. To fade in as the page loads, you would need to place the code, or call the function outside the document ready(), somewhere near the beginning of the html.
you should use class attribute for the elements. You can access and control all the elements which have a particular class, you need not specify the id of each and every element. Here is a demo JSFIDDLE for you :
HTML:
<input type="button" id="btn_fade_out" value="Fade Out">
<input type="button" id="btn_fade_in" value="Fade In">
<br>
<div class="my_class">Element 1</div>
<div class="my_class">Element 2</div>
<div class="my_class">Element 3</div>
<img src="abc.png" height="50px" width="50px" border="1" class="my_class"></img>
JS:
$('#btn_fade_out').click(function(){
$('.my_class').fadeOut(1000);
});
$('#btn_fade_in').click(function(){
$('.my_class').fadeIn(1000);
});
The best way to do this would be having a class in common for all the elements you want to fade on load
and then use
$('.class').fadeIn(1000);
$('.class').fadeOut(1000);
I would like to find out, which is the best way to determine the last div and add a new class to it. Is it javascript or css3?
So here is my example. Let's say I have this:
<div class="items">
<div class="raw">item 1</div>
<div class="raw">item 2</div>
<div class="raw">item 3</div>
<div class="raw">item 4</div>
<div class="raw">item 5</div>
<div class="raw">item 6</div>
</div>
How? What method? I can add to the last div with class name "raw" a new class name "new"?
so that it will become:
<div class="raw new">item 6</div>
Just:
$('div.raw:last').addClass('new');
You can go by pure css:
div.raw:last-child {
/* styles for the last element here */
}
or, if you need to be more specific within a child-set
div.raw:last-of-type {
/* styles for the last element here */
}
Just in case, the new class (-name) isn't mandatory.
Both pseudo selectors are compatible with latest W3C browers. IE starting with 9. If you urgently want to support IE7+ I recommend this little lib: https://code.google.com/p/ie7-js/
In jQuery as simple as:
$(".items > .raw:last").addClass("new");
In pure JavaScript with querySelector:
document.querySelector(".items > .raw:last-child").className += " new";
$('div.raw:last').addClass('new');