I have this piece of code:
<ice:panelGroup menuPopup="menuPopup1" onclick="fireContextMenu(this, event);">
<img src="/resources/images/external/bg-suppliers.gif"> </img>
</ice:panelGroup>
it renders this HTML as output (as expected):
<div class="icePnlGrp" id="j_id62" onclick="fireContextMenu(this, event);">
<img src="/resources/images/external/bg-suppliers.gif">
</div>
If i simply add a menuPopup attribute to the ice:panelGroup like:
<ice:panelGroup menuPopup="menuPopup1" onclick="fireContextMenu(this, event);">
<img src="/resources/images/external/bg-suppliers.gif"> </img>
</ice:panelGroup>
it simply CLOSES the divs before img tag:
<div class="icePnlGrp" id="j_id62" onclick="fireContextMenu(this, event);"></div>
<img src="/resources/images/external/bg-suppliers.gif">
which is really strange...
Do you guys have a work-around? It's probably a bug from icefaces but I cannot find anything related to this on their site...
Thanks.
Solution found.
Working with different templates I had two ice:forms in the final page and two body as well, and my panelGroup from one form referenced the menuPopup from the other form which gave the above issue.
Related
I get HTML code from the backend via $http of AngularJS, and log the code retrieved and is OK, but to see it in the browser, the html structure changed.
This is the code that I get:
<a href=" http://www.google.com" target="_blank">
<figure>
<img class="img-responsive" src="/sites/Satellite;jsessionid=pk_tbxorbyJ4KrsWxo1jaVBFYvQPx1VovEs2GpjWziIk6cFaL50_!650994948?blobcol=urldata&blobkey=id&blobtable=MungoBlobs&blobwhere=1462843196206&ssbinary=true" />
</figure>
<p> Some text</p>
</a>
and this is what the browser displays:
<a href=" http://www.google.com" target="_blank">
</a>
<figure>
<img class="img-responsive" src="/sites/Satellite;jsessionid=pk_tbxorbyJ4KrsWxo1jaVBFYvQPx1VovEs2GpjWziIk6cFaL50_!650994948?blobcol=urldata&blobkey=id&blobtable=MungoBlobs&blobwhere=1462843196206&ssbinary=true">
</figure>
<p> some text</p>
Then I did the following test, log the code retrieved
$log.debug(vm.myHtml);
and then sanitize the code with
$log.debug($sce.getTrustedHtml(vm.myHtml))
and I get the same previous difference.
I was having the same problem and so played around with the Plunker available on the AngularJS docs.
I then modified it by placing some <h1> tags within <a> tags (see this plunker). The good news was that it worked in this most basic case. This had me scratching my head for ages.
In the end, I was just guessing that maybe the version of ngSanitize that I was using was maybe a little old and at some point they had slightly changed the way the tags were mapped, split and then rendered. I looked through the history but couldn't find anything. In the end, i updated to 1.5.7 the same as the version in the plunker. And smiling again :)
This is really weird to me. Here's my code
<section class="work">
<div class="scw">
<div class="work-entry">
<a href="#" class="work-link">
<img src="project.jpg" alt="yeah yeah yeahhhh" />
<div class="work-desc">
<h2>Project</h2>
<p>This is a project</p>
View project
</div>
</a>
</div>
</div>
</section>
If you have a look here http://jsfiddle.net/H2YxH/1/ and inspect the h2 tag, you will (hopefully) see it everything inside work-desc wrapped in a tag. Why is this being generated, when it's not in my code?
When the browser sees the other <a> tag inside the first one, it concludes that it has to close the first tag before it can open a new one.
<a href="#" class="work-link">
<img src="project.jpg" alt="yeah yeah yeahhhh" />
<div class="work-desc">
<h2>Project</h2>
<p>This is a project</p>
</a>
View project
But this is an invalid DOM structure: the div has to be closed before the anchor can be closed. Because closing the div now would be rather destructive (and there'd still be a stray </div> up ahead to handle), it decides that it's better to duplicate the anchor so that everything it encloses in the markup is enclosed in the DOM too.
This is what happens in Chrome. Other browsers might behave differently. With invalid HTML browser behavior is undefined and can be whatever the browser considers best.
You can't encapsulate links/ "a"-tags in each other. Although it makes sense sometimes, it's generally a bad idea.
In addition:
You probably use "Right-click"->"Inspect Element"? The code you will see may not be the code you've written. This is because the code you will see is the code, that the browser creates during parsing and the code you see may change on-the-fly (e.g. you change an attribute with JavaScript). To see your actual code you always have to use "show sourcecode" in the contextmenu, but this probably doesn't work on jsfiddle.
Please read the comments in the code below first...
<section class="work">
<div class="scw">
<div class="work-entry">
<a href="#" class="work-link">
<img src="project.jpg" alt="yeah yeah yeahhhh" /></a><!--// You might want to close your anchor here... //-->
<div class="work-desc">
<h2>Project</h2>
<p>This is a project</p>
View project
</div>
<!--// </a> and remove this one ;-) //-->
</div>
</div>
</section>
You can't open an anchor twice if you did not close the first anchor, so I kindly ask to close an open anchor before you open a new anchor, I hope this will be helpful to you. Happy coding!
so I have a strange request. I've been working on some security project for school, and I've been able to successfully inject some html code using a form on our test site. What's interesting is that it only accepts the html code as one line and with no spaces. This brings me to my question, so far I've only been able to get text and font color changes to work. But I want to see if someone could inject images/audio/video.
I'm trying to figure out how to turn this:
<img src="http://www.rtur.net/blog/image.axd?picture=2011%2F12%2Fcss.png"/>
Into this:
<imgsrc="http://www.rtur.net/blog/image.axd?picture=2011%2F12%2Fcss.png"/>
but add a space with code.
I've tried adding the but that only works with actualy text and not the tag itself. Any help is appreciated.
Interesting note: I was able to inject <font size="50" color="red"></font>
But I have no idea why that works but the image doesn't.
Have you tried the following?
A slash:
<img\ src="http://www.rtur.net/blog/image.axd?picture=2011%2F12%2Fcss.png"/>
Using a non-traditional closing tag:
<img src="http://www.rtur.net/blog/image.axd?picture=2011%2F12%2Fcss.png"></img>
Injecting a blank <img> tag:
<img src=""/>
Here's another solution: Try inline CSS:
<div style="background:url(http://www.rtur.net/blog/image.axd?picture=2011%2F12%2Fcss.png);height:400px;width:400px"></div>
See this fiddle: http://jsfiddle.net/9MYrM/
http://dev.epicwebdesign.ca/karen/2-4/a/#antartica
Absolutely positioning the continents, for some reason the links don't go to the proper place. Is this a shortfall of absolute positioning, or am I doing something stupid?
The anchors are around the headers as they should be.
Just realized it's going to the top of the image, not the headers underneath. Why?
The <a name="fragment_name" /> method of defining fragments has been deprecated in favor of using ids. So when you go to http://dev.epicwebdesign.ca/karen/2-4/a/#antartica, the browser thinks you want to go to <div id="antarctica"/>, which is at the top of the page, instead of <a name="antarctica" />, which is at the bottom of the page.
Turns out, in chrome at least, that it considers an ID an internal link, not just a name. The ID's of the images conflicted with the names of the headers. Once the ids were suffixed with "img" it works
To add to cimmanon's answer (and in case your referenced page changes).
Note: Kindly paste your code for future reference.
Change your anchors at the top of the page from:
<div id="continents">
<img src="northamerica.png">
<img src="southamerica.png">
<img src="asia.png">
<img src="europe.png">
<img src="oceania.png">
<img src="antartica.png">
<img src="africa.png">
</div>
to:
<div id="continents">
<img src="northamerica.png">
<img src="southamerica.png">
<img src="asia.png">
<img src="europe.png">
<img src="oceania.png">
<img src="antartica.png">
<img src="africa.png">
</div>
Notice that I've changed the href on all links.
And change your heading below from:
<a id="antartica">
<h1>Antartica</h1>
</a>
to:
<h1 id="antarticaSection">Antartica</h1>
Without the anchor (unless you plan on linking it to something else).
I'm using Visual Studio 2012 for an MVC web app using code first method with EF 5.0.
I have written the following code to make a modal window appear at some point:
<div id="mod" style="display:none;">
<div id="mod-container">
<div id="mod-close"><img src="~/Content/icons/close.png" title="close" onclick="$('#mod').fadeOut();"/></div>
<div id="mod-content"></div>
</div>
</div>
If works fine, exept that the image <img src="~/Content/icons/close.png" [...] /> cannot be found by the browser which thinks its URL is
http://localhost:49895/Class1/Home/~/Content/icons/close.png
To be precise, every code under my div's got broken URL. If I put my image above the div's it's displaying correctly with the following URL:
http://localhost:49895/Content/icons/edit.png
Do you have an idea where i messed things up?
Edit2: example (after problem being resolved)
This works:
<img src="~/Content/icons/close.png" title="close" onclick="$('#mod').fadeOut();"/>
<!-- comment containing a quote ' -->
<div id="mod" style="display:none;">
<div id="mod-container">
<div id="mod-close"></div>
<div id="mod-content"></div>
</div>
</div>
This doesn't work:
<!-- comment containing a quote ' -->
<div id="mod" style="display:none;">
<div id="mod-container">
<div id="mod-close"></div>
<div id="mod-content"></div>
</div>
</div>
<img src="~/Content/icons/close.png" title="close" onclick="$('#mod').fadeOut();"/>
Could be a bug in the new Razor 2.0 tilde parsing, or you've mucked up your html by missing a quotation mark or something. Try using the more explicit way of resolving urls
<img src="#Url.Content("~/Content/icons/close.png")" />
If that works then it suggests a razor bug, if it doesn't then your html is probably broken somehow but the extra # symbol may be enough for the parser to kick in and tell you what is wrong.
~ is an asp code element, not HTML. As such it doesn't get rendered by the HTML.
Try wrapping your src with #Url.Content
<img src="#Url.Content("~/Content/icons/close.png")" />