I want to call static block in jquery lightbox. I am showing a lightbox on hamoe page automatically after some seconds. I want to call a static block in that light box so that admin can be able to change content of lightbox by changing the static block using editor.
So far I have done this
<a id="pop" href="{{block type=”cms/block” block_id=”social”}}"></a>
And called it in jquery fancybox. But it shows a 404 page in lightbox and social block embedded in that!
You can achieve this by adding a new page and set layout empty from design tab.
Once you have page, just call it in fancy box like this.
<a href='<?php echo $this->getBaseUrl(). you_page_identifie?>' class='fancybox'><?php echo $this->__('Fancy box content from admin cms') ?></a>
Related
Right now I am developing PhoneGap app all functionality are successfully done which what client need but in my PhoneGap app I am using multiple html pages on click of one button index.html it will naviagte to another html but client need silder look when naviagte one page to another page..
Code is:
<li><a onclick="callFestvialinfo()"><img src="images/festival_info_button.png" width="123" height="123" alt="" /></a></li>
function callFestvialinfo()
{
window.location = "festival_info.html";
}
it will navigate festival_info.html normally but client need silder look from index to festival_info.html and festival_info.html to index when onclick back.
You can check this out. A very light weight solution to page transitions.
http://www.fasw.ws/faswwp/non-jquery-page-transitions-lightweight/
I'm building an offline tablet/phone app in HTML5 to collect data remotely in the field where there are no cell towers. It uses the offline application cache manifest to save the pages into the browser. I'm attempting to get it to work in Safari and Android.
Currently there are a multiple separate web pages for my site (index.html, load.html and sync.html). I want to be able to load each page in and run different javascript when each page has loaded.
Originally I had a main index page (which acted as the bootstrap for the application) and was using jQuery's .load() function to load the different page files (only snippets of html) into the main display div when a menu button was clicked. This worked pretty well with the iPhone. However when trying it on Android and the site was already cached and the device was in flight mode so it can't connect to the server, the page would fail silently to load in the HTML from the external page for some reason so I'd get a blank screen. I narrowed it down to jQuery's .load() function failing in Android when loading pages from the cache.
So then I tried keeping the individual pages separate and having all the HTML, JavaScript, CSS includes and header code mirrored on each page (not very efficient). So each page could run standalone by itself. This worked ok in Android and iPhone in the web browser when following a simple href link to load the other pages. However when I go into app mode on the iPhone (i.e. you save the webpage to the home screen so it appears as an actual app icon then you run it from there it appears almost fullscreen apart from the status bar) then click on a menu icon to load sync.html for example it opens the page in Safari instead of staying within the fullscreen 'app' mode.
Is there a way to open separate web pages that should be cached within the fullscreen 'app' mode on iPhone? I don't want the other pages loading up Safari as there's less screen size.
The only other method I can think of is having all the html snippets hidden in divs on the main index page, then showing and hiding the divs depending on which menu button is clicked. This may look cleaner and be faster but just wondering if there's a better way to do it?
For now the cleanest solution I could come up with was this:
HTML:
<section id="pageContent">
<div id="homePage" class="hidden">
<?php include_once 'home.html'; ?>
</div>
<div id="loadPage" class="hidden">
<?php include_once 'load.html'; ?>
</div>
<div id="syncPage" class="hidden">
<?php include_once 'sync.html'; ?>
</div>
</section>
CSS:
.hidden {
display: none;
}
This lets you keep your content pages in separate files. And because the html in those files is all included into the index page on page load all the html gets cached as well. Simply a matter of hiding and showing the various pages now.
Then I used some simple jQuery to show and hide each page and set up some simple JavaScript functions to show each individual page. E.g.
function showSyncPage()
{
$('#pageContent').children().hide(); // Hide all the other divs (other pages)
$('#syncPage').show(); // Show the sync page
}
Then also add those function calls into onclick handlers on your buttons/links to open each page. E.g.
<a class="button" onclick="showSyncPage()">Sync</a>
Now you've got a working navigation system that loads all the pages in iPhone/Android and even in iPhone 'app' mode without loading Safari.
I'm trying to figure out how to validate a form opened using nyroModal.
The page is being opened as below on click of a button:
$(function() {
$('.btnedit').click(function() {
$.nmManual('form_page.php);
});
});
On the form that opens up, I have a few fields that are mandatory and a cancel & submit button.
<a class="nyroModalClose button" href="#" id="btn_submit">Submit</a>
On clicking of the submit button, I want to make sure the mandatory fields have value. If no, an error message should be displayed & the modal window should not close.
I'm trying to use the jquery validation plugin, but without success. The modal window always closes irrespective of the validation scripts.
I haven't found much info regarding form validation in a modal window. Is this not a preferred approach?
Thanks in advance.
I'm not able to help you about the jquery validation plugin in a modal window, but I know that using the instruction $.nmManual in that way, the form will not be placed inside the iframe tag, and if I remember correctly the content of new page will be added without header and body tags, so in a word incorrectly. I guess this can produce no validation.
To successfully open an iframe you need to use filters as described here:
Open iframe manually in nyroModal?
I hope this can help you.
I am building a web page and I have included Facebook's Like button. Works great in all browsers but not in Firefox. When clicked in Firefox, it creates an endless loop of opening and closing a facebook login window. This is a known issue that Facebook isn't looking like it will correct anytime soon.
Can anyone tell me what code I might write to hide the like button (or a div containing the like button) from Firefox only? I've never written code to detect a browser and then have my site function a certain way. Not a javascript guru here. Thanks!
You can do this using the navigator javascript object, but it sounds like you have deeper problems if the facebook like button is causing an endless loop of window loads. You most probably have other errors in your code. The button should work fine in firefox.
Here's how to text for firefox using the navigator object,
if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)){
// user using firefox
}
This code parses the userAgent string, the string that defines the user's browser, of the navigator object. It looks for a string of the format Firefox/x.x or Firefox x.x.
This should work for you
<div id="likeDiv">
my div
</div>
<script>
if (navigator.userAgent.indexOf("Firefox")!=-1)
{
// Remove the element from the dom
var Node1 = document.getElementById('likeDiv');
Node1.removeChild(Node1.childNodes[0]);
}
</script>
Hope this helps
I've been tasked to develop a fairly simple reservation console for a hotel. It features two <form>s which have corresponding tabs, the active tab applies to the default form and the inactive tab applies to the hidden form. The tabs are clickable and would enable/disable their respective forms.
So far what I am planning is having embedded style and script elements below my main HTML.
Question 1.1: For the HTML, can I just go ahead and straight up do what I want, or am I restricted? Do I have to use any facebook specific elements for plain old stuff like forms?
Here's an example of a snippet I would use:
<ul>
<li id="tab">text</li>
<li id="tab2">text</li>
</ul>
<form id="hidden">blah</form>
<script>
(function() {
var tab = document.getElementById('tab'),
tab2 = document.getElementById('tab2');
tab2.onclick = function() {
document.getElementById('hidden').style.display='';
return false;
}
})();
</script>
<style> #hidden { display:none; }</style>
Question 1.2: Are there pitfalls with this code? Is it bad to rely on private namespacing / anonymous functions because of the way Facebook converts the markup and js? Should I be using inline event handlers such as onclick for event based behavior because it would be easier for the Facebook "converter" to parse it and "recompile" it?
Other background info:
This widget does not have any sort of
share buttons, login, pictures. It
pretty much will consist of an
arrival/departure textfield, dropdowns
for adults/kids, and an submit button.
This goes for both forms.
The main thing to know about FBML is that Facebook has deprecated FBML pages in favor of iframe pages. The good thing about using the new iframe pages is that you are pretty much able to do whatever you want on your page in terms of css, html, and javascript. There were a lot of gotchas as you were asking about with FBML but a majority of those have gone away.