Need iFrame Content to Refresh (Loading Page Content Within Divs) - javascript

I am using Codiqa, a mobile prototyping tool, which creates div id layers with iframes inside them, and the menu links just go to that DIV id without any real page loading; so when the main Apps menu is initially loaded, all divs and their respective iframes load simultaneously, and then everything is navigable via div ids for page linking. The issue here is that I am dealing with content that could have been updated while navigating the menu, so if the content changes and you click on a menu item then the iframe doesn't refresh and load any new or updated content; I need to manually refresh my browser every time to see changes! How can I fix this? I was thinking of putting a javascript function on the menu link itself, but not sure how to go about that. Thanks in advance!
HTML
<ul data-role="listview" data-divider-theme="b" data-inset="true">
<li data-role="list-divider" role="heading">Apps</li>
<li data-theme="">
<a href="#page16" data-transition="flip">
Central Office Survey
</a>
</li>
<!-- <li data-theme="">
<a href="#page18" data-transition="flip">
Manhole
</a>
</li>-->
<li data-theme="">
<a href="#page21" data-transition="flip">
Prepping A
</a>
<!-- </li>
<li data-theme="c">
<a href="#page19" data-transition="flip">
Prepping A
</a>
-->
</li>
<li data-theme="c">
<a href="#page20" data-transition="flip">
Prepping Z
</a>
</li>
<li data-theme="c">
<a href="#page17" data-transition="flip">
Extracting
</a>
</li>
<li data-theme="c">
<a href="#page15" data-transition="flip">
Warehouse
</a>
</li>
<li class="sample">
<a href="#page22" data-transition="flip">
Sample
</a>
</li>
</ul>
<!-- Extracting -->
<div data-role="page" id="page17">
<div data-theme="a" data-role="header" id="frame_header">
Return To Main Menu
<h3>Extracting</h3>
</div>
<div data-role="content">
<iframe src="http://gp21.idmyasset.com/mobile/extraction/" id="Cable_Extraction_Worksheet"
name="Cable_Extraction_Worksheet" class="contentiframe"></iframe>
</div>
<div data-role="tabbar" data-iconpos="left" data-theme="a">
<ul>
<li>
<a href="http://gp21.idmyasset.com/mobile/extraction/" target="Cable_Extraction_Worksheet" data-transition="flip" data-theme="" data-icon="arrow-l">
Back
</a>
</li>
<li>
<a onclick="document.getElementById('Cable_Extraction_Worksheet').contentWindow.location.reload();" data-transition="none" data-theme="" data-icon="minus">
Reset
</a>
</li>
<li>
<a onclick="document.getElementById('Cable_Extraction_Worksheet').contentWindow.uploaddata();" data-transition="none" data-theme="" data-icon="check">
Submit
</a>
</li>
</ul>
</div>
</div>
<div data-role="page" id="page22">
<div data-theme="" data-role="header" id="frame_header">
Return To Main Menu
<h3>Sample</h3>
</div>
<div data-role="content">
<iframe src="http://gp21.idmyasset.com/mobile/sample/" name="sample" id="sample" class="contentiframe"></iframe>
<script type="text/javascript">
document.frames['sample'].location.reload(true);
</script>
</div>
<div data-role="tabbar" data-iconpos="left" data-theme="a">
<ul>
<li>
<a href="http://gp21.idmyasset.com/mobile/" target="_parent" data-transition="flip" data-theme="" data-icon="arrow-l">
Back
</a>
</li>
<li>
<a onclick="document.getElementById('sample').contentWindow.location.reload();" data-transition="none" data-icon="minus">
Reset
</a>
</li>
<li>
<!--Use Submit Validation Function for iFrame Form-->
<a onclick="sample.submitForm();" data-transition="flip" data-icon="check">
Submit
</a>
</li>
</ul>
</div>
</div>

Cool you used Codiqa, I made it :)
You can do what you are requesting by listening for the pageshow event on that page and triggering the refresh:
$('#page22').on('pageshow', function() {
$('#sample').attr("src", $('#sample').attr("src"));
});
We recently added support to change the page id, so you can customize it now.

Related

How to click a JS link with Selenium in C#

