Intel XDK template app and iFrames not working

Intel XDK template app and iFrames not working - javascript

I'm trying to open iFrames within the different tabs of the app. The problem that is happening is that if I place an iFrame in the first tab(page of app), I cannot access any of the tabs below it. But if there is text such as <p>Bla Bla</p> it works fine. If I put the iFrame in the last tab, all of the above work fine. I'm new to html5 cross platform apps, and very new to intel XDK. Thanks in advance.
CODE:
<!DOCTYPE html>
<html>
<head>
<title>Grid View App template</title>
<!--
This template can be used for photo app with grid view that will open detail view, for applications like Photo App or Instagram app.
-->
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0;" />
<link rel="stylesheet" type="text/css" href="appframework/af.ui.css" />
<link rel="stylesheet" type="text/css" href="appframework/icons.css" />
<script type="text/javascript" charset="utf-8" src="appframework/appframework.ui.min.js"></script>
<!-- phantom library, needed for XDK "legacy" container api calls -->
<script src="intelxdk.js"></script>
<!-- phantom library, needed for Cordova api calls -->
<script src="cordova.js"></script>
<!-- phantom library, needed for XDK "legacy" container CORS -->
<script src="xhr.js"></script>
<script>
var onDeviceReady=function(){ // called when Cordova is ready
if( window.Cordova && navigator.splashscreen ) { // Cordova API detected
$.ui.launch();
navigator.splashscreen.hide() ; // hide splash screen
}
} ;
document.addEventListener("deviceready", onDeviceReady, false) ;
</script>
<script>
$.ui.autoLaunch = false;
$.ui.backButtonText = "Back";
$(document).ready(function(){
$.ui.launch();
});
</script>
<style>
/* CSS responsive square grid */
.grid-photo {margin:3px -7px;}
.grid-photo:after {content:'';display:block;clear:both;}
.grid-photo li {position: relative; display:block; float:left; width: 10%; padding-bottom: 10%;}
.grid-photo .grid-photo-box {position: absolute;left: 3px;right: 3px;top: 3px;bottom: 3px; background-color: rgba(128,128,128,0.2);}
.grid-photo img {width:100%;height:100%}
#media only screen and (max-width : 1024px) {
.grid-photo li {width: 12.5%; padding-bottom: 12.5%;}
}
#media only screen and (max-width : 768px) {
.grid-photo li {width: 16.6%; padding-bottom: 16.6%;}
}
#media only screen and (max-width : 480px) {
.grid-photo li {width: 25%; padding-bottom: 25%;}
}
#media only screen and (max-width : 320px) {
.grid-photo li {width: 33.3%; padding-bottom: 33.3%;}
}
</style>
</head>
<body>
<div id="afui">
<div id="content" style="">
<!--Grid View Page-->
<div class="panel" title="Title" id="gridview" selected="true">
<header>
<h1>Title</h1>
</header>
<div class="grid-photo">
<li><div class="grid-photo-box"><img src="" /></div></li>
<li><div class="grid-photo-box"><img src="" /></div></li>
<li><div class="grid-photo-box"><img src="" /></div></li>
<li><div class="grid-photo-box"><img src="" /></div></li>
<li><div class="grid-photo-box"><img src="" /></div></li>
<li><div class="grid-photo-box"><img src="" /></div></li>
<li><div class="grid-photo-box"><img src="" /></div></li>
<li><div class="grid-photo-box"><img src="" /></div></li>
<li><div class="grid-photo-box"><img src="" /></div></li>
<li><div class="grid-photo-box"><img src="" /></div></li>
<li><div class="grid-photo-box"><img src="" /></div></li>
<li><div class="grid-photo-box"><img src="" /></div></li>
<li><div class="grid-photo-box"><img src="" /></div></li>
<li><div class="grid-photo-box"><img src="" /></div></li>
<li><div class="grid-photo-box"><img src="" /></div></li>
<li><div class="grid-photo-box"><img src="" /></div></li>
<li><div class="grid-photo-box"><img src="" /></div></li>
<li><div class="grid-photo-box"><img src="" /></div></li>
<li><div class="grid-photo-box"><img src="" /></div></li>
<li><div class="grid-photo-box"><img src="" /></div></li>
<li><div class="grid-photo-box"><img src="" /></div></li>
<li><div class="grid-photo-box"><img src="" /></div></li>
<li><div class="grid-photo-box"><img src="" /></div></li>
<li><div class="grid-photo-box"><img src="" /></div></li>
</div>
<a id="more" class="button block">Load More</a>
</div>
<!--Detail View Pages for each grid items-->
<div class="panel" title="Item 1" id="item1">
<p><iframe width="100%" height="600px" frameborder="0" src="http://www.google.com" /></p>
</div>
<div class="panel" title="Item 2" id="item2">
<p>This is detail view for Item 2</p>
</div>
<div class="panel" title="Item 3" id="item3">
<p>This is detail view for Item 3</p>
</div>
<div class="panel" title="Item 4" id="item4">
<p>This is detail view for Item 4</p>
</div>
<div class="panel" title="Item 5" id="item5">
<p>This is detail view for Item 5</p>
</div>
<div class="panel" title="Item 6" id="item6">
<p>This is detail view for Item 6</p>
</div>
<div class="panel" title="Item 7" id="item7">
<p>This is detail view for Item 7</p>
</div>
<div class="panel" title="Item 8" id="item8">
<p>This is detail view for Item 8</p>
</div>
<div class="panel" title="Item 9" id="item9">
<p>This is detail view for Item 9</p>
</div>
<div class="panel" title="Item 10" id="item10">
<p>This is detail view for Item 10</p>
</div>
<div class="panel" title="Item 11" id="item11">
<p>This is detail view for Item 11</p>
</div>
<div class="panel" title="Item 12" id="item12">
<p>This is detail view for Item 12</p>
</div>
<div class="panel" title="Item 13" id="item13">
<p>This is detail view for Item 13</p>
</div>
<div class="panel" title="Item 14" id="item14">
<p>This is detail view for Item 14</p>
</div>
<div class="panel" title="Item 15" id="item15">
<p>This is detail view for Item 15</p>
</div>
<div class="panel" title="Item 16" id="item16">
<p>This is detail view for Item 16</p>
</div>
<div class="panel" title="Item 17" id="item17">
<p>This is detail view for Item 17</p>
</div>
<div class="panel" title="Item 18" id="item18">
<p>This is detail view for Item 18</p>
</div>
<div class="panel" title="Item 19" id="item19">
<p>This is detail view for Item 19</p>
</div>
<div class="panel" title="Item 20" id="item20">
<p>This is detail view for Item 20</p>
</div>
<div class="panel" title="Item 21" id="item21">
<p>This is detail view for Item 11</p>
</div>
<div class="panel" title="Item 22" id="item22">
<p>This is detail view for Item 12</p>
</div>
<div class="panel" title="Item 23" id="item23">
<p>This is detail view for Item 13</p>
</div>
<div class="panel" title="Item 24" id="item24">
<p>This is detail view for Item 14</p>
</div>
</div>
</div>
</body>
</html>

The problem is related to simple HTML syntax.
Just close the iframe tag and it will work.
I.E.:
<iframe width="100%" height="600px" frameborder="0" src="http://www.google.com"></iframe>
The previous behavior is due to missing closure tag (all the rest of your code was "trapped" inside the previously opened IFRAME).

Related

How to adjust padding of a menu using javascript according to screen size?

HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="engine1/style.css" />
<script type="text/javascript" src="engine1/jquery.js"></script>
<script type="text/javascript" src="javascript1.js"></script>
<link rel="stylesheet" type="text/css" href="../css/style1.css" />
</head>
<body>
<div class="wrap">
<div class="sec1">
<div class="logo">
<img src="../images/logo.png" width="100%" height="150px">
</div>
<div class="heading">
<h1 style="color:lawngreen;">CITY STORE
<br>KIRANA & GENERAL</h1>
</div>
</div>
<div class="sec2">
<div class="menu">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>CONTACT</li>
<li>GALLERY</li>
<li>SERVICES</li>
</ul>
</div>
</div>
<div class="slider">
<!-- Start WOWSlider.com BODY section -->
<!-- Start WOWSlider.com BODY section -->
<div id="wowslider-container1">
<div class="ws_images">
<ul>
<li><img src="data1/images/1.jpg" alt="" title="" id="wows1_0" />
</li>
<li><img src="data1/images/p2.jpg" alt="" title="" id="wows1_1" />
</li>
<li><img src="data1/images/p3.jpg" alt="" title="" id="wows1_2" />
</li>
<li><a href="http://wowslider.net"><img src="data1/images/p4.png" alt="bootstrap slider"
title="" id="wows1_3" /></a></li>
<li><img src="data1/images/p5.jpg" alt="" title="" id="wows1_4" />
</li>
</ul>
</div>
<div class="ws_bullets">
<div>
<span><img src="data1/tooltips/1.jpg" alt="" />1</span>
<span><img src="data1/tooltips/p2.jpg" alt="" />2</span>
<span><img src="data1/tooltips/p3.jpg" alt="" />3</span>
<span><img src="data1/tooltips/p4.png" alt="" />4</span>
<span><img src="data1/tooltips/p5.jpg" alt="" />5</span>
</div>
</div>
<div class="ws_script" style="position:absolute;left:-99%">wow slider
by WOWSlider.com
v9.0</div>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="engine1/wowslider.js"></script>
<script type="text/javascript" src="engine1/script.js"></script>
<!-- End WOWSlider.com BODY section -->
</div>
<div class="pre-sec3-bar"></div>
<div class="sec3">
<div class="sec3-heading">
<h1>WELCOME TO CITY STORE</h1>
<h2>WHY
CHOOSE US ?</h1>
</h2>
</div>
<div class="sec3-content">
<div class="sec3-content-pic"><img src="../images/p6.png" width="100%" height="350px"></div>
<div class="sec3-content-para">
<h3>CITY STORE GROCERIES.</h3>
</div>
</div>
</div>
<div class="sec4">
<div class="sec4-para"><img src="../images/img2.png" width="100%" height="363px"></div>
<div class="sec4-image"><img src="../images/shop.jpg" width="100%" height="360px"></div>
</div>
<div class="sec5">
<div class="sec5-img"><img src="../images/shop3.jpg" width="100%" height="430px"></div>
<div class="sec5-para">
<h3>.</h3>
</div>
</div>
<div class="sec6">
<div class="sec6-header">
<h3>OUR BRANDS</h3>
</div>
<div class="marquee">
<marquee direction="left" scrolldelay="2"><img src="../images/b1.jpg" width="150px" height="150px">
<img src="../images/b2.jpg" width="150px" height="150px">
<img src="../images/b3.jpg" width="150px" height="150px">
<img src="../images/b4.jpg" width="150px" height="150px">
<img src="../images/b5.jpg" width="150px" height="150px">
<img src="../images/b6.jpg" width="150px" height="150px">
<img src="../images/c1.jpg" width="150px" height="150px">
<img src="../images/c2.jpg" width="150px" height="150px">
<img src="../images/c3.jpg" width="150px" height="150px">
<img src="../images/b4.jpg" width="150px" height="150px">
</marquee>
</div>
</div>
<div class="foot">
<h4>(c)2020 SHOP RITE.All Rights Reserved.Powered
by NashInfotech.</h4>
</div>
</div>
</body>
</html>
javascript1.js
document.getElementByclassName("menu ul li").style.padding = "1.5vh 50px
1.5vh 50px";
CSS
.menu{
width:100%;
opacity:70%;
}
.menu ul{
width:100%;
display:inline;
}
.menu ul li{
font-size: x-large;
float: left;
list-style: none;
text-decoration: none;
color:yellow;
background-color:green;
padding:1.5vh 86px;
}
I have done the coding so when the page opens it should show menu shrunk from 86px to 50px, but it is showing 86px right and left padding. The Javascript code is not reflecting. My goal is to obtain a screen width constant and then changing the padding according to it using Javascript. But first as I'm new to Javascript I just wanted to test if my Javascript code is working or not and it's not reflecting.

