I have used the Smooth Navigation JavaScript menu on a website and the client is complaining that there is a delay in the styling of the main navigation when navigating around the website.
True enough, there is a delay of maybe 1s when you open a page before the CSS kicks in and styles is correctly. The css is at the top of the page and JS is at the bottom so I've no idea what is causing this delay?
The website is http://jomast.co.uk/
Any help would be greatly appreciated.
Thanks.
You don't need and shouldn't be using Javascript for a simple dropdown menu like that.
In any case, add the class "navv" to the menu container and see if that fixes the issue.
Change this:
<div id="nav>
to this:
<div id="nav" class="navv">
When navigating the site, the smooth navigation doesn't kick in right away. Try re-ordering your script tags:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="scripts/js/ddsmoothmenu.js"></script>
<script type="text/javascript">
ddlevelsmenu.init("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar|sidebar")
</script>
<script type="text/javascript" src="scripts/js/news.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
</script>
This will also take care of the consistent:
Uncaught ReferenceError: $ is not defined news.js:1
Uncaught ReferenceError: jQuery is not defined jquery.cycle.all.latest.js:918
Uncaught ReferenceError: $ is not defined index.php:149
Uncaught ReferenceError: ddlevelsmenu is not defined index.php:158
Basically, the javascript executes after the document was fully loaded and processing that Javascript also takes some time. During that delay you can see the "unstyled" version of the menu showing up as the browser tries to display everything as fast as possible.
Easiest fix would be to style your menu such a way, that it's "unstyled" version would look the same as "styled" one. Then there will be no blinking, and the script will add it's slow-appearing animation when the page is fully loaded.
Related
I have a problem with JS code that suppose to delay showing certain elements on the website that im currently designing.
Link to website: https://parlourplaces.de
JS Code:
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script>
$(document).ready(function () {
// Hide the div
$(".header_desktop").hide();
// Show the div after 5s
$(".header_desktop").delay(3500).fadeIn(1000);
});
$(document).ready(function () {
// Hide the div
$(".slider_main").hide();
// Show the div after 5s
$(".slider_main").delay(6000).fadeIn(2000);
});
</script>
Main menu and slider should fade in after specific time. Function works properly.
Problem is that one line is breaking lots of stuff on my website. For example mobile menu is not showing up after click, or modals also doesent want to work.
Problematic line:
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
Is there any other way to correct the code or change it to diffirent one so the problematic line wont be included? Without it, fade in function with delay is not working at all, and if I include it, then some functionality of Oxygen Builder doesn't work.
Thanks for all help in advance! Cheers!
On my site http://tsawebmaster1.hhstsa.com/drones/index.html, I have a background video that is supposed to show using the bigvideo.js plugin. For some reason it is not showing. How can this be solved?
I believe this has something to do with multiple jquery files overriding each other. Is this possible and the issue?
Open up your console. You can see the following error:
document.getElementByTagName is not a function
You are missing an 's'
the correct method is:
var elements = document.getElementsByTagName(name);
Pic
Yes, you can use Jquery No Conflict as follow:
<script src="other_lib.js"></script>
<script src="jquery.js"></script>
<script>
$.noConflict();
// Code that uses other library's $ can follow here.
</script>
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.
I need some advice about my problem.
I'm using a JQ Multiselect and JQ Uniform to make more of the pages hotties.
The problem is.... The JQ are applied after the page has already loaded and it happens that you see the page without the "effects" (for about 1 second) and then start the effects / styles.
And this thing is horrible and frustrating.
Before writing here I took a tour on StackOverflow and on the internet but I can not find the solution to my problem.
Note: obviously, in the head tag I have the src of single js and othe tags before and after my "Javascript problem".
I tried with
<head>
<script>
$(document).ready(function(){
$(window).load(function(){
$('#SomeID').multiselect({});
});
});
</script>
</head>
and with
<head>
<script>
$(window).load(function(){
$('#SomeID').multiselect({});
});
</script>
</head>
but is the same thing!!!
You think there's a solution?
Do CSS display: none on the body or all the main sections of your page, so that when the entire page is loaded all the contents of it are hidden. You can then use whatever JavaScript effects you want to change the display property.
Why do I get this error from my overlay jquery code?
This is the code:
jQuery(document).ready(function($) {
// if the function argument is given to overlay,
// it is assumed to be the onBeforeLoad event listener
$("a[rel]").overlay({
mask: 'darkred',
effect: 'apple',
onBeforeLoad: function() {
// grab wrapper element inside content
var wrap = this.getOverlay().find(".contentWrap");
// load the page specified in the trigger
wrap.load(this.getTrigger().attr("href"));
}
});
});
This code is the overlay like this: http://flowplayer.org/tools/demos/overlay/external.html
Halp?
ps. Sorry for my bad english.
"Could not find Overlay: nofollow" is caused by using a non-specific css selector to find the links you want to attach your overlay to.
Including the javascript properly was the correct answer to the initial question... I came to this page based on the Overlay: nofollow issue in a comment.... since this is the first thing I found and didn't find an answer I wanted to comment here since I found it is caused by the css selector finding other uses of .. and there isn't a nofollow overlay...
assuming 'overlay' is the id of your div as in the following:
<!-- overlayed element -->
<div class="apple_overlay" id="overlay">
< !-- the external content is loaded inside this tag -- >
<div class="contentWrap"></div>
</div>
you should be doing something like:
$("a[rel=#overlay]").overlay(
instead of:
$("a[rel]").overlay(
You need to load the overlay plugin before jQuery will see it as part of the object; see below.
Note: the plugin must come after the jQuery script
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://cdn.jquerytools.org/1.2.6/all/jquery.tools.min.js"></script>
Got the same problem and found a really strange solution.
I just included jquery.tools before jquery.ui in this way:
<script src='js/jquery-1.4.2.min.js' type='text/javascript'></script>
<script src='js/jquery.tools.min.js' type='text/javascript'></script>
<script src='js/jquery-ui-1.7.2.custom.min.js' type='text/javascript'></script>
That's all. No idea why it works now but it does the job.
Did you include the overlay script src in your page?