Andy Stephenson
Nuke Master
Posts:54
 |
|
Rozmi Ismath
Nuke Newbie
Posts:1
|
| 05/17/2011 1:41 PM |
|
how to download the video 2? only for video 1 available link to download |
|
|
|
|
Joseph Craig
DNN MVP
Posts:11667
|
| 05/17/2011 1:44 PM |
|
As noted on the download page, that video will be available on May 27. |
|
Joe Craig, Patapsco Research Group
Complete DNN Support |
|
|
Andre Kok
Nuke Newbie
Posts:3
|
| 06/03/2011 3:01 PM |
|
Hi,
Great tutorial and exactly what i was trying to do.
Is there a way of defaulting the initial view to have the navigation buttons for both left and right showing on load.
My designer wants to see both the custom images on load so moving the display on to the second image would do it.
My Jquery is not very good yet.
Thanks
Andre |
|
|
|
|
Joseph Craig
DNN MVP
Posts:11667
|
| 06/03/2011 3:55 PM |
|
I haven't looked at these in great detail, but the answers to your questions likely lie in the design of the jQuery plugins that are used. So, you should follow the links to the developers of the plugins and see if there is documentation or other help there.
And, if you Google a bit you will find links to quite a few other jQuery slider plugins.
I have no idea which might be "best" in any sense, but you should be able to get a feel for what is available and the level of documentation. |
|
Joe Craig, Patapsco Research Group
Complete DNN Support |
|
|
Andy Stephenson
Nuke Master
Posts:54
|
| 06/08/2011 4:21 AM |
|
Andre, I'm not the best at jQuery/ Javascript either I'm afraid...
I agree with Joe though about using a different slider plugin, the one we use here is very simple and there are a lot more out there that have more configuration options so you won't actually have to write any more code.
What you will have to do however is change the div ids in the announcements template to match what the new plugin is looking for, you might also have to change the divs to an unordered list as a lot of plugins will use these.
Then you'll have to referance the new jQuery plugin in your template file and possibly change some css slightly. If I get chance I'll look for some plugins that will suit. |
|
|
|
|
will laforge
Nuker
Posts:14
|
| 08/16/2011 10:07 PM |
|
Has anyone found any jQuery plugins that have a timer so that they will shift to the next slide after a certain amount of time or could anyone enlighten me with some code that I could inject into the demo code? |
|
|
|
|
Joseph Craig
DNN MVP
Posts:11667
|
| 08/17/2011 10:43 AM |
|
I actually like the jQuery cycle plugin ( http://jquery.malsup.com/cycle/). Though this looks like it's an image slider, it will actually work for all sorts of content. You basically need to create a parent div to hold the announcements, and then each announcement is in a div that is a child of the parent. When you look at the demos and example for jQuery cycle, you'll see img tags as children of the parent div. These are what you use to replace with your announcement divs. Here is an example using jQuery cycle: http://jncraig.com.77.seekdotnet.co...fault.aspx Look at the page source to see how I did it. The div structure is done with the template in the announcements module. The jQuery scripts are placed in the module's footer (advanced settings) |
|
Joe Craig, Patapsco Research Group
Complete DNN Support |
|
|
will laforge
Nuker
Posts:14
|
| 08/21/2011 11:05 AM |
|
Hi and thanks for replying Joseph, So should I be injecting this code before the close of the three divs I already have in the footer ?
<span class="Normal"><script type="text/javascript">
jQuery(function() {
jQuery('#myAnnouncements').cycle({"fx":"fade","timeout":5000,"continuous":false,"speed":300,"height":"auto","width":"","sync":true,"random":true,"fit":false,"containerResize":true,"pause":true,"pauseOnPagerHover":false,"autostop":false,"autostopCount":0,"delay":0,"nowrap":false,"fastOnEvent":0,"cleartypeNoBg":false,"randomizeEffects":true,"manualTrump":true});
});
</script></span><!-- End_Module_445 --> |
|
|
|
|
Joseph Craig
DNN MVP
Posts:11667
|
| 08/21/2011 11:10 AM |
|
That should work. But you don't need the span or the comment. |
|
Joe Craig, Patapsco Research Group
Complete DNN Support |
|
|
will laforge
Nuker
Posts:14
|
| 08/21/2011 12:11 PM |
|
Joseph I must be missing something because the cycle isn't working. The announcement sits there until I click the left or right arrows. Is there some code that I need to remove, I'm going to start looking for the script that allows it to advance using the left or right arrows, or Should that not matter ?
Thanks for your help
- Will
|
|
|
|
|
Joseph Craig
DNN MVP
Posts:11667
|
| 08/21/2011 12:19 PM |
|
Is the site on the internet? What is the address? I'd be happy to take a look.
Do you know how to debug javascript? If so, you should be able to set a breakpoint where the script is called and trace to make sure that the script is running. |
|
Joe Craig, Patapsco Research Group
Complete DNN Support |
|
|
will laforge
Nuker
Posts:14
|
| 08/21/2011 1:26 PM |
|
I have some experience with Java, (a college class) what application are you using to debug this ? Could I use something as simple as Textpad or what do you recommend?
Yeah if you have time I would really love the help, my website is very plain at the moment have a bunch of things hidden but I threw the jQuery announcemnt on the front page and set it viewable. I also have a few other questions about my website but they don't pertain to this module.
My website is will-laforge.com |
|
|
|
|
will laforge
Nuker
Posts:14
|
| 08/21/2011 2:04 PM |
|
I also have visual studio 2010 and 2008 |
|
|
|
|
Joseph Craig
DNN MVP
Posts:11667
|
| 08/21/2011 2:17 PM |
|
Here is a bit of your page that I copied after "viewing source."
<!-- Start_Module_481 -->
<div id="dnn_ctr481_ModuleContent" class="DNNModuleContent ModDNNAnnouncementsC">
<div id="one" class="contentslider"><!-- Start contentslider div -->
<div class="cs_wrapper"><!-- Start cs_wrapper div -->
<div class="cs_slider"><!-- Start cs_slider div -->
<div class="cs_article">Page One Slider</div>
<div class="cs_article">Slider Page 2</div>
<script type="text/javascript">
jQuery(function() {
jQuery('#myAnnouncements').cycle({"fx":"fade","timeout":5000,"continuous":false,
"speed":300,"height":"auto","width":"","sync":true,"random":true,"fit":false,
"containerResize":true,"pause":true,"pauseOnPagerHover":false,"autostop":false,
"autostopCount":0,"delay":0,"nowrap":false,"fastOnEvent":0,"cleartypeNoBg":false,
"randomizeEffects":true,"manualTrump":true});
});
</script>
</div><!-- End cs_slider -->
</div><!-- End cs_wrapper -->
</div><!-- End contentslider -->
</div><!-- End_Module_481 -->
There are a couple of things that I notice: 1. The script is inside the div with the class "cs_slider." It should be outside of it. I think that you included this in the HTML. I would add the script to the module's footer, not the template footer. This is accessed from the module settings menu. 2. The '#myAnnouncements' appears to be an encoding of what should be "#myAnnouncements". This happens when you put a script somewhere the HTML is expected. So that should be changed. 3. Regarding point #2, the target of the cycle plugin should not be "#Announcements" but should be the div that contains the "cs_article" divs. That would be the div with the class="cs_slider". So, your jQuery should target ".cs_slider" because it is a class and not an ID. Knowing a bit of java will help, but his is javascript which isn't quite the same thing as java. IE and Chrome have tools built in to debug web pages, and that includes javascript. In IE, you get to this with F12. For Firefox, you need the Firebug plugin. I hope that this gets your started ... ask more questions if it doesn't help. |
|
Joe Craig, Patapsco Research Group
Complete DNN Support |
|
|
will laforge
Nuker
Posts:14
|
| 08/21/2011 3:09 PM |
|
Thanks for taking the time to look at my code, and you were right. I had placed my code in the templete footer and not the module footer. I tried inserting
<script type="text/javascript">
jQuery(function() {
jQuery('.cs_slider').cycle({"fx":"fade","timeout":5000,"continuous":false,"speed":300,"height":"auto","width":"","sync":true,"random":true,"fit":false,"containerResize":true,"pause":true,"pauseOnPagerHover":false,"autostop":false,"autostopCount":0,"delay":0,"nowrap":false,"fastOnEvent":0,"cleartypeNoBg":false,"randomizeEffects":true,"manualTrump":true});
});
</script>
and then changing it to
<script type="text/javascript">
jQuery(function() {
jQuery(".cs_slider").cycle({"fx":"fade","timeout":5000,"continuous":false,"speed":300,"height":"auto","width":"","sync":true,"random":true,"fit":false,"containerResize":true,"pause":true,"pauseOnPagerHover":false,"autostop":false,"autostopCount":0,"delay":0,"nowrap":false,"fastOnEvent":0,"cleartypeNoBg":false,"randomizeEffects":true,"manualTrump":true});
});
</script>
Keep getting an error when debugging the page saying /* Line: 164 Error: Object doesn't support property or method 'cycle' */ The line its referring to is the start of the jQuery Script I'm going to look at your code a little closer and compare it to mine |
|
|
|
|
will laforge
Nuker
Posts:14
|
| 08/21/2011 3:33 PM |
|
Would I need to include a specific library for that function ? |
|
|
|
|
Joseph Craig
DNN MVP
Posts:11667
|
| 08/21/2011 3:51 PM |
|
Whoops! You'll need this script, before the other one, to load the jQuery Cycle plugin:
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
|
|
Joe Craig, Patapsco Research Group
Complete DNN Support |
|
|
will laforge
Nuker
Posts:14
|
| 08/21/2011 3:57 PM |
|
You Sir, Are awesome! Should I copy that and post it into a .js incase the link goes dead ?
Thanks again for all your help.
-Will |
|
|
|
|
Joseph Craig
DNN MVP
Posts:11667
|
| 08/21/2011 6:20 PM |
|
I don't think that URL will go away. If it does, though, it'll likely to be replaced by something else.
Sticking with the hosted site means that you get updates automagically! |
|
Joe Craig, Patapsco Research Group
Complete DNN Support |
|
|