This will not work, because you are mixing class name and tag name.
Please, use document.querySelector or document.querySelectorAll if you need to update all findings.
document.querySelector('.menu ul li').style.padding = "1.5vh 50px 1.5vh 50px";
[...document.querySelectorAll('.menu ul li')].forEach(el=> el.style.padding = "1.5vh 50px 1.5vh 50px")
UPDATE Here is a working demo for the provided markup. Everything works perfectly. The issue is here: <script type="text/javascript" src="javascript1.js"></script> You loads your JS before DOM. So when JS starts working, it can't find the expected DOM elements cause they are not yet loaded. To fix the issue, move JS to the bottom of the file.
[...document.querySelectorAll('.menu ul li')].forEach(el=> el.style.padding = "1.5vh 50px 1.5vh 50px");
<div class="wrap">
<div class="sec1">
<div class="logo">
<img src="../images/logo.png" width="100%" height="150px">
</div>
<div class="heading">
<h1 style="color:lawngreen;">CITY STORE
<br>KIRANA & GENERAL</h1>
</div>
</div>
<div class="sec2">
<div class="menu">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>CONTACT</li>
<li>GALLERY</li>
<li>SERVICES</li>
</ul>
</div>
</div>
<div class="slider">
<!-- Start WOWSlider.com BODY section -->
<!-- Start WOWSlider.com BODY section -->
<div id="wowslider-container1">
<div class="ws_images">
<ul>
<li><img src="data1/images/1.jpg" alt="" title="" id="wows1_0" />
</li>
<li><img src="data1/images/p2.jpg" alt="" title="" id="wows1_1" />
</li>
<li><img src="data1/images/p3.jpg" alt="" title="" id="wows1_2" />
</li>
<li><a href="http://wowslider.net"><img src="data1/images/p4.png" alt="bootstrap slider"
title="" id="wows1_3" /></a></li>
<li><img src="data1/images/p5.jpg" alt="" title="" id="wows1_4" />
</li>
</ul>
</div>
<div class="ws_bullets">
<div>
<span><img src="data1/tooltips/1.jpg" alt="" />1</span>
<span><img src="data1/tooltips/p2.jpg" alt="" />2</span>
<span><img src="data1/tooltips/p3.jpg" alt="" />3</span>
<span><img src="data1/tooltips/p4.png" alt="" />4</span>
<span><img src="data1/tooltips/p5.jpg" alt="" />5</span>
</div>
</div>
<div class="ws_script" style="position:absolute;left:-99%">wow slider
by WOWSlider.com
v9.0</div>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="engine1/wowslider.js"></script>
<script type="text/javascript" src="engine1/script.js"></script>
<!-- End WOWSlider.com BODY section -->
</div>
<div class="pre-sec3-bar"></div>
<div class="sec3">
<div class="sec3-heading">
<h1>WELCOME TO CITY STORE</h1>
<h2>WHY
CHOOSE US ?</h1>
</h2>
</div>
<div class="sec3-content">
<div class="sec3-content-pic"><img src="../images/p6.png" width="100%" height="350px"></div>
<div class="sec3-content-para">
<h3>CITY STORE GROCERIES.</h3>
</div>
</div>
</div>
<div class="sec4">
<div class="sec4-para"><img src="../images/img2.png" width="100%" height="363px"></div>
<div class="sec4-image"><img src="../images/shop.jpg" width="100%" height="360px"></div>
</div>
<div class="sec5">
<div class="sec5-img"><img src="../images/shop3.jpg" width="100%" height="430px"></div>
<div class="sec5-para">
<h3>.</h3>
</div>
</div>
<div class="sec6">
<div class="sec6-header">
<h3>OUR BRANDS</h3>
</div>
<div class="marquee">
<marquee direction="left" scrolldelay="2"><img src="../images/b1.jpg" width="150px" height="150px">
<img src="../images/b2.jpg" width="150px" height="150px">
<img src="../images/b3.jpg" width="150px" height="150px">
<img src="../images/b4.jpg" width="150px" height="150px">
<img src="../images/b5.jpg" width="150px" height="150px">
<img src="../images/b6.jpg" width="150px" height="150px">
<img src="../images/c1.jpg" width="150px" height="150px">
<img src="../images/c2.jpg" width="150px" height="150px">
<img src="../images/c3.jpg" width="150px" height="150px">
<img src="../images/b4.jpg" width="150px" height="150px">
</marquee>
</div>
</div>
<div class="foot">
<h4>(c)2020 SHOP RITE.All Rights Reserved.Powered
by NashInfotech.</h4>
</div>
</div>

