I am looking in building a simple email client and I am stuck at the point, where the client should ask if the user wants to see images/hide them on spam messages. Any approaches are welcome.
How to prevent images from loading within a 'container' with angularJS
Please, note:
I am looking for angular solution so please do not suggest jQuery as they do not play nice together. Although pure JS is welcomed
'Do The Simplest Thing That Could Possibly Work' kind of solution
You can use ng-if feature
In controller
$scope.toggleImage = false; // true - Show, false - Hide. By default hide image.
In View template
<img ng-src="" ng-if="toggleImage">
Toggle Image
Thanks #musically_ut for the correction.
Here is a way where you can show picture in angular. All you need to add is a boolean which is true when it's not spam.
Html :
<!-- language: html -->
<div ng-app ng:controller="ShowHideController">
<div ng-repeat='image in images'>
<img ng-src="{{image}}"/>
</div>
<button ng-click='showImage()'> show image </button>
<div>
Javascript :
function ShowHideController($scope) {
$scope.showImage = function(){
$scope.images = ['https://www.google.com/images/srpr/logo3w.png'];
}
}
Here is the jsFiddle
Also what you can do is when it's true that its spam . Set the $scope.images to nothing.
To achieve what OP wants, i think the best way is to use:
<img ng-src="{{vm.isVisible ? 'path/to/image' : ''}}" />
This prevents the image from being loaded.
Related
There is a carousel on a home page and I would like to add an onclick event to it to send the data back to GA. Each part of the carousel is a link. But I want to specify which selection on the carousel they selected. When I hover over each of the carousel links, the end of the URL says
#carousel-modal1, #carousel-modal2, #carousel-modal3, #carousel-modal4, #carousel-modal5.
How do I programmatically get the number of modal that's selected?
I would like to add an onclick event with a function. When I tried, I added the onclick to the rest of the code below. I know how to send the info back to GA but I guess the most important question is how do get that modal #?
HTML:
<div class="carousel-item">
<a
id="modal-111"
href="#carousel-modal"
onclick="myFunction()"
role="button"
data-toggle="modal">
<img class="d-block w-100" alt="" src="/somepic.png" />
</a>
</div>
Your question is kinda all over the place, but it seems like the prevailing idea is that you want to get 111 from the example via the onclick event...
To do that, you can use this, which provides access the element that activated the click. Then you can use some js string magic to get the number, like so:
function myFunction(){
var id = this.id;
var number = id.substring(id.indexOf('-')+1,id.length);
}
As a sidenote, you may want to consider using jQuery, it makes stuff like this way easier:
<div class="carousel-item">
<a
id="modal-111"
href="#carousel-modal"
role="button"
data-toggle="modal">
<img class="d-block w-100" alt="" src="/somepic.png" />
</a>
</div>
<!-- include the jQuery code on your site -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$( document ).ready(function() {
$('.carousel-item a').click(function(){
var id = this.id;
var number = id.substring(id.indexOf('-')+1,id.length);
});
});
</script>
In this example, you're attaching a function to all anchor links inside carousel-item tags, so you don't need to add an onclick to each one.
And based on your update in the comments, it seems like you want the number that follows the href attribute. Here's how to do that:
function myFunction(){
var href = this.getAttribute( 'href' );
var number = href.substring( href.indexOf('modal')+1, href.length );
}
Take a look at how this answer changed based on what you asked. What you were really looking for was answers to two small problems:
How to get the value of an attribute.
How to search within that value, or how to search a string.
Both of these questions are easily answered with google.
As you build more advanced things, the SO community is not going to spend time deciphering your question.
Next time, be sure to spend a lot of time simplifying your question to the bare essentials. Make sure it is as easy to understand as possible. Also be sure to create a working example (or as close as you can get) of your code on jsfiddle or codepen.
You should aim to spend at least an hour writing a question. If you take this advice, 99% of the time you will answer your own question before you need to post it here, and that will save you a lot of time. Good luck.
I have an index of objects returned from search. The template has an ng-repeat where the item's URL is constructed from data in the model but in the final markup the "a" tag does not work. The ng-href and href are correct, the URL bar changes when the link is clicked but the page does not load. Doing a browser refresh after the click does get the page. So something in Angular is changing the URL bar but not triggering a load???
Can't make this reproduce in a jsfiddle because the problem seems to be in loading the json into the template after a $resource.query() function, which I can't do from a jsfiddle. With a simulated query loading static data the jsfiddle works even though the final markup looks identical.
The AngularJS template looks like this:
<div ng-controller="VideoSearchResultsCtrl" class="row-fluid">
<div class="span12" >
<div class="video_thumb" ng-repeat="video in videos">
<p>
<a ng-href="/guides/{{video._id}}" data-method="get">
<img ng-src="{{video.poster.large_thumb.url}}">
</a>
</p>
</div>
</div>
</div>
The results look fine and produce the following final markup:
<div ng-controller="VideoSearchResultsCtrl" class="row-fluid ng-scope">
<div class="span12">
<!-- ngRepeat: video in videos --><div class="video_thumb ng-scope" ng-repeat="video in videos">
<p>
<a ng-href="/guides/5226408ea0eef2d029673a80" data-method="get" href="/guides/5226408ea0eef2d029673a80">
<img ng-src="/uploads/video/poster/5226408ea0eef2d029673a80/large_thumb_2101146_det.jpg" src="/uploads/video/poster/5226408ea0eef2d029673a80/large_thumb_2101146_det.jpg">
</a>
</p>
</div><!-- end ngRepeat: video in videos -->
</div>
</div>
The controller code is:
GuideControllers.controller('VideoSearchResultsCtrl', ['$scope', '$location', 'VideoSearch',
function($scope, $location, VideoSearch) {
$scope.videos = VideoSearch.query({ namespace: "api", resource: "videos", action: 'search', q: $location.search().q });
}
]);
Using AngularJS 1.2-rc.3. I've also tried using an ng-click and regular old onclick to get a page loaded even with static URL but the clicks never trigger the code. BTW static non-angular links on this page do work, so the Menu Bar and Sign Out work.
What have I done wrong here or is this a bug in AngularJS?
From the mailing list I got an answer:
Have you by any chance configured your $locationProvider to
html5Mode? If yes this would cause your problems. You could force it
to always go to the url by adding target="_self" to your tag. Give
it a shot.
I had configured to use HTML5 so adding the target="_self" to the tag fixed the problem. Still researching why this works.
Not sure if this has been updated since this post was answered, but you can configure this in application startup. Setting the rewriteLinks to false re-enables your a tags, but still leaves html5mode on, which comes with all its own benefits. I have added a bit of logic around these settings to revert html5mode in browsers where window.history is not supported (IE8)
app.config(['$locationProvider', function ($locationProvider) {
if (window.history && window.history.pushState) {
$locationProvider.html5Mode({
enabled: true,
requireBase: true,
rewriteLinks: false
});
}
else {
$locationProvider.html5Mode(false);
}
}]);
Angular Docs on $locationProvider
The benefits of html5mode vs hashbang mode
I know this post is old, but I recently ran into this problem as well. My .html page had the base
//WRONG!
<base href="/page" />
and the fix:
//WORKS!
<base href="/page/" />
notice the forward-slash ('/') after 'page'.
Not sure if this applies to other cases, but give it a try!
AngularJS suffers from a sparse documentation, I hope their gaining momentum will improve it. I think AngularJS is primarily intended as a SPA, and maybe the idea behind deactivating by default all a tags allows one to easily incorporate angular into some already existing html.
This allows for quick refactoring of the default "routing" behaviour of a "traditional" website (well, script pages linked between each other) into the angular routing system, which is more of an MVC approach, better suited for Web Apps.
Find this line:
$locationProvider.html5Mode(true)
change it for:
$locationProvider.html5Mode(true).hashPrefix('!')
and include this line in the head of index.html if you don't have it.
<base href="/">
I see this is old, but this is one of the top results on Google.
So if you are using Angular 7, and only want to link a couple of files, then just put the into the "assets" directory:
Now when you want to link the file you can just use the href tag as below:
<img src="assets/ang_1.png" alt="Angular">
Note: you can only link to the assets folder by default, so you strictly have to place your files there.
I need to create a simple button made only of an image, and which will open a JQuery Dialog when the user clicks on it.
I am doing some reading and notice many solutions: <button>, <image> with a <a>, using CSS to modify a button background, etc...
This is confusing, what is the proper way to implement my image button?
Thanks.
P.S.: The button/image should be focussable. An operational JSFiddle example is welcome.
The proper way largely depends on what the button will do if JavaScript is not available.
If you are going to submit a form then:
<button> <img src="..." alt="..."> </button>
If you are going to go to a URL then:
<img src="..." alt="...">
If you are going to do absolutely nothing (generally not a good idea, you should follow the principles of Progressive Enhancement and Unobtrusive JavaScript, but acceptable if you only generate the button with JavaScript in the first place and the loss to the user is convenience rather then essential functionality):
<button type="button"> <img src="..." alt="..."> </button>
You then bind the JavaScript to either the form's submit event, or the button/anchor's click event and prevent the default behaviour so the form won't be submitted / the link won't be followed if the JavaScript executes successfully.
Create a button and put background-image for it.
Checkout the fiddle.
http://jsfiddle.net/siyakunde/Y38nz/
I found the solution after many struggles: http://jsfiddle.net/YRY8M/3/.
<html>
<head></head>
<body>
<input type="image" tabindex="0" onclick="doSomething()" src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/White_and_yellow_flower.JPG/320px-White_and_yellow_flower.JPG"
/>
<br />
<button tabindex="1">I am focussable too !!!</button>
</body>
</html>
And some javascript:
function doSomething() {
alert('Hello!');
}
It depends on what you want to do in every case. There is no guideline that says "you should do it like this", but there are situations that some cases are more suitable than others.
For example according to this review, IE versions of 8 and below have some buggy behaviour regarding <button> tag when trying to use it as a submit button.
Ηowever the <button> has some new attributes added in HTML5 which you can see here , ammong them is autofocus and other useful that will be supported by most modern major browsers.
In your case that you want to maintain the "focus" (i assume with tabbing support), if you use a single <image> as a button (with or without <a>), you will have to add some JS code to make the image focusable when the appropriate tab is pressed. So you will have to write a bit more code to do the same thing.
There is one more solution which might be suitable for you, since you do not need to submit the form to server side. Using the <input type="image" type and defining the src attribute inside it, will be focusable and not require neither any JS code to run nor any difficult CSS. You can find more about it's syntax here
So, it ends up to you to decide which one of all them to use.
I would use the one that i find more flexible, easier for me to code, easily reusable and is supported by most of my target browsers.
Use jQuery as you own it...
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<style type="text/css">
#theBtn{
margin: 20% auto 0;
background: url('http://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/White_and_yellow_flower.JPG/320px-White_and_yellow_flower.JPG');
width: 100px;
height: 50px;
}
</style>
</head>
<body>
<div id="theBtn"></div>
<script type="text/javascript">
$(document).ready(function(){
$("#theBtn").click(function(){
if(confirm('Are you sure?')){
$("#theBtn").fadeOut('slow');
}
});
});
</script>
</body>
</html>
Inside a <button> tag , put your image, and attach an click event to <button> to open the dialog on click.
JSFiddle
First thing, There is either an image or a button. But not both.
I would say, create an image and place your code in the onclick() function of that image.
var img= $("#my-image-id");
image.click(function() {
// your code here
}
As I know You can't change the look of the Safari buttons thats why I suggest to use a for the solution. Here is my simple code: http://jsfiddle.net/djgBK/1/
The basis is:
Take an a element put the link content to the left,
Then replace it with image that is actualy it's background. Becouse it's a element user can select it usin only TAB button.
What's more using an a elemet will let You to put title which will be displayed after hovering/entering over the button.
This is more like a auto-click link problem. But my problem is this link is generate by google's script.
http://translate.google.com/translate_tools
If you choose "translate a section" , there will be a link generate inside the goog-trans-control class
Original script:
<div class="goog-trans-section">
<div class="goog-trans-control">
</div>
Original Text here.
</div>
Script code after execute (Check Component):
<div class="goog-trans-section">
<div class="goog-trans-control">
<div class="skiptranslate goog-te-sectional-gadget-link" style="">
<div id=":1.gadgetLink">
<a class="goog-te-gadget-link" href="javascript:void(0)">
<span class="goog-te-sectional-gadget-link-text">Translate</span>
</a>
</div>
</div>
</div>
Original Text here.
</div>
How would I auto-click (or execute) the Translate link after this page is totally loaded?
For some reason, jsfiddle is not working with my script, though I still post this for your convenience.
http://jsfiddle.net/Wb7tE/
Really appreciate for your time and help.
Edited:
I tried Google translate API, but there is a limitation of 5000 words at a time.
My translations include whole html with tables and scripts, so it reach the limit with no exception.
I have a similar problem, and I solved it temporally like this
google_initialized = false;
function google_auto_translate()
{
if(google_initialized)
{
$('a.goog-te-gadget-link')[0].click();
}
else if(google.translate)
{
google_initialized = true;
setTimeout(google_auto_translate, 500);
}
else
setTimeout(google_auto_translate, 100);
}
window.onload = google_auto_translate;
but on slower connection, in 50 % of time google doesn't load on time, and script already clicks before loading is done. So if anyone know any other way to do this, via some events or something similar please add it here...
P.S. Don't use Google Translation API it's Deprecated and will be removed till the end of this year.
I am currently working on a project that lets users post comments with jquery and ajax. So far it is using Json and retunring several items, username, comment text, user photo url, comment ID number and stuff like that, I then need to use some sort of template to make all this data go into the correct div's before adding it all to the screen.
I am new to using javascript so this is a hard task for me. I am now considering the easy route.
Just have my PHP backend script return the whole block of code, div's and everything in place but I am wondering is this a bad idea? More importantly is it a bad idea with json?
Here is an example of a block of code that needs to be added to the screen when a comment is posted
<li class="admin" id="comment-1371">
<div class="photocolumn">
<!-- START Photo block -->
<div class="imageSub" style="width: 100px;">
<img class="male" src="http://cache2.mycrib.net/images/image_group34/0/39/T_653807517aff2b1f5662d865b40d87d527c8eb.jpg" alt="Something" width="100"/>
<div class="blackbg"></div>
<div class="label">JasonDavis</div>
</div>
<!-- END Photo block -->
</div><!-- END photocolumn -->
<div class="commenttext">
<p>02/12/3009</p>
<p>sample text for comment area!</p>
</div>
<!-- END COMMENTTEXT -->
</li>
I would say it depends on the situation/application. For instance I would use json and templating for a flight/hotel etc result screen. Why return 50k's worth of the same markup when a 4k json object will do and will allow for rapid clientside sort/filter. If you dont need quick clientside filtering/sorting then responding with dom fragments is ok. Horses for courses.
I don't see a problem with returning HTML via AJAX. A bonus of this is that you can generate most of the HTML in a view in PHP and still keep things fairly clean.
Tokenizing your data into an object is nice for re-use but can be overkill for a one-off.
Go the easy route, I can see no reasons of going with JSON array.