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)
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'm trying to replicate this useless website: http://endless.horse, but the jScript documentation does not do a great job of explaining how to implement it.
Basically, I need a block of text "Body" to be at the top, then for a block of text "Legs" to appear infinitely (as placeholders) (see website).
I've tried adding what the website says: http://jscroll.com, but it only says "[element].jscroll()" and that's it. I've also tried copying the code from the website, but that also doesn't work.
Here is the code I'm using:
DIV that should scroll:
<div class="jscroll">
<pre>
<h1>Body</h1>
</pre>
</div>
rest.html:
<pre>
Legs
</pre>
Code was taken from the website
javascript/jquery/jscroll:
$(function() {
$('.jscroll').jscroll({
autoTrigger: true,
padding: 2000px,
nextSelector: "rest.html"
});
});
I thought I would get a scrolling webpage with "Body" and "Legs", but I got just "Body" instead.
Assuming that you have included the right js and you run your script when the document is ready, the following code works for you:
<script type="text/javascript" src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="https://unpkg.com/jscroll#2.4.1/dist/jquery.jscroll.min.js"></script>
<div class="jscroll">
<pre>
<h1>Body</h1>
</pre>
</div>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
$(function() {
$('.jscroll').jscroll({
autoTrigger: true,
padding: 2000,
nextSelector: "a:last"
});
});
});
</script>
Basically, you need to change your nextSelector to be more specific and you must put a real jquery selector. 'a:last' always selects the last a tag that is available. Also, you need to change 2000px to 2000. this code worked for me. Don't forget to include more characters to your rest.html output.
Let me preface by saying this is all in relation to a Wordpress page. My knowledge of JS is lacking at best and the concept of installing/loading/enqueueing a function on one area of the site and then calling that function in another area of the site is a something that makes sense to me in my head but is very new to me in practice and might need a little explaining.
I have two separate javascript files that I would like to load on a single page, but toggle visibility/display of either based on radio button input. The JS is provided by a 3rd party and is offsite. Their provided code is this:
<script src="https://toolkit.rescuegroups.org/j/3/FzemP6HU/toolkit.js"></script>
and
<script src="https://toolkit.rescuegroups.org/j/3/4ANRW3x8/toolkit.js"></script>
Each file presents a separate set of filtered results from their database. How can I incorporate both onto a page but only have one or the other showing based on a radio button form input? I would like the page to start off with nothing visible (hopefully giving time for both JS to load in the background while the user selects an option) and then show one or the other depending on what they selected.
You can see a single one of these in action at http://pricelesspetrescue.org/adoptable-dogs/. I'm trying to incorporate the use of an additional file on that same page based on input from the user and only showing one or the other rather than both.
I have tried to manage the following
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<script type='text/javascript'>
function displayForm(c) {
if (c.value == "2") {
jQuery('#claremontdogContainer').toggle('show');
jQuery('#chdogContainer').hide();
}
if (c.value == "1") {
jQuery('#chdogContainer').toggle('show');
jQuery('#claremontdogContainer').hide();
}
};
</script>
<label>Please select a location to view:</label>
<form>
<input value="1" type="radio" name="formselector" onClick="displayForm(this)"></input>Chino Hills
<input value="2" type="radio" name="formselector" onClick="displayForm(this)"></input>Claremont
</form>
<div style="display:none" id="chdogContainer">
<script src="https://toolkit.rescuegroups.org/j/3/FzemP6HU/toolkit.js"></script>
<script type="text/javascript">
</script>
</div>
<!-- If I uncomment this second block the whole thing breaks
<div style="display:none" id="claremontdogContainer">
<script src="https://toolkit.rescuegroups.org/j/3/4ANRW3x8/toolkit.js"></script>
<script type="text/javascript">
</script>
</div>
-->
This gets pretty close to what I need. The problem I have is the second script load seems to conflict with the functions they provide in the script. It will display the initial result but does not carry any of the functionality that it should have. http://pricelesspetrescue.org/test-page/ Nothing is clickable inside those results and should be.
Been searching through various similar posts and the wordpress codex and...and...I just haven't been able to come up with anything that seems close enough to what I'm looking for to make the answer click in my head.
Edit: It seems that if I only load one of the scripts in either what I have above or the suggested answer below, all functionality is present when loaded. It's the loading of the second toolkit script that is breaking the page. I'm guessing one would need to be loaded then unloaded before loading the second for it to work. Any ideas?
The toolkit.js file you linked adds some common scripts to the DOM (via document.write function, which is not a good solution - see here: http://www.jameswiseman.com/blog/2011/03/31/jslint-messages-document-write-can-be-a-form-of-eval/), then populates an array (toolkitObjects) with a series of variables that are custom per file and finally loads some other scripts.
It also seems that each file loads a div with a specific class containing all the pets, and each div is identifiable by a specific class ( "rgtk-SOMEID" ) and therefore can be shown/hidden via javascript.
Here is an example of what you can obtain using the div class:
http://jsbin.com/loneyijuye/edit?html,output
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.
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.