I have the following fiddle: http://jsfiddle.net/VYbLX/125/
The purpose is to update a thumbnail with the appropriate selection in the dropdown menu. I'm attempting to implement this piece of code inside of a Drupal block that will be dropped into a specific page.
The page it is implemented on is: http://sulzbachercenter.org/fundraisers/give-a-good-night
In order to implement the code, I've rewritten the JS into a separate file and called it like this:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://sulzbachercenter.org/sites/default/files/ggn_js/dyn.js"></script>
The block can run PHP and HTML fully, so I know that's not an issue - but I'm out of troubleshooting ideas. Can anyone see why this code won't work in the Drupal environment?
The jQuery selector is looking for '#dynSelect', but the combobox in the form does not have an 'id'.
You can either add the id="dynSelect" to the combobox.
or
Change
$('#dynSelect').change(function () {
var val = $('#dynSelect').val();
$('#dynImg').attr("src",pictureList[val]);
});
to something like:
$("select[name='os0']").change(function () {
var val = $("select[name='os0']").val();
$('#dynImg').attr("src",pictureList[val]);
});
Related
Maybe I am so noob with jQuery but cant reach my objective. I need to add the attribute target="_blank to all the links inside certain divs. But anything I do works.
I have checked for jquery loaded with:
if(wp_script_is('jquery')==false) {
wp_enqueue_script("jquery");
}
Using the the following code nothing happens:
jQuery("#adagal").html("<p>asdf*</p>");
The #adagal element remains with previous content. I have checked in the source if my javascript file was correctly added, and it is.
<script type='text/javascript' src='http://localhost/wordpress/wp-content/plugins/AdManagerAdagal/js/ads/show_ad.js?ver=4.3.1'></script>
So, what is the problem¿?
Use that:
jQuery(document).ready(function($)
{
$(".your_class a").attr("target", "_blank");
});
Don't forget $ in ready(function to use jquery in your js
I’m using a slideshow on a wordpress site (Layerslider).
It creates some javascript code inside the source code (like :
<script type="text/javascript">
var lsjQuery = jQuery;</script><script type="text/javascript">
lsjQuery(document).ready(function() {
// code from the slider
}
});
</script>
The issue is that when i search something on the website with the native search field, the javaScript is visible in the result. I've tried with a native theme (Twenty Fourteen) and the issue is still here.
See screenshot :
Do you know how to remove this code from the result ?
I have a bit of an issue with getting Dropzone to work with jQuery. I was wondering if anyone could help.
I've tried both jQuery version 1.11.1 and 2.1.1 and neither seems to work. I've made it to work with straightforward Javascript but, I was planning on doing some major scripting and want dropzone to work with jQuery to save a few variables from being created to transfer data.
The Dropzone documentation mentions a jQuery plugin. But, I can't find it anywhere in the source and it's only mentioned here:
http://www.dropzonejs.com/#toc_4
With no information as to where it actually is.
I'm planning on using Dropzone with a div rather than a form and with no server code involved. It's a static one-off-use web page. For the time being I'm just following the documentation.
Here's some of my code:
HTML
<link href="css/dropzone.css" type="text/css" rel="stylesheet" />
<script src="dropzone.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
</head>
<body>
<div id="dropthat" class="dropzone"></div>
<script src="script.js"></script>
jQuery
$(document).ready(function() {
$("div#dropthat").dropzone({ url: "/file/post" });
//Below is my older, working Javascript code, still here for comparison.
//var myDropzone = new Dropzone("div#dropthat", { url: "/file/post" });
});
I'm sure I've either missed something really small or it is indeed a problem with the lack of the jQuery plugin file. Does anyone know about the jQuery plugin file and it's name? I've run a search for jQuery in the source files for dropzone but can't find anything. It seems like Dropzone was made as a jQuery plugin first and has only recently become a standalone. Or maybe it's my version of jQuery.
If worst comes to worst, I can always grab variables using JavaScript event listeners rather than jQuery.
I'm not entirely sure what are you asking for, but if you want to know about the relationship between your library and JQuery, just look inside the source code:
if (typeof jQuery !== "undefined" && jQuery !== null) {
jQuery.fn.dropzone = function(options) {
return this.each(function() {
return new Dropzone(this, options);
});
};
}
First it checks if jQuery is already loaded on your page and if it does, then it attaches itself as a plugin, which means: in order to use the jQuery plugin you need to ensure that your jQuery library script runs before Dropzone.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script src="dropzone.js"></script>
Notes:
- I looked inside the source code provided in the INSTALLATION section from here
- Git wiki (maybe it will help you during development)
I am trying to understand the difference between JQuery and JavaScript.
And apologies if this is a silly question.
This is my attempt at JQuery. On pressing the button the text in <p> should change as requested. I cannot get this to work.
http://jsfiddle.net/QaHda/7/
this is my JavaScript attempt. I cannot get this to work either
http://jsfiddle.net/aLhb8/1/
Can someone please help me with
my jQuery above to get it working.
my jscript above to get it working.
I was trying to get to a point where I could write my JQuery in such a way that it could be written in javascript. Can anyone help me do this?
Thanks
EDIT
Thanks for all the answers/corrections: what I was looking for part 3 was this enter link description here which basically does part 1 using javaScript,I think. In future I should be careful,using left hand pane, to include Jquery library and to make sure jsript is wrapped in head/body
jQuery
You need to include jQuery library to your page by selecting a jQuery version in the first dropdown in the left panel
Demo: Fiddle
JS Sample
The problem is since your function is defined within the onload callback, it was not available in the global scope causing an error saying
Uncaught ReferenceError: myFunction is not defined
The solution is to add the script to the body elements, instead of inside the onload callback by selecting No Wrap - in <body> in the second dropdown in the left panel
function myFunction()
{
alert("Hello World!");
}
Demo: Fiddle
jQuery is library of javascript function and you need to add jquery file in html file that y jquery function was not working and for javacript function you need to change the setting in jfiddele left to no-wrap in head
http://jsfiddle.net/aLhb8/1/
http://jsfiddle.net/hushme/QaHda/10/
here is code
$("button").on("click", function () {
$("p").text("this text will now appear!!")
});
If you have internet connection, This should work
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
$(document).ready(function() {
$('button').click(function() {
alert("This is a simple alert message");
});
});
But if don't then just download the jquery framework and include into your page
Hope it helps and anyway jquery is a framework of javascript, so they are both or they are the same. Don't confuse yourself.
Here is a JavaScript version - http://jsfiddle.net/aLhb8/4/
JavaScript
var myButton = document.getElementById('myButton');
myButton.addEventListener('click', function(){
alert(myButton.textContent);
});
Check this link out if you want to start learning more about JavaScript - http://javascriptissexy.com/how-to-learn-javascript-properly/
For the pure JS code, on the top left panel, select 'No wrap - in body'. This will make your code run without a problem.
In the jQuery code, make sure you've selected the jQuery library, as opposed to pure JS. You hadn't selected this before, so your code was invalid.
I am new to jQuery and am stuck at some strange issue. I am using jQuery's change and click methods. They are working fine when used in my HTML file in the <script> tag.
Like:
<script>
$("select,input").change(function ()
{
// My code and some alerts
});
</script>
When I copied the same in external JavaScript code without <script> and imported that in my HTML it was not at all working.
Are there any changes which are needed to use jQuery in external JavaScript code?
PS: Some other non-jQuery functions present in same external JavaScript code are successfully called from HTML.
First off, you don't want a <script> tag in an external JavaScript file, if that's how I'm reading your post.
The trick with jQuery is that your code is set to execute immediately.
You want to wrap your script so that it loads when the document is ready, in something like:
$(document).ready(function(){
$("select,input").change(function ()
{
// My code and some alerts
})
});
And you want to make sure that your file is loaded after jQuery (otherwise the $ global will not be set).
Additions:
Here is what your HTML should look like:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="jscript/myExternalJs.js"></script>
Here is what your JavaScript code should look like (note there is no script tag inside the JavaScript file):
$(document).ready(function(){
$("select,input").change(function ()
{
// My code and some alerts
})
// Other event handlers.
});
As far as your other script... it sort of depends on what you're doing. The most important thing is to not try to hook event listeners up to objects that don't yet exist, which is why we use document.ready.
Did you make sure jquery is defined before your own jquery code?
You should also make sure the DOM is ready when dealing with jquery:
$(document).ready(function() {
$("select,input").change(function() {
// my code and some alerts
});
// more code here if needed, etc.
});