I have been working with impress.js, html5 and css. I have got my impress.js presentation to a standard I am quite happy with but I am trying to implement a fixed top nav similar to Twitters.
The current implementation does not work correctly. if you click the bar whilst on a slide/step the links are unclickable.
My Attempt
HTML
<!DOCTYPE html5>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=1024"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<title>PATCHU_</title>
<meta name="author" content="patchu" />
<link href="http://fonts.googleapis.com/css?family=Open+Sans:regular,semibold,italic,italicsemibold|PT+Sans:400,700,400italic,700italic|PT+Serif:400,700,400italic,700italic" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<link rel="shortcut icon" href="favicon.png" />
<link rel="apple-touch-icon" href="apple-touch-icon.png" />
</head>
<body class="impress-not-supported">
<div class="fallback-message">
<p>Your browser <strong>doesn't support the features required</strong> by my website, so you are presented with a simplified version.</p>
<p>For the best experience please use the latest <strong>Chrome</strong>, <strong>Safari</strong> or <strong>Firefox</strong> browser.</p>
</div>
<div class="navbar-fixed-top2" align="center">
<p>Navigation will go here <a class="" href="#websites" title="My Websites">My Websites</a>
<a class="" href="#about" title="My Websites">About</a>
<a class="" href="#contact" title="My Websites">Contact</a>
<a class="" href="#applications" title="My Websites">Applications</a>
</div>
<div id="impress" data-transition-duration="800">
<div id="title" class="step slide" data-x="0" data-y="0" data-scale="3">
<hgroup>
<h1>#PATCHU_</h1>
<h2></h2>
</hgroup>
</div>
<div id="about" class="step slide" data-x="-1000" data-y="-700" data-rotate="270" data-scale="5">
<h1>About Me</h1>
</div>
<div id="about1" class="step slide about" data-x="-1900" data-y="880" data-z="-100" data-rotate="270" data-scale="1">
<p>Apart from making <strong>awesome websites</strong>, I love computer networking and making <strong>iOS applications.</strong></p>
</div>
<div id="about2" class="step slide about" data-x="-1900" data-y="100" data-z="-100" data-rotate="270" data-scale="1">
<p>Minimalist, <strong>Perfectionist</strong>, Gamer and Apple fanboy. I have a passion for creating stuff. Love trying out <strong>new technologies</strong> and experiences.</p>
</div>
<div id="about3" class="step slide about" data-x="-1900" data-y="-800" data-z="-100" data-rotate="270" data-scale="1">
<p>I mostly code in <strong>PHP</strong> and <strong>Objective-C</strong>, but I'm not afraid to get my hands dirty.</p>
</div>
<div id="about4" class="step slide about" data-x="-1900" data-y="-1600" data-z="-100" data-rotate="270" data-scale="1">
<p><strong>Graduated</strong> with a <strong>1:1</strong> (84% Average) in Computer Network Technology BSc.</p>
</div>
<div id="websites" class="step slide" data-x="7100" data-y="-700" data-z="-3000" data-rotate="0" data-scale="5">
<h1>Websites</h1>
</div>
<div id="applications" class="step slide application" data-x="3950" data-y="-4500" data-z="-3000" data-rotate="90" data-scale="5">
<h1>Applications</h1>
</div>
<div id="contact" class="step slide" data-x="-180" data-y="2100" data-scale="3">
<h1>Connect</h1>
<p></p>
<div id="contact_images">
<img src="images/twitter.png">
<img src="images/linkedin.png">
</div>
</div>
</div>
<script src="js/impress.js"></script>
<script>
//All hail megatron
impress().init();
//impress().showMenu();
</script>
</body>
</html>
CSS
/*
Resetting the humans
*/
.navbar-fixed-top2{
position:fixed;
top:0;
width:100%;
height:50px;
background-color:red;
z-index:3000;
}
This is due to a work-around for a chrome bug in impress.js, see the comments at the end of the CSS file that ships with it.
To make the links in your navbar clickable, add the following to your .navbar-fixed-top2 CSS class:
pointer-events: auto
Alternatively, add the following class to your CSS:
.extra-clickable { pointer-events: auto }
... and then add that class to anything outside of #impress that you want to have clickable.
Related
I'm doing a project. At a certain point i want to have two buttons, one for changing to a lighter theme and another to change to a darker theme and apply the changes to the whole website and not just the page in question
This is the page where i have the functionality:
ConfLayout.cshtml:
<!DOCTYPE HTML>
<html>
<head>
<title>TekSell</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="~/Content/styles.css" rel="stylesheet" />
<link href="~/Content/styles-admin.css" rel="stylesheet" />
</head>
<body id="top">
<section id="banner">
<div class="inner">
Learn More
</div>
</section>
<!-- Main1 -->
<div id="main">
<p style="text-align:center">Serviços</p>
<div class="inner">
<!-- Services -->
<div class="thumbnails">
<div class="box">
<img src="~/Content/Images/gallery.jpg" />
<div class="inner">
<h7>Galeria</h7>
</div>
</div>
<div class="box">
<img src="~/Content/Images/location.jpg" />
<div class="inner">
<h7>Localização</h7>
</div>
</div>
</div>
</div>
</div>
<!-- Main2 -->
<div class="page">
<div class="container">
<div class="row">
<div class="col-md-4">
<h3 class="section-title">Sobre Nós</h3>
<figure><img src="~/Content/Images/logo.jpg" /></figure>
<h4>Acerca de nós</h4>
<p>Somos uma empresa fictícia de venda de software informático</p>
</div>
<div class="col-md-4">
<h3 class="section-title">Âmbito</h3>
<h4>Projeto desenvolvido no âmbito da unidade curricular de Laboratório de Desenvolvimento de Software</h4>
</div>
<div class="col-md-4">
<h3 class="section-title">Configurar página</h3>
<h4>Administrador, altere aqui o layout da página</h4>
<div class="dropdown">
<button class="dropbtn">Layout Configuration</button>
<div class="dropdown-content">
Change to lighter theme
Change to darker theme
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer id="footer">
<div class="inner">
<h7>TekSell</h7>
<p>Email: teksell#lds.pt</p>
</div>
</footer>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/jquery.poptrox.min.js"></script>
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
<script src="~/Scripts/changeLayout.js"></script>
</body>
</html>
As you can see i've two css files created. The 'styles.css' is the lighter theme, and 'styles-admin.css' is the darker theme. The functionality is implemented at "div class="dropdown-content"
What happens is, as i have both css files linked, when i run it, by default, the view assumes the darker theme(styles-admin.css).
This is the javascript file i use to try the changes:
function changeCSS(cssFile, cssLinkIndex) {
var oldlink = document.getElementsByTagName("link").item(cssLinkIndex);
var newlink = document.createElement("link");
newlink.setAttribute("rel", "stylesheet");
newlink.setAttribute("href", cssFile);
document.getElementsByTagName("head").item(cssLinkIndex).replaceChild(newlink, oldlink);
}
What is missing? Am i doing it the wrong way?
If you include two CSS files with the same selectors inside, the second file will always override the first.
Just use one <link> and change its href.
Also, why load jQuery and not use it?
<link href="~/Content/styles.css" rel="stylesheet" />
$("link").attr("href","~/Content/styles-admin.css");
Job done!
Use similar way. Preset the theme colours and change the root attribute like this
const colors =['#317EEB', '#6427BA'];
let index = 0;
function changeBackground(){
index = (index+1)%2;
document.documentElement.style.setProperty('--main-color', colors[index]);
}
:root {
--main-color: #317EEB;
}
.set-background{
background: var(--main-color);
width: 10em;
height: 10em;
}
button{
margin-top: 5px;
}
<div class="set-background">
</div>
<button onClick="changeBackground()">Change color</button>
I am making a portfolio webpage on bootstrap. Everything was going fine until I uploaded my code onto bootstrap and my page has simply stopped scrolling and I can't find a solution/identity the piece of code that caused the page to stop scrolling. HERE IS MY CODE:
<!DOCTYPE html>
<html>
<head>
<title>About Me</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="zulimarAbout.css">
<link href="https://fonts.googleapis.com/css?family=Arapey" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
</head>
<body>
<!-- Nav -->
<div class="nav">
<div class="nav_container" style="overflow: visible; height: 328px; margin-top: 0px; top: 0px;">
<div class="nav_container_top">
<div id="logo">
<h1 class="name">Zulimar Toro Seda</h1>
</div>
<div class="menu_wrap collapsable">
<!-- Menu Start -->
<ul class="main_nav">
<li class="item">Home</li>
<li class="item">Services & Rates</li>
<li class="item">About</li>
</ul>
<div id="overlay">
</div>
</div>
</div>
</div>
</div>
<!-- End Nav -->
<!-- Content -->
<div class="content" class="loaded" style="top:0px; margin-top: 0px;" id="allContent">
<div class="_4ormat_content_wrapper" id="content_page_wrapper">
<div class="_4ormat_content_page_container _4ormat_sort">
<div class="_4ORMAT_content_page_row _4ormat_sort_item m _4ORMAT_module_image_11" data-content-module-id="599402" data-content-module-template-id="35" data-content-module-unique-id="" data-content-module-removable="true" data-content-module-category="image">
<div class="twocol spacer"></div>
<div class="eightcol">
<div data-croppable="true" data-default-shape="landscape" data-editable-type="image" data-height="506" data-landscape-ratio="760:506" data-linkable="true" data-portrait-ratio="2:3" data-width="760" id="image_1-599402" data-default-img="images/bg.jpg" data-dom-id="image_1" data-link-type="none" data-link-value="" data-id="18643087" data-content-module-unique-id="">
<div>
<img src="PaulmitchellZu.jpg" class="img" style="float:;">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="_4ORMAT_content_page_row _4ormat_sort_item _4ORMAT_module_text_01" data-content-module-id="599403" data-content-module-template-id="34" data-content-module-unique-id="" data-content-module-removable="true" data-content-module-category="text">
<div class="threecol spacer"></div>
<div class="sixcol">
<div data-editable-type="text" id="overflow" class=" " data-force-html-mode="false" data-id="18643088" data-content-module-unique-id="">
<p>Born in Puerto Rico, bred in Miami, Florida, and now living
as an expat around the world, I use writing, hospitality and working
with boutique and non-profit projects as a way to explore creativity and
as a means to my lifestyle.</p>
<p>With a Bachelor's in Hospitality and Event Management, a
theme of working with alternative brands and years of experience since,
in various areas of the field, I've come to learn and mildly obsess over
one thought;</p>
<p><span id="quote">"Engagement is the result of a well-curated
experience."</span></p>
<p>My passion lies in collaborating and in turn, creating the
unique experience that suits my clients and readers.</p>
<p>Every story can be told in a relatable way that attracts your
individual market. As a writer, I do my research and create content that
connects your business to your readers as a medium that enriches their
lives.</p>
<p>With a strong background in luxury hospitality, event
coordinating and business development, I wear many hats while
implementing my skills as a virtual assistant.</p>
<p>You know those pestering tasks that take up to much time out
of the day? Replying to emails, travel itineraries, marketing launches,
managing social media, and so forth. That’s what I’m here for.</p>
<p>I am a hospitality enthusiast, major foodie, travel
connoisseur, self-proclaimed artist and poet with a flair for style and
a hint of edge.</p>
<p><span id="zulifique">ZULIFIQUE</span> is my personal writing
platform for the exotic, alternative, and open-minded twenty-somethings
who
wonder to exercise true freedom.</p>
<p class="get">Got a project you need a word nerd for? Email me
for more details at zulimar.toro#gmail.com</p>
</div>
</div>
<div class="threecol spacer"></div>
</div>
</div>
<h2 style="display: none;"></h2>
</div>
</div>
<!-- SOCIAL MEDIA ICONS -->
<div class="social">
<i class="fab fa-instagram"></i>
</div>
<!-- Latest compiled and minified JavaScript & Jquery-->
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous">
</script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous">
</script>
</body>
</html>
I want to add a spinner to show that the content is loading, when someone clicks on an icon. Basically when someone clicks the hyper-link, the page takes time to load and meanwhile I want to show a spinner/'loading image'. How to implement that?
Thanks in advance
My HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" type="image/x-icon" href="images/fav-icon.png" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<meta name="keywords" content=" my webpage" />
</head>
<body>
<div class="content">
<div class="wrap">
<!--- start-top-grids---->
<div class="top-grids">
<div class="top-grid">
<div class="product-pic">
<img src="img/search_page.png" title="watch" />
</div>
Directory
</div>
<div class="top-grid">
<div class="product-pic">
<img src="img/news.png" title="shoe" />
</div>
News
</div>
<div class="top-grid">
<div class="product-pic">
<img src="img/payment.png" title="view pay" />
</div>
View Pay
</div>
<div class="clear"> </div>
<div class="clear"> </div>
<div class="clear"> </div>
<div class="clear"> </div>
</div>
</body>
</html>
You can try something like below:
1) Place "spinning wheel" image in one div.
2) Add "Loading..." text
When your page is loading set that div to display and once your page is loaded successfully set div to display: none.
<div id="progressIndicator" style="display: none;">
<div style="background-color: Transparent;" >
<img src="Images/indicator_mozilla_blu.gif" style="font-family: Tahoma; font-size: small; cursor: wait"
align="absMiddle" alt="" /> Loading...
</div>
</div>
UPDATE
When you are clicking on Image button do not directly call server side function. Instead call a client side function like "CallServerSideFunction()" and from that function call your server side function. You can try something like below:
In Javascript function:
function DisplayProgress() {
document.getElementById('progressIndicator').style.display = '';
}
function HideProgress() {
document.getElementById('progressIndicator').style.display = none;
}
function CallServerSideFunction() {
DisplayProgress();
document.getElementById("btnCallServerSideFunction").click();
HideProgress();
}
Let me know if this helps.
I am working on an asp.net mvc web application which contain a web template similar to this web templete.
now i am facing this problem:-
let say a user access the image gallery , and while the page is loading , he clicks on an image. then this will cause the image to be displayed seperately inside a new windows and not inside the jQuery slider. while if he wait till the page fully loaded then there will not be any problem.
what i can not understand is that i am referencing all the scripts before rendering the page body. so this mean that the image gallery should not be available in the browser unless all the scripts are being fully loaded, but this is not the case.
here is how my _layout view looks like, where i am referencing all the scripts before the Renderbody():-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="~/img/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="~/img/favicon.ico" type="image/x-icon" />
<meta name="format-detection" content="telephone=no" />
<meta name="description" content="Your description">
<meta name="keywords" content="Your keywords">
<meta name="author" content="">
<title>#ViewBag.Title </title>
#Styles.Render("~/Content/css")
#Styles.Render("~/Content/Customcss")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
</head>
<body>
<!--==============================header=================================-->
<!-- <div class="container body-content">-->
#RenderBody()
and here is the view that is causing the problem :-
<header id="header" class="headerpages">
<div class="bgpattern"></div>
#Html.Partial("~/Views/Shared/Navigation.cshtml")
</header>
<div id="content">
<!--==============================row7=================================-->
<div class="row_7">
<div class="container">
<h2 style="text-align:center" >Project</h2>
<br/>
<div class="row">
<h2 class="padbot1">
Villa
</h2>
<ul class="listgall">
<li class="col-lg-4 col-md-4 col-sm-6 col-xs-6 colgal customBoarder">
<h5 class="customh5">Villa</h5>
<figure><img src="~/img/T/a.jpg" alt=""><span><strong>Project name:</strong><em>Villa</em><img src="~/img/T/searchsmall.png" alt=""></span>Read More about this vella<br /> </figure>
</li>
</ul>
<hr style="border-width: 3px 0 0;"/>
<h2 class="padbot1">
Triplex</h2>
<ul class="listgall">
<li class="col-lg-4 col-md-4 col-sm-6 col-xs-6 colgal customBoarder">
<h5 class="customh5">The TROJANA (Macedonian Oak) Triplex</h5>
<figure><img src="~/img/T/trojana.jpg" alt=""><span><strong>Project name:</strong><em>The TROJANA (Macedonian Oak) Triplex</em><img src="~/img/T/searchsmall.png" alt=""></span>Read More</figure>
</li>
</ul>
<hr style="border-width: 3px 0 0;" />
#Html.Partial("~/Views/Shared/_table.cshtml")
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 gmap">
<div class="map">
<iframe src="https://www.google.com/maps/embed/v1/place?key=A...."></iframe></div>
</div>
</div>
</div>
</div>
</div>
#section scripts {
<script>
$(window).load(function () {
//form1
$('#form1').sForm({
ownerEmail: '#',
sitename: 'sitename.link'
})
//thumb
// Initialize the gallery
$('.thumb').touchTouch();
});
</script>
<style>
#prevArrow, #nextArrow {
display: none;
}
</style>
so can anyone adivce how to fix this problem ? and why the image gallery will be available in the browser while the browsers is still loading the scripts ???
I know this problem has been solved but for the people who visit here, in case anyone else runs into the same problem and find it here.
As https://stackoverflow.com/users/575199/malk commented
use
$(document).ready(function() {
// executes when HTML-Document is loaded and DOM is ready
alert("document is ready");
});
instead of
$(window).load(function() {
// executes when complete page is fully loaded, including all frames, objects and images
alert("window is loaded");
});
The code below prevents the user from clicking the document(images or anything else) until the page is fully loaded. Add $(document).click(false); to $(document).ready function and $(document).click(true) to $(window).load function.
$(document).ready(function() {
$(document).click(false);
});
$(window).load( function(){
$(document).click(true);
});
I've just started with a simple jQuery Mobile app in Intel XDK. There are only two pages (views) and a button to show the second page from the main one.
Below is the code untouched (as produced by the visual designer).
<!DOCTYPE html>
<!--HTML5 doctype-->
<html>
<head>
<link rel="stylesheet" type="text/css" href="jqm/jquery.mobile-min.css">
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/index_main.less.css" class="main-less">
<title>Your New Application</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<style type="text/css">
/* Prevent copy paste for all elements except text fields */
* { -webkit-user-select:none; -webkit-tap-highlight-color:rgba(255, 255, 255, 0); }
input, textarea { -webkit-user-select:text; }
</style>
<script src="intelxdk.js"></script>
<script type="text/javascript">
/* This code is used to run as soon as Intel activates */
var onDeviceReady=function(){
//hide splash screen
intel.xdk.device.hideSplashScreen();
};
document.addEventListener("intel.xdk.device.ready",onDeviceReady,false);
</script>
<script type="application/javascript" src="js/jquery.min.js"></script>
<script type="application/javascript" src="jqm/jquery.mobile-min.js" data-ver="0"></script>
<script type="application/javascript" src="js/index_user_scripts.js"></script>
</head>
<body>
<!-- content goes here-->
<div class="uwrap">
<div class="upage" id="mainpage" data-role="page">
<div class="upage-outer">
<div class="upage-content" id="mainsub">
<div class="grid grid-pad urow uib_row_1 row-height-1" data-uib="layout/row" data-ver="0">
<div class="col uib_col_1 col-0_12-12" data-uib="layout/col" data-ver="0">
<div class="widget-container content-area vertical-col">
<div class="widget uib_w_1 d-margins" data-uib="media/text" data-ver="0" id="page1-line1">
<div class="widget-container left-receptacle"></div>
<div class="widget-container right-receptacle"></div>
<div>
<p>Text in page-1</p>
</div>
</div><a class="widget uib_w_3 d-margins" data-uib="jquery_mobile/button" data-ver="0" data-role="button" id="gotoP2">goto Page2</a><span class="uib_shim"></span>
</div>
</div>
<span class="uib_shim"></span>
</div>
</div>
<!-- /upage-content -->
</div>
<!-- /upage-outer -->
</div>
<div class="upage" id="secondPage" data-role="page">
<div class="upage-outer">
<div id="secondPagesub" class="upage-content ">
<div class="grid grid-pad urow uib_row_2 row-height-2" data-uib="layout/row" data-ver="0">
<div class="col uib_col_2 col-0_12-12" data-uib="layout/col" data-ver="0">
<div class="widget-container content-area vertical-col">
<div class="widget uib_w_2 d-margins" data-uib="media/text" data-ver="0" id="page2-line1">
<div class="widget-container left-receptacle"></div>
<div class="widget-container right-receptacle"></div>
<div>
<p>Text in page 2</p>
</div>
</div><span class="uib_shim"></span>
</div>
</div>
<span class="uib_shim"></span>
</div>
</div>
</div>
<!-- /upage-outer -->
</div>
<!-- /upage -->
</div>
<!-- /uwrap -->
</body>
And the index_user_scfripts.js file:
(function() {
"use strict";
function register_event_handlers() {
$("#gotoP2").click(function(evt) {
$("body").pagecontainer("change", "secondPage", { reverse: false});
});
}
$(document).ready(register_event_handlers);
})();
When I hit the button in the first page, the debugger throw a JavaScript error in jquery.min.js file:
Uncaught Error: cannot call methods of pagecontainer prior to initialization; attempted to call method "change"
Any sugestion are wellcome.
The problem was in the method to call the page change. Instead the original, the index_user_scripts.js must be:
(function() {
"use strict";
function register_event_handlers() {
$("#gotoP2").click(function(evt) {
$(":mobile-pagecontainer").pagecontainer("change", "#secondPage", { reverse: false});
});
}
$(document).ready(register_event_handlers);
})();