PDA

View Full Version : js function to click content off?



mistermick
05-16-2012, 05:24 PM
1) Script Title: Featured Content Slider v2.4

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/featuredcontentslider.htm

3) Describe problem: I would like to have the possibility to add a "X close" link within the loaded content so that the user can click the content off without having to choose another tab. I'm sure someone can help me... I've been trying for hours.

Thanks in advance!

ddadmin
05-17-2012, 07:32 AM
Hmm can you clarify what you mean by "click the content off"? Do you mean empty the slideshow so it appears blank and paused?

mistermick
05-17-2012, 02:28 PM
As on the example here: http://nyaserver.com/bgmovie , I use the script as a menu to reveal some html content while the bg video is running. So I would like an X button that allows the visitor to click the content off.

jscheuer1
05-17-2012, 04:03 PM
Add the highlighted as shown (from the page's source code, additions highlighted):


<div id="slider1" class="sliderwrapper">

<div class="contentdiv">Content 1 Here <a href="#" class="closex">close X</a>
</div>

<div class="contentdiv">
Content 2 Here. <a href="#" class="closex">close X</a>
</div>

<div class="contentdiv">
Content 3 Here. <a href="#" class="closex">close X</a>
</div>


<div class="contentdiv">
Content 4 Here. <a href="#" class="closex">close X</a>
</div>

</div>




<div id="paginate-slider1" class="pagination">
<a href="#" class="toc" style="outline:none;">TAB</a>
<a href="#" class="toc" style="outline:none">TAB</a>
<a href="#" class="toc" style="outline:none">TAB</a>
<a href="#" class="toc" style="outline:none">TAB</a>

</div>

<script type="text/javascript">
(function($){
$('.toc').click(function(){
$('#slider1 .contentdiv').css({visibility: 'visible'});
});
$('.closex').click(function(e){
e.preventDefault();
$('#slider1 .contentdiv').css({visibility: 'hidden'});
});
})(jQuery);
featuredcontentslider.init({
id: "slider1", //id of main slider DIV
contentsource: ["inline", ""], //Valid . . .

Note: Add the class names as shown and scroll the code block down to see added script code. Add it too.

The browser cache may need to be cleared and/or the page refreshed to see changes.

mistermick
05-17-2012, 05:36 PM
Man you're a genius... working perfectly. (email me your paypal address)
Do you think there's a way I could have the first tab already hidden when we arrive of the site?

jscheuer1
05-17-2012, 07:24 PM
I don't think I can email you my PayPal info. (Your email address isn't accessible to me, and your PM box isn't active yet.) You may make a donation to me via PayPal if you like though:

Donate (http://home.comcast.net/~jscheuer1/side/donate.htm)

As to your question, add this stylesheet (highlighted) after the link tag for the contentslider.css file:


<link href="css/mb.YTVPlayer.css" media="all" rel="stylesheet" type="text/css">

<link rel="stylesheet" type="text/css" href="contentslider.css" />
<style type="text/css" title="contentslidertemp">
#slider1 .contentdiv {visibility: hidden !important;}
</style>
<script type="text/javascript" src="contentslider.js">

/***********************************************
* Featured Content Slider- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<style type="text/css">
body{
margin:0;
backgroun . . .

Change this in the script code we added:


$('.toc').click(function(){
$('#slider1 .contentdiv').css({visibility: 'visible'});
});

to:


$('.toc').click(function(e){
$('#slider1 .contentdiv').css({visibility: 'visible'});
if(e.pageX){
$('style[title="contentslidertemp"]').remove();
}
});