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.
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!
How to navigate to sections inside a webpage without remembering history? That is, suppose I use the following code. When I click on About, it takes me to the About section. But it also adds #about in the URL. The problem is, if I click 10 times alternating between Home and About to navigate inside the page, then when I click the browser back button I backtracks all my actions like a stack. I want it to completely come out of the webpage. How to achieve this?
<!DOCTYPE html>
<html>
<head>
<title>testing</title>
</head>
<body>
<ul class="nav">
<li> Home</li>
<li> About</li>
</ul>
<section id="home" style="margin-top: 100%">
Home Sweet Home!
</section>
<section id="about" style="margin-top: 100%">
About Me
</section>
</body>
</html>
PS: If it is not possible with only html, using java Script is fine.
You can do the job with pure HTML like this:
<body>
<ul class="nav">
<li> Home</li>
<li> About</li>
</ul>
<section id="home" style="">
Home Sweet Home!
</section>
<section id="about" style="display: none;">
About Me
</section>
</body>
It's just so you get the idea, but in practice, you should write more organized JavaScript and probably need help from a library like JQuery to build a useful website or app with navigation. Even in this example, there's a lot of room for improvement:
There's a lot of long and repetitive code crammed in it, a problem an external JavaScript script or app will solve.
Thanks to history.pushState, the button link and browser back/forth works as expected (look in the address bar to see the URL change without refreshing page), but as soon as you refresh page, you'll get an error. You need a web server to serve the right content for this to work, with help from the client too.
Update
Improved version with organized script and animation to demonstrate what you can do with in-file CSS and script.
<!DOCTYPE html>
<head>
<title>testing</title>
<style>
section {
position: absolute;
left: -800px;
top: 100px;
transition: left .6s;
}
section.visible {
left: 200px;
}
</style>
<script>
function navTo(page) {
if (page === 'about') {
document.getElementById('home').classList.remove('visible');
document.getElementById('about').classList.add('visible');
history.pushState(null, null, 'about');
} else {
document.getElementById('about').classList.remove('visible');
document.getElementById('home').classList.add('visible');
history.pushState(null, null, 'home');
}
}
</script>
</head>
<body>
<ul class="nav">
<li><a href="#home" onclick="event.preventDefault();navTo('home')">
Home</a></li>
<li><a href="#about" onclick="event.preventDefault();navTo('about')">
About</a></li>
</ul>
<section id="home" class="visible">
Home Sweet Home!
</section>
<section id="about">
About Me
</section>
</body>
</html>
use:
element.scrollIntoView()
element=document.getElementById("element's id")
in html:
<a onclick="elementId.scrollIntoView()">element name</a>
note: any tag will do... the <a> will lose the underscore and color change - could be fixed with style. how about (flat, with style) buttons?
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 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 normally use Ruby on rails to develop my work with sublime text as my text editor, but today I am using just using notepad and creating a site locally. Now normally all my js and css is rendered perfectly via the asset pipeline in rails but I am having trouble getting the js to work, in particular the dropdown button in the navbar.
i am calling Jquery within the header
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
And I am calling my bootstrap.js file
<script src="js/bootstrap.js" type="text/javascript"></script>
The css for the navbar is as follows
<div class="container">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<a 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>
</a>
<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse">
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Menu</li>
<li>Contact Us</li>
</ul>
</div>
</div>
Am i missing something blindly obvious because the button is not responding?
Any help appreciated
Have you included the required bootstrap.css stylesheet?
<link href="css/bootstrap.min.css" rel="stylesheet">
Edit 1:
Here's a jsBin with your HTML/bootstrap. If you aren't seeing the same output then something is indeed wrong. If you're expecting some behavior when one of the navbar buttons gets clicked, then it isn't actually an error: there is no js behavior attached to the click of the navbar.
Bootstrap will provide you with a "prettified" navbar, it changes the aesthetics but not the behavior, you still need to connect to the individual clicks and define your own behavior for them.
Edit 2:
To connect to the clicks you have to get your menu items and use jQuery to define onclick behaviors. An example would be to define unique ids for each navbar item
<li><a id="home" href="#">Home</a></li>
<li><a id="about" href="#">About Us</a></li>
And then retrieve them with jQuery's selectors and attach click handlers:
$("#home").click(function() {
alert('home clicked');
});
$("#about").click(function() {
alert('about clicked');
});
I've edited the jsbin to add this example.
The CDN wasnt pulling the jquery so i have hosted the file locally now and it works fine