I have a simple website that is running on a raspberry Pi chriminium in kiosk mode.
The page has two parts;
Page-1.php and Page2.php
Each page has a redirect to the other with a meta tag refresh so it rotates.
I want to remove the white flash that shows between page loads because it really ruins the look of the page.
Can someone suggest a way? I tried adding
<meta http-equiv="Page-Enter" content="blendTrans(Duration=10.0)">
to the headers but the white flash is still there.
Thanks in advance.
Got it figured out with Jquery:
function toggle_contents() {
$('#page1').toggle("slow", "linear");
$('#page2').toggle("slow", "linear");
setTimeout(function(){toggle_contents()}, 3000)
}
toggle_contents();
<div id="container">
<div id="page1">This is page 1 contents.</div>
<div id="page2" style="display:none;">This is page 2 contents.</div>
</div>
http://jsfiddle.net/mxwv85px/1/
Related
I am making phonegap application using Onsen-UI. In that,I made a signup page. Now whenever I am trying to scroll the screen, whole body of page is scrolling. I want a particular division in a body that should scroll only. I have app Logo above the signup page and Logo is in the body part. So that shouldn't be scrolled. Only List div should be scrolled.
You can try using the <ons-scroller> directive:
<ons-scroller style="height: 200px">
<p>I am scrollable</p>
</ons-scroller>
I made a simple example: http://codepen.io/argelius/pen/dPeKOB
This option works to me:
<ons-page>
Toolbar here
<div class="background"></div>
<div class="content">
Scrollable content here
</div>
Fixed content here
</ons-page>
from: https://onsen.io/v2/api/js/ons-page.html
I would like to use turbolinks in a rails 4 application but not have it replace the entire <body> tag. Instead I would like to specify a tag/selector for turbolinks to refresh.
Something like...
<body>
<div class="turbolinks-refreshes-this">
Some content that is replaced whenever a link is clicked.
</div>
<div class="turblinks-does-not-refresh-this">
Some content that remains even if a link is clicked.
</div>
</body>
My guess is you would need to fork turbolinks to add this functionality but thought I'd throw it out there to see if anyone else has tried to do this.
Have you looked at pjax? It's very similar to Turbolinks (and gets a mention in the Turbolinks README) but lets you specify a target container. Here's a Railscast that shows how to use it in a Rails app.
Here's a (slightly modified) excerpt from the pjax README:
<h1>My Site</h1>
<div class="container" id="pjax-container">
Go to next page.
</div>
We want pjax to grab the url /page/2 then replace #pjax-container
with whatever it gets back. No styles or scripts will be reloaded and
even the h1 can stay the same - we just want to change the
#pjax-container element.
We do this by telling pjax to listen on a tags and use
#pjax-container as the target container:
$(document).pjax('a', '#pjax-container')
Now when someone in a pjax-compatible browser clicks "next page" the
content of #pjax-container will be replaced with the body of
/page/2.
I use the following code to display a youtube video inside a reveal-box
<a href='#' data-reveal-id='myModal1'><img alt="Some text" src="images/logo.png" class="large-6 medium-6 small-6 columns" /></a>
<div id="myModal1" class="reveal-modal small" data-reveal>
<div class='flex-video'>
<iframe src="http://www.youtube.com/embed/dQw4w9WgXcQ?rel=0" class='no-border' allowfullscreen></iframe>
</div>
<a class="close-reveal-modal">×</a>
</div>
but this works only once...
When I open the box, it shows the video perfectly, but when I close it, and re-open it, I only get a white area.
It seems like the flex-video is the problem; when I remove this div, so I put the iframe directly into the reveal-modal div, it works normally, but then obviously the video doesn't scale on different devices
It always worked fine in foundation 4, but now in foundation 5 it does this.
Please help.
Thank you
Give your reveal modal an ID (i.e. #myModal)
Go into your foundation.reveal.js file and look for the line of code that reads:
close_video : function (e) {
var video = $(this).find('.flex-video'),
iframe = video.find('#myModal iframe');
As you can see, in the third line of code I have added the id of #myModal
Open foundation.min.js and find (command+f) the two iframe references, and add your ID (#myModal) to both
I have the following HTML page which works perfectly fine as a HTML page; however when I try put it into APEX by entering the code into a Region it just goes all wrong.
When the submit button is pressed, it takes the user to a new page with the IFRAME on rather than just refreshing the page as it does in a HTML page. The other issue is the aesthetics, it looks perfect in Firefox but in IE the IFRAME is half way down the page. When investigating in Firebug I see no attributes which would cause this.
Is there a method of embedding a HTML page into an APEX form page?
<!DOCTYPE html>
<html>
<body>
<head>
</head>
<form action="http://ukserver/orderlist.asp" target="orderResults">
Enter Order Number: <input id="ord" type="text" name="ord" maxlength="50" size="20"/>
<input type="submit" value="Submit"/>
</form>
<iframe id="orderResults" name="orderResults" src="blank.html" width="100%" height="50%">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
This is the page in FireFox which as you can see looks ok.
This is the page in IE which is incorrect
Update:
The HTML page seems to work perfectly in the HTML header of the APEX page but its above my tabs and region which isnt the place where i want it. I tried to find an order (1112) and it returned the following 'File not found' which is correct.
Hi Tony, I created another IFRAME and i guess I'm half way there. I now just have to get the HTML form working, please see below:
It sounds like you have a PDF file in a folder on a server somewhere for each order. If the names of the files are predictable given the order number then you should be able to generate a link something like this:
1) Create an item to accept the order number e.g. P12_ORDER_NUMBER.
2) Create a button to submit the page
3) Create a report that displays when P12_ORDER_NUMBER is not null and selects:
select '//server/path/fileprefix' || :P12_ORDER_NUMBER || '.pdf' as url
from dual;
4) Convert the report column into a link via the column attributes so that clicking on it launches the file.
I am having issue with loading Facebook Profile Images in my application. I get list of my friends fromt the graph API and then display the relevant Friend Info and their public profile images
My HTML is as below.
<div id = "profile_picture" style="float:left; width:100px;height: 100px" >
<img src="https://graph.facebook.com/{{providerUserId}}/picture?width=100&height=100"/>
</div>
<div id="user_basic_info" style="float:left;margin-left:14px;">
<div id="name" style="font-size:16px;font-weight:bold;margin-bottom:6px;">{{name}}</div>
<div id="email" style="margin-bottom:6px;width:400px;">{{email}}</div>
<div id="address"></div>
</div>
The {{}} are Mustache templates which get populated via the model.
For some reason the images don't load up in Chrome; but work fine in Chrome Canary, Firefox, Safari.
It doesn't make a difference if I pass in hardcoded userId also.
Any guidance??
Check to see if you have any chrome plugins causing the issue by opening the url in incognito mode, that is assuming you have all the extensions disabled in that mode.
I noticed that the disconnect extension hid the images as you described.