Develop Reference

How to automatically click a href link when the page loads?

I'm trying to automatically click a href link when the page loads.
<div class="loadmore" kind="rb">
تحميل المزيد...
</div>
The link is supposed to load more comments when you click it.
I tried this:
window.onload = function() {
autoloadmore()
};
function autoloadmore() {
var loadmoreClass = document.getElementsByClassName("loadmore")[0];
var loadmoreChild = loadmoreClass.getElementsByTagName("a");
if(loadmoreClass){
loadmoreChild[0].click();
}
}
but it doesn't seem to work. The problem seems to be with click(), because when I use other codes such as .style.color, they work.
I'm using Blogger by the way.
This's a sample blog:
http://blog-sample-001.blogspot.com/2018/09/title.html
(go to تحميل المزيد...)
ps: I can't change the div.

Assign some ID to تحميل المزيد... . For example, clickAfterPageLoad or whatever you want, and then try this...
$(document).ready(function() {
$("#clickAfterPageLoad").trigger('click');
});
or if you cant't change div, you can do like this:
$(document).ready(function() {
$(".loadmore a").trigger('click');
});

Fancybox works if I add a class manually but not with jQuery .addClass()

I have the following JS code, which I add Fancybox classes to all hrefs on a page:
$(function(){
//set target var
var $targetTable = $('.photo-frame a');
//loop trough each table and insert the fancybox class on the href tag
$targetTable.each(function() {
$targetTable.addClass('fancybox');
});
});
This works because the fancybox class is added, but the fancybox is not triggered. But if I add this class manually in the browser-editor and click on the image fancybox is triggered.
I have also tried the following, but without result:
$('.photo-frame a').addClass('fancybox');
Does anyone have any idea where this may be due to?

When you hardcode the class It works because its present when the DOM is build but its not the same with the later case.
You need to reinitialize fancybox by $(".fancybox").fancybox();
$(function(){
//set target var
var $targetTable = $('.photo-frame a');
//loop trough each table and insert the fancybox class on the href tag
$targetTable.each(function() {
$targetTable.addClass('fancybox');
});
$(".fancybox").fancybox();
});

Your code + the correct fancybox initialization works fine
$(function () {
// initialize fancybox
$(".fancybox").fancybox();
//set target var
var $targetTable = $('.photo-frame a');
//loop trough each table and insert the fancybox class on the href tag
$targetTable.each(function () {
$targetTable.addClass('fancybox');
});
});
The following, as suggested by void, also works
$(function () {
//set target var
var $targetTable = $('.photo-frame a');
//loop trough each table and insert the fancybox class on the href tag
$targetTable.each(function () {
$targetTable.addClass('fancybox');
});
// initialize fancybox
$(".fancybox").fancybox();
});
This, as suggested by Jeremy Thille, also works
$(function () {
$('.photo-frame a').fancybox();
// initialize fancybox
$(".fancybox").fancybox();
});
... in any order
$(function () {
// initialize fancybox
$(".fancybox").fancybox();
$('.photo-frame a').fancybox();
});
So, my guess? something in your code is triggering a js error that prevents your addClass code and fancybox from working.
You better check your errors before asking.

How do I get forwarded to a link that is in a data attribute in html when clicked using jQuery?

I am trying to forward to a link when the div is clicked using a data attribute and jQuery, but am stuck a bit. Here is the code I have:
html:
<div class="clickable-icon" data-link="www.google.com">click to be forwarded</div>
jquery:
$('.clickable-icon').attr('data-link');
used google as an example for the link to go to. But how would I use jquery to help with this?

you can do:
window.location.href = $('.clickable-icon').data('link');
and as you want on click, write click event and get clicked element data-link attribute value:
$('.clickable-icon').click(function () {
window.location.href = $(this).data('link');
})
WORKING FIDDLE

You could use window.location.href like
$('.clickable-icon').on('click', function() {
window.location.href = $(this).data('link');
});

$('.clickable-icon').click(function(){
window.location.href = 'http://'+$(this).data('link');
})

AJAX Transition Effect

I'm trying to get this transition effect working with AJAX but the effect doesn't work with it. I essentially have a wrapper class and an innerwrap class in each of my html pages. When you click one of the navbar items, the innerwrap in the current page fades out and the innerwrap in the clicked navbar link fades in. Here is my script:
$(document).ready(function () {
$('#navbar a').click(function () {
var url = $(this).attr('href');
$('.wrapper').fadeOut('.innewrap').load.fadeIn(url + ' .innerwrap');
return false;
});
});
The way I'm seeing it is that the current innerwrap fades out and the innerwrap of the clicked url fades in. I've been struggling with finding a solution through different questions here but I can't seem to find one that's similar to the way I have the code presented. If you can't help but can guide me towards a question where the code is kind of similar that would be awesome. Thank you!

Maybe I'm wrong, but what you do in your code is fading in something like http://example.com/ .innerwrap and that's because you are using url variable where you put value of href attribute from a element.
Try using .load(url, function(){}) to achieve what you want. HERE you'll find more about load() from jQuery ;) Also your fadeIn() and fadeOut() syntax seem to be a little strange.
I think this is more what you want:
$(document).ready(function () {
$('#navbar a').click(function () {
var aObj = $(this);
var url = $(this).attr('href');
$('.wrapper').load(url, function(){
$(this).find('.innerwrap').fadeOut();
$(a).find('.innerwrap').fadeIn();
});
return false;
});
});
I haven't tested this code.

how can you change remove a class on one li and move it to another

So I am in the middle of coding a navigation bar for the side of my website and I am creating it so that you click on a li, inside of it is an a tag with no href attribute so that it acts like a button (I don't use # since it jumps to the top of the page and I don't want that)it has a drop down section come out underneath it pushing the other tabs down. What I've found online is
$('li').click(function() {
$(this).siblings().removeClass('active');
$(this).addClass('active');
});
or
$('li').click(function() {
$(this).addClass('active').siblings().removeClass('active')
});
(and other variations of this)
However after I tested this out several times, either by adding multiple classes to each li or attempting to change the class active to an id and I've had no luck.
EDIT: It seems like the code works perfectly in other testing websites (codepen/jsfiddle) but it doesn't seem to work in my own browser when I open up the VisualStudio emulator (opens in the actual browser window)
Here's my code that contains this navigation bar: http://codepen.io/PorototypeX/pen/sjDBL

This might help :
$("ul.navbar > li").click(function () {
$("li[.active]").removeClass('active');
$(this).addClass('active');
});

Actually your code is fine, but it seems you are using JQuery, and it's not a native part of JS it self, it utilizes JS. So first you need to load JQuery.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
Then try this code, it's the same but a different variation of what you have done:
$(".navbar > li").click(function () {
$(".navbar").children("li").removeClass("active");
$(this).addClass('active');;
});
JS Fiddle

jQuery not added in the page
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
Demo: CodePen
Another problem could be that the code is not in a dom ready handler
jQuery(function () {
$("ul.navbar > li").click(function () {
$(this).siblings().removeClass('active');
$(this).addClass('active');
});
})
Demo: Fiddle

I figured out what was wrong with my jquery. Although the code would work perfectly on outside sources such as codepen and jsfiddle, the only way that it will work on a local server is to have this code instead:
$(document).ready(function () {
$("ul.navbar > li").click(function () {
$(this).siblings().removeClass('active');
$(this).addClass('active');
});
});
The $(document).ready(function() { remaining code goes here... }) allows it to run locally.