I am trying to make the cookie load when the body does, and then check what value it is. If darkmode = true, then it should display css/cssmain.css. If it is false, it should display css/csslight.css. The cookie works: If I use the button to switch from dark to light, it changes darkmode from true (dark) to light (false) and vice-versa. It even stays when I refresh the page, but the css switches to its default file.
Basically, I can not figure out how to make darkMode go into the if statement in my javascript. I tried it with onload="getCookie(darkMode)" to try and put the cookie darkMode's value (true or false) into the script. It seems to just not run the script, because even if I add an alert, the alert does not pop up when I use the button.
HTML:
<head>
<title>Freshwater Fish</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/cssmain.css">
<link rel="stylesheet" type="text/css" href="css/desktopview.css">
<link rel="stylesheet" type="text/css" href="css/mobile.css">
<link rel="stylesheet" type="text/css" href="css/slides.css">
<link id='css_theme' rel='stylesheet' type='text/css' href='css/csslight.css'>
<script src="js/fullstackfrog.js"></script>
</head>
<body onload="getCookie(darkMode)">
<button class="lightmodeButton" onclick="document.getElementById('css_theme').setAttribute('href', document.getElementById('theme').value, document.cookie = 'darkMode=true'); if (document.getElementById('theme').value == 'css/cssmain.css'){ document.getElementById('theme').value = 'css/csslight.css'; document.cookie = 'darkMode=true';} else{ document.getElementById('theme').value = 'css/cssmain.css'; document.cookie = 'darkMode=false';}">Light/Dark</button>
<input type="hidden" id="theme" value="css/cssmain.css">
</body>
</html>
JS (fullstackfrog.js):
function getCookie(name) {
if (name) {
document.getElementById('theme').value = 'css/cssmain.css';
}
else {
document.getElementById('theme').value = 'css/csslight.css';
}
}
Do you know how cookies work? document.cookie will just stay the same. You need to write something to get the cookie and parse the value from document.cookie. Try reading https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie and use the examples.
Related
Hi guys i have a question becauseenter image description here when i run my application spring cant see my style in html and my page look like shit :
My code :
<link href="../static/style/styleDistance.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Lato:400,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link href="../static/css/fontello.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function() {
var NavY = $('.nav').offset().top;
var stickyNav = function(){
var ScrollY = $(window).scrollTop();
if (ScrollY > NavY) {
$('.nav').addClass('sticky');
} else {
$('.nav').removeClass('sticky');
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
</script>
But when i open in browser my page look like :
enter image description here
I dont know why spring cant see my style can someone explain ?
my resource look that : enter image description here
You probably have some issue with the relative path for your CSS files ../. Press ctrl + u in your page and click on the missing CSS, it will try to load your file, then check the browser url to see if you can figure it out what's going on.
<link href="style/styleAdd.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Lato:400,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link href="css/fontello.css" rel="stylesheet" type="text/css" />
i change like there and now it works
I'm a beginner with jQuery so is this code right? Also how can I call it when page loads?
I need to say if the skin is "white" change the website logo to the black logo.
if ($("#themestyle").attr('href', "/web/assets/css/skins/white.css")) {
$("#logo").attr('src', "/web/assets/images/LogoBlack.png");
} else {
$("#logo").attr('src', "/web/assets/images/Logowhite.png");
}
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<link rel="icon" href="/web/assets/images/favicon.ico">
<title>
<asp:Literal runat="server" Text="Test Website" />
</title>
<link rel="stylesheet" href="/web/assets/css/skins/blue.css" id="themestyle" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="navbar-brand">
<img src="/web/assets/images/Logowhite.png" id="logo" />
</div>
</body>
The issue is because you're using the setter of attr() in the if(). This sets the href attribute then returns a jQuery object containing the link element. When coerced to a boolean this will always return true.
To fix this use the getter of attr() and use == to compare it to the known href, like this:
var filename = 'LogoBlack.png';
if ($("#themestyle").attr('href') == "/web/assets/css/skins/white.css") {
filename = 'Logowhite.png';
}
$("#logo").attr('src', '/web/assets/images/' + filename);
Alternatively you can use a ternary expression. They're more succinct but, arguably, harder to read:
var filename = $("#themestyle").attr('href') == "/web/assets/css/skins/white.css" ? 'LogoBlack.png' : 'Logowhite.png';
$("#logo").attr('src', '/web/assets/images/' + filename);
It's a basket (shop) script, im using ajax by scrolling down, 18 new article will appear, there is a button "ADD TO BASKET" to add them on personal account!
The problem is that on the index.php page is this code stored that gets the articles by scrolling, and it works perfect:
$(document).ready(function(){
var limit = 18;
var start = 0;
var action = 'inactive';
function load_country_data(limit, start) {
$.ajax({
url:"include/test_fetch.php",
method:"POST",
data:{limit:limit, start:start},
cache:false,
success:function(data)
{
$('#load_data').append(data);
if(data == '')
{
$('#load_data_message').html("<button type='button' class='btn btn-info'>No Data Found</button>");
action = 'active';
}
else
{
$('#load_data_message').html("<img src='logo/loading-more.gif'>");
//$('#load_data_message').html("<div style='position: fixed; top: 0; left: 0; height: 100%; width: 100%; background-color: red;'></div>");
action = "inactive";
}
}
});
}
The articles are appearing on the website but by pressing "ADD TO BASKET" no action happens, this is fixed too, i have loaded all <scripts /> and <links />, but if i scroll down the currend appeared articles adds perfectly 1x article, but after scrolling down and go back up, add on basket a previously fetched article, it adds me 2x article!
When i go down to the page like after 4 or 5 fetches, and go back up on top to the first fetch, and press "ADD TO BASKET" it adds me 4x article (the same article 4 or 5 times).
After every fetch a script is loading custom.js to make the add to basket action possible, and obviously it calls it in one click x times it depends from the fetch time.
Here is the test_fetch.php file that will be loaded after the scrolldown:
<script src="catalog/view/javascript/jquery/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="catalog/view/javascript/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<link href="catalog/view/javascript/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="catalog/view/theme/OPC080192_1/stylesheet/stylesheet.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="catalog/view/theme/OPC080192_1/stylesheet/megnor/custom.css" />
<link rel="stylesheet" type="text/css" href="catalog/view/theme/OPC080192_1/stylesheet/megnor/bootstrap.min.css" />
<script type="text/javascript" src="catalog/view/javascript/megnor/custom.js"></script>
<script type="text/javascript" src="catalog/view/javascript/megnor/jstree.min.js"></script>
<script type="text/javascript" src="catalog/view/javascript/megnor/jquery.custom.min.js"></script>
<script type="text/javascript" src="catalog/view/javascript/megnor/doubletaptogo.js"></script>
<script src="catalog/view/javascript/common.js" type="text/javascript"></script><link href="http://opencart.templatemela.com/OPC08/OPC080192/OPC1/index.php?route=product/category&path=17" rel="canonical" />
<link href="http://opencart.templatemela.com/OPC08/OPC080192/OPC1/index.php?route=product/category&path=17&page=2" rel="next" />
<link href="http://opencart.templatemela.com/OPC08/OPC080192/OPC1/image/catalog/cart.png" rel="icon" />
//php add basket functions
<script src='assets/js/custom.js'></script>
<?php
// The articles and query
// ...
?>
So the fetched data doesent work without all the scripts, but the previous articles are calling same function by adding x times...
My question is how to fetch data without the scripts, i want test_fetch.php to use the script from index.php from where they are called to not repeat the scripts!
Hope i made it clear enough!
I'm trying to make a little website that will tell you if you suck or don't suck by entering your name. (Sort of dumb, but just for learning purposes.)
The way I thought I'd get it to work would be to check if the name has the vowel "a" in it, but I'm not too sure why this code block won't work:
I also think it'd be helpful to know, for future, how to add a query parameter so it would give each name a unique link.
But nevertheless, here is my code. Any help would be appreciated.
function nameSubmit() {
var nameInput = document.getElementById('checkName');
if (nameInput.contains('a')) {
document.getElementById('ans').innerHTML = "You don't suck!"
} else if (nameInput == "") {
document.getElementById('ans').innerHTML = "Enter a name please";
} else {
document.getElementById('ans').innerHTML = "You suck";
}
}
<!DOCTYPE html>
<html>
<head>
<!-- Links -->
<link href="assets/app.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css">
<script src="https://use.fontawesome.com/97db52ab8f.js"></script>
<link rel="shortcut icon" href="#" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Meta Tags -->
<meta charset="utf-8">
<!-- Title -->
<title>Website Title</title>
</head>
<body>
<input type="text" id="nameCheck">
<button onclick="nameSubmit()">Submit</button>
<p id="ans"></p>
<script src="assets/main.js" type="text/javascript"></script>
</body>
</html>
Here you go. I stripped all the unnecessary html for easier read. Also rearranged the order of your ifs to make more sense :)
function nameSubmit() {
var nameInput = document.getElementById('nameCheck').value.trim();
var output = document.getElementById('ans');
if (!nameInput) {
output.innerHTML = "Enter a name please";
} else if (nameInput.indexOf('a') === -1) {
output.innerHTML = "You suck!"
} else {
output.innerHTML = "You don't suck";
}
}
<input type="text" id="nameCheck">
<button onclick="nameSubmit()">Submit</button>
<p id="ans"></p>
I am developing a website for someone, and the CSS styles I use require JavaScript (for the buttons that are used for a dropdown navigation bar on small screens). How can I use one stylesheet if the user has JavaScript enabled or use another one if JavaScript is disabled.
Two ways to do it:
Append the JavaScript-only stylesheets with JavaScript:
function appendStyle(url) {
var sheet = document.createElement("link");
sheet.setAttribute("href", url);
sheet.setAttribute("rel", "stylesheet");
sheet.setAttribute("type", "text/css");
document.head.appendChild(sheet);
}
If you don't mind loading the CSS for the JS and you just want to override your site's default appearance you can use a noscript tag instead:
<noscript>
<link href="your/no-js/stylesheet.here.css" type="text/css" rel="stylesheet">
</noscript>
You can use like this...
<!DOCTYPE HTML>
<html lang="en">
<head>
<link rel="stylesheet" href="general css file" />
<noscript>
<link rel="stylesheet" href="CSS file for JS dissable" />
</noscript>
This works for me
modernizr, the defacto standard for feature detection uses a "no-js" class on the body element, then when the page loads it uses javascript to remove this class. then you dont need seperate sheets you just need to precede your javascriptless styles with ".no-js".
.no-js .some-div {
background-color: #fff;
}
.some-div {
background-color: #000;
}
What is the purpose of the HTML "no-js" class?
You can use alternate stylesheets, with the sheet for disabled JS set as the preferred one:
<link id="sheet-nojs" rel="stylesheet" href="..." title="JS disabled" />
<link id="sheet-js" rel="alternate stylesheet" href="..." title="JS enabled" />
And then use JS to set the sheet for enabled JS as the preferred one:
document.getElementById('sheet-nojs').disabled = true;
document.getElementById('sheet-js').disabled = false;
<link id="sheet-nojs" rel="stylesheet" href="data:text/css,
body { background: red; }
body:before { content: 'JS disabled'; }
" title="JS disabled" />
<link id="sheet-js" rel="alternate stylesheet" href="data:text/css,
body { background: lime; }
body:after { content: 'JS enabled';}
" title="JS enabled" />
<script>
document.getElementById('sheet-nojs').disabled = true;
document.getElementById('sheet-js').disabled = false;
</script>
<script type="text/javascript">
// create the link element
var jsStyles = document.createElement('link');
// reference the stysheet
jsStyles.setAttribute('href', 'path/to/stylesheet.css');
// add it to the head element
document.head.appendChild(jsStyles);
</script>
<!-- use a "noscript" tag for browsers that have javascript disabled -->
<noscript>
<link href="path/to/no-js-styelsheet.css" />
</noscript>