I have problem with adding class after scroll and it's really strange to me and here is why:
I used this script on multiple projects and never had this problem before. When I scroll down on home page, script works perefectly, class "Fix" is added to class "navigacija" and the social icons, menu and languages are fixed at top of the page. But on other pages this is not the case. Class "Fix" isn't added to class "navigacija" after scrolling 145px down. And what's more interesting, I insert very large image on purpose at this page and until page loads that image, my script works (try to scroll down before image is loaded). When page is fully loaded, script doesn't work anymore. I'm working in Joomla, I made my own template, I didn't install any modules, components or plugins. There are only Joomla's standard js files and my scripts that I used before with this script without any problem.
Here is the website I'm working on: http://investfarm.moderanweb.rs/
and here is the script:
$(function() {
var navigacija = $(".navigacija");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 145) {
navigacija.removeClass('navigacija').addClass("Fix");
} else {
navigacija.removeClass("Fix").addClass('navigacija');
}
});
});
Please help, thanks in advance.
Try to change $ to jQuery if you are using jQueryNoConflict, and why is it working on homepage, I guess because jQuery library is loaded twice, before and after mootools library, so try this instead, and you should do the same for ToolTip and other stuffs :
jQuery(function() {
var navigacija = $(".navigacija");
jQuery(window).scroll(function() {
var scroll = jQuery(window).scrollTop();
if (scroll >= 145) {
navigacija.removeClass('navigacija').addClass("Fix");
} else {
navigacija.removeClass("Fix").addClass('navigacija');
}
});
});
For starters, start cleaning up the errors that show in the console.
You have multiple script tags that points to an HTML page not to a script.
<script type="text/javascript" src="/templates/investfarmimpexmd/js/jquery-2.1.1.js"></script>
<script type="text/javascript" src="/templates/investfarmimpexmd/js/wow.min.js"></script>
<script src="/js/wow.min.js"></script>
I don't know what you expected those to be loading, but it is not loading a script and is causing errors.
Perhaps these be marked type="text/template" so the browser doesn't try to execute them and you can use them as templates?
And, you have an error on this line of inline Javascript that indicates that jQuery is not loaded properly so you will have to find out why that is:
jQuery(window).on('load', function() {
new JCaption('img.caption');
});
And, you are loading multiple different versions of jQuery in the same page, but not managing how those different versions are used. You can't just load a version of jQuery, issue a jQuery.noConflict() and then load another version of jQuery. The first will be doing nothing at that point so if you needed it for something, it will not be working.
Related
I added a custom jquery function to my wordpress site. The code was to open a popup window on every alternative clicks. This doesn't work if I add to my wordpress theme header.php
This is what I added <script src="/alternateclicks.js"></script>
The js file was added to the wordpress root location public_html. I don't see any popup whatsoever.
jQuery(document).ready(function( $ ){
var canClick = 2;
$("body").click(function () {
if (canClick%2==0) {
window.open("https://example.com/").blur();
window.focus();
canClick = canClick+1;
}
else {
canClick=canClick+1;}
});
});
The solutions I tried, I tried adding the code to footer.php. Didn't work. I added them using wp_enqueue. Didn't work.
UPDATE
In console am seeing that jquery is not defined. But I added the code only in footer.
Seems like, a Plugin interfered with my loading. The plugin disabled jquery.
Found that the code worked in some pages and didn't work in some pages.
Found out using the console.
Then later when disabling the plugin perfmatters, jquery worked fine.
Is that okay to have multiple Script tag at the bottom of HTML?
Here is the Script that I am using.
I was wondering if they will slow the speed?
or can cause any technical problem?
Is there any way that I can merge them into one file and linked it to my page? Or this might not be a good idea?
<script>
$('[data-fancybox]').fancybox({
protect: true,
infobar: true,
idleTime: false,
clickContent: false,
buttons: [
//"zoom",
//"share",
//"slideShow",
//"fullScreen",
//"download",
//"thumbs",
"close"
],
animationEffect: "fade",
});
</script>
<!-- Hamburger Menu -->
<script>
var $menuham = $(".menuham");
$menuham.on("click", function(e) {
$(".overlay").fadeToggle(200);
$("h1.brandcolor").toggleClass("brandcolorw");
$menuham.toggleClass("is-active");
// Do something else, like open/close menu
});
</script>
<!-- Project Info Button -->
<script>
var $projectinfo = $(".projectinfo");
$projectinfo.on("click", function(e) {
$projectinfo.toggleClass("is-active");
// Do something else, like open/close menu
});
</script>
<!-- Back to Top -->
<script>
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('#scroll').fadeIn();
} else {
$('#scroll').fadeOut();
}
});
$('#scroll').click(function(){
$("html, body").animate({ scrollTop: 0 }, 250);
return false;
});
});
</script>
<!-- Progress Bar -->
<script>
// When the user scrolls the page, execute myFunction
window.onscroll = function() {myFunction()};
function myFunction() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("myBar").style.width = scrolled + "%";
}
</script>
Is that okay to have multiple Script tag at the bottom of HTML? Here is the Script that I am using.
Yes thats where javascript should be. Either this, or at the top with defer atributte. Specially if you are performing operations on a loaded dom.
I was wondering if they will slow the speed? or can cause any technical problem?
Nah, it wont be faster if you put them at the top. Though you can make it faster if you minify your js... if you are using some package manager like npm you can add some package to help you with this, if not there are tons of pages that can help you minify your code. just look on google: minify javascript... you can also minify css. Edit: actually it can look slower if you put them at the top and the files are to big. cause it starts loading content kind of asynchronously but in order, so depending on your internet connection, they might slow down the appearing of some content, nowadays is not too relevant.. unless you have reaally big js files.
Is there any way that I can merge them into one file and linked it to my page? Or this might not be a good idea?
Yes just put your code together in one file, as long as the contents of the file are related its ok.
If you are building a site, put all the general code (the one that should be on all pages) on one file, that you can load on each page. And add at the bottom of each page the contents that are not general to the website but specific to that page.
I asume you are new to web development, this is good/works for learning, but eventually if you wanna work with javascript, i recommend investigating on package managers. But for now its ok.
After combing the forums and how-to guides, I have found a solution to a Smooth Scrolling problem that I had, but I'd like to ask some kind folks if the solution below will work for me before I try it, or if I'm missing something important.
I'm working on a live site and I don't want to create problems or break anything, so I'd like to be sure before I add the code below. I also know nothing about java or coding, so please forgive me if I don't use the right terms.
I want to enable smooth scrolling to an anchor on another page.
e.g. from my home page "domain.com/home", click the link, then
load the new page, e.g. "domain.com/contact"
and on loading the new page, smoothly scroll to the anchor, "domain.com/contact#section1".
Currently, it simply jumps, and I'd like to know if the steps below will enable the smooth scrolling.
I'm planning to:
Add the following codes to the website template's '' section (in the Joomla admin panel):
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">
</script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
I'm unsure whether this is necessary because I already use jQuery with some components, is it unnecessary to load jQuery again? Or will it not hurt to add this code regardless?
Then add this code to the same section in the template:
<script type="text/javascript" >
$('html').css({
display: 'none'
});
$(document).ready(function() {
var hashURL = location.hash;
if (hashURL != "" && hashURL.length > 1) {
$(window).scrollTop(0);
$('html').css({
display: 'block'
});
smoothScrollTo(hashURL);
} else {
$('html').css({
display: 'block'
});
}
});
function smoothScrollTo(anchor) {
var duration = 5000; //time
var targetY = $(anchor).offset().top;
$("html, body").animate({
"scrollTop": targetY
}, duration, 'easeInOutCubic');
}
</script>
As far as I know, this will enable the smooth scrolling, but I haven't added anything like 'smoothscroll.js' (which I've read a lot about) -- will that also need adding in the '' (after I upload it to the server), or is that included in the jQuery library?
I'm sorry if this seems very naive, I'm learning as I go. Thank you very much in advance to anyone who provides some feedback on this, I am truly grateful for your time and patience.
Best,
Ben
Firstly, Joomla already loads jQuery, so you do not need to load it again. I would either use a Joomla extension (there is a free one here) or use a smooth scroll library (like this one). Assuming you choose to do the latter, you just need to put the link in your Joomla template to the JS file and initialise it (this is all explained on the Github project page).
Both options are simple but if you don't have much experience in coding then the extension is probably the best way to go.
EDIT: To use smoothscroll on page load with the GitHub library, you will need to change your last function to:
function smoothScrollTo(anchor) {
var scroll = new SmoothScroll();
scroll.animateScroll(anchor);
}
i have a WordPress site and problems with anchors. i have a page with several anchors which are linked to in the main menu. when i am on the page itself, all anchors work fine, but if I'am on any other page, they don't work, at least not in all browsers and the anchors are ignored.
As being informed it is a chrome bug, ive found this solution:
<script type="text/javascript">
jQuery(window).load(function(){
var hashNum = 0;
if (window.location.hash != ''){
hashNum = window.location.hash.replace("#oneofmanyanchors", "");
console.log('hashNum: ' + hashNum);
};
hashMenu = jQuery('[data-q_id="#oneofmanyanchors"]').offset().top;
jQuery('html,body').animate({
scrollTop: hashMenu
}, 0);
});
</script>
above code is working and fixes the issues i had in chrome and ff.
however i need this added functionality: At the moment it is addressing only one specific anchor, but i need it to work with any anchors in the page url, not just the one above (anchors are referenced with the data-q_id attribute).
so the code needs to be updated that it grabs any given anchor from the page URL and go to / scroll to that anchor (once) via jquery after first page load.
How do i achieve this?
Thanks in advance!
PS: The problem is caused by theme incompatibility with a certain plugin i need...
I think this should work in every browser - what happens to be the problem?
In order to achieve this in jquery you should scroll to the element/anchor with javascript as soon as the document is loaded.
So like this:
$(function() {
location.hash = "#" + hash;
});
I still think you should find out what went wrong and why the linken from another page doesn't work in some browser before using a workaround for the problem. Your code will just ged more and more messy like that.
How to scroll HTML page to given anchor using jQuery or Javascript?
and here
$(document).ready shorthand
I have been working on a specific justified gallery for more time than I care to admit, but I have finally managed to get the gallery looking how I need and all the javascript working.
I did all my testing in Dreamweaver but when it finally came to moving what I had into my Wordpress website there seems to be a conflict with some of the javascript already on the site and the javascript I need to make my gallery work.
I have included all my custom javascript into the footer as follows:
JAVASCRIPT
<script src="http://dangoodeofficial.co.uk/wp-content/plugins/Justified-Gallery/libs/jquery/jquery.min.js"></script>
<script src="http://dangoodeofficial.co.uk/wp-content/plugins/Justified-Gallery/dist/js/jquery.justifiedGallery.min.js"></script>
<link rel="stylesheet" href="http://dangoodeofficial.co.uk/wp-content/plugins/Justified-Gallery/dist/css/justifiedGallery.min.css" type="text/css" media="all">
<script>
jQuery(document).ready(function($) {
$('.x-nav > li.current-menu-item').removeClass("current-menu-item");
});
</script>
<script type="text/javascript">
jQuery( document ).ready(function() {
jQuery('.flip-btn-1').click(function(e) {
e.preventDefault();
jQuery(".front").toggleClass('flip');
jQuery(".back").toggleClass('flip');
});
});
jQuery( document ).ready(function() {
jQuery('.flip-btn-2').click(function(e) {
e.preventDefault();
jQuery(".front2").toggleClass('flip2');
jQuery(".back2").toggleClass('flip2');
});
});
</script>
<script>
$('#liveDemo').justifiedGallery({
rowHeight : 190,
sizeRangeSuffixes: {
'lt100':'_t',
'lt240':'_m',
'lt320':'_n',
'lt500':'',
'lt640':'_z',
'lt1024':'_b'
}
}).on('jg.complete', function () {
$(this).find('a').colorbox(colorboxConf);
});
</script>
I have figured out What is causing the conflict is the jquery.min.js It is stoping Revolution Slider from working and also causing a problem with a testimonial slider (it shows all the slides at once), and my fixed nav-bar is no longer fixed.
Is there a way to find out what is causing the conflict?
Website in question is www.dangoodeofficial.co.uk
Thank you,
Dan
You shouldn't include Javascript libraries like jquery.justifiedGallery.min.js and jQuery in the footer by a link; you need to correctly enqueue Javascript in WordPress in the theme's functions.php file. See https://codex.wordpress.org/Function_Reference/wp_enqueue_script
As a result, you have two copies of the main jQuery library being loaded.
The jQuery document ready functions can be added in the header or footer with <script type="text/javascript">**</script> tags.
You've got lots of Javascript errors in the console. Use the developer tools in Firefox (or Firebug) or Chrome or Safari or IE to see what javascript is loading on your site and the errors.
The cause of the conflict could be the inclusion of the jquery.js file. You don't need to include jquery separately in your plugin. By default, WordPress is shipped with a jquery file and it is available for use off the shelf.