- Screen name: Laurence Norton
Laurence Norton's Profile
2 Posts
2 Responses
0
Followers
Show:
- Expanded view
- List view
Private Message
- 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:/* 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 JavascriptFinally the HTML markup that appears at the top of my page:<!--main feature--><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"><!--slide--><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><!--slide--><!--slide--><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><!--slide--><!--slide--><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><!--slide--></div></div><!--main feature-->Thank you
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 »
Moderate user : Laurence Norton