Solved

How do I add an overlay using css and javascript?

Posted on 2016-09-02
5
54 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 52

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 52

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 52

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

920 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now