We Keep Coding

How can I make a button in the header load an iFrame content

Being very new to coding and HTML i am very much struggling to get the login button in the header to load an iframe when clicked
I would be very grateful if some one could help me out
<header class="header-area header-sticky wow slideInDown" data-wow-duration="0.75s" data-wow-delay="0s">
<div class="container">
<div class="row">
<div class="col-12">
<nav class="main-nav">
<!-- ***** Logo Start ***** -->
<a href="index.html" class="logo">
<img src="logo-v1.png" alt="">
</a>
<!-- ***** Logo End ***** -->
<!-- ***** Menu Start ***** -->
<ul class="nav">
<li class="scroll-to-section">Home</li>
<li class="scroll-to-section">About</li>
<li class="scroll-to-section">Services</li>
<li class="scroll-to-section">Contact</li>
<li class="scroll-to-section"><div class="border-first-button">login</div></li>
</ul>
<a class='menu-trigger'>
<span>Menu</span>
</a>
<!-- ***** Menu End ***** -->
</nav>
</div>
</div>
</div>
</header>
<!-- ***** Header Area End ***** -->````

jQuery Mobile External panels not working correctly

I have a frustrating issue.
According to the documentation, I am allowed to have external panels:
http://demos.jquerymobile.com/1.4.2/panel-external/
In the above example the header is inside the page, but the panels are outside the page
I am also allowed to have external headers and footers:
http://demos.jquerymobile.com/1.4.2/toolbar-fixed-persistent/
Then logically I should be able to combine them:
<div data-role="header" data-position="fixed" data-theme="a">
<span>Open left panel</span>
<h1>Info</h1>
</div><!-- /header -->
<div id="locale" data-role="page" data-title="Info" class="jqm-demos">
<div role="main" class="ui-content jqm-content jqm-fullwidth">
<h1>LOCALE</h1>
</div><!-- /content -->
</div><!-- /page -->
<div id="privacy" data-role="page" data-title="Info" class="jqm-demos">
<div role="main" class="ui-content jqm-content jqm-fullwidth">
<h1>PRIVACY</h1>
</div><!-- /content -->
</div><!-- /page -->
<div data-role="panel" id="main_menu" data-position="left" data-display="reveal" data-theme="a">
<ul data-role="listview" id="menu_contents">
<li data-role="list-divider" class="h2 ui-li-divider ui-bar-a ui-first-child">
Page 1
</li>
<li data-role="list-divider" class="h2 ui-li-divider ui-bar-a ui-first-child">
Page 2
</li>
</ul>
</div>
Fiddle: http://jsfiddle.net/sidouglas/qVNyf/1/
As you will see in the fiddle, the sliding animation is not the same as ( http://demos.jquerymobile.com/1.4.2/panel-external/ ). It's laggy and the height of the document is not being calculated correctly.
As per another question, I tried using <div class="ui-panel-wrapper"> in this fiddle. Still the same problem.

And here's a working solution: http://jsfiddle.net/Palestinian/8nM4u/
At least until this bug is solved, you should subscribe to bug report I left you in my comments on top.
Here's additional code you need for this to work correctly:
$(document).on("pagecreate", function () {
$("[data-role=panel]").one("panelbeforeopen", function () {
var height = $.mobile.pageContainer.pagecontainer("getActivePage").outerHeight();
$(".ui-panel-wrapper").css("height", height + 1);
});
});
And say hi to Omar, he made you this solution. :)

Run javascript after Jquery Mobile Swipe Panel load

i am using Jquery Mobile (Open panel on swipe) and adding some attributes to the markup using JavaScript function code below
<?php if(Yii::app()->theme->name=='mobile'){ ?>
<script>
$(document).ready(function(e) {
$('#merchants-grid').removeAttr('class');
$('#merchants-grid').children('table').attr('data-role','table').attr('id','table- custom-2').attr('data-mode','columntoggle').attr('class','ui-body-d ui-shadow table-stripe ui-responsive').attr('data-column-btn-theme','b').attr('data-column-btn-text','display Column').attr('data-column-popup-theme','a').attr('cellpadding',1).attr('cellspacing',0);
$('#merchants-grid').children('table').children('thead').children('tr:first').addClass('ui-bar-d');
$('#merchants-grid').children('table').children('thead').children('tr:first').children('th').attr('data-priority',2);
});
</script>
<?php } ?>
but the javascript function not being included or being executed in the content
here is the markup
<div data-url="mob-top" data-role="page" id="mob-top" data-theme="d">
<div data-role="header" data-theme="b">
<a href="#mob-left-panel">
Left Panel
</a>
<a href="#mob-right-panel">
Right Panel
</a>
</div><!-- /header -->
<div data-role="content">
Content
</div><!-- /content -->
<div data-role="panel" id="mob-left-panel" data-theme="b">
Left Panel Navigation
</div><!-- /panel -->
<div data-role="panel" id="mob-right-panel" data-display="push" data-position="right" data-theme="c">
Right Panel Navigation
</div><!-- /panel -->
Thanks in Advance

