I need to embed a marketo form onto a github page, essentially host it there, then iframe it into another piece of software I'm using. The iframing in afterwards is striaght forward as the software does that. But I cant work out how to actually embed it on github.
Go to the Marketo form
Grab the form embed code
Grab the munchkin tracking code too. Not 100% essential but needed if you want web page tracking on the Github page the form will live on.
Drop code in a Div section.
From my code example you could replace 132 (with your actual form ID)
And replace 111-AAA-111 wit your Munchkin ID.
Example
<div data-role="page" id="page_1">
<div data-role="header">
<h1>Test form. Embedded</h1>
</div>
<div data-role="main" class="ui-content">
<script src="//app-abj.marketo.com/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm_123"></form>
<script>MktoForms2.loadForm("//app-abj.marketo.com", "111-AAA-111", 123);</script>
</div>
<div data-role="footer">
<h1>Footer: text</h1>
</div>
</div>
Related
I am developing using jQuery mobile and it has a multipage template as below.
I feel that writing html content inside the same html is bloated.
As such, i would like to separate the content in different html and include standalone html page. It should be mobile browser proven. What is the best practice on this and how it could be done?
Note: I do not expect server side scripting (eg: PHP) to solve this problem. It should be done solely on client side without any templating engine. Something like angularJS ng-include.
Sample of what i expect
<div data-role="page" id="foo1">
<html-include src="foo1.html"></html-include>
</div>
Mobile html multipage
<div data-role="page" id="foo1">
<!-- Content 1 here -->
</div>
<div data-role="page" id="foo2">
<!-- Content 2 here -->
</div>
<div data-role="page" id="foo3">
<!-- Content 3 here -->
</div>
<div data-role="page" id="foo1" data-url="foo1.html">
</div>
And use javascript like so:
$('[data-url]').each(function (k,elem){
$(elem).load(elem.data('url'));
});
This will find all elements that have data-url as attribute, and load that page in AJAX, takes the html received and put in it the corresponding html element.
I am trying to achieve the same effect as this website.
You will notice that the url changes and the content changes when you scroll, however when I inspect the requests being made in the console I cannot see a new AJAX request being made to get the new html content. I cannot figure out how this content is being loaded.
It appears the "page change" is just a javascript scrolling effect, and the javascript also changes the URL. If you notice, go to the about section and refresh that url, and the page isn't found.
Any guidance on how this can be achieved would be greatly appreciated. I have read through the javascript source code on the page, but as it is minified I am still struggling to understand how it all works. Perhaps I should be using html5's history state.
My current project is set up like this:
The index.html file looks like this:
<body>
<header>
<img src="homeLogo.png">
</header>
<div id="scene">
<h3>Home page</h3>
<div class="bgImage"></div>
</div>
<footer>
Footer
</footer>
</body>
the tress/index.html file looks like this:
<body>
<header>
<img src="homeLogo.png">
</header>
<div id="scene">
<h3>Trees</h3>
<div class="bgImage trees"></div>
</div>
</div>
<footer>
Footer
</footer>
</body>
urban/index.html is the same as tress/index.html apart from the div within the div with id scene.
Based on how the project is set up I am wondering how I can update the content page with the different html files.
Take a look at the History API, specifically at the function:
window.history.pushState({ your_data:"whatever"}, "title", newUrl);
https://developer.mozilla.org/en-US/docs/Web/API/History_API
There are excellent third party libraries that can help you easily build a cross-browser solution, although modern browsers follow the standard decently.
The rest of your problem is just dynamically adding content, that may come from an ajax request or not.
I'm using OnePageScroll.js for my Drupal website but somehow the Javascript file isn't doing anything. Everything is perfectly imported, even the .js file. I put an alert box in it and it works but somehow he doesn't do the rest.
Link to OnePageScroll.js
<section class="page1">
<div class="page_container">
<h1>One Page Scroll</h1>
</div>
</section>
<section class="page2">
<div class="page_container">
<h1>One Page Scroll2</h1>
</div>
</section>
When I open it in a simple .html file then I have result but when I upload it to my server to my Drupal website then it doesn't do anything. I noticed the JS file doesn't add the extra class to certain divs..
edit:
The jQuery files I added:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
I would say you have not linket the jQuery files correctly. Plain alert works even if you do not have jQuery linked because it is plain javascript. Try to alert the following in order to find out:
alert($("div:first").text());
Hi I have suppose two html files as index.html and test.html. In index.html I have one button on click of that button I call test.html. In test.html I am displaying a table. Now my index.html is like:
<div data-role="page" id="home" data-theme="d">
<div data-role="header" align="center">
Back
<h1>MySite.com</h1>
Menu
</div>
<div data-role="content" >
i ndex
<ul data-role="listview" data-inset="true">
<li> Order Book </li>
</ul>
</div>
</div>
Now onclick of button and on list I go to test.html, and table is displayed correctly. In my test.html there is a header and in that I have back button as:
<div data-role="header" align="center">
Back
<h1>Test.com</h1>
Menu
</div>
Now when I click on back button It does not go to index.html. If I remove data-ajax="false" from index.html then back button of test.html works fine, but now in test.html I am using .css file for my table and here now effect of that .css file is not applied. IF I use data-ajax="false" in index.html then on Test.html table is properly drawn (means my .css file load correctly). How I can get proper back button and table at same time.
Any suggestion will be appreciated. Thanks in advance.
When you use data-jax="false" you are disabling jquery mobile's Ajax navigation, therefore the page you are linking to does not have access to the previous page in the DOM.
To have the back button on the second page, you need to hard-code it into the header, using a traditional <a href="..." link, or code it to pull the previous page from your DOM.
I am using the Web Application Toolkit for Mobile Web Applications to develop a simple website (which allows to update the users) for Windows 7 Mobile and iPhone using asp.net MVC.
I am using the ibbdemo as simulator to test for iPhone.
I have been facing few issues with this.
Javascript/Jquery is not working (I have tried to set the textbox value in document.ready in a plain page with just a textbox)
Form Collection of radio button returns all the values in comma separated, not only the selected one.
Edit:
I am trying to do the following after the admin logs in to website:
Show links like Active Users and Inactive Users(Main/Index).
Once the Admin clicks the Active Users link, then the list of active users will be shown (User/Active)
On Clicking the Name of the user, the page to update the User details like Name, Sex, Email,... will be shown (User/Detail)
The javascript works till the 1st step, from 2nd step, it doesn't do anything. I have tried adding a dummy textbox in (Main/Index) page and set the value in document.ready, it worked. But when i do the same in (User/Active) or (User/Detail), the javascript/jquery doesn't seem to work. To Test, I have copied the first page content to all of them, but still it works in first page but not in rest. I am puzzled with this issue.
Here is the html that looks in (Main/Index):
<%# Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Mobile/iPhone/Site.Master"
Inherits="System.Web.Mvc.ViewPage" %>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<div class="toolbar">
<h1 id="pageTitle">
</h1>
<a id="backButton" class="button" href="#"></a>
</div>
<form id="dashboardForm" action="Main/Index" method="get" title="Dashboard" class="panel"
selected="true">
<fieldset>
<div class="row">
<label>
Dummy:</label>
<%= Html.TextBox("dummyText") %>
</div>
<div class="row">
<label>
Users: Add</label>
</div>
<div class="row">
Active Users Inactive Users
</div>
</fieldset>
</form>
<script type="text/javascript" language="javascript">
$(function() {
$("#dummyText").val('test');
});
</script>
</asp:Content>
Is there any work around or did anyone face the same problem and found a solution for this?
Or is there any another toolikit for developing mobile apps using asp.net MVC, please suggest
There is a mode in Safari(the browser from Apple), that lets you emulate Mobile Safari, the browser of the iPhone.
In the menus, find Develop -> User Agent and choose the browser you want to emulate.