hi
so
actually i dont know how to code jquery
but a website i am working with works on jquery
i want someone to dm me if they know jquery cuz man im struggling
this could take quite some time
but ill credit whoever helps me in the website
or just ping me here
i dont mind pings
#JQuery Website build
drowsy nimbus
junior flame
@drowsy nimbus no DMs allowed in this server. Just post your questions in this thread and people will help if they can
I know jquery
drowsy nimbus
okay
so
cheshire
@junior flame
ive made a website
its uses jquery
i dont know anything about jquery
junior flame
okay, so this is a website you made and you picked jquery despite not knowing anything about it?
junior flame
i'm confused, why did you choose to use jquery?
drowsy nimbus
i didnt, i got the source from my friend
it already used jquery
i edited a bit of stuff
under my knowledge span
but now i need your help
junior flame
okay, so your friend made the website and you're just trying to edit it
drowsy nimbus
JUST READ, ask questions when i finish, or ill ping you when im done writing. is that okay?
junior flame
I am not sure why you don't just make the website yourself without jquery, but let's continue
drowsy nimbus
okay, so your friend made the website and you're just trying to edit it
yea
the website, it uses jQuery attributes one of them is a link attribute, this attribute shows up same on every page. WHAT I WANT TO DO IS- i wanna change that link attribute to a text attribute while keeping the style and animation same and i also what it to show different on every page by copy pasting the text attribute that we will create and tweaking them a bit
@junior flame
junior flame
show the relevant code
drowsy nimbus
okay, i can show relevant code in html i am not sure about jQuery
give me a sec
console.log(StickyShowcase);
const Showcase = StickyShowcase({
data: [{
image: "https://assets.website-files.com/5cae580b70e3e817d963cb90/5da0b27f718f3524ffb0ba9c_MadeByStudioJQ-1-min.jpg",
meta: "#iamconfused",
title: "CONFUSED"
}, {
image: "https://assets.website-files.com/5cae580b70e3e817d963cb90/5da0b27fa2544098c8a0093b_MadeByStudioJQ-2-min.jpg",
meta: "#whoami",
title: "ABOUT ME",
link: "https://dribbble.com/shots/7305254-The-Crop"
}, {
image: "https://assets.website-files.com/5cae580b70e3e817d963cb90/5da0b27feeb3d5365e396a72_MadeByStudioJQ-5-min.jpg",
meta: "#MadeByStudioJQ",
title: "ALIGN",
link: "https://dribbble.com/shots/7226815-Align"
}, {
image: "https://assets.website-files.com/5cae580b70e3e817d963cb90/5da0b27f43b23dd01b9afa77_MadeByStudioJQ-4-min.jpg",
meta: "#MadeByStudioJQ",
title: "HEAVENS DOOR",
link: "https://dribbble.com/shots/7287442-Heaven-s-Door"
}, {
image: "https://assets.website-files.com/5cae580b70e3e817d963cb90/5da0b27fa254406c14a0093a_MadeByStudioJQ-3-min.jpg",
meta: "#MadeByStudioJQ",
title: "SUSPECT",
link: "https://dribbble.com/shots/7269161-Suspect"
}],
containerId: "app",
waveOptions: {
speed: 0.6,
frequency: 16,
amplitude: 1.5,
}
});
</script>```thats the html side
junior flame
That's not HTML
drowsy nimbus
i mean thats whats in the html file
junior flame
okay, just continue and we'll figure it out
drowsy nimbus
a = i("h1", "slide-title"),
r = i("p", "slide-meta"),
l = i("a", "slide-more");
return l.href = e.link, t.classList.add(0 !== s ? "next" : "show-meta"), r.innerHTML = e.meta, a.innerHTML = e.title, l.innerHTML = "hello", t.appendChild(r), t.appendChild(a), t.appendChild(l), n.container.appendChild(t), t```this is what i think jquery side looks like
the attribute
is
shell pondBOT
@drowsy nimbus
drowsy nimbus
this may be the attribute
junior flame
i mean I know what that return does but that's really odd
not sure why your friend wrote it that way..
drowsy nimbus
i have no idea what you are talking about, u guide me on this
junior flame
i have no idea what to make of the gist you uploaded
is that in a .js file in your code somewhere?
drowsy nimbus
yes
junior flame
did your friend use something to generate this code?
junior flame
what does the website do?
drowsy nimbus
i was flabbergasted when i saw the code for the first time
just a website
about me
portfolio ig
junior flame
what is the javascript for?
junior flame
frankly, the code is a mess and i don't know if your friend possibly used something to generate it that it looks like that. If you want small changes made then i would simply ask your friend to make the changes since they coded it in the first place.
drowsy nimbus
frankly, the code is a mess and i don't know if your friend possibly used someth...
hmmm
junior flame
oh, so there is like a mouse effect on the page, okay
but firstly you should know that none of what you showed me looks remotely like jquery lol
drowsy nimbus
lmao really?
junior flame
yeah
seriously, if your friend coded it and i assume this is on your friend's portfolio (their dribbble page it links to) just ask them to make the changes, they actually know how it works
drowsy nimbus
he actually didnt make it from scratch
he got a sample from github which he tweaked that then handed it over to me
bro really said use it if u can manage to change it
cuz he couldnt himself
junior flame
okay, this is not simple jquery and it would be helpful to see the github that he got it from because that github might explain how it works
junior flame
i'm not able to reverse engineer this
drowsy nimbus
it's using three.js, not jquery
HUH
junior flame
says it right on that github
junior flame
that's going to be more complicated to learn but i would start with a three.js tutorial, then look through the code in that github and try to understand it from there. The code looked generated to me because it is, it's the output of npm run build, so don't look at the code in your website because it's the output of the compilation and not your actual source code. If possible, get the source code from your friend (how did they modify the github code, prior to running npm run build on it)
junior flame
but otherwise it should be simple to modify that github yourself to get to the same place tbh (it looks like your website is exactly the same just with different text and images)
drowsy nimbus
just ignoring everything i said, do u know how i can change the read more text on the website to text while keeping style same
junior flame
the article on codrops (linked in the github readme) explains how the effect works.
drowsy nimbus
the article on codrops (linked in the github readme) explains how the effect wor...
im not bothered to read that, its gonna lead me to nowhere without basic knowledge
junior flame
just ignoring everything i said, do u know how i can change the `read more` text...
sorry, I don't understand what you mean... change the read more text to text? what does that mean
drowsy nimbus
sorry, I don't understand what you mean... change the read more text to text? wh...
thats thing is a hyperlink rn
i wanna change it to text
junior flame
you just want to get rid of the hyperlink? so it says "read more" but you can't click it?
drowsy nimbus
and make it so that its different on every page
drowsy nimbus
you just want to get rid of the hyperlink? so it says "read more" but you can't ...
i can click it, like i wanna type things about me there as this is a portfolio website
i actually managed to change the text of hyperlink but because that is single attribute it shows up same on every page
i want it to be text instead of hyperlink
and different on pages
junior flame
well it's impossible to say without being able to see your friend's actual code for it (not the compiled output)
this seems to be where it's set in the github you linked, but your friend has clearly changed it https://github.com/Anemolo/StickyImageEffect/blob/master/js/Slides.js#L21
if you read that code, you'll see that it's getting data in the constructor of slides and then mapping over that where each one is entry, so you'd want to set the more on each entry and use something like entry.more instead of hard coding it
drowsy nimbus
i actually managed to change the text of hyperlink but because that is single at...
.
junior flame
if you read that code, you'll see that it's getting `data` in the constructor of...
^
drowsy nimbus
how to do that
junior flame
but regardless, get the source code from your friend before you try to do this
drowsy nimbus
but regardless, get the source code from your friend before you try to do this
what if i ignore my friends code and u guide me based on this repo
junior flame
you need to get the actual source code, make the changes there and run npm run build and then replace the files
drowsy nimbus
AND i already made my mind to switch to the repo but when i open the base.html nothing works
i just see a
screen with gradient
junior flame
that's not how you run it... read the readme
drowsy nimbus
i did try to install npm but it just showed react.js logo
junior flame
you need to run npm install and then npm start to start the development server, then you can view it in your browser
junior flame
if you read that code, you'll see that it's getting `data` in the constructor of...
but anyway, did you understand this?
drowsy nimbus
yeah
junior flame
because look here: https://github.com/Anemolo/StickyImageEffect/blob/master/js/index.js
that's where the slides are defined
const slidesData = [
{
image: image1,
title: "Segovia",
meta: "Spain / Castile and León"
},
{
image: image2,
title: "Barcelona",
meta: "Spain / Catalonia"
},
{
image: image3,
title: "Málaga",
meta: "Spain / Andalusia"
},
{
image: image4,
title: "Pamplona",
meta: "Spain / Navarre"
},
{
image: image5,
title: "Bilbao",
meta: "Spain / Biscay"
}
];
so each one currently has an image, title, and meta
drowsy nimbus
how do i add text
junior flame
If you look back in this file: https://github.com/Anemolo/StickyImageEffect/blob/master/js/Slides.js#L19
It uses those as entry.meta, entry.title and so on
I'm literally telling you
drowsy nimbus
so i make entity.text ?
junior flame
okay, well i'm about done with this so let me give you a few more pointers
https://github.com/Anemolo/StickyImageEffect/blob/master/js/Slides.js#L16
this is where it creates the more element, later on it does more.innerHTML = 'Read more'; so you understand now where the more variable is created
so if you want to add read more text, where if you click the "read more" then it shows you the extra paragraph of text underneath it, you will want to create an extra element here to hold your text, then add js for the hide/show functionality, which is a little more complicated
drowsy nimbus
so if you want to add read more text, where if you click the "read more" then it...
no no no
i just wanna remove the hyperlink
only text
junior flame
you just want it to say "Read more" and not be clickable?
drowsy nimbus
yea
junior flame
ok I am confused what exactly you want to do, but i feel like i've given you enough pointers to do it anyway
drowsy nimbus
ok I am confused what exactly you want to do, but i feel like i've given you eno...
i thought you were cheshire
junior flame
the key is to know where that is being set, and it's in that code above
drowsy nimbus
i cant find any tutorial on how to use npm
can u give me overview
what to do after this
@junior flame
sry for ping
do u mind ping?
junior flame
what have you done so far? also there's like a billion tutorials on how to use npm...
drowsy nimbus
they all use vs code
i dont wanna use vs code
i have just typed
npm install
npm start
but how and where to put my files
how to deploy
junior flame
did you type those commands inside the github repository?
junior flame
you need to clone the github repository, it will create a folder called StickyImageEffect with the github code inside of it. Then you need to run those commands inside of that StickyImageEffect directory.
drowsy nimbus
junior flame
you need to run npm install first, and then npm start
drowsy nimbus
why dosent anyone tell this, or i am just too dumb
junior flame
it says it in the readme, but you have just never worked with npm before so i understand it's confusing.
basically, you need to be in the project directory first so that the npm commands know which project the command is being used for.
npm install will install the project's dependencies. that is, the libraries and stuff that your project uses.
npm start will start the local development server.
the error you got about "parcel" not being recognized, is because parcel is one of the dependencies, and you didn't run npm install so it didn't have the dependencies yet.
junior flame
it is supposed to hang after you run npm start
because it's started the development server, and will keep running it until you quit it
drowsy nimbus
i ran npm install
drowsy nimbus
it fixed
but this
it says something realted to python
do i need to install python?
junior flame
no, it says it's a permissions issue trying to rm the corejs directory
i have no idea about that. let me try on my end.
shell pondBOT
@drowsy nimbus
junior flame
this is a very old package (4 years old) so it could be some things are out of date
hmm, yeah I don't know what your problem is. I have no problem running it. All I did was download the github code, run npm install followed by npm run start and it runs with no issues.
I am doing this in WSL though, it might be a windows compatibility issue
though idk if you want to set up WSL just for this (honestly i recommend it for development on windows in general but yeah)
ok looking at your gist now, that does seem like a python problem.... i feel like I have seen this before.. let me research
drowsy nimbus
it says in the corner few dependencies may not work as they are old
why dont they make these stuff bold man
its soo hard to read
;-;
junior flame
i don't think that's your issue
i think your issue is related to trying to run nodejs on windows... i'm trying to find some info about this
junior flame
Try this
Install all the required tools and configurations using Microsoft's windows-build-tools by running npm install -g windows-build-tools from an elevated PowerShell (run as Administrator).
And try installing Python 3
junior flame
Yeah I was researching this
If you're gonna give me attitude i'll stop helping
I was trying to figure out why nodejs is requiring python at all
drowsy nimbus
WHAT
junior flame
it's very dumb that you have to install python for a project like this
drowsy nimbus
I DIDNT GAVE ATTITUDE
junior flame
but you can try
here's the official instructions from node-gyp, probably this is the best thing you can try: https://github.com/nodejs/node-gyp#on-windows
drowsy nimbus
what is wsl?
junior flame
windows subsystem for linux
drowsy nimbus
u r on linux?
drowsy nimbus
these things are soo dumb
junior flame
Developers can access the power of both Windows and Linux at the same time on a Windows machine. The Windows Subsystem for Linux (WSL) lets developers install a Linux distribution (such as Ubuntu, OpenSUSE, Kali, Debian, Arch Linux, etc) and use Linux applications, utilities, and Bash command-line tools directly on Windows, unmodified, without the overhead of a traditional virtual machine or dualboot setup.
drowsy nimbus
ooo
junior flame
here's the official instructions from node-gyp, probably this is the best thing ...
just follow these instructions , under the windows section, and try again
junior flame
no you don't
junior flame
that's the visual c++ build environment and visual studio, not VSCode
“Visual Studio” and “Visual Studio Code” are not the same thing. Visual Studio is an integrated development environment (IDE) and Visual Studio Code is a rich text editor like Sublime Text and Atom.
but you're just trying to get the c++ build environment
i would just install python first and see if that alone fixes your issue, then install the visual c++ stuff if it still doesn't work
kind of taking shots in the dark because i don't develop on windows itself pretty much for this reason.
drowsy nimbus
its 6.6 gb download
im ditching this website idea
ill go back and play minecraft
jesus
junior flame
yeah i think if you wanted to do this, you could try making it yourself from scratch without using the npm version on github, by following the codrops tutorial
it's a bit advanced though, fancy effect
junior flame
honestly, if you want to do development on windows of any kind, WSL is not a bad idea to get set up at some point
WSL Ubuntu
i really don't like development on just windows itself, feels like you run into a lot of issues like what you did today
drowsy nimbus
yes alot
i have to download 100 things before getting my first error
and then more 50 things to get 2nd error
then ditching the plan and deleting all the stuff
junior flame
yeah and honestly i find even when you do have to install things it's a lot easier on linux because it's usually like one command
junior flame
three.js does look fun if you ever want to learn it
start with just vanilla javascript though if you don't know that yet
drowsy nimbus
eh
junior flame
anyway, there is something off topic i want to ask about
why does discord say you are suspected to be part of an online terrorist organization
there's a hover over your name that says this
junior flame
how did that happen to you lol
junior flame
but nothing shows up when i try to hover over my own name
i wasn't sure if it was just your about text
drowsy nimbus
lmao
junior flame
and nothing shows up when i hover over anyone else's name either
so how did you get it to show up when you hover, if it's just something you copy pasted
junior flame
lol no thanks, i don't want people reporting me to discord for being a terrorist LOL