I am trying to use Orbit, and Foundation 6, without success. The pictures appear stacked one on top of the other, and do not change. I get a Javascript Error message in the Error Console.
If I remove the references to Orbit, the javascript error message does not appear.
Timestamp: 18/07/2016 12:51:46
Error: TypeError: We're sorry, object is not a valid parameter. You must use a string representing the method you wish to invoke.
Source File: http://lf/bower_components/foundation-sites/js/foundation.core.js
Line: 284
The bottom of the page, where the js files are called, is
</script>
<!--<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>-->
<script src='bower_components/foundation-sites/js/foundation.core.js'></script>
<script src='bower_components/foundation-sites/js/foundation.orbit.js'></script>
<script>
/*
$(document).foundation();
*/
$(document).foundation({
orbit: {
animation: 'slide'
}
});
</script>
All the paths to the .js code are correct.
I am guessing that I have an incorrect version of something in there, but I don't know what.
Does anyone have any suggestions?
Foundation 6 uses jquery and jquery(version).min or jquery.js should be the first script that you should refer.
Adding to that, I'm guess you did not go through the Foundation 6 Orbit Slider documentation's JavaScript Reference section.
It says:
The file foundation.orbit.js must be included in your JavaScript to use this plugin, along with foundation.core.js. This plugin also requires these utility libraries:
foundation.util.keyboard.js,
foundation.util.motion.js,
foundation.util.timerAndImageLoader.js and
foundation.util.touch.js
So try referring these in your script space or use the foundation.min.js which will take care of all dependencies.
One more important thing, if you want to animate your slider, then you will have to install and include motion-ui references as mentioned in the Orbit Slider documentation's Using Animation section.
Related
I am doing my first project in Foundation 6 and am having trouble getting the responsive navigation to work. I started with the basic page template that comes with Foundation (installed F6 using CodeKit) then I pasted in the responsive menu code exactly as it appears here http://foundation.zurb.com/sites/docs/responsive-navigation.html#responsive-toggle but when viewed at small screen sizes, the word "menu" appears, but clicking it does nothing.
The Drilldown responsive menu also does not work -- pasted in the drilldown menu code (second example down, on the page referenced above) and what appears is a long long list of links, nothing is collapsed and nothing slides in. There must be a script missing but I have triple-checked and app.js, foundation.js and jquery scripts are loaded. What else am I missing?
First of all sorry for my bad English, did you initialize foundation's javascript?
That can be done with the following code in youre custom javascript file:
$(document).foundation();
I do it with jQuery like this:
$(document).ready(function() {
$(document).foundation();
});
for more information see: Foundation-6 documentation - initializing
and please check if you have the proper file structure for the foundation files, please see the following documentation: Foundation-6 documentation - File Structure
tl;dr: Faulty purifycss configuartion in the gulp.babel.js file.
I also had this problem. My setup:
generator-webapp
webapp's jade recipe
I can get the responsive dropdown menu to work by using the tab and enter key. This means that the relevant js files are being loaded correctly. The navigation 'burger' also does not appear.
Upon using the chrome dev tools to inspect the responsive dropdown menu example from the foundation website, I noticed that style of <button class="menu-icon" type="button" data-toggle=""></button> is being effected by the .menu-icon CSS rule from the scss partial, _menu-icon.scss. Mine wasn't. When I looked, the foundation.scss file from the app/ has the exact same style rule. The converted foundation.css was being served from the .tmp/ folder, but did not have the .menu-icon CSS rule. Then I suspected purifycss again (which I had commented out of the gulp file before and forgot to reset the gulp serve, saw no fix and thus falsely excluded the purifycss rule from the list of suspects).
I set my gulp styles task up like this:
gulp.task('styles', () => {
return gulp.src('app/styles/*.scss')
.pipe($.plumber())
.pipe($.sourcemaps.init())
.pipe($.sass.sync({
outputStyle: 'expanded',
precision: 10,
includePaths: ['.']
}).on('error', $.sass.logError))
.pipe($.autoprefixer({browsers: ['> 1%', 'last 2 versions', 'Firefox ESR']}))
/*Stupidly assumed that purifycss supported jade files as src files*/
.pipe($.purifycss(['app/**/*.js', 'app/*.jade']))
.pipe($.sourcemaps.write())
.pipe(gulp.dest('.tmp/styles'))
.pipe(reload({stream: true}));
});
Which meant that the necessary styles were being deleted (including .menu-icon). I think I will use stylperjade or rearrange the tasks so that I can do this: .pipe($.purifycss(['app/**/*.js', '.tmp/*.jade']))\
Let me know if this was your solution as well
I'm using Foundation's Joyride plugin and I can't find the way to position the nub of the tooltip on the left side of it. Hope someone has solved it before.
The nub's position can be set in the data-options attribute in the markup or passed in during initialization.
data-options attribute example:
<ol class="joyride-list" data-joyride>
<li data-id="firstStop" data-text="Next" data-options="nub_position: left;">
<p>nub_position: left;</p>
</li>
</ol>
during initialization example:
// Set the default nub_position
$(document).foundation({
joyride : {nub_position: 'left'}
});
// Start Joyride
$(document).foundation('joyride', 'start');
You can find out more about configuring Joyride at:
http://foundation.zurb.com/docs/components/joyride.html
There is a section called Optional JavaScript Configuration at the bottom of the page that will give you an overview of what can be configured.
Note that the documentation makes it look like it can be refereed to as nubPosition, but you actually have to use nub_position. You can check the variable names in the Joyride JavaScript file.
http://foundation.zurb.com/docs/javascript.html
A general overview of how to use and configure the JavaScript used by Foundation such as how to set defaults during initialization.
http://zurb.com/playground/jquery-joyride-feature-tour-plugin
A great place to get started and to download a template that really shows off what joyride can do.
http://cdpn.io/eKgIE
A CodePen I through together to test the nub positioning.
If you have any questions let me know.
Pretty simple, I need to insert a script in Sitecores (v. 6.4) backend - how do I do it?
It doesn't matter if the script is placed inside <head> or <body>, nor does it matter if I can only specify the src of a <script> tag or if I can insert an actual Javascript snippet (the latter is preferable though).
The script needs to be inserted in the HTML when a Content Editor window is opened.
It is not an installation of my own, nor do I develop anything for Sitecore (I do have admin access, however), so something along the lines of installing a plugin would be the best solution I reckon.
I've previously inserted the script in Sitecore 5.4, but not in a pretty way (editing XML files) and if a better solution could be found here too, that'd be pretty great.
Update using Jens Mikkelsens answer in Sitecore Xpress 6:
I tried placing the following in web.config:
<clientscripts>
<everypage>
<script src="/test.js" language="javascript" />
</everypage>
<htmleditor>
<script src="/test.js" language="javascript" />
</htmleditor>
</clientscripts>
Being a little bit overzealous (and wanting to make sure the test.js file can be found) I put a js.test in the following locations:
inetpub\wwwroot\SitecoreWebsite\WebSite\sitecore\shell\Applications\Content Manager\
inetpub\wwwroot\SitecoreWebsite\WebSite\sitecore\shell\Applications\
inetpub\wwwroot\SitecoreWebsite\WebSite\sitecore\shell\
inetpub\wwwroot\SitecoreWebsite\WebSite\sitecore\
inetpub\wwwroot\SitecoreWebsite\WebSite\
Content of the test.js:
alert("Test [PATH TOKEN]");
Where the path token is just the parent folder name, so I know which test.js was loaded, e.g. inetpub\wwwroot\SitecoreWebsite\WebSite\sitecore\shell\Applications\Content Manager\test.js holds:
alert("Test Content Manager");
When I try to log in using the default Xpress admin user one of three things happens (in all three cases the frontend loads without errors, but no script present. I have NOT been able to determine when the errors happen, the only thing I can say for sure is that no errors occur when the test.js has not been included in web.config):
Case 1:
The content editor loads as expected, but no script is loaded. This happens most of the time when the clientscript have been included.
Case 2 - Server Error:
Server Error in '/' Application.
Exception Details: System.ArgumentException: Empty strings are not allowed.
Parameter name: value
Stack Trace:
[ArgumentException: Empty strings are not allowed.
Parameter name: value]
Sitecore.Diagnostics.Assert.ArgumentNotNullOrEmpty(String argument, String argumentName) +241
Sitecore.Web.UI.HtmlControls.PageScriptManager.GetEveryPageScripts() +410
Sitecore.Web.UI.HtmlControls.PageScriptManager.GetScripts() +702
Sitecore.Web.UI.HtmlControls.Page.OnInit(EventArgs e) +62
System.Web.UI.Control.InitRecursive(Control namingContainer) +143
System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +1477
Case 3 - Sitecore error:
A required license is missing
Most likely causes:
The resource you are trying to access requires the following license: Runtime.
I'm not sure whether or not Xpress simply doesn't support clientscripts, but even if it doesn't it is weird that some times the content editor loads.
Update after testing in Sitecore 5.4 full version:
It does indeed work to put a script tag inside the <clientscripts> section in web.config as Jens Mikkelsen answered. It is, however, neccessary to put it inside the subsection <everypage> to get it to appear on every single page in the backend, whereas <htmleditor> only works for the Telerik RadEditor popup window in Sitecore 5.4.
Update after testing in Sitecore 6 full version:
The same method as described for Sitecore 5.4 works for Sitecore 6 with the addition of little thing: <script> embedded in <clienscripts> now require a key attribute:
<clientscripts>
<everypage>
<script src="/test.js" language="javascript" key="test script" />
</everypage>
</clientscripts>
I don't think you will be able to add the script with out modifying a file. However you can take a look at the <clientscripts> section in the web.config. There you can add scripts to be loaded. However I don't know if it will only load in the content editor.
I have experimented with this before, and I ended up using the above setting, but as I remember it also loaded on the Page Editor and the Desktop.
Perhaps you can use this example code to add controls to the <head> on the front-end but instead alter it to use the <renderContentEditor> pipeline to somehow inject a new <script> tag into the editor.
here is a good example of it Injecting javascript and css to Sitecore Content Editor Page
I have a JS script which is called when a submit button action is fired successfully:
<h:panelGroup rendered="#{user$webreports$webfilteroverview.submitted}">
<f:verbatim>
<script type="text/javascript">alert('Done!');</script>
</f:verbatim>
</h:panelGroup>
the above code works perfect. What I want to do is to get the alert box text from resource bundle:
<script type="text/javascript">alert('#{msg.report_alert_text}');</script>
but I get error:
PWC6228: #{...} not allowed in a template text body.
I did this:
<h:commandbutton onClick="alert('#{msg.report_alert_text}');"/>
and it was working fine. I don't understand why the above code doesn't work. Is it possible to do this? If yes, what is wrong with the above code? Thanks in advance.
PWC6228: #{...} not allowed in a template text body.
You're apparently using the legacy JSP(X) instead of its successor Facelets. Deferred EL #{} in template text is not supported by JSP(X). It only supports standard EL ${} in template text (template text means outside tags / JSF components):
<script type="text/javascript">alert('${msg.report_alert_text}');</script>
If that doesn't work because ${msg} is not been prepared (the #{} will namely autocreate it if it does not exist yet at that point of the view), then you need <h:outputText> instead:
<script type="text/javascript">alert('<h:outputText value="#{msg.report_alert_text}" />');</script>
You'll only need to remove that <f:verbatim> tag in order to get JSF components to run there. The <f:verbatim> is a leftover from JSF 1.0/1.1 and not necessary anymore since JSF 1.2 and deprecated since JSF 2.1.
This problem has nothing to do with JavaScript. You got the error from the webserver, not from the webbrowser.
With default template, trac ticket is available for viewing only, I must click modify to expand properties tab to modify, change state of a ticket.
Now I want to expand that tab automatically? How can I change it quickly without changing the template itself?
Is it possible to change it with trac.ini file?
I cannot find where's location of default template to change, so I cannot change myself.
Thanks!
I think the best way to enable the behavior you're looking for is to add a custom JS file (which can be injected much like a custom CSS, read TracInterfaceCustomization).
In that file do this:
$(document).ready(function() {
window.setTimeout(function() {
$("#modify").parent().removeClass('collapsed')
}, 0);
});
This code is untested but it should give you the idea. Basically we need to wait until the DOM is ready ($(document).ready) but as there are multiple JS functions called during that event, the setTimeOut sets a slight delay to make sure that the collapse command went through before.
HTH from a professional Trac developer :-)
I'm using trac 0.12 and had the same issue.
...without changing the template itself
I couldn't find a option to configure it but I did notice if you click the "modify" quick link at the top right of the ticket then the "Modify Ticket" foldable area is automatically uncollapsed for you.
I know you didn't ask for it, but just in case, you want a horrible template hack...
Open the template file in editor, e.g. for me in CentOS 5.5:
sudo emacs /usr/lib/python2.4/site-packages/Trac-0.12-py2.4.egg/trac/ticket/templates/ticket.html
Comment out the jQuery line that triggers the modify section to collapse on page ready:
//$("#modify").parent().toggleClass("collapsed");
I found the edit didn't take effect straight away - perhaps the template is cached or something? It worked after a few minutes of shift-refreshing and restarting apache.
Lets hope someone else answers with a better solution...
This is basically Schwarz's answer but in a simpler form
To get ticket contols expanded on load do following. Put following code
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:py="http://genshi.edgewall.org/"
py:strip="">
<!--! Add site-specific style sheet -->
<head py:match="head" py:attrs="select('#*')">
${select('*|comment()|text()')}
<script type="text/JavaScript">
<!--
// EXPAND TICKET CONROLS ON LOAD.
jQuery(document).ready(function() {
window.setTimeout(function() {
$("#modify").parent().removeClass('collapsed')
}, 1);
});
//-->
</script>
</head>
<body py:match="body" py:attrs="select('#*')">
${select('*|text()')}
</body>
</html>
in /path/to/your/trac/project/templates directory in file site.html.