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!
Related
I connected my templete.php to style.css but when I am changing anything in templete.php, it's showing the result but if I change anything in the stylesheet, it shows no result. what should I do?
My website is not live. i am doing it on wamp server.
templete.php
<!DOCTYPE html>
<html>
<head lang="en">
<title>SEO SOBER</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Merienda"
rel="stylesheet"
<head>
<body>
<header id="particles-js">
<?php
include "navbar.php";
?>
</header>
<!--..... header ends.......-->
<div class="clients">
<h3>Our Clients</h3>
<img class="client-img" src="images/clients.png">
</div>
<!--clients ends -->
<div class="container-About">
<div class="text">
<h3>SEO SOBER Digital Story</h3>
<p>about company</p>
</div>
<div class="button">
READ MORE
</div>
</div>
<!-- about ends -->
<div class="features">
<h3>Services</h3>
<div class="maincontainer">
<!-- first card-->
<div class="thecard">
<div class="thefront">
<div class="seo_card">
<img class="services-image" src="images/seo-gif-10.gif">
<h4>Search Engine Optimization</h4>
</div>
</div>
<div class="theback">back of the card</div>
</div>
<!-- second card-->
<div class="thecard">
<div class="thefront">
<div class="seo_card">
<img class="services-image" src="images/web-design-service.gif">
<h4>Web Design</h4>
</div>
</div>
<div class="theback">back of the card</div>
</div>
<!-- third card-->
<div class="thecard">
<div class="thefront">
<div class="seo_card">
<img class="services-image" src="images/Development.gif">
<h4>Web Development</h4>
</div>
</div>
<div class="theback">back of the card</div>
</div>
<!-- fourth card-->
<div class="thecard">
<div class="thefront">
<div class="seo_card">
<img class="services-image" src="images/social.gif">
<h4>Social Media Marketing</h4>
</div>
</div>
<div class="theback">back of the card</div>
</div>
<div class="clearfix">
</div>
</div>
</div>
<!-- services end-->
<script src="js/particles.js"></script>
<script src="js/particles.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
please tell me what to do...
I am trying to do changes for half an hour but nothing happenes.
I also add the particles effect. is that the problem?
i think you are loading your cache, you have to hard reset your page. Try reloading like this on your page:
> -Hold the Ctrl key and press the F5 key.
> -Hold the ⇧ Shift key and click the Reload button on the navigation toolbar.
> -Hold the Ctrl key and click the Reload button on the navigation toolbar.
> -Hold the ⇧ Shift key and press the F5 key.
I am using design Material Design. I choose to use used FABs in Card to display content composed of different types of objects. Now, I try to add modal bottom sheet style with it and use the floating action button as a trigger of the modal, but nothing appear below. My codes are the following below:
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/js/materialize.min.js"></script>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
<div class="row">
<div class="col s12 m4 l4">
<div class="card">
<div class="card-image">
<img src="http://materializecss.com/images/sample-1.jpg">
<a class="btn-floating btn-large halfway-fab light-green accent-3" href="#modal2"><i class="material-icons">add</i></a>
</div>
<div class="card-content">
<span class="card-title">Card Title</span>
<p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
</div>
</div>
</div>
</div>
<!-- Modal Structure -->
<div id="modal2" class="modal bottom-sheet">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
Agree
</div>
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function() {
$('.modal').modal();
});
</script>
jquery-2.1.1.min.js library must be added before than materialize.min.js library.
Try this code;
$(document).ready(function() {
$('.modal').modal();
});
<!DOCTYPE html>
<html>
<head>
<title></title>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/js/materialize.min.js"></script>
</head>
<body>
<div class="row">
<div class="col s12 m4 l4">
<div class="card">
<div class="card-image">
<img src="http://materializecss.com/images/sample-1.jpg">
<a class="btn-floating btn-large halfway-fab light-green accent-3" href="#modal2"><i class="material-icons">add</i></a>
</div>
<div class="card-content">
<span class="card-title">Card Title</span>
<p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
</div>
</div>
</div>
</div>
<!-- Modal Structure -->
<div id="modal2" class="modal bottom-sheet">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
Agree
</div>
</div>
</body>
</html>
Looks like in Materialize you reference a modal using href="#modal2" - not data-modal. Try that.
Src: http://materializecss.com/modals.html
This question already has answers here:
Where do you include the jQuery library from? Google JSAPI? CDN?
(16 answers)
Closed 4 years ago.
I am trying to set up JQuery Scrollify on my website to get a smooth scroll from one section to the others but cannot make it work! I tried different ways and think I might just be missing something? I think I might not be implementing the script correctly or not giving the sections good class name..Or maybe because I am using Bootstrap??
Need help here!! Thank you so much!
Here is my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>...</title>
<link href="css/magicledger.css" rel="stylesheet" type="text/css">
<link href="css/normalize.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap.min.css" rel="stylesheet">
<script>
$(function() {
$(".section").css({"height":$(window).height()});
$.scrollify({
section:".section"
});
$(".scroll").click(function(e) {
e.preventDefault();
$.scrollify("move",$(this).attr("href"));
});
});
</script>
</head>
<body>
<section class="section section1">
<header class="jumbotron vertical-center">
<div class="container">
<h1>...</h1>
<h3>...</h3>
<script type="text/javascript">
window.Maitre = { uuid: "MF301766dea0" };
</script>
<script data-maitre src='https://maitreapp.co/widget.js' async></script>
</div>
</header>
</section>
<div class="container-fluid">
<section class="section section2">
<div class="row"> <!------- Row 1 ----->
<div class="col-md-6">
<div class="inside-row">
<img src="icons/animat-bezier-color-2.gif" alt="icon1">
</div>
</div>
<div class="col-md-6">
<div class="inside-row">
<h3>...</h3>
<p>...</p>
</div>
</div>
</div>
</section>
<section class="section section3">
<div class="row"> <!-- Row 2 -------->
<div class="col-md-6">
<div class="inside-row">
<img src="icons/animat-layers-color-2.gif" alt="icon2">
</div>
</div>
<div class="col-md-6">
<div class="inside-row">
<h3>...</h3>
<p>...</p>
</div>
</div>
</div>
</section>
<section class="section section3">
<div class="row"> <!-- Row 3 ---------->
<div class="col-md-6">
<div class="inside-row">
<img src="icons/animat-network-color-2.gif" alt="icon3">
</div>
</div>
<div class="col-md-6">
<div class="inside-row">
<h3>...</h3>
<p>...</p>
</div>
</div>
</div>
</section>
</div> <!-- ENd of container fluid ------>
and my javascript extrernal sheet:
jQuery(document).ready(function($) {
$.scrollify({
section : ".section-class-name",
sectionName : "section-name",
easing: "easeOutExpo",
scrollSpeed: 1100,
offset : 0,
scrollbars: true,
standardScrollElements: "",
setHeights: true,
before:function() {},
after:function() {},
afterResize:function() {},
afterRender:function() {}
});
Where are you including your .js files? You are probably running your javascript in the head section for your page before you are loading jquery and scrollify.
Load all of your .js files in the head before you run any of your javascript on the page or move your javscript into your .js file.
You might need to add <script src="script/jquery-2.2.1.min.js"></script> inside your HTML body element.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">< /script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/scrollify/1.0.19/jquery.scrollify.js">< /script>
Paste this right under the <head> tag
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>
How do I prevent the default behaviour of jquery stripping out my JS?
function callBackFunctionLoadPage(data)
{
var data = $(data).find('#content');
alert($(data).html());
$("#content").html(data);
$("#page").fadeTo(100,1);
}
function loadPage(url,parm)
{
//alert(url);
loadNextBackInPage_URL = url;
$("#page").fadeTo(100,.2);
$.post(url,parm,callBackFunctionLoadPage);
}
In my code I want the tags but jquery strips them out:
Original code:
<div id="content">
<div class="post">
<h1 class="title">Kannada on campus - photos</h1>
<p class="meta"> </p>
<div class="entry">
<p> </p>
<div id="gallery">
<img src="images/gallery/daya_240909_byreg1.jpg">
<img src="images/gallery/Group 2.jpg">
<img src="images/gallery/IMG00216-20101025-2001.jpg">
<img src="images/gallery/kamal-hassan-in-kannada-02.jpg">
<img src="images/gallery/kannada2.jpg">
<img src="images/gallery/Nayantara-Kannada.jpg">
<img src="images/gallery/P1019502.jpg">
<img src="images/gallery/P1019603.jpg">
<img src="images/gallery/P1019643.jpg">
<img src="images/gallery/P1019644.jpg">
<img src="images/gallery/Zee-Kannada-Presents-Rajotsava.jpg">
</div>
<script src="galleria/galleria-1.2.3.min.js"></script>
<script>
Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
$("#gallery").galleria({
width: 500,
height: 500
});
</script>
</div>
<p class="links"> </p>
</div>
</div>
<!-- end content -->
But From jquery:
<div id="content">
<div class="post">
<h1 class="title">Kannada on campus - photos</h1>
<p class="meta"> </p>
<div class="entry">
<p> </p>
<div id="gallery">
<img src="images/gallery/daya_240909_byreg1.jpg">
<img src="images/gallery/Group 2.jpg">
<img src="images/gallery/IMG00216-20101025-2001.jpg">
<img src="images/gallery/kamal-hassan-in-kannada-02.jpg">
<img src="images/gallery/kannada2.jpg">
<img src="images/gallery/Nayantara-Kannada.jpg">
<img src="images/gallery/P1019502.jpg">
<img src="images/gallery/P1019603.jpg">
<img src="images/gallery/P1019643.jpg">
<img src="images/gallery/P1019644.jpg">
<img src="images/gallery/Zee-Kannada-Presents-Rajotsava.jpg">
</div>
</div>
<p class="links"> </p>
</div>
</div>
<!-- end content -->
EDIT
Here is my actual html page that's getting loaded
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Kannada on campus</title>
<meta name="keywords" content="" />
<link rel="icon" href="images/icon.jpg"/>
<meta name="description" content="" />
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
</head>
<div id="box"><img src="images/twitter.png" width="50" height="50" alt="Follow us on twitter" longdesc="http://twitter.com/bedupako" border="0" /> <img src="images/youtube.png" width="50" height="50" alt="Follow us on twitter" longdesc="http://www.youtube.com/user/Bedupako" border="0" /> <img src="images/Facebook Product Profile.png" width="50" height="50" alt="Follow us on twitter" longdesc="http://www.facebook.com/pages/BEDUPAKO/301073813491?ref=ts" border="0" /> <img src="images/orkut.png" width="50" height="50" alt="Follow us on twitter" longdesc="http://www.orkut.com/Community?cmm=98290522" border="0" />
<!--end box-->
</div>
<body>
<!-- start header -->
<div id="header">
<div id="search"></div>
</div>
<div id="logo">
<h1>Kannada on campus</h1><br /><br />
<h2>Kannada kali, uddaraaagi. Baai muchhikondu bhashe maatadi.</h2>
</div>
<!-- end header -->
<hr />
<!-- start page -->
<div id="page">
<div id="menu">
<ul>
<li>Home</li>
<li>Events</li>
<li>Photos</li>
<li>About</li>
<li>Contact Us</li>
<li>ಕನ್ನಡ</li>
</ul>
</div> <!-- start content -->
<div id="content">
<div class="post">
<h1 class="title">Kannada on campus - photos</h1>
<p class="meta"> </p>
<div class="entry">
<p> </p>
<div id="gallery">
<img src="images/gallery/daya_240909_byreg1.jpg">
<img src="images/gallery/Group 2.jpg">
<img src="images/gallery/IMG00216-20101025-2001.jpg">
<img src="images/gallery/kamal-hassan-in-kannada-02.jpg">
<img src="images/gallery/kannada2.jpg">
<img src="images/gallery/Nayantara-Kannada.jpg">
<img src="images/gallery/P1019502.jpg">
<img src="images/gallery/P1019603.jpg">
<img src="images/gallery/P1019643.jpg">
<img src="images/gallery/P1019644.jpg">
<img src="images/gallery/Zee-Kannada-Presents-Rajotsava.jpg">
</div>
<script src="galleria/galleria-1.2.3.min.js"></script>
<script>
Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
$("#gallery").galleria({
width: 500,
height: 500
});
</script>
</div>
<p class="links"> </p>
</div>
</div>
<!-- end content -->
<!-- start sidebar two -->
<div id="sidebar2" class="sidebar">
<ul>
<li>
<h2>Register you event</h2>
Tell us if you are conducting any kannada event and we will update it to our audience!
</li>
<li>
<h2>Subscription</h2>
<form id="form1" method="post" action="other_files/add_mailing_list.php">
<label>
Subscribe to our mailing list:
<input type="text" name="sub-email" id="sub-email" />
<input type="submit" name="submit" id="submit" value=" Add " />
<input type="hidden" name="redirect" id="redirect" value="%2Fkoc%2F%3Fp%3Dph" />
</label>
</form>
<h2>Current Events</h2>
<ul>
</ul>
<h2>archives</h2>
<ul>
<li>test</li>
</ul>
</li>
</ul>
</div>
<!-- end sidebar two -->
<div style="clear: both;"> </div>
</div>
<!-- end page -->
<hr />
<!-- start footer -->
<div id="footer">
<p>©2011 All Rights Reserved. • Designed by Ajitah | humans.txt</p>
</div>
<!-- end footer --></body>
</html>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-23549810-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
I suggest you do things differently. Firstly, ajax calls are good because they're lightweight, so instead of loading a whole page, you can just grab the updated data and inject it where necessary. If you're getting a giant set of markup including scripts you're essentially using ajax to do a normal http page request. That's like looking at the fast line in the supermarket (10 items or less) and seeing it move faster than the isle you're currently standing in, so you move there. But if you do that for every request, you end up turning the fast lane into a normal lane.
Getting javascript code from the server to execute is usually a sign that you're not thinking correctly about the problem, since your mixing domains horribly.
Firstly, why not just have a function that executes every time you ajax the next page/gallery in? Why do you need to get the code from the server? In accordance with my first point, why not just get an array of new filenames and build the new gallery from those?
If for some reason you feel you want to continue this way anyway (I should point out at this point that executing code in such a manner is not just bad practise but unsafe in certain circumstances), you can extract the code and eval it:
Assuming there's only one block of code, and it's wrapped in <script></script> (which is not taking into account all sorts of whitespace and funny characters):
function callBackFunctionLoadPage(data)
{
...
eval(data.match(/<script>(.*)<\/script>/im)[1]);
}
UPDATE
jquery strips out the javascript but it still executes it:
$('#content').html('<div><script>alert("hello, world!");</script></div>');
So there is almost no reason to want the script tags themselves if their content is already executed...
UPDATE 2 (for non-believers)
var scriptDiv = $('<div><span></span><script>alert("boom!");</script></div>');
alert("not yet"); // the above is created but not executed until added to the DOM
$('body').append(scriptDiv); // there you go, proof that it is executed
alert(scriptDiv.html()); // to prove that the script was stripped
Have you tried using JS's native innerHTML ?
$("#content").get(0).innerHTML = data;
If this works, as davin pointed out, you still have to evaluate the scripts:
eval(data.match(/<script>(.*)<\/script>/im)[1]);
Loading and evaluating SCRIPT form AJAX should work in general.