Search jQuery

jQuery Forum

Screen name:
bundy.back

bundy.back's Profile

13 Posts

22 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

image preloading -- advice neeed
[6Replies]
- 10-Jun-2020 04:40 AM
- Forum: Getting Started
Hi,
I have a page which features fifty small ( < 10KB) images. They need to all be available to a script which makes them visible according to class.

Any recommendations about jQ plugins, or the best way?...
maybe this, in the head of the page?

$(window).load( function(){
 $.preloadImages = function() {
 for (var i = 0; i < arguments.length; i++) { $("<img />").attr("src", arguments[i]); }

 $.preloadImages("folder1/img1.jpg",// "folder1/img50.jpg");
 };
});

another Math.random() problem
[5Replies]
- 29-Mar-2020 05:37 PM
- Forum: Getting Started
I'm using a Math.random() function which determines the length of a delay:
      function dl() {
            var pause = [1600, 1600, 2400, 2000]
            dlay = Math.floor(Math.random() * pause.length); return pause[dlay]; }
which works fine.
Then I want to use another function with different delay possibilities:
      function newdl() {
var paws = [400, 400, 300, 200]
dly = Math.floor(Math.random() * paws.length); return paws[dly]; }
--but this newdl() returns values from dl() !

I've tried using Math.ceil instead of Math.floor in the second function, same result.
What am I missing?

problem with a switch function
[1Reply]
- 19-Mar-2020 11:34 PM
- Forum: Getting Started
Hi all:

I have a function which returns randomly either 6, 7 8 or 9.
Then there's a switch function which does different things for each number.
Problem is, connecting the random results to the switch function.

Currently, Firefox is saying "unreachable code after return statement", but I don't understand how FF's problem with "code after a return statement" applies.

Here's the code:
2. function fastLine1() {
3. var poss = [7,7,7,8,8,8,6,9]
4. result = Math.floor(Math.random() * poss.length); return poss[result];
5. var m = 7
6. var n = 8
7. var p = 6
8. var q = 9
9. var r = (m + n + p + q)
10. switch(r) {
11. case 6:
12. hideFast('fast1'); hideWen2('D1'); yin6(); return false;
14. break
15. case 7:
16. hideFast('fast1'); hideWen2('D1'); yang7(); return false;
18. break
19. case 8:
20. hideFast('fast1'); hideWen2('C1'); yin8(); return false;
21. break
22. default:
23. hideFast('fast1'); hideWen2('C1'); yang9(); return false; }
24. }
26. There are more functions in each case, what's above is there to show each case is well-formed.

problem with animate() and " + "
[2Replies]
- 22-Aug-2019 06:01 PM
- Forum: Getting Started
Hi folks,

I'm trying to consolidate a lot of individual functions which scroll the content of a div. Here's an example:

$('#updown').animate( {marginTop:'-40rem'}, 2000);

I've tried several versions of

function upIt(n,t) {
$("#updown").animate( {"marginTop:" + " 'n' " "rem"}, "t");
}

but get error messages about "+". What am I missing ?

cheers.

math.random returns last function in array
[2Replies]
- 22-Jul-2019 06:57 AM
- Forum: Getting Started
Hi,

strictly this is a javascript question, but am posting here because the functions involved use jQuery.

I've made a function which is supposed to return a randomly-selected function from an array of five.
I've been testing by changing the order in the array, clearing cache, using different browsers, but I'm always getting the last function in the array. "Always" meaning ten iterations of clearing cache and histpry, and trying again.

function jun12() {startEm('june12','welcome12')}
function jul01() {startEm('july1','welcome1')}
function jul02() {startEm('july1_2','welcome1_2')}
function jul17() {startEm('july1_17','welcome1_17')}
function julpass() {startEm('july_pass','welcpass')}

function doHK() {
var a = jun12()
var b = jul01()
var c = jul02()
var d = jul17()
var e = julpass()
var hk = [a,b,c,d,e]
jacket = Math.floor(Math.random() * hk.length); return hk[jacket];
}

online

Any ideas?

changing saturation
[2Replies]
- 01-Jan-2019 09:47 AM
- Forum: Getting Started
Hi there,

I have a page where the viewer can change the background of the window--(actually a div, #bigbg, above the html background)--by removing and adding a class, eg,
.gradblk {background: linear-gradient(#000000, #36393C, #909396); background-attachment:fixed; }
with
function showBg(grad) { $('#bigbg').removeClass().addClass(grad); }
There's a choice of six colour gradients.

The viewer also has the option of varying the opacity of the new background with a choice of five levels: function opBg(n) { $('#bigbg').css('opacity', '0.' + n) } .

Instead of varying opacity, it would be preferable to vary saturation. The usual method seems to be to create a class for the desired level of saturation, eg .halfsat { filter: saturate(.5) }
and then applying thIs with removeClass().addClass().
If my logic's correct, this would mean creating five combined colour-gradient+opacity classes for each of the six colour gradients.

A function to change saturation would be good, something like
function satBg(n) { $('#bigbg').css( filter:saturate(n) ) }
--but, depending on where I put the apostrophe marks, I either get error messages, or else it runs but does nothing.

Any ideas? ( I don't want a color picker, too many choices).

Cheers...

increase/decrease image size
[3Replies]
- 28-Nov-2018 02:36 AM
- Forum: Getting Started
Can anyone recommend a plugin that toggles increase/decrease image size?

cheers...

problem using draggable()
[13Replies]
- 23-Jul-2018 01:47 AM
- Forum: Getting Started
Hi,

I have a series of pages which are ajax-loaded into a column.
Behind the column is a div of identical width which provides a semi-transparent background.

I prefer to get rid of scrollbars, and give the viewer the means to scroll: using draggable-y.

Now: if i use on the imported pages either margins or padding on the left or right, there's a non-scrollable area: and a mousedown in this area overlays the whole column with a blue colour.

You can see the effect here

Short of recoding all the pages with "white-space:pre-wrap", can anyone suggest a solution?

Cheers

z-index and styling <audio> tag
[1Reply]
- 15-Jun-2018 04:09 AM
- Forum: Getting Started
Hi:
does anyone know , before I start exploring:

do applications such as jPlayer, mediaElement.js, and there must be others... do they actually allow for adding a z-index to the styling? there are examples where the container is given relative positioning, but no examples with z-index. Any suggestions welcome...

cheers.

delaying a css rotate
[3Replies]
- 11-Jun-2018 10:23 PM
- Forum: Getting Started
Hi,
I want to rotate an element, but after other animations performed on that element with jQ.
It's not working so far...

css:
@keyframes turn {
    from { transform: rotate(360deg); }
    to { transform: rotate(0deg); }
    }

.turn    { animation-name:turn; animation: rotating 2s linear infinite; }

js:
function doEl() {
    do_jQstuff();
     setTimeout( function() { $(‘#el’).addClass(‘turn’) }, 4800 );
}

what's missing? misplaced?

cheers

stopping an animation after one iteration
[7Replies]
- 23-Jan-2018 09:28 PM
- Forum: Getting Started
Hi,

I can’t figure out how to cancel an animation after a first iteration ( using old-fashioned jQ animate() ) .

The animation works like this: click on the image and the image is re-sized and re-positioned.

I can see two ways which could stop further, unwanted, clicking:

change the z-index of the image, so that it goes down the stack, behind a transparent screen--(the screen is integral to the page anyway, it's not just for this animation);
or

wrap the function with one{), like $(‘#myimage').one( ‘click’, function() { myfunction() }};

I can’t get either approach to work.

With the z-index method, adding zIndex: ’-=2’ to the animation has no effect (nor does any other minus quantity).

Using ‘one()’, I get strange behaviour: the first click does nothing; a second click gives two iterations of the animation; and further clicks give more iterations.

Code follows: I’ve left the css inline for ease of diagnosis: moving it to stylesheet doesn’t affect outcomes.

image:

<img id=“oldpic”

src="pix/old.jpg"

style="position:relative; top:-65px; right:330px;

z-index:41;

width:178px; height:125px;"

onmouseover=“$(‘#oldpic’).css('cursor', 'zoom-in');"

onClick=“bigPic()” />

basic animation:

function bigPic() {

$(‘#oldpic’).animate( {height:'302', width:'424', top:'-=96', right:'-=125'}, 2400);

}

trying to change z-index—with the transparent screen at z-index:40;

function bigPic() {

$(‘#oldpic’).animate( { zIndex: ‘-=-2’, height:'302', width:'424', top:'-=96', right:'-=125' }, 2400);

}

trying one():

$(‘#oldpic’).one( ‘click’, function() {

$(‘#oldpic’).animate( {height:'302', width:'424', top:'-=96', right:'-=125'}, 2400);

});

What am I missing?

Adding pauses to a function
[2Replies]
- 03-Jan-2018 05:05 AM
- Forum: Getting Started
Hi:

the following function shows the text associated with each of two instances of a class--hover on either instance of 'myclass' and you'll get the text associated with it, and the text associated with its neighbour:
Code:
```
function showBoth() {
	$('.myclass').hover(function(){
		$(this).find('.mytext').visibility('visible'); 
	});
	$('.pair1').hover(function(){ 
		$(this).next().find('.mytext').visibility('visible');		 
	});
	$('.pair2').hover(function(){
		$(this).prev().find('.mytext').visibility('visible');
	});
}
```
Both texts pop in simultaneoulsy.

I've been trying to slow it down, so that there's a pause before the first test appears (say, 400ms); then maybe another pause before the second text appears.

For a start, I tried wrapping the whole function in a setTimeout, as a way of getting the initial pause. The result: no pause, but the original function within the setTimeout works. The texts pop in. (I've also tried using a 2000ms pause, to make sure I wasn't missing what was going on).

What am I missing?

Cheers

children behaving strangely
[2Replies]
- 25-Nov-2017 10:57 PM
- Forum: Getting Started
On a page which offers the viewer a choice of colours for various elements, I have this structure for changing the background:

Two functions are invoked:

showBg()
changes the gradient on the html tag;

showLink()
shows a link to loading a new page about the chosen colour: this is where there’s a problem.

function showLink(child) {

$('.abt').fadeOut(400);

$('#bgswatch a:nth-child(' + child + ')' ).delay(1200).fadeIn(1200);

}

The function works fine—but the child numbering is crazy.

When I count down the children of #bgswatch”, I get to ’13’ as the correct child number for the corresponding link, "about blue".

But what works is ’17’ And it’s similar for the other five links. What am I missing?

view online > choose "ask" > choose " colour" > choose "background".

Code below ( no comments right now about using “onclick”, ok? ):



<a href="#" onclick="showBg('gradblu'); showLink('17');"><img src="img/swatch/blu.gif" /></a>

<a href="#" onclick="showBg('graddun'); showLink('18');"><img src="img/swatch/dun.gif" /></a>

<a href="#" onclick="showBg('gradblk'); showLink('19');" ><img src="img/swatch/blk.gif" /></a>

<a href="#" onclick="showBg('gradwhi'); showLink('20');"><img src="img/swatch/whi.gif" /></a>

<a href="#" onclick="showBg('gradred'); showLink('21');"><img src="img/swatch/red.gif" /></a>

<a href="#" onclick="showBg('gradgrn'); showLink('22');"><img src="img/swatch/grn.gif" /></a>

<!—

the next series of links are relevant to the problem because they’re children of “#bgswatch”;

opBg() changes the opacity on a grey background, effectively changing the density of the gradient on the html tag.

—>

<a class="faux" style="position:relative; left:-42px;">background:</a>

<a href="#" onclick="opBg(8);”>a hint</a>

<a href="#" onclick="opBg(6);”>low</a>

<a href="#" onclick="opBg(4);”>medium</a>

<a href="#" onclick="opBg(2);”>high</a>

<a href="#" onclick="opBg(0);”>max</a>

<!—

this series of links are displayed by showLink(); they allow the user to load a page with information about the colour chosen; none is active.

—>

<a href="#" class="abt nun" onclick="loadIt('abtblue');">about blue</a>

<a href="#" class="abt nun" onclick="loadIt('abtyellow');">about yellow</a>

<a href="#" class="abt nun" onclick="loadIt('abtblack');">about black</a>

<a href="#" class="abt nun" onclick="loadIt('abtwhite');">about white</a>

<a href="#" class="abt nun" onclick="loadIt('abtred');">about red</a>

<a href="#" class="abt nun" onclick="loadIt('abtgreen');">about green</a>

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend