HELP: making javascript page effects work properly

Memory
Guest

« on: September 08, 2023 @896.32 »

theres quite a lot of questions i think of asking whenever i run into some problems that dont seem to have a lot of answers out there heh. my latest question has to do with javascript page effects

i want to use the bubble cursor effect from this site : http://www.mf2fm.com/rv/dhtmlbubblecursor.php

but, when i add it to one of my pages, it doesnt load properly. the bubbles will be far to the right and not under my cursor when i move it, what do i do to make it work properly?


	Logged

Kallistero
Full Member ⚓︎

SOON.

⛺︎ My Room

Re: HELP: making javascript page effects work properly

« Reply #1 on: September 08, 2023 @927.92 »

It depends on the page where you're trying to implement it. I develop similar effects, and I can only take a guess here because I don't see where you're trying to implement it, but I think it's because the developer is using dangerous lines like this:

Code

document.onmousemove=mouse;

This specific line is replacing, rather than adding to, any other mouse-move event listeners that might be attached to the document. There are others, too (window.onload=funky, document.onmousedown=splash, etc.), so if you have ANY other scripts on the page, this effect will fight with them over which one gets to assign the document's mousemove event, etc. This results in one or all scripts not working properly!

That effect is pretty old code, but I think it should work out if you replace lines like this with "addEventListener" assignments instead! That way, it'll just ADD the script to the document's events rather than replacing them.

For an example of how to do this, you should take this line:

Code

document.onmousemove=mouse;

And replace it with this line:

Code

document.addEventListener('mousemove', mouse);

For another example, you would replace this line:

Code

window.onload=funky;

With this line:

Code

window.addEventListener('load', funky);

To figure out which ones to change, follow the pattern: anything that says "window.on" should be replaced with something that instead starts with "window.addEventListener('", and anything that says "document.on" should be replaced with something that instead starts with "document.addEventListener('" here.

Depending on what tool you're using to develop your site, you might just be able to scout them out with a simple ctrl+F.

Good luck!


	Logged

I miss the pomegranate

Memory
Guest

Re: HELP: making javascript page effects work properly

« Reply #2 on: September 09, 2023 @986.94 »

thank you for the reply, and thank you for the examples! theyre very helpful

this is a page im trying to implement it : https://codepen.io/anonymousredfox/pen/ZEVeGpq

i have other pages that are similar i think, but i used this one as an example since itll be my main page

i also use brackets to develop my site


	Logged

Kallistero
Full Member ⚓︎

SOON.

⛺︎ My Room

Re: HELP: making javascript page effects work properly

« Reply #3 on: September 09, 2023 @57.80 »

Quote from: MariBelle2002 on September 09, 2023 @986.94

thank you for the reply, and thank you for the examples! theyre very helpful

this is a page im trying to implement it :

For my experiments on this, I set some CSS before I began:

#header has "position: absolute"
#memo has "top: auto"
::-webkit-scrollbar-button:hover has "background: #BD81DB"

They were missing those values, so I put them there before I started poking at the code!

The script is having a problem because the CSS for the body has the assignment "width: 900px" in it, and the script isn't built for that. When the screen's width is smaller than 900px, the script works just fine, but if it goes over 900px, then not only do you get problems with the script, but the document's <body> tag doesn't even fit the whole page! That's also why bubbles stop generating entirely once you go 900px across the page. You can either remove the "width: 900px" line and adjust accordingly, or you can edit this line in the script:

Code

bubb[i].left=bubbx[i]+"px";

Change it to this, instead:

Code

                  const widthDiff = window.innerWidth - document.querySelector('body').offsetWidth;
                  bubb[i].left = widthDiff > 0 // if the window is wider than the document body,
                    ? (bubbx[i] - widthDiff / 2 + 8) + "px" // then account for that difference in width, plus the 8px default margin of the body
                    : bubbx[i] + "px" // otherwise, just use the normal x-position
                  ;

This should work, because of math reasons! Now, even though this script change puts the bubbles in the correct position, the effect still only works while your mouse is on the actual <body> tag of the document, which will only ever be 900px wide unless you change it. If you want your page to remain like that, use the script change. If you want your page to have a more dynamic sizing (which will also allow the effect to run on the whole page), I recommend either using a percent value for your width (like "width: 100%") or changing "width: 900px" to "min-width: 900px". However, doing so will mean you need to adjust some other things on your page! That left sidebar has a negative number as its "left" property, so you'll need to change it to a positive number if you want it to be on the page after you reset the body's size. There's some other stuff, too, but it's all pretty much just repositioning stuff in CSS!

Good luck


« Last Edit: September 09, 2023 @74.83 by Kallistero »	Logged

I miss the pomegranate

Memory
Guest

Re: HELP: making javascript page effects work properly

« Reply #4 on: September 09, 2023 @518.00 »

ah okay, pretty interesting how javascript works based on page size!

after reading this : https://dokode.moe/blogs/, i used 900px so that everything on the page would be positioned in the middle on all screen resolutions, but is there another way to keep everything centered?


	Logged

Kallistero
Full Member ⚓︎

SOON.

⛺︎ My Room

Re: HELP: making javascript page effects work properly

« Reply #5 on: September 09, 2023 @740.74 »

Quote from: MariBelle2002 on September 09, 2023 @518.00

after reading this : https://dokode.moe/blogs/, i used 900px so that everything on the page would be positioned in the middle on all screen resolutions, but is there another way to keep everything centered?

The way people usually do this is to have all the content on the page in one big parent element, instead of having the content directly under the <body> tag.

For instance, this:

Code

<body>
    <!-- your stuff -->
</body>

would change to this:

Code

<body>
    <div id="page-content">
        <!-- your same stuff -->
    </div>
</body>

and this:

Code

body {
    /* your other body styles */
    position: relative;
    width: 900px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

would change to this:

Code

body {
    /* your other body styles */
}

#page-content {
    position: relative;
    width: 900px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

That's right, ALL of those styles just move into the content element! Doing this will keep all the contents in place while also fixing the script.

By the way, that isn't just how Javascript works; that one script just puts everything on the <body> tag, so messing with the body's position messes with this effect. Usually, they can take for granted that the <body> tag on a page will take up the entire window, so it's typically not an issue. It's generally considered good (or at least standard) form for the <body> to take up the width of the whole window, especially since that's the default setting before you apply any of your own styles. I do still play around with alternative formats, though! It's just, that also makes it to where if you want to use someone else's code, it won't always play nice.


« Last Edit: September 09, 2023 @743.38 by Kallistero »	Logged

I miss the pomegranate

Memory
Guest

Re: HELP: making javascript page effects work properly

« Reply #6 on: September 09, 2023 @861.09 »

thank you for the reply! the bubbles work well now.

now, if i wanted to use this tinkerbell effect script http://www.mf2fm.com/rv/dhtmltinkerbell.php, or this bubble bath script http://www.mf2fm.com/rv/dhtmlbubbles.php for another page, which script variables would i need to change for them? these are two more of the scripts i was thinking about using for some of my other pages


	Logged

Pages: [1]

« previous next »

Vaguely similar topics! (3)