Here, when i click Go Back button it perfectly goes to back page
<script>
function goBack() {
window.history.back();
}
</script>
<div class="back">
<button onclick="goBack()" class="btn btn-voilet" > << Go Back</button>
</div>
Now if i click back to curriculum button, it doesnt go back to home page can someone help me do it,
<script>
function back_to_curriculum() {
window.history.home();
}
</script>
<div class="home">
<button onclick="back_to_curriculum()" class="btn btn-voilet" > << Back to Curriculum</button>
</div>
You can take advantage of Wordpress' home_url() function to get the Home URL of the site, then use Javascript to navigate there:
<script>
function back_to_curriculum() {
window.location.href = '<?php echo home_url(); ?>';
}
</script>
Related
I have a client that wants the function of being able to enter a key word into a search bar and have it start to highlight the results on the page as you are typing (or after you hit search).
This is just like using the ⌘+F function on a Mac (or Ctrl+F on PC) and the browser itself pops up a search box.
He doesn't want to have to hit ⌘+F though, or have his customers to have to know that command. He wants to just have a search bar already on that page that he can type into and it start highlighting words.
ANY idea how to do this in WordPress? I've searched the internet and cannot find a tutorial on how to do it.
If not a search box, maybe a button they can click that prompts to pull up command F on a mac or Ctrl+F on a pc?
I am at a loss here and cannot figure this out. Any tips or experience with this, I would be very grateful.
So I found this on another thread and it seems to work but it only finds the first occurrence. I need it to highlight all the occurrences. Any idea how to get it to do that?
<p> hello world, hello world, hello world, hello world</p>
<!--BEGIN SEARCH BOX -->
<div class="search_box">
<form action="" id="form2">
<div>
<input type="text" id="search">
<input type="button" id="submit_form" onclick="checkInput()" value="Submit">
</div>
</form>
</div>
<!--END SEARCH BOX -->
<script>
function checkInput() {
var query = document.getElementById('search').value;
window.find(query);
return true;
}
</script>
https://codepen.io/b-jody-spedicato/pen/ExNzqQP
<html>
<head>
<script language="JavaScript">
<!--
var TRange=null;
function findString (str) {
if (parseInt(navigator.appVersion)<4) return;
var strFound;
if (window.find) {
// CODE FOR BROWSERS THAT SUPPORT window.find
strFound=self.find(str);
if (strFound && self.getSelection && !self.getSelection().anchorNode) {
strFound=self.find(str)
}
if (!strFound) {
strFound=self.find(str,0,1)
while (self.find(str,0,1)) continue
}
}
else if (navigator.appName.indexOf("Microsoft")!=-1) {
// EXPLORER-SPECIFIC CODE
if (TRange!=null) {
TRange.collapse(false)
strFound=TRange.findText(str)
if (strFound) TRange.select()
}
if (TRange==null || strFound==0) {
TRange=self.document.body.createTextRange()
strFound=TRange.findText(str)
if (strFound) TRange.select()
}
}
else if (navigator.appName=="Opera") {
alert ("Opera browsers not supported, sorry...")
return;
}
if (!strFound) alert ("String '"+str+"' not found!")
return;
}
//-->
</script>
</head>
<body>
<form name="f1" action=""
onSubmit="if(this.t1.value!=null && this.t1.value!='') findString(this.t1.value);return false">
<input type="text" name=t1 value="" size=20>
<input type="submit" name=b1 value="find">
<p>This is some sample text, do a search above to see how the search bar functions.
You can now add your own CSS styling.
</p>
</form>
</body>
</html>
Im creating a an instant messenger app and im having a little trouble routing it. So, once you go into the app. There is a list of available users. You can click on a user and start chatting. The issue I have is once I click send, the console show an Uncaught TypeError: Cannot read property 'value' of undefined. Im not sure what im doing wrong here. Also I need help show the chat messages sent above. As if you can see the recent and previous messages. Here are my codes. Any examples and helps would be great.
HTML
minstant
<body>
</body>
<!-- this is the main template used by iron:router to build the page -->
<template name="ApplicationLayout">
{{> yield "header"}}
<div class="container">
{{> yield "main"}}
</div>
</template>
<!-- top level template for the nav bar -->
<template name="navbar">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="/">
Minstant!
</a>
</div>
<div class="nav navbar-nav">
{{> loginButtons}}
</div>
</div>
</nav>
</template>
<!-- Top level template for the lobby page -->
<template name="lobby_page">
{{> available_user_list}}
</template>
<!-- display a list of users -->
<template name="available_user_list">
<h2>Choose someone to chat with:</h2>
<div class="row">
{{#each users}}
{{> available_user}}
{{/each}}
</div>
</template>
<!-- display an individual user -->
<template name="available_user">
<div class="col-md-2">
<div class="user_avatar">
{{#if isMyUser _id}}
<div class="user_avatar">{{getUsername _id}} (YOU)
<br/>
<img src="/{{profile.avatar}}" class="avatar_img">
</div>
{{else}}
<a href="/chat/{{_id}}">
{{getUsername _id}}
<br/>
<img src="/{{profile.avatar}}" class="avatar_img">
</a>
{{/if}}
</div>
</div>
</template>
<!-- Top level template for the chat page -->
<template name="chat_page">
<h2>Type in the box below to send a message!</h2>
<div class="row">
<div class="col-md-12">
<div class="well well-lg">
{{#each recentMessages}}
{{> message}}
{{/each}}
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<form class="new-message">
<input class="input" type="text" name="chat" placeholder="type a message here...">
<button class="btn btn-default">Send</button>
</form>
</div>
</div>
</template>
<!-- simple template that displays a message -->
<template name="message">
<div class = "container">
<div class = "row">
<div class = "username">{{username}}
<img src="/{{profile.avatar}}" class="avatar_img">
</div>
<div class = "message-text"> said: {{messageText}}</div>
</div>
</div>
</template>
Here is my JS
Messages = new Mongo.Collection("messages");
if (Meteor.isClient) {
Meteor.subscribe("messages");
Meteor.subscribe("userStatus");
// set up the main template the the router will use to build pages
Router.configure({
layoutTemplate: 'ApplicationLayout'
});
// specify the top level route, the page users see when they arrive at the site
Router.route('/', function () {
console.log("rendering root /");
this.render("navbar", {to:"header"});
this.render("lobby_page", {to:"main"});
});
// specify a route that allows the current user to chat to another users
Router.route('/chat/:_id', function () {
this.render("navbar", {to:"header"});
this.render("chat_page", {to:"main"});
});
///
// helper functions
///
Template.available_user_list.helpers({
users:function(){
return Meteor.users.find();
}
})
Template.available_user.helpers({
getUsername:function(userId){
user = Meteor.users.findOne({_id:userId});
return user.profile.username;
},
isMyUser:function(userId){
if (userId == Meteor.userId()){
return true;
}
else {
return false;
}
}
})
Template.chat_page.helpers({
recentMessages: function () {
return Messages.find({}, {sort: {createdAt: 1}});
return Meteor.users.find();
},
});
Template.chat_page.events({
// this event fires when the user sends a message on the chat page
'submit .new-message':function(event){
event.preventDefault();
var text= event.target.text.value;
// stop the form from triggering a page reload
event.target.text.value = "";
// see if we can find a chat object in the database
// to which we'll add the message
Meteor.call("SendMessage", text);
},
});
};
Meteor.methods({
sendMessage: function (messageText) {
if (! Meteor.userId()) {
throw new Meteor.Error("not-authorized");
}
Messages.insert({
messageText: messageText,
createdAt: new Date(),
username: Meteor.user().username
});
}
});
// start up script that creates some users for testing
// users have the username 'user1#test.com' .. 'user8#test.com'
// and the password test123
if (Meteor.isServer) {
Meteor.startup(function () {
if (!Meteor.users.findOne()){
for (var i=1;i<9;i++){
var email = "user"+i+"#test.com";
var username = "user"+i;
var avatar = "ava"+i+".png"
console.log("creating a user with password 'test123' and username/ email: "+email);
Meteor.users.insert({profile:{username:username, avatar:avatar}, emails: [{address:email}],services:{ password:{"bcrypt" : "$2a$10$I3erQ084OiyILTv8ybtQ4ON6wusgPbMZ6.P33zzSDei.BbDL.Q4EO"}}});
}
}
},
),
Meteor.publish("messages", function () {
return Messages.find();
});
Meteor.publish("userStatus", function() {
return Meteor.users.find({ "status.online": true });
});
};
The error is with your form submit code. In the console you can see the error is in Template.chat_page.events.submit .new-message on line 73. That will take you right to the error code:
'submit .new-message':function(event){
event.preventDefault();
var text = event.target.text.value;
// stop the form from triggering a page reload
event.target.text.value = "";
}
event.target.text.value doesn't exist. event.target does, but there is no field for text. There is textContent, and you can access the children of the target (which in this case is the form). Put in a console.log(event); and figure out what you are trying to access within the javascript console and then use that to determine what your code should look like. This might work for you:
'submit .new-message':function(event){
event.preventDefault();
var text = event.target.elements.chat.value;
// stop the form from triggering a page reload
event.target.text.value = "";
}
event.target.elements.chat.value comes from the name field of the <input>.
Hello i am developing my own functionality plugin on wordpress and i am stuck on trying to pass a variable from a page to a modal that opens after a link is clicked displaying a delete confirm dialog
The link opening the modal is
<a href="<?php echo $passing_var?>" data-reveal-id="deleteModal" class="deleteLink">
<i class="fi-trash size-24 icolored"></i>
</a>
The Modal window code
<div id="deleteModal" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
<h2>Are you sure you want to DELETE? <?php echo get_the_title( $passing_var ); ?> </h2>
<p class="lead">This cannot be undone</p>
<a class="deleteButton button" href="#">delete</a>
<a class="close-reveal-modal">×</a>
</div>
How can pass $passing_var from the main page to the modal window?
Set Data Attibute
<a data-id="<?php echo $passing_var?>" class="deleteLink">
<i class="fi-trash size-24 icolored"></i>
</a>
Read data attribute to use in modal
$(document).on("click", ".deleteLink", function () {
var dataId = $(this).data('id');
$('#deleteModal').modal('show');
});
Finally got it working after a lot of trial and error and google research... nothing unexpected here... :(
So if anybody in the future needs to pass a variable from a page to a modal must follow three steps...
1.Create the modal button
<button data-reveal-id="myModal" data-my-number="1">First One</button>
2.Add the Modal Dialog
<div id="myModal" class="reveal-modal"><h2>Awesome. I have it.</h2><p class="lead">The <span class="buttonText"></span>. It is mine.</p><a class="close-reveal-modal">×</a></div>
3.Add the Javascript
$(document).foundation();$('[data-reveal-id]').on('click', function() {var targetModal = $('#' + $(this).data('revealId'));var newText = $(this).text() +' (' + $(this).data('myNumber') + ')';targetModal.find('.buttonText').text(newText);});
Please visit this link if you want to see a working example... thank you all
I'm really struggling with this one. If you want to view what I have bludgeoned together, it is all in a repo on GitHub called instructor-oracle. What I would like to do is have the landing page be the layout at ./wbs. Then I would like the search to route to ./wbs/:_wbsCode and populate the sidebar with the appropriate record. I am thinking the router needs to be structured something like...
Router.configure({
layoutTemplate: 'layout'
});
Router.map(function () {
this.route('wbs', {
path: '/wbs'
}, function () {
this.render('wbs-detail', {
path: '/wbs/:_wbsAbbrev',
to: 'wbs-detail',
data: function () {
theOne = Wbs.findOne({abbrev: this.params._wbsAbbrev});
console.log(theOne.abbrev);
return theOne;
}
});
});
...and this would be paried with templates like...
<template name="layout">
<header class="container-fluid">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="{{pathFor 'wbs'}}">Instructor Oracle</a>
</div>
<div class="collapse navbar-collapse" id="bs-navbar-collapse">
<form class="navbar-form navbar-left" role="search" id="wbsSearchForm">
<div class="form-group">
<input
class="form-control typeahead"
name="wbsSearch"
id="wbsSearch"
type="text"
placeholder="Search"
autocomplete="on"
spellcheck="off"
autofocus="true"
/>
</div>
<button type="submit" class="btn btn-default">Find</button>
</form>
</div>
</nav>
</header>
<main class="container-fluid">
{{> yield}}
</main>
</template>
<template name="wbs">
<div class="col-sm-3" id="wbsCol">
{{> yield 'wbs-detail'}}
</div>
<div class="col-sm-9" id="timesheetCol">
<iframe src="http://iframeurl.html" id="timesheetFrame"></iframe>
</div>
{{#contentFor 'wbs-detail'}}
<h1>{{abbrev}} <small>{{code}}</small></h1>
{{/contentFor}}
</template>
...and an event handler for the form like this...
Template.layout.events({
// catch submit event for wbs form
'submit': function (event, template) {
// prevent default behavior and stop bubbling
event.preventDefault();
event.stopPropagation();
// store dom element in variable
var inputElement = template.find('input#wbsSearch');
// access value in form and extract abbreviation if found
var abbrev = Wbs.findOne({abbrev: (inputElement.value).toUpperCase()}).abbrev;
// clear input
inputElement.value = "";
// go to the page
Router.go('wbs-edit', {_wbsAbbrev: abbrev});
}
});
I have been trying to sort through this on the iron:router documentation, but right now I am all kinds of lost (obviously). Still, I need this to work to avoid reloads on the main layout template so the iframe does not reload while the sidebar can change along with the matching url so links to specific sidebar content can be bookmarked and shared.
Thank you in advance for your assistance. If I eventually sort all of this out, I am more than happy to contribute to the iron:router documentation so it makes sense for the next pea-brained idiot like myself who happens to need to sort this out.
I have implemented this to my wordpress theme, and I'm trying to figure out, how to implement the hashchange, when I click a link inside a folder. I've tried to use this tutorial to trigger the hashchange. The hashchange works, when i comment out the "Load permalink to .itemContent" , but then the item slides down and up instantly. When its not commented out, the hashchange doesn't trigger.
Also, if someone copys the http://www.pathtomydomain.com/#/item-name-1 to the address bar (or bookmarks it), how to open the folder according to the url? Something to to with .trigger(click)?
HTML
<div id="container">
<div class="item">
<a href="http://pathtomydomain.com/item-name-1">
<img src="an-image-1.jpg" />
</a>
</div>
<div class="item">
<a href="http://pathtomydomain.com/item-name-2">
<img src="an-image-2.jpg" />
</a>
</div>
<div class="item">
<a href="http://pathtomydomain.com/item-name-3">
<img src="an-image-3.jpg" />
</a>
</div>
</div>
<div class="itemContent"></div>
JQUERY
$.ajaxSetup({cache:false});
$('.item').click(function(){
if($('.itemContent').is(":visible")){
$('.itemContent').slideUp("fast", function(){
});
} else if ($('.itemContent').is(":hidden")) {
$('.itemContent').empty();
$('.itemContent').html('<img class="loading" src="ajax-loader.gif"/>');
$('.itemContent').slideDown("fast", function(){
var $dock = $('#navigation'),
dockHeight = $dock.height();
$("html, body").animate({
scrollTop: $('.itemContent').offset().top - ( $(window).height() - dockHeight - $(this).outerHeight(true) ) / 2
});
});
/*
Load permalink to .itemContent .
*/
var post_link = $(this).children("a").attr("href");
$(".itemContent").load(post_link);
return false;
}
});
var $mainContent = $(".itemContent"),
siteUrl = "http://" + top.location.host.toString(),
url = '';
$(document).delegate("a[href^='"+siteUrl+"']:not([href*=/wp-admin/]):not([href*=/wp-login.php]):not([href$=/feed/])", "click", function() {
location.hash = this.pathname;
return false;
});
$(window).bind('hashchange', function(){
url = window.location.hash.substring(1);
});
$(window).trigger('hashchange');