How to test if http header save-data is on? - javascript

How to check if the code below works?
How can i set the save-data to ON?
<img id="myImage" src="Exampleimg.png" alt="My Image">
<script>
if (/Android|iPhone|iPad|iPod/i.test(navigator.userAgent) && typeof navigator.connection !== "undefined" && navigator.connection.saveData === true) {
var img = document.getElementById('myImage');
alert("sdfsf");
img.style.display = 'none';
}
if (navigator.connection && navigator.connection.saveData) {
var img = document.getElementById('myImage');
alert("sssss");
img.style.display = 'none';
}
</script>
That i can set save-data to on and test my code

Related

Hide/Show elements on different domain

Domain www.novameta.co.uk redirected to www.novameta.lt/en in iframe
When I load the page script is working. But when I go to next page script stops working. Is there any way to make script load again when I go to another page?
Script:
var loc = window.location;
var url = (window.location != window.parent.location) // checks who I am ?
? document.referrer // If I'm frame give me parent url
: document.location.href; // If I'm static simple page, give me browser url
var elementLt = document.getElementById("left-side-lt");
var elementEn = document.getElementById("left-side-en");
var elementContLt = document.getElementById("cont-lt");
var elementContEn = document.getElementById("cont-en");
var elementLangs = document.getElementById("language-bar");
if (url.indexOf("novameta.co.uk") != -1) {
if (elementLt != null) {
elementLt.style.display = "none";
}
if (elementEn != null) {
elementEn.style.display = "block";
}
if (elementContLt != null) {
elementContLt.style.display = "none";
}
if (elementContEn != null) {
elementContEn.style.display = "block";
}
if (elementLangs != null) {
elementLangs.style.display = "none";
}
} else {
if (elementLt != null) {
elementLt.style.display = "block";
}
if (elementEn != null) {
elementEn.style.display = "none";
}
if (elementContLt != null) {
elementContLt.style.display = "block";
}
if (elementContEn != null) {
elementContEn.style.display = "none";
}
if (elementLangs != null) {
elementLangs.style.display = "block";
}
}

How do I assure the visibility of at least one element when randomly calling a function with javascript?

I have a function to randomly select the visibility of an html element by its id. I call the function two time on one elements, hence it may appear, that both elements are invisible. I want to avoid having none of both display. I've tried it with a separate function and also by modifying my random function.
Here is my code:
function turn_visible(id) {
var e = document.getElementById(id);
if (e.style.display == 'hidden') e.style.display = 'block';
else e.style.display = 'block';
}
function in_visible(id) {
var e = document.getElementById(id);
if (e.style.display == 'block') e.style.display = 'none';
else e.style.display = 'none';
}
function random_vis(id, id) {
var func = randomFrom([turn_visible, in_visible]);
(func)(id);
}
function randomFrom(array) {
return array[Math.floor(Math.random() * array.length)];
}
Here is how I try to check the visibility:
function check_visible(id1, id2) {
var e1 = document.getElementById(id1);
var e2 = document.getElementById(id2);
if ((e1.style.display == 'hidden'), (e2.style.display == 'hidden')) {
var func = randomFrom([turn_visible(id1), in_visible(id2)]);
(func)(id1, id2);
}
}
This is how I use the function in the html markup:
<a href="#page1" onclick="random_vis('rap-1812-1');
random_vis('rap-1857-1');
check_visible('rap-1812-1','rap-1857-1')">
</a>
The below code is functioning on Chrome and Firefox
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> </title>
</head>
<body>
<div id="rap-1812-1" style="display : block;">This is div rap-1812-1</div>
<br>
<div id="rap-1857-1" style="display : block;">This is div rap-1857-1</div>
<br>
<a href="#page1" onclick="random_vis('rap-1812-1');
random_vis('rap-1857-1');
check_visible('rap-1812-1','rap-1857-1')">
Click Here!
</a>
</body>
<script>
function turn_visible(id) {
var e = document.getElementById(id);
if (e.style.display == 'none') e.style.display = 'block';
}
function in_visible(id) {
var e = document.getElementById(id);
if (e.style.display == 'block') e.style.display = 'none';
}
function random_vis(id) {
var func = randomFrom([turn_visible, in_visible]);
(func)(id);
}
function randomFrom(array) {
return array[Math.floor(Math.random() * array.length)];
}
function check_visible(id1, id2) {
var e1 = document.getElementById(id1);
var e2 = document.getElementById(id2);
if ((e1.style.display == 'none') && (e2.style.display == 'none')) {
var toShow = Math.floor(Math.random() * 2);
turn_visible(arguments[toShow]);
}
}
</script>
</html>
var invisibleId = ""; // both are visible!
function in_visible(id) {
// Check if one is already invisible and turn on, if not the same as id
if (invisibleId != id && invisibleId !== "") {
turn_visible(invisibleId);
}
invisibleId = id;
...
}

