GetDotted Domains

Viewing Thread:
"more background image stuff"

The "Freeola Customer Forum" forum, which includes Retro Game Reviews, has been archived and is now read-only. You cannot post here or create a new thread or review on this forum.

Fri 04/01/02 at 17:37
Regular
Posts: 787
Is it possible to stretch a background image in a table, so it fills the width and height of the cell, unrepeated?!
Tue 08/01/02 at 08:37
Regular
"l33t cs50r"
Posts: 2,956
Right... CSS...

You need to define a new CSS attribute int he style sheet called something like:

.cellbkgnd

with something like this:

.cellbkgnd{
background : transparent url(sitename/images/background_texture.gif) no-repeat fixed;
}

if applyig to a single cell, apply to the TD of that cell. There is a scale option but this is CSS3 and is yrt to be supported fully.

I'll keep at it as I had to use soethng like this a couple of months ago for a client.

The easiest option would be to fix the cell width and define the cell height with a leading cell with a 1pix wide transparent gif in it set at he height you wanted (NS4 doesn't recognize cell heights)

The just place the image as the cell background.

Example:







spacer
blah blah!!


other wise it would be:



I'll eep working at it.
Tue 08/01/02 at 08:23
Regular
"l33t cs50r"
Posts: 2,956
monkey_man wrote:
> If the table is a definite position, width and height, then you can do it with
> layers. Is it?

Avoid layers... DHTML isn't widely supported yet and has some dodgy results!! It can be done with CSS...
Tue 08/01/02 at 08:22
Regular
"l33t cs50r"
Posts: 2,956
zeldapro wrote:
> Would this work???



I put
> this underneath the tag above the Links tag e.g<br /> > <br /> <br /> <style><br /> BODY { color: #000000 ;background: #EFEFEF url(bgname.gif)<br /> > bottom right no-repeat fixed 100% }<br /> A:link{ color: #000000; text-decoration:<br /> > none }<br /> A:active{ color: #991111; text-decoration: none }<br /> A:hover { color:<br /> > #111199; text-decoration: none }<br /> A:visited { text-decoration: none<br /> > }<br /> </style></head><br /> <br /> It gives me different coloured links etc. but<br /> > the background bit means that you have one picture in the bottom right hand<br /> > corner. although it isn't stretched to fit the whole page....it is a good<br /> > effect.<br /> <br /> No it wont as this affects the BODY not a specific table cell... </div> </div> </div> </div> <div class="row border-bottom"> <div class="container light"> <div class="span3 contents mobile-hide tablet-hide no-pad-top">   </div> <div class="span3 span-t4 span-m4 contents no-pad-top retain-initial-padding"> <div class="icon-button-container"> <a rel="nofollow" href="/ajax/report_post.php?thread_id=29164&post_id=1211898" class="report-button"> <div class="icon-button"><i class="fa fa-flag"></i> <span>Report</span></div> </a> </div> </div> </div> </div> <div class="row pad-top border-top border-bottom"> <div class="container dark"> <div class="span12 contents title"> <div style="float:right"> </div> Tue 08/01/02 at 08:22 </div> </div> </div> <div class="row"> <div class="container light"> <div class="span3 contents"> <div class="inline-block"> <div class="nickname"><a style="color:#fb0; border-color:#fb0;" href="/user_profile.php?user_id=55972416">Tyla</a></div> <div style="color:#fb0;" class="user-type">Regular</div> </div> <div class="tagline mobile-hide">"l33t cs50r"</div> <div class="avatar-wrapper"> <div class="avatar-container"> <img src="/assets/images/no_avatar.png" class="avatar"> </div> </div> <div class="posts-container mobile-hide"> Posts: 2,956 </div> </div> <div class="span9 contents"> <div style="word-wrap:break-word"> Darkus wrote:<br /> > Tyla, helloooooooooooooo?<br /> <br /> Hi... sorry... not online at weekends and had the day off work yesterday...<br /> <br /> Right...<br /> <br /> Images in table cells stretched to fit so they dont scale...<br /> <br /> 1)Are your tables relative or fixed in heignt and width?<br /> 2)Is the image to be repeated?<br /> 3)How big is the image?<br /> <br /> <br /> I'll read back throught he posts and hopefully come up with an answer bu the end of today... </div> </div> </div> </div> <div class="row border-bottom"> <div class="container light"> <div class="span3 contents mobile-hide tablet-hide no-pad-top">   </div> <div class="span3 span-t4 span-m4 contents no-pad-top retain-initial-padding"> <div class="icon-button-container"> <a rel="nofollow" href="/ajax/report_post.php?thread_id=29164&post_id=1211897" class="report-button"> <div class="icon-button"><i class="fa fa-flag"></i> <span>Report</span></div> </a> </div> </div> </div> </div> <div class="row pad-top border-top border-bottom"> <div class="container dark"> <div class="span12 contents title"> <div style="float:right"> </div> Mon 07/01/02 at 21:00 </div> </div> </div> <div class="row"> <div class="container light"> <div class="span3 contents"> <div class="inline-block"> <div class="nickname"><a style="color:#fb0; border-color:#fb0;" href="/user_profile.php?user_id=55960883">zeldapro</a></div> <div style="color:#fb0;" class="user-type">Regular</div> </div> <div class="tagline mobile-hide">"qwertyuiop!!"</div> <div class="avatar-wrapper"> <div class="avatar-container"> <img src="/assets/images/no_avatar.png" class="avatar"> </div> </div> <div class="posts-container mobile-hide"> Posts: 2,517 </div> </div> <div class="span9 contents"> <div style="word-wrap:break-word"> Would this work???<br /> <br /> <style><br /> BODY { color: #000000 ;background: #EFEFEF url(bgname.gif) bottom right no-repeat fixed 100% }<br /> </style><br /> <br /> I put this underneath the <title> tag above the Links tag e.g <br /> <br /> <style><br /> BODY { color: #000000 ;background: #EFEFEF url(bgname.gif) bottom right no-repeat fixed 100% }<br /> A:link{ color: #000000; text-decoration: none }<br /> A:active{ color: #991111; text-decoration: none }<br /> A:hover { color: #111199; text-decoration: none }<br /> A:visited { text-decoration: none }<br /> </style></head><br /> <br /> It gives me different coloured links etc. but the background bit means that you have one picture in the bottom right hand corner. although it isn't stretched to fit the whole page....it is a good effect. </div> </div> </div> </div> <div class="row border-bottom"> <div class="container light"> <div class="span3 contents mobile-hide tablet-hide no-pad-top">   </div> <div class="span3 span-t4 span-m4 contents no-pad-top retain-initial-padding"> <div class="icon-button-container"> <a rel="nofollow" href="/ajax/report_post.php?thread_id=29164&post_id=1211896" class="report-button"> <div class="icon-button"><i class="fa fa-flag"></i> <span>Report</span></div> </a> </div> </div> </div> </div> <div class="row pad-top border-top border-bottom"> <div class="container dark"> <div class="span12 contents title"> <div style="float:right"> </div> Mon 07/01/02 at 16:13 </div> </div> </div> <div class="row"> <div class="container light"> <div class="span3 contents"> <div class="inline-block"> <div class="nickname"><a style="color:#fb0; border-color:#fb0;" href="/user_profile.php?user_id=55962869">Darkus</a></div> <div style="color:#fb0;" class="user-type">Regular</div> </div> <div class="tagline mobile-hide">"..."</div> <div class="avatar-wrapper"> <div class="avatar-container"> <img src="/assets/images/no_avatar.png" class="avatar"> </div> </div> <div class="posts-container mobile-hide"> Posts: 890 </div> </div> <div class="span9 contents"> <div style="word-wrap:break-word"> Tyla, helloooooooooooooo? </div> </div> </div> </div> <div class="row border-bottom"> <div class="container light"> <div class="span3 contents mobile-hide tablet-hide no-pad-top">   </div> <div class="span3 span-t4 span-m4 contents no-pad-top retain-initial-padding"> <div class="icon-button-container"> <a rel="nofollow" href="/ajax/report_post.php?thread_id=29164&post_id=1211895" class="report-button"> <div class="icon-button"><i class="fa fa-flag"></i> <span>Report</span></div> </a> </div> </div> </div> </div> <div class="row pad-top border-top border-bottom"> <div class="container dark"> <div class="span12 contents title"> <div style="float:right"> </div> Sat 05/01/02 at 13:27 </div> </div> </div> <div class="row"> <div class="container light"> <div class="span3 contents"> <div class="inline-block"> <div class="nickname"><a style="color:#fb0; border-color:#fb0;" href="/user_profile.php?user_id=55929628">Turbonutter</a></div> <div style="color:#fb0;" class="user-type">Regular</div> </div> <div class="tagline mobile-hide">"Eff, you see, kay?"</div> <div class="avatar-wrapper"> <div class="avatar-container"> <img src="/assets/images/no_avatar.png" class="avatar"> </div> </div> <div class="posts-container mobile-hide"> Posts: 14,156 </div> </div> <div class="span9 contents"> <div style="word-wrap:break-word"> What? You see monkeys too? THANK GOD THERE'S SOMEONE ELSE! </div> </div> </div> </div> <div class="row border-bottom"> <div class="container light"> <div class="span3 contents mobile-hide tablet-hide no-pad-top">   </div> <div class="span3 span-t4 span-m4 contents no-pad-top retain-initial-padding"> <div class="icon-button-container"> <a rel="nofollow" href="/ajax/report_post.php?thread_id=29164&post_id=1211894" class="report-button"> <div class="icon-button"><i class="fa fa-flag"></i> <span>Report</span></div> </a> </div> </div> </div> </div> <div class="row pad-top border-top border-bottom"> <div class="container dark"> <div class="span12 contents title"> <div style="float:right"> </div> Sat 05/01/02 at 13:26 </div> </div> </div> <div class="row"> <div class="container light"> <div class="span3 contents"> <div class="inline-block"> <div class="nickname"><a style="color:#fb0; border-color:#fb0;" href="/user_profile.php?user_id=55962869">Darkus</a></div> <div style="color:#fb0;" class="user-type">Regular</div> </div> <div class="tagline mobile-hide">"..."</div> <div class="avatar-wrapper"> <div class="avatar-container"> <img src="/assets/images/no_avatar.png" class="avatar"> </div> </div> <div class="posts-container mobile-hide"> Posts: 890 </div> </div> <div class="span9 contents"> <div style="word-wrap:break-word"> I give up. </div> </div> </div> </div> <div class="row border-bottom"> <div class="container light"> <div class="span3 contents mobile-hide tablet-hide no-pad-top">   </div> <div class="span3 span-t4 span-m4 contents no-pad-top retain-initial-padding"> <div class="icon-button-container"> <a rel="nofollow" href="/ajax/report_post.php?thread_id=29164&post_id=1211893" class="report-button"> <div class="icon-button"><i class="fa fa-flag"></i> <span>Report</span></div> </a> </div> </div> </div> </div> <div class="row pad-top border-top border-bottom"> <div class="container dark"> <div class="span12 contents title"> <div style="float:right"> </div> Sat 05/01/02 at 13:14 </div> </div> </div> <div class="row"> <div class="container light"> <div class="span3 contents"> <div class="inline-block"> <div class="nickname"><a style="color:#fb0; border-color:#fb0;" href="/user_profile.php?user_id=55957027">monkey_man</a></div> <div style="color:#fb0;" class="user-type">Regular</div> </div> <div class="tagline mobile-hide">"Pouch Ape"</div> <div class="avatar-wrapper"> <div class="avatar-container"> <img src="/assets/images/no_avatar.png" class="avatar"> </div> </div> <div class="posts-container mobile-hide"> Posts: 14,499 </div> </div> <div class="span9 contents"> <div style="word-wrap:break-word"> What, bad idea to agree with a monkey? I'd always agree with one, otherwise they throw poo at you. </div> </div> </div> </div> <div class="row border-bottom"> <div class="container light"> <div class="span3 contents mobile-hide tablet-hide no-pad-top">   </div> <div class="span3 span-t4 span-m4 contents no-pad-top retain-initial-padding"> <div class="icon-button-container"> <a rel="nofollow" href="/ajax/report_post.php?thread_id=29164&post_id=1211892" class="report-button"> <div class="icon-button"><i class="fa fa-flag"></i> <span>Report</span></div> </a> </div> </div> </div> </div> <div class="row pad-top border-top border-bottom"> <div class="container dark"> <div class="span12 contents title"> <div style="float:right"> </div> Sat 05/01/02 at 13:13 </div> </div> </div> <div class="row"> <div class="container light"> <div class="span3 contents"> <div class="inline-block"> <div class="nickname"><a style="color:#fb0; border-color:#fb0;" href="/user_profile.php?user_id=55929628">Turbonutter</a></div> <div style="color:#fb0;" class="user-type">Regular</div> </div> <div class="tagline mobile-hide">"Eff, you see, kay?"</div> <div class="avatar-wrapper"> <div class="avatar-container"> <img src="/assets/images/no_avatar.png" class="avatar"> </div> </div> <div class="posts-container mobile-hide"> Posts: 14,156 </div> </div> <div class="span9 contents"> <div style="word-wrap:break-word"> I agree with the monkey. Bad idea. </div> </div> </div> </div> <div class="row border-bottom"> <div class="container light"> <div class="span3 contents mobile-hide tablet-hide no-pad-top">   </div> <div class="span3 span-t4 span-m4 contents no-pad-top retain-initial-padding"> <div class="icon-button-container"> <a rel="nofollow" href="/ajax/report_post.php?thread_id=29164&post_id=1211891" class="report-button"> <div class="icon-button"><i class="fa fa-flag"></i> <span>Report</span></div> </a> </div> </div> </div> </div> <div class="row gears-bottom"></div> <div class="row pad-top"> <div class="span12 pagination_container"> <div class="pagination_float"> <div class="mobile-hide"> <div class="page-label">Page:</div> <a href="?page=1"> <div class="page first">« First</div> </a> <a href="?page=1"> <div class="page">« Previous</div> </a> <a href="?page=1"> <div class="page ">1</div> </a> <a href="?page=2"> <div class="page current_page">2</div> </a> <a href="?page=3"> <div class="page ">3</div> </a> <a href="?page=4"> <div class="page ">4</div> </a> <a href="?page=3"> <div class="page">Next »</div> </a> <a href="?page=4"> <div class="page last">Last (4) »</div> </a> </div> <div class="mobile-show"> <div class="page-label">Page:</div> <div class="inline-block"> <select name="page_dropdown" id="page_dropdown" class="" ><option value="?page=1" >1</option><option value="?page=2" selected>2</option><option value="?page=3" >3</option><option value="?page=4" >4</option></select> </div> </div> </div> </div> </div> <div class="row pad-bottom"></div> </main><!-- .main --> <aside class="sidebar "> <nav aria-labelledby="sidebar-navigation"> <ul class="sidebar__card"> <li> <h3 id="sidebar-navigation" class="sidebar-navigation section-header bold smaller">Forum Links</h3> </li> <li class=""> <a href="//chat.freeola.com/"><b>Freeola's Archived Forums</b></a> </li> <li class=""> <a href="//chat.freeola.com/forum_rules.php">Forum Rules & Regulations</a> </li> <li class=""> <a href="//chat.freeola.com/chat_safety.php">Forum Safety & Guidelines</a> </li> <li class=""> <a href="//chat.freeola.com/top_posters.php">Top Posters</a> </li> <li class=""> <a href="//chat.freeola.com/hall_of_fame.php">Hall of Fame</a> </li> <li class=""> <a href="//cheats.freeola.com/"><b>Retro Game Cheats</b></a> </li> <li class=""> <a href="//walkthrough.freeola.com/"><b>Retro Game Walkthroughs</b></a> </li> <li class=""> <a href="//tips.freeola.com"><b>Retro Game Tips & Trophies</b></a> </li> <li class=""> <a href="//reviews.freeola.com/"><b>Retro Game Reviews</b></a> </li> </ul> </nav> </aside> </div><!-- .main-content-wrapper --> <section class="tp full-width "> <div class="mx-auto tp__inner"> <h2 class="standard-header text-center no-margin">Freeola & GetDotted are rated <span class="block-xl-inline"> <svg class="standard-icon svg-1 fill-frYellow" aria-hidden="true"> <use href="/assets/images/svg-sprites/custom-solid.svg#star"></use> </svg> <svg class="standard-icon svg-1 fill-frYellow" aria-hidden="true"> <use href="/assets/images/svg-sprites/custom-solid.svg#star"></use> </svg> <svg class="standard-icon svg-1 fill-frYellow" aria-hidden="true"> <use href="/assets/images/svg-sprites/custom-solid.svg#star"></use> </svg> <svg class="standard-icon svg-1 fill-frYellow" aria-hidden="true"> <use href="/assets/images/svg-sprites/custom-solid.svg#star"></use> </svg> <svg class="standard-icon svg-1 fill-frYellow" aria-hidden="true"> <use href="/assets/images/svg-sprites/custom-solid.svg#star"></use> </svg> </span> <span class="visually-hidden">5 Stars</span> </h2> <p class="standard-header-subline text-center no-margin-top">Check out some of our customer reviews below:</p> <div class="flex-placeholder"> <div class="tp__testimonials"> <div class="tp__card"> <div class="tp__title">Top-notch internet service</div> <div class="tp__content" style="margin: 0 auto auto;">Excellent internet service and customer service. Top-notch in replying to my comments.</div> <div class="tp__author">Duncan</div> </div> <div class="tp__card"> <div class="tp__title">I've been with Freeola for 14 years...</div> <div class="tp__content" style="margin: 0 auto auto;">I've been with Freeola for 14 years now, and in that time you have proven time and time again to be a top-ranking internet service provider and unbeatable hosting service. Thank you. </div> <div class="tp__author">Anthony</div> </div> </div> </div> <p class="text-center font-size-1-6 text-black"> <a class="dark-standard-link" href="https://freeola.com/reviews/">View More Reviews</a> </p> </div> </section> <section class="full-bleed-section offBlack opacity-1 no-sidebar no-padding no-print "> <div id="support-centre" class="flex wrap support-center py-1-5 lg-py-0"> <div> <h2>Need some help? <span class="light">Give us a call on <span class="lg-inline-block">01376 55 60 60</span></span></h2> </div> <div> <a href="https://freeola.com/support/" title="Go to the Freeola Support Centre">Go to Support Centre</a> </div> </div> </section> <section class="pre-footer"> <div class="flex-placeholder"> <div class="pre-footer__inner"> <div class="flex-column"> <div> <h3>Find Us</h3> <address> Freeola & GetDotted<br /> 94 Church Street<br /> Bocking<br /> Braintree<br /> Essex<br /> CM7 5JY<br /> </address> </div> </div> <div class="flex-column"> <div> <h3>Our Websites</h3> <ul class="massive-margin"> <li> <a href="//freeola.com"> <span>Freeola Internet Services</span> </a> </li> <li> <a href="//getdotted.com"> <span>Buy Cheap Domains</span> </a> </li> <li> <a href="//freeola.com/broadband/"> <span>Cheap Broadband Deals</span> </a> </li> <li> <a href="//freeola.com/broadband/short-term-broadband.php"> <span>Short-term Broadband Contracts</span> </a> </li> <li> <a href="//freeola.com/rqs-free-website-builder/"> <span>Free Website Builder</span> </a> </li> <li> <a href="//freeola.com/emailpro/"> <span>UK Email Hosting</span> </a> </li> <li> <a href="//freeola.com/web-hosting/"> <span>Cheap UK Web Hosting</span> </a> </li> </ul> </div> </div> <div class="about flex-column "> <div> <h3>About Us</h3> <p class="no-margin">Freeola is an ISP, offering unrivalled internet services to small businesses and consumers in the UK. We offer a range of services, from broadband to web hosting. Start at <a href="//getdotted.com/">cheap domain name registration</a>, get a <a href="https://freeola.com/free-web-site/">free website</a>, or just browse the site. Read more <a href="https://freeola.com/about-us/">about Freeola & GetDotted</a>. </p> <p>View our <a href="https://freeola.com/reviews/">Customer Reviews</a>.</p> </div> <div class="social"> <h3>Follow Us</h3> <div class="social__links"> <a href="https://facebook.com/freeola/" class="fb"> <svg class="standard-icon svg-2" aria-hidden="true"> <use href="/assets/images/svg-sprites/custom-brands.svg#facebook-square"></use> </svg> <span class="visually-hidden">Freeola on facebook.</span> </a> <a href="https://twitter.com/freeola/" class="tw"> <svg class="standard-icon svg-2" aria-hidden="true"> <use href="/assets/images/svg-sprites/custom-brands.svg#twitter-square"></use> </svg> <span class="visually-hidden">Freeola on Twitter</span> </a> </div> </div> <div> <h3>Join Our Mailing list</h3> <p class="no-margin-top">Join the Freeola & GetDotted mailing list for exclusive deals, offers and service updates straight to your email inbox.</p> <div class="footer-form"> <a rel="nofollow" class="button" href="https://freeola.com/mailout/setpreference.php">Sign Up to the Mailing List</a> </div> </div> </div> </div> </div> </section> <!-- footer links, about us, address, mailing list + legal links --> <footer role="contentinfo" class="main-footer-section"> <div class="flex flex-column xl-flex-row justify-between main-footer-section-container align-center"> <p class="align-self-baseline">Copyright © 2005 - 2024 Freeola Limited. All Rights Reserved.</p> <ul class="flex align-center"> <li><a href="https://freeola.com/about-us/">About Us</a></li> <li><a href="https://freeola.com/pricelist.php">Our Prices</a></li> <li><a href="https://freeola.com/sitemap/">Sitemap</a></li> <li><a href="https://freeola.com/legal/privacy-policy.php">Privacy & Cookies</a></li> <li><a href="https://freeola.com/legal/terms.php">Terms & Conditions</a></li> </ul> </div> </footer> <script nomodule src="https://freeola.com/assets/js/polyfills/promise-polyfill.js"> </script> <script src="https://freeola.com/assets/js/jquery-3-5-1.js"> </script> <script src="https://freeola.com/assets/es6/navigation.uglified.js"> </script> <script src="https://freeola.com/assets/js/colorbox-magnific.js"> </script> <script src="/assets/js/main.js"> </script> <script src="/vendor/jquery_ui/jquery-ui-1.12.0.custom/jquery-ui.min.js"> </script> <script src="//freeola.com/assets/js/modal-iframe.js"> </script> <script defer src="https://freeola.com/js/get-order-items.js"></script> <div id="cookie-alert" class="cookie-alert"> <p>Our websites use cookies to improve their functionality. By using our site, you accept the use of cookies on your device. We respect your privacy and do not set any third-party advertising cookies. <a id="cookie_url" class="white-standard-link" href="">About our cookies</a>.</p> <button id="close-cookie-alert" class="standard-button mt-2 w-max-content" type="button" style="background: none;"> <span class="text"> <span class="fas fa-times" aria-hidden="true"></span> Close </span> </button> </div> <script> var cookieAlert = document.getElementById('cookie-alert'); var cookie_url = ''; // if (document.domain.indexOf('freeola.com') != -1) { // cookie_url = 'https://' + document.domain + '/legal/cookies.php'; // } else if (document.domain.indexOf('getdotted.com') != -1) { // cookie_url = 'https://' + document.domain + '/legal/privacy-policy.php'; // } else { // cookie_url = 'https://freeola.com/legal/cookies.php'; // } if (location.hostname === 'getdotted.com') { cookie_url = 'https://getdotted.com/legal/privacy-policy.php'; } else { cookie_url = 'https://freeola.com/legal/cookies.php'; } window.addEventListener('DOMContentLoaded', function() { if (typeof localStorage === 'object') { try { if (localStorage.getItem('cookie_alert_shown') == null) { // Store localStorage.setItem('cookie_alert_shown', 'yes'); var cookieUrl = document.getElementById('cookie_url'); cookieUrl.href = cookie_url; setTimeout(function() { cookieAlert.style.transform = 'translateX(0)'; }, 1000); setTimeout(function() { cookieAlert.style.display = 'none'; }, 2e4); } else { cookieAlert.style.display = 'none'; } } catch (e) { // Safari, in Private Browsing Mode, looks like it supports localStorage but all calls to setItem // throw QuotaExceededError. We're going to detect this and just silently drop any calls to setItem // to avoid the entire page breaking, without having to do a check at each usage of Storage. // Cookies won't be stored anyway so no need to show alert Storage.prototype._setItem = Storage.prototype.setItem; Storage.prototype.setItem = function() {}; } } var closeCookieAlert = document.getElementById('close-cookie-alert'); closeCookieAlert.addEventListener('click', function() { cookieAlert.style.display = 'none'; }, false); }, false); </script> <script defer src="https://freeola.com/assets/js/jquery.colorbox-min.js"></script> <script> colorboxDefaults = { width: 450, height: 450, iframe: false } if (typeof customColorbox != 'undefined') { $.extend(colorboxDefaults, customColorbox); } /*if($.isFunction($.fn.magnificPopup)) { $('.colorbox').magnificPopup({type: 'inline'}); } else if($.isFunction($.fn.colorbox) ) { $(function() { $('.colorbox').colorbox(); }) }*/ </script> <style> .visually-hidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } </style> <div id="--tab-wrapper-container" class="feedback-section" style="align-items: flex-end; font-family: 'Open Sans', sans-serif;"> <div id="feedback-tab-wrapper" class="feedback-wrapper feedback-section__tab"> <div> <a class="tab__link" href="/feedback.php?modal&t=66059b226daa9" id="feedback-tab" rel="nofollow"> <svg class="handle-live-chat-icon" style="fill: white; height: 1em; width: 1em;" aria-hidden="true"> <use href="/assets/images/svg-sprites/custom-regular.svg#pencil"></use> </svg> <span>Feedback</span> </a> <a class="tab__link" href="#" id="hide-feedback" rel="nofollow"> <svg class="handle-live-chat-icon" style="fill: white; height: 1em; width: 1em;" aria-hidden="true"> <use href="/assets/images/svg-sprites/custom-regular.svg#xmark"></use> </svg> <span class="visually-hidden">Close Feedback</span> </a> </div> </div> </div> <div class="browser-warning" id="browser-warning"> <div class="column"> <p>It appears you are using an old browser, as such, some parts of the Freeola and Getdotted site will not work as intended. Using the latest version of your browser, or another browser such as Google Chrome, Mozilla Firefox, or Opera will provide a better, safer browsing experience for you.</p> <button type="button" id="close-browser-warning">Close</button> <script> var closeBrowserWarning = function(){ var el = document.getElementById('browser-warning'); el.style.display = 'none'; if(typeof Storage !== 'undefined') { sessionStorage.setItem('browserWarning', 'true'); } } var closeBrowserButton = document.getElementById('close-browser-warning'); if (document.addEventListener) { closeBrowserButton.addEventListener('click', closeBrowserWarning, false); } else { closeBrowserButton.attachEvent('click', closeBrowserWarning); } if(typeof Storage !== 'undefined') { var stor = sessionStorage.getItem('browserWarning'); if(stor == 'true') { document.getElementById('browser-warning').style.display = 'none'; } } </script> </div> </div> <!--<script src="https://browser.sentry-cdn.com/5.11.2/bundle.min.js" integrity="sha384-FLzYisBa7tvsi/ZP1ISnzZJqBkmw5mvwk7KOmH82W9wdPZKG3bG9hSO8GQFVSlOu" crossorigin="anonymous"> </script>--> <script> const loadSentry = function() { let body = document.querySelector('body'); let tag = document.createElement('script'); tag.setAttribute('integrity', "sha384-FLzYisBa7tvsi/ZP1ISnzZJqBkmw5mvwk7KOmH82W9wdPZKG3bG9hSO8GQFVSlOu"); tag.setAttribute("crossorigin", "anonymous"); tag.setAttribute('src', 'https://browser.sentry-cdn.com/5.11.2/bundle.min.js'); tag.setAttribute('defer', true); body.appendChild(tag); tag.onload = function() { Sentry.init({ dsn: 'https://2a0e6f82eb8f46caa125cd68ecf0c94c@sentry.freeola.systems/3' }); } } loadSentry(); </script> <script defer src="https://freeola.com/shared_assets/js/feedback.js"></script> <script> /* If the sidebar height is greater than the window height, we don't want it to be sticky. */ var unstickySidebar = function() { var sidebar = document.querySelector('.sidebar'); var stickyPosition = 108; if (sidebar) { var nav = sidebar.querySelector('nav'); if (!nav) { return false; } var sidebarNavHeight = nav.offsetHeight; var windowHeight = window.innerHeight; if (windowHeight < (sidebarNavHeight + stickyPosition)) { sidebar.classList.add('unsticky'); } else { sidebar.classList.remove('unsticky'); } } } window.addEventListener('DOMContentLoaded', function() { unstickySidebar(); }) window.addEventListener('resize', function() { unstickySidebar(); }) </script> </body> </html> <script> ///////////// // AVATARS // ///////////// $(function() { var $avatar_display = $("#avatar_display"); if ($avatar_display.text() == "active") { $(".avatar-wrapper").show(); } else { $(".avatar-wrapper").hide(); } }); $("#toggle_avatars").on("click", function() { var $avatar_display = $("#avatar_display"); var $toggle_avatars = $("#toggle_avatars"); if ($avatar_display.text() == "active") { $avatar_display.text("disable"); $toggle_avatars.text("Show Avatars"); $(".avatar-wrapper").hide(); $.get("/ajax/set_avatar_status.php", { new_status: 'disabled' }, function(data){ //console.log(data); }); } else { $avatar_display.text("active"); $toggle_avatars.text("Hide Avatars"); $(".avatar-wrapper").show(); $.get("/ajax/set_avatar_status.php", { new_status: 'active' }, function(data){ //console.log(data); }); } }); /////////////////// // REPORT BUTTON // /////////////////// $('a.report-button').on("click", function(e) { e.preventDefault(); var link = $(this).attr('href'); modalConfirm("Report this post for abusive, offensive or spam content?", function(){ $.get(link).done(function(data) { popupAlert("Post reported to forum moderators."); }); }); }); /////////////////// // STICKY BUTTON // /////////////////// $('a.sticky-button').on("click", function(e) { e.preventDefault(); var link = $(this).attr('href'); if ($(this).hasClass('active')) { $(".sticky-button").attr('title', "Make Sticky"); $(".sticky-button").removeClass('active'); $.get(link, {is_sticky : 'N'}).done(function(data) { popupAlert("Thread's Sticky Status Updated."); }); } else { $(".sticky-button").attr('title', "Unsticky"); $(".sticky-button").addClass('active'); $.get(link, {is_sticky : 'Y'}).done(function(data) { popupAlert("Thread's Sticky Status Updated."); }); } }); //////////////// // BAN BUTTON // //////////////// $('a.ban-user-button').on("click", function(e) { e.preventDefault(); var link = $(this).attr('href'); modalConfirmReason("Please enter the reason you would like to ban this user:", function(){ var $confirm_reason = $("#confirm_reason"); $.get(link, {ban_reason: $confirm_reason.val()}).done(function(data) { if (data == "SUCCESS") { popupAlert("User Successfully Banned."); } else { popupAlert(data); } }); }); }); /////////////////// // DELETE BUTTON // /////////////////// $('a.delete-button').on("click", function(e) { e.preventDefault(); var link = $(this).attr('href'); if ($(this).data('is-thread') == "1") { modalConfirm("Are you sure you want to delete this thread?", function(){ window.location.href = link; }); } else { modalConfirm("Are you sure you want to delete this post?", function(){ window.location.href = link; }); } }); </script>