If you are using phonegap/cordova, you have to listen to "deviceready"
document.addEventListener("deviceready", onDeviceReady, false);
In normal browsers this should work if your selector is correct (not tested).

next and prev button for different categories of images

<script type="text/javascript">
$(document).ready(function () {
var divs = $('.mydivs>div');
var now = 0; // currently shown div
divs.hide().first().show();
$("button[name=next]").click(function (e) {
divs.eq(now).hide();
now = (now + 1 < divs.length) ? now + 1 : 0;
divs.eq(now).show(); // show next
});
$("button[name=prev]").click(function (e) {
divs.eq(now).hide();
now = (now > 0) ? now - 1 : divs.length - 1;
divs.eq(now).show(); // or .css('display','block');
//console.log(divs.length, now);
});
});
</script>
This is my first time developing a mobile apps and I am really slow in all this coding stuff.so my problem is, I have the above code to view previous and next image in my app.it works fine but when I have different categories of gallery need to be shown (eg: animals category,plants category,etc), and inside each categories, there are few images need to be displayed and can be controlled using the prev and next button (eg: animals [24 images], plants[20 images]), I encounter some problem.problem now is that the script only works on the first categories(eg:animals)..but when I want to view images in other categories (eg: plants), there seems to have problem with the counter. I need to click a few times the next button before the first images from the plant categories appear.
This is my related HTML and CSS for the above code:
HTML:
<body>
<!-- *************HOME PAGE**************** -->
<div data-role="page" id="home" data-title="home">
<div data-role="header">
<h1>Menu Utama</h1>
</div><!-- /header -->
<div><img id="Logo" src="images/logo.png"> </div>
<div data-role="content" class="content-primary">
<ul data-role="listview" data-inset="true">
<li><a href="#animal">
<img src="images/animal-thumbnail.png" />
<h3>category:animal</h3>
<p>view animals </p>
</a></li>
<li><a href="#plant">
<img src="images/plant-thumbnail.png" />
<h3>category:plant</h3>
<p>view plants</p>
</a></li>
</ul>
</div> <!--/content-->
<div data-role="footer" data-position="fixed">
<h4></h4>
</div><!-- /footer -->
</div><!-- /page -->
<!-- *************CATEGORY ANIMAL PAGE**************** -->
<div data-role="page" id="animal" data-title="animal">
<div data-role="header">
.
.
.
</div><!-- /header -->
<div data-role="content">
<div class="mydivs">
<div><img id="ContentPic" src="content-pic/animal1.png" alt="photo" /></div>
<div><img id="ContentPic" src="content-pic/animal2.png" alt="photo" /></div>
<div><img id="ContentPic" src="content-pic/animal3.png" alt="photo" /></div>
</div>
</div> <!--/content-->
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><button name="prev" alt="Previous Tab"><img class="ContentPic" src="images/prev.png" /></button></li>
<li><button name="next" alt="Next Tab"><img class="ContentPic" src="images/next.png" /></button></li>
</ul>
</div> <!-- nav bar -->
<h4></h4>
</div><!-- /footer -->
</div><!-- /page -->
<!-- *************CATEGORY PLANT PAGE**************** -->
<div data-role="page" id="plant" data-title="plant">
<div data-role="header">
.
.
.
</div><!-- /header -->
<div data-role="content">
<div class="mydivs">
<div><img id="ContentPic" src="content-pic/plant1.png" alt="photo" /></div>
<div><img id="ContentPic" src="content-pic/plant2.png" alt="photo" /></div>
<div><img id="ContentPic" src="content-pic/plant3.png" alt="photo" /></div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><button name="prev" alt="Previous Tab"><img class="ContentPic" src="images/prev.png" /></button></li>
<li><button name="next" alt="Next Tab"><img class="ContentPic" src="images/next.png" /></button></li>
</ul>
</div> <!-- nav bar -->
<h4></h4>
</div><!-- /footer -->
</div><!-- /page -->
<!-- ************* END **************** -->
</body>
css
.mydivs {
height:100%;
width: 100%;
}
.mydivs>div {
width : 100%;
}

