Jump to content


Photo

POPUPS - Player News / Article News / Trades / MFL Messages & League Reminders


153 replies to this topic

#1 theeohiostate

theeohiostate

    Veteran

  • Members
  • PipPipPip
  • 3,358 posts
  • Gender:Male
  • Location:O-H-I-O

Posted 01 March 2017 - 10:25 AM

POPUPS - Player News / Article News / Trades / MFL Messages & League Reminders
 
Habmans MFL Popup - (sweetest add on yet !)
Script by Habman - Styling by TOS
 
added popup for login and player search  3-28-17
 
The following script includes all four popups with a var for each to enable or disable any of the four.
 
If your installing this popup on any of the new MFL skins , you will not need any css, all skins have styles to match the skin included.
 
Read here if your hiding the MFL Default menu or using your own menu - http://forums.myfant...=35518&p=190417
 
 
If you are installing this on a custom site or a skin in which you have altered the color theme , then you will need to apply a stylesheet or add to your existing stylesheet.
 
Here is the new script - please make sure you have a copy of jquery library loaded in a header message and whatever homepage message you are installing this new script you will need to mark that as a header as well.
 
 
UPDATE 3-28-2017 to add login and search popups 
UPDATE 9-25-2018 added font-awesome as default and bug fix with regards to determining recent news
if using the franchise team to top script - please update that as well here - http://forums.myfant...=34232&p=182717
 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 

 

<script>
//ENABLE PLAYER NEWS POPUP
var MFLPopupEnablePlayerNews = true;
var MFLPopupEnableQuickIcon = false;

//ENABLE ARTICLE POPUP
var MFLPopupEnableArticle = true;

//CLICKING PLAYER LINK OPENS POPUP
var MFLPlayerPopupLinkPopup = true; 

//ENABLE NOTIFICATION - 7 SETTING OPTIONS
var MFLPopupEnableAutoNotification = true;
var MFLPopupEnableTrade = true;
var MFLPopupEnableTradePoll = true;
var MFLPopupEnableReminders = true;
var MFLPopupEnableMessages = true;
var MFLPopupEnableCommishMessage = true;
var MFLPopupCommishMessage = "<p>Enter Custom League Message Here</p>";

//ENABLE MENU POPUP LOGIN AND SEARCH
var ShowMFLlogin = false; // Set this to true to have a login button added to menu
var ShowMFLsearch = false; // Set this to true to have a player button added to menu
var LoginSearchMobileCSS = false; // If using the login or search popup and site designed for mobile set this to true
</script>

<script src="//www.nitrografixx.com/MFL-Popups/popup.js"></script>

 

For custom designers or those altering the default MFL Skin theme coloring , here is the CSS to include. If including within a homepage message , wrap the CSS with <style>INSERT CSS HERE</style>

 
Recommend putting this in all your css files to prevent flickering of mfl loaded message and reminders before our script loads
/* RECOMMEND EACH USER TO INSTALL THIS IN CSS IF USING NOTIFICATION POPUP */
.homepagemessage {display:none;} 

 

CSS TO INCLUDE ON ALL CUSTOM SITES TO STYLE

/* STYLE MFL POPUP BOXES
========================= */

