I want to dynamically resize an image map. I only found a solution for jQuery (https://github.com/stowball/jQuery-rwdImageMaps)
How can I realize this in Angular?
you can use https://github.com/davidjbradshaw/image-map-resizer
It works with javascript call :
sample
in HTML :
<img src="...." width="100%" usemap="#usaMap" (load)="imageResized();">
in TS :
declare function imageMapResize(): void;
#Component({...
})
...
imageResized() {
imageMapResize(); // Javascript function in imageMapResizer.min.js
}
Previous answer works, however, you have to download the imageMapResizer.min.js into the assets folder.
Then, you should import it in the index.html file like this:
<script src="./assets/imageMapResizer.min.js"></script>
I thought that the file should be imported in the angular.json file, but it didn't work ... index.html did the trick for me.
Related
I am trying to add my own CSS and JS files to my view in my custom typo3 backend extension.
Here is the folder layout:
project layout
And here is the code I am using for the View New.html:
<f:section name="HeaderAssets">
<f:asset.css identifier="css" href="EXT:plugin/Resources/Public/Css/Styles.css" />
<f:asset.css identifier="css">
.foo { color: black; }
</f:asset.css>
<f:asset.script identifier="js" src="EXT:plugin/Resources/Public/JavaScript/ApiConnect.js" />
<f:asset.script identifier="js">
alert('hello world');
</f:asset.script>
</f:section>
//I also tried this and it did nothing
<f:be.pageRenderer pageTitle="title"
includeCssFiles="{0: '{f:uri.resource(path:\'Public/Css/Styles.css\')}'}"
includeJsFiles="{0: '{f:uri.resource(path:\'Public/JavaScript/ApiConnect.js\')}'}"
/>
Is there something wrong with the path that I am using? I feel like it should not be this complicated :D Inside the CSS and Js are basic body color changes and an alert for testing purposes. nothing fancy (yet).
Any help is appreciated.
According to the description in the ResourceViewHelper.php, your path-argument needs to start relative to Public resource directory of the extension
So this should do the trick:
<f:be.pageRenderer pageTitle="title"
includeCssFiles="{0: '{f:uri.resource(path:\'Css/Styles.css\')}'}"
includeJsFiles="{0: '{f:uri.resource(path:\'JavaScript/ApiConnect.js\')}'}"
/>
hi all i using angular js i have three html file like.Header,Menu and Footer.html i combined and show ecah html file in each div through id Now the three html file into one html file name is called Master.html
Code used for link html
<script>
$(function () {
$("#navbar-container").load("header.html");
$("#sidebar").load("slidebar.html" );
$("#footer").load("footer.html");
});
</script>
Header.html
i have a one scope variable in header page and it's shows correctly scope variable like say hello world.but when i combined into that means i merge into master page it's not working that scope values are not fetched i don't why anyone help to solve this problem
Please show how did You initialize the "scope variable" in header?
I think what You want to use here is the ngInclude directive which includes additional html code into current template.
So You'r example might look like:
<div ng-include="header.html"></div>;
....
I am just starting with AngulerJs and I want to load a image from a sub-folder.
This is my controller code:.
$scope.img_source = "../WebContent/Welcom2Iquote.gif";
This is the code in my index.html:
<img ng-src="{{img_source}}"/>
You can do like this
$scope.img_source = "../WebContent/Welcom2Iquote.gif";
if this your scope variable of the image path you can bind the image like below in your html using ng-src
<img ng-src="{{ img_source }}" />
Use the image tag as you used to place image for normal html images
<img ng-src="../assets/img/{{img_source}}" alt="img_source" title="img_source">
If you're using the angular-cli, you should have an assets folder in your solution.
Drop in the image you want to load, into this folder.
Now on the whatever-component.html page insert this line
<img src="assets/{{img_source}}" alt="img_source" title="img_source">
The {{}} requires you to define the img_source in the typescript file corresponding to the whatever-component.html file.
So define the the name of the picture over there:
public img_source: string = 'yourpicture.jpg';
I asked this question on css-tricks but only got one response which I implemented in my child functions file , but its still not working, you can see the thread here : http://css-tricks.com/forums/topic/i-need-help-getting-my-javascript-file-to-work-on-wordpress-through-child-theme/#post-160138
Inside my wordpress page which you can see here towards the bottom : http://izaguirre.me/contact/
I have this in html :
<div id="myDiv">
These Are Radom Letters To Test The Connection Of the JAVA File DSFDFSFSDFF
</div>
And in my myscript.js file in my child theme the only code I have inside is this :
document.getElementById('myDiv').style.background = "black";
But I see no reflection of the JS working since there is no visible background change on the example I put at the end of the izaguirre.me/contact/ page ?
The js-file couldn't get loaded (404). You uploaded it to your child theme's folder (http://izaguirre.me/wp-content/themes/selfy-child/myscript.js),
but the page actually tries to load it from the parent themes folder
(http://izaguirre.me/wp-content/themes/selfy/js/myscript.js).
Have you tried to put after the
<div id="myDiv">
These Are Radom Letters To Test The Connection Of the JAVA File DSFDFSFSDFF
</div>
this
<script type="text/javascript">
document.getElementById('myDiv').style.background = "black";
</script>
I think it will work.
I am new to JSF and I've looked for 2 days to solve this problem.
I have a Tomcat server with the following folder structure:
...
project_name
jfs
...
analysis.xhtml
reports
reports.xhtml
resources
javascript
parameterPanel.js
images
loading.png
In analysis.xhtml and reports.xhtml files I added the parameterPanel.js like this:
<h:outputScript library="javascript" name="parameterPanel.js"/>
In parameterPanel.js I'm using that loading.png...How should I write the URL to that png?
I've tried like this:
'url(../resources/images/loading.png)' - analysis found the png, reports doesn't
'url(../../resources/images/loading.png)' - reports found the png, analysis doesn't
Or is there another solution for this problem?
I'm a bit confused...
Thanks!
Specify those images by CSS instead.
/resources/css/style.css
.parameterButtonImage {
background-image: url(#{resource['images/parameter/parameter_button_doubleArrow_down.png']});
}
.parameterButtonImage.open {
background-image: url(#{resource['images/parameter/parameter_button_doubleArrow_up.png']});
}
(I assume that the HTML element in question has a class="parameterButtonImage")
Load it by:
<h:outputStylesheet name="css/style.css" />
(this way JSF will take care about resolving #{resource} paths)
Modify your JS as follows (assuming MooTools):
function toggleParametersPanel() {
$('parameterButtonImage').toggleClass('open');
new Fx.Slide('parameterPanelContent').toggle();
}
You must write your URL's relative like this
<img src="${pageContext.request.contextPath}/images/loading.png" />