WordPress Version - 6.3.1
Theme - JointsWP (blank starter theme)
jQuery Version - 6.3.3 (tried 6.3.1 also)
Website Link - https://legiondesigns.com/dev/labella/
EDIT: There are NO console errors either
I seem to be having a problem on my WordPress site. When running a jquery script in codepen.io everything functions properly. I AM using this code snippet on another site that I have designed years ago and it works fine using jQuery 6.3.1 but When running that code through my website it is not function properly at all.
Code snippet in question:
jQuery(document).ready(function( $ ){
$('.mobileBtn').click(function(){
if( $('.mobileNav').hasClass('animate__zoomIn') ){
$('.mobileNav').removeClass('animate__zoomIn').addClass('animate__zoomOut');
$('.mobileBtn').removeClass('btnActive');
setTimeout(function () {
$('.mobileNav').css({display: 'none'}).removeClass('animate__zoomOut')
},1000 );
// alert('1');
}
else{
$('.mobileNav').css({display: 'block'}).addClass('animate__zoomIn');
$('.mobileBtn').addClass('btnActive');
// alert('2');
}
});
});
When I load this up on codepen.io (https://codepen.io/agon024/pen/KKBxNwx) it functions like it should.
I have disabled all the plugins and it still does it. I have removed all other jQuery from the script and it still does it. I have tried using "jQuery" instead of "$" and nothing. I am using this starter theme on another site and it doesn't have a problem.
IMPORTANT -
If I uncomment the "alert" lines I see that it is looping through the "if" and "else" statements without stopping. When I click "mobileBtn" it adds the class "animate__zoomIn" and pops up an alert saying "2" then when I click OK on the alert it instantly removes the class "animate__zoomIn" and adds the class "animate__zoomOut", sets the inline style to "display: none" after 1000ms and pops up an alert saying "1" and when I click OK it stops.
Anyone know what is going on? Like I said it seems to be looping throught the "if" and "else" statements even when the "else" condition is met. This is the first time I have encountered this and seeing as it works on codepen it must have something to do with WordPress.
This should work as desired.
$('.mobileNav').addClass('animate__zoomOut').hide();
$('.mobileBtn').click(function(){
$('.mobileNav').show();
if ($(this).hasClass('btnNotActive')) {
$(this).toggleClass('btnActive btnNotActive');
$('.mobileNav').toggleClass('animate__zoomIn animate__zoomOut');
}
else {
$('.mobileNav').toggleClass('animate__zoomIn animate__zoomOut');
$(this).toggleClass('btnActive btnNotActive');
}
$(this).css('pointer-events', 'none');
setTimeout(function(){
$('.mobileBtn').css('pointer-events', 'auto');
}, 1000);
});
.mobileNav {
background-color: red;
width: 400px;
height: 400px;
}
.mobileBtn {
display: inline-block;
padding: 10px 50px;
background-color: blue;
color: white;
width: auto;
margin: 0 auto;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<div class="mobileBtn btnNotActive show-for-small-only">
Click Me
</div>
<div class="mobileNav animate__animated">
<div class="mobileNavInner">
<?php joints_off_canvas_nav(); ?>
</div>
</div>
Related
So I am using smart-wizard https://github.com/mstratman/jQuery-Smart-Wizard.
I have included it in js-popup, so when I open the popup it does not show the first step. I need go to the second step and then go back to see the first step
I had the same problem, what I did was download the smartWizard css, the smart_wizard_all.ccs version and in the last line of the file add:
.tab-content {
height: auto! Important;
}
I hope it works for you. Sorry about my English I am using the google translator hahahaha,
Greetings,
i escape this case by "onmouseenter" after call show modal.
<div id="modal" onmouseenter="call_wizard()">
<div id="wizard" class="form_wizard wizard_horizontal">
<!-- step 1,2,3,4 -->
</div>
</div>
<!--$('#modal').modal('show');-->
<script>function call_wizard(){$('#wizard').smartWizard();}</script>
Not exactly a fix, but I found a workaround. Looks like the step-container initializes with height zero. Don't know why this happens, but we can override it in the css file. In the css file you are using to style your "Smart Form", look for a class called stepContainer.
.form_wizard .stepContainer {
display: block;
min-height:500px; // Add this line with your minimum height
position: relative;
margin: 0;
padding: 0;
border: 0 solid #CCC;
overflow-x: hidden; }
This should fix your problem until someone can explain why it happens in the first place.
I am getting the same kind of problem as element is previously hide and when I show that element then I am getting same problem so I tried this below code and its work for me
`$('[name = elementName ]').show(1000, function() {
$("#wizard").smartWizard("currentRefresh");
});`
Its actually load the fist step but it set its height to zero as its is previously hidden but after applying $("#wizard").smartWizard("currentRefresh"); it refresh the current step and set proper height.
I am wondering if you can help. I am previewing my code in a Firefox build system using Sublime text 3. The HTML and CSS are fine however my jQuery dosen't work despite being properly linked etc. Here is my code:
I just observed one thing, you are adding the class and removing it immediately on hover hence the div is unaffected
Try this code, if you are trying to add the class only on hover and remove it when not hovered
$('#manifesto').mouseover(function() {
$(this).addClass('manifestotitle');
}).mouseout(function(){
$(this).removeClass('manifestotitle');
});
For reference see the following jsfiddle:
http://jsfiddle.net/x3965auq/2/
Hope this helped
I see in your CSS that "manifestotitle" refers to an id (#manifestotitle) could you try converting it to a class?
EDIT: Ok, I think I got it. I downloaded your code and messed around a bit. This is what I changed to make it work:
Change your CDN for jquery to the official one:
"manifestotitle" should be a class as your javascript is using it as one. So you should make these changes. In your HTML:
<div class="manifestotitle">
And in your CSS file:
`.manifestotitle {`
Fix your selector in your js:
$('#manifesto').hover(function () {
That got it working for me, hope it helps!
Not an answer however need to show more code!
It seems I can't get .hover() and .mouseover() functions to work at all with my code...here is a simple example (using a class rather than an ID also):
HTML:
<div class="left"><b>Nick Reilly</b>
<P><b><i>(Holding Page)</i></b></P></div>
CSS:
.left {
color: #000000;
left: 50px;
position: fixed;
top: 40px;
font-size: 18px;
z-index: 100;
line-height: 15px;
}
jQuery:
$(document).ready(function(){
$("#left").mouseover(function(){
addClass('.red');
});
});
Surely this should simply change the text I have to red when the mouse is over it? When I preview it in both a Firefox and Chrome build nothing happens!
Thanks
I am currently making a website for a dance studio and am using the wmuslider to create a slider in the middle of the homepage. Only problem is that the slider sometimes loads and sometimes doesn't. I found that this is a problem in all the browsers I use: Chrome, Firefox and Explorer. I'm guessing this is a problem with the jquery script. Does anybody have any suggestions?
Thanks,
Aleks
The website is: http://www.aleksdesign.ca/dance/
Browsers might be trying to initialise the slider before the DOM is ready. Wait till its ready:
<script>
$( document ).ready(function() {
var options = {touch: true, animation: "slide"};
$(".wmuSlider").wmuSlider(options);
});
</script>
See http://api.jquery.com/ready/
Make this changes in demo.css
.wmuSlider {
position: relative;
overflow: hidden;
set some height -> height: 100px;
}
.wmuSlider .wmuSliderWrapper {
remove -> display:none
}
I'm currently coding and programming a website using Ruby on Rails but having some issues with a fairly basic element within the page. Basically, my backend system will contain a color that will change each month, that color is then pulled and used throughout the website for multiple elements. This is one of those elements...
I have a div with an image inside that will soon be a link. I want to use JS or JQuery to make this element change it's background color on hover. I know it's simple but, for some reason, I can't figure this out. I'll include a jsfiddle of the entire setup:
HTML:
<div class="contribute_buttons">
<img src="https://s3.amazonaws.com/static-passenger2/images/shop_and_support.png">
</div>
CSS:
.contribute_buttons {
width: 300px;
height: 39px;
float: left;
background-color: #393839;
margin-top: 5px;
margin-bottom: 15px;
}
JAVASCRIPT:
$(document).ready(function() {
var colorOrig=$(".contribute_buttons").css('background');
$(".contribute_buttons").hover(
function() {
//mouse over
$(this).css('background', '#AAEE00')
}, function() {
//mouse out
$(this).css('background', colorOrig)
});
});
http://jsfiddle.net/EQeMs/
Thanks in advance for the help!
You can do this with just CSS using the :hover pseudo-class:
.contribute_buttons:hover {
background-color: #AAEE00;
}
Working Demo
Otherwise, your jQuery is fine. It looks like you just forgot to import jQuery in your jsFiddle example.
Load jQuery in the Frameworks & Extensions menu on the left and this fiddle works fine. $ is the jQuery function and when you see it it means that jQuery is required.
However, unless you're targeting IE below version 7 I would just use the pure CSS solution with :hover
I have Google Translate on my page. It looks like a drop-down list, but all other drop-down lists on my page have another style. So I created jQuery function which change Google Translator drop down list styles. This function adds or deletes some style parameters. I'd like to know when I should call this function? In current code I call it after 3 sec. after document.ready
$(document).ready(function () {
setTimeout(wrapGoogleTranslate, 3000);
});
Current situation is that I hide the Div where Google translate is placed and show it after it's styles are corrected by my function. It means that my page loads, then it wait for 3 seconds, and then Google Translate appears with corrected styles.
I'd like to know how I can determine that Google Translate drop-down was loaded and then call my function to change the style. I don't want to make users wait for 3 seconds (maybe in some situations Google Translate would loads more than 3 seconds, then my function would never be executed).
I recently wanted to change "Select Language" to simply "Language", so I also had to run code after Google's code had been executed. Here's how I did it:
HTML
It's important to set Google's div to display:none -- we'll fade it in with JavaScript so that the user doesn't see the text switching from "Select Language" to "Language".
<div id="google_translate_element" style="display:none;"></div>
<script type="text/javascript">function googleTranslateElementInit() {new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, gaTrack: true, gaId: 'UA-35158556-1'}, 'google_translate_element');}</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
JavaScript
function changeLanguageText() {
if ($('.goog-te-menu-value span:first-child').text() == "Select Language") {
$('.goog-te-menu-value span:first-child').html('Language');
$('#google_translate_element').fadeIn('slow');
} else {
setTimeout(changeLanguageText, 50);
}
}
changeLanguageText();
I had a similar situation where i had to change "Select Language" to just display "Language". Here is my CSS solution:
div#google_translate_element{
display: inline-block;
vertical-align: top!important;
}
div#google_translate_element *{
margin: 0px;
padding: 0px;
border: none!important;
display: inline-block;
vertical-align: top!important;
}
div#google_translate_element .goog-te-gadget-icon{
display: none;
}
div#google_translate_element .goog-te-menu-value{
color: #899290;
}
div#google_translate_element .goog-te-menu-value:hover{
color: #a6747e;
}
div#google_translate_element .goog-te-menu-value *{
display: none;
}
div#google_translate_element .goog-te-menu-value span:nth-child(3){
display: inline-block;
vertical-align: top!important;
}
div#google_translate_element .goog-te-menu-value span:nth-child(3)::after{
content: "Language"!important;
}
You can do it with pure JavaScript. It says in the W3 docs for the onLoad attribute that you can add an attribute in a HTML element which takes as a parameter, the JavaScript code to be executed when the element has loaded.
Problem is, the attribute is only supported for a few elements which are:-
<body>
<frame>
<frameset>
<iframe>
<img>
<input type="image">
<link>
<script>
<style>
So, I'd recommend going with an <iframe> or <frame. It should now look something like this:
<frame onLoad="wrapGoogleTranslate();" />
Or else, you can try this with jQuery:
$("div#googleTranslateWrapper").load(function() {
setTimeout(wrapGoogleTranslate, 3000);
});
Here's the documentation for jQuery's load method