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.
Related
I'm building a site on Wordpress using Elementor page builder, and I'm having trouble sending the user back to the top of a modal when clicking 'next' on a form.
Here's the code I've been trying, and here's the page it's currently hosted: http://doortouk-co-uk.stackstaging.com/home/
(The modal can be opened by clicking the 'Apply Now' button at the bottom of the page, section 3, 4 and 5 have the longer sections that require the scroll to top functionality)
jQuery(document).ready(function () {
jQuery('.e-form__buttons__wrapper__button-next').click(function(){
jQuery(".dialog-widget-content").scrollTop(0);
});
})
Any help would be appreciated!
Edit - the solution was to target .dialog-lightbox-message
Took the effort to look at your website and find the issue. But for the next time, it would be great if you make a code snippet we can use to help you. Anyway, cheers and enjoy!
I made a snippet to double check if what I was doing was correct. The thing you need would be:
jQuery(".dialog-widget-content").animate({ scrollTop: $(".dialog-widget-content")}, 0);
PS, run code snippet below. ;)
$('.e-form__buttons__wrapper__button-next').click(function(e){
jQuery(".dialog-widget-content").animate({ scrollTop: $(".dialog-widget-content")}, 0);
});
.dialog-widget-content {
width:400px;
height:400px;
overflow:auto;
float:left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dialog-widget-content">
<br/><br/>Scroll down & then click there >><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>
<div class="e-form__buttons__wrapper__button-next">
click here
</div>
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!
I have a small issue with Micah Godbolt's Responsive Multi-level Navigation with active parent links. It works great, except if the page loads slowly and you are hovering over the global nav, it can sometimes show two dropdowns. I'm guessing this is cause the javascript is not loading quick enough. Was wondering if anybody knew of an easy fix.
Here is the site I am using it on : http://library.buffalo.edu
If you refresh the page and hover over the links before the page fully loads, you see the problem screenshot of issue
I assume you are hiding your dropdowns with javascript so you could add style="display: none" on your divs or css and use hover function.
you havent post your html but here's example
$(".parent").mouseover(function() {
$(this).next("ul").show();
});
$(".parent").mouseleave(function() {
$(this).next("ul").hide();
})
or you can replace those with one click function and use jQuery toggleClass to toggle a class that have display: block on it
Below function will work. Try this
$(".nav-global li").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
Aside from it not being "recommended" we needed to do this for a specific project. Basically I've got a site master page that is displays a "Please wait while loading..." div to not display a page until it has been loaded. Reason being is we have many 3rd party tools that are quite slow to load.
In any event we have something to this effect:
<script type="text/javascript">
$("#msg").show();
$('#pageBody').css('opacity', 0);
$(window).load(function () {
$("#msg").hide();
$('#pageBody').css('opacity', 1);
});
</script>
We also set a timeout in the case that something doesn't load, we want the page to come back...
setTimeout('$("#pageBody").css("opacity", 1)', 1000);
The html is as simple as this snippet:
<body id="pageContainer">
<div id="msg" style="text-align:center;font-weight: bold;">
Loading, please wait...<br/>
<img src="/Images/ajax-loader.gif" alt="Loading please wait..."/>
</div>
<div id="pageBody">
</div>
</body>
The div id=pageBody is a container for all my .aspx pages that use this site master. The issue is when I go to one of these pages, it seems that I see the loading please wait... but then I still see the page for say 1/2 a second but then it goes away and comes back as fully loaded..its a bit noticeable to the user so the experience isn't as great.
I'm not really a front end developer so I am not certain if I am doing something wrong. Should I go to my .aspx pages and be doing anything in the jquery there...I was under the assumption that the site.master would handle everything.
Set the appropriate CSS for the #msg element (display: block) and #pageBody element (opacity: 0), instead of running $("#msg").show(); $('#pageBody').css('opacity', 0);. Then, all you need is the $(window).load handler.
That way, by default, the correct things are hidden/shown as the page is rendered, and only when you want to hide/show things ($(window).load) will they be correct.
Here's how I'd set it up (of course, some of it is for demo):
HTML -
<div id="msg">
Loading, please wait...
</div>
<div id="pageBody">
<div>HERE'S</div>
<div>SOME</div>
<div>CONTENT</div>
</div>
CSS -
#msg {
text-align: center;
font-weight: bold;
display: block;
}
#pageBody {
opacity: 0;
}
JS -
$(document).ready(function () {
// Simulate some time before everything's loaded
setTimeout(function () {
$("#msg").fadeOut(function () {
// Wait for #msg to fade out before fading in #pageBody
$("#pageBody").animate({
opacity: "1.0"
}, 800);
});
}, 1500);
});
DEMO: http://jsfiddle.net/X7nBN/
Create the overlay directly in the HTML using CSS instead of having Javascript show the overlay.
It's basically the same setup you have except the overlay will be visible always and only hidden when the page is fully loaded.
You would have something like this on your header:
<!-- jQuery assumed to be loaded prior to this code -->
<script type="text/javascript">
$(function(){
$(document).load(function(){
$('#msg').hide();
});
});
</script>
So, basically you do not have to use display:none or opacity:0 or visibility:hidden for your page. Just put the overlay directly over it, it should be covered completely. Then, when the page is loaded just remove or hide the overlay to show the webpage.
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.