Currently on this site the off canvas menu is always visible for mobile and small desktop screens... Can anyone tell me what I am doing wrong?
The site is built using the Joints WP theme based upon the Zurb Foundation framework.
Thanks in advance,
Adam
You have the error in the console:
Uncaught TypeError: $ is not a function
That suggests you have a jQuery problem and Foundation uses jQuery to hide the (not relevant) portion of the navigation on small / large screens.
I'm going to guess that if you change this:
$(document).ready(function() {
var temp = "";
$(':input').click(function() {
temp = $(this).attr('placeholder');
$(this).attr('placeholder','');
$(this).blur(function() {
$(this).attr('placeholder',temp);
});
});
});
To this:
jQuery(document).ready(function() {
var temp = "";
jQuery(':input').click(function() {
temp = jQuery(this).attr('placeholder');
jQuery(this).attr('placeholder','');
jQuery(this).blur(function() {
jQuery(this).attr('placeholder',temp);
});
});
});
In script.js
Things may work (though I have not checked the voracity of the code).
Have a look at http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/ for more information on how jQuery can run into conflicts.
Related
In my website I have a series of images that serve as nuxt links to game pages:
<template>
<NuxtLink :to="game.pageName">
<img :src="game.boxImage" :height="gamePanelHeight" class="elevation-4"
/></NuxtLink>
</template>
Each of those links draws its properties from a content markup file like this:
index: 3
boxImage: gameImages/box_image.png
title: game title
pageName: games/whatever
And they're loaded into the page like so:
<script>
export default {
async asyncData({ $content, params }) {
const games = await $content('games').sortBy('index', 'asc').fetch()
return { games }
},
}
</script>
Whenever I refresh this page. All of these images break until I navigate outside the page and come back. What's causing this issue and how do I fix it?
This is a static Nuxt application FYI. And it's being served through an AWS S3 bucket but I don't think that's what's causing this issue.
EDIT: Also the boxImage that's in gameImages/box_image.png is from the static folder.
asyncData is not a hook that is triggered upon reaching an URL or using a reload (F5), it is only triggered during navigation.
If you want it to work even after a reload, use the fetch() hook.
More info here: https://nuxtjs.org/docs/2.x/components-glossary/pages-fetch#options
Edit on how to write it with fetch()
<script>
export default {
data() {
return {
games: [],
}
},
async fetch() {
this.games = await this.$content('games').sortBy('index', 'asc').fetch()
},
}
</script>
I am trying to get this series of slideshows to fade in/out on scroll.
Trying to get it to do gradual fade but am not getting anywhere with this.
https://thetulip.community/Shannon-Garden-Smith
<script>
$(window).scroll(function() {
$(".image 1").css({
'opacity' : 0.5-(($(this).scrollTop())/20)
});
});
</script>
I tried this but to no avail!
My knowledge of Java is limited, so I'm not sure how to have each one fade in and out on scorll.
Any help would be beyond appreciated.
Thank you,
S
Welcome to the community.
I'm not sure which library you're using for your slideshow presentation, but jQuery has built in methods to fade HTML elements in or out. You can view them here:
https://api.jquery.com/fadeIn/
https://api.jquery.com/fadeout/
Note that each method has an optional function to call once the animation is completed, which is called once per element match. One approach could be to call fadeOut() on click, and then call fadeIn() within the fadeOut method's complete function. For example:
var images = [
"https://freight.cargo.site/w/750/i/0c4f83626e13ce4aa69fee4a84d02618c43afa3ff33d3c6bbd8fd6e265aa5538/01-03-downwrong.jpg",
"https://freight.cargo.site/w/750/i/3aa2564a6c11b13ef5c44820c69b00563e89ddd572372d52d60b6a0bfd80d1bc/01-04-downwrong.jpg"
]
var i = 0;
$(function() {
$('img').attr('src', images[i]);
});
$('img').click(function() {
$(this).fadeOut('slow', function() {
i = i === images.length - 1 ? 0 : i + 1;
$('img').attr('src', images[i]);
$(this).fadeIn('slow');
});
});
Here's a fiddle: https://jsfiddle.net/matthewmeppiel/n28hg4qj/5/
I'm trying to replace instances of jsTree with Foundation's drilldown menu as it has better benefits, but in some places I'm utilizing jsTree's lazy loading however there's no option for this in Foundation. Is there any way of doing this, or does anybody know if it's been done before?
I had the initial parent-level list populating, but the drilldown functionality wasn't being applied after calling Foundation.Drilldown(), and I haven't been able to figure out the next-level items yet.
$(function(){
var tree = $("ul#tree_id");
$.getJSON("/url/",function(data){
console.log(data);
if(data){
$.each(data,function(key,value){
var node = document.createElement("li");
$(node).html(value.text);
tree.prepend($(node))
});
}
var elem = new Foundation.Drilldown(tree);
});
});
Thanks.
I see this question is being ask all over again still don't find solution that works for such a trivial task.
This url displays a list of navigations tabs for workspaces.
http://localhost:4200/users/1/workspaces
Each of tab resolves to
http://localhost:4200/users/1/workspaces/:wid
Also on the I have a button that suppose to create a new workspace as well as new tab.
Here how controller for looks:
export default Ember.Controller.extend({
actions: {
newWorkspace: function () {
this.get('currentModel').reload();
var self = this;
var onFail = function() {
// deal with the failure here
};
var onSuccess = function(workspace) {
self.transitionToRoute('dashboard.workspaces.workspace', workspace.id);
};
this.store.createRecord('workspace', {
title: 'Rails is Omakase'
}).save().then(onSuccess, onFail);
}
}
});
When I click on button I see in ember inspector new record indeed created as well as url redirected to id that represents newly created workspace.
My question is how to force model/template to reload. I have already killed 5h trying model.reload() etc. Everything seem not supported no longer. Please please help.
UPDATE
When adding onSuccess
model.pushObject(post);
throws Uncaught TypeError: internalModel.getRecord is not a function
I believe you should call this.store.find('workspace', workspace.id) for Ember Data 1.12.x or earlier. For 1.13 and 2.0 there are more complicated hooks that determine whether or not the browser should query the server again or use a cached value; in that case, call this.store.findRecord('workspace', workspace.id, { reload: true }).
I do not know if this help. I had a similar problem. My action was performed in the route. Refresh function took care of everything.
I was under the impression that Ember was well tested under some older versions of IE. However, upon finally firing up my near complete app (form wizard). I'm noticing IE is complaining about replaceState and pushState, two methods that are not supported according to http://caniuse.com/#search=pushState
Are there any workarounds for this?
SCRIPT438: Object doesn't support property or method 'replaceState'
get(this, 'history').replaceState(state, null, path);
UPDATE: As of Ember 1.5.0+ I can confirm that they added 'auto' which should eliminate the need for the example below.
App.Router.reopen({
location: 'auto'
});
Original Answer:
Apparently you need to feature detect the history API:
if (window.history && window.history.pushState) {
App.Router.reopen({
location: 'history'
});
}
There is no work around. If you need to use real URLs (/users) instead of hash URLs (/#/users) then you have to either exclude IE 8 & 9 from your list of supported browsers, or you need to use Ember in a "progressive enhancement" manner, still serve valid content from the server for each real URL that is visited, and use feature detection to selectively enable your Ember app.
To properly support both pushSate and non-pushState browsers, you need to have a translator between the 2 different state mechanisms.
For example, let's say your rootURL is '/admin/' and you start with this URL:
/admin/users/123
For IE8/9, you'll want to redirect the user to '/admin/#/users/123' before Ember's routing mechanism takes over. Likewise, if you start with this URL:
/admin/#/users/123
...then for browsers that support pushState, you'll want to replace the state to '/admin/users/123' before Ember's routing mechanism takes over.
This is the default behavior of Backbone's router and it works fairly well.
To achieve this result in Ember, you can do something like this, which was inspired by Backbone's source code:
App.Router.reopen({
rootURL: '/admin/',
init: function () {
this.translateRoute();
this._super();
},
translateRoute: function () {
var hasPushState = window.history && window.history.pushState;
var atRoot = window.location.pathname === this.rootURL;
var fragment = decodeURIComponent(window.location.pathname);
if (!fragment.indexOf(this.rootURL))
fragment = fragment.substr(this.rootURL.length);
if (hasPushState)
this.location = 'history';
// If we started with a route from a pushState-enabled browser,
// but we're currently in a browser that doesn't support it...
if (!hasPushState && !atRoot) {
window.location.replace(this.rootURL + '#/' + fragment);
return;
}
// If we started with a hash-based route,
// but we're currently in a browser that supports pushState...
if (hasPushState && atRoot && window.location.hash) {
fragment = window.location.hash.replace(/^(#\/|[#\/])/, '');
window.history.replaceState({}, document.title, window.location.protocol + '//' + window.location.host + this.rootURL + fragment);
}
}
});