Compatibility between Foundation and WordPress Javascript - javascript

I am creating a WordPress theme. I have finished the design using Zurb's Foundation as my framework. Everything was going swimmingly until I hit a snag with what I think is Javascript.
Please take a look here:
http://dev.andrewtanner.me/wordpress/
Two problems:
The masthead image (specifically the word 'Napier') is not rendering beneath the fixed navigation top bar.
When scaling down to smaller devices, I expect that clicking the hamburger would call the menu but this isn't happening.
You can check out the design here (just the framework, nothing else):
http://dev.napiercountryfestival.co.nz/ - No problems at all here so the JS etc is all good.
I do believe this problem resides with JS as when I use Dev Tools I am met with two errors:
Uncaught TypeError: undefined is not a function
Uncaught ReferenceError: foundation is not defined
I know Foundation relies upon JS for elements within the navigation bar, particularly if it is fixed like mine is.
I would like to know how to best approach this with WordPress. I have checked out the Codex and tried their solution concerning calling the JS located here but to no avail http://codex.wordpress.org/Using_Javascript
I have also tried calling WordPress' jQuery using <?php wp_enqueue_script("jquery"); ?> instead of Foundation's but no luck either - it makes no difference. Could it be than I'm not calling things in the right order in the DOM?
I do have a couple of smaller JS scripts, one for running the marquee and another for the countdown located beneath the masthead and I'm not experiencing any problems with these (unless I kill the dependency to Foundation's jQuery by messing around trying to get things working).
Any help you can offer would be much appreciated - thanks!

Fixing Foundation to be a function is easy. Open your app.js file and re-write it to look like this:
jQuery(document).ready(function ($) {
$(document).foundation();
});

You have two jquery files in your head tag. Remove one of them it will fix your hamburger menu issue
your masthead goes below the nav bar because you have a class fixed which has a property of position:fixed.
in the other link you have provided you have a class .f-topbar-fixed on body tag which provides padding-top:99px; which pushes your page down resulting in the visibility of your masthead. Add the class as well as the styles defined it will fix the masthead

Related

Foundation for sites 6 - dropdown menu - javascript can initializate

I have just started a new site created with meteor and using foundation for sites and sass.
I want to create a dropdown menu, but I can't make it work.
I followed this link
dropdown menu and copied html, but it's not been showed as a dropdown menu.
I think my problem is because maybe I haven't initializated the javascript of the dopdown menu.
Can someone show me how to do it. In Zurbs site there are several examples, but loading the script in the head. But I want to know how to do it with meteor.
I might be completelly lost, so any help is really welcome.
This are the packages I have added to my meteor
zurb:foundation-sites
seba:minifiers-autoprefixer
fourseven:scss
To initialize the Foundation plugins you have to run the init code $(document).foundation();, make sure it is added after the foundation js file are included.
Also make sure that $(document).foundation(); is added after DOM has been rendered (at the bottom of html) or in window.onload event.
Took some hours once to find this out :P

Trying to use Mobile Framework: Gliders in my web application

I'm currently trying to adapt my currently in-development jquery-mobile web application to use the navigational structure from this mobile template called Gliders, and I'm having some issues.
http://www.enableds.com/products/gliders/
I've been following their FAQ in order to incorporate the page structure, as well as the left sidebar in an attempt to get their navigational structure working, but I keep getting the following error in tons of my scripts:
$ is not a function
This is what was happening when I kept my current version of jquery in (which is 1.11.3); and when I switched to their version (which is 1.8.2), I get this error:
$(...).sketch is not a function
Though even if I comment my sketch functions out, the left sidebar isn't showing up at all.
Does anyone have experience with using templates like this?
Looks like it was because I was using a different version of jQuery than the version that was in the application.

How do you get the navbar toggle to work before 768px?

I have been trying to figure this out all day. I am using a theme that a client wanted to use. I have replaced every mentioning of 767px and 768px with 1359px and 1360px (those are when I want the menu to collapse). I have added custom CSS. I can get the button to show up at 1359px, but it will not toggle the navigation.
Basically, the navbar toggle button does not work until I hit 767px. I do not want to know specific code I can use to fix this problem. All I want to know is where this is being set as 767px. How does the website know to change it at 767px when I have changed every mentioning of this number to 1359px. I have gone through every php file, js file, and css file on the server. I am foaming at the mouth. I think I am going to explode. I have checked EVERY solution here and elsewhere on the internet.
Is this something I need to change in javascript, in css, or in php, or in all of them?
I am using WordPress. I am looking for a general solution NOT CODE. As in, where is this being defined. What file do I need to edit in this godforsaken theme to get the menu to toggle at 1359.
Please help before my brains start oozing out of my ears.
Okay well I feel like an idiot..
To anyone else having a similar issue,
CLEAR YOUR BROWSER CACHE.
Upon inspecting in developer tools I realized the site was loading an older version of my bootstrap.min.css file rather than the file I updated with the new breakpoints.
Cleared the cache and everything worked as expected.

z-index for jquery object issue

First off, I am sorry in advance- anyone who reads this is going to hate me.
So, I am currently finishing a webpage for a client. Things are going decently, except I'm having a bit of an issue with the positioning of an element. There is a little contact box that is supposed to slide in from the side when you click on it. The issue is that I basically have had my hands tied, and I have to use wordpress for this page, and this contact box is a plugin that the original author of this page chose. For some reason- this contact box always ends up behind other elements. I tried setting the z-index in the source code of the plugin by finding the name of the variable that is supposed to hold the instance of the slider- and I could not get anything to work (partially because I havent used jquery in a while, and, this isn't my plugin). I tried using the .zIndex function, but, it kept throwing errors. So, I went to CSS. I got the IDs of the wrapper and the actual box itself, and set their z-index to 100. This did nothing, which has left me stumped. Unfortunately, I can only provide links to the site, and a pastebin of the plugin's code- since the source code for the website is huge... and I also dont actually have access to the server- only the WordPress admin page (which doesnt allow me to edit the source of pages)
http://pastebin.com/NX8AnB16 - pastebin of the plugin source
http://buyinghouseinusa.com/ - the site i am currently trying to finish
If anyone could help me figure out what I need to apply the z-index to to make the stupid contact form stay on top, I would be very greatful. I apologize for the inconvenience of not having the actual code offhand (with the exception of what the browser can show me)
z-index only applies to positioned elements.
Then, in order to make div.dwp-contact-wrapper{z-index: 2000} work, you need
div.dwp-contact-wrapper {
position: relative;
}

javascript Accordion Customisation

I am using a Javascript accordion function which I found on the internet, however my Javascript skills are at a novice level ( Hence why I sourced a completed version to begin with).
What I have noticed is that when you load the page the accordion shows half initiated ( See Jsfiddle), what I would like to happen is that the accordion appears completely closed when the page is loaded.
I have put the accordion up on jsfiddle http://jsfiddle.net/richlewis14/uPvwL/, unfortunately the level of javascript used is beyond my capabilities and would appreciate any help in modifying it to my requirements, also if anyone could explain what is actually happening in the code I would appreciate that also, I would like to learn rather than jsut get the answer
Thanks
The script takes an argument to specify which element to open by default.
Change parentAccordion.init("acc","h3",0,0); to parentAccordion.init("acc","h3",0); and you're good to go :)
See http://jsfiddle.net/uPvwL/2/ for a working example.

Categories