On bootstrap tab click change content inside iframe - javascript

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>

Related

Troublehooting with prompt method in javascript

Hey I'm having a problem with the prompt method in Javascript.
What I try to do is make the H1 equal to the user his answer.
The problem is that the function does not take the answer in it's function.
I tried to find something about it on youtube without succes.
Any tips or help would be appreciated
$(document).ready(function() {
console.log('Document loaded');
});
let answer = prompt('name of club?');
function changeDOM() {
$('.front').text(answer);
};
changeDOM();
<DOCTYPE html>
<html>
<head>
<link href="main.css" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Anton|Pacifico|Maven+Pro" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="main.js" type="text/javascript"></script>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>HAL Tech</title>
</head>
<body>
<div class="parallax-group">
<h1 class="front">HAL Tech</h1>
<!--
<ul class="nav">
<li href="#">Tech club</li>
<li href="#">Te doen</li>
<li href="#">Projecten</li>
<li href="#">Dingen</li>
</ul>
-->
<img src="POEP.jpg" class="back" alt="">
</div>
</body>
</html>
'answer' in $('.front').text('answer'); should not be a string, it should reference your answer variable:
$('.front').text(answer);
'answer' is the literal string "answer", whereas answer refers to your variable.
$(document).ready(function() {
console.log('Document loaded');
let answer = prompt('name of club?');
function changeDOM() {
$('.front').text(answer);
};
changeDOM();
});
<DOCTYPE html>
<html>
<head>
<link href="main.css" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Anton|Pacifico|Maven+Pro" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="main.js" type="text/javascript"></script>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>HAL Tech</title>
</head>
<body>
<div class="parallax-group">
<h1 class="front">HAL Tech</h1>
<!--
<ul class="nav">
<li href="#">Tech club</li>
<li href="#">Te doen</li>
<li href="#">Projecten</li>
<li href="#">Dingen</li>
</ul>
-->
<img src="POEP.jpg" class="back" alt="">
</div>
</body>
</html>
As further discussed in the comments, your JS is running before the DOM loads. You can either move it to the bottom of the body, or change your code to be within the $(document).ready function:
$(document).ready(function() {
console.log('Document loaded');
let answer = prompt('name of club?');
function changeDOM() {
$('.front').text(answer);
};
changeDOM();
});

my jQuery script doesn't work in Mozzila

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.

how add a sidebar to navbar with materialize?

This is what I want: when I click the username (in header), show the sidebar. This only works out of the nav label and I must use a label. In a button not works.
HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="css/icon.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="css/materialize.min.css">
<title>Dashboard</title>
</head>
<body>
<ul id="side-setting" class="side-nav">
<li>ver perfil</li>
<li>editar perfil</li>
<li>cerrar sesion</li>
</ul>
<nav class="teal" role="navigation">
<div class="nav-wrapper container-fluid">
<ul class="hide-on-med-and-down">
<li>Inicio</li>
<li>Grupos</li>
</ul>
<ul class="right hide-on-med-and-down">
<li>
username
</li>
</ul>
</div>
</nav>
here
<button class="btn" data-activates="side-setting" class="button-coll">sidenav</button>
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/materialize.min.js"></script>
<script src="js/init.js"></script>
</body>
</html>
init.js code
(function($){
$(function(){
$('select').material_select();
$('.button-collapse').sideNav();
$('.parallax').parallax();
}); // end of document ready
})(jQuery); // end of jQuery name space
how I add this sidebar? I want this float to the right when I click in a button or username that is positioned in header (nav)

How to use html() to modify html in jQuery mobile page post transition

I have a two page (1 file) jQuery mobile page and I want to write some dynamic text on the second page as soon as it loads.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link href="css/codiqa.ext.min.css" rel="stylesheet">
<link href="css/jquery.mobile-1.3.1.min.css" rel="stylesheet">
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>
<script src="js/codiqa.ext.min.js"></script>
<script src="js/universal-lotto.js"></script>
</head>
<body>
<div data-role="page" data-control-title="Home" id="page1">
<div data-role="content">
<ul data-role="listview" data-divider-theme="b" data-inset="true" id=menu>
<li data-role="list-divider" role="heading">Menu</li>
<li data-theme="c">Help</li>
</ul>
</div>
</div>
<div data-role="page" data-control-title="AnotherPage" id="ViewN" data-back-btn-text="Menu" data-add-back-btn="true">
<div data-role="content">
<div data-controltype="htmlblock" id=printhere>
</div>
</div>
</div>
</body>
</html>
How can I modify the #printhere div? In the file universal-lotto.js I have the following function:
$(document).on('pageshow', '#ViewN' ,function(){
alert('hi');
$('#printhere').html('printthis');
});
The alert comes up when the second page shows but the page itself remains blank.
your lign is invalid here :
<div data-controltype="htmlblock" id=printhere>
</div>
It should be :
<div data-controltype="htmlblock" id="printhere">
</div>

How to stop popup-alert propagation?

I do not know how to explain this in English;-)
If I choose an option alert displays for every choice I do not know how to stop.
Step 1, choose "aaaa" option eg
1111 alert ...
Step 2, choose option "bbbb" for example
1111 alert ...
2222 alert ...
and so on!
I've tried return, stopPropagation, etc..
It will surely be an easy mistake to correct for you ... :-)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile- 1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script>
$(document).ready(function(){
$('#myList').on('click', 'li', function(e)
{
var pos = $(this).attr('pos');
$("#myPopup").popup('open');
$('#myPopup').on('click', 'ul li a', function(ev)
{
var popupValue = $(this).attr('info');
alert('option-->' + popupValue);
$('#myPopup').popup('close');
});
});
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="content" class="ui-content">
Choose an option...
<div data-role="popup" id="myPopup">
<ul id="myList" data-role="listview" data-inset="true" style="min-width:250px;">
<li>aaaaaaa</li>
<li>bbbbbbb</li>
<li>cccccc</li>
</ul>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile- 1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script>
$(document).ready(function(){
$('#myList').on('click', 'li', function(e)
{
var pos = $(this).attr('pos');
$("#myPopup").popup('open');
$('#myPopup').off().on('click', 'ul li a', function(ev)
{
var popupValue = $(this).attr('info');
alert('option-->' + popupValue);
$('#myPopup').popup('close');
});
});
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="content" class="ui-content">
Choose an option...
<div data-role="popup" id="myPopup">
<ul id="myList" data-role="listview" data-inset="true" style="min-width:250px;">
<li>aaaaaaa</li>
<li>bbbbbbb</li>
<li>cccccc</li>
</ul>
</div>
</div>
</body>
</html>

Categories