I want to fade effect of the div, the following script doesn't work. What can be the problem? Thanks a lot.
function fadeIn(){
$('test').invoke("fade", {
from: 0,
to: 1,
afterFinish: function() {
$('test').setStyle({
display: 'block'
});
}
});
}
<div class='top'>
<div id="test" style="display:none">
Fade in test
</div>
</div>
Click me
The problem is that invoke is a method of Enumerable, and $ returns an Element, not an Enumerable.
Since $ is effectively an alias for getElementById, there is no need for it to return an array of elements (you can only have one element with any given id, so only one element will ever be returned).
You can just call fade directly on the element:
$('test').fade({
from: 0,
to: 1,
afterFinish: function() {
$('test').setStyle({
display: 'block'
});
}
});
Related
I am trying to make a Slick slider jump back to the first slide after the last slide. The closest answer to this topic I have found is this:
Slick slider goto first slide
But unfortunately it uses the fade animation so it does not have the effect I'm after. What I want is that the slideshow will play until the end and then scroll back to the beginning after the last slide is shown.
There are only three slides in my use case, and I can easily fire a message in the console when the last one is reached, but the slickslider method slickGoTo doesn't work.
(function($) {
var slider = $('.sightbox__slideshow');
slider.slick({
arrows: false,
autoplay: true,
infinite: true,
});
function jumpBack() {
slider.slick('slickGoTo', 0);
}
slider.on('beforeChange', function(event, slick, currentSlide, nextSlide) {
console.log(currentSlide);
if (currentSlide === 2 ) {
console.log('last slide');
jumpBack();
}
});
})(jQuery);
.sightbox__slideshow {
width: 250px;
padding: 50px;
}
.sightbox__slide--1 {
background-color: pink;
}
.sightbox__slide--2 {
background-color: green;
}
.sightbox__slide--3 {
background-color: yellow;
}
<link href="https://kenwheeler.github.io/slick/slick/slick.css" rel="stylesheet"/>
<div class="sightbox__slideshow">
<div class="sightbox__slide sightbox__slide--1" id="sightbox__slide--1">
<div alt="" class="sightbox__slide-img"></div>
<p class="sightbox__slide-txt">1. first</p>
</div>
<div class="sightbox__slide sightbox__slide--2" id="sightbox__slide--2">
<div alt="" class="sightbox__slide-img"></div>
<p class="sightbox__slide-txt">2. second</p>
</div>
<div class="sightbox__slide sightbox__slide--3" id="sightbox__slide--3">
<div alt="" class="sightbox__slide-img"></div>
<p class="sightbox__slide-txt">3. third</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://kenwheeler.github.io/slick/slick/slick.js"></script>
You may change the trigger event to afterChange and resort to setTimeout function to stay on the last slide for a while (3 seconds approx).
The slick-slider preventing a custom action on its events can also be overridden using the setTimeout function.
function jumpBack() {
setTimeout(function() {
slider.slick("slickGoTo", 0);
},3000);
}
CODEPEN
Hope this helps.
I have markup like this:
<form name="myForm" ng-controller="myCtrl" novalidate>
<input ng-model="theValue" type="range" min="0" max="100" required>
<input ng-model="theValue" type="number" required></input>
<span ng-show="theValue.$error.number">Hey! No letters, buddy!</span>
</form>
And I want the span to show when the user accidentally types a letter in the second input. Simple, right? As an (probably) related problem, the value in the second input disappears when the user moves the first slider input. Why? This doesn't happen if I remove type-number from the markup.
To be clear: I want the user to see the tooltip error immediately when it's typed, without any "submit" action. (I'd prefer not to have to use the form element at all in fact, but all the related demos seem to require it.)
http://jsfiddle.net/7FfWT/
Any workaround is most welcome. Please post a working fiddle if possible.
There seems to be a weird issue with type="number" playing nicely with other inputs.
The posts in this google groups post should get you on the right track. In particularly, the last post there: https://groups.google.com/forum/#!msg/angular/Ecjx2fo8Qvk/x6iNlZrO_mwJ
The jsfiddle link is: http://jsfiddle.net/ABE8U/
As a work around, he's made a directive:
.directive('toNumber', function () {
return {
require: 'ngModel',
link: function (scope, elem, attrs, ctrl) {
ctrl.$parsers.push(function (value) {
return parseFloat(value || '');
});
}
};
});
Credit to Schmuli Raskin
Also you can use ng-pattern as validator:
<input type="number" ng-model="theValue" name="theValue" step="1" min="0" max="10" ng-pattern="integerval" required>
<span ng-show="form.theValue.$invalid">Hey! No letters, buddy!</span>
$scope.integerval = /^\d*$/;
I've updated the directive to work with ng-repeat filters. Notice the '$', which is a wildcard. This directive should handle 0 just fine. It fails over to wildcard on
.directive('toNumber', function() {
return {
require: 'ngModel',
link: function(scope, elem, attrs, ctrl) {
ctrl.$parsers.push(function(value) {
return value===0 ? 0 : (parseFloat(value) || '$');
});
};
})
jzm,s answer is really wonderful trick and saved my time.
I am just taking it to one step further and replacing parseFloat(value) with what it actually does.
directive('number', function () {
return {
require: 'ngModel',
link: function (scope, elem, attrs, ngModel) {
ngModel.$parsers.push(function (value) {
if (value==null)
return NaN;
});
}
};
});
HTML:
<a class="targetLink" href="#">LINK1</a>
<div id="text1" style="display: none;">text1 div</div>
<a class="targetLink" href="#">LINK2</a>
<div id="text2" style="display: none;">text2 div</div>
<a class="targetLink" href="#">LINK3</a>
<div id="text3" style="display: none;">text3 div</div>
JS:
$("a.targetLink").toggle(function() {
$(".open").slideUp(350);
$(this).next("div").slideDown(350).addClass("open");
}, function() {
$(this).next("div").slideUp(350).removeClass("open");
});
It works this way: when u press a link with class "targetLink" it opens a DIV below it. Now i need to modify js code to: when i click then link it scrolls to the beginning of that opened div. How can i achieve it? Thanks in advance.
Use scrollTop on the element that you want to scroll to the top of. http://api.jquery.com/scrollTop/
example:
$(this).next("div").scrollTop(0);
I think this is what you need, and maybe more: My jsfiddle. I'm not sure what you've got working so far, but this does what i think you're going for, without the need for additional jquery plugins, etc.
here's the JS(check the jsfiddle for html):
$(".pop").hide();
$(".targetLink").on("click", function(e) {
e.preventDefault();
var n = $(this).next();
if(!$(n).hasClass('open')){
$(".open").removeClass('open').slideUp(200);
$(n).addClass('open').slideDown(200);
}
});
$(".nav").on("click", function(event){
event.preventDefault();
var dest=null;
if(($($(this.hash)).offset().top) > ($(document).height()-$(window).height())){
dest= $(document).height()-$(window).height();
}else{
dest=$($(this.hash)).offset().top;
}
$($(this.hash)).trigger("click");
$('html,body').animate({scrollTop:dest}, 500, 'swing' );
});
Try this really great and simple jQuery plugin - https://github.com/Ashwell/jquery-scrollThis
This should do what you're asking for:
self.scrollToDiv = function scrollToDiv(element,minus){
element = element.replace("link", "");
if(minus==null){
minus=0;
}
$('html,body').unbind().animate({scrollTop: $(element).offset().top+minus},'slow');
};
I'm using the BlockUI jquery plugin to show a loading message in a div until the content is loaded using JQuery's load method.
The problem is, the content I'm pulling in contains images. The load callback fires before the images are fully loaded and the div is unblocked too early.
Is there a way I can wait for all the images to load before BlockUI unblocks the div?
Alternatively, if I can override the unblocking I can do the following, using the waitForImages plugin
$('#mydiv').block({ message: 'Loading' });
$('#mydiv').load('ajax.php', function() {
$('#mydiv').waitForImages(function() {
$('#mydiv').unblock();
});
});
I reckon you should wrap your DIV #mydiv inside another DIV.
$.getJSON("http://api.flickr.com/services/feeds/photoset.gne?set=72157623591220769&nsid=21696934#N05&format=json&jsoncallback=?", function(data) {
$.each(data.items, function(i, item) {
$("<option>").attr("value", item.media.m).html('image ' + i).appendTo("#imagesLink");
});
});
$("#imagesLink").on('change', function() {
$('#mydivContainer').block({
message: 'Loading'
});
setTimeout(LoadImage, 10, this.value);
});
function LoadImage(imagePath)
{
$('#mydiv').html($('<img>').attr('src', imagePath));
$('#mydiv img').waitForImages(function() {
$('#mydivContainer').unblock();
// alert("Finished!");
});
}
#mydivContainer
{
width: 400px;
height: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://malsup.github.io/jquery.blockUI.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.waitforimages/2.4.0/jquery.waitforimages.js"></script>
choose an image <select id="imagesLink"></select>
<div id="mydivContainer">
<div id="mydiv"></div>
</div>
Or a fiddle jsFiddle where you can test it.
I have this fairly basic code within a $(document).ready listener:
$('#contact-us-button').fancybox({
padding: 20,
beforeLoad: function () {
$("#slideshow").data('nivoslider').stop();
},
afterClose: function () {
$("#slideshow").data('nivoslider').start();
}
});
$('.get-a-quote').fancybox({
padding: 20,
beforeLoad: function () {
$("#slideshow").data('nivoslider').stop();
},
afterClose: function () {
$("#slideshow").data('nivoslider').start();
}
});
Whereas the HTML:
<a id="contact-us-button" href="impianto/get-a-quote-form.php"></a>
[...]
<div class="product">
<h1>Ferrari California</h1>
<a href="dettaglio.php?id=7">
<img src="images/showcase/ferrari-california-showcase.jpg" />
</a>
<a class="get-a-quote" href="impianto/get-a-quote-form.php?id=7"></a>
</div>
Fancybox binds correctly but shows that message in place of my form. There are no conflicts among class names and IDs. Any ideas? Please note that Fancybox 1.3.4 behaves correctly with about the same code (different options).
Try adding the fancybox.ajax class to your links like
<a id="contact-us-button" class="fancybox.ajax" href="impianto/get-a-quote-form.php"></a>
and
<a class="get-a-quote fancybox.ajax" href="impianto/get-a-quote-form.php?id=7"></a>
Try using the property 'type' : 'iframe' if you want it to show another web page's content inside it like a window to the other page.
Something like this in your < head > tag:
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox({
'type' : 'iframe'
});
});
</script>
Also it might be obvious but if not... With this specific javascript enabling "fancybox" class links as popup links, your link to fire a popup would have class set as matching the class name in the javascript above, something like:
Link