Results 1 to 6 of 6

Thread: js function to click content off?

  1. #1
    Join Date
    May 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question js function to click content off?

    1) Script Title: Featured Content Slider v2.4

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...tentslider.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!

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Hmm can you clarify what you mean by "click the content off"? Do you mean empty the slideshow so it appears blank and paused?
    DD Admin

  3. #3
    Join Date
    May 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Add the highlighted as shown (from the page's source code, additions highlighted):

    Code:
    <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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    May 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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?

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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

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

    Code:
    	<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:

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

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •