Unclear documentation #9

shaneonabike · 2018-07-10T12:56:31Z

Hey

I'm confused a bit by the documentation. From another ticket I can see that the parent element must be a background correct? Is it also true that all the elements must have a position relative below that parent?

When I implement this using jQuery I have

`(function ($) {
$(document).ready(function() {
$('.group-header-inner').translucent({
background: '.group-header', // id or class name
filterValue : 5, // int
cardColor : 'clear', // preset color or your own color
shadow : true // true or false
});
});
}) (jQuery);

`

But nothing happens :/

byeolbit · 2018-07-10T13:47:15Z

Parent element must have right background-image property. If there is no background-image property in parent element, target element will not have effect.
And position property of elements won't be matter.

If you are using 1.0.11, you have to fix
$('.group-header-inner').translucent({
to
$('.group-header-inner').Translucent({

If you still can't get any effect after fix typo, please leave issues with error logs.

Thank you.

shaneonabike · 2018-07-10T17:53:39Z

Thanks for your quite response. I'm actually using the latest jQuery version so I would assume it's with the lowercase translucent.

How do I turn on debugging?

byeolbit · 2018-07-11T01:19:58Z

I meant Translucent version 1.0.11
It is ok, if you are using jQuery version newer than 1.6.

Shortcut to developer tool is command+option+i(windows: Ctrl+shift+i, IE: F12).
You can check console logs at console tab.

And if you leave your browser information and part of your code, it will be help to solve your problem.

Thank you.

MaxxSkywalker · 2018-08-21T19:50:10Z

I'm having the same problem. I have followed all the steps described in the documentation, and I still get nothing. I'm getting an error in the console that states: TypeError: $(...).Translucent is not a function.

Here's my markup:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>CSS and jQuery Frosted Glass Demo</title>
		<link rel="stylesheet" type="text/css" href="style.css">
		<style type="text/css">
			.cocktail {
				background-image: url("images/warmup.jpg");
				background-position: center;
				background-repeat: no-repeat;
				background-size: cover;
				display: flex;
				flex-direction: column;
				height: 600px;
				justify-content: center;
				margin: 0 auto;
				position: relative;
				width: 50%;
			}
			
			.cocktail-bg {
				background-image: url("images/warmup.jpg");
			}

			.cocktail-contents {
				box-sizing: border-box;
				color: #ffffff;
				overflow: hidden;
				padding: 100px 25px;
				text-align: left;
			}
			
		</style>
    </head>
    <body>
		
		<div class="cocktail">
			<div class="cocktail-contents">
				This cocktail is designed for the pre-workout / competition! Feel energized and strong with
				our special blend of B-Vitamins, antioxidants, and amino acids! (L-Carntine, L-Taurine,
				L-Argenine, B-Complex)
			</div>
		</div>
		
		
		
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.translucent.min.js"></script>
		
		<script>
			$('.cocktail-contents').Translucent({
				background: '.cocktail-bg', // id or class name
				filterValue : 5,     // int
				cardColor : 'clear', // preset color or your own color
				shadow : false        // true or false
			});
		</script>
    </body>
</html>

The parent has a background-image property assigning an image to the container, and "translucent" in the inline JavaScript is title-cased. Can you let me know where I'm going wrong, please?

byeolbit · 2018-08-22T02:10:34Z

There was an typo in jQuery plugin. I patched it and release with 1.0.12
Would you try again with new version?
Thank you.

MaxxSkywalker · 2018-08-22T15:36:39Z

It seems like it's working. It's not the perfect solution to what I was needing, especially when you get into smaller viewport widths, but I think that's more my problem at this time, more than anything.

http://refresh.almost.online/test2.html

Thanks for your help, anyway.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Unclear documentation #9

Unclear documentation #9

shaneonabike commented Jul 10, 2018

byeolbit commented Jul 10, 2018

shaneonabike commented Jul 10, 2018

byeolbit commented Jul 11, 2018

MaxxSkywalker commented Aug 21, 2018

byeolbit commented Aug 22, 2018 •

edited

MaxxSkywalker commented Aug 22, 2018 •

edited

Unclear documentation #9

Unclear documentation #9

Comments

shaneonabike commented Jul 10, 2018

byeolbit commented Jul 10, 2018

shaneonabike commented Jul 10, 2018

byeolbit commented Jul 11, 2018

MaxxSkywalker commented Aug 21, 2018

byeolbit commented Aug 22, 2018 • edited

MaxxSkywalker commented Aug 22, 2018 • edited

byeolbit commented Aug 22, 2018 •

edited

MaxxSkywalker commented Aug 22, 2018 •

edited