I searched through the forum already but I can't find any way to fix the problem I have with the "effect" function in jQuery.
I get exactly the error TypeError: $(...).effect is not a function in the code :
$('div.step').removeClass('active');
$("div.step").effect('slide', {direction: 'right', mode: 'hide'}, 500);
$('#step' + step + '').addClass('active');
$('#step' + step + '').effect('slide', {direction: 'right', mode: 'show'}, 500);
I included both jQuery and jQuery UI like this in <head></head> :
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
But in vain, do you have any idea? Thank you
You need to put your custom script after your jQuery and jQuery UI declarations, and wrap it within a document ready() function:
<body>
...
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
...
});
</script>
</body>
I do not know if the problem was solved but I found a way to replicate the shake function with the animation function and it works like a charm:
function shake() {
var div = document.getElementById('yourElementID');
var interval = 100;
var distance = 10;
var times = 4;
$(div).css('position', 'relative');
for (var iter = 0; iter < (times + 1) ; iter++) {
$(div).animate({
left: ((iter % 2 == 0 ? distance : distance * -1))
}, interval);
}
$(div).animate({ left: 0 }, interval);
}
This solution belongs to thisSite, all credits to them.
I hope this will be useful to someone in the future, if so please mark it as solution, greetings.
Add jQueryUI not just jQuery. jQuery doesn't contain the effect() function:
https://code.jquery.com/ui
Try to use
$(document).ready(function () {
$('div.step').removeClass('active');
$("div.step").effect('slide', {direction: 'right', mode: 'hide'}, 500);
$('#step' + step + '').addClass('active');
$('#step' + step + '').effect('slide', {direction: 'right', mode: 'show'}, 500);
}
For me, it turned out that my project was using a "Custom download" version of Jquery-UI which had been set to exclude the effects plugin. Replacing my version of Jquery UI with a full version fixed my issue.
Related
I have a website with a slider and a smooth scroll script. The problem is, I can't get them to work at the same time.
This is the url:
http://kop.hosts.ma-cloud.nl/template/
can somebody please tell me what i'm doing wrong? I am already using var jq = $.noConflict();
Thanks in advance!
You almost have a everything working. Please add following corrections to make it full functional.
Step 1
Load jQuery library (jquery.min.js) before jQuery-ui library like below:
<!--Script voor smooth scroll-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!--Script voor de slider-->
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
Step 2
Remove this line.
// var jq = $.noConflict();
Step 3
Remove all instances of jq with $ in the following section like my version:
$('.rightarrow, .leftarrow').hide();
$('#scrolldiv_container').mouseenter(function(){
$('.rightarrow, .leftarrow').show();
clearInterval(siId);
})
$('#scrolldiv_container').mouseleave(function(){
$('.rightarrow, .leftarrow').hide();
si();
});
$('.rightarrow').click(function () {
var leftPos = $('#browser').scrollLeft();
<!--1000 * 6 (aantal slides - 1)-->
if (leftPos == 6000) {
$('#browser').animate({
scrollLeft: 0
}, 400);
} else {
$('#browser').animate({
scrollLeft: leftPos + 1000
}, 150);
}
});
$('.leftarrow').click(function () {
var leftPos = $('#browser').scrollLeft();
if (leftPos == 0) {
$('#browser').animate({
<!--1000 * 6 (aantal slides - 1)-->
scrollLeft: 6000
}, 400);
} else {
$('#browser').animate({
scrollLeft: leftPos - 1000
}, 150);
}
});
Step 4
Now reload the page and you will see both the slider and smooth scrolling are working.
I'm not very familiar with this sort of web development.
Basically what I am trying to do is have a button (or keyboard key) which makes an image appear and then scroll across the screen and disappear..
Scenario: The Button(key) is pressed 10 times, 1 time every second.
10 images are appear and each one scrolls across the screens width and then disappears.
How am I able to do this?
The effect I would like to get is quite similar to the Konami code Easter egg used on the http://www.vogue.co.uk/ website.
I'm guessing it's JavaScript or similar but I don't know how to write it. Neither do I know scripting in jQuery.
Here you go:
$(function () {
var images = [
'http://placehold.it/100x100',
'http://placehold.it/150x150',
'http://placehold.it/200x250',
'http://placehold.it/200x200'];
var index = 0;
$(document).on('keypress', function (event) {
var c = String.fromCharCode(event.charCode);
if(c === 'a') {
var image = images[index];
console.log(image);
index = (index + 1) % images.length;
$('<img style="position: fixed; bottom: 0; right: 0" src="' + image + '"/>')
.appendTo(document.body)
.animate({right: '200%'}, 2000, function() {
$(this).remove();
});
}
})
});
Press the 'a' key to make the images in the array slide from the right. Edit the array to use your images. You will need to include jQuery in your project.
Here's a Fiddle: http://jsfiddle.net/acbabis/tD4FG/
I came up with something. Not the cleanest it could be but works:
Heres the HTML:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="popUpButton.js"></script>
</head>
<body>
<div id="ToolBar" class="ToolbarDiv">
<button onclick="popUpButton()" type="button">ButtonOne</button>
</div>
</body>
</html>
And here is the javascript function:
function popUpButton() {
var popUpB = document.createElement('div');
popUpB.className = 'ButtonClass';
popUpB.id = 'ButtonID';
var message = document.createElement('img');
message.src = "http://www.google.com/intl/en_com/images/logo_plain.png";
popUpB.appendChild(message);
document.body.appendChild(popUpB);
$("img").animate({
marginLeft: "+=1000px",
}, 3000 );
}
Hope that is what you need.
Ive been attempting to create my own Javascript slider plugin, (I realise there are many out there, but i wanted to treat it as a learning exercise),
an example can be seen here: http://jsfiddle.net/6GTGU/
the problem I'm having is that the animation goes round once, and then stops, Ive tried to examine this to see what i have done wrong but i can't find any reason for it, if anyone can help me i would be very grateful.
HTML
<div id="cjwSlider">
<div style="background-color: #6495ed"></div>
<div style="background-color: #62ed43"></div>
<div style="background-color: #ed5943"></div>
</div>
JAVASCRIPT
var cjwSlider = $('#cjwSlider');
var sliderItems = cjwSlider.children('div');
$(document).ready(function () {
sliderItems.each(function( index ) {
$(this).css('z-index', index);
});
window.setInterval(function(){
var maxValue = findMaxZIndex();
var currentItem = sliderItems.filter(function() {
return $(this).css('z-index') == maxValue;
});
currentItem.addClass("hiddenDiv").delay(1000).queue(function() {
sliderItems.each(function( index ) {
$(this).css('z-index', parseInt($(this).css('z-index')) + 1);
});
currentItem.css('z-index', 0);
currentItem.removeAttr('class');
});
}, 4000);
});
function findMaxZIndex() {
var maxValue = undefined;
$(sliderItems).each(function() {
var val = $(this).css('z-index');
val = parseInt(val, 10);
if (maxValue === undefined || maxValue < val) {
maxValue = val;
}
});
return maxValue;
}
PLUGIN DEMO IN ACTION
You said you want a plugin so here you go.
It even stops on mouseenter. (I personally hate when I cannot stop a gallery by just hovering it.)
I don't understand the need of z-index at all, so you can calmly remove it all from your HTML and don't bother at all.
<div class="cjwFader" id="el1">
<div style="background: red;"> 1 </div>
<div style="background: green;"> 2 </div>
<div style="background: gold;"> 3 </div>
</div>
CSS:
(the only needed, but you can also make jQ apply the children position)
.cjwFader > div {
position: absolute;
}
And finally the plugin:
(function($){
$.fn.cjwFader = function(opts){
// Default Settings
var S = $.extend({
fade: 400,
wait: 2000,
startAt: 0
//, need more? add more.
},opts);
return $(this).each(function(){
var that = $(this),
child = $('>*',that),
nOfChildren = child.length,
sI;
function animate(){
child.eq( S.startAt = ++S.startAt % nOfChildren )
.fadeTo( S.fade,1 )
.siblings().stop().fadeTo(S.fade,0);
}
function loop(){
sI=setInterval( animate, S.wait+S.fade );
}loop();
child.hover(function(e){
return e.type==='mouseenter'? clearInterval(sI) : loop();
}).eq(S.startAt).show().siblings().hide();
});
};
})(jQuery);
Plugin usage:
$(function(){ // DOM ready
// $('#el1').cjwFader(); // Use default plugin settings
$('#el1').cjwFader({ // Let's apply some custom stuff
startAt : 1,
fade : 1000,
wait: 700
});
});
Here is the working slideshow: http://jsfiddle.net/6GTGU/7/
I've updated the HTML slightly to remove the initialization code from your JS. You may decide to revert that back
HTML
<div id="cjwSlider">
<div style="background-color: #6495ed; z-index: 0;"></div>
<div style="background-color: #62ed43; z-index: 1;"></div>
<div style="background-color: #ed5943; z-index: 2;"></div>
</div>
I had to remove a lot of JS code to nail down the problem. I think the current JS is all you may need and don't need to go back to your original one:
var cjwSlider = $('#cjwSlider');
var sliderItems = cjwSlider.children('div');
$(document).ready(function () {
window.setInterval(function () {
var maxValue = $('#cjwSlider').find('div').length - 1;
var currentItem = sliderItems.filter(function () {
return $(this).css('z-index') == maxValue;
});
currentItem.addClass("hiddenDiv").delay(1000).queue(function () {
sliderItems.each(function (index) {
$(this).css('z-index', parseInt($(this).css('z-index')) + 1);
});
currentItem.css('z-index', 0);
currentItem.removeAttr('class');
$(this).dequeue();
});
}, 4000);
});
The crux of the problem was the missing call to dequeue() at the end of the function that was queued up. The function executed fine for the first time but then stayed at the head of the queue and prevented execution of functions queued later on. This is why your animation played for one cycle but not after that.
I'm kinda new to creating websites, so bear with me.
I just started a new project and I wanted a menu that follows when you scroll, and then stops when it reaches the top of the page. I found a really cool JavaScript plugin called "StickyPanel" ( https://code.google.com/p/sticky-panel/ ), but it won't cooperate. Apparently there are no instructions and I can't find any useful info else where.
The code is very simple:
<script src="js/jquery.js"></script>
<script src="js/jquery.stickyPanel.min.js"></script>
<!-----Sticky Panel------>
<script type="text/javascript">
$().ready(function () {
var stickyPanelOptions = {
afterDetachCSSClass: "",
savePanelSpace: true
};
$("header").stickyPanel(stickyPanelOptions);
});
</script>
<script>
$(document).ready(function(){
$(".nav-button").click(function () {
$(".nav-button,.menu").toggleClass("open");
});
});
</script>
<!-----Sticky Panel------>
Then I made a div class called "header" and then styled the header-menu. I can't get the JavaScript to do anything with my header. What am I doing wrong?
$("header").stickyPanel(stickyPanelOptions);
You ask Jquery for the elemet header
You need to ask jquery the class header =>
$(".header").stickyPanel(stickyPanelOptions);
Read about slectors its usefull!
<header> is a html5 element, support by almost all browser but dont forget display: block in css!
select your div using $(".header") Instead of $("header")
There is another way to it if you don't want to use this plugin. found this code somewhere on internet. it uses position:fixed css style, simple js
javascript
<script type="text/javascript">
window.onload = function () {
$(window).scroll(function () {
var e = $("#StickyPanel");
if (document.documentElement.scrollTop >= 602 || window.pageYOffset >= 602) {
if ($.browser.msie && $.browser.version == "6.0")
{
e.css("top", document.documentElement.scrollTop + 15 + "px") }
else {
e.css({ position: "fixed", top: "1%" }) } }
else if (document.documentElement.scrollTop < 602 || window.pageYOffset < 602)
{
e.css({ position: "absolute", top: "91%" }) } }) }
</script>
css
#search
{
position: absolute;
top: 91%;
}
just change the values
602
according to your needs
Hope it helps.
This is what you are asking for:
JSFIDDLE
jsfiddle demo
my html is:
<html>
<body>
<button id="widthPlus">increase </button>
<div id="bod"> hai </div>
<img id="tree" src="http://www.rangde.org/newsletter/nov11/images/real_tree.png" width="350"/>
</body>
</html>
my script is:
$(document).ready(function() {
$("#widthPlus").click(function(){
var currentwidth = $('#tree').attr('width');
var currentwidthNum = parseFloat(currentwidth, 350);
var newwidth = currentwidthNum+5;
$('#tree').animate({'width', newwidth}, 5000);
return false;
});
});
i am trying to increase(5px) the image width when click a button my jsfiddle is here
$(document).ready(function() {
$("#widthPlus").click(function() {
$('#tree').animate({
'width': '+=5'
}, 5000);
return false;
});
});
jsFiddle.
You have many syntax errors, and also are not using some of the functions properly. I would highly recommend using the documentation for things like parseFloat and jQuery animate. Using Chrome's inspect tool or Firefox's firebug, you will be able to see the obvious javascript errors that are happening and be able to debug.
Here's a modified version of your code that works (so you can learn): http://jsfiddle.net/XjaD5/5/
$(document).ready(function() {
$("#widthPlus").click(function(){
var currentwidth = $('#tree').width();
var newwidth = currentwidth+5;
$('#tree').animate({'width': newwidth}, 5000);
return false;
});
});
Alex's version is a much better and elegant solution, however.