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!
Related
I'm doing a jquery site and I have a slide in and out div that I'm using to show share buttons. I'm using the same code on multiple pages. On my first page it works great with no problems but every other page the div will slide out but slide right back in. It doesn't stop. Very confused.
Here I have a fiddle and in the fiddle it works great! But when I use the same code on other pages it's not working correctly. http://jsfiddle.net/4hUzH/
<script>
$(function() {
$('.toggleNotes').click(function() {
$nextArticle = $(this).next('.article');
$nextArticle.is(':visible') ? $nextArticle.slideUp() : $nextArticle.slideDown();
return false;
});
});
</script>
<style>
.article {
display: none;
}
</style>
Click here
<div class="article">
This is where the buttons show up.
</div>
Can anyone explain why it slides out and right back in?
Turns out in my top.php I was also calling the same function. So it was calling the instance twice. It only needs to be called once. Silly mistake.
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.
I have an auto-pager set up on my page to allow for infinite scrolling. I also used jQuery to change the opacity of images when they're hovered over. however, the animation only works on the first page, not the consecutive pages that are automatically loaded. any idea why this happens? or are there any methods of fixing this? thanks.
this is the code i'm using for the images and the auto-pager:
<script type="text/javascript">
$(document).ready(function(){
$(".post").animate({opacity:.8});
$(".post").hover(function(){$(this).stop().animate({opacity:1}, "fast");}, function(){
$(this).stop().animate({opacity:.8}, "slow");
});
});
</script>
<script type="text/javascript" src="http://static.tumblr.com/q0etgkr/J5bl3lkz1/tumblrautopagernopage.js"></script>
Where are your codes? We're not magicians...
To the extent of trying to figure out what you're saying here, I think there's a huge possibility that your code is not applying to the newer, auto-paged ones. See if you could put a more dynamic code into your system, and apply that AFTER the auto-pager has loaded the images.
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.
I'm having a problem with this tiny script I wrote for a website I'm creating. I'm totally new to JavaScript, so forgive me if I'm missing something that might be obvious to you.
The aim of the script is to hide a div as soon as the page is loaded, and then to show it when the user clicks on an element in a dropdown menu. Here it is:
$(document).ready(function(){
$("#cdcpanel").hide();
$("#contrpanel").hide();
$("#clickme").click(function() {
$("#cdcpanel").show(200, function() {
});
$("#contrpanel").hide(200);
});
$("#clickme2").click(function() {
$("#contrpanel").show(200, function() {
});
$("#cdcpanel").hide(200);
});
$("#hideall").click(function() {
$("#cdcpanel").hide(200);
$("#contrpanel").hide(200);
});
});
As you can see, the divs cdcpanel and contrpanel are initially hidden. Clicking on the element called clickme will cause cdcpanel to be shown and contrpanel to be hidden. Clicking on the element clickme2, instead, will trigger the opposite event. The problem is that it won't work on other browsers apart from Firefox. I've tried it up on Chrome and IE and the result is that the div is initially hidden, but then nothing happens by clicking on the dropdown menu.
This script relies on JQuery. It's called at the beggining of the page using the following:
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jsshow.js"></script>
Any suggestion on how to make things work is welcome! Thanks in advance for your time and patience.
I don't believe that dropdown menu's option elements have click events. try change event.