I have this site here http://jamessuske.com/freelance/seasons/index.php and in the navigation on the left, I am using jQuery to remove a class and add it the current pages its on, also if you click on the Menu link it should show a submenu.
<script type="text/javascript">
$( '.navigation li a' ).each(function() {
$(this).removeClass('active');
});
$('.navigation li ul.menu-submenu').hide();
$('.navigation li a').eq(6).addClass("active");
</script>
Above is the code I have in every separate page to update the navigation.
In my header.php file, I have the following:
<script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
<script type="text/javascript">
$(window).load(function () {
var theWindow = $(window),
$bg = $("#bg"),
aspectRatio = $bg.width() / $bg.height();
function resizeBg() {
if ((theWindow.width() / theWindow.height()) < aspectRatio) {
$bg.removeClass()
.addClass('bgheight');
} else {
$bg.removeClass()
.addClass('bgwidth');
}
}
theWindow.resize(resizeBg).trigger("resize");
});
</script>
Would this mess up my navigation?
The header.php file is included on all pages with php include.
jQuery 2.x has dropped support for old IE versions. Use jQuery 1.10.x instead. Credit to Rob W.
Related
enter image description hereI am currently working on a project where my script adds the schema codex into the navigation. The jQuery code does work.
However, when I add the link for ajax.googleapis.com it break all other Divi style scripts. I would be grateful for any help! Please view my coding below. I have this in a child theme and the code is stored in a functions.php file.
The theme builder I am working with is Div.
<?php
function load_js()
{
if(!is_admin())
{
echo '<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>';
echo '<script type="text/javascript">
jQuery( document ).ready(function(){
// Put itemscope and itemtype into navigation ul
$("nav ul").attr("itemscope", "").attr("itemtype", "http://www.schema.org/SiteNavigationElement");
// put itemprop in lis
$("nav ul li").attr("itemprop", "name");
//put itemprop url in anchors
$("nav ul li a").attr("itemprop", "url");
});
</script>';
}
}
add_action( 'wp_footer', 'load_js');
After think on it and working on some other projects, I have accomplished and fixed the problem.
The issue was that the script to pull in the ajax jquery library was being loaded into the and not the . So I made some simple changes you can view below to see the fix.
<?php
function load_js()
{
if(!is_admin())
{
echo '<script type="text/javascript">
$( document ).ready(function(){
// Put itemscope and itemtype into navigation ul
$("nav ul").attr("itemscope", "").attr("itemtype", "http://www.schema.org/SiteNavigationElement");
// put itemprop in lis
$("nav ul li").attr("itemprop", "name");
//put itemprop url in anchors
$("nav ul li a").attr("itemprop", "url");
});
</script>';
}
}
add_action( 'wp_footer', 'load_js');
// load ajax jquery for schema nav
function ajax_jquery()
{
if(!is_admin())
{
echo '<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>';
}
}
add_action( 'et_head_meta', 'ajax_jquery');
Thanks everyone for your help!
I am looking to create sound buttons.
Have used the answer here:
Buttons click Sounds
and implemented it so that the buttons are divs and created dynamically from a MySQL DB.
Does anyone know how to preload that list of sounds on page load?
Also, I want to apply a CSS class to the div when clicked and then when the audio finishes, want it to switch back to the original CSS class.
This is what I have tried. The sounds play correctly but the onended fuction does not fire.
<script type='text/javascript'>
$(window).load(function(){
var baseUrl = "http://[URL HERE]";
var audio = [<?php echo $audiostring; ?>];
$('div.ci').click(function() {
var i = $(this).attr('id').substring(1);
mySound = new Audio(baseUrl + audio[i-1]).play();
mySound.onended = function() {
alert("The audio has ended");};
});
});
</script>
If you are using HTML5 audio you can do something like the following:
mySound.addEventListener("ended", function()
{
alert("The audio has ended");
});
Edit:
Try changing the way you create the audio tag, as referenced here.
$('div.ci').click(function() {
var i = $(this).attr('id').substring(1);
mySound = $(document.createElement('audio'));
mySound.src = baseUrl + audio[i-1];
mySound.play();
mySound.addEventListener("ended", function()
{
alert("The audio has ended");
});
});
<audio> and new Audio() should be the same but it doesn't look
like that is the case in practice. Whenever I need to create an audio
object in JavaScript I actually just create an element like
this:
The ended event is created based on .currentTime attribute. event-media-ended
the canplaythrough event was used to knowing when the browser has finished downloading the audio file and we can play
code complete use closest
<style type="text/css">
body{background: #aaa;color:#fff;}
div
{
width: 100px;
height: 100px;
background: #dda;
}
</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div >
</div>
<div >
</div>
<div >
</div>
<script type="text/javascript">
$(window).load(function(){
var audioFiles = [
"http://www.soundjay.com/button/beep-01a.mp3",
"http://www.soundjay.com/button/beep-02.mp3",
"http://www.soundjay.com/button/beep-03.mp3",
"http://www.soundjay.com/button/beep-05.mp3"
];
function Preload(url) {
var audio = new Audio();
// once this file loads, it will call loadedAudio()
// the file will be kept by the browser as cache
audio.addEventListener('canplaythrough', loadedAudio, false);
audio.src = url;
}
var loaded = 0;
function loadedAudio() {
// this will be called every time an audio file is loaded
// we keep track of the loaded files vs the requested files
loaded++;
if (loaded == audioFiles.length){
// all have loaded
init();
}
}
var player = document.createElement('audio');
function playAudio(index) {
player.src = audioFiles[index];
player.play();
}
function init() {
$('div').click(function(event) {
$(this).css('background', 'blue');
playAudio(Math.floor(Math.random()*audioFiles.length));
player.addEventListener("ended", function(){
player.currentTime = 0;
$(event.target).closest('div').css('background', '#dda');
});
});
}
// We begin to upload files array
for (var i in audioFiles) {
Preload(audioFiles[i]);
}
});
</script>
I am trying to remove the skrollr functions on mobile (max width 767px) screen.
I have the following code that (it is assumed) to stop skrollr on mobile but it doesn't work (I have tried putting it in a seperate, enquened file and put it in the skrollr code itself, no change)
JAVA code
$(function () {
// initialize skrollr if the window width is large enough
if ($(window).width() > 767) {
skrollr.init(yourOptions);
}
// disable skrollr if the window is resized below 768px wide
$(window).on('resize', function () {
if ($(window).width() <= 767) {
skrollr.init().destroy(); // skrollr.init() returns the singleton created above
}
});
});
code at the bottom of footer.php (to make skrollr work)
<script type="text/javascript">
skrollr.init({
forceHeight: false
});
</script>
<script type="text/javascript">
//http://detectmobilebrowsers.com/ + tablets
(function(a) {
if(/android|avantgo|bada\ ... )
{
//Add skrollr mobile on mobile devices.
document.write('<script type="text/javascript" src="js/skrollr.mobile.min.js"><\/script>');
}
})(navigator.userAgent||navigator.vendor||window.opera);
</script>
You are initializing skrollr in the footer.php regardless of the current window width. The condition in line 3 of your JAVASCRIPT file - if ($(window).width() > 767) { - does work, but skrollr is already initialized at this point by the javascript in your footer.php
I would recommend you to remove the initialization of skrollr in the footer.php file and modify your javascript code to something like this:
(function($) {
$(function () {
var skrollrInstance;
var onResize = function () {
var isMobile = $(window).width() <= 767;
if (!skrollrInstance && !isMobile) {
skrollrInstance = skrollr.init({
forceHeight: false
});
} else if(skrollrInstance && isMobile) {
skrollrInstance.destroy();
skrollrInstance = null;
}
};
$(window).on('resize', onResize);
onResize();
});
})(jQuery);
Fiddle: http://jsfiddle.net/erfvgx85/2/ (resize the "Result" frame to test it)
I have stored the current skrollrInstance in a separate variable. As you have commented, "// skrollr.init() returns the singleton (instance) created above", but it could be a performance issue if skrollr isn't initialized or already destroyed at this moment.
I also think that it's nicer to just have one place for the call of skrollr.init - otherwise we could forget to pass the same options (forceHeight: false) in another call. (like in your example)
I need a header that sticks to the top while scrolling down the page. Am using the following jquery function
<script type="text/javascript">
google.load("jquery", "1");
function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top = $('#sticky-anchor').offset().top;
if (window_top > div_top)
$('#sticky').addClass('stick')
else
$('#sticky').removeClass('stick');
}
// If you have jQuery directly, use the following line, instead
// $(function() {
// If you have jQuery via Google AJAX Libraries
google.setOnLoadCallback(function() {
$(window).scroll(sticky_relocate);
sticky_relocate();
});
</script>
but the sliders already present in the page not functioning! Please help me to solve this issue.
I have added $.noConflict();above the function the slider works properly and sticky div is not working!
And have made following changes to the code // Start closure to prevent namespace conflicts
;(function($) {
// Whatever code you want that relies on $ as the jQuery object
// End closure
})(jQuery);
both the slider and sticky div not working!
On my index.php I have a header, sidebar, footer and the main part of it is the <div id="feed"> that loads engine.php every 6000 ms.
I have a Contact page ( contact.php ) in my sidebar. Instead of copying my index.php to a new page, with header, sidebar, footer and a main div for the contact content, can I load it in the #feed div of index.php withour refreshing the site in the browser?
To summarize it, my question is, is there any way that my pages to be loaded on the same div ( #feed) without refresh and freeze the setTimeout timer?
When the user click back on Home, then the engine.php is loaded and reloaded every 6 seconds.
Maybe this can be done with Ajax, I don't know...
Thank you for this and any examples/codes are highly appreciated.
<script language="JavaScript">
$(function () {
function loadfeed() {
$('#feed')
.addClass('loading')
.load('engine.php', function () {
$(this).removeClass('loading');
setTimeout(loadfeed, 6000);
});
}
loadfeed();
});
</script>
Update
Having something like this works, but the engine.php loads after 6 sec.
$("#contactBtn").click(function() {
$("#feed").load('contact.php');
});
I have no way of fully testing this, but you try something like this.
<script language="JavaScript">
var timerID;
$(function () {
function loadfeed() {
$('#feed')
.addClass('loading')
.load('engine.php', function () {
$(this).removeClass('loading');
timerID = setTimeout(loadfeed, 6000);
});
}
$("#contactBtn").click(function() {
clearTimeout(timerID);
$("#feed").load('contact.php');
$("#feedBtn").bind('click', loadfeed);
});
loadfeed();
});
</script>
The key here is the use of a global timerID variable and the clearTimeout() function.
If this works, you can include a Return to feeds button with id="feedBtn" in contact.php, but you’ll have to bind the loadfeed function to the button’s click event after loading it.
Without interrupting the timeout cycle, the contact form will display for a maximum of 6 seconds inside #feed before the next $.load request finishes.
If you want to leave the timeout cycle going, rather than putting everything in #feed, you can give it an appropriate sibling:
<div id="panels">
<div id="feed">
<!-- ... -->
</div>
<div id="contact" style="display:none">
<!-- ... -->
</div>
</div>
Then, switch which is currently displaying:
$('a.contact').click(function (e) {
e.preventDefault();
$('#contact').show();
$('#panels > div:not(#contact)').hide();
});
$('a.feed').click(function (e) {
e.preventDefault();
$('#feed').show();
$('#panels > div:not(#feed)').hide();
});
The feed will continue to load into #feed, while the contact page can display uninterrupted.
Also, if you supply a clue on your links, you can combine those click handlers with fair ease:
<div id="menu">
Feed
Contact
</div>
<script>
$('#menu > a').click(function (e) {
e.preventDefault();
var panel = $(this).data('panel'); // or $(this).attr('data-panel') for jQuery 1.4 or older
$('#' + panel).show();
$('#panels > div:not(#' + panel + ')').hide();
});
</script>
You can load a file with $.load
$("#contactBtn").click(function() {
$("#feed").load('contact.html') No need for a callback or the timeout.
}
Check the jquery docs if you're looking for something more specific. Hope that helps.