We Keep Coding

http javaScript set attribute default to all tags

I am pretty new to HTML and just trying to figure things out...
I am trying to set an attribute for the tag, more specifically the target attribute so that all links in web page would open in a different tab...
I have encountered the jQuery functions and tried to implement it with no success...
My script tag goes like this:
<script src="static/jquery-3.1.1.js">
$(document).ready(function() {
$('a').target = "_blank"
$("a").attr("target", "_blank");
});
$('a').target = "_blank"
</script>
when of course the jquery file is at the same directory under static dir as mentioned....
I have also tried the following:
<script>
var elems = document.body.getElementsByTagName("a")[0];
elems.setAttribute("target","_blank");
</script>
when there's only one tag in page...
Please tell me what am I doing wrong....
Thanks:)

The correct approach to set an attribute to all elements of a web page is to loop through all elements and set the attribute like so:
var elems = document.body.getElementsByTagName("a");
for(var i = 0; i < elems.length; i++)
{
elems[i].setAttribute("target","_blank");
}
If using jQuery the function to set attributes is $(selector).attr(attribute_name,value)
Example:
$('a').attr("target","_blank");

You have some syntax error in your script, correct code in
<script src="static/jquery-3.1.1.js"></script>
<script>
$(document).ready(function() {
$("a").attr("target", "_blank");
});
</script>

At first, your code should be like:
$(document).ready(function() {
$("a").attr("target", "_blank");
});
It actually works. You can try it on this page. I don't know what page r u testing on, but I can guess the reason why your code didn't work is that some links are generated after the execution of your code. You can change your code as below to avoid this problem.
$(document).ready(function() {
setInterval(function(){
$("a").attr("target", "_blank");
},200);
});
You can also add some code to imporve the efficiency.

You don't actually have to modify the html, you could just add a click handler to every link like so.
$(document).on('click', 'a', function(e) {
e.preventDefault();
window.open(this.href);
});

Javascript code for Div slide down effect?

I've been trying to create a Div 'slide down' effect for quite a while now and I found this JS Fiddle which gives an example of exactly what I want; http://jsfiddle.net/L5P2Y/368/ . It uses this code:
$(document).ready(function() {
var $cont;
function tgl_conts(){
$('.content').stop().animate({height: 0},1200);
$cont.stop().animate({height:210},1200);
}
$('.tab').on('click',function(){
var tabClass=$(this).attr('class').split(' ')[1];
$cont = $('.'+tabClass+':not(.tab)');
var h = ($cont.height() === 0) ? tgl_conts() : ( $cont.stop().animate({height: 0},1200) );
});
});
I've copied all the code, including the HTML and CSS into my own document in the hope that I can just manipulate that into what I want. All I have is this exact code that is on the JS Fiddle, but I still cannot get the JavaScript to work despite it working fine in this example. I've pasted it between the head tags between two script tags but it still does not function. Why isn't it working? Is it in the wrong place? I'm very new to JavaScript.
Thanks

You need to load your code snippet after jQuery 1.7 is loaded on the page
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>
// you're code
</script>

Javascript element tag name undefined

So I'm not that great with Javascript so I'll put that forward right away. That being said, I've looked up as much as I could on this particular problem before asking, but the suggestions haven't solved my issues. I'm ultimately trying to pull all of the links from an iframe window on the same domain as the main page. Then I want to basically search that link array to match it with the current page to trigger a CSS modification to the html code (this part is not coded yet, FYI). So here is the part I have so far: Side note: The confirms are in there to debug the code and try to tell me where it's failing and what my queries are returning, they won't stay obviously when this is finished. I appreciate any advice that may help me fix this!
<script type="text/javascript">
// main is the iframe that I'm trying to search for a tags
document.getElementById("main").onload = function() {
confirm("test");
var main = document.getElementById("main");
var anchors = main.contentWindow.document.getElementsByTagName('a');
confirm(anchors[1]);
for (var i in anchors) {
confirm(anchors[i].getAttribute("href"));
}
};
</script>

I have created a plunker for you its working. I think its the placement of code in your file is causing the problem.
<iframe id="main" src="content_if.html"></iframe>
<script>
// main is the iframe that I'm trying to search for a tags
document.getElementById("main").onload = function() {
confirm("test");
var main = document.getElementById("main");
var anchors = main.contentWindow.document.getElementsByTagName('a');
confirm(anchors[1]);
for (var i in anchors) {
confirm(anchors[i].getAttribute("href"));
}
};
</script>
You should use jQuery to do this in a cross browser way. Include jQuery in page
<script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
and follow this post

