I get an error in IE7 with Prettyphoto:
I have a simple a tag, if I place it directly in the dom then it works, but if I create it with jquery and append in the dom than I get an error.
<img src="01.jpg" width="120" height="68" alt=""/>
This example works:
example 1
(a tag is placed directly in dom)
This example doesnt works:
example 2
(a tag is created with jquery and appended in dom)
The error is:
"Image could not be loaded. Make sure the path is correct and the image exist."
I had this issue.In general you need to fire prettyPhoto after DOM is recreated again:
//Some Javascript code creates DOM in here and then you will fire prettyPhoto even again to update and apply on new created DOM elements
$("area[rel^='popUp']").prettyPhoto();
$(".popUpWindow:first a[rel^='popUp']").prettyPhoto({animation_speed:'normal',theme:'facebook',autoplay_slideshow: false,social_tools: false});
$(".popUpWindow:gt(0) a[rel^='popUp']").prettyPhoto({animation_speed:'normal',theme:'facebook',autoplay_slideshow: false,social_tools: false});
Related
I'm fixing a bug on some legacy Angular 1.5 code.
I have a template like this
<div id="container" ng-if="ctrl.show_container">
<div id="child"></div>
</div>
I need to manipulate the div#child. I'm using $element.find() to get the child div. Unfortunately, it seems that code runs before the template/DOM has finished rendering -- due to the conditional rendering on the container, it doesn't find anything. If I remove the ng-if, it's able to find the element as expected.
Is there any way I can execute my DOM manipulation until after all the conditional rendering is done?
Thank you
If simple case you just do:
ctrl.show_container = true;
$timeout(() => $element.find(...))
If that is not enough you'd better add some directive on that #child element.
scope.$watch('$viewContentLoaded', functionToManipulateDom)
I am having a problem were I cannot tell jade to render my custom elements of angularjs origin (directives), I want to know if there is any way to escape the tags so maybe at least they will be rendered as they are instead of going for the jade pre-processor, or maybe a way to tell jade to render my custom element somehow.
The current code looks like :
html
head
link(href='/main.css', rel='stylesheet')
script(src='/lib.js')
script(src='/main.js')
title!= "Neuron#l"
meta(charset="utf-8")
link(rel="icon",href="/images/neuronal.png")
body(ng-app="app",ng-view)
"<top:bar></top:bar>"
"<left:bar></left:bar>"
If the problem it's top:bar and left:bar here is the solution:
html
head
link(href='/main.css', rel='stylesheet')
script(src='/lib.js')
script(src='/main.js')
title!= "Neuron#l"
meta(charset="utf-8")
link(rel="icon",href="/images/neuronal.png")
body(ng-app="app",ng-view)
top:bar
left:bar
lets say I have a HTML structure like this
<myHandler>
<element_1 ng-controller="..." ng-init="">
content
</element_1>
<element_2 ng-controller="..." ng-init="">
content
</element_2>
</myHandler>
So, my css is saying element_2 has display: none;
how to tell angular not to run on these lements, that are hidden?
and run only (once) when they are visible?
to clarify the case more, the myHandler is handling authorization and is displaying element_1/element_2 depending on the permissions.
so I don't want to initialized element_2 if it has no permissions
Instead of keeping display none ,just keep an attribute ng-if with a flag variable
because if we use ng-if then no element is added into the dom or if no element added then no controller will get instantiated.
<myHandler>
<element_1 ng-controller="..." ng-init="">
content
</element_1>
<sample ng-if="isDisplay">
<element_2 ng-controller="..." ng-init="">
content
</element_2>
</sample>
</myHandler>
In my code I have something similar to
<div ng-if="variableThatEvaluatesToFalse">
<input id="location">
</div>
What I'm trying to do is hide a component and then show it in response to user input. However, upon my page loading I want Google Maps to attach to my input. Google Maps relies on document.getElementById('location') which is null presumably because AngularJS is 'hiding' it. I can I get document.getElementById('location') to return my input field even if it is initially hidden by the ngIf directive?
The ngIf directive prevents elements from being included in the DOM at all. What you would need in this case is ngHide, which would keep the element in the DOM.
See: https://docs.angularjs.org/api/ng/directive/ngHide
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...