Sorry your browser is not supported!

You are using an outdated browser that does not support modern web technologies, in order to use this site please update to a new browser.

Browsers supported include Chrome, FireFox, Safari, Opera, Internet Explorer 10+ or Microsoft Edge.

Geek Culture / My first javascript library

Author
Message
Phaelax
DBPro Master
20
Years of Service
User Offline
Joined: 16th Apr 2003
Location: Metropia
Posted: 29th Oct 2016 06:36 Edited at: 29th Oct 2016 07:08
Link
Though I've been using javascript for a very long time, it mostly consisted of reading lots of tutorials to make existing snippets and libraries work to do what I wanted. Most often I had no clue how it work. This past week I started looking into jquery and trying to understand how it works. How did I go so long without learning this!? Still a long way off from calling myself JS proficient, but I managed to write a jquery plugin (and I actually understand it).

My site includes an explanation of the plugin, plus a jsfiddle link to an example. But here's the basics of it. I wanted a better alternative to the standard file input element, for images specifically. I also wanted to be able to edit elements anywhere on the page simply by double clicking on them. And so, zedit was born. The existing packages I managed to find were either overly complicated to use or simply didn't work.

http://www.zimnox.com/resources/libraries/zedit/


Please let me know if my site needs to clarify anything better, I'm up way past my bedtime!

Ugh, found a bug. It doesn't work right with multiple inputs. It'll have to wait until morning.

"I like offending people, because I think people who get offended should be offended." - Linus Torvalds
Back to top
Profile PM Email Website
Seppuku Arts
Moderator
19
Years of Service
User Offline
Joined: 18th Aug 2004
Location: Cambridgeshire, England
Posted: 29th Oct 2016 12:05
Link
Oh awesome, yes, JQuery is great, I love it, makes things so much more convenient when doing JS and the plethora of JQuery plugins out there allows you to be that little extra lazy. Just great being able to just select elements using CSS selectors and then just piling on behaviours, even can save you on using any for loops, I recently added a JQuery based search to a page and I was able to just apply logic to multiple div tags at once without having to iterate through them in a loop. All I need to do to "show" all found search items on a page was this:



Might be a useful plugin to play with too, am currently looking at working on my site and adding some JQuery fanciness to it. Though I need to get around fixing a bug, which I've not looked at yet, which I need to stop being lazy and do, given I already believe I know the cause of the bug I've got.
Back to top
Profile PM Website
BatVink
Moderator
21
Years of Service
User Offline
Joined: 4th Apr 2003
Location: Gods own County, UK
Posted: 29th Oct 2016 18:12
Link
Quote: "This past week I started looking into jquery and trying to understand how it works. How did I go so long without learning this!?"


That was exactly my thoughts when I discovered jQuery. Make sure you have also discovered jQuery UI too
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Quidquid latine dictum sit, altum sonatur
TutCity is being rebuilt
Back to top
Profile PM Email
Phaelax
DBPro Master
20
Years of Service
User Offline
Joined: 16th Apr 2003
Location: Metropia
Posted: 29th Oct 2016 21:46
Link
I'm still fighting with this bug. When I have multiple input elements on the same page, the image only gets loaded into the last input that was assigned. I'm sure it's a simple fix but I haven't figured it out yet.

https://jsfiddle.net/df80tt3w/

I've seen jquery UI mentioned on a few sites, I'll have to look into it to see what it's all about.

"I like offending people, because I think people who get offended should be offended." - Linus Torvalds
Back to top
Profile PM Email Website
BatVink
Moderator
21
Years of Service
User Offline
Joined: 4th Apr 2003
Location: Gods own County, UK
Posted: 29th Oct 2016 23:17 Edited at: 29th Oct 2016 23:18
Link
It must be this line:

$label = this.next('label');

and my best guess is because you have three labels, but they are not uniquely identifiable because they don't have an ID attribute. I messed around with it, but without success. I couldn't fully understand how it was working.

My thought is you need something like this:

<input id="test1" type="file"/><label id="l1" for="test1"></label>
<input id="test2" type="file"/><label id="l2" for="test2"></label>
<input id="test3" type="file"/><label id="l3" for="test3"></label>

followed by something like this:

// Get adjacent label element following this file input
$label = this.next('#label').attr('id');

But only something like this, as it didn't work
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Quidquid latine dictum sit, altum sonatur
TutCity is being rebuilt
Back to top
Profile PM Email
Phaelax
DBPro Master
20
Years of Service
User Offline
Joined: 16th Apr 2003
Location: Metropia
Posted: 30th Oct 2016 04:15
Link
I worked it out finally, without using IDs.

At first, I added an ID to each label, leaving the rest of the code as is. I printed out the ID of each label as the function was called each time. So far it worked, the code was indeed getting the right label using next(). However, the problem came within the change function where $label would equal whatever it's last assignment was, giving me the notion that it's acting like a global variable. I'm still grasping the concept of JS and jquery, and I thought designing a plugin this way would create a new instance for each every single time I call the method (zedit).

What I ended up doing was moving the $label assignment to inside the change function. I left it outside as well simply for creation purposes as it is needed to set the default background.
Here's the corrected version
https://jsfiddle.net/df80tt3w/2/


And here's the demo showing the dynamic text editing.
https://jsfiddle.net/ucbd26t1/

"I like offending people, because I think people who get offended should be offended." - Linus Torvalds
Back to top
Profile PM Email Website
BatVink
Moderator
21
Years of Service
User Offline
Joined: 4th Apr 2003
Location: Gods own County, UK
Posted: 30th Oct 2016 08:55
Link
Glad you sorted it.
My jQuery is at a similar level to yours, so it's good to see the working solution.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Quidquid latine dictum sit, altum sonatur
TutCity is being rebuilt
Back to top
Profile PM Email
Back to top

Login to post a reply

Server time is: 2024-04-16 09:06:53
Your offset time is: 2024-04-16 09:06:53