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

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

Related

Show url with jQuery

i have a script, after finishing something, a button with an link will appear, before the button is not clickable. but i have a problem.
this is the code:
FB.ui(e, function(t) {
if (t["post_id"]) {
//your download content goes here
// Do something there
var secret_data = "<a href=\"http://TEST.com\">";
jQuery("#results").html(secret_data);
}
})
<div id="results"><img src="img/button.png"></a>
I thought that after finishing this action that the code would look like this:
<img src="img/button.png">
But it isn't..
So does someone have the answer ?
If you are trying to wrap an <a> around an existing image use wrap()
$('#results img').wrap('');
Using html() replaces everything in the target element with the new content
Your html for button should be a div with button image(not clickable) like
<div id="results"><img src="img/button.png"></a>
And Javascript code to add the active button should be like
var secret_data = '<img src="img/button.png">';
jQuery("#results").html(secret_data);
This should do the trick.

Page elements stop being responsive

I am newbie to the Asp.net so please bear with me for this :)
I added a hyperlink html tag like this
<h2><a class="iframe2 cboxElement" id="frameEdit" onclick="return OpenEditPage()">(EDIT)</a></h2>
Here is the OpenEditPage() method
<script>
function OpenEditPage()
{
var pid = document.getElementById("ProjId").value;
var link = document.getElementById("frameEdit");
link.setAttribute('href', "/Project_MainPageEdit.aspx?editpid=" + pid);
return false;
}
</script>
As soon as I click EDIT hyperlink, edit page is opened in Iframe. But when i close the edit page, I return back to MainPage but all the buttons and other elements on the page become unresponsive until I refresh the page.
What's the reason behind this?
I added following code inside the script and it worked like a charm
$(document).ready(function ()
{
$(".iframe2").colorbox({ onClosed: function () { window.location.reload(); } });
});

jquery load image to div after clicking href

I know this has been asked many times here, actually I found plenty of questions, each of them with a very good answer, I also followed those answers, used the different ways I found but I still don't get it to work.
What I'm trying to do is to load an image into a div, after clicking a link, instead of redirecting to a new page.
I'm using Pure Css (http://purecss.io/) to create a menu, the menu is made of a list, and each list item has a link inside it, like so:
<div class="pure-menu pure-menu-open" id="vertical-menu">
<a class="pure-menu-heading">Models</a>
<ul id="std-menu-items">
<li class="pure-menu-heading cat">Menu heading</li>
<li>Model 1</li>
</ul>
</div>
In that same html file, I have another div where I want to load the image:
<div id="model-map"></div>
I've tried the following ways, using jquery, in a separate js file:
I followed the selected answer for this question, which seemed to have the best approach (Can I get the image and load via ajax into div)
$(document).ready(function(){
console.log("ready"); //this shows on console
$('.model-selection').click(function () {
console.log("clicked"); //this doesn't show after clicking
var url = $(this).attr('href'),
image = new Image();
image.src = url;
image.onload = function () {
$('#model-map').empty().append(image);
};
image.onerror = function () {
$('#model-map').empty().html('That image is not available.');
}
$('#model-map').empty().html('Loading...');
return false;
});
});
As you see, the console.log("clicked") never executes, I'll be ashamed if it's something stupid, cause it seems that the function is not handling the click event properly.
I get the image of course, but in a new page (default behavior of clicking the href) and I want it to load on the div without being redirected. I hope you can help me.
Thanks in advance!
Edit
The code above is working, and both answers are correct, the issue was due to some code inside tags in my html ( YUI code to create the dropdowns for the menu) and it was conflicting with my js file. I moved it to the actual js file and now it works as expected.
Thanks!
You need to use event.stopPropagation();
$('.model-selection').click(function( event ) {
event.stopPropagation();
// add your code here
});
You just need to prevent the default behavior of moving to a new page for <a> tags, to do this say e.preventDefault() first:
...
$('.model-selection').click(function (e) {
e.preventDefault(); // Stops the redirect
console.log("clicked"); // Now this works
...
)};
...

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

simulating a click on a <a>-element in javascript

for a website, i am using the jQuery supzersized gallery script: http://buildinternet.com/project/supersized/slideshow/3.2/demo.html
As you can see in the demo, in the bottom right corner there is an little arrow button that toggles a thumbnail bar. There is no option in the config files to automatically blend this in when opening the site.
So i guess i have to simulate a click on that button (the button is the tray-button, see HTML). I tried something like this:
<script>
$(function() {
$('#tray-button').click();
});
</script>
However, this doesnt seem to work in any browsers i tested.
Any idea?
$('#tray-arrow').click(function() {
// prepare an action here, maybe say goodbye.
//
// if #tray-arrow is button or link <a href=...>
// you can allow or disallow going to the link:
// return true; // accept action
// return false; // disallow
});
$('#tray-arrow').trigger('click'); // this is a simulation of click
Try this
$("#tray-arrow").live("click", function () {
// do something
});
I assume that you want to popup the thumbnail bar #thump-tray on page load.
Here's a way to do it:
locate the file supersized.shutter.js and find this code:
// Thumbnail Tray Toggle
$(vars.tray_button).toggle(function(){
$(vars.thumb_tray).stop().animate({bottom : 0, avoidTransforms : true}, 300 );
if ($(vars.tray_arrow).attr('src')) $(vars.tray_arrow).attr("src", vars.image_path + "button-tray-down.png");
return false;
}, function() {
$(vars.thumb_tray).stop().animate({bottom : -$(vars.thumb_tray).height(), avoidTransforms : true}, 300 );
if ($(vars.tray_arrow).attr('src')) $(vars.tray_arrow).attr("src", vars.image_path + "button-tray-up.png");
return false;
});
After it, add:
$(vars.tray_button).click();
Dont forget in your page (demo.html in the plugin), to change
<script type="text/javascript" src="theme/supersized.shutter.min.js"></script>
to
<script type="text/javascript" src="theme/supersized.shutter.js"></script>
instead of using
$(function(){
//jquery magic magic
});
you culd try this witch will work your jquery magic after the full page is loaded (images etc)
$(window).load(function () {
// jquery magic
});
and to simulate a click you culd use // shuld be the same as $('#tray-arrow').click();
$('#tray-arrow').trigger('click',function(){ })
example:
$(window).load(function () {
$('#tray-arrow').trigger('click',function(){
alert('just been clicked!');
})
});
try
<script>
$(function() {
$('#tray-arrow').click();
});
</script>
Make sure that this code is after your carousel is initialized.
This looks like it's a problem of timing the trigger. The plugin also loads on document load, so maybe when you try to bind the event listener the element is not created yet.
Maybe you need to add the listener in something like the theme._init function
http://buildinternet.com/project/supersized/docs.html#theme-init
or somewhere similar.
A problem might be that your plugin detects whether the click has been initiated by a user (real mouse click), or through code (by using $('#id').click() method). If so, it's natural that you can't get any result from clicking the anchor element through code.
Check the source code of your plugin.

Categories

Resources