I’m using royalslider. I have a function which allows navigation depending on cursor position.
}).data('royalSlider');
slider.ev.on('rsSlideClick', function(e, origEvent) {
var width = jQuery('.royalSlider').data('royalSlider').width;
if (origEvent.pageX < (width/2)) {
slider.prev();
$('.rsOverflow').css({
'cursor': 'url(images/prevg.png), default'
});
} else {
slider.next();
$('.rsOverflow').css({
'cursor': 'url(images/nextg.png), default'
});
};
});
});
How can I modify this so that cursors change on hover - not just after click. Thanks
That would work if you change the css at that point trough javascript (jQuery).
For my solution you would hav to implement jQuery in your html before you use your following script:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Than the code below would change the cursor
var slider = $('#full-width-slider').royalSlider({
autoHeight: true,
///// more options /////
navigateByClick: false,
prefix: 'image-'
},
}).data('royalSlider');
slider.ev.on('rsSlideClick', function(e, origEvent) {
var width = jQuery('.royalSlider').data('royalSlider').width;
if (origEvent.pageX < (width/2)) {
slider.prev();
// change css to prevg.png
$('.rsOverflow').css({
"cursor" : "url('images/prevg.png'), auto !important;"
});
} else {
slider.next();
// change css to nextg.png
$('.rsOverflow').css({
"cursor" : "url('images/nextg.png'), auto !important;"
});
};
});
});
Now that I saw your Example. I can't see a simple way of using the existing functions. Now you could try this:
var mContainer = $('body'),
left = $(window).width() / 2,
x,
y;
$(window).mousemove(function(evt){
x = (evt.pageX - mContainer.offset().left) + $(window).scrollLeft();
if(x < left) {
$('.rsOverflow').css({
"cursor" : "url('images/prevg.png'), auto !important;"
});
} else {
$('.rsOverflow').css({
"cursor" : "url('images/nextg.png'), auto !important;"
});
}
});
I am calculating the offset position of the cursor on the X-Axis. Now you can check if the cursor is on the left part of the site or on the right part. An can change the cursor accordingly. Hope that helps!
I believe the best way is just to use two overlaying divs and remove them on touch as Yuri suggested. As the
hover event is not written into the code its difficult to detect.
<script type="text/javascript">
jQuery(function($){
if(typeof ontouchstart !== 'undefined'){
$('.prev1, .next1').remove();
}
});
</script>
Related
I am trying to replicate the scrolling effect from here: http://www.altisliferpg.com/
I have a feeling that they are using a heavily modified version of Bootstrap Navbar, which I have taken from here: http://www.enjin.com/forums/page/1/m/10826/viewthread/8514993-boot-strap-30-navbar-full-module and have changed it to fit into my specific case.
How would I make it so when you scroll down the page, the bar on the top gets "smaller" and scrolls along with the page as you scroll? Thanks
You can use css transitions for the height, font size and whatever else you want changed. Then simply set a scroll listener, which adds a class to the header so the size changes. Quick (and very ugly) example. jsFiddle
$(window).scroll(function () {
if ($(this).scrollTop()) {
$('#header').addClass('small');
}
else {
$('#header').removeClass('small');
}
});
Maybe you should detect the scroll event of the window, after that, set the position of the navbar to fixed and then, perform the animation. Here's an example of the javascript part and a link see it in action:
$(function(){
var performingDownAnimation = false,
performingUpAnimation = false;
var performScroll = function(){
if($("body").scrollTop() > 0) {
if(performingUpAnimation) {
$('#logo').stop();
performingUpAnimation = false;
}
if(!performingDownAnimation){
$('#navbar').addClass('navbar-fixed');
$('#logo').animate({ 'font-size': "12px" }, 1000, function(){
performingDownAnimation = false;
});
performingDownAnimation = true;
}
}else if($("body").scrollTop() == 0){
if(performingDownAnimation) {
$('#logo').stop();
performingDownAnimation = false;
}
if(!performingUpAnimation){
$('#navbar').removeClass('navbar-fixed');
$('#logo').animate({ 'font-size': "48px" }, 1000, function(){
performingUpAnimation = false;
});
performingUpAnimation = true;
}
}
}
$(document).on('scroll', performScroll);
});
On scroll event and position fixed
I edited my response for adding support for the "up" direction too. About using bootstrap for the animation, I have no idea how to do it, and I think it can't be done, because bootstrap is based mainly on applying CSS classes to different elements. CSS classes are discrete, but you are asking for animating something numerical, as the font-size property is. As much, you could create an animation that looks "staggered".
I am using a jQuery script for an animated circular progress bar. Right now the progress bar works when the start button is clicked. I want this progress bar to start when the user scrolls to the div id "stats" automatically. How can this be done?
I have made a fiddle to show what I have so far:
https://jsfiddle.net/rpkcw236/9/
jQuery(document).ready(function($){
$('.pie_progress').asPieProgress({
namespace: 'pie_progress',
barsize: '2',
trackcolor: '#ececea',
barcolor: '#e6675f'
});
$('#button_start').on('click', function(){
$('.pie_progress').asPieProgress('start');
});
$('#button_finish').on('click', function(){
$('.pie_progress').asPieProgress('finish');
});
$('#button_go').on('click', function(){
$('.pie_progress').asPieProgress('go',50);
});
$('#button_go_percentage').on('click', function(){
$('.pie_progress').asPieProgress('go','50%');
});
$('#button_stop').on('click', function(){
$('.pie_progress').asPieProgress('stop');
});
$('#button_reset').on('click', function(){
$('.pie_progress').asPieProgress('reset');
});
});
Here is the link to the script I am using:
http://www.jqueryscript.net/loading/Animated-Circle-Progress-Bar-with-jQuery-SVG-asPieProgress.html
You need to break it up into 2 steps:
1) get the distance of the dynamic div from the top.
2) Once you get the top value pass this top value to the code in step2.
Step1: Get the dynamic div position from the top (e.g. #my-dynamic-div)
var $output = $('#output');
$(window).on('scroll', function () {
var scrollTop = $(window).scrollTop(),
elementOffset = $('#my-dynamic-div').offset().top,
distance = (elementOffset - scrollTop);
$output.prepend('<p>' + distance + '</p>');
});
OR
E.G: var distance = $("#MyDiv").offset().top
ref: http://jsfiddle.net/Rxs2m/
Step2: Pass the distance value here instead of the hard coded value 350.
flag=true;
$(window).scroll(function() {
st=$(window).scrollTop();
$('#topscroll').html(st)
if(st>350){
if(flag)
$('.pie_progress').asPieProgress('start');
flag=false;
}
});
Good luck & hope this helps.
Try using .scrollTop() , .offset().top Element.getBoundingClientRect() of #progress element, .off()
$(window).on("scroll", function() {
if ($("#progress")[0].getBoundingClientRect().top < 150) {
$('.pie_progress').asPieProgress('start')
$(this).off("scroll")
}
})
jsfiddle https://jsfiddle.net/rpkcw236/29/
I have a div that implements Scriptperlative's CursorDivScroll script. How can I implement two customized cursors in the div that is using the script; one that shows when scrolling down and one that shows when scrolling up? Here is the javascript and HTML that I have thus far. The javascript is just the CursorDivScroll script.
<script type='text/javascript' >
$(document).ready(function() {
CursorDivScroll( 'repertoirescroll', 40, 40 ).noHorizontal();
});
</script>
#repertoirescroll {
cursor: url(../images/arrow.png), auto;
position:relative;
}
Thanks for any help in advance. I think I need to implement an if statement that says if mousemove = mousedown use this cursor else if mousemove = up use this cursor...? Not sure how to do this.
Checking if the scrollTop is decreasing or increasing should tell you if it's scrolling up or down, and then just set the cursor based on that when scrolling, and use a timeout to reset the cursor when scrolling stops :
var top=0, timer;
$(window).on('scroll', function() {
clearTimeout(timer);
var scrollTop = $(this).scrollTop(),
cursor = scrollTop > top ? 'pointer' : 'wait';
$('body').css('cursor', cursor);
top = scrollTop;
timer = setTimeout(function() {
$('body').css('cursor', 'default');
}, 500);
});
FIDDLE
I'm creating a gallery for a responsive lay-out - I am using jQuery Riding Carousels for the thumbnails.
When the window is re-sized to smaller than 1024px, the orientation of the carousel needs to change from vertical to horizontal ...
I'm doing it like this at present:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
vertical: $(window).width() > 1008,
scroll: 3,
});
});
</script>
... the JS simply hooks up a class, but it doesn't do so if you re-size the browser window by dragging it - you need to refresh the page.
Is there a way to destroy the script and re-initialize it on the fly?
Please check Working exmpale: http://codebins.com/bin/4ldqpba/1/Jcarousel%20vertical%20on%20resize
Tested in all browsers and works perfectly fine. bounty is mine :)
In the example i have give threshold widht 350 you can test it by resizing the result pane and as soon as you start havin horizontal scroll bar it will converted to vertical.
1 possible issue depending on your requirement is if you ahve any handlers on images they will be gone after changing display way. the solution for it is wrap your #mycarousel in a div and use Jquery delegate to handle events on the wrapper so no issue with events also.
Let me know if you come under this situation.
Following code is exactly as per your need.
When the window is re-sized to smaller than 1024px, the orientation of the carousel needs to change from vertical to horizontal .
which is revers form the example as for me it makes more sense if width is less make it vertical.
jQuery(document).ready(function() {
var widthCheck = 1008;
var resizeTimer = null,
verticalFlg = $(window).width() > widthCheck;
var obj = jQuery('#mycarousel').clone();
$('#mycarousel').jcarousel({
vertical: verticalFlg,
scroll: 2
});
jQuery(window).resize(function() {
resizeTimer && clearTimeout(resizeTimer); // Cleraring old timer to avoid unwanted resize calls.
resizeTimer = setTimeout(function() {
var flg = ($(window).width() > widthCheck);
if (verticalFlg != flg) {
verticalFlg = flg;
$('#mycarousel').closest(".jcarousel-skin-tango").replaceWith($(obj).clone());
$('#mycarousel').jcarousel({
vertical: verticalFlg,
scroll: 2
});
}
}, 200);
});
})
Or you can look at the source. I'm guessing you are using version 0.2
Looking at the source
https://github.com/jsor/jcarousel/blob/0.2/lib/jquery.jcarousel.js
we can see that there are two lines (80 and 81) which are only done in object init. Those lines are
this.wh = !this.options.vertical ? 'width' : 'height';
this.lt = !this.options.vertical ? (this.options.rtl ? 'right' : 'left') : 'top';
also this line at 149
if (!this.options.vertical && this.options.rtl) {
this.container.addClass('jcarousel-direction-rtl').attr('dir', 'rtl');
}
It might be if you add those to the callback you will get better results.
You could also try version 0.3 of the plugin.
Prior answer:
Can't test it myself right now, but try this:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
vertical: $(window).width() > 1008,
scroll: 3,
reloadCallback: function () {
this.options.vertical = $(window).width() > 1008;
},
});
});
</script>
<script type="text/javascript">
jQuery(document).ready(function() {
var sizeCheck = function() {
return $(window).outerWidth() >= 1024
}
jQuery('#mycarousel').jcarousel({
vertical: sizeCheck(),
scroll: 3,
});
var jCarousel = jQuery('#mycarousel').data('jcarousel');
window.onresize = function() {
jCarousel.options.vertical = sizeCheck(); // maybe you have to access the option through jCarousel.plugin.options.vertical
jCarousel.reset();
}
});
</script>
Maybe this works.
I haven't tested the following code, but I am fairly sure the following code should work:
<script type="text/javascript">
var carousel;
jQuery(window).resize(function() {
if(carousel !== undefined) carousel.destroy();
carousel = jQuery('#mycarousel').jcarousel({
vertical: $(window).width() > 1008,
scroll: 3,
});
});
</script>
or even better something along the lines of:
<script type="text/javascript">
var carousel;
jQuery(document).ready(function() {
carousel = jQuery('#mycarousel').jcarousel({
vertical: $(window).width() > 1008,
scroll: 3,
});
});
jQuery(window).resize(function() {
//NOT SURE WHICH OF THE BELOW LINES WOULD WORK, try both and check which works
carousel.options.vertical = $(window).width() > 1008;
carousel.vertical = $(window).width() > 1008;
carousel.reload();
});
</script>
If it does not, you should add a console.log(carousel) to your code and check out what the prototype is of the outputted value (check F12). There should be something along the lines of destroy (or alternatively check console.log($.jcarousel())).
It looks like it keeps adding a new newHeight and a newDistance each time i click, I am trying to save original height with a global var at the top and using data to do that but i get weird results, basically i should be able to reset newDistance and newHeight to first original values as per before to run the lot with a click but it doesn't and i get new added values each time i click breaking my layout as a result:
talents = $(".talenti");
filter = $(".filtra");
genHeight = $("#container").data($("#container").height());
filter.click(function(e) {
e.preventDefault();
if (talents.hasClass("opened")) {
$(".nasco").slideToggle();
$("#wrapNav").slideToggle("10", "linear");
talents.removeClass('opened');
filter.addClass('opened');
$("#container").css("height", genHeight);
} else {
filter.addClass('opened');
};
if (filter.hasClass("opened")) {
$("#wrapNav").slideToggle("10", "linear", function(){
$("#sliding-navigation").slideToggle();
var newHeight = $("#container").height() + $("#wrapNav").outerHeight(true);
var newDistance = newHeight - $("#container").height() + 22;
$("#container").animate({height: newHeight}, 50,function(){
$(".box").animate({top: newDistance});
});
});
}
});
talents.click(function(e) {
e.preventDefault();
if (filter.hasClass("opened")) {
$("#sliding-navigation").slideToggle();
$("#wrapNav").slideToggle("10", "linear");
filter.removeClass('opened');
talents.addClass('opened');
$("#container").css("height", genHeight);
} else {
talens.addClass('opened');
};
if (talents.hasClass("opened")) {
$("#wrapNav").slideToggle("10", "linear", function(){
$(".nasco").slideToggle();
var newHeight = $("#container").height() + $("#wrapNav").outerHeight(true);
var newDistance = newHeight - $("#container").height() + 156;
$("#container").animate({height: newHeight}, 50,function(){
$(".box").animate({top: newDistance});
});
});
}
});
Anyone?
So, based on the code I could download about 20min ago from your test site, I managed to get it working with the following code:
$(document).ready(function(){
// placeholder to contain the original height...
var original_height = 0;
talents = $(".talenti");
filter = $(".filtra");
filter.click(function(e){
e.preventDefault();
if (filter.hasClass('opened')){
filter.removeClass('opened');
// toggle the wrapping, just with a zero top coordinate...
$("#wrapNav").slideToggle("10", "linear", function(){
$("#sliding-navigation").hide();
$(".box").animate({top: '0px'});
});
// reset to the original height...
$("#container").height(original_height);
}
else {
// get the original height if it's not already set...
if (original_height == 0)
original_height = $("#container").height();
filter.addClass('opened');
if (talents.hasClass("opened"))
{
$(".nasco").hide();
$("#wrapNav").slideToggle();
talents.removeClass('opened');
}
// toggle the wrapping with a height of the nav as top coordinate...
$("#wrapNav").slideToggle("10", "linear", function(){
$("#sliding-navigation").slideToggle(true, function(){
// need the height of the nav before we know how far to move the boxes...
var newHeight = $("#wrapNav").outerHeight(true);
$(".box").animate({top: newHeight});
// set the container's new height, much like you had...
$("#container").height(original_height + newHeight);
});
});
}
});
talents.click(function(e) {
e.preventDefault();
if (talents.hasClass('opened')) {
talents.removeClass('opened');
// toggle the wrapping, just with a zero top coordinate...
$("#wrapNav").slideToggle("10", "linear", function(){
$(".nasco").hide();
$(".box").animate({top: '0px'});
});
// reset to the original height...
$("#container").height(original_height);
}
else {
// get the original height if it's not already set...
if (original_height == 0)
original_height = $("#container").height();
talents.addClass('opened');
if (filter.hasClass("opened"))
{
$("#sliding-navigation").hide();
$("#wrapNav").slideToggle();
filter.removeClass('opened');
}
// toggle the wrapping with a height of the nav as top coordinate...
$("#wrapNav").slideToggle("10", "linear", function(){
// need the height of the nav before we know how far to move the boxes...
$(".nasco").slideToggle(true, function(){
var newHeight = $("#wrapNav").outerHeight(true);
$(".box").animate({top: newHeight});
// set the container's new height, much like you had...
$("#container").height(original_height + newHeight);
});
});
}
});
});
A few points adding food for thought:
I simplified the multiple if statements to make it easier to understand and process
I used hide() to avoid messy animation problems if you clicked on FILTER multiple times in a row
I only adjusted the top coordinates of the boxes to achieve this
I would have preferred to contain the boxes in a more general container, allowing for easier animation and management, but I understand that wordpress doesn't always give you the most room to work, so this should get you on your way!
It might not be completely what you're looking for in your animation, but it's a working example of the code you had and should get you 90% of the way...hope this helps! :)
What about using the data collection of the container element rather than a global variable i.e. at the top record the height
$("#container").data('height', $("#container").height());
then to use
$("#container").data('height');
i.e. to reset the height
$("#container").css({height: $("#container").data('height') });
I feel a bit suspicious about how the global variable is working. Worth a try maybe