Combining jQuery and Pixastic - javascript

I just want to click on the image and then see it blur out. That's it. Here is the link:
http://www.olliemccarthy.com/test/blur-experiment/
Here is the code I've been using so far.
$(document).ready(function() {
$('.test').click(function() {
$(this).("blurfast", {amount:0.8})
});
});
I've tried rearranging the order in which the scripts are called in and no luck.

$(this).pixastic("blurfast", {amount:0.8});
will do it. You forgot to call the jQuery method.

Here is the code I've been using so far.
[snip]
$(this).("blurfast", {amount:0.8})
That's invalid JavaScript syntax and should be throwing a parsing error.
According to the Pixtastic documentation, you want:
$(this).pixastic("blurfast", {amount:0.8});
...assuming that you want to blur the image that was clicked.

Related

$.alert is not a function in Jquery in console error

I'm executing an alert with Jquery as like $.alert(param); The console is providing as $.alert is not a function.
How to overcome it ?
function AlertModelPoupMast(param) {
$.alert(param); //It's custom alert. dont suggest normal alert() here please.
return false;
}
If I place $.noConflicts() it is working for first time , but after that again not working.
function AlertModelPoupMast(param) {
$.noConflict(); //working for 1 time. not working from 2nd time.
$.alert(param);
return false;
}
Replace
$.alert();
to
alert();
This can happen when you not included jquery file or $ is conflicted with some other plugin, changing $ with Jquery may solve that problem,
I think you are using craftpip custom alert like here
here you look with the issue
https://github.com/craftpip/jquery-confirm/issues/32
me also faced similar issue. And the issue was jquery.min.js loaded twice which caused conflict. Make sure jquery and all other js files loaded once. It may fix the problem. Also put jquery.min.js at the top of other js files if possible, because jquery plugin may be needed by other plugins.
Hope it'll help someone.
Use
alert("Your message");
Please ask for clarification if needed.

jquery tools overlay - Two on same page

I have been working with jquery tools overlays. I got the below code online and have been able to make it work. However I now need the overlay setup with another link on the same page and need a different size on that overlay.
I tried copying and pasting the code and changing the rel to look for an id. My plan was the get a second function set to different div's, then setup the size in css. I'm rather new to jquery and although I thought it would be easy I cannot figure this out.
If anyone has any better solutions please let me know.
$(function () {
$("a[rel]").overlay({
mask: 'lightgrey',
effect: 'apple',
onBeforeLoad: function () {
var wrap = this.getOverlay().find(".contentWrap");
wrap.load(this.getTrigger().attr("href"));
}
});
});
I have tried changing $("a[rel]") to $("a.testclass") and $("#test"), but no other identifier seems to work.
Make sure that you include jQuery Tools in your HTML, like so:
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
That should make it work.
This is an official jQuery homepage. The API documentation is well organized. Search something about jQuery in this site.
overlay() doens't seem to be jQuery's default function. The function may be added like
$=jQuery;
$.fn.overlay=function(a, b, c){do something};
JavaScript eval("text") function also do the job you want (maybe).

jQuery .change not working in WooCommerce

I am trying to do something very simple. If you go to http://cutecuttingboards.com/product/apple/, I simply want to hide the "From:" price after the user choose a size in the drop down menu. I am trying the code below, which is working fine in Fiddle but not on the live site:
jQuery('#size').on('change', function(){
jQuery('p.price').hide();
});
Here is the fiddle with unformatted code: http://jsfiddle.net/anneber/U2Mat/
Any help is much appreciated!
Anne
i know it's kind of late but.. in case someone else is having the same problem, this should do the trick:
jQuery(document).ready(function($) {
$(document).on("change", ".variations #size", function() {
$('p.price').hide();
});
});
If I copy/paste your code above into web inspector and then change the selection it works, so most likely, the code is either not in the page, not being run, or being run before the related elements have been loaded into the DOM.
There is an error in your cutecutb.js file the Unterminated comment. i.e you are not terminating the comment
There is no "*/" sign.
EDIT :
Now another reason in add-to-cart-variation.min.js there is already an onchange event of dropdown
You can see you "#size" element is inside ".variations" class

button in jquery and jscript

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.

Javascript/jquery Images slideshow does not work

I am trying to create an easy slideshow but It is not that easy at all :(.
I have few problems to make it work.
Here is my code so far: http://jsfiddle.net/WUE9g/1/
PS: I would much appreciate any kind of help.
Thank you!
You had an unclosed function call in your code, check now: http://jsfiddle.net/WUE9g/3/
Use firebug, it has an error console that tells you what's going on.
I think that your parenthesis are not matching. Use
$(function() {
rotatePics(1);
});
instead of
$(function() {
rotatePics(1);
}
Since $ is a shortcut to the jQuery function, you need to use it like any other function (e.g. rotatePics()).

Categories