how to add a css class in javascript to be used onload - javascript

I am trying to load a popup lightbox window when the page is initially opened. I can get it to work on a click but I cannot get the code right to add a class in the script. I am using 'Lightbox' from within HTML Kickstart.
The link that works looks like this: <a class="lightbox" href="#bbc">BBC</a> This works perfectly. Basically how do I get that to work automatically on page load.
My attempt at the script:
<script type="text/javascript">
function load() {
var target = location.href = "#bbc";
target.className = "lightbox";
}
</script>

So I assume you want to add a class to that anchor tag:
$(function () {
$("a[href=#bbc]").addClass("lightbox");
});
Using $(function() {…}) is the same as using the ready() function (in JQuery). I would recommend running the code after the DOM is ready rather the "on load".

you need to call the load() function on the onLoad event of <body> tag.
<body onLoad="load()">

The way I read this question — ignoring the title — is that the user is trying to trigger the lightbox on load. Whilst this may be a wrong assumption, the way to trigger a link using javascript is to use the .click() method:
window.onload = function(){
var i, list = document.getElementsByTagName('a');
for ( i=0; i<list.length; i++ ) {
/// this will only work for links with only a class name of lightbox.
/// you could look into using getElementsByClassName or something similar.
/// I use getElementsByTagName because I know how supported it is.
if ( list[i].className == 'lightbox' ) {
list[i].click();
}
}
};
The above code would support multiple lightbox links in a page, which might not be desired, so it may be best just to add an id to the link you wish to target and then use:
window.onload = function(){
document.getElementById('clickonload').click();
};
<a id="clickonload" class="lightbox" href="#bbc">BBC</a>
You may find however, that in reading the documentation for whatever lightbox plugin you are using, that there is a command you can use from JavaScript, rather than clicking a target link.

$(window).load(function () {
var target = location.href = "#bbc";
target.className = "lightbox";
});

Related

Suppressing an onclick link event without stopping the actual page re-direct

Is there a way to disable the onclick function but still use the href to re-direct the user to the requested link. Example a header menu there are many links that looks like below :
Phones
I am unable to remove the "DA_A('id', ':per:shop', this.href); return false;" from the HTML page. However using a tag manager how would one go about injecting a snippet of JavaScript code function which will de-activate/mute the "DA_A" function but still make the link work as normal? Is it possible? It seems the function "DA_A" is a function that calls another ".push" function and pass some data.
What are my options? as I am unable to edit the menus in questions?
You can probably remove the onclick from the element if you can run some javascript after the DOM renders:
var anchor = document.getElementById("someId"); // or tagname, querySelector, etc
anchor.onclick = "";
You could also disable the function it calls altogether, depending on whether it is needed elsewhere:
window.DA_A = function() { /* do nothing */ };
The first snippet would need to be run after the DOM was rendered (for example, if you are using jquery then enclose it in a $(function() {})), and the second snippet would need to run after the DA_A function is defined in the first place.
Either of these by themselves should disable the onclick, but still allow the anchor to navigate.
this code snippet will do the trick:
window.onload = function()
{
document.querySelctor("a").removeAttribute("onclick"); // make selector more specific
};

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);
});

I need help building an anchor <a that passes variables to PHP

I'm currently using javascript but switching to jQuery is OK.
Within the HTML is a <div id="domain">nares</div>. I need to pick out the "nares" and put it in an anchor tag to look like this: Listing.
So far the code looks like this:
<script type="text/javascript">
var dom = document.getElementById('domain').innerHTML;
openPage = function() {
location.href = "myCode.php?domain="+dom;
}
</script>
Link
To me this looks like it should work but instead when the page opens I get;
TypeError: null is not an object (evaluating
'document.getElementById('domain').innerHTML')
This is probably because the div has not yet been populated. However after population the error changes to:
XMLHttpRequest cannot load javascript:openPage(). Cross origin
requests are only supported for HTTP.
Which truthfully I don't understand. In any case using jQuery or just plain javascript how do I build this tag? I really need the modal part to work, its part of the UI for this project.
You should move your dom element into the function like so:
<a id="test" onclick="openPage()" rel="modal:open">Link </a>
<script type="text/javascript">
function openPage() {
var dom = document.getElementById('domain').innerHTML;
document.getElementById("test").href = "myCode.php?domain="+dom;
}
</script>
Also you should get your a tag then change the href...

