(first of all, a disclaimer: I'm a JavaScript / MooTools newbie, so it's very likely that the solution may be a trivial miss)
With some help, I was able to put a simple slider to run properly on jsFiddle, using MooTools. It is here -> http://jsfiddle.net/wowenkho/uGcTx/
Now, I want to reproduce it on my own PC. I learn from some threads here that I have to wrap jsFiddle code. In Aptana, I've got the code like this:
<html>
<head>
<script type="text/javascript" src="mootools_v1_2.js"></script>
<script type="text/javascript">
$(function()
{
window.addEvent('domready',function()
{
var s = new Slider(document.id("slider-1"), document.id("slider-input-1"),
{
onChange : function(step)
{
document.id("q1_r1").set('value',step);
document.id("value").set('html',step);
}
});
window.onresize = function () {
//s.recalculate();
};
});
});
</script>
</head>
<body>
<input name="q1_r1" id="q1_r1" type="hidden">
<span id="value">0</span>
<p ><div class="slider" id="slider-1" tabIndex="1">
<input class="slider-input" id="slider-input-1" />
</div>
</body>
</html>
I do know that the MooTools version I'm using isn't exactly the same (jsFiddle is using 1.2.5, I'm using 1.2.1). I could try to use 1.2.5 here (and I will, meanwhile), but that's not the purpose, since I have to use 1.2.1. I also do know MooTools is running well, at least theoretically, since I've made the "hello world" before and it worked.
How this is at the moment, I only see the span and a text box, instead of the slider.
I guess I'm missing something trivial here.
Thanks all possible help in advance,
Jaff
There are two problems with your implementation the first is simple take it out of the $function wrapper if you look in the console your domready function is not getting called.
window.addEvent('domready',function()
{
var s = new Slider(document.id("slider-1"), document.id("slider-input-1"),
{
onChange : function(step)
{
document.id("q1_r1").set('value',step);
document.id("value").set('html',step);
}
});
window.onresize = function () {
//s.recalculate();
};
});
The second is that you are actually using a plugin for mootools. If you look at your js fiddle it says using mootools more 1.2.5.1. It's inside the more part that you find the slider class. If you don't have that then slider is not defined. So make sure when you download the core mootools which is required for all plugins that you also check the more and slider boxes. On the mootools website when you go to 1.2.5 download for core go to the more builder and you can add those.
Related
I have no clue what to do to fix this.
I've installed a JQuery library (http://st3ph.github.io/jquery.easyPaginate/) to help me paginate my data. I am also using Vue.js to make things easier. However, after installing the plugin, and seeing that pagination does in fact work, I noticed that my click handlers stopped working! In fact, I have some filters that also call other Javascript function to execute the filter code... but they are all not working. After inspecting the HTML code using Chrome's Developer Tools (F12)... all I can see is that the plugin is adding an 'easyPaginate easyPaginateList' class to the tags.
So... the plugin makes the <ol> tag look like:
<ol id="cards" class="easyPaginate easyPaginateList">
Anyway,
My HTML looks like this:
<div id="BrowseCards">
<ol id="cards">
<li v-for="(card, i) in cards" v-on:click="cardDetails($event)">
<span :id="card.Id" style="display:none"></span>
<img src="card.ImageUrl"/>
<h2 name="title">{{card.Title}}</h2>
</li>
</ol>
</div>
The Javascript looks like:
<script>
methods: {
cardDetails: function (event) {
var cardId = $(event.target.parentElement)[0].firstChild.id;
window.location = 'https://' + location.host + '/Home/CardDetails/?cardId=' + cardId;
},
...
[*** other Javascript functions ***]
...
setupPagination: function () {
$('.easyPaginate').easyPaginate({
paginateElement: 'li',
elementsPerPage: 4,
effect: 'slide'
});
},
mounted: function()
{
this.setupPagination();
}
</script>
The Problem: This was working before but, now, all my scripts don't fire.
My Question for You:
1. What am I doing wrong/what am I missing?
2. And, how do I integrate a pagination plugin that does NOT break my code?
Thanks in advance.
I ended up solving this with the help of #Roj's, and others' comments, and going from their clues/leads. Basically, it's ill-advised to use a JQuery pagination plugin when you are coding with Vue.js. I was able to solve this issue by, instead, using a Vue.js plugin for pagination.
I implemented what these two articles detailed, and solved the issue.
https://medium.com/#nickpgott/how-to-use-vue-bootstrap-to-paginate-a-list-of-items-3b8e67093c07
https://bootstrap-vue.org/docs/components/pagination/
Pagination now works for me on my app. Thanks and happy holidays!
I am trying to create a FAQ page much like the one here: https://www.harrys.com/help
I want to create the effect where clicking a question will display an answer.
My code can be seen here: http://jsfiddle.net/8UVAf/1/
Can anybody tell me why my javascript is not working? I realized I combined jQuery and Javascript, but I read somewhere that it should compile fine.
HTML:
<div class="questions-answer-block">
<p class="question">This is a Question?</p>
<p id="answer" class="hideinit">Here is the Answer</p>
</div>
<div class="questions-answer-block">
<p class="question">This is a Question?</p>
<p id="answer" class="hideinit">Here is the Answerdadawdawdawdawdawdawdawdwadawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawd</p>
</div>
JS:
$(".question").click(function (argument) {
if(document.getElementById("answer").className.match(/(?:^|\s)hideinit(?!\S)/)) {
document.getElementByID("answer").className = "display";
}
});
Basically your Javascript could be shortened to:
$(".question").click(function(argument) {
$(this).parent().find(".answer").removeClass("hideinit").addClass("display");
});
In order to make this work the only other thing you need to do is to make question a class rather than as an id. That looks like:
<p class="answer hideinit">the answer</p>
See the fiddle here
Edit: Add Hide / Show
To get this to hide and show as expected you'll want to update the code to check the current class before hiding and showing. That looks like:
$(".question").click(function(argument) {
var el = $(this).parent().find(".answer");
if (el.hasClass("display")) {
el.removeClass("display").addClass("hideinit");
} else {
el.removeClass("hideinit").addClass("display");
}
});
See the fiddle here
Well, for one thing, in your JSFiddle you were not including the jQuery library. I've adjusted your code, I think this is what you were going for:
$(".question").click(function() {
$(this).siblings().toggle();
});
Here's an updated JSFiddle.
Please watch your includes in your JSFiddle as the version you linked was not including the jQuery library. You should also clean up your multiple id references (as this is invalid HTML and will cause some issues down the road).
Those issues aside, you can use jQuery's .next() method to help you with this particular problem:
$(".question").click(function (argument) {
$(this).next(".hideinit").removeClass("hideinit").addClass("display");
});
JSFiddle
$(".question").on('click',function() {
$(this).next().toggle();
});
I have a textbox, and I am trying to fire an event oninput (my example below only removes a comma from the input, however I do need it to do more advance things). My code works great on Firefox and Internet Explorer, however when I click into the textbox in Chrome, I have about .5 seconds to start typing, otherwise I loose focus. Testing the exact code below on my website creates the error. Any idea?
<input type="text" id="question" name="question" oninput="clean(this);" />
<script type="text/javascript">
function clean(q){
q.value=q.value.replace(",","");
}
</script>
Thanks for any help
Credit goes to ComFreek and RobH for pointing it out that it works just fine on JS fiddle. I feel quite dumb for not trying it first. Turns out that some of the other Javascript on the page was causing the trigger to break. Thanks for everyone's help!
You can try to set a timer to run the code in the function.
<input type="text" id="question" name="question" oninput="clean(this);" />
<script type="text/javascript">
function clean(q){
window.setTimeout(function(){
q.value=q.value.replace(",","");
}, 0);
}
</script>
Try to use <input onkeyup="clean(this)">, it will only fire the function after something is typed into the input.
http://www.w3schools.com/jsref/event_onkeyup.asp
If you are going to do some complex things I'd recommend you use jQuery, because will fix this crossbrowser errors.
and use something like:
$('#input-desired').bind('keyup', function() {
this.value = this.value.replace(',', '');
});
If you wanna go for a simple application you can try this.
<input type="input" id="desired" onkeyup="desiredInputChanges(this);" />
In your Javascript file use something like:
desiredInputChanges = function (input) {
input.value = input.value.replace(',', '');
}
Just a note, don't forget to make a function to be your class and protect your methods :)
This is sort of a condensed version of the code, the real version is too long to post but this is enough to represent the concept. I am using this to switch guitar diagrams based on several choices represented by anchors with the corresponding id in the href="". After spending several days getting it to work just right on a static html page, the script won't work in a Wordpress page which is where I intend to use it. I have tried it with the script in the head or inline (which shouldn't matter) - but either way it will not function. I know that Wordpress and certain plugins use Jquery so there may be a version mismatch causing conflicts. I am not (yet) an expert in javascript but I know there are several ways to skin a cat as the saying goes, I just need to find one that plays nice with Wordpress. Any help would be greatly appreciated...
<script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var divswitch = $('div.diagram_container a');
divswitch.bind('click',function(event){
var $anchor = $(this);
var ids = divswitch.each(function(){
$($(this).attr('href')).hide();
});
$($anchor.attr('href')).show();
event.preventDefault();
});
});
</script>
<style>
.diagram {
margin: 0;
width: 100%;
}
.diagram_container {
width: 100%;
}
</style>
<div id="RH_RW_Div" class="diagram_container" style="float:left; display:block;">
<div class="diagram_menu">
<a class="checked" href="#RH_RW_Div"><span class="checkbox_label">Right Handed</span></a>
<a class="unchecked" href="#LH_RW_Div"><span class="checkbox_label">Left Handed</span></a>
</div>
<img class="diagram" src='images/RH_RW.gif' /><br />
</div>
<div id="LH_RW_Div" class="diagram_container" style="float:left; display:none;">
<div class="diagram_menu">
<a class="unchecked" href="#RH_RW_Div"><span class="checkbox_label">Right Handed</span></a>
<a class="checked" href="#LH_RW_Div"><span class="checkbox_label">Left Handed</span></a>
</div>
<img class="diagram" src='images/LH_RW.gif' /><br />
</div>
Wordpress uses by default jQuery.noConflict(). This is to assure that there is no conflict by other libraries using the $ variable. That's why your console says it's not a function.
However, obviously, the jQuery variable still works, and you should use that, and passing to your function the $ variable yourself to enable the shorthand version of jQuery.
So your code should look like this:
jQuery(document).ready(function($){
// Your functions go here
});
My guess is that your Wordpress install or a plugin is already loading up jQuery in the head. Check to see if it exists there, and if it does, don't call it again.
If that doesn't do it and you have this site online, send me the link and I'll take a look.
Calling jQuery twice will often lead to problems. There is also a proper way to load jQuery and override the Wordpress version if you specifically need 1.8.3 (wp_register_script and wp_enqueue_script), but I don't think you need to go down that route yet.
Is it alright to define and use custom tags? (that will not conflict with future html tags) - while replacing/rendering those by changing outerHTML??
I created a demo below and it seems to work fine
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
<div id="customtags">
<c-TextField name="Username" ></c-TextField> <br/>
<c-NameField name="name" id="c-NameField"></c-NameField> <br/>
<c-TextArea name="description" ></c-TextArea> <br/>
<blahblah c-t="d"></blahblah>
</div>
</body>
<script>
/* Code below to replace the cspa's with the actual html -- woaah it works well */
function ReplaceCustomTags() {
// cspa is a random term-- doesn;t mean anything really
var grs = $("*");
$.each(grs, function(index, value) {
var tg = value.tagName.toLowerCase();
if(tg.indexOf("c-")==0) {
console.log(index);
console.log(value);
var obj = $(value);
var newhtml;
if(tg=="c-textfield") {
newhtml= '<input type="text" value="'+obj.attr('name')+'"></input>';
} else if(tg=="c-namefield") {
newhtml= '<input type="text" value="FirstName"></input><input type="text" value="LastName"></input>';
} else if(tg=="c-textarea") {
newhtml= '<textarea cols="20" rows="3">Some description from model</textarea>';
}
obj.context.outerHTML = newhtml;
}
z = obj;
});
}
if(typeof(console)=='undefined' || console==null) { console={}; console.log=function(){}}
$(document).ready(ReplaceCustomTags);
</script>
</html>
Update to the question:
Let me explain a bit further on this. Please assume that JavaScript is enabled on the browser - i.e application is not supposed to run without javascript.
I have seen libraries that use custom attributes to define custom behavior in specified tags. For example Angular.js heavily uses custom attributes. (It also has examples on custom-tags). Although my question is not from a technical strategy perspective - I fail to understand why it would strategically cause problems in scalability/maintainability of the code.
Per me code like <ns:contact .....> is more readable than something like <div custom_type="contact" ....> . The only difference is that custom tags are ignored and not rendered, while the div type gets rendered by the browser
Angular.js does show a custom-tag example (pane/tab). In my example above I am using outerHTML to replace these custom tags - whilst I donot see such code in the libraries - Am I doing something shortsighted and wrong by using outerHTML to replace custom-tags?
I can't think of a reason why you'd want to do this.
What would you think if you had to work on a project written by someone else who ignored all common practices and conventions? What would happen if they were no longer at the company to find out why they did something a certain way?
The fact that you have to just go through with JavaScript to make it work at all should be a giant red flag. Unless you have a VERY good reason to, do yourself a favor and use the preexisting tags. Six months from now, are you going to remember why you did things that way?
It may well work, but it's probably not a good idea. Screen readers and search engines may have a hard/impossible time reading your page, since they may not interpret the JavaScript. While I can see the point, it's probably better to use this template to develop with, then "bake" it to HTML before putting it on the server.