/* Loading circle */
.MFLPlayerPopupLoader{border-color:#eee;border-top-color:#870714;}

/* Close button displayed in caption */
#MFLPlayerPopupClose{color:#000;border-color:#000;background:#fff;}
#MFLPlayerPopupClose:hover{color:#fff;border-color:#000;background:#870714;}

/* Background color for the popup report boxes */
#MFLPlayerPopupContainer .report {background:#fff;}   /* if your design already gives a bg color to reports you will not need this unless its a transparent color */

/* Tabs located on player news popup */
ul.MFLPlayerPopupTab{border-bottom-color:#870714;background:#080808;}
ul.MFLPlayerPopupTab li{border-right-color:#000;}
ul.MFLPlayerPopupTab li a{color:#fff;border-right-color:#fff;}
ul.MFLPlayerPopupTab li a:hover,ul.MFLPlayerPopupTab li a.active{color:#fff;background:#870714;}

/* Border around player images located in player news popup */
#MFLPlayerPopupContainer .articlepicture {border-color:#870714;}

/* Color for player bio titles and warning messages */
#MFLPlayerPopupContainer .warning {color:#870714;}

 

 

HERE IS THE CSS IF YOU WANT THE POPUPS TO BE RESPONSIVE FOR SITES THAT ARE ZOOMED IN ON MOBILES (This is already included on all skins)

/*  MFL POPUP RESPONSIVE DESIGN
================================ */

@media only screen and (max-width:48.000em){
	.myfantasyleague_menu ul li.notification-icon{position:absolute;left:90px;left:5.625rem;top:3px;top:0.188rem;}
}
@media only screen and (max-width:47.000em){
	#MFLPlayerPopupHeader{display:none;}
	#MFLPlayerPopupBioTab{display:table-cell;}
	.MFLPopTabWrap{margin-top:8px;margin-top:0.500rem;}
	#MFLPlayerPopupContainer .isMedia{display:none;} 
	#MFLPlayerPopupContainer{max-height:385px;max-height:24.063rem;} 	
	#MFLPlayerPopupContainer.MFLPlayerPopupNotificationContainer{max-height:300px;max-height:18.750rem;}
}
@media only screen and (max-width:35.500em) {
	#MFLPlayerPopupHeader{display:none;}
	#MFLPlayerPopupBioTab{display:table-cell!important;}
	#MFLPlayerPopupContainer{max-height:298px;max-height:18.625rem;} 
	#MFLPlayerPopupNews,#MFLPlayerPopupBio,#MFLPlayerPopupStatsHistory,#MFLPlayerPopupStats{max-height:192px;max-height:12.000rem;}
	#MFLPlayerPopupContainer .isMedia{display:none;} 
}
@media only screen and (max-height:35.500em) and (orientation:landscape) {
	#MFLPlayerPopupHeader{display:none;}
	#MFLPlayerPopupBioTab{display:table-cell!important;}
	.MFLPopTabWrap{margin-top:8px;margin-top:0.500rem;}
	#MFLPlayerPopupContainer .isMedia{display:none;} 
	#MFLPlayerPopupContainer{max-height:235px;max-height:14.688rem}
	#MFLPlayerPopupNews,#MFLPlayerPopupBio,#MFLPlayerPopupStatsHistory,#MFLPlayerPopupStats{max-height:128px;max-height:8.000rem;}
	#MFLPlayerPopupContainer.MFLPlayerPopupNotificationContainer{max-height:250px;max-height:15.625rem;}
	#MFLPlayerPopupContainer.MFLPlayerPopupNotificationContainer .MFLPlayerPopupTabContent{max-height:158px;max-height:9.875rem;}
}
@media only screen and (max-width:35.500em) {
	.screen-hide{display:none!important;}
}

 

For advanced users here are some additional vars that will define whether to use font-awesome (default) or custom images and define player news icons and nfl images.  Hint: the below script should appear before the popup.js file

 

<script>
var MFLPopupUseFontAwesome = true;

//FONT AWESOME VARS
var MFLPopupWelcomeFontAwesome = '<i title="Login" class="fa fa-lock MFLPopupFontAwesome MFLPopupFontAwesomeMenu MFLPopupWelcome" aria-hidden="true"></i>';
var MFLPopupSearchFontAwesome = '<i title="Player Search" class="fa fa-search MFLPopupFontAwesome MFLPopupFontAwesomeMenu MFLPopupSearch" aria-hidden="true"></i>';
var MFLPopupNotifyFontAwesome = '<i title="Notifications" class="fa fa-info-circle MFLPopupFontAwesome MFLPopupFontAwesomeMenu MFLPopupNotify" aria-hidden="true"></i>';
var MFLPopupNotify2FontAwesome = '<i class="fa fa-info-circle MFLPopupFontAwesome MFLPopupFontAwesomeCaption MFLPopupNotify2" aria-hidden="true"></i>';

//ICON IMAGE VARS
//Colors supported for below: red, blue, green, neonblue, brown, orange, white, black, grey, red, yellow 
var MFLWelcomeIcon = "//www.nitrografixx.com/MFL-Popups/login_icons/login-red.png";
var ShowMFLSearchIcon = "//www.nitrografixx.com/MFL-Popups/search_icons/search-red.png";
var MFLPlayerPopupNotify = "//www.nitrografixx.com/MFL-Popups/alert-icon-red.png";

//PLAYER NEWS ICONS
var MFLPlayerPopupNewsNone = "//www.nitrografixx.com/MFL-Popups/newsNone.gif";
var MFLPlayerPopupNewsOld = "//www.nitrografixx.com/MFL-Popups/newsOld.gif";
var MFLPlayerPopupNewsNew = "//www.nitrografixx.com/MFL-Popups/newsNew.gif";

//NFL LOGOS
var MFLPlayerPopupIncludeNFLLogo = true;
var MFLPlayerPopupLogoPath = "//www.nitrografixx.com/MFL-Popups/NFL-custom-logos/";
var MFLPlayerPopupLogoTallPath = "//www.nitrografixx.com/MFL-Popups/NFL-custom-logos-tall/";
var MFLPlayerPopupLogoExt = "png"; // NFL LOGOS USE MFL's 3-LETTER NFL ABBREV example Green Bay Packers GBP.png
var MFLPlayerPopupLogoTallExt = "png"; // NFL LOGOS USE MFL's 3-LETTER NFL ABBREV example Green Bay Packers GBP.png
var MFLPlayerPopupSilhouette = "//www.nitrografixx.com/MFL-Popups/silhouette.png";

</script>

 

 

 

 


FREE Player Cuts Collection
http://www.nitrograf...nfl-playercuts/

#2 theeohiostate

theeohiostate

    Veteran

  • Members
  • PipPipPip
  • 3,358 posts
  • Gender:Male
  • Location:O-H-I-O

Posted 03 March 2017 - 07:37 AM

Habman has finished up this script and i've got it all formatted and styled , i have updated the post .  Include ALL css mentioned for testing .

 

popup.jpg


FREE Player Cuts Collection
http://www.nitrograf...nfl-playercuts/

#3 dejesusofnazareth

dejesusofnazareth

    Veteran

  • Members
  • PipPipPip
  • 171 posts
  • Gender:Male
  • Location:DynastyOGs

Posted 03 March 2017 - 12:28 PM

nice work guys



#4 theeohiostate

theeohiostate

    Veteran

  • Members
  • PipPipPip
  • 3,358 posts
  • Gender:Male
  • Location:O-H-I-O

Posted 03 March 2017 - 01:03 PM

Demo league here - http://www60.myfanta...2017/home/29875

 

View on mobile and desktop - all skins will look the same and match coloring of whatever skin is selected with no user css needed


FREE Player Cuts Collection
http://www.nitrograf...nfl-playercuts/

#5 UFFLCommish

UFFLCommish

    Veteran

  • Members
  • PipPipPip
  • 344 posts
  • Gender:Male
  • Location:Greenville, SC

Posted 03 March 2017 - 01:20 PM

Cool script. Looks like it changes the size of the menu on the Ocean Blue skin though.

 

menu.png



#6 theeohiostate

theeohiostate

    Veteran

  • Members
  • PipPipPip
  • 3,358 posts
  • Gender:Male
  • Location:O-H-I-O

Posted 03 March 2017 - 01:22 PM

Cool script. Looks like it changes the size of the menu on the Ocean Blue skin though.

 

menu.png

 

 

you didn't include the css did you ? please read the details before installing

 

 

BASE FORMATTING CSS - HOPEFULLY THIS WILL BE INCLUDED ON ALL MFL SITES IN THE MFLBaseCSS.css file - will let you know if this needs to stay or go in a few days.


FREE Player Cuts Collection
http://www.nitrograf...nfl-playercuts/

#7 UFFLCommish

UFFLCommish

    Veteran

  • Members
  • PipPipPip
  • 344 posts
  • Gender:Male
  • Location:Greenville, SC

Posted 03 March 2017 - 01:26 PM

No, just the script in a header. I removed the league's css file and no change so I don't know why the icon is bigger than your test site.



#8 theeohiostate

theeohiostate

    Veteran

  • Members
  • PipPipPip
  • 3,358 posts
  • Gender:Male
  • Location:O-H-I-O

Posted 03 March 2017 - 01:29 PM

No, just the script in a header. I removed the league's css file and no change so I don't know why the icon is bigger than your test site.

 

 

Did you include the CSS i have posted in this thread ? If you do not include it , it will not work. Include all css as detailed in the post , after MFL updates their files , then you can remove all the css , if your using a skin. If using a custom site , you can remove all css , except the small portion of style to match your site.


FREE Player Cuts Collection
http://www.nitrograf...nfl-playercuts/

#9 UFFLCommish

UFFLCommish

    Veteran

  • Members
  • PipPipPip
  • 344 posts
  • Gender:Male
  • Location:Greenville, SC

Posted 03 March 2017 - 01:43 PM

I included it initially but must have uploaded the wrong css file.

 

Works now and looks great.

 

Thanks TOS!



#10 theeohiostate

theeohiostate

    Veteran

  • Members
  • PipPipPip
  • 3,358 posts
  • Gender:Male
  • Location:O-H-I-O

Posted 03 March 2017 - 02:23 PM

The notification icon is set to appear at the end of the MFL main menu , if you are hiding the main menu or using your own custom menu , you can place the button or use text and place the popup notification anywhere on your site by triggering the onclick event used

 

Examples

<li><a  onclick="MFLPlayerPopupPopulateOnload(true)">Notifications</a></li>

<a onclick="MFLPlayerPopupPopulateOnload(true)">Notifications</a>

<div onclick="MFLPlayerPopupPopulateOnload(true)">Notifications</div>

<img src="//www.nitrografixx.com/MFL-Popups/alert-icon-yellow.png" title="Notifications" onclick="MFLPlayerPopupPopulateOnload(true)">
 

 

 

Place this HTML in your current custom menu , or anywhere on your site , you now have access to the notifications


FREE Player Cuts Collection
http://www.nitrograf...nfl-playercuts/

#11 NateDawg

NateDawg

    Veteran

  • Members
  • PipPipPip
  • 54 posts
  • Gender:Male

Posted 03 March 2017 - 07:42 PM

I'm having trouble getting this to work on my site. The icons are there, but nothing happens when you click them. What am I missing?

 

http://www58.myfanta...ns?L=14492&O=07



#12 theeohiostate

theeohiostate

    Veteran

  • Members
  • PipPipPip
  • 3,358 posts
  • Gender:Male
  • Location:O-H-I-O

Posted 03 March 2017 - 08:17 PM

I'm having trouble getting this to work on my site. The icons are there, but nothing happens when you click them. What am I missing?

 

http://www58.myfanta...ns?L=14492&O=07

 

 

not sure if its because of the MFL Auction error , will check out tomorrow unless Habman see the post and can answer tonight

 

please duplicate your site and remove everything but the popup script/css/jquery library  - and you can leave the MFL skin selected 

 

you have a lot of other apps running so just making sure no conflict


FREE Player Cuts Collection
http://www.nitrograf...nfl-playercuts/

#13 UFFLCommish

UFFLCommish

    Veteran

  • Members
  • PipPipPip
  • 344 posts
  • Gender:Male
  • Location:Greenville, SC

Posted 03 March 2017 - 08:27 PM

It was working earlier today but now nothing is happening when you click on the notification icon or the player news icon.



#14 NateDawg

NateDawg

    Veteran

  • Members
  • PipPipPip
  • 54 posts
  • Gender:Male

Posted 03 March 2017 - 08:32 PM

I'm having trouble getting this to work on my site. The icons are there, but nothing happens when you click them. What am I missing?

 

http://www58.myfanta...ns?L=14492&O=07

 

 

not sure if its because of the MFL Auction error , will check out tomorrow unless Habman see the post and can answer tonight

 

please duplicate your site and remove everything but the popup script/css/jquery library  - and you can leave the MFL skin selected 

 

you have a lot of other apps running so just making sure no conflict

Thanks for the suggestion. I think I found I had older version of jquery library loading in another module. Once I got rid of that, everything worked.



#15 UFFLCommish

UFFLCommish

    Veteran

  • Members
  • PipPipPip
  • 344 posts
  • Gender:Male
  • Location:Greenville, SC

Posted 03 March 2017 - 08:33 PM

I'll look for that as well.





Reply to this topic



  


1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users