How to disable or destroy a jQuery plugin function? - javascript

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>

Related

Using variables in Javascript Open Function

I'm new to Javascript and I have what is probably a pretty basic question. I have some tools tips and want to open them with a click. I create a Javascript call on the click. I can pas the element ID I want to open, but I don't know how to get it to work in the Open call.
<script type="text/javascript">
function opentip(tipID) {
//alert(tipID);
$(#tipID).tooltipster('open');
}
</script>
It's not necessary the function opentip(tipID) to bind the mouse click. I will give you an genereic exemple. You have to import Tooltipster's CSS and JS, and jQuery, so the code will be:
<span class="tooltip" title="Tooltip content!">Target tag</span>
<script>
$(document).ready(function() {
$('.tooltip').tooltipster({
trigger: 'click'
});
});
</script>
When clicl on "Target tag" will appear an tooltip with "Tooltip content!" inside.
The $(document).ready(function() {}); is important to be sure that when the script runs, the browser have already the DOM ready, so the script can find the HTML elements.
You are using JQuery syntax. Insert JQuery plugin and add single quotes in your syntax $('#'+tipID).tooltipster('open'); and add inside document.ready
<script>
$(document).ready(function(){
function opentip(tipID) {
//alert(tipID);
$('#'+tipID).tooltipster('open');
}
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

how to change value of html element by classname using javascript

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

Add a shake effect on a div when inputs are not valid

I am trying to make this divs shakes when the inputs are not valids (or they don't have been filled): http://jsfiddle.net/jalxob/ahQLC/13/
I tried to do it by myself using:
.effect('shake');
Can someone please help me?
Thank you!
You just need to include jQuery UI. In JSFiddle you need to select JQuery UI on the option list under Frameworks & Extensions. Assuming this is in a project, you'll need to include the jQuery UI library.
Try using this wherever you want it to be invoked:
<div id="inputbox"></div>
$( document ).click(function() {
$("#inputbox").effect( "shake" );
});
what about animate.css. You just need animate.css
<button id="shakebtn">shake</button>
<div id="shakediv">
this is shake test. shake demo on div. please click shake button.
</div>
<script>
$('#shakebtn').click(function(){
$('#shakediv').removeClass().addClass('animated shake')
.one('webkitAnimationEnd oAnimationEnd', function(){
$(this).removeClass();
});
});
</script>
jsfiddle demo
Try this
Include Jquery UI JS and Use shake() function in your files
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js" type="text/javascript">
DEMO

Auto click a link by class name using javascript or jquery?

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>

How to Specify an alternate panelContext - EasyTabs

I'm using the EasyTabs plugin by Alfa Jango on my website, and would like to have the panels seperated from tabs. He states in the documentation what I want to do;
Your panels can also be somewhere else in the DOM entirely (outside of
your tab container), if you specify an alternate panelContext.
The panelContext is any jQuery DOM element, in which easytabs will
look for the panels. By default, it's the container on which
easytabs() was called.
So, I understand I have to specify panelContext, say, to look for the panels in div#disconnected.
This is what I tried, but nothing works...
<script type="text/javascript">
$(document).ready( function() {
$('#tab-container').easytabs({
panelContext: '#disconnected';
});
});
</script>
Or trying to change the $container...
<script type="text/javascript">
$(document).ready( function() {
$('#tab-container').easytabs({
$container: '#disconnected'
});
});
</script>
Any help would be greatly appreciated!
I have a same problem as you, and found the answer:
You should type as:
<script type="text/javascript">
$(document).ready( function() {
$('#tab-container').easytabs({
panelContext: $('div#disconnected')
});
});
Found after looking the code here: Easy Tabs Github
Hope it helps

Categories