I am new to Selenium and trying to build a project with it. I need to learn how to click a JS link. There are many items listed by pages. Pagination is done by JS, unfortunately. here is an example...
<ul class="pagination museo-700">
<li class="first hidden disabled">
First
</li>
<li class="prev disabled">
<a class="arrow" href="#">
<img src="/areas/site/Content/images/page/pagination-prev-arrow.png">
</a>
</li>
<li class="page active">
1
</li>
<li class="page">
2
</li>
<li class="page">
3
</li>
<li class="page">
4
</li>
<li class="page">
5
</li>
<li class="next">
<a class="arrow" href="#">
<img src="/areas/site/Content/images/page/pagination-next-arrow.png">
</a>
</li>
<li class="last hidden">
Last
</li>
</ul>
I would like to click pages 1., 2., 3. ,4. and 5. pages above. Please give me a clue
You could first locate the pager with a CSS selector and then each link by link text:
driver.FindElement(By.CssSelector("ul.pagination"))
.FindElement(By.LinkText("1")).Click();
You could also use an XPath:
driver.FindElement(By.XPath("//a[#href='#'][text()='1']")).Click();
code not tested but I feel like they should work
.page > a:contains("1")
.page > a:contains("2")
.page > a:contains("3")
.page > a:contains("4")
.page > a:contains("5")
or
//li[contains(#class, 'page')]/a[text()='1']

slides 2 divs at the same time jQuery

Im planning on slidding 2 divs at the same time ,each one in opposite directions.How can i do this?
this is what i have tried
$("button").click(function () {
$(".cuadro").animate({ left: '250px', queue: false });
$("#R").animate({ left: '-250px', queue: false });
});
also if it's possible i can this to happend when my services tab is active instead of when the person click on the button.
<section id="services" class="content-section text-center">
<div class="services-section">
<div class="container">
<div class="col-lg-8 col-lg-offset-2">
<h2><span class="auto-style2">Services</span></h2>
<h2> </h2>
<h2><strong>Technlogies and lenguages used for software developing<br />
</strong></h2>
<p class="btn btn-default btn-lg">Download Resume</p>
<p> </p>
<button id="serv">serv</button>
</div>
<div class="col-lg-9">
<div class="cuadro" id="L"><h2 class="leng">C#</h2></div>
</div>
<div class="col-lg-3">
<div class="cuadro" id="R"><h2 class="leng">JavaScript</h2></div>
</div>
</div>
</div>
</section>
this is my nav bar
<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
<ul class="nav navbar-nav" id="tabs">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li>
HOME
</li>
<li>
<a class="page-scroll" href="#about">ABOUT</a>
</li>
<li>
<a class="page-scroll" href="#download">RESUME</a>
</li>
<li>
<a class="page-scroll" id="serTab" href="#services">SERVICES</a>
</li>
<li>
<a class="page-scroll" href="#contact">CONTACT</a>
</li>
</ul>
</div>
This should do it:
$('#tabs').tabs();
$('#serTab').click(function(){
$("#R").animate({left:'-=250px'});
$("#L").animate({left:'+=250px'});
});
Note that id="tabs" must be moved from the <ul> to its parent <div>
If that doesn't work, you may need event delegation. Try this:
$(document).on('click', '#serTab', function(){
$("#R").animate({left:'-=250px'});
$("#L").animate({left:'+=250px'});
});
Reference:
http://davidwalsh.name/event-delegate

Slippry slider images navigate to page other than defined href=""

Here is my page:http://www.candoor.ca/index-1.html
The slider I used is slippry slider. Can be downloaded at http://slippry.com
If I click the banner image it loads about us page while in HTML I've this:
<ul id="slippry-demo">
<li>
<a href="/cat_name/Commercial-Garage-Doors.aspx">
<img src="img/commercial-industrial-doors.jpg" alt="Commercial and Industrial Doors">
</a>
</li>
<li>
<a href="/cat_name/Loading-Dock-Products.aspx">
<img src="img/loading-dock-products.jpg" alt="Loading Dock Products and Equipment">
</a>
</li>
<li>
<a href="/cat_name/Roll-Up-Shutters.aspx">
<img src="img/grilles-shutters.jpg" alt="Shutters and Grilles">
</a>
</li>
<li>
<a href="/cat_name/Residential-Garage-Doors.aspx">
<img src="img/residential-garage-doors.jpg" alt="Residential Garage Doors">
</a>
</li>
<li>
<a href="/cat_name/Commercial-Door-Operators.aspx">
<img src="img/garage-gate-operators.jpg" alt="Commercial Operators, Garage and Gate Openers">
</a>
</li>
<li>
<a href="/about-candoor.aspx">
<img src="img/authorized-distributor.jpg" alt="Authorized Distributor">
</a>
</li>
</ul>
without the empty div you have added it will work fine try this :
<ul id="slippry-demo">
<li>
</li>
<li>
</li>
<li>
</li>
<li>
<img src="img/residential-garage-doors.jpg" alt="Residential Garage Doors">
</li>
<li>
</li>
<li>
</li>
</ul>

