1 Coding problem [ left ]

For those who like to stay on the client
radus
Posts: 2
Joined: Thu Mar 24, 2016 8:47 am

1 Coding problem [ left ]

Postby radus » Thu Mar 24, 2016 8:52 am

Hi all,

I am new to WURFL and javascript, thus I need your help on this topic.

I want to hide some classes based on WURFL.form_factor + also I want to record WURFL data in Analytics.

1. [ corrected, waiting to populate Analytics with data ]

To record WURFL in Analytics, I have made the configurations below, but Dashboards of Analytics Real Time does not show anything.

<script async src="https://wurfl.io/wurfl.js"></script>

// Send pageview with WURFL custom dimension data

console.log('WURFL.is_mobile', 'WURFL.form_factor', 'WURFL.complete_device_name');

ga('set', 'dimension17', 'WURFL.is_mobile');
ga('set', 'dimension18', 'WURFL.form_factor');
ga('set', 'dimension19', 'WURFL.complete_device_name');

ga('send', 'pageview');

2. [ Work in progress ]

URL is http://www.comenzi-sampanie.ro

Using WURFl.form_factor I wanted to show buttons for "Call from website", "SMS from Website" on smartphone, and only "Email from Website" for the rest of form_factor.

Basicly I would hide DIV based on "smartphone" form_factor [ DIV's classified 'smartphone' and 'no-smartphone' belong to 3 links : a.call, a.message, a.email ].

However, it is not working, and I don't see why.

Problem : a) Javascript does not work [ all 3 buttons are displayed ]
b) Css does not work [ buttons are not stiled ]

Important : Previously I used @media and worked, but I wanted to upgrade to the "smarter" WURFL.

<!-Call+SMS+Email-/>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

<style>

#contact-webpage .call .message .email {
position: fixed;
bottom: 0%;
border-radius: 50%;
display: flex;
white-space: pre-line;
word-wrap: normal;
text-decoration: none;
padding: 10%;
font-weight: normal;
font-style: normal;

-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
}

.call {
left: 0%;
background: green;
}

.message {
right: 0%;
background: darkblue;
}

.email {
right: 0%;
background: orangered;
}

.material-icons {
font-family: Material Icons;
font-size: 8em;
color: white;

/* Support for all WebKit browsers. */
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;

/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;

/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;

/* Support for IE. */
font-feature-settings: 'liga';
}

</style>

<div id="contact-webpage">
<div id="smartphone">
<a href="tel:+40722000000" onload="formFactor()" onclick="ga('send','event','smartphone','call', 'Website call', '+40722000000')" id="call" class="call" title="Apelează numărul de telefon +40722000000"><i class="material-icons">call</i></a>

<a href="sms:+40722000000" onload="formFactor()" onclick="ga('send','event','smartphone','sms', 'Website sms', '+40722000000')" id="message" class="message" title="Trimite SMS la numărul de telefon +40722000000"><i class="material-icons">message</i></a>
</div>

<div id="no-smartphone">
<a href="mailto:q@qs.ro" onload="formFactor()" onclick="ga('send','event','no-smartphone','email', 'Website email', 'q@qs')" id="email" class="email" title="Trimite email la adresa q@qs"><i class="material-icons">email</i></a>
</div>
</div>

<script>

function formFactor() {
'use strict';
if ('WURFL.form_factor' == 'smartphone') {
function hideNoSmartphones()
{
var list = document.getElementById('no-smartphone').querySelectorAll('.email');
var i;
for ( i = 1; i < list.length; i++) {
list.hide('fast');
}
}
} else {
function hideSmartphones()
{
var list = document.getElementById('smartphone').querySelectorAll('call message');
var i;
for ( i = 1; i < list.length; i++) {
list.hide(fast);
}
}
}
};

</script>

<!-/Call+SMS+Email-/>
Last edited by radus on Sat Mar 26, 2016 6:24 am, edited 15 times in total.
@ the bottom of the learning curve

aaronp
Posts: 222
Joined: Wed Dec 09, 2015 12:39 pm

Re: 2 Coding problems

Postby aaronp » Thu Mar 24, 2016 10:06 am

Hi Radu,

Are you able to provide a URL containing the code which exhibits the problem? It is difficult to determine the issue just by looking at the code as there might be a JavaScript issue elsewhere. If you are unable to expose your URL publicly, perhaps we can arrange contact through a different medium.

Look forward to hearing back.

Thanks,

Aaron

radus
Posts: 2
Joined: Thu Mar 24, 2016 8:47 am

Re: 1 Coding problem [ left ]

Postby radus » Thu Mar 24, 2016 10:36 am

Thanks a lot Aaron, impressively quick reply. Not to take too much of your time, I hope I explained the problem correctly and in full.

URL is http://www.comenzi-sampanie.ro

Again, many thanks,

Radu
@ the bottom of the learning curve


Who is online

Users browsing this forum: No registered users and 1 guest