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.
Related
I'm new to npm.
I downloaded ember-cli to design an application but also I want to install pugjs to render the html.
so .. I don't have to write a lot of unnecessary html code .
so is there any way to to integrate pugjs (jade-lang) with Ember-CLI.
Thanks in Advance.
You need to add Broccoli Jade compiler and loaded here for more information check the following resources:
1- https://github.com/sindresorhus/broccoli-jade
2- https://www.npmjs.com/package/generator-ember-jade-zurb-express //Yoeman generator which may help you to scaffold your project.
However, I strongly recommend you to use emblemjs. An overview of the project is :
p Introducing Emblem.js: a new templating language
that compiles to Handlebars.js
ul
li Indentation-based (like Slim, Jade, HAML, etc.)
li Compiles to Handlebars
; full compatibility with
both custom and built-in Handlebars helpers
li Ember.js-friendly syntax and full compatibility
with auto-updating functionality.
/ Emblem is HTML5-aware; Render HTML if a line starts with
known HTML tag, else invoke HB helper or perform property lookup.
These defaults are easily overridable when necessary.
ul
each person in people
li = person.name
section.ember-features
/ easy, natural Ember bindAttr support
h1 class=foo The class name of this element is bound to `foo`
p class=isActive:flashing:inactive Ember.js bound css classes
/ implicit Ember action handlers
a click="doIt" href="#" Hello, how are you doing, #{name}?
/ condense nested content into a single line if that's how you roll
#footer: ul.menu-items: each menu_items: li: a.menu-link href=url: link_text
if something
p something was true!
else
p something was false!
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.
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
In my html page, I see a link whose 'view source' code is as below :
<a href="#" class="view">
I see a valid link when I hover my mouse on it and when I click it, it works. But I am not able to find where and how this URL gets generated. I found the class a.view being defined in one of the CSS, but couldn't find the URL in the page source.. Can somebody help me out on whr i can find this URL ?
I felt like replying as well, explaining the same thing as the others a bit differently. I am sure you know most of this, but it might help someone else.
<a href="#" class="view">
The
href="#"
part is a commonly used way to make sure the link doesn't lead anywhere on it's own. the #-attribute is used to create a link to some other section in the same document. For example clicking a link of this kind:
Go to news
will take you to wherever you have the
<a name="news"></a>
code. So if you specify # without any name like in your case, the link leads nowhere.
The
class="view"
part gives it an identifier that CSS or javascript can use. Inside the CSS-files (if you have any) you will find specific styling procedures on all the elements tagged with the "view"-class.
To find out where the URL is specified I would look in the javascript code. It is either written directly in the same document or included from another file.
Search your source code for something like:
<script type="text/javascript"> bla bla bla </script>
or
<script> bla bla bla </script>
and then search for any reference to your "view"-class. An included javascript file can look something like this:
<script type="text/javascript" src="include/javascript.js"></script>
In that case, open javascript.js under the "include" folder and search in that file. Most commonly the includes are placed between <head> and </head> or close to the </body>-tag.
A faster way to find the link is to search for the actual link it goes to. For example, if you are directed to http://www.google.com/search?q=html when you click it, search for "google.com" or something in all the files you have in your web project, just remember the included files.
In many text editors you can open all the files at once, and then search in them all for something.
The href is probably generated in a javascript function. For example with jQuery:
$(function() {
$('a.view').attr('href', 'http://www.google.com');
});
Javascript may be hooking up to the click-event of the anchor, rather than injecting any href.
For example, jQuery:
$('a.view').click(function() { Alert('anchor without a href was clicked');});
Of course, the javascript can do anything it wants with the click event--such as navigate to some other page (in which case the href is never set, but the anchor still behaves as though it were)
Don't forget to look at the Javascript as well. My guess is that there is custom Javascript code getting executed when you click on the link and it's that Javascript that is generating the URL and navigating to it.
It probably works with Javascript. When you click the link, nothing happens because it points to the current site. The javascript will then load a window or an url. It's used a lot in AJAX web apps.
I'm trying to monitor a small section of a web page for changes using the the Google Page Monitor extension --
https://chrome.google.com/extensions/detail/pemhgklkefakciniebenbfclihhmmfcd
Under advanced settings I can use either Regex or Selectors to accomplish this, but need help with this. In the following html, I'd like to monitor the following for changes in either the URL in line 4 or the text in line 5. Any pointers gratefully accepted.
<div id="rtBtmBox"><div id="sectHead" style="margin-bottom:5px;">
<h3>SLJ's Pick of the Day</h3></div>
<p align="center">From the March issue</p>
<p align="center"><a target="_blank" href="http://www.schoollibraryjournal.com/article/CA6723937.html">
<font color="#0000ff"><strong><em>The Summer I Turned Pretty</em></strong><br/>
Awesome, to find a question about my own extension on the front page of StackOverflow.
Anyway, it's easier using a selector. This should do the job: #rtBtmBox p:nth-child(3). However, if that paragraph has more contents, you might need something different (post or link the whole page if so).
A regex that will probably work is: <div id="rtBtmBox">[^]*?<a target="_blank" href="([^"]+)"