I am trying to auto click a link using a class name instead of the ID name.
however my approach doesn't do anything!
Here is what I have done:
<script type="text/javascript">
$(document).ready(function(){
document.getElementsByClassName("some-iclass").click();
});
</script>
Could someone point me in the right direction please?
EDIT:
I've used the following code and still doesn't work:
<script type="text/javascript">
$(document).ready(function(){
$(".myLink").click();
});
</script>
<a class="myLink" href="http://yahoo.com"> CLICK HERE NOW </a>
and I have this right at the top of my page header:
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
EIDT:
i've tried this as well and still doesn't work:
<script type="text/javascript">
$(document).ready(function(){
$('.myLink').trigger('click');
});
</script>
here you go:
<script type="text/javascript">
$(function(){
$('.className').trigger('click');
});
</script>
hope that helps.
UPDATE:
try:
<script type="text/javascript">
$(function(){
window.location.href = $('.className').attr('href');
});
</script>
after your edit, i think this is what you need.
getElementsByClassName doesn't return an element but a NodeList which may contain more than one element.
You may do this :
document.getElementsByClassName("some-iclass")[0].click();
or if you want to click all elements :
var list = document.getElementsByClassName("some-iclass");
for (var i=0; i<list.length; i++) list[i].click();
But as you use jQuery, it would be simpler to do
$('.some-iclass').click();
but only when the click event handler was added with jQuery (in other cases, like for example in case of an href attribute, use the standard dom functions).
$(document).ready(function(){
$(".some-iclass").trigger('click');
});
Simple with jquery $(".some-iclass").click();
if you have a lot of elements with this class - point to the wanted element:
i.e. $($(".some-iclass")[0]).click();
for auto-clicking a button or a link
"<"body onload="document.getElementById('some-class')[0].click()" ">"
this works...:)
if you want to autoclick a link and you are using jQuery, you could use
$('.yourClass').click();
if you need this to be one link in a collection of multiple links, you could do this:
$($('.yourClass')[0]).click();
Where 0 is the index of the element in the jQuery object.
document.getElementsByClassName('yourClass'); does not work in older browsers so it's best to use jQuery here for cross-browser compatibility.
For me, I managed to make it work that way. I deployed the automatic click in 5000 milliseconds and then closed the loop after 1000 milliseconds. Then there was only 1 automatic click.
<script>
var myVar = setInterval(function ({document.getElementById("test").click();}, 500);
setInterval(function () {clearInterval(myVar)}, 1000);
</script>
Related
I have links which change content on click. I want one of the links to be cliked on page load and stay as active. Looks like it works in the below fiddle but when I add it on website this one is loaded :
http://jsfiddle.net/0e91svrr/
I think I have some mistake in JS:
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">//<![CDATA[
$(document).ready(function() {
$('a[class^=question]').click(function(e){
e.preventDefault();
var id = $(this).attr("class").replace("question","")
$('.new_member_box_display').html($('#answer' + id).html());
})
document.getElementById("modal").click();
});//end of ready
</script>
The code you have written is perfectly fine. I would just suggest try JQuery's trigger click.
$('#modal').trigger('click');
First of all don't used Pure JS with JQuery mixed up, it look so messy :D also I sugest you think about your tags class and ids :)
Try first add event to links and then call click in document ready like this.
$('a[class^=question]').click(function(e){
e.preventDefault();
var id = $(this).attr("class").replace("question","")
$('.new_member_box_display').html($('#answer' + id).html());
})
$(document).ready(function() {
$("#modal").click();
});
I have a tiny script I'm working on :)
The idea is if the span tag just contains autocompleteitem and not autocompleteitem autocompleteitemwithcontainer then it'll display the word hello. Right now it displays hello for both :(
Demo: https://jsfiddle.net/L33mqqtp/
$(document).ready(function() {
$(document).on('click','.autocompleteitem',function(){
$("div").show();
});
});
How do I update my code to do this?
Try this
'click','.autocompleteitem:not(.autocompleteitemwithcontainer)'
They both have .autocompleteitem class! To obtain what you want, use a different selector, which only applies to first one:
$(document).ready(function() {
$(document).on('click','.autocompleteitem:not(".autocompleteitemwithcontainer")',function(){
$("div").show();
});
});
try this
$(document).ready(function() {
$("span").on('click', function(){
if(this.className == "autocompleteitem")
$("div").show();
});
});
Use the attribute selector syntax. That will allow you to directly match an entire attribute. This way you don't have to make a bunch of different combinations for each thing that you don't want to be selected.
Example selector: jQuery('[class="autocompleteitem"]')
Working Example:
$(document).ready(function() {
$(document).on('click','[class="autocompleteitem"]',function(){
$("div.containertoshow").toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Should work<br>
Should not work
<div class="containertoshow" style="display:none;">That button does toggle me on/off!</div>
Here is the code i am using to change value of html element ***
<a class="classname" href="Vtech.com"> This text to be chnage</a>
<script type="text/javascript">
document.getElementsByClassName("classname")[0].innerHTML = "aaaaaaqwerty";
</script>
how can I change this text on page load instans
Seems you need to add DOMContentLoaded or put your script before </body>
Native JavaScript solution
document.addEventListener("DOMContentLoaded", function(event) {
document.getElementsByClassName("classname")[0].innerHTML = "qwerty";
});
Add your script before </body>
Version with jQuery
$(funtion(){
$(".classname:first").text("qwerty");
});
You can use css selector, but it can be not safe, because this method return first occurance:
document.querySelector(".classname");
By the way, almost all developers use some js framework: jQuery, prototype, extJs, etc
$(document).ready(funtion(){
$(".classname").text("aaaaaaqwerty");
});
Using jquery (I refered to jquery, since you have tagged it in your question), you could achieve this like below:
$(funtion(){
$("a .classname")[0].text("aaaaaaqwerty");
});
You could use this
document.addEventListener("DOMContentLoaded", function(event) {
document.getElementsByClassName("classname")[0].innerHTML = "some texts";
});
Using jQuery
$(document).ready(function(){
$(".classname").eq(0).val("aaaaaaqwerty");
});
I have noticed that document.ready not prepending <div> tag.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
var shadow = $('<div id="shadowElem"></div>');
var speed = 1000;
$(document).ready(function() {
$('body').prepend(shadow);
}(jQuery));
</script>
- In console, There are no errors.
This is truly frustrating now and any help will be really appreciated.
~ Dipak G.
try this:-
var shadow = jQuery('<div id="shadowElem"></div>');
jQuery(document).ready(function() {
jQuery('body').prepend(shadow);
});
for more information check This link
I suppose that problem is in document.ready().
Try this instead:
$(function() {
$('body').prepend('<div id="shadowElem">Test</div>');
});
I would look into a conflict with prototype.js and jQuery. You may need to try jQuery.noConflict();
I would suggest using one library instead of both. Of course you will need to use a jquery lightbox instead, from what I see on your link.
I have a gallery that uses the jQuery gridrotator effect. I want to enable the effect when I click on button "enable effect".
<button id="build">Enable Effect</button>
<script type="text/javascript">
$("button#build").click(function(){
$('#ri-grid').gridrotator();
});
</script>
And the enablig effect works fine (see this test). To disable effect there is no a destroy method for this plugin. So I tried to return to false the function but doesn't work.
<button id="destroy">Disable Effect</button>
<script type="text/javascript">
$("button#destroy").click(function(){
$('#ri-grid').gridrotator(function(){
return false;
});
});
</script>
How can I disable or destroy this function?
Thank you so much for any help! :)
I made and tested a good workaround not the perfect solution but it worked.
simply remove the item from Dom tree then reload it
$('#ri-grid').html($('#ri-grid').html());
Maybe there is a better way, but this hack seems to work:
$('#ri-grid').data('gridrotator').$items.length = 0;
The gridrotator plugin does not seem to have a builtin disable feature.
Using .remove() will remove all bound events and jQuery data associated with the elements that are removed.
Try removing the element and inserting it back in its place.
$("button#destroy").click(function(){
// remove plugin class so it doesn't rebind
$("#ri-grid").removeClass("gridrotator");
var $prev = $("#ri-grid").prev();
if($prev.length) {
// put back between siblings if necessary
$prev.append($("#ri-grid").remove());
} else {
// or just re-add to its parent
var $parent = $("#ri-grid").parent();
$parent.prepend($("#ri-grid").remove());
}
});
Hope this will make you smile -
<button id="destroy">Disable Effect</button>
<script type="text/javascript">
$("button#destroy").click(function(){
$('#ri-grid').gridrotator().stop();
});
</script>
Know more on .stop() function - http://api.jquery.com/stop/
<button id="destroy">Disable Effect</button>
<script type="text/javascript">
$("button#destroy").click(function(){
$('#ri-grid').stop();
});
</script>