I try some jquery for scrolling page into sections. It works in Google Chrome, but in Mozilla Firefox nothing happens.
Here is my code in html:
<!DOCTYPE html>
<html>
<head>
<title>LP Portfolio</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Archivo+Narrow|Lobster+Two|Lora|Vollkorn" rel="stylesheet">
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div id="container">
<div class="hero">
<div id="header">
<div id="header-logo">
<img src="images/logo.png" alt="header-logo">
</div>
<div id="header-opis">
<h2><span class="prvo-slovo">L</span>uka <span class="prvo-slovo">P</span>aradzik</h2>
<h3>Web Developer</h3>
</div>
<nav>
<ul>
<li>Home</li>
<li><a id="about" href="#aboutSection">About</a></li>
<li><a id="portfolio" href="#portfolioSection">Portfolio</a></li>
<li><a id="gallery" href="#gallerySection">Gallery</a></li>
<li><a id="blog" href="#blogSection">Blog</a></li>
<li><a id="contact" href="#contactSection">Contact</a></li>
</ul>
</nav>
<div id="header-menu-gumb">
<img src="images/menu.png">
</div>
</div>
</div>
<div id="aboutSection">
I have 5 divs with id's that is href in nav a tags.
At the end of my html document I linked html with js scripts:
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/scrolling.js"></script>
This is the code in scrolling.js script:
$(document).ready(function() {
skrolanjeStranice();
});
function skrolanjeStranice() {
$("nav a").click(function(e) {
e.preventDefault();
var sectionID = e.currentTarget.id + "Section";
$("html body").animate({
scrollTop: $("#" + sectionID).offset().top
}, 1000)
})
}
In Mozilla browser console i get this error:
TypeError: $(...).offset(...) is undefined scrolling.js:19:15
In google chrome all works perfect.
Thanks for help. Also sorry for bad explanation of problem.
I'm new in this and I just want to learn new things.
Related
CodePen:
https://codepen.io/raynerprogramming/project/editor/ArNmxN/
I'm trying to split out my header into a separate HTML file and include it with ng-include. However, I can't seem to get the sideNav() call to actually work in this setup. If I bring the header.html file into the index.html. It works as intended.
I've tried various events to hook into before calling the sideNav() without any luck.
angular.element(document).ready(function () {})
$rootScope.$on("$includeContentLoaded", function(event,
templateName){}); plain jquery $(function() {})
The codepen also includes the working copy, index_working.html.
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>
<title>Test</title>
<!-- CSS -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="/app.js"></script>
</head>
<body ng-app="app" ng-controller="testController">
<div ng-include="'header.html'"></div>
HELLO WORLD
</body>
<script></script>
</html>
header.html:
<nav class="grey darken-3" role="navigation">
<div class="nav-wrapper container">
<ul class="right hide-on-med-and-down">
<li><a class="dropdown-button" href="#!" data-activates="srvDropdown">Test<i class="material-icons right">arrow_drop_down</i></a></li>
<li>{{data}}</li>
</ul>
<ul id="nav-mobile" class="side-nav">
<li>Home</li>
<li class="divider"></li>
<li>test</li>
</ul>
<i class="material-icons">menu</i>
</div>
<!-- Dropdown Structure -->
<ul id="srvDropdown" class="dropdown-content">
<li>TEST</li>
</ul>
</nav>
Angular:
var app = angular.module('app',[])
.controller('testController',function($scope){
$scope.data='test';
$scope.init = function(){
$(function () {
$('.button-collapse').sideNav();
});
}
$scope.init();
});
I have and index.html file where I have headers for bootstrap tabs and iframe with tabs content.
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<script>
function switchTabInIframe(tab) {
var tabId = $('#iframe_1').contents().find('#1');
$('.nav-tabs a[href="#' + tabId + '"]').tab('show');
};
</script>
<div id="exTab2" class="container">
<ul class="nav nav-tabs">
<li class="active">
<a href="#1" data-toggle="tab" onclick="switchTabInIframe('1')" ;>1</a>
</li>
<li>
2
</li>
<li>
3
</li>
</ul>
<iframe src="iframe.html" height="300%" width="300" frameborder="0" name="iframe_1"></iframe>
</div>
</body>
</html>
Below iframe.html where I have content(body) of the tabs:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="tab-content">
<div class="tab-pane active" id="1">
<h3>tab1</h3>
</div>
<div class="tab-pane" id="2">
<h3>tab2</h3>
</div>
<div class="tab-pane" id="3">
<h3>tab3</h3>
</div>
</div>
</body>
</html>
When clicking a tab in the index file how do I change it content that resides inside the iframe? The code above doesn't work... There is no error in the console... Thx
You will need create and invoke a function that is in your iframe page. The scope in your index page is not the same as the iframe, to switch the tabs. I suggest this update..
In the Index page, create a new function called switchframe(id) and call this from your onclick
function switchframe(id) {
document.getElementsByName('iframe_1').contentWindow.switchTabInIframe(id);
}
in iframe.html
function switchTabInIframe(tab) {
console.log('I can run');
console.log(tab);
//perform your tab switch now.
};
Please let us know the outcome..
Here in an example that might help you. When you click a tag, it runs a function that then changes the attr src in the iframe depending on what tab is clicked. This is using JQuery.
function switchTabInIframe(whichOne) {
var iframesource = "";
if (whichOne == 1) {
iframesource = "http://google.com";
} else if (whichOne == 2) {
iframesource = "http://matthewbergwall.com";
} else if (whichOne == 3) {
iframesource = "http://stackoverflow.com";
}
$("#ciframe").attr("src", iframesource);
}
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<script>
function switchTabInIframe(tab) {
var tabId = $('#iframe_1').contents().find('#1');
$('.nav-tabs a[href="#' + tabId + '"]').tab('show');
};
</script>
<div id="exTab2" class="container">
<ul class="nav nav-tabs">
<li class="active">
<a href="#1" data-toggle="tab" onclick="switchTabInIframe(1)" ;>1</a>
</li>
<li>
2
</li>
<li>
3
</li>
</ul>
<iframe src="iframe.html" height="300%" width="300" frameborder="0" name="iframe_1" id="ciframe"></iframe>
</div>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I'm using Zurb's Foundation, attempting to build a FAQ page using the accordion js. But it's not working and I have no idea why. All the js files are in the js folder. Here's my whole page:
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/app.css">
<script src="js/vendor/modernizr.js"></script>
</head>
<body>
<div class="row row-padding">
<div class="small-12 columns">
<h1>FAQ:<h1>
</div>
</div>
<div class="row row-padding small-12">
<ul class="accordion" data-accordion>
<li class="accordion-navigation">
Question
<div id="panel13a" class="content">
Answer
</div>
</li>
</ul>
</div>
<script>
$('#myAccordionGroup').on('toggled', function (event, accordion) {
console.log(accordion);
});
</script>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.accordion.js"></script>
</body>
</html>
I'm brand new to HTML websites, so sorry if it's something stupid.
You are targeting your accordion with an id that doesn't exist in your HTML.
You'll need to add the id to your HTML like this:
<div class="row row-padding small-12">
<ul id="myAccordionGroup" class="accordion" data-accordion>
<li class="accordion-navigation">
Question
<div id="panel13a" class="content">
Answer
</div>
</li>
</ul>
</div>
Also change the order of your scripts so that your custom accordion loads after everything else.
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.accordion.js"></script>
<script>
$(document).foundation();
$('#myAccordionGroup').on('toggled', function (event, accordion) {
console.log(accordion);
});
</script>
Here is a working CodePen: http://codepen.io/anon/pen/jPmRyB
You forgot about $(document).foundation();
http://foundation.zurb.com/docs/javascript.html - Initialize Foundation
I've a one page website, which is navigated using one top navbar. Once a link is clicked, the page scrolls to the clicked section.
Now I have one section, which need an iFrame(external) but this iFrame always reloads the entire page if a link is clicked, making it unable to use the iFrame efficiently (also an self hosted iFrame does this).
Now my question is: Is it possible to not refresh the entire page, if a link is clicked in the iFrame?
I just want the iFrame to navigate to that link, without reloading the entire page.
The problem I'm facing is, that after a link click, the page is reloaded and thus scrolled to the top of the page, while the iFrame is on 3/5 of the page.
Code of the head:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Site Title</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="css/animate.css" rel="stylesheet" />
<!--CSS -->
<link href="css/style.css" rel="stylesheet">
<link href="color/default.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
Code of the section:
<section id="occasions" class="home-section text-center bg-gray">
<div class="heading-about">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="wow bounceInDown" data-wow-delay="0.4s">
<div class="section-heading">
<h2>Header H2</h2>
<h5>Header H5</h5>
<i class="fa fa-2x fa-angle-down"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-2 col-lg-offset-5">
<hr class="marginbot-50">
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="wow fadeInLeft" data-wow-delay="0.2s">
<div class="occasionframe">
<iframe id="voorraadFrame" class="embed-responsive-item" style="width: 100%; margin-right:-10px;" frameborder="0" onload="scroll(0,0);" src="http://www.voorraadmodule.nl/86c0/"></iframe>
</div>
</div>
</div>
<div class="page-scroll">
<a href="#service" class="btn btn-circleblue">
<i class="fa fa-angle-double-down animated"></i>
</a>
</div>
</section>
and the javascript libs:
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.easing.min.js"></script>
<script src="js/jquery.scrollTo.js"></script>
<script src="js/wow.min.js"></script>
<script src="js/custom.js"></script>
custom.js:
(function ($) {
new WOW().init();
jQuery(window).load(function() {
jQuery("#preloader").delay(100).fadeOut("slow");
jQuery("#load").delay(100).fadeOut("slow");
});
//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($(".navbar").offset().top > 60) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
$(".active").focusout();
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
});
//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
$('.navbar-nav li a').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
$('.page-scroll a').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
})(jQuery);
Thanks in advance!
EDIT: onload="scroll(0,0);" was the problem...
I'm currently working on another mobile website which has the mmenu installed, all works fine as far as the scroll opens to show the menu, but all the menu items are external links. When I tap/click an external link the page will hyperlink to the page selected without closing the menu first. Is there anyway of making the menu close before loading the external links?
Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=yes" />
<script type="text/javascript" src="../js/jquery.mmenu.min.all.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="../css/jquery.mmenu.all.css" />
<link type="text/css" rel="stylesheet" href="../css/main.css" />
<script type="text/javascript">
$(document).ready(function() {
$("#menu").mmenu({
classes: "mm-zoom-panels",
counters: true
});
});
</script>
</head>
<body>
<div id="page"><a href="main.asp">
<img border="0" src="../images/header.png" width="100%"></a>
<div class="header">
</div>
<div class="content">
<div align="center">
</div>
</div>
<nav id="menu">
<ul>
<li>Today</li>
<li>Times</li>
<li>Settings</li>
<li>Log out</li>
</ul>
</nav>
</div>
</body>
Thanks in advance!!
try this code
$("#menu").mmenu({
classes: "mm-zoom-panels",
counters: true,
onClick: {
close: true
}
});
for more info see this:-http://mmenu.frebsite.nl/documentation/options/
thanks