This two question is happend in the same html.
I have a .pde file will detect user mouse click, and there are few object in it, if the user click on the first one, I will get '1' as output and so on. And I have create a var in javascript to store the output, but how can I change the var value in processingjs?
How can I load different txt into a div in html depends on the var that return by processing js? When I done part one, and depends on the user click on different object, I want to load different txt in to the div. (e.g if object 2 is clicked, text2.txt will be loaded in div)
1: you don't need a special JavaScript var for this, you can track it in you sketch until you need the result on your page.
2: make your sketch tell javascript what to do when you click - see http://processingjs.org/articles/PomaxGuide.html#interface on how to make a sketch and javascript talk to each other while keeping your code runnable on both the web and in the Processing IDE
Related
Is that anyway to Modify firefox (or other browser) element with Watin/VB.Net after it open?
For example, I have a blank html page, then i open that page with Watin. Because its blank so no element loader. Then i want to add element to that page (form or link or image). Is that possible?
Or is it possible to done with memory editing? or maybe javascript?
so far the closest thing that i can find is this javascript
<button onclick="openTab()">Open</button>
<button onclick="closeTab()">Close</button>
<script>
var TAB;
function openTab() {
TAB = window.open("", "TAB");
TAB.document.write("<p>hi</p>")
}
function closeTab() {
TAB.close();
}
</script>
but its work change the elemnt of its own page, if use another URL its not work, and also its not vb. net XD
The following is functional code to modify a web page (any web page) using WatiN. You will be modifying the local copy you have locally, not the one on the server, of course. You can go as crazy as you want but you need to be more specific on what you want to achieve:
var browser = new IE();
browser.GoTo("about:blank");
browser.WaitForComplete();
browser.Eval(#"document.write('This is new text on the web page<br>')");
browser.Eval(#"var buttonnode= document.createElement('input');");
browser.Eval(#"buttonnode.setAttribute('type','button');");
browser.Eval(#"buttonnode.setAttribute('name','sal');");
browser.Eval(#"buttonnode.setAttribute('value','New Button');");
browser.Eval(#"document.body.appendChild(buttonnode);");
I'm working in selenium with Firefox browser.
The Html code shown in View Source (CTRL+U) is different from the html code i see when inspecting the elements in Firefox.
When i run the driver.getPageSource() i only get the View source (CTRL + U) codes.
Is there is any way to access the Inspect element code instead of View source code?
I think your question is answered here.
The View Source html is what is sent by the server. I think of it as compile time html, or the initial state of the DOM.
The Inspect Element html could have been updated by ajax responses or javascript so will not necessarily be the same. I think of it as runtime html, or the current state of the DOM.
The GetAttribute() method queries the current DOM element state. You can return a particular html attribute value directly
webElement.GetAttribute("class")
or get the whole html string.
webElement.GetAttribute("innerHTML")
There are some fundamental difference between the markup shown through View Source i.e. using ctrl + U and the markup shown through Inspector i.e. using ctrl + shift + I.
Both the methods are two different browser features which allows users to look at the HTML of the webpage. However, the main difference is the View Source shows the HTML that was delivered from the web server (application server) to the browser. Where as, Inspect element is a Developer Tool e.g. Chrome DevTools to look at the state of the DOM Tree after the browser has applied its error correction and after any Javascript have manipulated the DOM. Some of those activities may include:
HTML error correction by the browser
HTML normalization by the browser
DOM manipulation by Javascript
In short, using View Source you will observe the Javascript but not the HTML. The HTML errors may get corrected in the Inspect Elements tool. As an example:
With in View Source you may observe:
<h1>The title</h2>
Whereas through Inspect Element that would have corrected as:
<h1>The title</h1>
getPageSource() always returns the markup obtained through View Source.
I have an MVC/angularJS page with a button, the button needs to call code to process the current page and proceed to the next step in the application, but they want the button text to be a/b testable with different variations. I'm new to Sitecore so am struggling to know the best way of doing things.
I thought of having a simple text component/template which just has a single line text property, but if I add that to the page template then it doesn't seem a/b testable because when you click on the test option it asks you to select content. Whereas the content was text they entered as part of the page template.
The only way I know of making a/b testable content so that they can click on the page in page editor and choose to select content / add test variation. I wouldn't add the button to the placeholder as it needs to call specific angular code and always be there, but should I be adding a placeholder where the text is? It seems like overkill to have to define a placeholder there, define a rendering, create a partial view, define placeholder settings to limit it to the simple text component, and then hope they don't try adding multiple items to the placeholder.
I would make a separate template (ie with the text field for your button) to represent your form, then either create the two test variation items as children of your page, or maybe place them in a shared components folder outside of your 'home' node.
EDIT
In order to move your form component into a new A/B testable component you would need to create a new Sublayout in Sitecore, then create a new ascx control for the sublayout. In the Page_Load handler of this control, you would use the following code to retrieve the datasource of the sublayout:
//assume you have a button on your usercontrol called btnSubmit
//assume your template has a single-line text field called 'SubmitButtonText'
Guid dataSourceId;
Sitecore.Data.Items.Item dataSource;
if (Guid.TryParse(sublayout.DataSource, out dataSourceId))
{
dataSource = Sitecore.Context.Database.GetItem(new ID(dataSourceId));
btnSubmit.Text = dataSource["SubmitButtonText"];
}
So I created a new template which just had a single line of text as a field, and added a content item in a shared data node.
In my partial view:
#model Digital.Models.SimpleTextItem
<button ....>
<span class="hidden-xs">#Model.SimpleText_Value<br></span>
</button>
In my main page - I was trying to statically bind it so that they could only change content rather than add new controls to the placeholder, but that only worked if I specified the datasource in this page.
Using a rendering, and in the page layout adding the rendering to the placeholder with a specified data source:
#Html.Sitecore().Placeholder("PremiumQuoteApplyNowPlaceHolder")
Not sure if it was the best approach but it achieves what I need it to.
A/B testing could be applied only to controls(XSLT renderings, sublayouts, action controller renderings, view renderings). If you want to make A/B testing only for button then you should create additional control for it as you did.
Technical details for MVC: A/B testing is applied on mvc.customizeRendering pipeline where rendering arguments are processed. This pipeline operates on renderings level. It means that you are not able to create A/B testing for particular field(button) without your own customization.
I can't solve my problem, and I hope somebody knows how...
I have a component on my form TCppWebBrowser, and when I navigate to a URL, after the document was downloaded, in method OnDocumentComplete() , I'm trying to check and change html source of loaded document... before it being executed by browser.
I need that, because some websites have background sounds, and I want to parse html and remove tags or just remove text which contains sound files like *.wav , *.mid , *.swf, *.mp3 ... ect.
For example if html source have this line:
<NOEMBED><BGSOUND src="/images/ImagineCut.wav"></NOEMBED>
then, i change it to:
<NOEMBED><BGSOUND src="/images/ImagineCut."></NOEMBED>
or I can delete whole tag.
Using this way I want to mute webbrowser or even to stop playing sounds. Please take into consideration this method, because it will help me to avoid all kind of sounds after I edited html.. (before browser execute it)
That's what I tried to do:
void __fastcall TForm1::CppWebBrowser1DocumentComplete(TObject *Sender,
LPDISPATCH pDisp, Variant *URL)
{
IHTMLDocument2 *pHTMLDoc;
CppWebBrowser1->Document->QueryInterface(IID_IHTMLDocument2,(LPVOID*)&pHTMLDoc);
IHTMLElement *pElem;
pHTMLDoc->get_body(&pElem);
BSTR text;
pElem->get_innerHTML(&text);
text = Cleaning(text); //checking and changing html without souds
pElem->put_innerHTML(text);
pElem->Release();
pHTMLDoc->Release();
}
To do what you are asking, you would have to download the HTML file yourself from outside of the TCppWebBrowser component completely, alter the HTML as needed, and then push the new HTML into TCppWebBrowser using one of its IPersist... interfaces. Examples of doing that have been posted in the Borland/CodeGear/Embarcadero forums many times before.
I see that there are three events fired when a tab is selected and I see the order in which the events are fired but I'm rather confused about which event to use or how these are truly different. If all three are fired, couldn't I just put my code in any of the events?
I must be missing something here. Can someone clarify?
So after messing with this more I'm going to share what I ended up doing in the hopes that it might help someone else.
I had to generate dynamic tabs based on data returned in an Ajax call. It's basically data by date where the tabs are the date and they display whatever data falls within that date.
Generating the tabs from the returned data was easy but I couldn't figure out how to write out the associated data. Finally (and I should have started here), I looked that the generated dom and noticed that a dynamically created tab also creates a div. Maybe that's obvious to some (it wasn't to me) and if it was in the documentation I missed it. Anyway, this code will generate tabs from an array and then append html to the associated div when the tab is clicked. I don't need all the variables but I thought that might make it more readable. Put the function for show before adding the tabs or it wont work!
var _sessionDates = getSessionDates(sessionData.Sessions);
var $tabs = $("#sub-tabs");
$tabs.tabs({
show: function(event, ui) {
var selected = $tabs.tabs('option', 'selected');
var _sessionDates = getSessionDates(sessionData.Sessions);
var grid = buildGrid(_sessionDates[selected]);
$('#' + _sessionDates[selected]).html(grid);
}
});
$(_sessionDates).each(function(i, dayOfShow) {
var d = dateFormat(dayOfShow, "mediumDate");
$tabs.tabs('add', '#' + dayOfShow, d);
});
Finally, I have to "scroll" through my data shown in the tab and I was able to do that with these two lines. The first line gives me the id of the div element corresponding to the selected tab (which is really the important part) and the second line just calls my method and passes in the id of the div less the '#'. My date is also my id. There's a global variable that I've changed outside of this that makes it work. I know that's bad and I'll remove it when I refactor it.
var $el = $($('#sub-tabs a')[$('#sub-tabs').tabs('option', 'selected')]).attr('href');
$($el).html(buildGrid($el.replace('#', '')));
select is triggered when a tab is clicked on, but before the tab has been shown
load is triggered after the contents of a remote tab have been loaded (i.e. a tab whose content is not part of the initial page payload, but that is loaded via an ajax call when the user clicks on the related tab)
show is triggered after a tab has been shown
The jQuery documentation makes this relatively clear, but I had to experiment in order to fully understand the difference between select and show.
This has been made more clear since the original question was asked so now the following is true:
Effectively, the functionality for "show" is now provided by "activate" and "select" is done with "beforeActivate" while "load" is still the same.
activate: (previously show) Triggered after a tab has been activated (after animation completes)
beforeActivate: (previously select) Triggered immediately before a tab is activated.
load: Triggered after a remote tab has been loaded.
Also provided are:
beforeLoad: Triggered when a remote tab is about to be loaded, after the beforeActivate event.
create: Triggered when the tabs are created.