How do I add an overlay using css and javascript?

Hi,

I have the below html structure to create content on my page:

<div class="BreakingNewsController easing" id="breakingnews2" style="display:none;">
	<div class="content-overlay" id="content-overlay">
        	<div class="bn-title"></div>
        	<a class="boxclose" id="boxclose"></a>
                <ul>
                   <li>
                      <a href....>Title</a>
                   </li>
                </ul>
                <div class="bn-arrows"><span class="bn-arrows-left"></span><span class="bn-arrows-right"></span></div>	
            </div>
        </div>
        <a href="#" id="activator">News</a>

Open in new window


I have the below css:

.BreakingNewsController{width:100%; overflow:hidden; background:#FFF; height:auto; position:relative;}
.BreakingNewsController .bn-title{display:inline-block; float:left; padding:10px 20px; background:#5aa628; color:#FFF;}
.BreakingNewsController ul{padding:0; margin:0; display:block; list-style:none; position:absolute; left:180px; right:50px;}
.BreakingNewsController ul li{list-style:none; padding:10px 20px; display:none;}
.BreakingNewsController ul li a{text-decoration:none; color:#333; display:inline-block; overflow:hidden; padding:0;}
.BreakingNewsController .bn-arrows{display:inline-block; float:right; width:50px; position:absolute; right:0; top:0; bottom:0;}
.BreakingNewsController .bn-arrows span{display:block; width:20px; position:absolute; top:0; bottom:0; cursor:pointer; opacity:0.2;}
.BreakingNewsController .bn-arrows span:hover{opacity:1;}
.BreakingNewsController .bn-arrows-left{ left:0; background:url('../../Images/Ticker/bn-arrows.png') left center no-repeat;}
.BreakingNewsController .bn-arrows-right{right:10px; background:url('../../Images/Ticker/bn-arrows.png') right center no-repeat;}

.easing a, .easing span{transition:.25s linear; -moz-transition:.25s linear; -webkit-transition:.25s linear;}

.red-text{color:red !important; font-weight:600 !important;}

.content-overlay{
    position:fixed;
    top:-200px;
    left:30%;
    right:30%;
    background-color:#fff;
    color:#7F7F7F;
    padding:20px;
    border:2px solid #ccc;
    -moz-border-radius: 20px;
    -webkit-border-radius:20px;
    -khtml-border-radius:20px;
    -moz-box-shadow: 0 1px 5px #333;
    -webkit-box-shadow: 0 1px 5px #333;
    z-index:101;
}
a.boxclose{
    float:right;
    margin-top:-30px;
    margin-right:-30px;
    cursor:pointer;
    color: #fff;
    border: 1px solid #AEAEAE;
    border-radius: 30px;
    background: #605F61;
    font-size: 31px;
    font-weight: bold;
    display: inline-block;
    line-height: 0px;
    padding: 11px 3px;       
}

.boxclose:before {
    content: "×";

}

Open in new window


I have the below javascript:

(function(jQuery){

	$.fn.BreakingNews = function(settings){
			var defaults={
					background		:'#FFF',
					title			:'STATUS',
					titlecolor		:'#FFF',
					titlebgcolor	:'#001b38',
					linkcolor		:'#001b38',
					linkhovercolor	:'#0000FF',
					fonttextsize	:16,
					isbold			:false,
					border			:'solid 2px #001b38',
					width			:'100%',
					autoplay		:true,
					timer			:3000,
					modulid			:'breakingnews2',
					effect			:'slide'	//or fade	
				};
				
			var settings=$.extend(defaults,settings);
			return this.each(function(){
				settings.modulid="#"+$(this).attr("id");
				var timername=settings.modulid;
				var activenewsid=1;
				
				if (settings.isbold==true)
					fontw='bold';
				else
					fontw='normal';	
					
				if (settings.effect=='slide')
					$(settings.modulid+' ul li').css({'display':'block'});
				else
					$(settings.modulid+' ul li').css({'display':'none'});				
				
				$(settings.modulid+' .bn-title').html(settings.title);
				$(settings.modulid).css({'width':settings.width, 'background':settings.background, 'border':settings.border, 'font-size':settings.fonttextsize });
				$(settings.modulid+' ul').css({'left':$(settings.modulid+' .bn-title').width()+40});
				$(settings.modulid+' .bn-title').css({'background':settings.titlebgcolor,'color':settings.titlecolor,'font-weight':fontw});
				$(settings.modulid+' ul li a').css({'color':settings.linkcolor,'font-weight':fontw,'height':parseInt(settings.fonttextsize)+6});
				$(settings.modulid+' ul li').eq( parseInt(activenewsid-1) ).css({'display':'block'});
				
				// Links hover events ......
				$(settings.modulid+' ul li a').hover(function() 
					{
                    	$(this).css({'color':settings.linkhovercolor});
					},
					function ()
					{
						$(this).css({'color':settings.linkcolor});
					}
				);
				
				
				// Arrows Click Events ......
				$(settings.modulid+' .bn-arrows span').click(function(e) {
                    if ( $(this).attr('class')=="bn-arrows-left" )
						BnAutoPlay('prev');
					else
						BnAutoPlay('next');
                });
				
				// Timer events ...............
				if (settings.autoplay==true)
				{
					timername=setInterval(function(){BnAutoPlay('next')},settings.timer);					
					$(settings.modulid).hover(function()
						{
							clearInterval(timername);
						},
						function()
						{
							timername=setInterval(function(){BnAutoPlay('next')},settings.timer);
						}
					);
				}
				else
				{
					clearInterval(timername);
				}
								
				//timer and click events function ...........
				function BnAutoPlay(pos)
				{
					if ( pos=="next" )
					{
						if ( $(settings.modulid+' ul li').length>activenewsid )
							activenewsid++;
						else
							activenewsid=1;
					}
					else
					{
						if (activenewsid-2==-1)
							activenewsid=$(settings.modulid+' ul li').length;
						else
							activenewsid=activenewsid-1;						
					}
					
					if (settings.effect=='fade')
					{
						$(settings.modulid+' ul li').css({'display':'none'});
						$(settings.modulid+' ul li').eq( parseInt(activenewsid-1) ).fadeIn();
					}
					else
					{
						$(settings.modulid+' ul').animate({'marginTop':-($(settings.modulid+' ul li').height()+20)*(activenewsid-1)});
					}
				}
								
				// calculating link size function ...........
				$(window).resize(function(e) {
                    if ( $(settings.modulid).width()<360 )
					{
						$(settings.modulid+' .bn-title').html('&nbsp;');
						$(settings.modulid+' .bn-title').css({ 'width':'4px', 'padding':'10px 0px'});
						$(settings.modulid+' ul').css({'left':4});
					}else
					{
						$(settings.modulid+' .bn-title').html(settings.title);
						$(settings.modulid+' .bn-title').css({ 'width':'auto', 'padding':'10px 20px'});
						$(settings.modulid+' ul').css({'left':$(settings.modulid+' .bn-title').width()+40});
					}
                });
			});
			
		};
		
})(jQuery);

Open in new window


I am trying to incorporate the below javascript into my javascript file to place my content within an overlay on my page but I'm struggling to understand where I should place this javascript for it to work:

$(document).ready(function(){
$('#activator').click(function(){
        $('#breakingnews2').fadeIn(200,function(){
            $('#content-overlay').animate({'top':'20px'},200);
        });
        return false;
    });
    $('#boxclose').click(function(){
        $('#content-overlay').animate({'top':'-200px'},500,function(){
            $('#breakingnews2').fadeOut('fast');
        });
    })();
 
});

Open in new window


Any assistance appreciated.
Martin SpaldingAsked:
Who is Participating?
 
Julian HansenCommented:
Doesn't work how - errors / unexpected / no result?

I put your code into a test container here - seems to work - but then I don't know what you were expecting to do.

What does this not do that it should?
0
 
Julian HansenCommented:
You can place it anywhere after the inclusion of the jQuery library.

The
$(document).ready(function()

Open in new window

or short version  
$(function() 

Open in new window

Will run when the document is ready.
0
 
Martin SpaldingAuthor Commented:
I've placed it on line 2 in my .js file but the overlay doesn't appear:

(function(jQuery){

	$('#activator').click(function()
			{
	        	$('#breakingnews2').fadeIn(200,function()
	        	{
	            	$('#content-overlay').animate({'top':'20px'},200);
	        	});
	        	return false; 
	        });     
	   	    $('#boxclose').click(function()
	   	    {
	        	$('#content-overlay').animate({'top':'-200px'},500,function()
	        	{
	            	$('#breakingnews2').fadeOut('fast');
	        	});
	        });
	        
	$.fn.BreakingNews = function(settings)
	{
			var defaults={
					background		:'#FFF',
					title			:'STATUS',
					titlecolor		:'#FFF',
					titlebgcolor	:'#001b38',
					linkcolor		:'#001b38',
					linkhovercolor	:'#0000FF',
					fonttextsize	:16,
					isbold			:false,
					border			:'solid 2px #001b38',
					width			:'100%',
					autoplay		:true,
					timer			:3000,
					modulid			:'breakingnews2',
					effect			:'slide'	//or fade	
				};
				
			var settings=$.extend(defaults,settings);
			return this.each(function()
			{
				settings.modulid="#"+$(this).attr("id");
				var timername=settings.modulid;
				var activenewsid=1;
				
				if (settings.isbold==true)
					fontw='bold';
				else
					fontw='normal';	
					
				if (settings.effect=='slide')
					$(settings.modulid+' ul li').css({'display':'block'});
				else
					$(settings.modulid+' ul li').css({'display':'none'});				
				
				$(settings.modulid+' .bn-title').html(settings.title);
				$(settings.modulid).css({'width':settings.width, 'background':settings.background, 'border':settings.border, 'font-size':settings.fonttextsize });
				$(settings.modulid+' ul').css({'left':$(settings.modulid+' .bn-title').width()+40});
				$(settings.modulid+' .bn-title').css({'background':settings.titlebgcolor,'color':settings.titlecolor,'font-weight':fontw});
				$(settings.modulid+' ul li a').css({'color':settings.linkcolor,'font-weight':fontw,'height':parseInt(settings.fonttextsize)+6});
				$(settings.modulid+' ul li').eq( parseInt(activenewsid-1) ).css({'display':'block'});
				
				// Links hover events ......
				$(settings.modulid+' ul li a').hover(function() 
					{
                    	$(this).css({'color':settings.linkhovercolor});
					},
					function ()
					{
						$(this).css({'color':settings.linkcolor});
					}
				);
				
				
				// Arrows Click Events ......
				$(settings.modulid+' .bn-arrows span').click(function(e)
				{
                    if ( $(this).attr('class')=="bn-arrows-left" )
						BnAutoPlay('prev');
					else
						BnAutoPlay('next');
                });
				
				// Timer events ...............
				if (settings.autoplay==true)
				{
					timername=setInterval(function(){BnAutoPlay('next')},settings.timer);					
					$(settings.modulid).hover(function()
						{
							clearInterval(timername);
						},
						function()
						{
							timername=setInterval(function(){BnAutoPlay('next')},settings.timer);
						}
					);
				}
				else
				{
					clearInterval(timername);
				}
								
				//timer and click events function ...........
				function BnAutoPlay(pos)
				{
					if ( pos=="next" )
					{
						if ( $(settings.modulid+' ul li').length>activenewsid )
							activenewsid++;
						else
							activenewsid=1;
					}
					else
					{
						if (activenewsid-2==-1)
							activenewsid=$(settings.modulid+' ul li').length;
						else
							activenewsid=activenewsid-1;						
					}
					
					if (settings.effect=='fade')
					{
						$(settings.modulid+' ul li').css({'display':'none'});
						$(settings.modulid+' ul li').eq( parseInt(activenewsid-1) ).fadeIn();
					}
					else
					{
						$(settings.modulid+' ul').animate({'marginTop':-($(settings.modulid+' ul li').height()+20)*(activenewsid-1)});
					}
				}
								
				// calculating link size function ...........
				$(window).resize(function(e) {
                    if ( $(settings.modulid).width()<360 )
					{
						$(settings.modulid+' .bn-title').html('&nbsp;');
						$(settings.modulid+' .bn-title').css({ 'width':'4px', 'padding':'10px 0px'});
						$(settings.modulid+' ul').css({'left':4});
					}else
					{
						$(settings.modulid+' .bn-title').html(settings.title);
						$(settings.modulid+' .bn-title').css({ 'width':'auto', 'padding':'10px 20px'});
						$(settings.modulid+' ul').css({'left':$(settings.modulid+' .bn-title').width()+40});
					}
                });
			});
		};		
})(jQuery);

Open in new window

0
 
Martin SpaldingAuthor Commented:
My original js (without the overlay) builds content within a <ul><li> structure (multiple items within a rotator), when adding the overlay js the content doesn't show in the overlay as it does without the overlay, it's as your container show, i.e. just a green box. Wondering if there's conflicts in the js?

Thanks.
0
 
Julian HansenCommented:
I am not understanding what you want here? What is it you are expecting the code to do that it is not?

I cannot see where you are binding the BreakingNews function to any element? I am assuming somewhere you have
$('#breakingnews2').BreakingNews()

Open in new window


Or similar - but without having all the pieces of the puzzle - difficult to see what the question is.

Can you elaborate on what it is you are wanting help with.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.