Run JavaScript function on element defined with jQuery

Not sure I titled this well.. show's that I'm in unfamiliar territory. How can I run a JavaScript function based off of the element called in a jQuery function?
Theory:
<script type="text/javascript">
$.fillit('video');
</script>
(run fillit on video tag present in page.. interchangable with other elements)
$.fillit = function(){
this is where it says "run on the tag defined in the jQuery function"
}):
$.fn.extend({
fillit : function(){...}
});
then...
$('.video').fillit();
Edit (after comments)
To fill a dom element with other elements/html:
var img = document.createElement('img');
img.setAttribute('src', 'somesrc.jpg');
$('.video').append(img);
or
$('.video').html('<img src="somesrc.jpg"/>');
You can do it the way you described like so
<script type="text/javascript" language="javascript">
$.fillit = function(content)
{
$("result").html(content);
}
//call function
$.fillit("HELLO WORLD");
</script>
or as Alexander just posted if you want to do it on the selected element.
I don't think adding functions directly to jquery with $.func = is a good idea though. If jQuery ever adds a fillit method your method will conflict with theirs.
technopeasant, it sounds like you are using a jquery plugin (in your example, a plugin called 'fillit') and it is asking you to run the plugin on a tag or series of tags. Sorry if I misunderstood your question.
If that is the case, all you need to do is one of two things. If you are trying to run it on a very specific element in the HTML page (one with an id like <div id="myvideo"></div>) then all you need to do is run:
$('#myvideo').fillit();
//Notice the '#' symbol, that looks up the element with an id of 'myvideo'
If you want to run the plugin on a series of elements (like all <p> tags in the entire document, you'd run something like:
$('p').fillit()
//notice no '#', it's just looking up all <p> tags regardless of ID.
Take a look at the jQuery documentation regarding selectors to get a more concrete idea of how these selectors work:
http://docs.jquery.com/How_jQuery_Works
Someone answered with a link to this: http://docs.jquery.com/Plugins/Authoring
exactly what I was looking for. claim your kudos!
(function( $ ){
$.fn.fillit = function() {
this.fadeIn('normal', function(){
var container = $("<div />").attr("id", "filled")
.appendTo(container);
});
};
})( jQuery );

Ajax inserted content not accessible in DOM

I am working on a pure jquery/js site, mostly to practice some jquery. I am using a load statement to load a menu from a file of common html, like so:
$('#categoryListing').load('../common.html #categoryLinksUL');
which loads:
<ul id="categoryLinksUL">
<li>Anklets</li>
<li>Bracelets</li>
</ul>
The problem is where I am using it now I need to alter the href of the above links, but they are not part of the dom. In previous instances I was able to use .live(click... But not here. Is there a way I can accomplish this?
Specifically I need to load the links and change the href from #anklets to ?category=anklets
What about the following?
$('#categoryListing').load('../common.html #categoryLinksUL', function() {
$('li a[href^="#"']').each(function () {
this.href = '?category=' + this.href.substr(1);
});
});
In my example, after the load is completed, the anonymous function is called. It takes every anchor with a hash HREF and replaces it with an HREF based on your description.
Thank you Dimitry, you solution basically worked. I finally used:
$('#categoryListing').load('../common.html #categoryLinksUL', function() {
$('#categoryListing li a').each(function () {
var hashPos=this.href.indexOf("#");
var tCategory = this.href.substr(hashPos+1,this.href.length );
});
});
So why did jQuery recognize categoryListing there? I tried moving the each function outside of the load function and categoryListing did not contain any links. Is it because maybe the load was not completed when it tried to get categoryListing links? Seems like that is possible.
Thanks,
Todd

Categories