We Keep Coding

Converting Jquery to javascript to avoid jquery library conflict

I have a jquery script that works the way I intend it to by appending a set of links within a div's class but unfortunately when I load the jquery library it kills my slider on my Wordpress site's page.
I am trying to rewrite the jquery to javascript so I don't have to rely on the library but am stumped on the syntax.
Here is the jquery that works:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var trail = '#announcements';
$(".pagination").find('a').attr('href', $(".pagination").find('a').attr('href') + trail);
});
</script>
And here is what I tried to write in javascript:
<script>
document.addEventListener("DOMContentLoaded", function(){
var trail = '#announcements';
var div = document.getElementsByClassName("pagination").find('a').attr('href',
this.find('a').attr('href') + trail);
});
</script>

Since this was more of an XY problem as pointed out I decided to look into why my jQuery wasn't working and discovered an error that was saying, $ is not a function similar to this post.
So with that in mind, I updated my jquery code and now it works without conflict.
Updated code:
<script>
jQuery(document).ready(function($){
$(document).ready(function() {
var trail = '#announcements';
$(".pagination").find('a').attr('href',
$(".pagination").find('a').attr('href') + trail);
});
});
</script>

I believe that a correct translation would look like this:
var trail = '#announcements';
var linksInPagination = Array.from(document.querySelectorAll('.pagination a'));
linksInPagination.forEach((link) => {
link.setAttribute('href', link.getAttribute('href') + trail );
});
Where are your mistakes?
var div = document.getElementsByClassName("pagination").find('a').attr('href',
this.find('a').attr('href') + trail);
document.getElementsByClassName("pagination") does not have .find() method.
Semanticaly it's defiently not a <div> but a Node Colection of <a> (so don't call it div :))
In jQuery you can use $('p').text('new text') for more than one <p> but in JS you have to loop and call it on elements directly. I'm converting a node collection to array and doing it with forEach method.

jQuery code is making conflict with others

I am using a jquery code(given below) but when I am using this code then there are some forms in the site those are not working anymore I have tried by using jQuery.noConflict(); and $.noConflict(); but neither is working.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var topPart = $('#wrapper-29');
var origOffset = topPart.offset().top;
$(window).scroll(function () {
if ($(window).scrollTop() > origOffset) {
$('#wrapper-29').addClass('sticky');
$('#block-30').hide();
} else {
$('#wrapper-29').removeClass('sticky');
$('#block-30').show();
}
});
});
</script>
So can you please help me to solve this problem. Now I have removed the code as it is making problem. Thanks.

I don't know if this would apply to your case, but to avoid conflict between multiple versions of jQuery this is what I would do.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
(function($){
$(document).ready(function(){
var topPart = $('#wrapper-29');
var origOffset = topPart.offset().top;
$(window).scroll(function () {
if ($(window).scrollTop() > origOffset) {
$('#wrapper-29').addClass('sticky');
$('#block-30').hide();
} else {
$('#wrapper-29').removeClass('sticky');
$('#block-30').show();
}
});
});
}(jQuery.noConflict(true)));
// jQuery has been removed and is undefined at this point
// so no chance of conflicting with other version of jQuery
</script>

There are a couple issue - one is the use of jQuery.noConflict() and then referencing $ for jQuery. You can either replace the references of $ with jQuery, or as Felix Kling mentioned, reference the argument passed by jQuery.
Unless you need a specific reason for jQuery.noConflict(), I would recommend removing the call from your jQuery file.
This is what your updated code might look like:
<script>
jQuery(document).ready(function($){
var topPart = $('#wrapper-29');
var origOffset = topPart.offset().top;
$(window).scroll(function () {
if ($(window).scrollTop() > origOffset) {
$('#wrapper-29').addClass('sticky');
$('#block-30').hide();
} else {
$('#wrapper-29').removeClass('sticky');
$('#block-30').show();
}
});
});
</script>
Now, as you mentioned, when this script works, it breaks other pages with forms (ex: http://propertymanagementoh.com/pma/) - When I looked into it, I noticed a JS error being thrown by the sticky script.
My guess is you're using a CMS (looks like WordPress) that's generating IDs - so $('#wrapper-29') may exist on one page, but not on another page. If we revisit the code above and make the following changes:
<script>
jQuery(document).ready(function($){
var $topPart = $('.wrapper-first');
var $block = $('#block-30');
var origOffset = topPart.offset().top;
$(window).scroll(function () {
if ($(window).scrollTop() > origOffset) {
$topPart.addClass('sticky');
if ($block.length > 1) {
$block.hide();
}
} else {
$topPart.removeClass('sticky');
if ($block.length > 1) {
$block.show();
}
}
});
});
</script>
That should work on BOTH pages (I actually verified it works on both by using Charles Proxy and injecting that script). The main changes I made were:
1) Use the .wrapper-first class as a selector, since it's common between the pages.
2) Update the variable name to $topPart, a common naming convention to say "HEY! I'M A JQUERY OBJECT!"
3) Reference $('#block-30') as a $variable, but since it's NOT common between the two pages, we check the length property of the object, to see if we need to call show or hide -
This is NOT required (since jQuery will just silently fail...) I'd recommend using a unique class for this as well (especially if it will be on other pages).
Hopefully this helps!

If you want your header part fixed, there is a more simple and elegant way to do it:
$("header").css('position', 'fixed')
The position of the header will remain same regardless of browser's window position
If jQuery is not working simply edit the css file like below:
.header
{
position:fixed;
}

to change the header at scroll use scroll listener like below:
var b = $( "body" );
b.scroll(function(){
if ((b.scrollTop())>0){ // perform what you want to do
}
});

Toggleclass not working, altough should

This is pretty basic, still doesn't work... I'm trying to change the class of my button, which has the id "nav_list". I wrote the script:
var specialSection = document.getElementById("nav_list");
specialSection.onclick = function() {
alert("what");
$('#nav_list').toggleClass('active');
};
I get the "what" alert, but the class isn't toggled. What am I missing? Thanks in advance!

toggleClass is a jQuery method, for use it you must include jQuery in your page.
Like:
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
At the moment if you check the console you must see an error like (demo: http://jsfiddle.net/IrvinDominin/GyaBY/):
ReferenceError: Can't find variable: $
Avoid mixing jQuery and javascript event binding so your code will look like:
$('#nav_list').click(function() {
alert("what");
$(this).toggleClass('active');
});
Demo: http://jsfiddle.net/IrvinDominin/GyaBY/2/

Trouble applying javaScript in Html

I'm trying to apply the javascript below in an html file, this code is part of a plugin so I know that it works for sure, but I'm have trouble defining it with tags, no matter what I try the script won't run.
Once the user scrolls past a div, that div becomes stuck to the top of the page:
$(function() {
var a = function() {
var b = $(window).scrollTop();
var d = $("#scroller-anchor").offset({scroll:false}).top;
var c=$("#scroller");
if (b>d) {
c.css({position:"fixed",top:"0px"})
} else if (b<=d) {
c.css({position:"relative",top:""})
}
};
$(window).scroll(a);a()
});​
I tried using the tag below:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
but that didn't work.
Any help would be much appreciated, thanks

Pretty sure you need the type attribute.
<script type="text/javascript">
You could then throw that source in if you'd like, just add that attribute on.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
and that should be the proper way to include whatever is in that code into your page.

if you are manipulating the DOM, you will also need to wrap your code with DOMReady:
$(document).ready(function(){
//Code goes here
});

jQuery ready - how to strip an existing ready handle?

I've been asked to perform maintenance on a third party site, I can edit the javascript but not the back end code. This site uses a plugin which sets various styles and events up in a jQuery.ready call. I want to stop it without causing errors. I can insert javascript before and after the plugin in the template but the markup inside the plugin comes from elsewhere. I have tried something like this:
<script>
var tmpReady = $.ready;
$.ready = function() {};
</script>
<pluginWhichICanNotChange>
$(document).ready( function(){ BAD STUFF } );
</pluginWhichICanNotChange>
<script>
$.ready = tmpReady;
</script>
But the BAD STUFF still fires. Anyone any idea how I can strip it!?

That's because the methods that work with selectors reside in the $.fn namespace. The following should work:
<script>
var realReady = $.fn.ready;
$.fn.ready = function() {};
</script>
<pluginWhichICanNotChange>
$(document).ready(function() { /* BAD STUFF */ });
</pluginWhichICanNotChange>
<script>
$.fn.ready = realReady;
</script>