Hi every one im very new with using javascript and i cant get this jquery.fullpage.js scroll function to work, https://github.com/alvarotrigo/fullPage.js#fullpagejs
and i have no idea how i should install it.
my code:
<html>
<head>
<link href="/mysite/css/jquery.fullPage.css" rel="stylesheet">
<script src="/mysite/js/jquery.fullPage.js">
</head>
<body>
<div class="section active">
MYCONTENT
</div>
<div class="section">
MYCONTENT
</div>
</body>
</html>
I have been trixing with this for a few hours and its easy
This is my joomla template! (example)
<head>
//here you put the code that gets the source files for fullpage.js which you find on the github link//
</head>
<body>
//here is your body and it probably have tons of <div> elements in it, in different levels like this:
<div>
<div>
<div>
//here you can for example find a line of php that renders a module.
</div>
</div>
</div>
The thing i did wrong when i tried to implement fullpage.js to my joomla site was that i where putting the section class to a div that was not in level 2 after the body tag
What i want to explain with that is:
<body>
<div id="fullpag <<-this is where fullpage starts">
<div class="section" >
YOUR CONTENT
</div>
</div>
The div with the id fullpage should always start in the first level and the section always in the second level after the body tag, i have no real name for what i call levels but i hope everyone understands.
Related
I have a website that uses a javascript code called ajaxpage to load .php pages dynamically. The website is http://alkalinetrio.rf.gd. I have a sidebar with links that load a specified page into a DIV class of my choosing (in this case, it is the 'flowers' link on the left. The code looks like this:
flowers
The javascript for ajaxpage can be found here: Ajaxpage
What the line of code I provided above does, is load flowers.php into a DIV element with the class 'releases'. Upon clicking the 'flowers' link, the ajaxpage code also loads an additional javascript called flowers.js (that is what the loadobjs('flowers.js') part is doing).
The full code of flowers.php is the following:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>TEST PAGE</title>
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<link href="css/style.css" rel="stylesheet" type="text/css">
<body>
<div class="gallery" style="color:white;">
<p id="checkboxes">
<input type="checkbox" id="all"> Show All
<input type="checkbox" id="red"> Red
<input type="checkbox" id="orange"> Orange
<input type="checkbox" id="yellow"> Yellow
</p>
<div id="all">
<div class="red">Only red stuff</div>
<div class="red orange">red & orange stuff</div>
<div class="orange">Only orange stuff</div>
<div class="red orange yellow">anything</div>
<div class="yellow">Only yellow things</div>
<div class="red yellow">Red & yellow</div>
</div>
</div>
</body>
</html>
And the full code for flowers.js is the following:
// JavaScript Document
$(document).ready(() => {
$("#all div").hide();
$("p#checkboxes > :checkbox").change(() => {
$("#all div").hide();
if ($("#all").is(":checked")) $("#all div").show();
else {
if ($("#red").is(":checked")) $(".red").show();
if ($("#orange").is(":checked")) $(".orange").show();
if ($("#yellow").is(":checked")) $(".yellow").show();
}
});
});
When I visit the flowers.php page directly, everything works as intended. However, if I use the ajaxpage javascript to load flowers.php within a DIV, the code does not work as intended. 99% of the time it does nothing, but once in a while it does work. If I load another page into the DIV with ajaxpage, and then return to flowers.php, the code will always do nothing.
I'm seeking help to understand and fix the issue of dynamically loading a page into a DIV using ajaxpage, and how to remedy the flowers.js script not working as intended. I am trying to show/hide elements with checkboxes while having a page loaded dynamically and it is not working. I am open to any fix for this issue; hopefully I have described the problem accurately.
Since I started using a html-templatefile for my navbar elements I haven't got one of my scripts to execute(I can execute it via the console). I have experimented with on-load-functions but even that didn't seem to work. My problem is that I understand to little of the execution order and if I'm somehow blocking my script. I don't get any error messages either and when the html-template isn't used (ie - the navbar structure is included with everything else in the same html-file) the page loads as it should. So something there is messing it up. And I can call it from the console as well.
(I have tried a variety of ways but nothing have really worked, other than including the template in the document and that I would like to avoid. This setup is one of many). I hope someone can see the errors I do on the spot. I have cut out som css aswell, for readability.
Edit: Threw js out the window, since ASP was found available. Solved it in about half an hour using asp.
Just place your DOM elements inside body tag. Always render script at the end of the body, and append async javascript files at document ready (or at least this is my view of things).
<html>
<head>
<link href="Bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body id="bodyCanvas">
<div class="masthead">
<div class="container">
</div>
</div>
<div class="container Override" id ="pageContainerId" >
</div>
<script>
<script src="http://code.jquery.com/jquery.js"></script> // create a local copy of jquery and other async javascript files you can load at $(document).ready(function(){ //here append async scripts like google maps });
<script type="text/javascript" src="d3.min.js"></script>
<script src="Bootstrap/js/bootstrap.min.js"></script>
<script type='text/javascript'>
$(function(){
$("#pageContainerId").load("navbarTemplate.html");
});
</script>
Here goes code....
</script>
</body>
</html>
The code you are trying to reference in the $("#pageContainerId").load("navbarTemplate.html"); is outside the body tag and most browsers will cut this out.
Try the following:
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript" src="d3.min.js"></script>
<script src="Bootstrap/js/bootstrap.min.js"></script>
<script type='text/javascript'>
$(function(){
$("#pageContainerId").load("navbarTemplate.html");
});
</script>
</head>
<body id="bodyCanvas">
<div class="masthead">
<div class="container">
</div>
</div>
<div class="container Override" id ="pageContainerId" >
</div>
<script>
Here goes code....
</script>
</body>
</html>
Also as the script is at the top the DOM may not be loaded at the time try the following:
$(document).ready(function(){
$("#pageContainerId").load("navbarTemplate.html");
});
DOM ELEMENT SHOULD INSIDE BODY TAG
<body id="bodyCanvas">
<div class="masthead">
<div class="container">
</div>
</div>
<div class="container Override" id ="pageContainerId" >
</div>
</body>
Ok, I couldn't get it to work the way I wanted but it turned out we had asp enabled on our server so when I switched to that I got it to work beautiful in about half an hour.
And it's a better way I suspect, in terms of best practice.
Thanks for the responses.
I have been pulling my hair out trying to get functional smooth scrolling to ids on the same page. I have tried just about every solution I have found on google. I get to a point where when it seems everything should work but then even the basic non-js id linking breaks. I am currently using the smooth-scrolling plugin downloaded from the jquery website. The code as it currently stands is such. I don't know a ton about JS or Jquery so I assume I am just missing something. I inspecting the code on functional versions of the smooth scrolling but even when
I do the in-page linking breaks entirely:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Simon Moon Landings</title>
<link href="style.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Noticia+Text:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.smooth-scroll.js"></script>
<script>
$(document).ready(function() {
$('ul.mainnav a').smoothScroll();
});
</script>
</head>
<body>
<div class="container">
<div class="menu">
<nav>
<ul class="mainnav">
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
</ul>
</nav>
<img class="logo" src="images/smlogo.gif" width="450" height="288" alt="Simon Moon Landings Logo" onmouseover="on();" onmouseout="off();"></nav>
</div>
<div class="content">
<div class="section" id="one">
<h4>One</h4>
</div>
<div class="section" id="two">
<h4>Two</h4>
</div>
<div class="section" id="three">
<h4>Three</h4>
</div>
<div class="section" id="four">
<h4>Four</h4>
</div>
<div class="section">
<a id="five"><h4>Five</h4></a>
</div>
<div class="section">
<a id="six"><h4>six</h4></a>
</div>
</div>
</div>
</body>
</html>
I found the problem. It was not in the script at all, but in the CSS. I have a two column layout, the menu and anchors are in one column (.menu) and the target divs are in another column (.content) I applied poisiton:fixed to the menu and it started working.
It works fine here.
Make sure that the URL of jquery-smooth-scroll is correct.
I used this copy of jquery-smooth-scroll to test your code: https://github.com/kswedberg/jquery-smooth-scroll
It works for me. See this example: http://jsbin.com/ixefet/1/edit
All I did was change the src for the smooth scroll JavaScript to the online version (https://raw.github.com/kswedberg/jquery-smooth-scroll/master/jquery.smooth-scroll.min.js) and add some text so you can see the scrolling happen.
Sounds like you're using the wrong src for your smooth scroll script (if that's the case, your JavaScript error log should say undefined function: $.smoothScroll or something like that).
It worked for me while testing on jsfiddle,
here you go
http://jsfiddle.net/mastermindw/XvV9W/1/
I’m trying to include an HTML snippet inside of an ng-repeat, but I can’t get the include to work. It seems the current syntax of ng-include is different than what it was previously: I see many examples using
<div ng-include src="path/file.html"></div>
But in the official docs, it says to use
<div ng-include="path/file.html"></div>
But then down the page it is shown as
<div ng-include src="path/file.html"></div>
Regardless, I tried
<div ng-include="views/sidepanel.html"></div>
<div ng-include src="views/sidepanel.html"></div>
<ng-include src="views/sidepanel.html"></ng-include>
<ng-include="views/sidepanel.html"></ng-include>
<ng:include src="views/sidepanel.html"></ng:include>
My snippet is not very much code, but it’s got a lot going on; I read in Dynamically load template inside ng-repeat that that could cause a problem, so I replaced the content of sidepanel.html with just the word foo, and still nothing.
I also tried declaring the template directly in the page like this:
<script type="text/ng-template" id="tmpl">
foo
</script>
And running through all the variations of ng-include referencing the script’s id, and still nothing.
My page had a lot more in it, but now I’ve stripped it down to just this:
<!-- index.html -->
<html>
<head>
<!-- angular includes -->
</head>
<body ng-view="views/main.html"> <!-- view is actually set in the router -->
<!-- views/main.html -->
<header>
<h2>Blah</h2>
</header>
<article id="sidepanel">
<section class="panel"> <!-- will have ng-repeat="panel in panels" -->
<div ng-include src="views/sidepanel.html"></div>
</section>
</article>
<!-- index.html -->
</body>
</html>
The header renders, but then my template doesn’t. I get no errors in the console or from Node, and if I click the link in src="views/sidepanel.html" in dev tools, it takes me to my template (and displays foo).
You have to single quote your src string inside of the double quotes:
<div ng-include src="'views/sidepanel.html'"></div>
Source
<ng-include src="'views/sidepanel.html'"></ng-include>
OR
<div ng-include="'views/sidepanel.html'"></div>
OR
<div ng-include src="'views/sidepanel.html'"></div>
Points To Remember:
--> No spaces in src
--> Remember to use single quotation in double quotation for src
For those trouble shooting, it is important to know that ng-include requires the url path to be from the app root directory and not from the same directory where the partial.html lives. (whereas partial.html is the view file that the inline ng-include markup tag can be found).
For example:
Correct:
div ng-include src=" '/views/partials/tabSlides/add-more.html' ">
Incorrect:
div ng-include src=" 'add-more.html' ">
For those who are looking for the shortest possible "item renderer" solution from a partial, so a combo of ng-repeat and ng-include:
<div ng-repeat="item in items" ng-include src="'views/partials/item.html'" />
Actually, if you use it like this for one repeater, it will work, but won't for 2 of them!
Angular (v1.2.16) will freak out for some reason if you have 2 of these one after another, so it is safer to close the div the pre-xhtml way:
<div ng-repeat="item in items" ng-include src="'views/partials/item.html'"></div>
Maybe this will help for beginners
<!doctype html>
<html lang="en" ng-app>
<head>
<meta charset="utf-8">
<title></title>
<link rel="icon" href="favicon.ico">
<link rel="stylesheet" href="custom.css">
</head>
<body>
<div ng-include src="'view/01.html'"></div>
<div ng-include src="'view/02.html'"></div>
<script src="angular.min.js"></script>
</body>
</html>
This worked for me:
ng-include src="'views/templates/drivingskills.html'"
complete div:
<div id="drivivgskills" ng-controller="DrivingSkillsCtrl" ng-view ng-include src="'views/templates/drivingskills.html'" ></div>
try this
<div ng-app="myApp" ng-controller="customersCtrl">
<div ng-include="'myTable.htm'"></div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("customers.php").then(function (response) {
$scope.names = response.data.records;
});
});
</script>
On ng-build, file not found(404) error occur. So we can use below code
<ng-include src="'views/transaction/test.html'"></ng-include>
insted of,
<div ng-include="'views/transaction/test.html'"></div>
Somehow even the simplest ground up impress.js slide does not work for me :( http://dl.dropbox.com/u/655237/events/GTG.zip … , Always have to use your example.
<html lang="en">
<head>
<title>Impress Demo</title>
</head>
<body>
<div id="impress">
<div id="start">
<p style='width:1000px;font-size:80px;
text-align:center'>Creating Stunning Visualizations</p>
<p>Impress.js </p>
</div>
<div id="slide2" data-x="-1200" data-y="0">
<p style='width:1000px;font-size:80px;'>
First Slide Moves From Left To Right</p>
<p>Impress.js </p>
</div>
</div>
<script type="text/javascript">impress().init();</script>
<script type="text/javascript" src="js/impress.js"></script>
</body>
</html>
And I have the impress.js file under the js directory.Still none of the latest browser show the slides . I am using firefox 16.
You're calling impress before loading the library, try switching the order of your script tags:
<script type="text/javascript" src="js/impress.js"></script>
<script type="text/javascript">impress().init();</script>
Alternatively use a ready handler function to initialise your page scripts, like window.onload or jquery's ready(). For more on this see this question.
Also, going by the impress examples, in the simplest case each step of the presentation should be an element inside the #impress element with a class name of step.