WebsiteBaker Community Forum

WebsiteBaker Support (2.8.x) => jQuery => Topic started by: sky writer on August 26, 2010, 10:53:57 PM

Title: jqueryadmin highlight wysiwyg section
Post by: sky writer on August 26, 2010, 10:53:57 PM
My head is spinning from going in circles, trying to figure out how to use the jqueryadmin.

All I want to do is draw attention to a wysiwyg section on my page, by using the highlight effect (fade from one colour to another).  But I can't get it to work.

I have:
- installed the latest jqueryadmin module
- added [[jQueryInclude]] to the footer of my template
- created a preset for page 9 ( http://tinyurl.com/362gukp )
- created a wysiwyg section (can be seen at the bottom of the page (Testing News Update Window Ideas...)
- inserted droplet [[jQueryLoader]] in that wysiwyg section window

Nothing happens.  Can anyone help, or point me to English pages that might help me.

Thanks!
Title: Re: jqueryadmin highlight wysiwyg section
Post by: dbs on August 26, 2010, 10:57:45 PM
for presets with page_id (9.preset) you only need jqueryloader-droplet.
remove droplet jqueryinclude.

edit:
is highlight-effect a jqueryadmin-plugin?
Title: Re: jqueryadmin highlight wysiwyg section
Post by: sky writer on August 26, 2010, 11:39:30 PM
I took out the footer call, but nothing happened.

Highlight is listed under UI Effects.  I assume (probably incorrectly) that that means it is functional.

Like I said, I really don't think I am understanding how to use jqueryadmin.  So, if there is an English detailed instruction anywhere, I would be happy to do the research.
Title: Re: jqueryadmin highlight wysiwyg section
Post by: erpe0812 on August 27, 2010, 09:45:13 AM
Have you tried this one:
http://www.webing.de/webbird/WebsiteBaker/JQueryAdminUsage

rgds

erpe
Title: Re: jqueryadmin highlight wysiwyg section
Post by: BlackBird on August 27, 2010, 10:55:34 AM
UI Effects (like plugins) do not run "automagically". You will have to _use_ them somehow. See the jQuery UI Docs to learn how to do this.
http://jqueryui.com/demos/

The other thing is: If you wish to use page dependend preset files, include the [[jQueryLoader]] Droplet into your page footer. You can also include it into your WYSIWYG section, but this makes things harder than they have to be. ;)

Edit: Here's the direct link to the Highlight Effect Docs. Seems to be down at the moment. (Gives a database error message.)
http://docs.jquery.com/UI/Effects/Highlight

Found it in the Google Cache.
http://webcache.googleusercontent.com/search?q=cache:a1UptCADfkwJ:docs.jquery.com/UI/Effects/Highlight+jquery+ui+highlight+effect+~howto&cd=3&hl=de&ct=clnk&gl=de&client=firefox-a
Title: Re: jqueryadmin highlight wysiwyg section
Post by: BlackBird on August 27, 2010, 11:10:16 AM
Okay, this is quite easy, so let's go...

* Edit your preset (9.jquery) with an editor (you can use AFE for this)
* Add this code to the bottom:

Code: [Select]
<script type="text/javascript">
    $(document).ready(function() {
      $('#highlight').effect("highlight", {}, 3000);
});
</script>

* Go edit your WYSIWYG-Section
* Enclose the content of that section with a <div id="highlight">...</div>

Reload the page and see the effect in action. :-D You may want to change the styling (color etc.).

Edit: I will add this call to jQueryAdmin v2.2, so you will not have to do this manually any longer after upgrading to that version.
Title: Re: jqueryadmin highlight wysiwyg section
Post by: sky writer on August 27, 2010, 07:04:45 PM
erpe - thanks, yes, I have read through all of blackbird's docs (as best I can with translation for some pages).  I believe I have everything SETUP properly.  I just can't wrap my head around how to actually implement things.

I hope you don't think I am just looking for an easy way out, or someone to do it for me.  I do want to learn this, but just can't seem to find a complete, start to finish kind of tutorial to help me understand.

Blackbird, thank you for going over and above... as usual.

I had already gone to the highlight docs, and found the error.  Thanks for the google pages.  I will definitely read the jquery docs (demo) page you suggest.  I hope this helps me ge over this hurdle.

I appreciate you following through and offering a mini tutorial.  It works!  Cheers!
Title: Re: jqueryadmin highlight wysiwyg section
Post by: erpe0812 on August 28, 2010, 09:59:52 AM
Maybe it is a good idea if you write a tutorial for the community how to use jQueryAdmin.
Take this german one as a base (http://www.websitebakers.de/tutorials/topics/jqueryadmin---lieblings-jquery-plugins-einfach-nutzen.php), play around and write down what you think is important.
If you need some help, pm me.
I am sure we find a place to publish your tutorial on AMASP or on Tutorials Project (http://www.websitebakers.de/tutorials/en/home.php).

Please register and we will give you access.
http://www.websitebakers.de/tutorials/tutorial-projekt/mach-mit/einfach-registrieren.php

rgds

erpe
Title: Re: jqueryadmin highlight wysiwyg section
Post by: sky writer on August 28, 2010, 09:21:03 PM
Not sure if you're talking to me or Blackbird.  But I'd be happy to contribute some English instruction... as soon as I am able to understand the process myself.  I'm afraid I still don't fully understand how it works, or how to implement it.  I mean, I know how to install jqueryadmin, and how to follow the basic instructions for making it work, but I don't understand how to implement scripts that I find online.

You have to realize that using Google translation makes it difficult to understand the German instruction.
Title: Re: jqueryadmin highlight wysiwyg section
Post by: erpe0812 on August 28, 2010, 11:08:35 PM
yes, I am talking to you skywriter.

First it would be good to have a tutorial how to use jQueryAdmin and plugins in english.
So if you need some help on your text, pm me when you are already finished.

Second step will be to write a tutorial how to create a plugin with scripts you find on the net.
It is really easy to do it if you compare some plugins with thew original scripts on the net, for example easySlider or something like that.
If you need some help on this, you can pm me too, but as I said before, it should be the second step.

rgds
erpe
Title: Re: jqueryadmin highlight wysiwyg section
Post by: BlackBird on August 30, 2010, 10:16:35 AM
I'll be happy to help, and as I am going to provide english pages, I'd appreciate to do this together. It's kind of a hurdle for me to explain things in English I can't really explain in German. *lol* I'm too much programmer/technician to explain things in easy words I'm afraid. :roll: But I'm always happy to hear what's hard to understand and trying to fix problems regarding the docs, too, not only the module itself. :-)
Title: Re: jqueryadmin highlight wysiwyg section
Post by: sky writer on August 30, 2010, 06:24:22 PM
Your English seems fine to me, but if you want to work together, I'd be happy to!
Title: Re: jqueryadmin highlight wysiwyg section
Post by: BlackBird on August 30, 2010, 06:34:36 PM
Thank you, I'm learning every day, but I'm far from being "perfect" (or even "good"). :wink: