How can I switch between elements using AJAX - html

I am relatively new to Ajax. I've created two <li> elements with <a> elements inside of them, both of them lead to other HTML files. What I am trying to achieve is that whenever I click on one of the links, the page automatically loads the HTML file related to it, however its not working for me. Whenever I click on one of the links, nothing happens. Thanks in advance! I am using JQuery with Ajax.
FIRST HTML FILE
$('li').find('a').on('click',function(event) {
event.preventDefault();
var href = $(this).attr('href');
$('.main-content').load(href + 'content-ajax');
});
.ajax-img {
margin-top: 8em;
float: left;
}
.ajax-img2 {
float: left;
margin-left: 10em;
margin-top: -5em;
}
.ajax-nadpis {
display: flex;
justify-content: center;
align-items: center;
height: 800px;
font-size: 2.7em;
}
.ajax-text {
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5em;
margin-top: -13em;
}
nav {
display: flex;
}
ul li {
display: inline-block;
padding-left: 18em;
margin-top: 2em;
}
ul li:hover {
cursor: pointer;
text-decoration: underline;
}
<!DOCTYPE html>
<html lang="en">
<head>
//FIRST HTML PAGE
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vlastna responzivna stranka</title>
<link rel="stylesheet" href="css/styles2.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#100;400&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Cinzel&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Tinos&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
</head>
<body>
<h2 class="podnadpis">Automaticke nacitanie clanku pomocou ajaxu (bez refreshu stranky)</h2>
<section class="ajax">
<div class="section-container">
<div class="img-holder">
<img src="ajax-IMGs/talltales.png" class="tall-tales-logo" alt="logo tall tales">
</div>
</div>
</section>
<article id="article">
<nav class="navigation">
<ul>
<li>Shroudbreaker</li>
<li>Skeleton Lords</li>
</ul>
</nav>
<div class="main-content">
<div class="content-ajax">
<img src="ajax-imgs/graymarrow.png" class="ajax-img" alt="">
<h3 class="ajax-nadpis">SKELETON LORDS</h3>
<p class="ajax-text">Tall Tales – Shores of Gold introduces Skeleton Lords, imposing characters clambering out of the oldest legends into the present day. Meaner than any of the bony marauders you’ve fought so far, these intimidating adversaries can only be encountered by following the story as it unfolds. Be prepared for anything when seeking out Skeleton Lords – these resourceful foes will resist any attempt to send them back to their resting place beneath the sands. They’re big, tough and full of surprises…</p>
</div>
</div>
</article>
<script src="javascript/jquery.js"></script>
<script src="javascript/jquery.parallax.js"></script>
<script src="javascript/main.js"></script>
</body>
</html>
SECOND HTML FILE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vlastna responzivna stranka</title>
<link rel="stylesheet" href="css/styles2.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#100;400&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Cinzel&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Tinos&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
</head>
<body>
<article id="article">
<nav class="navigation">
<ul>
<li>Shroudbreaker</li>
<li>Skeleton Lords</li>
</ul>
</nav>
<div class="main-content">
<div class="content-ajax">
<img src="ajax-imgs/shroudbreaker.png" class="ajax-img2" width=700px height=600px alt="">
<h3 class="ajax-nadpis">SHROUDBREAKER</h3>
<p class="ajax-text">The Shroudbreaker is the first Tall Tale in the Shores of Gold Arc. The Tale Book can be voted for on the table next to the Mysterious Stranger in the Tavern of any Outpost. The Tall Tale can be voted to be cancelled at the Ship's Voyage Table. Players can unlock three Checkpoints during this Tall Tale. If they wish to continue the Tall Tale at a later time, they can vote on any acquired Checkpoints at the Voyage Table.</p>
</div>
</div>
</article>
<script src="javascript/jquery.js"></script>
<script src="javascript/jquery.parallax.js"></script>
<script src="javascript/main.js"></script>
</body>
</html>
These are the errors I am getting

Load page content using AJAX
First of, you should use a templating engine (i.e: PHP) since it makes it infinitely easier to just change a head tag in one place than in N files. Same goes for scripts in footer etc.
Every page should be accessible on its own (via URL) but give the feel of no tab refresh, here's where AJAX comes at play:
header.php :
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title><?= $page_title ?></title>
<link rel="shortcut icon" href="#!" type="image/x-icon">
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav id="nav">
Home
About
Contact
</nav>
and footer.php :
<footer>
© <?= date("Y") ?> - Lorem Ipsum
<footer>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Create three files index.php, about.php and contact.php like the following and change the <h1> text respectively
<?php
$page_title = "Home";
include 'header.php';
?>
<div id="page">
<div id="content">
<h1>This is Home page</h1>
</div>
</div>
<?php
include "footer.php";
?>
<?php
$page_title = "About";
include 'header.php';
?>
<div id="page">
<div id="content">
<h1>This is About page</h1>
</div>
</div>
<?php
include "footer.php";
?>
<?php
$page_title = "Contact";
include 'header.php';
?>
<div id="page">
<div id="content">
<h1>This is Contact page</h1>
</div>
</div>
<?php
include "footer.php";
?>
Finally here's the JS script.js file:
jQuery(function ($) {
// Read history states
window.onpopstate = function (e) {
if (e.state) {
$("#content").html(e.state.html);
document.title = e.state.pageTitle;
}
};
$("#nav").on("click", "a", function (ev) {
ev.preventDefault(); // prevent default anchor behavior
const URL = $(this).attr("href"); // get page URL
const name = $(this).text(); // get page name
document.title = name;
// AJAX LOAD and pushState for browser history
$("#page").load(URL + " #content", function (data) {
const html = $(data).find("#content").html();
const pageTitle = $(data).find("h1").text();
// Handle history and browser's AddressBar
window.history.pushState({html, pageTitle}, "", URL);
});
});
});
Install PHP and set the php binaries paths in your Environment Variables (Windows).
Open terminal from your project folder and spin up a lightweight PHP cli-server:
php -S localhost:8080
and head to http://localhost:8080
The above is crawler friendly, meaning that a crawler visiting your page can index every other page and its contents.

Related

HTML file not linking to CSS file

The html file is not linking to the css file. Both the files are placed side by side in the same directory. It used to work fine before but suddenly it doesn't work. I have tried everything that was mentioned in the answers to similar questions here in StackOverflow but still doesn't work.
Html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<link href="https://fonts.googleapis.com/css?family=Poppins:200,400,600&display=swap" rel="stylesheet">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="style.css">
<title>Frontend Mentor | Four card feature section</title>
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
<style>
.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }
</style>
</head>
<body>
<div class="container">
<div class="part1">
<p>Reliable, efficient delivery</p>
<h2>Powered by Technology</h2>
<p> Our Artificial Intelligence powered tools use millions of project data points to ensure that your project is successful.</p>
</div>
<div class="part2">
<div class="supervisor">
<h3>Supervisor</h3>
<p>Monitors activity to identify project roadblock.</p>
</div>
<div class="wrapper">
<div class="teambuilder">
<h3>Team Builder</h3>
<p>Scans our talent network to create the optimal team for your project.</p>
</div>
<div class="karma">
<h3>Karma</h3>
<p>Regularly evaluates our talent to ensure quality.</p>
</div>
</div>
<div class="calculator">
<h3>Calculator</h3>
<p> Uses data from past projects to provide better delivery estimates.</p>
</div>
</div>
</div>
<footer>
<p class="attribution">
Challenge by Frontend Mentor.
Coded by Your Name Here.
</p>
</footer>
</body>
</html>
Css code:
body {
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: hsl(0, 0%, 98%);
text-rendering: optimizeLegibility;
}
.container {
width: 60%;
height: 60%;
}
For the folder structure please refer to this
https://github.com/swethalakshmi22/four-card-feature-section
The code you have uploaded on Github it has href="/style.css" please write
here your code in the question is fine.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<link href="https://fonts.googleapis.com/css?family=Poppins:200,400,600&display=swap" rel="stylesheet">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="style.css">
<title>Frontend Mentor | Four card feature section</title>
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
<style>
.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }
</style>
</head>
<body>
<div class="container">
<div class="part1">
<p>Reliable, efficient delivery</p>
<h2>Powered by Technology</h2>
<p> Our Artificial Intelligence powered tools use millions of project data points to ensure that your project is successful.</p>
</div>
<div class="part2">
<div class="supervisor">
<h3>Supervisor</h3>
<p>Monitors activity to identify project roadblock.</p>
</div>
<div class="wrapper">
<div class="teambuilder">
<h3>Team Builder</h3>
<p>Scans our talent network to create the optimal team for your project.</p>
</div>
<div class="karma">
<h3>Karma</h3>
<p>Regularly evaluates our talent to ensure quality.</p>
</div>
</div>
<div class="calculator">
<h3>Calculator</h3>
<p> Uses data from past projects to provide better delivery estimates.</p>
</div>
</div>
</div>
<footer>
<p class="attribution">
Challenge by Frontend Mentor.
Coded by Your Name Here.
</p>
</footer>
</body>
</html>
After checking your code-snippet , it seems that either css style.css is not on the same location where your html file is. Please check that.
Can you please check the right on the folder (IIS_USER) must have permission on this to read the style.css ?

magnific popup gallery not popping up