Visit https://www.w3schools.com/jsref/met_document_queryselector.asp.
Try with "document.querySelector('.menu ul li').style.padding = "1.5vh 50px 1.5vh 50px";"

js css slider tutorial issue

I've been trying my hand at a js slider tutorial and have been trying to get the slider to appear without having to click on one of the links (paris and milan etc).
So page opens, there's the slider.
I've tried having the div of the slider thumb container on the page without having
<ul id="fp_galleryList" class="fp_galleryList">
<li>Paris</li>
<li>New York</li>
</ul>
but it just shows up blank.
I'd really appreciate a nudge in the right direction.
Here's the tutorial for reference:link
Jsfiddle #pete fixed the fiddle
I'm sorry my fiddle doesn't work but my code is there. (First time using Jsfiddle and Stackoverflow so please be nice ;))
<div id="fp_gallery" class="fp_gallery">
<ul id="fp_galleryList" class="fp_galleryList">
<li>Paris</li>
<li>New York</li>
</ul>
<div id="fp_thumbContainer">
<div id="fp_thumbScroller">
<div class="container">
<div class="content">
<div>
<img src="images/album1/thumbs/1.jpg" alt="images/album1/1.jpg" class="thumb" />
</div>
</div>
<div class="content">
<div>
<img src="images/album1/thumbs/2.jpg" alt="images/album1/2.jpg" class="thumb" />
</div>
</div>
<div class="content">
<div>
<img src="images/album1/thumbs/3.jpg" alt="images/album1/3.jpg" class="thumb" />
</div>
</div>
<div class="content">
<div>
<img src="images/album1/thumbs/1.jpg" alt="images/album1/1.jpg" class="thumb" />
</div>
</div>
<div class="content">
<div>
<img src="images/album1/thumbs/2.jpg" alt="images/album1/2.jpg" class="thumb" />
</div>
</div>
<div class="content">
<div>
<img src="images/album1/thumbs/3.jpg" alt="images/album1/3.jpg" class="thumb" />
</div>
</div>
<div class="content">
<div>
<img src="images/album1/thumbs/1.jpg" alt="images/album1/1.jpg" class="thumb" />
</div>
</div>
<div class="content">
<div>
<img src="images/album1/thumbs/2.jpg" alt="images/album1/2.jpg" class="thumb" />
</div>
</div>
<div class="content">
<div>
<img src="images/album1/thumbs/3.jpg" alt="images/album1/3.jpg" class="thumb" />
</div>
</div>
<div class="content">
<div>
<img src="images/album1/thumbs/1.jpg" alt="images/album1/1.jpg" class="thumb" />
</div>
</div>
<div class="content">
<div>
<img src="images/album1/thumbs/2.jpg" alt="images/album1/2.jpg" class="thumb" />
</div>
</div>
<div class="content">
<div>
<img src="images/album1/thumbs/3.jpg" alt="images/album1/3.jpg" class="thumb" />
</div>
</div>
</div>
</div>
</div>
</div>
<div id="fp_scrollWrapper" class="fp_scrollWrapper">
<span id="fp_prev_thumb" class="fp_prev_thumb"></span>
<div id="slider" class="slider"></div>
<span id="fp_next_thumb" class="fp_next_thumb"></span>
</div>
<div id="fp_overlay" class="fp_overlay"></div>
<div id="fp_loading" class="fp_loading"></div>
<div id="fp_next" class="fp_next"></div>
<div id="fp_prev" class="fp_prev"></div>
<div id="fp_close" class="fp_close">Close preview</div>
<!-- JAVASCRIPT -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript">

