Search jQuery

jQuery Forum

Screen name:
Laurence Norton

Laurence Norton's Profile

2 Posts

2 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

Animation failing to play on initial load
[1Reply]
- 23-Sep-2017 09:02 AM
- Forum: Using jQuery
Hi,

I have a slider on my front page. I'm using CSS animation to trigger a slow pan in effect on the background image. The animation only starts to work on the second slide. Is there a way that I can force it to trigger on the first slide?

At the moment CSS looks for the following class name, which is applied to the first slide on page load. Perhaps it's because the CSS is loading before the Javascript? Or vice versa? Here is the code I'm using and the website in question:

http://www.glowdigital.net

/* CSS */

.cycle-slide a .backstretch img {
transform: scale(1);
transition: all 15s;
-webkit-transition: all 15s;
-moz-transition: all 15s;
animation-timing-function: ease-out;
pointer-events: none;
}

.cycle-slide-active a .backstretch img {
transform: scale(1.2);
transition: all 15s;
-webkit-transition: all 15s;
-moz-transition: all 15s;
animation-timing-function: ease-out;
}

Then just before my </Body> tag i'm using the following Javascript:

//Make the image full screen:
<script>
$("#img1").show().backstretch("images/projects/jaguar-f-type-r-feature.jpg");
$("#img2").show().backstretch("images/projects/linda-meredith-photography-feature.jpg");
$("#img3").show().backstretch("images/projects/run-connect-feature.jpg");
</script>

//jQuery and Slideshow Javascript
<script src="http://www.glowdigital.net/scripts/jquery.min.js"></script>
<script src="http://www.glowdigital.net/scripts/jquery.backstretch.min.js"></script>
<script src="http://www.glowdigital.net/scripts/cycle2.js"></script>
<script src="http://www.glowdigital.net/scripts/cycle2.swipe.js"></script>

Finally the HTML markup that appears at the top of my page:

<div class="homefeatureimg">

<div class="cycle-slideshow" id="cycle" data-cycle-swipe=true data-cycle-swipe-fx=scrollHorz data-cycle-timeout="8000" data-cycle-slides="> div">


<div>

<a href="index.php?page=jaguar-good-to-be-bad" id="img1"></a>
<div class="max-width homefeaturec">
<div class="label">Digital campaign</div>
<h1 class="featuretitle">JAGUAR F-TYPE R</h1>
</div>

</div>



<div>

<a href="index.php?page=linda-meredith-photography" id="img2"></a>
<div class="max-width homefeaturec">
<div class="label">Photography</div>
<h1 class="featuretitle">LINDA MEREDITH</h1>
</div>

</div>



<div>

<a href="index.php?page=run-connect" id="img3"></a>
<div class="max-width homefeaturec">
<div class="label">Mobile application</div>
<h1 class="featuretitle">RUN CONNECT</h1>
</div>

</div>


</div>

</div>


Thank you

jQuery not working on WordPress mobile menu
[2Replies]
- 22-Sep-2017 09:18 AM
- Forum: Using jQuery
Hi,

I'm trying to use a jQuery function on the mobile menu but everything I try fails to work. I've done a test using a simple hover alert message. When in desktop mode and rolling over 'Home' the alert message displays. However, when I reduce the window down to mobile and rollover 'Home' the alert message fails to show. If I move the jQuery selector tag to say the Logo, burger menu or search icon it shows on both the desktop and mobile.

For some reason anything inside the 'mobile menu container' is being ignored.

Here is the jQuery snippet that i've added to my header.php file:

<script type="text/javascript">

jQuery(document).ready(function () {

jQuery("#menu-item-14").hover(function () {

alert('test');

});

});

</script>

I'm using Wordpress with WooCommerce and Divi

Thank you

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend