Examples in Google's GWO documentation have </noscript> tags floating around free:
<h1>
<script>utmx_section("Headline")</script>
Welcome!
</noscript>
</h1>
That doesn't even look to me like valid HTML. Somebody's missing something -- either the example is missing the open <noscript> tag or I'm missing the explanation of how this is supposed to work.
Tag
</noscript>
let GWO showing only one section at time.
Starting from your code
<h1>
<script>utmx_section("Headline")</script>
Welcome!
</noscript>
</h1>
If GWO must hide Welcome content, the generated output become:
<h1>
<script>utmx_section("Headline")</script>
<noscript>
Welcome!
</noscript>
</h1>
The <noscript> tag is written with a simple document.write by the utmx_section function.
In this way the welcome content will be hidden because it is wrapped by the <noscript></noscript> tag. By the way, if you disable javascript execution of your browser you can view all the contents ( also the hidden contents )
The example isn't wrong, that's how GWO works. In most cases, this is fine, if you run into a case where it breaks something, you can add an opening <noscript> right before the closing tag, but after any default content.
http://adwords.google.com/support/aw/bin/answer.py?hl=en-au&answer=64418
Related
I'm trying to include some HTML on my software's webpage using ng-include, and I can't seem to get it to work. For now, I am using simplified versions of my end goals for testing purposes.
Relevant snippet of my project tree:
-web
--dragonweb
---src
----app
-----dragon
-------dragon.css
-------dragon.html
-------dragon.spec.ts
-------dragon.ts
-------test.html
dragon.html
<div ng-app = "" ng-controller="test">
testing
<div ng-include="" src="'app/src/dragon/test.html'"></div>
</div>
test.html
<div>
This is an included file
</div>
Expected output on the web page:
testing
This is an included file.
Actual output on the web page:
testing
I've tried using different lengths of the path to test.html, with no luck. I've also been playing around with the use of the ng-controller tag, and syntax for the ng-include tag, with no luck. There are no console errors in the web page. Any idea why it doesn't seem to be working?
Backstory/disclaimer: I was the intern on this project before inheriting it after the lead dev suddenly left, this is my first time doing any sort of web development, and I'm just learning on the job from trial and error. So if I'm doing things wildly incorrect, I am absolutely all ears for how I can improve this process! I chose to try to use ng-include because we already have Angular implemented, and based on my research this seemed like the theoretically easiest way to accomplish what I wanted.
You need to pass the src to ng-include directive not the src attribute:
Ex:
<div ng-include="'app/src/dragon/test.html'"></div>
or use relative path:
<div ng-include="'./test.html'"></div>
Please check out the official documentation for details
Usage:
as element:
<ng-include
src="'string_url'">
...
</ng-include>
as attribute:
<ANY_ELEMENT_TAG
ng-include="'string_url'">
...
</ANY_ELEMENT_TAG>
as CSS class:
<ANY class="ng-include: string; [onload: string;] [autoscroll: string;]"> ... </ANY>
I am using angular with sightly. So I have angular html template surrounded by script tag, which also has sightly attributes like data-sly-resource.
Below example code will give you clear idea.
<script type="text/ng-template" id="example.html">
<section data-sly-resource="${ #path='textOverImage', resourceType='example/components/textOverImage'}" id="textOverImage" >
<div ng-include="'private/textOverImage.html'" data-sly-test="${!wcmmode.edit}"></div>
</section>
</script>
It works fine in non-edit mode , but in edit mode, I can not author data-sly-resource part. It looks like <script> tag is not letting it work roperly because when I remove <script> tag ,than I can author it.
And removing script tag is not an option as well.
So how can I stop script tag form breaking sightly functionality in edit mode?
I ended up doing repetition of code , one for author mode and other for non edit mode.
Below is close resemblance of my solution.
<section data-sly-resource="${ #path='textOverImage', resourceType='example/components/textOverImage'}" id="textOverImage" data-sly-test="${wcmmode.edit}" >
<div ng-include="'private/textOverImage.html'"></div>
</section>
<script type="text/ng-template" id="example.html" data-sly-test="${!wcmmode.edit}">
<section data-sly-resource="${ #path='textOverImage', resourceType='example/components/textOverImage'}" id="textOverImage" >
<div ng-include="'private/textOverImage.html'"></div>
</section>
</script>
As you can see in above code, what to show and when works via data-sly-test="${wcmmode.edit}".
I also tried to to create sightly template for redundant code and than try data-sly-use but now, it works in author mode but sightly can't put template inside <script> tag even though I used # context='unsafe'
There is a workaround based on the Sightly Reference
Put the markup inside a separate html file say mymarkup.html parallel to mycomponent.html
In Component HTML file (e.g mycomponent.html) use <script type="text/ng-template" data-sly-include="mymarkup.html"></script>
In mymarkup.html we can use Sightly tags normally and those would be evaluated/executed normally, we would not even need to specify the # context for variables we would read using use API. The final markup rendered by component mycomponent.html when dragged to page would render something like this below
<script type="text/ng-template">
//mymarkup.html evaluated content here
</script>
In your script tag you could add data-sly-unwrap="${wcmmode.edit}"
This will remove script tag in edit mode allowing you to edit included components but in any other mode the script tag gets rendered.
I found the following mention in Netcentric's AEM Sightly Style Guide:
Then, because the HTML grammar ignores elements located inside a
< script > or < style > elements, no block statement can be used within
them.
Although it's not explicitly stated in the Sightly spec, it makes sense. So your fix is right.
I am doing angularjs development and have a bevy of HTML ng-templates included inside tags in my HTML, like so:
<script type="text/ng-template" id="content_listing.html">
<div class="item_content">
<div class="horiz-nav-menu">
<h3> {{sectionName}} </h3>
<ul>
<li ng-repeat="navLink in navLinks"> <a href='#/{{navLink.Target}}' title='{{navLink.Tip}}'>{{navLink.Text}}</a> </li>
</ul>
</div>
</div>
</script>
It's highly annoying that my editor of choice, Vim, does not properly highlight the HTML because it is inside a script tag. As a result, I have created a custom syntax region for Vim and plopped it into a file after/syntax/html.vim which I have confirmed is getting processed when Vim starts up:
unlet b:current_syntax
syn include #HTML $VIMRUNTIME/syntax/html.vim
syn region htmlTemplate start=+<script [^>]*type *=[^>]*text/ng-template[^>]*>+ keepend end=+</script>+me=s-1 contains=#HTML,htmlScriptTag,#htmlPreproc
The problem is that the highlighting behavior is flaky (Vim 7.2). To make the highlighting work properly, I have to do things like scroll down so that the section with HTML scrolls off of the page and then scroll back, hit :e to reload the doc, etc. Also, even when the highlighting is displaying correctly, when I go to edit the HTML inside the tag the highlighting for that block turns off.
I am no expert on Vim syntax highlighting ... has anyone run into a similar thing? It looks to me like my region definition looks fine...
I am attempting to create a SPA using AngularJS as the main view for my website. I'm using ServiceStack on the server-side and can therefore cleanly serve HTML or JSON requests depending on what's accessing it. My main concern is the use of script blockers, preventing AngularJS from rendering the page properly. So far my main way of working is to render static pages, and inject a small script that redirects to the AngularJS-powered pages if it detects if Javascript is enabled. This works great since every URL works fine when the user begins at the static pages, but I've ran into a couple of snags.
Browsing to a link which includes the "?View=SPA" breaks the page if JavaScript is disabled
This causes the first page loaded to be loaded twice.
I'm looking for an alternative, but so far I haven't found any clean solutions. I was thinking about including the "?View=SPA" as a POST variable, but I'm still iffy on that implementation.
Any thoughts?
Instead of redirecting to an other page, I would implement both cases in the same HTML File as follows:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<style>.hideIfNoScript {display: none}</style>
</head>
<body ng-app ng-init="msg = 'hello world'">
<input class="hideIfNoScript" ng-model="msg" />
<p class="hideIfNoScript">{{msg}}</p>
<noscript>
<p>Content without javascript</p>
</noscript>
<script type="text/javascript">
var myEl = angular.element( document.querySelectorAll( '.hideIfNoScript' ) );
myEl.removeClass('hideIfNoScript');
</script>
</body>
</html>
The CSS Class hideIfNoScript in the head section makes sure that all HTML Tags with this class are never shown to the user, if javascript is disabled.
The noscript tag shows the alternative content.
If javascript is enabled, the little script at the end of the body section makes those elements visible. And in this case, the contents of the noscript tag are hidden.
Browsing to a link which includes the "?View=SPA" breaks the page if JavaScript is disabled
Hide those links by default:
a[href*='SPA'] { display: none; }
This causes the first page loaded to be loaded twice
Use a cookie on a browser-check page which loads the first page in an iframe or redirects to it to avoid this.
References
Track Non-JavaScript Visits In Google Analytics
I have a <div> in my HTML page. What I need to do is, add <ul> element inside it from my Entry point class. I have tried from onModuleLoad function using below code,
UListElement ul=Document.get().createULElement();
ImageElement img=Document.get().createImageElement();
img.setSrc("\\images\\personas");
LIElement li=Document.get().createLIElement();
li.appendChild(img);
ul.appendChild(li);
Document.get().getElementById("divPhotos").appendChild(ul);
but my <div> is empty/has no childs when i run it. what am I missing here?
Your code is okay assuming you have correctly assigned the "divPhotos" id to a div in your HTML DOM. I suspect that you are viewing the page source and expecting to see the newly appended DOM elements. What you want to view is the pages live DOM. How you inspect the DOM in depends on the web browser you are using. if your using Google Chrome, press F12 to access the debugging tools which will allow you to transverse the live DOM. For Firefox, you need to install Firebug. Other browsers provide their own debugging mechanisms.
I have forgot to add nocache.js in html page.
<script type="text/javascript" language="javascript" src="test/test.nocache.js"></script>
Its working now...