trying to get this z-sorting to work proper.
What i want to achieve is some kind of looping/carousel. When a ".area" is getting clicked it should be placed at the very bottom z-wize. And when all elements have been set to bottom they should start to be placed up again.Dont need to be animated. Just need help with the logic.
Really like an carousel but z-wise. Any ideas? http://jsfiddle.net/EjpSu/8/
var z = 1;
$(".area").each(function(e) {
z++;
$(this).css("z-index",z)
});
$(".area").click(function(){
$(this).css("z-index",z--)
})
Try subtracting the total # of area divs from z-index (updated to keep z-index non-negative):
var n = $(".area").length;
$(".area").click(function(){
var z = $(this).css("z-index") - n;
if(z === 0) {
reset();
} else {
$(this).css("z-index", z);
}
});
function reset() {
var z = n;
$(".area").each(function(e) {
$(this).css("z-index",z);
z++;
});
};
reset();
Demo: http://jsfiddle.net/verashn/mTKRL/
Related
I have the below script which automatically scrolls right to slide the images. Unfortunately I'm not able to reset the counter.
I've done a condition to see if the scroll is finished, and if it is then reset the width of the scroll, but it seems to not be working. However, if instead of reseting the scroll, I place an alert - then resetting the width works, but scrolling is still not working.
All is working good until the for loop ends and I'm not able to reset the scroll to the beginning.
Here is the script:
<script>
$(function ($) {
$('#headw').on('scroll', function () {
if($(this).scrollLeft() + $(this).innerWidth() >= $(this)[0].scrollWidth) {
// RESET THE COUNTER
$("#headw").animate({
scrollLeft: "+="+width+"px",
}, 3000);
}
else if($(this).scrollLeft() === 0) {
// Remove this part if you don't want your messages hidden again
}
else {
}
})
});
function doItAll() {
// put state variables other than the actual loop control here
function doTheLoop() {
var i;
var count;
var total = <?php echo $row; ?>;
var tx = total + 1;
for (i = 0; i < total; i++) {
var width = $(".divisorx").outerWidth();
count = count + width;
$("#headw").animate({
scrollLeft: "+="+width+"px",
}, 3000);
}
return(false); // done running the loop
}
while (doTheLoop()) {}
// do some things after the loop
}
doItAll();
</script>
http://csdev.cegep-heritage.qc.ca/students/cguigue/primordialCasino/game.html
supposed to click on the spin button and it should start the wheel spinning as well as changed the text on the screen in my displayArea, though when i click spin nothing happens,
getting undefined type error on the following code and not sure as to why
$('#wheel').rotate({
angle: 0,
animateTo: 2520,
duration: 4000
});
it says it isn't a function... :S
also...
if(currentGame.place == 0 && cellText == 0)
{
currentGame.setBet(betAmount * 40);
}
function rouletteGame(num, even, col)
{
this.place = num;
this.isEven = even;
this.colour = col;
this.win = 0;
this.hasBet = false;
this.setBet = function(bet)
{
this.win += bet;
this.hasBet = true;
}
says currentGame.place is undefined
but im initializing it in a for loop and its calling my above function...
for (var i = 1; i < rouletteWheel.length; ++i)
{
place = i;
if(i % 2 == 1)
{
isEven = false;
}
else
{
isEven = true;
}
if( i = red[count])
{
colour = "red";
++count;
}
else
{
colour = "black";
}
rouletteWheel[i] = new rouletteGame(place, isEven, colour);
}// for ()
.rotate() is not a built-in JQuery plugin. You will need to download or link the plugin in order for it to work. Add the following in your element of the HTML:
<script type="text/javascript" src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js"></script>
and see if that helps. with the first part of your problem.
As for the second part, I'm not sure if Javascript works this way too (I think it does), but you should create the new roulette game outside of the loop, and only change the values inside. Otherwise you are only creating a new roulette game for use within the scope of the for loop, not outside.
May want to check the documentation for this, as I'm not 100% positive about it. I just know it's how most other languages work.
I'm trying to create a floating menu (#quickmenu in left hand sidebar of bottom link) that stops at #weather whilst also re-calculating the bottom = $(\'#weather\').offset().top; every 0.5 seconds...
Page to test: Bristol International Jazz & Blues Festival 2014 | Festival Archive
The recalculation is key as I use expandable content in the main body and because without recaculating on slower connections it doestn't work. I need only #weather.offset.top to be recalculated every 5 seconds, not the whole script otherwise it refreshes and flickers...
I've tried to do code it myself and it's not working, it's 99% not coded correctly but can't figure out what's going wrong? The logic seems to be correct though... if (y >= top && z <= bottom) { ....
<script type="text/javascript">
$(document).ready(function () {
top = $('#quickmenu').offset().top;
var didScroll = false;
$(window).scroll(function() {
didScroll = true;
});
setInterval(function() {
if ( didScroll ) {
didScroll = false;
bottom = $('#weather').offset().top;
y = $(this).scrollTop();
z = y + $('#quickmenu').height();
if (y >= top && z <= bottom) {
// if so, add the fixed class
$('#quickmenu').addClass('fixed');
} else if(z > bottom) {
// otherwise remove it
$('#quickmenu').removeClass('fixed').addClass('absolute');
} else {
// otherwise remove it
$('#quickmenu').removeClass('fixed');
}
}
}, 500);
});
</script>
Thanks for the input, and apologies for lack of clarity within the question. I have fixed my issue by taking another approach. I hope that this is less resource heavy?
<script type="text/javascript">
(function () {
var s = document.querySelector(\'#event-info\').style;
s.overflow = \'inherit\';
s.height = \'auto\';
})();
window.updateQuickMenuPos = function () {
var menu = document.querySelector(\'#quickmenuwrapper\');
var scroll_pos = document.body.scrollTop;
var menu_pos = menu.offsetTop + 10;
var weather = document.querySelector(\'#weather\');
var pos = (scroll_pos - menu_pos);
// min height
if (pos < 0) {
pos = 0;
}
// max height
if (menu_pos + menu.offsetHeight + pos > weather.offsetTop) {
pos = weather.offsetTop - menu.offsetHeight - menu_pos;
}
var s = menu.style;
s[\'webkitTransform\'] = s[\'mozTransform\'] = s[\'transform\'] = \'translateY(\' + pos + \'px)\';
};
jQuery(document).scroll(window.updateQuickMenuPos);
</script>
I've got a set of elements and I don't want to show them all at once.
My problem is that I've got to use this a series of times in the same page.
Do you guys know jQuery plugin that does what I've written?
jQuery(function($) {
$lis = $('.addfilter');
min = 2;
max = $lis.length;
var visible = min;
function showUpToIndex(index) {
$lis.hide();
$lis.slice(0, index).show();
}
function disableButtons(){
if (visible >= max){
visible = max;
$('#more').hide();
}
else
{
$('#more').show();
}
if (visible <= min){
visible = min;
$('#less').hide();
}
else
{
$('#less').show();
}
}
showUpToIndex(visible);
disableButtons();
$('#more').click(function(e) {
e.preventDefault();
visible = visible + 5;
disableButtons();
showUpToIndex(visible);
});
$('#less').click(function(e) {
e.preventDefault();
visible = visible - 5;
disableButtons();
showUpToIndex(visible);
});
});
Here is a working example:
http://jsfiddle.net/cUUfS/179/
Thanks!
Please try these,
http://viralpatel.net/blogs/dynamically-shortened-text-show-more-link-jquery/
https://github.com/mfarid/readmore-readless
This may help I hope
I have a variable number of promotional items (panels) that are in a sliding belt, that should be set to the width of a panel (300px) multiplied with the amount of panels.
It alerts the correct beltsize. With fixed numbers the slider works too. I suspect the error to be in the if/else if part. I am not even sure this is valid Javascript Syntax.
Any hint is appreciated.
$(window).ready(function(){
var whichpanel = 1;
var panels = $(".panel").length;
var beltsize = panels*300;
$('.belt').css({'width':beltsize});
});
$(window).ready(function promoslider(){
if (panels>whichpanel){
$('.belt').delay(7000).animate({'left':'-=300'}, 500);
whichpanel += 1;
}
else if (panels=whichpanel){
$('.belt').delay(7000).animate({'left':'0'}, 500);
whichpanel = 1;
}
setTimeout(promoslider, 0);
});
promoslider;
UPDATE! Here is the code that works for me now (http://jsfiddle.net/zr5Nd/10/):
$(window).ready(function () {
var whichpanel = 1;
var panels = $(".panel").length;
var beltsize = panels * 300;
$('.belt').css({
'width': beltsize
});
function movingdiv() {
if (panels > whichpanel) {
//alert('Panels:' + panels + '/whichpanel:' + whichpanel);
$('.belt').delay(1000).animate({
'margin-left': '-=300px'
}, 500);
whichpanel += 1;
} else if (panels == whichpanel) {
//alert('Panels:' + panels + '/whichpanel:' + whichpanel);
$('.belt').delay(1000).animate({
'margin-left': '0'
}, 500*panels);
whichpanel = 1;
} else {
alert('3');
}
setTimeout(movingdiv, 0);
}
setTimeout(movingdiv, 0);
});
You need to use the equality/identity operators (==/===) instead of the assignment operator = in your else if statement, e.g.
else if (panels == whichpanel){
$('.belt').delay(7000).animate({'left':'0'}, 500);
whichpanel = 1;
}
Also, I believe promoslider; is supposed to be promoslider();.
You should put the call of promoslider into $(window).ready as well, as the function does not yet exist otherwise. Plus you have to do the call this way promoslider(), promoslider alone will not result in a call.
And of course you have to use the equals-operator == instead of the assign-operator = in your if else-statement.
use panels === whichpanel instead of panels=whichpanel
variables whichpanel, panels have lost their scope in the if/else if part.