Slideshow image blows up on page load

I just added a slider and carousel to my Volusion website homepage.
However, when I went to the page, the first carousel image would blow up to a huge size (original size is only 180 x 270) and flash twice. So I looked through the code and removed a line:
<script src="/v/vspfiles/templates/192/homepage/js/jquery.js" type="text/javascript"></script>
Because I thought maybe it's trying to load the javascript twice or something.
After I did this, the carousel image still blows up to a huge size on load, but only once.
Here is the page where it is happening on: http://www.wallsrepublic.com
All of the relevant code I have on my home page is below:
<script src="/v/vspfiles/templates/192/homepage/js/mobilyslider.js" type="text/javascript"></script>
<script src="/v/vspfiles/templates/192/homepage/js/init.js" type="text/javascript"></script>
For the main slider:
<link rel="stylesheet" href="http://www.wallsrepublic.com/v/slider/flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="http://www.wallsrepublic.com/v/Slider/jquery.flexslider.js"></script>`
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$(".flexslider").flexslider();
});
$(window).load(function() {
$(".flexslider").flexslider({
animation: "slide",
animationLoop: false,
itemWidth: 210,
itemMargin: 5,
minItems: 2,
maxItems: 4
});
});
</script>
<div class="flexslider" style="width:auto;overflow:hidden;">
<ul class="slides">
<li>
<a href='http://www.wallsrepublic.com/home-wallpapers-online-s/1814.htm' ><img alt='Home Wallpaper' src="http://www.wallsrepublic.com/v/vspfiles/slider/slide1.jpg" height='452' width='975' border='0' /></a>
</li>
<li>
<a href='http://www.wallsrepublic.com/home-wallpapers-online-s/1814.htm'><img alt='Wallpaper Murals' src="http://www.wallsrepublic.com/v/vspfiles/slider/slide2-1.jpg" height='452' width='975' border='0' /></a>
</li>
<li>
<a href='http://www.wallsrepublic.com/home-wallpapers-online-s/1814.htm'><img alt='Wallpaper Sale' src="http://www.wallsrepublic.com/v/vspfiles/slider/slide3.jpg" height='452' width='975' border='0' /></a>
</li>
</ul>
</div>
For the problematic carousel:
<script src="http://wallsrepublic.com/v/carousel/amazingcarousel.js"></script>
<link rel="stylesheet" type="text/css" href="http://wallsrepublic.com/v/carousel/initcarousel-1.css">
<script src="http://wallsrepublic.com/v/carousel/initcarousel-1.js"></script>
<!-- PRODUCT CAROUSEL -->
<div id="amazingcarousel-container-1">
<div id="amazingcarousel-1" style="display:block;position:relative;width:100%;max-width:900px;margin:0px auto 0px;">
<div class="amazingcarousel-list-container">
<ul class="amazingcarousel-list">
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/gold-damask-wallpaper-p/r2067-parent.htm" title="GOLD DAMASK " ><img src="http://wallsrepublic.com/v/carousel/1.png" alt="GOLD DAMASK " /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">GOLD DAMASK </div>
<div class="amazingcarousel-description">$159 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/grey-overlay-wallpaper-p/s43712-parent.htm" title="GREY OVERLAY " ><img src="http://wallsrepublic.com/v/carousel/2.png" alt="GREY OVERLAY " /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">GREY OVERLAY </div>
<div class="amazingcarousel-description">$89 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/black-white-dogstooth-wallpaper-p/r2542-parent.htm" title="BLACK & WHITE DOGSTOOTH " ><img src="http://wallsrepublic.com/v/carousel/3.png" alt="BLACK & WHITE DOGSTOOTH " /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">BLACK & WHITE DOGSTOOTH </div>
<div class="amazingcarousel-description">$119 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/brown-fawn-wallpaper-p/r2339-parent.htm" title="BROWN FAWN " ><img src="http://wallsrepublic.com/v/carousel/4.png" alt="BROWN FAWN " /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">BROWN FAWN </div>
<div class="amazingcarousel-description">$139 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/R1373-p/r1373-parent.htm" title="SERENITY SAND" ><img src="http://wallsrepublic.com/v/carousel/5.png" alt="SERENITY SAND" /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">SERENITY SAND</div>
<div class="amazingcarousel-description">$149 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/taupe-stone-modern-residential-wallpaper-R1875-p/r1875-parent.htm" title="BLOCK-STONE GREY" ><img src="http://wallsrepublic.com/v/carousel/6.png" alt="BLOCK-STONE GREY" /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">BLOCK-STONE GREY</div>
<div class="amazingcarousel-description">$79 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/marsala-running-brick-wallpaper-p/r2587-parent.htm" title="MARSALA RUNNING BRICK" ><img src="http://wallsrepublic.com/v/carousel/7.png" alt="MARSALA RUNNING BRICK" /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">MARSALA RUNNING BRICK</div>
<div class="amazingcarousel-description">$79 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/geometric-gold-residential-wallpaper-R1861-p/r1861-parent.htm" title="TIA GOLD" ><img src="http://wallsrepublic.com/v/carousel/8.png" alt="TIA GOLD" /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">TIA GOLD</div>
<div class="amazingcarousel-description">$119 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/antique-world-map-mural-p/m9167-parent.htm" title="ANTIQUE WORLD MAP MURAL" ><img src="http://wallsrepublic.com/v/carousel/9.png" alt="ANTIQUE WORLD MAP MURAL" /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">ANTIQUE WORLD MAP MURAL</div>
<div class="amazingcarousel-description">$399 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/blue-wood-pattern-residential-wallpaper-R1878-p/r1878-parent.htm" title="BRUSHED WOOD BLUE" ><img src="http://wallsrepublic.com/v/carousel/10.png" alt="BRUSHED WOOD BLUE" /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">BRUSHED WOOD BLUE</div>
<div class="amazingcarousel-description">$89 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/black-and-white-lattice-wallpaper-p/r2548-parent.htm" title="BLACK & WHITE LATTICE" ><img src="http://wallsrepublic.com/v/carousel/11.png" alt="BLACK & WHITE LATTICE" /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">BLACK & WHITE LATTICE</div>
<div class="amazingcarousel-description">$119 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/gold-victorian-wallpaper-p/s43751-parent.htm" title="GOLD VICTORIAN" ><img src="http://wallsrepublic.com/v/carousel/12.png" alt="GOLD VICTORIAN" /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">GOLD VICTORIAN</div>
<div class="amazingcarousel-description">$149 USD</div>
</div> </div>
</li>
</ul>
<div class="amazingcarousel-prev"></div>
<div class="amazingcarousel-next"></div>
</div>
<div class="amazingcarousel-nav"></div>
</div>
</div>
I had the javascript and css files in my template header before, but then the slideshows did not work so I had to move them to be directly on the home page.
Any help would be appreciated.

