I made a webpage, where I can change background color, font style and size by 9 different buttons.
Problem #1 here is I'm using one css file for every single button,
and problem #2 is that when for example changing background color to blue, and I want to change the font style to cursive, I cant have 2 active at the same time, the other one goes back to default.
Any advice on how to do this?
Here are my CSS and HTML markup:
<!DOCTYPE html>
<html>
<head>
<link id="pagestyle" rel="stylesheet" type="text/css" href="default.css">
<link href="style.css" rel="stylesheet">
<script>
function swapStyleSheet(sheet){
document.getElementById('pagestyle').setAttribute('href', sheet);
}
</script>
</head>
<body>
<div class="menu-wrap">
<nav class="menu">
<ul class="clearfix">
<li>
CSS 1 <span class="arrow">▼</span>
<ul class="sub-menu">
<li onclick="swapStyleSheet('')">Bytt skrift</li>
<li onclick="swapStyleSheet('skrift1.css')">Bytt farge</li>
<li onclick="swapStyleSheet('background1.css')">Bytt bakgrunnsfarget</li>
</ul>
</div>
<div class="menu-wrap">
<nav class="menu">
<ul class="clearfix">
<li>
CSS 2 <span class="arrow">▼</span>
<ul class="sub-menu">
<li onclick="swapStyleSheet('')">Bytt skrift</li>
<li onclick="swapStyleSheet('skrift2.css')">Bytt farge</li>
<li onclick="swapStyleSheet('background2.css')">Bytt bakgrunnsfarget</li>
</ul>
</div>
<div class="menu-wrap">
<nav class="menu">
<ul class="clearfix">
<li>
CSS 3 <span class="arrow">▼</span>
<ul class="sub-menu">
<li onclick="swapStyleSheet('')">Bytt skrift</li>
<li onclick="swapStyleSheet('skrift3.css')">Bytt farge</li>
<li onclick="swapStyleSheet('background3.css')">Bytt bakgrunnsfarget</li>
</ul>
</div>
<p class="skrift">skrifttypen skal endre seg.</p>
<p class="skrift">skrifttypen skal endre seg.</p>
<p class="skrift">skrifttypen skal endre seg.</p>
</body>
</html>
Well, do not swap stylesheet files for starters. You can either:
have different classes for different situations, and set these classes on your element withs JavaScript. This is quite easy even in vanilla JS, for example:
document.getElementById('myButton').classList.add("btn-red");
load override stylesheets dynamically, which will override existing styles. So instead of having full-blown, complete stylesheet, just put the modifications in the CSS files, and load it after the default stylesheet.
I would definitely recommend the first approach, it is much more maintanable and sane. Most CSS frameworks work the same way, just take a look at Bootstrap (twitter-bootstrap) for example.
Related
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 1 year ago.
Improve this question
I made this website as part of the Odin Project curriculum and for some reason the social media icons (Facebook, Twitter, and Instagram) are showing on Chrome but not on Safari.
I tried to clear the cache and history on Safari.
Can anyone point out the compatibility issue and how to fix it?
Thank you.
I took the HTML from the website and made it into a snippet to test (with full URLs) Please try it and let me know what you see- it shows the icons on my Safari (on iPad IOS), though they are slightly overlapping each other.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Resturant</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://oasaleh.github.io/restaurant/index.css">
<link rel="icon" href="https://oasaleh.github.io/restaurant/resources/tabIcon.png">
</head>
<body>
<div id="content">
<section id="header" class="undefined">
<header id="title-bar" class="undefined">
<p id="undefined" class="title">Halal Guys</p>
</header>
</section>
<div id="nav-bar" class="undefined"><button id="Menu" class="nav bar item" href="">Menu</button><button id="Catering" class="nav bar item" href="">Catering</button><button id="ContactUs" class="nav bar item" href="">Contact Us</button></div>
<div id="contentWindow" class="undefined">
<ul id="menu" class="undefined">
<li class="menu item">
<p class="menu item name">Beef Gyro Platter</p> <img class="menu item photo" src="https://oasaleh.github.io/restaurant/resources/photos/food/beef-gyro-platter-530x530.jpeg"> </li>
<li class="menu item">
<p class="menu item name">Chicken Gyro Platter</p> <img class="menu item photo" src="https://oasaleh.github.io/restaurant/resources/photos/food/chicken-platter-530x530.jpeg"> </li>
<li class="menu item">
<p class="menu item name">Combo Platter</p> <img class="menu item photo" src="https://oasaleh.github.io/restaurant/resources/photos/food/combo-platter-530x530.jpeg"> </li>
<li class="menu item">
<p class="menu item name">Falafel Platter</p> <img class="menu item photo" src="https://oasaleh.github.io/restaurant/resources/photos/food/falafel-platter-530x530.jpeg"> </li>
</ul>
</div>
<footer id="footerSection" class="undefined">
<section id="socialMediaContact" class="undefined">
<ul class="socialmedia list">
<li class="socialmedia item"> <img class="social icon" id="iconFacebook" src="https://oasaleh.github.io/restaurant/resources/photos/icons/facebook-icon.svg"> </li>
<li class="socialmedia item"> <img class="social icon" id="iconTwitter" src="https://oasaleh.github.io/restaurant/resources/photos/icons/twitter-icon.svg"> </li>
<li class="socialmedia item"> <img class="social icon" id="iconInstagram" src="https://oasaleh.github.io/restaurant/resources/photos/icons/instagram-icon.svg"> </li>
</ul>
</section>
<section id="rights" class="undefined">
<div>
<p>All Rights Reserved 2021</p>
</div>
</section>
</footer>
</div>
<!-- <script src="https://oasaleh.github.io/restaurant/main.js"></script> -->
</body>
</html>
However, the actual website shows nothing and on inspection I see there is a main.js script. What does this do? It looks at first glance as though it has the HTML for the page in it. I suspect, but do not know, that this is overwriting the actual HTML in the page in some way.
Suggestion: try the page without this main.js and see what happens. Then investigate what this main.js is doing and why you have put it there
You can replace img tag with object tag like this.
<img src="instagram-icon.svg">
with
<object data="instagram-icon.svg" type="image/svg+xml"></object>
Try this code and if it doesn't work, let me know.
I'd like to thank every one who chimed in and helped! However, the issue was my AdBlocker! It was removing social media icons!
I am trying to develop my site with foundation dropdown. when i see reponsive size from pc browser it's working
(not 1st time:
click first time url will be ..../index.html#
again reload with this then it works. 2nd time it's working). when i load url in mobile and try to test it's not working.
Here is my code in header.html:
<div class="menuSet" style="background-image: url('img/image67.JPG');">
<nav class="top-bar row changedWmiddle" data-topbar style="background-image: url('img/image67.JPG');height:44px;">
<ul class="title-area setMenu">
<li class="name">
<h1> </h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon setMenu2">
<span>Menu</span>
</li>
</ul>
<div class="top-bar-section">
<!-- Left Nav Section -->
<ul class="left row" style="width:98%;">
<li class="setMenu3" style="min-width:16.43%;background-image:url('img/image67.JPG');"><img src="img/image68.JPG"></li>
<li class="setMenu4" style="min-width:16.43%;background-image:url('img/image67.JPG');"><img src="img/image69.JPG"></li>
<li class="setMenu4" style="min-width:16.43%;background-image:url('img/image67.JPG');"><img src="img/image70.JPG"></li>
<li class="setMenu4" style="min-width:16.43%;background-image:url('img/image67.JPG');"><img src="img/image71.JPG"></li>
<li class="setMenu4" style="min-width:16.43%;background-image:url('img/image67.JPG');"><img src="img/image72.JPG"></li>
<li class="setMenu4" style="min-width:16.43%;background-image:url('img/image67.JPG');"><img src="img/image73.JPG"></li>
</ul>
</div>
</nav>
I included header.html in my index.html and linked script like.
at starting of the page:
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/modernizr.js"></script>
at bottom:(before tag)
<script src="js/foundation/foundation.js"></script>
<script src="js//foundation/foundation.topbar.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
Here is the link of my url
http://ec2-54-178-189-98.ap-northeast-1.compute.amazonaws.com/SamePage_Website%28without_comment%29/index.html
Please help. Thanks in advance.
foundation.min.js includes all the foundation js.
You need to use either "foundation.min.js" or "foundation.js, foundation.topbar.js, etc".
Reference: http://foundation.zurb.com/docs/javascript.html
<script src="/js/foundation.min.js"></script>
<!-- or individually -->
<script src="/js/foundation.js"></script>
<script src="/js/foundation.alert.js"></script>
<!-- ... -->
<script src="/js/foundation.dropdown.js"></script>
<script src="/js/foundation.tab.js"></script>
The trouble you're experiencing could be coming from having both js files loaded.
Try just having one set loaded.
I found the problem is with modernizr.js, to test it you can remove foundation will work as expected.
I've done nearly everything I can think of, but I can't get my bootstrap elements (namely the nav collapse and the tabs) to work locally. They all work beautifully in fiddle, so I'm pretty confused.
the fiddle is here: http://jsfiddle.net/e4RZE/3/
and my code for bringing the js into my project is below the footer, like so:
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
my code for the header is as follows:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> <a class="brand" href="http://howard.edu">Project</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li>Home
</li>
<li class="active">Contact
</li>
<li>Now Playing
</li>
<li class="dropdown"> Public Resources <b class="caret"></b>
<ul class="dropdown-menu">
<li>Observatory
</li>
<li>Planetarium
</li>
<li class="divider"></li>
<li class="nav-header">For Teachers and Schools</li>
<li>Programs
</li>
<li>Host an Event
</li>
<li>Educational Initiatives
</li>
</ul>
</li>
<li class="dropdown"> Undergraduate Resources <b class="caret"></b>
<ul class="dropdown-menu">
<li>Observatory
</li>
<li>Planetarium
</li>
<li class="divider"></li>
<li class="nav-header">HU Physics</li>
<li>Physics Homepage
</li>
<li>Physics and Astronomy
</li>
</ul>
</li>
<li>Volunteer
</li>
<li>FAQ
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
EDIT: Bootstrap.css, bootstrap-responsive.css and my custom file (betterstrap2.css) are added like so:
<link href="css/bootstrap.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700 ' rel='stylesheet' type='text/css'>
<link href="css/betterstrap2.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
thanks in advance.
Make sure your jquery and bootstrap source files are located in the correct location to be loaded from those script tags.
Also, you should be loading the bootstrap.css file as well, if you want to actually see your bootstrapped elements looking pretty on the page :)
There are javascript errors or links to javascript files that are invalid. Hit F12 on the page and refresh to see what is failing.
I am trying to add a list to a <li> after a user clicks on the li. The list is being added but the list is not opening on a new page. See the nested list example on jQuery mobile site. When you click on a list node, the sub list is opening in a new page (kind of). I want the same functionality while dynamically adding list.
Here is my code http://jsfiddle.net/f869z/. When you click on a <li> its adding the new list but not in the same fashion as shown in the jQuery mobile site.
How can I achieve this functionality? Otherwise what is the preferred way to add nested list dynamically.
EDIT: This problem has been solved by refreshing the list view. Now I am adding a listview inside collapsible dynamically. But inside that list, when I am clicking a <li>, pageinit event is getting fired instead of click event. The click event is getting fired when we click the same li second time.
Updated code: http://jsfiddle.net/5zJC5/
I have updated your jsfiddle example so that it works. Check the jsFiddle example here
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Nested List</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script>
$(document).on('click', '#list li', function() {
$(this).append("<ul><li>Subcategory 1 <ul> <li data-role=\"list-divider\">Sub category</li> <li data-icon=\"false\">Test 1</li> <li data-icon=\"false\">Test 2</li> </ul> </li> <li>Subcategory 2 <ul> <li data-role=\"list-divider\">Sub category</li> <li data-icon=\"false\">Test 1</li> <li data-icon=\"false\">Test 2</li> </ul> </li></ul>").parent().listview('refresh');
});
</script>
</head>
<body>
<div id="list-page" data-role="page">
<div data-role="header">
<h1>Nested List Page</h1>
</div>
<div data-role="content">
<div data-role="collapsible-set" data-theme="b" data-content-theme="d">
<div data-role="collapsible">
<h3 data-position="inline">Filtered list<h3>
<ul data-role="listview" data-divider-theme="d" id="list">
<li>Adam Kinkaid</li>
<li>Alex Wickerham</li>
<li>Avery Johnson</li>
<li>Bob Cabot</li>
<li>Caleb Booth</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
I hope this helps
I am trying to achieve the stackable effect as shown here:
http://twitter.github.com/bootstrap/components.html#navs
but somehow it is not working for me. Here is the link to a plunk that I have created:
http://plnkr.co/edit/LSR3ijKGiOIyrYAbHm7g
It just shows three list items one below another without the navbar effect of bootstrap.
<!doctype html>
<html>
<head>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row-fluid">
<div class="offset4 span4">
<ul class="nav nav-tabs nav-stacked">
<li> Item1</li>
<li> Item2</li>
<li> Item3</li>
</ul>
</div>
</div>
</body>
</html>
I must be doing some blunder that something as simple as nav-stacked is not working. Would be glad and grateful if someone could point out my mistake.
Put the content in anchors, like so:
<ul class="nav nav-tabs nav-stacked">
<li class="active">Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>
Demo: http://jsfiddle.net/jpKAF/