Improve company productivity with a Business Account.Sign Up

x
?
Solved

How do I add an overlay using css and javascript?

Posted on 2016-09-02
5
Medium Priority
?
149 Views
Last Modified: 2016-09-26
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.
0
Comment
Question by:Martin Spalding
  • 3
  • 2
5 Comments
 
LVL 62

Expert Comment

by:Julian Hansen
ID: 41781646
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
 

Author Comment

by:Martin Spalding
ID: 41781715
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
 
LVL 62

Accepted Solution

by:
Julian Hansen earned 2000 total points
ID: 41781754
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
 

Author Comment

by:Martin Spalding
ID: 41781778
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
 
LVL 62

Assisted Solution

by:Julian Hansen
Julian Hansen earned 2000 total points
ID: 41781984
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

Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

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.

Join & Write a Comment

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
There's never been a better time to become a computer scientist. Employment growth in the field is expected to reach 22% overall by 2020, and if you want to get in on the action, it’s a good idea to think about at least minoring in computer science …
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…

606 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question