Issue Creating/Displaying a HTML5 Breadcrumb

I'm trying to create a breadcrumb for my web application.
I have the following navigation menu within my .JSP file:
<nav class="nav">
<ul class="wrap">
<li class="menu-nav--home"><span class="icon-home"></span></li>
<ul>
<li>Business</li>
<li>Search</li>
<li>Search Deatils</li>
<li>Change Records</li>
<li>Remove</li>
<li>Order Deatils</li>
<li>Checkout</li>
</ul>
</li>
</ul>
</nav>
..And i have attempted to create a breadcrumb using HTML5 Microdata as per below:
<div class="breadcrumb">
<div class="wrap">
<ol class="menu menu--hor">
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="/home" itemprop="url">
<span itemprop="title">Home</span>
</a>
</li>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="/business" itemprop="url">
<span itemprop="title">Business</span>
</a>
</li>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="/search" itemprop="url">
<span itemprop="title">Search</span>
</a>
</li>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="/details" itemprop="url">
<span itemprop="title">Details</span>
</a>
</li>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="/update" itemprop="url">
<span itemprop="title">Update</span>
</a>
</li>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="/delete" itemprop="url">
<span itemprop="title">Delete</span>
</a>
</li>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="/order" itemprop="url">
<span itemprop="title">New Order</span>
</a>
</li>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="/checkout" itemprop="url">
<span itemprop="title">Checkout</span>
</a>
</li>
</ol>
</div>
</div>
My issue is, all items on the breadcrumb are being displayed, when, i only want the current location to be displayed.
Current display:
Home Business Search Details Update Delete New Order Checkout
Preferred Display (when on Checkout page, for example)
Home > Checkout
Any help is appreciated.
Thanks
UPDATE - 24/07/13
So, after a bit of Googling, it was clear some JS was missing, here is a first attempt.
// Bread crumb script /////////////
var path = "";
var href = document.location.href;
var s = href.split("/");
for (var i=2;i<(s.length-1);i++) {
path+=""+s[i]+" / ";
}
i=s.length-1;
path+=""+s[i]+"";
var url = window.location.protocol + "//" + path;
document.writeln(url);
Which does appear to retrieve the current page/site.. however, does not place it below my Nav menu but rather in a new page that seems to crash my site.
Do it need some form of .append on a new DIV ?

iPad WebApp that simulates swipe slider

I'm developing a full-screen web app for an iPad that will have a series of images on screen in a slider whereby the user will be able to scroll between them and then click on one.
Here is an example image of how it would look:
There are plenty of jQuery-based sliders out-there but all require the use of a user clicking some form of button. What I want to do is replicate it so that the user would swipe the screen to move between the different images.
Here is some example markup:
<ul id="magazine-slider">
<li>
<div class="image">
<img src="magazine-cover-jan.png" width="640" height="640" />
</div>
<div class="meta">
<h3>Magazine Title</h3>
<h4>January 2010</h4>
</div>
<ul class="options">
<li><a title="Delete" href="#">Delete</a></li>
<li><a title="View" href="#">View</a></li>
</ul>
</li>
<li>
<div class="image">
<img src="magazine-cover-feb.png" width="640" height="640" />
</div>
<div class="meta">
<h3>Magazine Title</h3>
<h4>February 2010</h4>
</div>
<ul class="options">
<li><a title="Delete" href="#">Delete</a></li>
<li><a title="View" href="#">View</a></li>
</ul>
</li>
<li>
<div class="image">
<img src="magazine-cover-mar.png" width="640" height="640" />
</div>
<div class="meta">
<h3>Magazine Title</h3>
<h4>March 2010</h4>
</div>
<ul class="options">
<li><a title="Delete" href="#">Delete</a></li>
<li><a title="View" href="#">View</a></li>
</ul>
</li>
</ul>
<ul id="magazine-slider-pagination">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
Can anyone help? Thanks
You have to intercept touchStart/Move/End events
( http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariWebContent/HandlingEvents/HandlingEvents.html )...
take a look here:
http://padilicious.com/code/touchevents/
and here for a pre-built component:
iPhone / iPad / iPod swipe events javascript
You will probably need a touch-based mobile framework to handle the touches/swipe.
One that comes to mind is Sencha.com

Categories