$(window).load(function() {
$(".flexslider").flexslider();
});
Try to remove those lines, you are calling the slider 2 times for the same class.

I don't think it's an issue with Flexslider that's causing this.
As far as I can tell, it is caused by the wallpaper swatch displaying at 100% width before the amazing carousel plugin kicks in and wraps the image to a smaller width.
Try adding this to your stylesheet
.amazingcarousel-item {
float: left;
width: 150px;
}
This will give the carousel item a width by default, which in turn causes the image inside it to be a smaller width.

Refresh html that is loaded into iframe with jQuery tab

Very new to this...
My site http://www.daveknispel.com.au is where I have the issue.
I use jQuery to load html pages into iFrames with a tab system. Their is 2 levels of this, so a similar tab system is used in a html within the iFrame. The problem is when I toggle on the original page the html in the iFrame with the toggle doesn't refresh to its initial state.
Index.html > has |work| |contact| |resume| tabs
within work.html which sits within an iframe on index.html it has a series of images that act as tabs
so if you press a tab say ghostbuster, my ghostbusters portfolio html appears within the frame.
If now you press |work| again I want the iframe to reset to the original work.html
Not sure if this is clear but hopefully.
// JavaScript Document
$("document").ready(function(){
$('#content > div').hide();
$('#content div:first').show();
$('.nav-wrapper ul li:first').addClass('active');
$('.nav-wrapper ul li a').click(function(){
$('.nav-wrapper ul li').removeClass('active');
$(this).parent().addClass('active');
var currentTab = $(this).attr('href');
$('#content > div').hide();
$(currentTab).fadeIn(400).fadeIn('slow');
return false;
});
});
//index.html
<div class="nav-wrapper">
<div class="menu">
<ul>
<li><a class="fill-div" href="#work" onclick="work.html.refresh"><h2>work</h2></a></li>
<li><a class="fill-div" href="#about"><h2>about/contact</h2></a></li>
<li><a class="fill-div" href="#resume"><h2>resume</h2></a></li>
</ul>
</div>
<div id="content">
<div id="work">
<iframe src="work.html" width="860px" height="1380px" frameborder="0" scrolling="no" seamless></iframe>
</div>
<div id="about">
<iframe src="about.html" width="860px" height="1500px" frameborder="0" scrolling="no" seamless></iframe>
</div>
<div id="resume">
<iframe src="resume.html" width="860px" height="1216px" frameborder="0" scrolling="no" seamless></iframe>
</div>
</div>
</div>
//work.html
<div class="nav-wrapper">
<div id="content">
<div class="menu2">
<ul>
<div class="frameProject">
<li><a class="fill-div" href="#metro">
<img src="img/metro.jpg" alt="Metropolitan Hotel">
<h3> Metropolitan Hotel </h3></a></li>
<h4> Web, Print & Digital </h4>
</div>
<div class="frameProject">
<li><a class="fill-div" href="#ghostbusters">
<img src="img/ghostbusters.jpg" alt="Ghostbusters">
<h3> Ghostbusters </h3></a></li>
<h4> Title Sequence </h4>
</div>
<div class="frameProject">
<li><a class="fill-div" href="#uep">
<img src="img/uep.jpg" alt="UEP Pty. Ltd.">
<h3> UEP </h3></a></li>
<h4> Website & Build </h4>
</div>
<div class="frameProject">
<li><a class="fill-div" href="#science">
<img src="img/science.jpg" alt="Science Q and A">
<h3> Science Q and A </h3></a></li>
<h4> Logo Design </h4>
</div>
<div class="frameProject">
<li><a class="fill-div" href="#gonski">
<img src="img/gonski.jpg" alt="Gonski Review">
<h3> Gonski Review </h3></a></li>
<h4> Infographic Animation </h4>
</div>
<div class="frameProject">
<li><a class="fill-div" href="#mylife">
<img src="img/mylife.jpg" alt="My Life Network">
<h3> My Life Network </h3></a></li>
<h4> Logo & Web Design </h4>
</div>
<div class="frameProject">
<li><a class="fill-div" href="#gameandwatch">
<img src="img/gameandwatch.jpg" alt="Game and Watch">
<h3> Game and Watch </h3></a></li>
<h4> Design & Programming </h4>
</div>
<div class="frameProject">
<li><a class="fill-div" href="#barnbrook">
<img src="img/barnbrook.jpg" alt="Barnbrook">
<h3> Jonathon Barnbrook </h3></a></li>
<h4> Poster Design </h4>
</div>
<div class="frameProject">
<li><a class="fill-div" href="#cerberus">
<img src="img/cerberus.jpg" alt="Cerberus">
<h3> Cerberus v Hercules </h3></a></li>
<h4> Design </h4>
</div>
<div class="frameProject">
<li><a class="fill-div" href="#whenjooturns">
<img src="img/joo.jpg" alt="When Joo Turns">
<h3> When Joo Turns </h3></a></li>
<h4> Animation </h4>
</div>
<div class="frameProject">
<li><a class="fill-div" href="#allstar">
<img src="img/afl.jpg" alt="All Star Karaoke">
<h3> All Star Karaoke </h3></a></li>
<h4> Animation </h4>
</div>
<div class="frameProject">
<li><a class="fill-div" href="#iamlife">
<img src="img/iamlife.jpg" alt="I am Life - Film">
<h3> I am Life Film </h3></a></li>
<h4> Assistant Director </h4>
</div>
<div class="frameProject">
<li><a class="fill-div" href="#owlfarm">
<img src="img/owl.jpg" alt="Owl Farm">
<h3> Owl Farm </h3></a></li>
<h4> Logo Design </h4>
</div>
</ul>
</div>
<div id="metro">
<iframe src="metro.html" width="840px" height="1216px" frameborder="0" scrolling="yes" seamless></iframe>
</div>
<div id="ghostbusters">
<iframe src="ghostbusters.html" width="840px" height="1216px" frameborder="0" scrolling="yes" seamless></iframe>
</div>
<div id="uep">
<iframe src="uep.html" width="840px" height="1216px" frameborder="0" scrolling="yes" seamless></iframe>
</div>
<div id="science">
<iframe src="science.html" width="840px" height="1216px" frameborder="0" scrolling="yes" seamless></iframe>
</div>
<div id="gonski">
<iframe src="gonski.html" width="840px" height="1216px" frameborder="0" scrolling="yes" seamless></iframe>
</div>
<div id="mylife">
<iframe src="mylife.html" width="840px" height="1216px" frameborder="0" scrolling="yes" seamless></iframe>
</div>
<div id="gameandwatch">
<iframe src="gameandwatch.html" width="840px" height="1216px" frameborder="0" scrolling="yes" seamless></iframe>
</div>
<div id="barnbrook">
<iframe src="barnbrook.html" width="840px" height="1216px" frameborder="0" scrolling="yes" seamless></iframe>
</div>
<div id="cerberus">
<iframe src="cerberus.html" width="840px" height="1216px" frameborder="0" scrolling="yes" seamless></iframe>
</div>
<div id="whenjooturns">
<iframe src="whenjooturns.html" width="840px" height="1216px" frameborder="0" scrolling="yes" seamless></iframe>
</div>
<div id="allstar">
<iframe src="allstar.html" width="840px" height="1216px" frameborder="0" scrolling="yes" seamless></iframe>
</div>
<div id="iamlife">
<iframe src="iamlife.html" width="840px" height="1150px" frameborder="0" scrolling="yes" seamless></iframe>
</div>
<div id="owlfarm">
<iframe src="owlfarm.html" width="840px" height="1216px" frameborder="0" scrolling="yes" seamless></iframe>
</div>
</div>
</div>

