My Joyride works great. It starts after page load. It stops when one clicks the stop button or finishes the tour. My restart link restarts the joyride tour. Only...
Adding the Joyride setting, cookie_monster: true prevents the tour restarting on every visit. Good! Unfortunately, it also prevents the restart link from working. The behavior makes sense. The start function does not know whether it is called on page load or from the link. The link has to use some other method, or set something to bypass the cookie check.
Do you know the magic to enable a user to start the Joyride after it has been hidden by the cookie_monster show-only-first-time device?
Body markup:
<a href='#', data-joyride-restart>tips</a>
<p id='first-stop'>First stop content</p>
<p id='second-stop'>Second stop content</p>
<ol class='joyride-list' data-joyride data-joyride-name='my_name',
data-joyride-autostart='true'>
<li data-id='first-stop', data-text='Next'>
<p>First stop tip</p>
</li>
<li data-id='second-stop', data-text='Next'>
<p>Second stop tip</p>
</li>
<li data-text='End'>
<p>Last stop modal tip</p>
</li>
</ol>
Javascript:
;$(function() {
var tour_root = $('ol[data-joyride]')
if (tour_root !== undefined){
var attr = tour_root.attr('data-joyride-name');
var cookie_name;
if (attr !== undefined){
cookie_name = attr;
} else {
cookie_name = 'joyride';
}
$(document).foundation({
joyride : {
'cookie_monster': true,
'cookie_domain': 'domain.com',
'cookie_name': cookie_name
}
});
attr = tour_root.attr('data-joyride-autostart');
if (attr !== undefined && attr.match(/true/i)) {
$(document).foundation().foundation('joyride', 'start');
}
}
$('a[data-joyride-restart]').on('click', function (e){
e.preventDefault();
$(document).foundation().foundation('joyride', 'start');
});
});
Writing the question helped me work out the trick. (I'll leave it posted because I didn't find any good examples for this behavior.)
$('a[data-joyride-restart]').on('click', function (e){
e.preventDefault();
$(document).foundation({
joyride : {
'cookie_monster': false
}
}).foundation().foundation('joyride', 'start');
});
The code resets the cookie-monster setting before asking Joyride to start.
If there is a better way, please share the love!
Related
Is there a way for JavaScript to interact with the DOM on a WordPress page. Or is interaction only possible through jQuery?
Button element in header.php:
<div id="settings" class="special-menu__item btn-settings">
<button class="special-menu__title">
<i style="margin-right: 10px" class="fa fa-cog" aria-hidden="true"></i>
Настройки
</button>
</div>
JavaScript Code:
const settingButton = document.getElementById("settings");
let toggle = false;
settingButton.addEventListener("click", function _f() {
if (toggle === false) {
settingButton.classList.add("active");
settingOpen.classList.add("open");
} else {
settingButton.classList.remove("active");
settingOpen.classList.remove("open");
}
toggle = !toggle;
removeEventListener("click", _f);
});
I was having this issue too.
In the console, I could grab any element I wanted with getElementById or querySelector. But when I would select it in my custom JS code, it would be null.
To get around this, you can just add your code in a load event listener. This way, after the page loads, you can run your code and change the DOM element how you want.
It might not be the most functional thing to watch, but it works.
example:
window.addEventListener('load', () => {
const element = document.querySelector('#elementId');
console.log('element I selected:', element)
})
I'm building a simple VueJS Web app with firebase and firebase authentication (email-password). Authentication part works great, however, I don't want to have Log Out button in my Nav bar on the Log in screen(or sign up screen for that matter).
I've set up a function in loginScreen.vue that checks whether user is logged in (if no user is logged in it is null) so it is:
created () {
var user = firebase.auth().currentUser;
if (user != null) {
console.log('no null')
// reference to #routerbtn .show
} else {
console.log('yes null')
// reference to #routerbtn .hide
}
}
This console.log output is just to check whether it works. But I can't find the way to reference the <li> from navHeader in order to hide it on the page. Navigation is in navHeader.vue through <router-link> only logout is just <li> This is navHeader.vue
<template>
<nav>
<ul>
<li><router-link to="/home" exact>To Do</router-link></li>
<li><router-link to="/done" exact>Done</router-link></li>
<li><router-link to="/inprogress" exact>In Progress</router-link>
</li>
<li id="#routerbtn" v-on:click="logout">Log Out</li>
</ul>
</nav>
</template>
<script>
import firebase from 'firebase'
export default {
methods: {
logout: function () {
firebase.auth().signOut().then(() => {
this.$router.replace('login')
})
}
}
}
Thanks for any suggestions, cheers!
In your created method change to:
created () {
this.user = firebase.auth().currentUser || false;
}
Also make sure user is in your data method.
Then check user in your view.
<ul>
...
<li v-if="user">Log Out</li>
<li v-else>Register</li>
...
</ul>
As you go on, you want to abstract out the menu into a component so you're not repeating this same code throughout each page.
Folks I am having an issue with rename and JsTree. I have created a JS Fiddle to highlight the issue. http://jsfiddle.net/KJYrs/. My scenario is that I'd like to validate that the entered name is not a default name or contains special characters. When I try to fire the rename event after the initial failed attempt the inline editor appears above the root node.
<script type="text/javascript" class="source">
$(function () {
$("#demo1").jstree({
"plugins": ["themes", "html_data", "ui", "crrm", "contextmenu"]
}).bind("rename.jstree", function (event, data) {
//let's assume I do some vaidation here and it fails
//so I want to rename until valid
if (event.type === 'rename') {
$("#demo1").jstree("deselect_all");
$("#demo1").jstree("select_node", "#" + data.rslt.obj[0].id);
$("#demo1").jstree("rename");
}
});
});
</script>
<div id="demo1" class="demo">
<ul>
<li id="phtml_1"> Root node 1
<ul>
<li id="phtml_2"> Child node 1
</li>
<li id="phtml_3"> Child node 2
</li>
</ul>
</li>
<li id="phtml_4"> Root node 2
</li>
</ul>
</div>
Any help or suggestions would be greatly appreciated.
The issue appears because you call the rename, inside the rename - is not crash, but creates other problems. A simple solution is to call after the rename ends, using the setTimeout as:
$(function () {
$("#demo1").jstree({
"plugins": ["themes", "html_data", "ui", "crrm", "contextmenu"]
}).bind("rename.jstree", function (event, data) {
//let's assume I do some vaidation here and it fails
//so I want to rename until valid
if (event.type === 'rename')
{
setTimeout(function(){
$("#demo1").jstree("deselect_all");
$("#demo1").jstree("select_node", "#" + data.rslt.obj[0].id);
$("#demo1").jstree("rename");
},100);
}
});
});
And the results:
http://jsfiddle.net/KJYrs/1/
Now you have other problems that you need to solve, a cancel of the rename, and to disable the menu until this ends.
Currently I have a Wordpress website that uses Isotope to display all posts in a grid and there is a fixed navigation that is used for filtering the post categories.
I am trying to add some Javascript or Jquery to scroll to the top of the page when a navigation item is clicked - so it filters the category and also scrolls to the top of the page.
I have been trying different examples for a while and cannot figure it out.
I was hoping someone might be able to point me in the right direction.
Currently my navigation looks like this:
<div class="menuContainer right">
<ul id="options" class="option-set">
<li>Editorial</li>
<li> </li>
<li>Covers</li>
<li> </li>
<li>Advertising</li>
<li> </li>
<li>Film</li>
</ul>
</div>`
and the current js.
<script type="text/javascript">
jQuery(document).ready(function(){
var mycontainer = jQuery('#isocontent');
mycontainer.isotope({
itemSelector: '.postContainer',
});
// filter items when filter link is clicked
jQuery('#options a').click(function(){
var selector = jQuery(this).attr('data-filter');
mycontainer.isotope({ filter: selector });
return false;
});
// set selected menu items
var $optionSets = $('.option-set'),
$optionLinks = $optionSets.find('a');
$optionLinks.click(function(){
var $this = $(this);
// don't proceed if already selected
if ( $this.hasClass('selected') ) {
return false;
}
var $optionSet = $this.parents('.option-set');
$optionSet.find('.selected').removeClass('selected');
$this.addClass('selected');
});
});
</script>
All help would be greatly appreciated.
Thank you!
Ok, seeing is believing :) easier to understand what you want. Basically, all you have to do is to hook up what I commented before on your Editorial, Covers, Advertising, Film links. Since you use Isotope with filtering, you have assigned click functions to your links already...
// stuff
<ul id="filters">
<li>Show all, home, whatever</li>
<li>Editorial</li>
<li>Covers</li>
<li>Advertising</li>
<li>Film</li>
</ul>
// more stuff
$('#filters a').click(function() {
var selector = $(this).attr('data-filter');
$container.isotope({
filter: selector
});
$('body,html').animate({ // always scrolls to the top when filter link is clicked
scrollTop: 0
}, 800);
return false;
});
// even more stuff
what is the css of current link like when somebody goes to ABOUT US page then about us color changed to red.... then going to CONTACT US page then about us color change to default and CONTACT US color change to red....
please help i am new designer......
use :hover in css
replace li in example with whatever element you use in your actual code
eg.
li:hover{backgroundcolor:Red;}
li tag in case you design menu like
<ul>
<li> Menu1</li>
<li> Menu2</li>
</ul>
Whwn you click on specific menu, that perticular page will be open.
then just do simple thing,
write class for active.
apply this, for home page
for About Us page active class attribute to About Us li
<ul>
<li class="active">Home</li>
<li>Projects</li>
<li>About Us</li>
</ul>
You can't use JUST CSS to determine which page your user currently is - it just won't do it. You have to adjust your markup to add a hook of some kind that your CSS can use. Like so -
<ul id="nav">
<li>About Us</li>
<li>Contact</li>
</ul>
If you're building a static HTML site, you can manually change the HTML on each page to reflect the current page in the menu.
If you're building something more complex, you will probably need to rely on PHP or JavaScript to figure out the current page. This script is a little old (it's from Jeremy Keith's "DOM Scripting"), but it will do the job:
function highlightPage(id){
//make sure DOM methods are understood
if(!document.getElementsByTagName) return false;
if(!document.getElementById) return false;
if(!document.getElementById(id)) return false;
var nav = document.getElementById(id);
var links = nav.getElementsByTagName('a');
for (var i=0; i < links.length; i++){
var linkurl = links[i].getAttribute('href');
var currenturl = window.location.href;
//indexOf will return -1 on non-matches, so we're checking for a positive match
if (currenturl.indexOf(linkurl) != -1) {
links[i].className = "here";
var linktext = links[i].lastChild.nodeValue.toLowerCase();
document.body.setAttribute("id",linktext);
}
}
}
addLoadEvent(function(){
highlightPage('nav');
});
function addLoadEvent(func){
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function(){
oldonload();
func();
}
}
}
This script would go in an externally linked javascript file.
Give the body an id name <body id="about-us">. Your link needs an id, too <a href="#" id='this-link">. Then:
#about-us #this-link {
color:red;
}
#contact-us #this-link {
}