Try
$(document).ready(function () {
$('.mydivs').children().hide().filter(':first-child').show().addClass('current');
$("button[name=next]").click(function (e) {
var $current = $(this).closest('[data-role="footer"]').prev().find('.current').removeClass('current').hide(), $next = $current.next();
if(!$next.length){
$next = $current.parent().children().first();
}
$next.show().addClass('current'); // show next
});
$("button[name=prev]").click(function (e) {
var $current = $(this).closest('[data-role="footer"]').prev().find('.current').removeClass('current').hide(), $prev = $current.prev();
if(!$prev.length){
$prev = $current.parent().children().last();
}
$prev.show().addClass('current'); // show next
});
});
Demo: Fiddle

JQuery Mobile App- Updating href attribute in Navbar link updates to 'undefined'

So I am creating a survey app and depending on one survey page's selected options, one of two pages will be loaded once a user clicks 'Go'. In determining which link to load into the go button's href property, I also assign the link to a future survey page's 'back' button... I am confused about why this is returning undefined as I am doing the exact same thing earlier in the application and the back button's link is returning the correct link...
So after calling setSurveyFromSurvey5a(), once a user taps 'go' from survey5a, console.log($("#survey5bback").attr("href")) returns 'undefined', even after it should have been assigned within setSurveyFromSurvey5a()... it will pass the conditional to set the href value, but it just isn't changing it and I'm not sure why...
Here is my code:
relevant javascript:
function setSurveyFromSurvey5a(){
if(goto5a){
survey5adata.alo_wthfam = translateCheckBox($("#checkbox-alo_wthfam").prop("checked"));
survey5adata.alo_wthpart = translateCheckBox($("#checkbox-alo_wthpart").prop("checked"));
survey5adata.alo_wthwork = translateCheckBox($("#checkbox-alo_wthwork").prop("checked"));
survey5adata.alo_wthfr = translateCheckBox($("#checkbox-alo_wthfr").prop("checked"));
survey5adata.alo_wthoth = translateCheckBox($("#checkbox-alo_wthoth").prop("checked"));
}
//set go and back buttons:
if(survey5adata.alo_wthfam == 2){
goto5a1 = true;
console.log("within survey5adata.alo_wthfam == 2");
$("#survey5ago").attr("href", "#survey5a1");
$("#survey5bback").attr("href", "#survey5a1");
}
else if(survey5adata.alo_wthfam == 1){
console.log("within survey5adata.alo_wthfam == 1");
goto5a1 = false;
$("#survey5ago").attr("href", "#survey5b");
$("#survey5bback").attr("href", "#survey5a");
}
console.log("#survey5ago:" + $("#survey5ago").attr("href"));
console.log("#survey5bback:" + $("#survey5bback").attr("href"));
}
The html from survey5a, survey5a1, and survey 5b:
<div data-role="page" id="survey5a">
<header data-role="header" data-theme="c">
<img src="img/evl_logo2.png" class="evllogo" width="100"/>
<img src="img/uic_logo2.png" class="ui-btn-right" width="100"/>
</header>
<div data-role="header" data-theme="e">
<p>Tobacco Use Interview</p>
</div>
<div data-role="content">
<div id="survey5acontent">
</div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Back</li>
<li>Home</li>
<li>Go</li>
</ul>
</div>
</div>
</div>
<!-- LINKED SURVEY5a1 -->
<div data-role="page" id="survey5a1">
<header data-role="header" data-theme="c">
<img src="img/evl_logo2.png" class="evllogo" width="100"/>
<img src="img/uic_logo2.png" class="ui-btn-right" width="100"/>
</header>
<div data-role="header" data-theme="e">
<p>Tobacco Use Interview</p>
</div>
<div data-role="content">
<div id="survey5a1content">
</div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Back</li>
<li>Home</li>
<li>Go</li>
</ul>
</div>
</div>
</div>
<!-- LINKED SURVEY5b -->
<div data-role="page" id="survey5b">
<header data-role="header" data-theme="c">
<img src="img/evl_logo2.png" class="evllogo" width="100"/>
<img src="img/uic_logo2.png" class="ui-btn-right" width="100"/>
</header>
<div data-role="header" data-theme="e">
<p>Tobacco Use Interview</p>
</div>
<div data-role="content">
<div id="survey5bcontent">
</div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<!-- Need to determine how to go back correctly -->
<li>Back</li>
<li>Home</li>
<li>Go</li>
</ul>
</div>
</div>
</div>

You just have a typo in your HTML markup:
<li>Back</li>
Should be
<li>Back</li>
Remove the '#' from the id.