Solved

How do I add an overlay using css and javascript?

Posted on 2016-09-02
5
80 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
5 Comments
 
LVL 57

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 57

Accepted Solution

by:
Julian Hansen earned 500 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 57

Assisted Solution

by:Julian Hansen
Julian Hansen earned 500 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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Find out what you should include to make the best professional email signature for your organization.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

688 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