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!
Related
I am really new so my knowledge in general is really poor.
I am trying to add a P5js sketch into a Bootstrap template.
The ideal would be to be able to build a responsive design website, with some image and video galleries with a p5js code on the background.
I have done some tests using an example I found onine but I was not able to do it.
I attach the code here
https://codepen.io/llorencg/pen/LYVMLjZ
Any help will be apreciated !!
Thanks :)
<html>
<head>
<meta charset="utf-8">
<title>p5 walkthrough</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.5/p5.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/css/bootstrap.css">
</head>
<body>
<nav class="navbar navbar-dark navbar-full bg-inverse" style="">
<a class="navbar-brand" href="#">Bootstrap and P5.js</a>
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">A Link to Nowhere</a>
</li>
</ul>
</nav>
<div class="container">
<div id="jumbo-canvas" class="jumbotron">
<h1>Fun With P5.js</h1>
<p class="lead">P5 is a JavaScript library that can be used to draw things onto an html canvas. The P5 reference guide can be found here, and legendary videos by Daniel Schiffman can be found here.</p>
<hr />
<p>By giving this div an id of jumbo-canvas and and placing <code>canvas.parent('jumbo-canvas')</code> in our setup function, we can draw inside this Bootstrap jumbotron.</p>
<p class="lead">
<a class="btn btn-info btn-lg" href="#" role="button">Click this button for some truth</a>
</p>
</div>
</div>
</body>
I found an old thread here which seems to have the answer to your question, as I think this is what you mean.
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.
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 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/
I'm currently developing jquery custom mobile template. I need to know can we use data-role="header" tag more than once in a page ? Because in my page as per the header and footer I've couple of in the middle also. For example headings should be wrapped with background color and even though I used will it be validate http://validator.w3.org/mobile/. Also I tried applying following jquerymobile class to a div class="ui-bar" but it's not working as I expected eg :(not reading the background color).
Alternatively I can define a custom class but I need to know have jquery already defined a class something similar to my requirement.
FYI: here is my HTML example
<div data-role="page" data-theme="a">
<header data-role="header">
<div>Main Heading</div>
</header>
<!-- logo -->
<hr/>
<div class="ui-grid-b">
<div class="ui-block-a">
<a href="#">
<div class="h_bag"></div>
BAG (0)
</a>
</div>
<div class="ui-block-b">
<a href="#">
<div class="lust_list"></div>
LUST LIST
</a>
</div>
<div class="ui-block-c">
<a href="#">
<div class="search_size"></div>
SEARCH SIZE
</a>
</div>
</div>
<!-- header options -->
<div class="ui-bar">
<h1>This Sub heading should to wrapped with background colour</h1>
</div>
</div>
You can easily use more the one header in jQuery Mobile, and here's an example:
http://jsfiddle.net/Gajotres/UGVwW/
Background color of every element can also be easily achieved but you will need to fore it with !important:
#second-header {
background: red !important;
}
Here's an HTML example:
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
Next
</div>
<div data-theme="a" data-role="header" id="second-header">
<h3>
First Page
</h3>
Next
</div>
<div data-role="content">
Test button
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>