There is a similar post about doing this and I agree with Mohamed-Yousef. If you can use jquery then you should do so!
$("#main").contents().find("a").each(function(element) {
// "each" will iterate through every a tag and inject them as the "element" argument
// visible in the scope of this anonymous function
});
EDIT:
You must include
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
above your code that references the $ variable. There are other ways to use jQuery but this is probably the easiest.

Is there an event for when the content of a HTML element has fully loaded?

I have a <div> containing a number of images. I want to fade this <div> in after all contained images have loaded, as they make up one unit that I'd rather have display cleanly instead of momentarily all over the place (while loading).
Is there something similar to window.onLoad that I can apply to a certain element?
e.g.
$("#id").onLoad(function()
{
$(this).fadeIn(500);
});

var images = $("#id img");
var imgCount = images.size();
var i = 0;
images.load(function() {
if(++i == imgCount){
$("#id").fadeIn(500);
}
});

one way of doing it is to add this in the head section of the HTML document:
$(function() {
$("#id").fadeIn(500);
});
the idea behind $(function() { /* code */ } ) is that it will be ran when the DOM is loaded, you can have as many of this as you want in your head section, but it would be more readable IMHO if you only have one.
Another way of doing it is to have a main javascript file that will be ran for each page when it's ready, let's call the HTML file index.html and the javascript file index.js
index.html
<!doctype html>
<head>
<!- include the javascript/css/etc. files -->
<script type="text/javascript" language="javascript">
$(function() {
// the following function exists in index.js file
onPageLoadedIndex();
});
$(function() {
// this code will also be executed when the DOM is ready
// however I strongly recommend having only one of these
});
</script>
</head>
<body>
<!-- snip -->
</body>
</html>
index.js
function onPageLoadedIndex() {
// some code
$("#id").fadeIn(500);
// more code
}
In this way you'll be avoiding having too much javascript in the HTML page

You probably already know how to assign a function to run on page load. In case you don't, try:
window.onload = function() {
$('div').fadeIn(500);
}
jQuery only solution:
$('div img.class').load(function() {
// img.class is your largest (in bytes) image.
$('div').fadeIn(500);
});

try this:
$("#id").load(function()
{
$(this).fadeIn(500);
});
good luck

jquery and mootools conflict - one script works, another don't

Ok, I use mootools to display flash content through google maps and I work hard to make it work properly, so there is little chance to switch it to jQuery. On the other side, I see jQuery more useful to every other things so I'm trying to make it work together. That's for explanation. Now here is the code.
this jQuery script I use to show/hide animation and it works with mootools perfectly
<script type="text/javascript">
jQuery(document).ready(function() {
// hides the slickbox as soon as the DOM is ready
jQuery('#slickbox').hide();
// toggles the slickbox on clicking the noted link
jQuery('#slick-toggle').click(function() {
jQuery('#slickbox').toggle(400);
return false;
});
});
recently, I added scrit to animate flowing menu and I can't get it work. I've tried to apply noConflict, but it didn't work. Here is the code:
<script language="text/javascript">
var $j = jQuery.noConflict();
var name = "#floatMenu";
var menuYloc = null;
$j(document).ready(function(){
menuYloc = parseInt($j(name).css("top").substring(0,$j(name).css("top").indexOf("px")))
$j(window).scroll(function () {
offset = menuYloc+$(document).scrollTop()+"px";
$j(name).animate({top:offset},{duration:500,queue:false});
});
});
</script>
Error message is Uncaught TypeError: Object # has no method 'dispose'
Thank you very much.

Format your code this way, and there is no need to use noConflict(). Call jQuery.noConflict(); right after the jQuery and MooTools library have been loaded.
<script type="text/javascript">
(function($){
var name = "#floatMenu",
menuYloc = null;
$(document).ready(function(){
menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
$(window).scroll(function () {
var offset = menuYloc+$(document).scrollTop()+"px";
$(name).animate({top:offset},{duration:500,queue:false});
});
});
})(jQuery);
</script>
This will encapsulate your code to a function, which will be passed the jQuery object. Anywhere you use $ inside that function it will reference jQuery.
Also, there is no attribute language with the value "text/javascript", it's the type attribute, which should have that value. Don't use the language attribute anymore.