Showing specific div when clicked on a button - javascript

Me and my friend are building a website to show menus of certain restaurants around our campus. We're trying to make a one page website. There are two main divs on the page. One of them show the restaurants list and the other one is supposed to show the menu of the selected restaurant from the restaurants list.
There are too many questions about this on the web and we've tried countless of fiddles but we couldn't manage to get them working. Last 2 fiddles we've tried are the following:
> https://jsfiddle.net/VpkKn/387/
> https://jsfiddle.net/n53qg/
Our page is: http://178.62.254.14/test/
Can you guide us how to correctly use these fiddles? We've imported the jquery library and tried to put these scripts on different positions on the page including the head tag of the page.
Edit: Code of the page may look a little bit messy because we're also learning the html at the same time. We're sorry for that :)
Summary for the code of the page is as following:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="http://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"
type="text/css">
<link href="css/w3.css" rel="stylesheet" type="text/css">
<link href="css/custom.css" rel="stylesheet" type="text/css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js">
</script>
<title>Kalkanlı Keyif</title>
</head>
<body>
<header>
<div class="w3-container">
<div id="logocontainer" class="w3-col" style="width: 20%">
<img src="images/logo.png"> </div>
<div id="blankcol" class="w3-col" style="width: 5%">
 </div>
<div id="linkcontainer" class="w3-col" style="width: 75%">
<div class="w3-col links" style="width: 20%">
Link 1</div>
<div class="w3-col links" style="width: 20%">
Link 2</div>
<div class="w3-col links" style="width: 20%">
Link 3</div>
<div class="w3-col links" style="width: 20%">
Link 4</div>
<div class="w3-col links" style="width: 20%">
Link 5</div>
</div>
</div>
</header>
<video id="bgvid" autoplay="" controls=""
loop="" muted="" poster="images/background.jpg">
<source src="http://testweb.creatink.org/video/1.MP4" type="video/mp4">
</video>
<div class="w3-container">
<div id="restlist" class="w3-col" style="width: 20%">
<button id="abarButton" class="restaurantButton" type="button">
A Bar</button>
<button id="artolyeButton" class="restaurantButton" type="button">
A‎®tölye</button>
<button id="burgercityButton" class="restaurantButton"type="button">
Burger City</button>
<button id="cafedaysButton" class="restaurantButton"type="button">
Cafe Days</button>
..... //Buttons continue
</div>
<div id="blankcol" class="w3-col" style="width: 5%">
 </div>
