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...
Related
Can you help me with that bootstrap and javascript collapse please?
I have two collapse cards. The first should card be visible than you click on the link. After the click should show next card and the first should disappear.
It is functional but at the first click there are both cards. Thats fix after the second click. Thank u for your help.
HTML:
<div class="card text-center">
<div class="card-header ">
<a class="nav-link" id="spust" href="#">Kontaktní formulář</a>
</div>
<div id="kontakty">
</div>
<div class="collapse" id="konform">
</div>
</div>
Javascript:
var collapsestate = false;
jQuery('#spust').on("click",function(e) {
if (collapsestate == false){
$('#kontakty').collapse('hide');
$('#konform').collapse('show');
collapsestate = true;
}
else{
$('#konform').collapse('hide');
$('#kontakty').collapse('show');
collapsestate = false;
}
console.log(collapsestate);
});
try with this snippet code... I think this snippet is as per your requirements.
$(document).ready(function(){
var collapsestate = false;
$('#kontakty').collapse('show');
$('#spust').on("click",function(e) {
if (collapsestate == false){
$('#kontakty').collapse('hide');
$('#konform').collapse('show');
collapsestate = true;
}
else{
$('#kontakty').collapse('show');
$('#konform').collapse('hide');
collapsestate = false;
}
console.log(collapsestate);
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demo</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" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="card text-center">
<div class="card-header ">
<a class="nav-link" id="spust" href="#">Kontaktní formulář</a>
</div>
<div id="kontakty">
abcd
</div>
<div class="collapse" id="konform">
1234
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
You can add "display:none" to make 'kontakt' invisible before click it:
<div id="kontakty" style="display:none">
</div>
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.
I am writing a jQuery mobile app that contains two HTML pages. When user navigates from index.html page to search.html page, jQuery should load elements into search.html page.
However, things seems to gone wrong. The script doesn't work as expected.
index.html
<!DOCTYPE html>
<head>
<!-- Include meta tag to ensure proper rendering and touch zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<!-- Include jQuery Mobile stylesheets -->
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" ></link>
<link rel="stylesheet" href="css/mahidol.min.css"></link>
<link rel="stylesheet" href="css/themes/jquery.mobile.icons.min.css"></link>
<!-- Include the jQuery library -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Include the jQuery Mobile library -->
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<!-- Cordova sh*ts -->
<script type="text/javascript" src="cordova.js"></script>
<script src="js/parameterHandler.js"></script>
<script src="js/default.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-role="header" data-position="fixed">
Preferences
<h1><img src="logo.png" height="15px"> Contact</h1>
</div>
<div data-role="main" class="ui-content">
<form class="ui-filterable">
Search from name
<input id="filterBoxList" data-type="search" placeholder="Type here to search from department list">
</form>
<ul data-role="listview" data-filter="true" data-input="#filterBoxList" id="list_dept">
</ul>
</div>
</div>
</body>
search.html
<!DOCTYPE html>
<head>
<!-- Include meta tag to ensure proper rendering and touch zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1"></meta>
<meta charset="utf-8"></meta>
<!-- Include jQuery Mobile stylesheets -->
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" ></link>
<link rel="stylesheet" href="css/mahidol.min.css"></link>
<link rel="stylesheet" href="css/themes/jquery.mobile.icons.min.css"></link>
<!-- Include the jQuery library -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Include the jQuery Mobile library -->
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<!-- Cordova shits -->
<script type="text/javascript" src="cordova.js"></script>
<script src="js/parameterHandler.js"></script>
<script src="js/default.js"></script>
<style>
#listie small{
color: #ccc !important;
}
</style>
</head>
<body>
<div data-role="page" id="search">
<div data-role="header" data-position="fixed">
Preferences
<h1><img src="logo.png" height="15px"> Contact</h1>
</div>
<div data-role="main" class="ui-content">
<form class="ui-filterable">
Search from dept. list
<input id="filterBoxName" data-type="search" placeholder="Type here to search from name">
</form>
<ul data-role="listview" data-filter="true" data-input="#filterBoxName" id="listie">
</ul>
</div>
</div>
</body>
default.js (loaded the last)
$(document).on("pageshow","search.html",function(){
var chx = 0;
var m="";
var k=[];
$.mobile.loading( "show", {
text: 'Loading',
textVisible: true
});
if(loaded == false) // This will prevent event triggering more then once
{
for (var t in JSON.parse(localStorage.getItem('hr')))
{
m += "<li><a href='#view?id=" + t + "'>" + JSON.parse(localStorage.getItem('hr'))[t].Name + " <small>" + JSON.parse(localStorage.getItem('hr'))[t].Surname + "</small></a></li>";
}
$('#listie').append(m).listview('refresh');
loaded = true;
}
$.mobile.loading( "hide" );
});
Things seems to be nice when the "search" page div is placed inside index.html (and the code is linked in single page, not two). However it does break when I tried splitting up the files into two files.
Anything I can do to fix this?
Well, solved...
Even though the div is on the same file, when using $(document).on("pageshow",src,function(){...}); to point to src, makes sure that src points to the div ID, not the file itself.
In this case, it's $(document).on("pageshow","#search",function(){...});.
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 have tried to deal with this problem for 2 days, but I still can't get the JavaScript of Semantic UI to work. This is my all code. My jQuery is not very good. I have read a lot, but it doesn't work.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0,
minimum- scale=0.5, maximum-scale=2.0,
user-scalable=yes" /> <!--自适应-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" charset="utf-8">
<title>后台管理系统</title>
<link rel="stylesheet" type="text/css" href="css/semantic.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.address.js"></script>
<script type="text/javascript" src="js/semantic.js"></script>
<style type="text/css">
.diymenu{background-color: blue;margin: 0px 0px 0px 0px; padding-top:0px;}
body{margin: 0px 0px 0px 0px;font-family: 微软雅黑;}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('#drop').click(function(){
$('#drop').dropdown('show');
});
});
</script>
</head>
<body >
<!--导航栏 -->
<div class="ui blue inverted menu">
<a class="active item"><i class="home icon"></i>主页</a>
<div class="right menu">
<a class="item"><i class="mail icon"></i>消息
<div class="ui black circular label">2</div></a>
<a class="item">
</a>
</div>
</div>
<div class="ui dropdown item" id="drop">
More <i class="dropdown icon"></i>
<div class="menu">
<a class="item"><i class="edit icon"></i>编辑个人信息</a>
<a class="item"><i class="globe icon"></i>选择语言</a>
<a class="item"><i class="settings icon"></i>账户设置</a>
</div>
</div>
</body>
</html>
From the docs at http://semantic-ui.com/modules/dropdown.html#/usage, you should initialize your dropdown with Javascript (no further jquery code required):
$('.ui.dropdown').dropdown();
See also http://jsfiddle.net/fd8qfyra/1/ i think there is no problem.
After researching through blogs, youtube and more I found the answer, implemented it and given me the collapsing dropdown functionality with Semantic UI
Put the CSS and semantic.js link inside the header instead of the body
Give the select an ID
3.Initialize the ID with with dropdown only:
$('#gender-select').dropdown();