My issue is that my image-picker.js doesn't trigger the onchange when selected by clicking the image. https://rvera.github.io/image-picker/
Although, when actually selecting from the dropdown, it does trigger the onchange.
I have the following:
<%= ff.select :image_file_id, options_for_select(#image_files.map { |image| [image.id, {'data-img-src'=>image.image_file_url(:thumb)}]}), {:include_blank => 'Choose None'}, class: "image-picker", id: "tshirt-design" %>
<script>
var images = <%= images_2.to_h.to_json.html_safe %> // this is an array from ruby
document.getElementById("tshirt-design-<%= "#{ff.object.print_location.id}" %>").addEventListener("change", function(){
updateTshirtImage<%= "#{ff.object.print_location.id}" %>(images[this.value]);
}, false);
//image-picker
var imgSetting<%= "#{ff.object.print_location.id}" %> = {
hide_select: false,
show_label: true,
};
$(document).ready(function () {
$(".image-picker-<%= "#{ff.object.print_location.id}" %>").imagepicker(imgSetting<%= "#{ff.object.print_location.id}" %>);
});
</script>
Image picker produces this (this is a visual and when the thumnail is selected, is changes the select field in the select dropdown):
<ul class="thumbnails image_picker_selector">
<li>
<div class="thumbnail selected">
<img class="image_picker_image" src="https://example.s3.amazonaws.com/example">
<p>1</p>
</div>
</li>
<li>
<div class="thumbnail">
<img class="image_picker_image" src="https://example.s3.amazonaws.com/example">
<p>1</p>
</div>
</li>
<li>
<div class="thumbnail">
<img class="image_picker_image" src="https://example.s3.amazonaws.com/example">
<p>1</p>
</div>
</li>
....
</ul>
This is under the select field basically shows the images available for select and when you select them, it changes the select field. Thin on form submit, it does everything correctly as if selected in the drropdown. The issue is that its not triggering the actual select is changes when clicked on the thumbnails. I would like to same change efect trigger to happen when selecting an image from the dropdown and when clicking the thumbnail that changes the select field.
I tried this:
document.getElementsByClassName("thumbnail").addEventListener("select", clickImage);
function clickImage() {
document.getElementById("tshirt-design-<%= "#{ff.object.print_location.id}" %>").addEventListener("change", function(){
updateTshirtImage<%= "#{ff.object.print_location.id}" %>(images[this.value]);
}, false);
};
and this:
document.getElementsByClassName("thumbnail").addEventListener("change", clickImage);
function clickImage() {
document.getElementById("tshirt-design-<%= "#{ff.object.print_location.id}" %>").addEventListener("change", function(){
updateTshirtImage<%= "#{ff.object.print_location.id}" %>(images[this.value]);
}, false);
};
Error:
Event listener is not a function
I've tried a other ways but are not notable.
How can I achieve allowing a trigger when the image is chosen to do the same function as when the image is chosen from the select dropdown?
I need the same event that happens when:
document.getElementById("tshirt-design-<%= "#{ff.obje...
To happen with:
<li>
<div class="thumbnail">
<img class="image_picker_image" src="https://example.s3.amazonaws.com/example">
<p>1</p>
</div>
</li>
With document.getElementsByClassName("thumbnail") you get an Array of HTMLCollection elements that contain all html elements who match with your search you need to iterate on each of them for use each addEventListener of the childs of this array.
Example:
[].forEach.call( document.getElementsByClassName("thumbnail"), function( element ){
element.addEventListener("change", clickImage);
} );
Related
I want to be able to click some part of page to not have it call the hideAll function
app.controller('NotificationController', function($scope, $http) {
$scope.visible = true;
$scope.changeStatus = function(){
$scope.visible = !$scope.visible;
};
$scope.hideAll= function(){
$scope.visible=false;
};
});
Here is a link showing this:
Press
I want it so that when press on page this block I don't want to trigger the blur
<div class="notifications js-notifications" ng-init="visible=false" ng-show="visible">
....
</div>
Any idea how I make this work?
EDIT:
Full html:
<li id="notifications" ng-app="notifications" ng-controller="NotificationController as notification">
<a href="#" ng-disabled="checked" ng-click="changeStatus()" ng-blur="hideAll()" class="button-default show-notifications js-show-notifications active">
<i class="fa fa-bell-o" style="font-size: 17px;">
<div class="notifications-count js-count" data-count="<% notys.length %>"><% notys.length %></div>
</i>
</a>
<div class="notifications js-notifications" ng-init="visible=false" ng-show="visible">
<h3>Notifications</h3>
<ul class="notifications-list">
<li class="item no-data">You don't have notifications</li>
<li ng-repeat="x in notys" class="item js-item" data-id="<% x.id %>">
<a href="<% x.project_id %>" class="notification-link">
<div class="details">
<span class="title">New group created: <b> <% x.subject %> </b>. New project assigned to you <b> <% x.body %> </b></span>
<span class="date"><% x.created_at %></span>
</div>
</a>
</li>
</ul>
Show all notifications
</div>
</li>
You might need a custom blur directive to handle events on a separate notification container. Something along these lines:
directive('customBlur', function(){
return {
restrict: 'A',
scope: {
'customBlur': '='
},
link: function(scope, element, attr) {
element.on('click', function(event){
var targetAttr = angular.element(event.target).attr('custom-blur')
if (typeof targetAttr !== 'undefined' && scope.customBlur) {
scope.$apply(function(){
scope.customBlur = false;
});
}
});
}
}});
Here is a working plukner
Description given in W3 specification docs,
blur
The blur event occurs when an element loses focus either via the pointing device or by tabbing navigation. This event is valid for the following elements:
LABEL, INPUT, SELECT, TEXTAREA, and BUTTON.
Bubbles: No
Cancelable: No
Context Info: None
It will give you unpredictable output for other tags. If you have noticed, div tag doesn't capture focus hence no blur event.
But if you want to use event like blur, you can create custom directive which can be combinations of these four events DOMFocusOut, DOMFocusIn, mouseenter or mouseover, mouseleave.
I have made a simple system which detects double taps. I want to show a heart icon when someone double taps on an image, just like on Instagram.
This is what my code looks right now:
var elements = document.getElementsByClassName('snap_img');
[].slice.call(elements).forEach(function(element) {
var hammertime = new Hammer(element),
img_src = element.getAttribute('src');
hammertime.on('doubletap', function(event) {
alert(img_src); // this is to test if doubletap works
// Some javascript to show the heart icon
});
});
This is what the HTML looks like:
<div class="snap_item">
<div class="snap_item_following_info">
<img class="snap_item_following_img" src="res/stat/img/user/profile/small/1.fw.png" alt="#JohnDoe" />
<a class="snap_item_following_name" href="#">#JohnDoe</a>
<div class="snap_too">
</div>
</div>
<img class="snap_img" src="res/stat/img/user/snap/43/2.fw.png" alt="#ErolSimsir" />
<div class="like_heart"></div>
<div class="snap_info">
<div class="snap_text">
LA is the shit...
<a class="snap_text_hashtah" href="#">#LA_city_trip</a>
</div>
<div class="snap_sub_info">
<span class="snap_time">56 minutes ago</span>
<div class="like inactive_like">
<div class="like_icon"></div>
<div class="like_no_active">5477</div>
</div>
</div>
</div>
</div>
So when the element 'snap_img' is double tapped, I need to get the element 'like_heart' which is one line below the snap_img element. How do I get that sibling element and fade it in with JQuery?
Like this
[].slice.call(elements).forEach(function(element) {
var hammertime = new Hammer(element),
img_src = element.getAttribute('src');
hammertime.on('doubletap', function(event) {
alert(img_src); // this is to test if doubletap works
$(element).next().text('♥').hide().fadeIn();
});
});
P.S. I've added that heart text, since the sibling was empty.
On the event handler, i would do $(element).parent().find('.like_heart').fadeIn(); So the code is not dependant on the element ordering.
(To clarify to selector: take the parent element which is the div.snap_item and find an element with class like-heart inside it)
I am attempting to use JQuery to make 3 thumbnails into buttons that each open up their own page element with details regarding the picture.
Right now I have succeeded in making it so that any thumbnail causes a page element (of the class "description") to scroll open and closed when any thumbnail (from the class "thumbnail") is clicked.
How do I check which thumbnail is clicked on so that I can open a different description corresponding to that specific thumbnail? (This is what I was attempting to do with the "select").
var main = function() {
$('.thumbnail').click(function(select) {
var description = $('.game-descriptions').children('.description');
if( description.is(":hidden")) {
description.slideDown("slow");
}
else
description.hide();
});
}
$(document).ready(main);
Use a data attribute to specify what the thumbnail click is targeting, example: data-target="#game-1", add IDs to your descriptions that match and use data() to use the attribute value of #game-1 a jQuery selector.
Here is a demo
JS
$('.thumbnail').click(function() {
var gameId = $(this).data('target');
$(gameId).slideToggle().siblings(':visible').slideToggle();
});
HTML
<img class="thumbnail" data-target="#game-1" />
<img class="thumbnail" data-target="#game-2" />
<div class="game-descriptions">
<div id="game-1" class="description"></div>
<div id="game-2" class="description"></div>
</div>
Any toggling like toggle(), slideToggle(), fadeToggle() handles the is hidden or is visible
jsFiddle
The parameter to the click function is a jQuery event object, which can be useful in adding some event handling logic. However, within the context of the handler, this refers to the element which triggered the click event, and is typically sufficient for any targeted logic.
Assuming the thumbnails and descriptions have similarly named IDs, for example, you can do something like this:
$(function () {
$('.thumbnail').click(function (event) {
var descId = this.id.replace("thumb", "desc");
var description = $('.game-descriptions').children('#' + descId);
// or simply $("#" + descId);
description.toggle("slow");
});
});
HTML
<div>
<div class="thumbnail" id="thumb-1">Thumb 1</div>
<div class="thumbnail" id="thumb-2">Thumb 2</div>
<div class="thumbnail" id="thumb-3">Thumb 3</div>
</div>
<div class="game-descriptions">
<div class="description" id="desc-1">Description One</div>
<div class="description" id="desc-2">Description Two</div>
<div class="description" id="desc-3">Description Three</div>
</div>
Your technique for targeting the correct 'description' will depend on your actual DOM structure, however.
Also note that I substituted the toggle method for your if statement, as the logic you have is equivalent to what it does (i.e. toggling object visibility).
I have a hidden div with the details of a thumbnail that is visible on the page. When you click on the thumbnail, it should fadein or slideup the div with details.
I have set with jquery incremented ID's to each ".portfolio-item-details" to identify each one and then have set with jquery the same ID's to the href of the thumbnail.
<section id="portfolio1" class="portfolio-item-details hidden">content</section>
<a class="open-portfolio-item-details" href="#portfolio1" title="">
<img src="thumbnail.jpg">
</a>
<section id="portfolio2" class="portfolio-item-details hidden">content</section>
<a class="open-portfolio-item-details" href="#portfolio2" title="">
<img src="thumbnail.jpg">
</a>
Since this is done dynamically, how can I with jquery fadeIn or slideUp the ".portfolio-item-details" if the href is equal to the ID. Basically thumbnail with "#portfolio1" should slide up the div with "#portfolio1" on click.
This is my jquery code which to add the IDs and HREF is working perfectly but not working to slideUp or fadeIn the div with the same ID.
$(document).ready(function () {
var i=0;
$(".portfolio-item-details").each(function(){
i++;
var newID="portfolio"+i;
$(this).attr("id",newID);
$(this).val(i);
});
var i=0;
$(".open-portfolio-item-details").each(function(){
i++;
var newReadMoreHREF="#portfolio"+i;
$(this).attr("href",newReadMoreHREF);
$(this).val(i);
if ($(".portfolio-item-details").attr("id") == "newReadMoreHREF") {
$(this).fadeIn();
}
});
});
SOLUTION
Thanks to Austin's code, I was able to modify it to work with mine.
Check here: http://jsfiddle.net/jdoimeadios23/xpsrLyLz/
You want something like this?
HTML
<div class="image" value="1">
<img src="thumbnail.jpg" />
</div>
<div id="portfolio1" class="details">details</div>
<div class="image" value="2">
<img src="thumbnail.jpg" />
</div>
<div id="portfolio2" class="details">more details</div>
JS
$(document).ready(function () {
$('.details').fadeOut(1);
$(".image").click(function () {
var num = $(this).attr("value");
$("#portfolio"+num).fadeIn(1000);
});
});
JSFiddle Demo
You don't even need to bother with ID's so long as the next div below each image is it's details.
The problem is in this block
if ($(".portfolio-item-details").attr("id") == "newReadMoreHREF") {
$(this).fadeIn();
}
Because you're having two errors, the first one is that newReadMoreHREF is a variable, not a string in your HTML or a value to any variable and so on.
Second thing is, that in the variable declaration you're using "#portfolio"+i;, which would be good if you were about to select an element. But using it in the jQuery iif statement with .attr('id') will again cause a havoc.
The thing that you need is something like this
$(".open-portfolio-item-details").each(function(){
i++;
var newReadMoreHREF="portfolio"+i; // removed #
$(this).attr("href",newReadMoreHREF);
$(this).val(i);
if ($(".portfolio-item-details a").attr("id") == newReadMoreHREF) {
// you need to access the hyperlink in the element, not
// the element itself. this portfolio1 ID is of a hyperlink
// again here, this is referencing the main iterator.
$(this).fadeIn();
// are you sure you want to fade the .open-portfolio-item-details?
}
});
Removed the hash sign and then called the variable value to check against. It would execute to be true if the condition is true.
Try this:
HTML:
content
<section id="portfolio2" class="portfolio-item-details hidden">content</section>
<a class="open-portfolio-item-details" href="#portfolio2" title="">
<img src="thumbnail.jpg">
</a>
<div id="portfolio1" class="portfolio" hidden>Portfolio 1</div>
<div id="portfolio2" class="portfolio" hidden>Portfolio 2</div>
Jquery:
$('a.open-portfolio-item-details').on('click', function (e) {
e.preventDefault();
var id = $(this).attr('href');
$('.portfolio').hide();
$('.portfolio' + id).fadeIn();
});
Couldn't get the fiddle link for some reason.
Edit:
I don't know the name of the class that shows the content you want displayed, so as an example I'm using portfolio. Try putting this code into a fiddle
In my html code there are list items. I want to show and hide related fav div when hover the related list item. But i can not relate fav div and it's list item.
html:
<ul>
<php? for(....): ?>
<li>
<div id="sin">
some stuff
</div>
<div id="son">
some stuff
</div>
<div id="fav">
something
</div>
<br />
</li>
<php? endfor; ?>
</ul>
when mouse over <li> tags "fav" div which belongs to mouse overed list item has to appear.
My unworked jquery code:
$(document).ready(function()
{
$("li").hover(function(){
$("#fav").show()},
function () {
$("#fav").hide()
});
});
The problem is that you are using same id multiple times. You need to use class="fav" instead of id="fav"
//for #sin and #son also
$(document).ready(function()
{
$("li").hover(function(){
$("#fav").show()},
function () {
$("#fav").hide()
});
});
should be
$(document).ready(function()
{
$("li").hover(function(){
$(this).find(".fav").show()},
function () {
$(this).find(".fav").hide()
});
});
here you have
$(document).ready(function()
{
$('.fav').hide();
$("li").hover(function(){
$(".fav",$(this)).show()},
function () {
$(".fav",$(this)).hide()
});
});
you need to use the context with $(".fav",$(this)). instead of $(".fav")..
Also you've to change from id to class like
<li>
<div class="sin">
some stuff
</div>
<div class="son">
some stuff
</div>
<div class="fav">
something
</div>
<br />
</li>