Your solution is a bit convoluted, but here's a way of solving your problem.
// JavaScript Document
$("document").ready(function(){
$('#content > div').hide();
$('#content div:first').show();
$('.nav-wrapper ul li:first').addClass('active');
$('.nav-wrapper ul li a').click(function(){
$('.nav-wrapper ul li').removeClass('active');
$(this).parent().addClass('active');
var currentTab = $(this).attr('href');
$('#content > div').hide();
// Added lines. Reset the iframe src to reload the original contents of the iframe.
var iframe = $(currentTab).find('iframe').get(0);
iframe.src = iframe.src;
$(currentTab).fadeIn(400).fadeIn('slow');
return false;
});
});

This might work:
$( "#tabs" ).tabs( "refresh" );

Jquery mobile snap.js is not working if using data-prefetch="true"

Hi i am new for jquery mobile . I need to add snap.js to my app in order to archive slide menu function.Afer googling i decide to use snap.js. https://github.com/jakiestfu/Snap.js/
Please see my code below
page1.html
<a class="ui-btn ui-corner-all ui-shadow" id='lnkSignIn' data-prefetch="true" href="page2.html">Sign in</a>
page2.html
<body>
<div data-role="page" data-title="Panel fixed positioning" id="landingPage" class="snap-content" >
<div data-role="header" data-position="fixed">
<div id="branding">Smart Realtor</div>
Menu
Logout
</div><!-- /header -->
<div role="main" class="ui-content jqm-content jqm-fullwidth">
<!-- coverstory -->
<div class="coverstory">
<img src="images/cover_story_img.jpg" alt="" class="scale-with-grid"/>
<div class="textbox">
<h1>Cover Story</h1>
<p>Latest pre-launch properties & new launch properties for sale in Kuala Lumpur & Selangor, Malaysia. Our site shows you new property launches for investment .....</p>
</div>
</div><!-- /coverstory -->
<div class="clear"></div>
<!-- main button -->
<div class="ui-grid-a">
<div class="ui-block-a">
<a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-icon-top ui-icon-calendar ui-nodisc-icon" id="calendarBtn" ><br>Appointment<br><br>
</a>
</div>
<div class="ui-block-b">
<a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-icon-top ui-icon-file-text-o ui-nodisc-icon" id="co-brokingBtn"><br>Co-broking<br>
Agreement</a>
</div>
</div>
<div class="ui-grid-a">
<div class="ui-block-a">
<a href="advertise_group.html" rel="external" class="ui-btn ui-corner-all ui-shadow ui-btn-icon-top ui-icon-comment ui-nodisc-icon" id="pagroupBtn" ><br>Property Advertisement<br>(Group)</a>
</div>
<div class="ui-block-b">
<br>Property Advertisement<br>(Agent)
</div>
</div>
</div><!-- /content -->
<div data-role="footer" data-title="fixed positioning" >
<div data-role="navbar" data-iconpos="top">
<ul>
<li>More Menu</li>
</ul>
</div>
</div>
</div>
<div id="menu" class="panel_bg snap-drawers">
<div class="snap-drawer snap-drawer-left">
<a href="profile.html"><div class="profile_wrapper">
<img src="images/profile_pic.jpg">
<h2>John Smith</h2>
<p>GCS Property Agent</p>
<p class="smalltxt">View Profiles</p>
</div> </a>
<div class="clear"></div>
<ul class="side_navi">
<li class="list-divider" >DISCOVER MORE</li>
<li><img src="css/png/bookmark.png" alt="" class="ui-li-icon ui-alt-icon"/>News & Noteworthy</li>
<li><img src="css/png/book.png" alt="" class="ui-li-icon ui-alt-icon"/>Customer Contact Lisiting</li>
<li><img src="css/png/laptop.png" alt="" class="ui-li-icon ui-alt-icon"/>Team Leader Monitoring</li>
<li><img src="css/png/home.png" alt="" class="ui-li-icon ui-alt-icon"/>Property Listing</li>
<li><img src="css/png/user.png" alt="" class="ui-li-icon ui-alt-icon"/>Tenant Listing</li>
<li><img src="css/png/calendar.png" alt="" class="ui-li-icon ui-alt-icon"/>Appointment Management</li>
<li><img src="css/png/usd.png" alt="" class="ui-li-icon ui-alt-icon"/>Home Loan Calculator</li>
<li class="list-divider" >Miscellaneous </li>
<li><img src="css/png/gears.png" alt="" class="ui-li-icon ui-alt-icon"/>Setting</li>
<li><img src="css/png/envelope.png" alt="" class="ui-li-icon ui-alt-icon"/>Feed Back</li>
</ul>
</div><!-- /panel -->
</div>
<script type="text/javascript" src="js/snap.js"></script>
<script type="text/javascript" src="js/demo.js"></script>
<script type="text/javascript">
var snapper = new Snap({
element: document.getElementById('landingPage'),
disable: 'right'
});
</script>
</body>
Everything if working fine if i change the hyperlink to use rel="external"
<a class="ui-btn ui-corner-all ui-shadow" id='lnkSignIn' rel="external" href="page2.html">Sign in</a>
Any solution if i want to use data-perfetch="true" inside my hperlink?

Develop Reference

JavaScript is the programming language of the Web.

Intel XDK template app and iFrames not working - javascript

Related

How to adjust padding of a menu using javascript according to screen size?

js css slider tutorial issue

Slideshow image blows up on page load

Refresh html that is loaded into iframe with jQuery tab

Jquery mobile snap.js is not working if using data-prefetch="true"

Categories

Resources