Displaying Div's based on URL using Javascript

I’m new to Javascript and I’m having trouble displaying and hiding some divs based on url’s.
I have 4 divs that need to be shown depending on the url.
The 4 divs are:
Div 1
<body onload="callOnPageLoad1()”>
<div id="homeName" style="display:block"><h5>HOME</h5></div>
and needs to be displayed only when at:
http://www.fitzofdesign.com/
Div 2
<body onload="callOnPageLoad2()”>
<div id="profilesName" style="display:block"><h5>PROFILES</h5></div>
and needs to be displayed only when at:
http://www.fitzofdesign.com/?category=Profiles
Div 3
<body onload="callOnPageLoad3()”>
<div id="retailName" style="display:block"><h5>RETAIL</h5></div>
and needs to be displayed only when at:
http://www.fitzofdesign.com/?category=Retail
Div 4
<body onload="callOnPageLoad4()”>
<div id="blogName" style="display:block"><h5>BLOG</h5></div>
and needs to be displayed only when at:
http://www.fitzofdesign.com/?category=Blog
The JS I’m using is:
<script type="text/javascript">
function callOnPageLoad1()
{
var url = window.location.href;
if(url == "http://www.fitzofdesign.com/")
{
document.getElementById('homeName').style.display = 'block';
document.getElementById('profilesNamed').style.display = 'none';
document.getElementById('retailName').style.display = 'none';
document.getElementById('blogName').style.display = 'none';
}
else {
document.getElementById('homeName').style.display = 'none';
}
}
</script>
<script type="text/javascript">
function callOnPageLoad2()
{
var url = window.location.href;
if(url == "http://www.fitzofdesign.com/?category=Profiles")
{
document.getElementById('homeName').style.display = 'none';
document.getElementById('profilesNamed').style.display = 'block';
document.getElementById('retailName').style.display = 'none';
document.getElementById('blogName').style.display = 'none';
}
else {
document.getElementById('profilesNamed').style.display = 'none';
}
}
</script>
<script type="text/javascript">
function callOnPageLoad3()
{
var url = window.location.href;
if(url == "http://www.fitzofdesign.com/?category=Retail")
{
document.getElementById('homeName').style.display = 'none';
document.getElementById('profilesNamed').style.display = 'none';
document.getElementById('retailName').style.display = 'block';
document.getElementById('blogName').style.display = 'none';
}
else {
document.getElementById('retailName').style.display = 'none';
}
}
</script>
<script type="text/javascript">
function callOnPageLoad4()
{
var url = window.location.href;
if(url == "http://www.fitzofdesign.com/?category=Blog")
{
document.getElementById('homeName').style.display = 'none';
document.getElementById('profilesNamed').style.display = 'none';
document.getElementById('retailName').style.display = 'none';
document.getElementById('blogName').style.display = 'block';
}
else {
document.getElementById('blogName').style.display = 'none';
}
}
</script>
At present the only time this is working correctly is when I’m at:
http://www.fitzofdesign.com/
because Div 1 appears and the other 3 Divs are hidden.
This is not working when I’m at:
http://www.fitzofdesign.com/?category=Profiles
http://www.fitzofdesign.com/?category=Retail
http://www.fitzofdesign.com/?category=Blog
because Div 2, 3 & 4 are all incorrectly displaying for each URL.
I hope this makes sense.
Can anyone help please?
Thanks Rowan
You need to combine all those functions into something like:
var url = window.location.href;
if(url == "http://www.fitzofdesign.com/")
{
document.getElementById('homeName').style.display = 'block';
document.getElementById('profilesNamed').style.display = 'none';
document.getElementById('retailName').style.display = 'none';
document.getElementById('blogName').style.display = 'none';
}
else if(url == "http://www.fitzofdesign.com/?category=Profiles")
{
document.getElementById('homeName').style.display = 'none';
document.getElementById('profilesNamed').style.display = 'block';
document.getElementById('retailName').style.display = 'none';
document.getElementById('blogName').style.display = 'none';
}
And you need to make sure this check is called after everything loads, so put inside something like a jquery document.ready:
$(document).ready(function() {
var url = window.location.href
// rest of the code
}
Also, you might want to change the checks from:
url == "http://www.fitzofdesign.com/?category=Profiles"
to
url.indexOf("category=Profiles") > -1
Hope that helps
Firstly hide all the divs.
On window.onLoad event, fetch the querystring value and use that to display the appropriate div.
Below is the code snippet to extract the querystring category value.
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
Ok first, you don't need to put each of those in their own script tags. Keep them together.
Second, save stuff you repeat in JS as variables for performance and cleaner code:
var url = window.location.href,
fitz = "http://www.fitzofdesign.com/"
home = document.getElementById('homeName'),
profile = document.getElementById('profilesNamed'),
retail = document.getElementById('retailName').style.display,
blog = document.getElementById('blogName').style.display;
Third, you can check variables against each other:
if( url == fitz ) {
home.style.display = 'block';
profile.style.display = 'none';
retail.style.display = 'none';
blog.style.display = 'none';
}
else if ( url == fitz + "?category=Profiles" ) {
home.style.display = 'none';
profile.style.display = 'block';
retail.style.display = 'none';
blog.style.display = 'none';
}
else if ( url == fitz + "?category=Profiles" ) {
// etc.
}
Finally, you need to create an event listener that will determine when a click or some other user behavior occurs. That should trigger this function each time.
Look up addEventListener

Show specific div based on url

I need to show a particular div when a button is clicked, only if the url is on a certain members profile. If its not on a profile page show another div that will display an error message. I have written it out extra long because I'm not that great at javascript. I'm having 2 problems with the code below:
1) only the first url will show the correct div not the url after the or (||)?
2) the else code that should show the error message shows up no matter what page you're on?
Please help.
function showdiv() {
if ((window.location.href == "http://google.com/profile/AA") || (window.location.href == "http://google.com/profile/AA/?xg_source=profiles_memberList")) {
document.getElementById('AA').style.display = 'block';
if (document.getElementById('AA').style.display == 'none') document.getElementById('AA').style.display = 'block';
else document.getElementById('AA').style.display = 'block';
}
if ((window.location.href == "http://google.com/profile/BB") || (window.location.href == "http://google.com/profile/BB/?xg_source=profiles_memberList")) {
document.getElementById('BB').style.display = 'block';
if (document.getElementById('BB').style.display == 'none') document.getElementById('BB').style.display = 'block';
else document.getElementById('BB').style.display = 'block';
}
if ((window.location.href == "http://google.com/profile/CC") || (window.location.href == "http://google.com/profile/CC/?xg_source=profiles_memberList")) {
document.getElementById('CC').style.display = 'block';
if (document.getElementById('CC').style.display == 'none') document.getElementById('CC').style.display = 'block';
else document.getElementById('CC').style.display = 'block';
}
if ((window.location.href == "http://google.com/profile/DD") || (window.location.href == "http://google.com/profile/DD/?xg_source=profiles_memberList")) {
document.getElementById('DD').style.display = 'block';
if (document.getElementById('DD').style.display == 'none') document.getElementById('DD').style.display = 'block';
else document.getElementById('DD').style.display = 'block';
}
if ((window.location.href == "http://google.com/profile/EE") || (window.location.href == "http://google.com/profile/EE/?xg_source=profiles_memberList")) {
document.getElementById('EE').style.display = 'block';
if (document.getElementById('EE').style.display == 'none') document.getElementById('EE').style.display = 'block';
else document.getElementById('EE').style.display = 'block';
}
if ((window.location.href == "http://google.com/profile/FF") || (window.location.href == "http://google.com/profile/FF/?xg_source=profiles_memberList")) {
document.getElementById('FF').style.display = 'block';
if (document.getElementById('FF').style.display == 'none') document.getElementById('FF').style.display = 'block';
else document.getElementById('FF').style.display = 'block';
}
else {
document.getElementById('error').style.display = 'block';
if (document.getElementById('error').style.display == 'none') document.getElementById('error').style.display = 'block';
else document.getElementById('error').style.display = 'block';
}
}
That code will be a nightmare to maintain. You might have better luck structuring it more like this:
function getId() {
var href = window.location.href;
if (href.indexOf('?') != -1) {
//remove any url parameters
href = href.substring(0, href.indexOf('?'));
}
if (href.charAt(href.length - 1) == '/') {
//check for a trailing '/', and remove it if necessary
href = href.substring(0, href.length - 1);
}
var parts = href.split("/");
return parts[parts.length - 1]; //last array element should contain the id
}
function showdiv(){
var id = getId();
var elem = document.getElementById(id);
if (elem) {
if (elem.style.display == 'none') {
elem.style.display = 'block';
}
else {
elem.style.display = 'none';
}
}
else {
if (document.getElementById('error').style.display == 'none') {
document.getElementById('error').style.display='block';
}
else {
document.getElementById('error').style.display='none';
}
}
}
You should work out the logic first.
This code makes no sense at all.
document.getElementById('AA').style.display = 'block';
if (document.getElementById('AA').style.display == 'none') {
document.getElementById('AA').style.display = 'block';
}
else {
document.getElementById('AA').style.display = 'block';
}
Structurally, it is similar to this code (simplified and with comments)
var a = 'block';
// this if will never be true, because we just set a to "block"
if (a == 'none') {
a = 'block';
}
// this else will always execute and set a to "block" again.
// something that was already done in the first line.
else {
a = 'block';
}
Also try to factor our the repeating parts of your code as #aroth has nicely demonstrated.

Javascript style display not working

function insert()
{
var linkElement = document.getElementById("BackButton");
var linkElementLnk = document.getElementById("BackButtonlnk");
var loc_array = document.location.href.split('/');
if (loc_array[loc_array.length-3] == "m")
{
linkElementLink.style.display = 'none';
}
else if (loc_array[loc_array.length-2] == "maps"
|| loc_array[loc_array.length-3] == "maps"
|| loc_array[loc_array.length-2] == "stations"
|| loc_array[loc_array.length-3] == "stations" )
{
var newT = document.createTextNode("Stations & Maps");
}
else
{
var newT = document.createTextNode(unescape(capWords(loc_array[loc_array.length-3])));
}
linkElement.appendChild(newT);
}
and here is my HTML
<a id="BackButtonlnk" href="#" class="white" onClick="history.go(-1); return false;">
<div id="BackButton1"></div>
<div id="BackButton"></div>
<div id="BackButton3"></div>
</a>
The style.display none is not working and seems to just be breaking the script. Am I missing something?
check your spelling
var linkElementLnk = document.getElementById("BackButtonlnk");
...
linkElementLink.style.display = 'none';

Categories

Resources