I have looked up this question and I know it has been answered, but none of the other answers seem to work for me.
I think it might have something to do with all of the javascript on the page.
Here is my HTML code:
<div class="form-group">
<label for="birthday">Birthday</label>
<input type="text" class="form-control" name="birthday" id="birthday" >
</div>
If I remove the birthday id from the input and add it to the div the calendar is visible at all times under the input, but when I click into the input nothing happens
I am going to include all of my JS code just in case you see a conflict
Here is my JS code:
<!-- Loading Image Picker -->
<script src="../imgPicker/assets/js/jquery-1.11.0.min.js"></script>
<script src="../imgPicker/assets/js/jquery.Jcrop.min.js"></script>
<script src="../imgPicker/assets/js/jquery.imgpicker.js"></script>
<!-- Menu Toggle Script -->
<script>
$(document).ready(function() {
$('[data-toggle=offcanvas]').click(function() {
$('.row-offcanvas').toggleClass('active');
});
});
</script>
<!-- Bootstrap Select Script -->
<script src="../assets/js/bootstrap-select.js"></script>
<script>
$(document).ready(function() {
$("select").selectpicker({style: 'btn btn-default', menuStyle: 'dropdown-inverse'});
});
</script>
<!-- Bootstrap Datepicker Script -->
<script src="../vendor/datepicker/js/bootstrap-datepicker.js"></script>
<script>
$(document).ready(function() {
$('#birthday').datepicker({
autoclose: true
});
});
</script>
<!-- Upload Avatar Script -->
<script>
$(function() {
var time = function(){return'?'+new Date().getTime()};
// Avatar setup
$('#avatarInline').imgPicker({
url: '../imgPicker/server/upload_avatar.php',
aspectRatio: 1,
// We use the loadComplete to set the image
loadComplete: function(image) {
// Set #avatar image src
$('#avatar').attr('src', image.name / image.versions.avatar.url);
},
deleteComplete: function() {
$('#avatar').attr('src', 'avatar/avatar.png');
this.modal('hide');
},
cropSuccess: function(image) {
$('#avatar').attr('src', image.versions.avatar.url);
this.modal('hide');
location.reload();
}
});
});
</script>
<!-- Update Avatar Script -->
<script>
function updateAvatar(object){
$.ajax({
url: 'update-avatar.php',
data: 'avatartype=' + object.value,
cache: false,
error: function(e){
alert(e);
},
success: function(response){
// Reload the page to refresh data from database
location.reload();
}
});
}
</script>
<script src="../assets/js/jquery-ui-1.10.3.custom.min.js"></script>
<script src="../assets/js/jquery.ui.touch-punch.min.js"></script>
<script src="../assets/js/bootstrap.min.js"></script>
If add just the exact code I need in JSFiddle everything seemed to work fine, but for some reason I cannot get it to work in my code.
Can someone please help?
EDIT: I think I narrowed it down to a CSS issue. I am using Flat UI and when I remove this from my code everything seems to work, but I would like to continue using Flat UI. Has anyone worked with Flat UI and Bootstrap datepicker together? or does anyone know how I can resolve this issue?
Here is a JSFiddle of the issue.
Have you checked the Date Picker docs here:
Bootstrap Date Picker Docs
Looks like you're missing some key features such as:
<input class="datepicker" data-date-format="mm/dd/yyyy">
<input data-provide="datepicker">
It looks like there are "data-attributes" you can use rather than all the scripting you have done. I also wonder if input type should equal "date".
<input type="date" class="form-control" name="birthday" id="birthday" >
Which will trigger the HTML5 date-picker. Don't know if that's necessary or not but I would suggest revisiting the docs. Without a fiddle set up, it's hard to look for scripting conflicts but even if you have them the date-picker docs provide you with a "no conflict mode".
Give it a try!
I tried out your js and html. It seems to work with "birthday" id tied to the input element. It is missing the css/ styles though.
Here are some things I would try:
Try clearing the browser cache
Get rid of unnecessary js files. See if you can start from scratch and keep adding js as needed.
May be the source from where you got the js files is corrupted or not correct. (I downloaded all the js files you mentioned, I can provide you the copies if you want to try those.)
I will also look at differences between jQuery and bootstrap datepickers. You seem to have datepicker tied to input element similar to jQuery date picker. For reference : http://jqueryui.com/datepicker/
There was a conflict with my other CSS styles so I added this code to the datepicker3.css file:
.datepicker.dropdown-menu {
visibility: visible;
opacity: 1;
width: auto;
}
This seemed to have fixed the problem.
Related
I've spent enough hours googling this to feel comfortable posting this- even though i'm sure it's a simple solution. I'm just getting into a webdev so pardon my ignorance. As the title says i'm simply trying to have the content of an HTML file appear in a div after a button is pressed. Here is my code:
HTML:
<button id="button" class="linkGeneration">Press me</button>
<div id="renderArea" class="contentArea">
<!-- CONTENT SHOULD GENERATE HERE -->
</div>
Javascript:
$(document).ready(function() {
$('button').click(function(e) {
e.preventDefault();
$("#renderArea").load($(this).attr('../html/content.html'));
});
});
I'm not getting any errors, the button simply does nothing. I do have Jquery properly applied in my HTML as well.
Any suggestions on how to fix this OR a different method that might be simpler? Thanks.
The button doesn't have an attribute named ../html/content.html, so $(this).attr('../html/content.html') is not returning anything.
If you want to load from the URL, just use that as the argument to .load(), you don't need .attr().
$(document).ready(function() {
$('button').click(function(e) {
e.preventDefault();
$("#renderArea").load('../html/content.html');
});
});
I need to code a number of trials for a JsPsych experiment displaying a simple math question. The user must answer in a textbox as fast as possible and then press the Enter key to move to the next question. And so on.
On each question, a single textarea is shown for the user to type his/her answer, and such textarea must have focus immediately.
I've modified the survey-text plugin to continue through trials by pressing Enter, as well as adding the autofocus property on creation of each textbox. Problem is that autofocus works only for the first trial, and stops working for the rest.
Code is provided below (in order to work, JsPsych folder must be on the same dir):
<!doctype html>
<html>
<head>
<title>Habilidad Aritmetica</title>
<!-- Inicio llamada a libreria JsPsych + Plugin -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jspsych-5.0.3/jspsych.js"></script>
<!-- Plugin para recibir texto estilo survey -->
<script src="jspsych-5.0.3/plugins/jspsych-survey-text.js"></script>
<!-- Plugin para desplegar elementos tipo instrucciones -->
<script src="jspsych-5.0.3/plugins/jspsych-instructions.js"></script>
<!-- *** CSS *** -->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="centered">
<script>
var aritm01={
type: 'survey-text',
timeline:[
{
questions:['<p>preg 1</p>']
}
]
};
var aritm02={
type: 'survey-text',
questions:['<p>preg 2</p>']
};
var aritm03={
type: 'survey-text',
questions:['<p>preg 3</p>']
};
function advance(event){
$("textarea").keydown(function(event){
console.log(event.keyCode);
//event.preventDefault();
if (event.keyCode == 13) {
console.log("User pressed enter. Clicking continue button");
var btn = document.getElementById("jspsych-survey-text-next");
btn.click();
//event.preventDefault();
}
});
}
function recoverfocus(event){
$("textarea").focus();
}
var second_battery = [];
second_battery.push(aritm01);
second_battery.push(aritm02);
second_battery.push(aritm03);
jsPsych.init({
timeline: second_battery,
on_finish: function(){
jsPsych.data.localSave('second_battery_results.csv', 'csv');
},
default_iti: 0
});
</script>
</div>
</body>
</html>
From JsPsych's survey-text plugin side, the important change is:
focused_box = $("#jspsych-survey-text-" + i).append('<textarea autofocus onfocus="advance(event)" onblur="recoverfocus(event)" required name="#jspsych-survey-text-response-' + i + '" cols="' + trial.columns[i] + '" rows="' + trial.rows[i] + '"></textarea>');
(yes, I know that in-line javascript is a bad idea, but so far is the only way I managed to make it work)
Stuff I've tried:
A lot of similar questions suggest the use of getElementById()
method, or getElementsByTagName() in order to handle the DOM
element, but for some reason none of them works.
I've also tried
using a timer to focus text areas, as suggested here (
the other solutions suggested on that topic didn't work neither).
As you can see from my
code, I'm trying to "recover" the focus using a function, which
triggers on Blur. I've also tried such approach onLoad(), with no
results in both cases.
I've tried displaying the questions on a
nested timeline inside a single trial, instead of using many trials.
No luck neither.
Am I missing something?
Some extra notes:
As you can guess from this question's tags, JQuery and HTML5 specific functions are totally allowed as solutions, in case that making autofocus work on its own isn't possible. No need to restrict yourselves, have fun.
This behavior has been tested on latest version of Firefox for Ubuntu 16, as well as the latest version of Chrome for Windows (Windows 10 specifically).
UPDATE: You can try this code here
You can apply the focus after you append the element to the page. In your modified survey-text plugin, try this on line 63:
$("#jspsych-survey-text-" + i +" textarea").focus();
This might make other things that you have in the code obsolete, but I didn't try any other modifications.
I'm building a photo archive website for a photographer and on top of each page there is a search bar. It's pretty useful, since you only have to click on the text inside (which says: "Search the archive...") so you can enter your search phrases.
Website: bit.ly/1RB1VCv (direct link to the - now - hidden page)
Since I added a slider to the home page (javascript), the search bar seem to be partially messed up (I now have to delete the text instead of just clicking on it).
I tried to determine which part was causing trouble by deleting certain parts of the slider code I put between the body-tags in the index file:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="js/jquery.slides.min.js"></script>
<script>
$(function() {
$('#slides').slidesjs({
width: 1000,
height: 300,
play: {
active: true,
auto: true,
interval: 4000,
swap: true
}
});
});
</script>
Not sure if it is any helpful, but this would be the part from the header file in regards to the search bar:
<div id="searchBar">
{* Header Search Box Area *}
{if $config.settings.search}
<form action="{linkto page="search.php"}" method="get" id="searchFormTest">
<input type="hidden" name="clearSearch" value="true">
<div class="headerSearchBox"><input type="text" id="searchPhrase" name="searchPhrase" class="searchInputBox" value="{$lang.enterKeywords}"></div>
{if $currentGallery.gallery_id}<div class="headerSearchBox headerSearchBoxCG"><input type="checkbox" name="galleries" id="searchCurrentGallery" value="{$currentGallery.gallery_id}" checked="checked"> <label for="searchCurrentGallery">{$lang.curGalleryOnly}</label></p></div>{/if}
<div class="eyeGlass"></div>
<div class="headerSearchBox headerSearchBoxOption">{$lang.advancedSearch}</div>
</form>
{/if}
Is this an obvious mistake I'm making? Is it something that can be resolved real simple? I tried to look on both Stackoverflow and Google if I could find similar problems, but that didn't help me much.
I like to hear your thoughts and if you need any other code.
Thank you!
The code is a bit of mess but I think the problem is you're putting a JQuery down in the middle and it's ruining your public.min.js, cause it tries to add a function to JQuery (the clicktoggle). So this listener is not being called:
$('.searchInputBox').click(function(){ $(this).val(''); } );
Basically, try to put this jquery tag BEFORE the script tag that calls your public.min.js
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
If this doesn't work, there's another problem somewhere, but as a workaround could just put the listener after all the code (create a script tag in the end of your file, it's going to work)
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.
(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.