will we have to replace every $ with jquery?
$(document).ready(function() {
$('.tabs a').click(function(){
switch_tabs($(this));
});
switch_tabs($('.defaulttab'));
});
function switch_tabs(obj)
{
$('.tab-content').hide();
$('.tabs a').removeClass("selected");
var id = obj.attr("rel");
$('#'+id).show();
obj.addClass("selected");
}
As long as you are sure the snippet contains just jQuery usage of $ then you can wrap it in a closure
(function($){
$(document).ready(function() {
$('.tabs a').click(function(){
switch_tabs($(this));
});
switch_tabs($('.defaulttab'));
});
function switch_tabs(obj)
{
$('.tab-content').hide();
$('.tabs a').removeClass("selected");
var id = obj.attr("rel");
$('#'+id).show();
obj.addClass("selected");
}
})(jQuery);
use
$.noConflict();
(function($) {
$(function() {
// more code using $ as alias to jQuery
});
})(jQuery);
// other code using $ as an alias to the other library
Resolve the conflict issues
More detail : http://api.jquery.com/jQuery.noConflict/
var $j = jQuery.noConflict();
$j(document).ready(function() {
$j('.tabs a').click(function(){
switch_tabs($j(this));
});
switch_tabs($j('.defaulttab'));
});
function switch_tabs(obj)
{
$j('.tab-content').hide();
$j('.tabs a').removeClass("selected");
var id = obj.attr("rel");
$j('#'+id).show();
obj.addClass("selected");
}
Related
In my one function I need use twice jquery version. One for all function and another jquery for one function..
I can not control conflict in deffering.
<script defer type='text/javascript' src='<%=FrSettings.Settings.AppVirtualPath %>resource/js/jquery-11.0.min.js'></script>
<script defer type='text/javascript' src='<%=FrSettings.Settings.AppVirtualPath %>resource/js/unitegallery.min.js'></script>
<script defer type='text/javascript' src='<%=FrSettings.Settings.AppVirtualPath %>resource/js/ug-theme-carousel.js'></script>
<script defer type='text/javascript' src='<%=FrSettings.Settings.AppVirtualPath %>resource/js/jquery-3.3.1.min.js'></script>
window.addEventListener('DOMContentLoaded', function () {
(function ($) {
jQuery(document).ready(function ($) {
// Need 2 different jquery version
LoadVideos();
});
})(jQuery);
});
// Need only 1 jquery version
window.addEventListener('DOMContentLoaded', function () {
(function ($) {
jQuery(document).ready(function ($) {
LoadAnaOwl();
LoadYayinAkisi();
$('body').on('click', '.mansetPaginition li a', function () {
$('.mansetPaginition li a').removeClass('active');
$(this).addClass('active');
});
$(document).on('mouseenter mouseleave', '.mansetPaginition li a', function () {
$('.mansetPaginition li a').removeClass('active');
$(this).addClass('active');
window.location.hash = this.hash;
});
});
})(jQuery);
});
</script>
Use jQuery.noConflict.
jQuery.noConflict(bool) will return the jQuery function and restores the $ global variable to its old reference. bool indicates whether or not to remove all global jQuery variables, including jQuery. Calling jQuery.noConflict(true) if there are two versions of jQuery loaded will restore the globally scoped jQuery variables to those of the first version.
window.addEventListener('DOMContentLoaded', function () {
(function ($) {
jQuery(document).ready(function ($) {
window.jq331 = jQuery.noConflict(true);
// Need 2 different jquery version
LoadVideos();
});
})(jQuery);
});
<script src="https://code.jquery.com/jquery-1.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
var jq331 = jQuery.noConflict(true);
//jQuery and $ is version 1.1.0
//jq331 is version 3.3.1
console.log('jQuery version:',jQuery.fn.jquery);
console.log('$ version:', $.fn.jquery);
console.log('jq331 version:',jq331.fn.jquery);
</script>
May you please tell me how you would optimize this J$ and merge it as well. Basically, the they are duplicates of each other but just add different classes to different elements.
You can see the "drawer" on this website - look for the "Get Your FREE..."
<script>
$(document).ready(function(){
$("#drawer-closed").click(function(){
$(".get-free-program .btn").addClass("expander425");
});
});
</script>
<script>
$(document).ready(function(){
$("#drawer-closed").click(function(){
$(".get-free-program form").addClass("showform");
});
});
</script>
<script>
$(document).ready(function(){
$("#drawer-closed").click(function(){
$(".get-free-program img.arrowToggler").addClass("arrow-flipper");
});
});
</script>
You can use chaining. It is much faster than individual adding class.
<script>
$(document).ready(function(){
$("#drawer-closed").click(function(){
var $this = $(this);
if ($this.hasClass("toggleStart")) {
$this.removeClass("toggleStart");
$(".get-free-program").find(".btn").removeClass("expander425").end().find("form").removeClass("showform").end().find('img.arrowToggler').removeClass("arrow-flipper");
} else {
$this.addClass("toggleStart");
$(".get-free-program").find(".btn").addClass("expander425").end().find("form").addClass("showform").end().find('img.arrowToggler').addClass("arrow-flipper");
}
});
});
</script>
<script>
$(document).ready(function(){
$("#drawer-closed").click(function(){
$(".get-free-program .btn").addClass("expander425");
$(".get-free-program form").addClass("showform");
$(".get-free-program img.arrowToggler").addClass("arrow-flipper");
});
});
</script>
Should do
You can store selectors, classNames at arrays, use $.each() to attach event to each selector, use index parameter of $.each() to add className corresponding to selector index
$(document).ready(function() {
var selectors = [".btn", "form", "img.arrowToggler"];
var c = ["expander425", "showform", "arrow-flipper"];
$.each(selectors, function(index, el) {
$("#drawer-closed").click(function() {
$(".get-free-program " + el).addClass(c[index]);
});
})
});
Why am I getting the ReferenceError:
manualEntry is not defined error,
when using the following within Wordpress?
hide
<script>
jQuery(document).ready(function ($) {
function manualEntry() {
$("#details").hide();
}
});
</script>
<a class="my_class" href="#">hide</a>
<script>
var $ = jQuery.noConflict();
$(document).ready(function () {
$( ".my_class" ).click(function( event ) {
event.preventDefault();
$("#details").hide();
});
});
</script>
I can create Jquery functions, but what if you want more functions.
For example say I wanted to have a function for a drop down list AND a button.
I can only seem to do one function:
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
this.hide();
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$("banner").click(function() {
this.fadeTo();
});
});
</script>
Is this right on how to create multiple functions in one document or is there an easier way to create them?
Can you show me how to create multiple ones instead of one?
Both functions can go inside the same document ready function:
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$(this).hide();
});
$("banner").click(function()
$(this).fadeTo();
});
});
</script>
However, the selector $("banner") is invalid, if you're targeting a class of banner it should be $(".banner"), ID would be $("#banner")
You should rather use single document ready event and then wrap the two methods in it.
You would need to use class selector as element have class banner in it.also double quote is missing at the end of this selector
:
$(document).ready(function() {
$("button").click(function() {
$(this).hide();
});
$(".banner").click(function() {
$(this).fadeTo();
});
});
You can put them in the same $(document).ready function - you don't need a new document ready for each event listener.
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$(this).hide();
});
$("banner).click(function() {
$(this).fadeTo();
});
});
</script>
Also your $("banner") selector is invalid - take a look at the jQuery Selectors documentation here: https://api.jquery.com/category/selectors/
you only require one $(document).ready(function () {})
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function () {
$(this).hide();
});
$("banner").click(function () {
$(this).fadeTo();
});
});
</script>
Combine both and change $("banner) to $(".banner"):
$(document).ready(function() {
$("button").click(function() {
$(this).hide();
});
$(".banner").click(function()
$(this).fadeTo();
});
});
concat button & banner click code in $(document).ready:
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$(this).hide();
});
$("banner").click(function() {
$(this).fadeTo();
});
});
</script>
If you are going to use the code several time it is fairly easy to write a function that hides a certain element. Then you just have to call the function with a parameter(the value of your DOM.
function hideElement(value)
{
$('' + value +' ').click(function() {
$(this).fadeTo();
});
$(document).ready(function() {
hidedElement(banner);
hideElement(button);
});
I have the following function that is supposed to trigger anytime one of the numbers in my pagination is clicked.
<script type="text/javascript">
$("div.pagination a").click(function(event) {
alert("Click");
event.preventDefault();
var url = $(this).attr("href");
$("input[name='order']").val(order);
$("#form_session").attr('action', url).submit();
});
</script>
The pagination looks like this:
<div class="pagination">
<ul>
<li>1</li>
<li>2</li>
...etc
</ul>
</div>
For some reason, the function is never firing. I even put in a very obvious alert to confirm that it's hearing the click, but I'm not even seeing this.
So what is it that I'm doing wrong Everything seems correct to me...
Try to wrap it inside $(document).ready(function () { ... }); Something like below,
$(document).ready(function () {
$("div.pagination li").click(function(event) {
alert("Click");
event.preventDefault();
var url = $(this).attr("href");
$("input[name='order']").val(order);
$("#form_session").attr('action', url).submit();
});
});
If the li is dynamically generated then you should use .on (for jQuery 1.7) or .live/.delegate (older jQuery).
$(document).ready(function () {
$(document).on('click', 'div.pagination li', function(event) {
alert("Click");
event.preventDefault();
var url = $(this).attr("href");
$("input[name='order']").val(order);
$("#form_session").attr('action', url).submit();
});
});
Note: Replace $(document).on('click', 'div.pagination li', function(event) { with $('div.pagination').on('click', 'li', function(event) { if div.pagination exist on load.
Put it in a document.ready
$(function(){
$("div.pagination a").click(function(event) {
alert("Click");
event.preventDefault();
var url = $(this).attr("href");
$("input[name='order']").val(order);
$("#form_session").attr('action', url).submit();
});
});
Try:
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$("div.pagination li a").click(function(event) {
event.preventDefault();
alert("Click");
var url = $(this).attr("href");
$("input[name='order']").val(order);
// Where is order coming from?
$("#form_session").attr('action', url).submit();
});
});
</script>
You missed the a in your selector. Make sure the DOM is ready $(document).ready. And where is the order variable coming from? Is order defined?