I am trying to make a gallery on my webpage using magnific popup but I can't get the image to show up in a popup it only shows up in a separate tab. How can I get it to show up in gallery view and enabled cycling through all the images in the web page's gallery? In addition, how can I change the size of the lightbox being displayed and the size of the thumbnail.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="magnific-popup/magnific-popup.css">
<!-- Magnific Popup core JS file -->
<script src="magnific-popup/jquery.magnific-popup.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/style.css">
<style type="text/css">
.modal-dialog {}
.thumbnail {margin-bottom:6px; height: 280px;}
.carousel-control.left,.carousel-control.right{
background-image:none;
margin-top:10%;
width:5%;
}
#open-popup {padding:20px}
.white-popup {
position: relative;
background: #FFF;
padding: 40px;
width: auto;
max-width: 200px;
margin: 20px auto;
text-align: center;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('.image-link').magnificPopup({type:'image'});
$('.test-popup-link').magnificPopup({
type: 'image'
// other options
});
});
</script>
</head>
<body>
<div id="main" role="main">
<br />
<br />
<br />
<div class="parent-container">
Open popup 1
Open popup 2
Open popup 3
</div>
</body>
</html>
The problem is with your HTML mark up !!
Open popup 1 This won't work.
<a class="test-popup-link" href="path-to-image-1.jpg">Open popup 2</a>
But this will work.
Check Codepen

CSS background not showing on browser

My css background image shows on dreamweaver but not in my google chrome browser for some reason it just shows a white background can anyone understand why? This is my code:
about.php file
<?php
include 'secure/db_connect.php';
include 'secure/functions.php';
sec_session_start(); // Our custom secure way of starting a php session.
if(login_check($mysqli) == true) { ?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>The Referee Perception Exam</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/aboutstyle.css" rel="stylesheet" type="text/css" media="screen" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>title</h1>
<p>paragraph here</p>
</div>
<div class="row">
<div class="col-sm-4">
<h3>Contact:</h3>
</div>
<div class="col-sm-4">
<h3>Social:</h3>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
</div>
</div>
</div>
</body>
</html>
<?php } else {
header( 'Location: http://localhost/project/index.php' ) ;
}
;?>
aboutstyle.css file
#charset "UTF-8";
body {
background-image: url("../img/pitch.jpeg");
background-color: #cccccc;
background-size:cover;
}
Guessing from the file structure I can see you might need to alter
background-image: url("../img/pitch.jpeg");
maybe to
background-image: url("../../img/pitch.jpeg");
or similar to correctly reach the image file from your stylesheet. But I can't be sure without seeing the structure. 404 errors in your browser should point you in the right direction.

ASP.net/HTML how to customize URL

I have a website when I open my frontpage on my website it goes www.website.com and when I press Contact it goes www.website.com/Contact That's fine, but when I go back to my Frontpage it display www.website.com/Default How do I remove "Default" I want it to only write www.website.com when I press my logo or redirect to my frontpage.
SiteLayout.cshtml
<head>
<meta charset="utf-8" />
<title>Website Title</title>
<link href="~/Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="~/favicon.png" rel="shortcut icon" type="image/x-icon" />
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery-ui-1.10.3.js"></script>
<script src="~/Scripts/modernizr-2.6.2.js"></script>
<meta name="viewport" content="width=device-width" />
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title"><img src="Images/Website White.png" height="50" />- My Website Text</p>
</div>
Default.cshtml
#{
Layout = "~/_SiteLayout.cshtml";
}
#section featured {
<title>Website Title</title>
<section class="featured">
<div class="content-wrapper">
<hgroup class="title">
<h2></h2>
</hgroup>
<p>
A lot of text
</p>
</div>
</section>
}
let me know if you need more code.
The Default part of the URL is coming out because it is in your link back to the homepage, I'm guessing this one <a href="~/Default">.
As the root URL links to the Default page anyway, you can just remove 'Default' part from your href, in order to go the root without the path:
<a href="~/">
Aside from this the alternative is to redirect www.website.com/Default to www.website.com in your server-side code.

Scrollspy highlighting not working in Bootstrap 3

I'm having difficulty with ScrollSpy on my web page. I've tried to put the class file indicators into the correct locations but they are still not showing up.
fiddle
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Unix Command Crib Sheet</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="favicon.ico">
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="command-crib-sheet.css" rel="stylesheet">
</head>
<body data-spy="scroll" data-target=".thingy">
<div class="navbar-fixed-top">
<h2>Unix Command Crib Sheet</h2>
</div>
<div class="container">
<div class="col-md-3">
<div id="centered-nav" class="bs-sidebar hidden-print affix">
<nav id="thingy" class="nav bs-sidenav">
<li>
...
Yes, just add a class 'thingy' to
<div class="container thingy">
added new css to highlight the text(change style accordingly)
li.active a {
color: red;
}
and finally add this script to page
<script type="text/javascript">
$('body').scrollspy({
target: '.thingy'
});
</script>
last but not least i have changed <nav> to <ul>
<nav id="thingy" class="nav bs-sidenav">
to
<ul id="thingy" class="nav bs-sidenav">
That's it..!