<div id="menu" class="w3-col" style="width: 75%">
<div class="donatello">
<p class="restName">Donatello Pizza</p>
<table class="w3-table">
<?php
/*PHP code for showing the menu of a restaurant
?>
......................
</table>
</div>
</div>
</div>
</body>
</html>

It's called a SPA (Single Page Application).
So here is a jfiddle that displays what your site currently does. Are you wanting help with the functionality as well?
All you do is add all the resources (js/css files etc) one at a time and then add your html (everything in the tag).
You guys should use AngularJS to do this site. It's made for these sort of apps.
http://jsfiddle.net/jz3pLL22/
$('a').on('click', function(){
var target = $(this).attr('rel');
$("#"+target).show().siblings("div").hide();
});

Related

Swup animations

I am using swup for page transitions but nothing ever happens for my specific website. I got it to work on a simple two-page HTML example website, but doing the exact same thing for my portfolio is not working. I have been trying to figure this out for days now and I'm getting desperate.
What I've Tried
Using the script link from unpkg.
Creating a full start-up document to install Node on my website itself.
Putting the single const variable in a separate document and in the HTML file itself.
Putting the 'main id="swup" class="transition-fade' tag only on a portion of my website where I want it to point.
Checked to make sure there are no typos on my CSS classes.
Changing the file source to start with ./or/or none.
What I Need
I want to make a page transition from the portfolio part of my website to make a fade-in to the next page.
Relevant code
.transition-fade {
opacity: 1;
transition: .5s;
}
html.is-animating .transition-fade {
opacity: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght#500&family=Russo+One&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/CSS/style.css">
<link id="theme-style" rel="stylesheet" href="">
<script defer src="/app.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.13.1/js/all.js"></script>
<script defer src="/index.js" type="text/javascript"></script>
<script defer src="/node_modules/swup/dist/swup.min.js"></script>
<script defer>
const swup = new Swup();
</script>
<title>Kim Lachance</title>
</section>
<main id="swup" class="transition-fade">
<section id="post-section" class="s1">
<div class="main-container">
<h3 style="text-align: center;">Some of my projects</h3>
<div class="post-wrapper">
<div>
<div class="post">
<img class="thumbnail" src="./images/tindog.sr.png" alt="">
<div class="post-preview">
<h6 class="post-title">Tindog</h6>
<p class="post-intro">Fictional dog dating app website made with a Bootstrap framework</p>
Visit
</div>
</div>
</div>
<div>
<div class="post">
<img class="thumbnail" src="./images/omnifood.sr.png" alt="">
<div class="post-preview">
<h6 class="post-title">Omnifood</h6>
<p class="post-intro">Fictional food delivery app website made with HTML, CSS and jQuery</p>
Visit
</div>
</div>
</div>
<div>
<div class="post">
<img class="thumbnail" src="./images/klmedia.sr.png" alt="">
<div class="post-preview">
<h6 class="post-title">KL Media</h6>
<p class="post-intro">Website for my own freelancer marketing company</p>
Visit
</div>
</div>
</div>
<div>
<div class="post">
<img class="thumbnail" src="./images/drumkit.sr.png" alt="">
<div class="post-preview">
<h6 class="post-title">Drumkit Javascript</h6>
<p class="post-intro">An exercise I built to flex my javascript muscles</p>
Visit
</div>
</div>
</div>
<div>
<div class="post">
<img class="thumbnail" src="./images/dicee.sr.png" alt="">
<div class="post-preview">
<h6 class="post-title">Dicee Game Javascript</h6>
<p class="post-intro">An exercise I built to flex more javascript muscles</p>
Visit
</div>
</div>
</div>
</div>
</div>
</section>
</main>
My next page also has all of these tags and scripts on them.
Thank you!

semantic ui dropdown when hover

everybody, I'm trying the first example in
https://semantic-ui.com/collections/menu.html
it should work when hovering it any idea I'm not getting any error in the console but the dropdown not working not even when I click nothing happens
may this happens because I'm using semantic-ui CDN ?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Dev College</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
</head>
<body>
<div class="ui text menu">
<div class="item">
<img src="default.png">
</div>
<a class="browse item">
Browse Courses
<i class="dropdown icon"></i>
</a>
<div class="ui right dropdown item">
More
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">Applications</div>
<div class="item">International Students</div>
<div class="item">Scholarships</div>
</div>
</div>
</div>
<div class="ui flowing basic admission popup">
<div class="ui three column relaxed divided grid">
<div class="column">
<h4 class="ui header">Business</h4>
<div class="ui link list">
<a class="item">Design & Urban Ecologies</a>
<a class="item">Fashion Design</a>
<a class="item">Fine Art</a>
<a class="item">Strategic Design</a>
</div>
</div>
<div class="column">
<h4 class="ui header">Liberal Arts</h4>
<div class="ui link list">
<a class="item">Anthropology</a>
<a class="item">Economics</a>
<a class="item">Media Studies</a>
<a class="item">Philosophy</a>
</div>
</div>
<div class="column">
<h4 class="ui header">Social Sciences</h4>
<div class="ui link list">
<a class="item">Food Studies</a>
<a class="item">Journalism</a>
<a class="item">Non Profit Management</a>
</div>
</div>
</div>
</div>
</body>
</html>
The example code doesn't include any javascript like the other examples on the same page. If you want the dropdowns to work look into the dropdown documentation under the usage tab which talks more about coupling the dropdowns inside the menu. Dropdowns. And the CDN is fine.

How to add the data when its already choose the name and not repeating

I'm having a hard time in this code. its repeating when its already chosen and i want to add data in DB when its already chosen
When I click spin the randomizer will choose the name and that name will update his status to done and it will not choose when I click again the spin button.
Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Binggo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body ng-app="app" ng-controller="app" onload="localStorage.clear()">
<div class="jumbotron text-center">
<h1>Title is here</h1>
<p>Sub details will be printed out here</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-6">
<img class="left-img card-img-top" style="width:50%; margin-left:25%;" src="data:image/jpeg;base64,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" alt="Card image cap">
<h3 class="left-text" style="text-align:center;"></h3>
</div>
<div class="col-sm-6">
<img class="middle-img card-img-top" style="width:50%; margin-left:25%;" src="data:image/jpeg;base64,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" alt="Card image cap">
<h3 class="middle-text" style="text-align:center;"></h3>
</div>
<div class="col-sm-12">
<div class="col-sm-12 less"><br>
<textarea name="remarks" class="remarkss" style="width:50%; margin-left:25%; margin-top:5%;" placeholder="Enter your remarks here !" rows="8"></textarea><br>
<center><button class="btn btn-primary send">Done</button></center>
</div>
<center><button class="btn btn-success" ng-click="spin()">Spin</button></center> <br>
</div>
</div>
</div>
</body>
</html>
you're using ng-click but Angular is not imported in this HTML.
try onclick, if it fits with the way spin function is defined.

Added Polymer auto-binding template, javascript stopped working

So I layed out my entire site with HTML and CSS. I then did some javascript, namely to handle some tab switching. Everything was working great. When I went to wire up the data, rather than putting my entire site in a polymer element, I put an auto-binding template around the bulk of the HTML then just used smaller elements within. The data is all working great, but now that javascript stopped working.
When you look at the DOM it looks a bit off, I'm not very familiar with how the shadow-dom works, so I don't know if this is right, but within #document-fragment I see an exact duplicate of everything I see after #document-fragment (ie "top", "middle", "tabs", etc)
Here is the relevant javascript and the full HTML:
$('.tab').on('click', function() {
$('.tab').removeClass('selected');
$('.content').hide();
$(this).addClass('selected');
var t = $(this).html();
$('.' + t).show();
})
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="styles/main.css">
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="bower_components/core-ajax/core-ajax.html">
<link rel="import" href="elements/air-appName.html">
<link rel="import" href="elements/air-appPropertyList.html">
</head>
<body>
<div id="main">
<template is="auto-binding">
<core-ajax auto handleAs="json" url="app.json" response="{{app}}"></core-ajax>
<div id="top">
<img id="imgLogo" src="images/app_AIR.png">
<div id="itemHeader">
<img id="imgDataQuality" src="images/DataQuality0.png">
<air-appName id="lblTitle" name="{{app.name}}">Loading</air-appName>
</div>
</div>
<div id="middle">
<div id="left">
<input id="txtSearch" type="text">
<img id="btnSearch" src="images/btnSearch.gif">
<air-appPropertyList id="appProperties" props="{{app.props}}"></air-appPropertyList>
</div>
<div id="right">
<div id="tabContent">
<!--TODO: Tabs need to be more dynamic-->
<div id="tabs">
<span class="tab">General</span>
<span class="tab">Technical</span>
<span class="tab">Contacts</span>
<span class="tab">Links</span>
<span class="tab">Desktop</span>
</div>
<div class="content General">
This is the general tab
</div>
<div class="content Technical">
<table-servers serversUrl="{{app.associatedServers}}"></table-servers>
</div>
<div class="content Contacts">
This is the Contacts tab
</div>
<div class="content Links">
This is the links tab
</div>
<div class="content Desktop">
This is the desktop tab
</div>
</div>
</div>
</div>
<div id="bottom">
<div id="itemFooter">
</div>
</div>
</template>
</div>
<script src="scripts/vendor/jquery-1.11.1.min.js"></script>
<script src="scripts/vars.js"></script>
<script src="scripts/functions.js"></script>
<script src="scripts/main.js"></script>
<script src="scripts/ready.js"></script>
</body>
</html>

Page Formatting Drop-Down

I have recently started working on a project for a new webpage. My only problem is that on some web browsers (Apple Safari, Mozilla Firefox) the text and images are shifted of way to far to the left. I wanted to know if I could make a drop-down box that would change the percent the text is to the left.
If there is a more simple way of making the format appear normal on all browsers and monitors please let me know.
My code looks like this:
<html>
<head>
<title>GameLikeBacon.com</title>
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<link rel="icon" type="image/ico" href="http://www.mysite.com/favicon.ico" />
</head>
<body>
<center>
<IMG SRC="background.gif">
</center>
<DIV STYLE="position:absolute; top:100px; left: 15%; width:950px; height:1150px">
<center>
<script type="text/javascript">
// Empty JavaScript Section, Cookies Not Working
</script>
<left><a href="http://www.youtube.com/user/ethan1bacon56?feature=mhee">
<img src="logo.gif" onmouseover="this.src='logos.gif'" onmouseout="this.src='logo.gif'" style="border-style: none"/>
</a>
</left>
<center><a href="Action Games.html"><img src="actionbutton1.gif"
onmouseover="this.src='actionbutton2.gif'" onmouseout="this.src='actionbutton1.gif'" style="border-style: none"/></a>
Adventure
Arcade
Sports
Strategy
</center>
<h2 align="left">Newest Game: Plants vs. Zombies</h2>
<a href="Plants vs. Zombies.html">
<img src="zombie.jpg" style="border-style: none;" align="left">
</a>
<h2 align="right">Featured Game: Fancy Pants 1</h2>
<a href="Fancy Pants 1.html">
<img src="Fancy.jpg" onmouseover="this.src='Fancy2.jpg'" onmouseout="this.src='Fancy.jpg'" style="border-style: none" align="right">
</a>
<right>
<img src="Bacon.gif">
</right>
<center>
<p style="font-size: 35px;">Newest Games</p>
</center>
<center> Plants vs. Zombies
Johnny Upgrade
</center>
<center>
<h1>----------------------------------------</h1>
</center>
<center><img src="Ad.gif" style="border-style: none;">
</center>
<center>
<h6>Want your advertisment here? Contact me at ethandpeck#hotmail.com</h6>
</center>
<img src="splash.gif">
</DIV>
</body>
</html>
Is there a better way to do this or can I use the drop down to decide the percent the text is to the left? By the way, I am 11 so don't downvote me because this may seem simple.

Categories