I've got to make a single page website for a client of mine, and the Ascensor.js plugin seems to do everything I need it to do. However, I cant for the life of me get it working.
http://kirkas.ch/ascensor/#/Home
Originally I was trying to get it working within a WordPress theme but I gave up and tried to just get it working exactly as the example on the website, no joy.
Heres the code;
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="./js/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="./js/jquery.ascensor.js"></script>
<script type="text/javascript" src="./js/jquery.scrollTo-min.js"></script>
</head>
<body>
<script>
$('#ascensorBuilding').ascensor({
AscensorName:'ascensor',
ChildType:'section',
AscensorFloorName:'Home | Implementation | HTML',
Time:1000,
WindowsOn:1,
Direction:'chocolate',
AscensorMap:'2|1 & 2|2 & 3|2',
Easing:'easeInOutQuad',
KeyNavigation:true,
Queued:false,
});
</script>
<div id="ascensorBuilding">
<section>
<article class="container_12">
<h1>Home</h1>
</article>
</section>
<section>
<article class="container_12">
<h1>About</h1>
</article>
</section>
<section>
<article class="container_12">
<h1>Contact</h1>
</article>
</section>
</div>
</body>
</html>
This really should be working as i've followed the example exactly. Ive tried it with and without the classes on the article elements (I think the plugin is supposed to create these). Has anyone got experience with this plugin that can give me some help?
Thanks in advance!
First you need to wrap you code with jQuery.ready
$(function(){
$('#ascensorBuilding').ascensor({
AscensorName:'ascensor',
ChildType:'section',
AscensorFloorName:'Home | Implementation | HTML',
Time:1000,
WindowsOn:1,
Direction:'chocolate',
AscensorMap:'2|1 & 2|2 & 3|2',
Easing:'easeInOutQuad',
KeyNavigation:true,
Queued:false,
});
});
You are missing both migration plugin and easing plugin.
Demo: Fiddle
I'm leaving here a simple work I'm doing using ascensor.
Feel free to grab all the code you want.
Just remember to set "overflow:auto" to your "section" tag in css AND "overflow:hidden" to the div you use for your building, #house in my case.
http://www.thegrowth.eu/mari/index.php
The version of the plugin I'm using doesn't work on current jQuery version unless you hack the code.
Stick to version 1.8.3, you can grab it from my site.
Also, you will need nothing else but jQuery-UI to use some of ascensor's easing features and such.
And forgive my English :p
Related
I have two JS functions I want to call, in a wordpress site, from an external .js file. When writing the functions, I called one from the HTML document's tag, but didn't think of how to actually apply this in WordPress.
I see several PlugIns for altering headers/footers, but am just wondering if there's an option for the . Below is a sample which shows JS being called from my tag.
<html>
<head>
<title>SO Question</title>
</head>
<body onload="destroyEarth()">
<h1>Article title</h1><br>
<p>Article text</p><br>
<script async src="extFile.js"></script>
<p>
<a href="#"" onclick="dscntFuniture();" id="FSP" name="FSP">
<img src="https://i.imgur.com/4LtRreH.png" id="RRU" name="RCU"/>
</a>
</p>
<p>....more article text</p>
</body>
</html>
I'd like to be able to call destroyEarth() and dscntFuniture(), from extFile.js, in a WP site. Ideally there'd be a Plugin or alternative way of writing the code so that I can implement this.
Edit:
<script async src="extFile.js">
$(document).onload(destroyEarth);
</script>
jQuery onload does it for you:
$(document).onload(destroyEarth);
There should not be a practical difference between document and body onload event. Both will be triggered when content is loaded.
UPDATED:
add the following code in either header or footer of your website. It does not depend on any library, thanks #Shilly:
<script>
document.addEventListener('DOMContentLoaded', destroyEarth );
</script>
If it does not work, look into developers console for js errors and post them here
I have been asked to write a simple demo page and we settled on fullpage.js.
I have used html and css before, I typically write in c++ and c# so this is not my forte. I haven't done any front end work in a while.
For some reason, when I try to follow the official tutorial, my page has no styling and the scroll does not work. just a white page with a bit of text.
Can anyone help point me in the right direction in order to set up a simple page in visual studio?
here is the html page i have:
<!DOCTYPE html>
<html>
<head>
<link href="Content/jquery.fullPage.css" rel="stylesheet" />
<script src="scripts/jquery.fullPage.min.js"></script>
<script src="scripts/jquery-2.1.4.intellisense.js"></script>
<script src="scripts/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage();
});
</script>
</head>
<body>
<div id="fullpage">
<div class="section">Section 1</div>
<div class="section">
<div class="slide">Section 2 Slide 1</div>
<div class="slide">Section 2 Slide 2</div>
<div class="slide">Section 2 Slide 3</div>
</div>
<div class="section">Section 3</div>
</div>
</body>
</html>
After downloading their examples it looks like you have the basic implementation correct.
Only difference is that all of their example projects include a sectionsColor: property like this
$(document).ready(function() {
$('#fullpage').fullpage({
sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke','#ccddff']
});
});
If adding that doesn't work, inspect element and check the console tab. See if its giving you a 404 error for your dependencies, and make sure all those paths don't need a '../', or have a bad capitalization, or dependencies are in the correct order.
But if everything is breaking with something doing this much magic for you, there's a bad bit of js some place and you only have one function to look at.
EDIT: Now that I mention it, you have jQuery below fullpage.js. It needs to be above it as javascript reads and runs those in order. So it can't see the jquery functions it needs. Switch that around and you should be fine.
I am having problems getting anything jQuery to work on my page. It is not that it isn't working correctly, just that it doesn't seem to be doing ANYTHING....and I have searched for a week all over trying to find an answer or reason why, and it isn't turning anything up so I am to the point where I am going to ask a question to you all on here, and hope I can get some help. My html and js files are pasted here:
HTML
<html>
<head>
<title>My Page!</title>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery.min.js"></script>
<script src='script.js'></script>
</head>
<body>
<div class="wrapper">
<header>Welcome to my site!</header>
<nav>
About Me |
My Interests |
Resume |
Contact Me
</nav>
<div class="content">
<p>Hello there, my name is Amanda and I'm a fifth year senior here at IU. I have been spent the semester learning jQuery for INFO-I 310 to make this website. It has been difficult to learn, but it has also been really interesting!
<br /> <br />
I will be graduating from IU this May (2014) with a Bachelor's degree in Informatics, as well as a cognate and minor in Pyschology. I would love to find a career after graduation where I can use the technology skills I have learned to help others. While I will be sad to leave IU, I am also excited about what will come in the future!</p>
</div>
</div>
</body>
</html>
jQuery File
$(document).ready(function() {
$( ".content" ).resizable({ animate: true });
});
I just don't know where else to look at this point and am going out of my mind trying to figure out why it won't do anything, so any help would be GREATLY appreciated!!! Thanks so much!! :)
Link problem. Replace this link
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery.min.js"></script>
with
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
Your jquery ui url is not working use,
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
in place of
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery.min.js"></script>
Working demo
I'm currently trying to place this lightbox into this accordion
I've had them both working seperately okay, but I don't seem to be able to get them to work on the same page (whether or not one is inside the other)
I've noticed that I've ended up with:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/lightbox-2.6.min.js"></script>
In my header, which might be one duplicating a more recent version of the other etc and was wondering if that could be a problem?
In the html I have:
<div id="accordion" style="width:1000px; border: 1px solid black">
<h4> Section 1 </h4>
<div>
<p> Text </p>
<img src="images/image.jpg"/>
</div>
</div>
Is there something I'm trying to do incorrectly, or is this something that just won't work in this way?
Thanks in advance for any help!
As I thought above, I had used the two different versions of JQuery and loading them both was causing a little bit of confusion.
To solve this I removed one of the JQuery sources:
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui-1.10.3.js"></script>
<script src="js/lightbox-2.6.min.js"></script>
(I have also changed the sources to be local, rather than referencing a website)
Though I didn't remove the oldest, this appeared to work better for the versions of things I was trying to load. Hope this helps someone else at some point too.
I have this simple html snippet
<div id="bigtext" style="width: 300px">
<div>The elusive</div>
<div>BIGTEXT</div>
<div>plugin exclusively</div>
<div>captured on film</div>
</div>
with no CSS enabled so it doesn't interfere with anything. Then I have a simple Javascript file with this code:
$(document).ready(function() {
$("#bigtext").bigtext();
});
Also in my html I load bigtext.js. I have confirmed that both Javascript files are being loaded through an alert, but the text does not resize to fit. I have also tried this using FitText and that did not work either. I have copied the BigText example exactly from the website but no luck. Any ideas?
Had a look at the bigtext demo on GitHub and added a couple of lines as below and it seems to be working...
<body>
<div id="bigtext">
<div>The elusive</div>
<div>BIGTEXT</div>
<div>plugin exclusively</div>
<div>captured on film</div>
</div>
<script src="jquery-1.7.1.min.js"></script>
<script src="bigtext.js"></script>
<script>
var bt = BigText.noConflict(true);
$.fn.bt = bt.jQueryMethod;
$('#bigtext').bt();
</script>
</body>
The BigText plugin expects an ID to work.