use delegate to change source of img when clicked - javascript

I created a button that will take in a website url and then display stars to collect a website rating. That part works fine. When trying to click on the stars to highlight the clicked and all prev (prevAll) stars and change the source to staron.gif but nothing happens on click. I want to use the delegate function to do this, and then a function. My function is not working.
$('#websiteButton').mousedown(function() {
var inputSite = prompt("Enter one of your favorite website urls");
var appendHTML = "<div class=\"webfav\"><a href='"+inputSite+"'>"+inputSite+"</a> <img id=\"s1\" src=\"staroff.gif\"/><img id=\"s2\" src=\"staroff.gif\"/><img id=\"s3\" src=\"staroff.gif\"/><img id=\"s4\" src=\"staroff.gif\"/><img id=\"s5\" src=\"staroff.gif\"/> <br></div>";
$('#sect2').append(appendHTML);
});//end of add favorites
$('.webfav').delegate('img', 'click', function() {
$(img, this).attr('src', 'staron.gif');
$(img, this).prevAll().attr('src', 'staron.gif');
});
I've also tried just this and this.id

I ended up just needing to move "});//end of add favorites" to the bottom after the delegate function executed. It was executing before the stars were added to the page the way I had it.

Related

Jquery delete button is selecting all image srcs and ids (Multiple Upload)

I am trying to make a delete button for the ImageUploader.
I don't have any problems with selecting the image and put it inside the div element of my page, it's all about deleting the current image.
When i do click on my delete button it's giving my all the id's and src's and not the selected current one with my delete button. look at my delete button pls where i do console log the src and the id. It's giving my all the id's and src's and i do want the id and src from the current one.
Does someone has a solution?
This is the select piece which works perfect.
frame.on( 'select', function() {
// Get media attachments details from the frame state
selections = frame.state().get('selection');
selections.map(function(attachment){
attachment = attachment.toJSON();
// Send the attachment URL to our custom image input field
imgContainer.append(
'<li>'
+ '<img data-attachment-id="id-media-1993'+attachment.id+'" src="'+attachment.url+'" class="gallery-thumbnail" alt="'+attachment.title+'" style="max-width:150px; max-height:150px;"/>'
+ '<a class="delete-custom-img" href="#">Remove Image</a>'
+ '</li>');
// Send the attachment id to our hidden input
imgIdInput.val(attachment.id);
console.log(attachment);
});
});
// Finally, open the modal on click
frame.open();
});
This my delete button
imgContainer.on( 'click', delImgLink, function(event){
event.preventDefault();
var galleryThumbnail = $('.gallery-thumbnail');
var galleryThumbnailID = $('.gallery-thumbnail').data('attachment-id');
var galleryThumbnailSrc = $('.gallery-thumbnail').attr('src');
$(galleryThumbnail).each(function(){
var imgSrc = $(this).attr('src');
console.log(imgSrc);
});
$(galleryThumbnail).each(function(){
var imgIDs = $(this).data("attachment-id");
console.log(imgIDs);
});
});
output image id in console
You can select parent element from the button and from there look for the things you want to find.
something like this
var img = $(this).closest('li').find('.gallery-thumbnail');
var galleryThumbnail = img;
var galleryThumbnailID = img.data('attachment-id');
var galleryThumbnailSrc = img.attr('src');
At first I think it would be less confusing to add the event handler like this:
$('.delete-custom-img').click(function() {...});
or
$('.delete-custom-img', imgContainer).click(function() {...});
if there are other elements with this class outside imgContainer that you don't want to add the event handler to.
But that's personal preference I guess, so to your question:
The problem is that you get all occurrences of '.gallery-thumbnail' on the page because you don't specify any scope for jQuery to look in (like with the imgContainer above).
So you're in the scope of the delete button when clicking on it. In your generated markup it shares the same parent with the thumbnail so you could do something like this:
var galleryThumbnail = $('.gallery-thumbnail', $(this).parent());
The second argument specifies the scope for jQuery to search for elements with the '.gallery-thumbnail' class in.
Haven't tested it but I'm pretty sure this should solve your problem.

Custom button for fancy box

I want to add a new button beside slide show, fullscreen, close, etc.
and i need to attach a click event to that button so it gives me the src of the image that is currently showed.
well i googled a few times but didn't find a good solution, i ended up doing this and it works!
what i needed it for was to add a delete button to my fancybox.
to add a new button:
$.fancybox.defaults.btnTpl.delete = '<button data-fancybox-delete class="fancybox-button fancybox-button--delete" title="title of the icon">put your svg icon or whatever here..</button>';
to use the newly created button:
$.fancybox.defaults.buttons = [
'slideShow',
'fullScreen',
'thumbs',
'delete', // this one is the new button
'close'];
and to attach click event and get the tag which triggered fancybox (i have data-id on that tag so i can send an xhr request to server to delete that photo)
$('body').on('click', '[data-fancybox-delete]', function(e) {
var src = $('.fancybox-slide--current .fancybox-image').attr('src'); // src of the currently showing slide
var idx = $('a[href="'+src+'"]')[0]; // My Tag
});
Another way to get src and element of the current photo (thanks to #Janis in the comments)
$('body').on('click', '[data-fancybox-delete]', function(e) {
var src = $.fancybox.getInstance().current.src;
var idx = $.fancybox.getInstance().current.opts.$orig;
});
hope it helps somebody else as well.

jQuery slideToggle for multiple divs

What I am trying to do is have four links that each will display and hide a certain div when clicked. I am using slideToggle and I was able to get it to work with really sloppy and repetitive code. A friend of mine gave me a script he used and I tried it out and finally was able to get something to happen. However, all it does is hide the div and wont redisplay. Also it hides all the divs instead of just the specific one. Here is a jsfiddle I made. Hopefully you guys can understand what I am trying to do and help! Thanks alot.
Here is the script I'm using.
$(document).ready(function () {
$(".click_me").on('click', function () {
var $faq = $(this).next(".hide_div");
$faq.slideToggle();
$(".hide_div").not($faq).slideUp();
});
});
http://jsfiddle.net/uo15brz1/
Here's a link to a fiddle. http://jsfiddle.net/uo15brz1/7/
I changed your markup a little, adding id attributes to your divs. The jquery, gets the name attribute from the link that's clicked, adds a # to the front, hides the visible div, then toggles the respective div. I also added e.preventDefault to stop the browser from navigating due to the hash change. As an aside, javascript don't require the $ prefix.
$(document).ready(function () {
$(".click_me").on('click', function (e) {
e.preventDefault();
var name = $(this).attr('name');
var target = $("#" + name);
if(target.is(':visible')){
return false; //ignore the click if div is visible
}
target.insertBefore('.hide_div:eq(0)'); //put this item above other .hide_div elments, makes the animation prettier imo
$('.hide_div').slideUp(); //hide all divs on link click
target.slideDown(); // show the clicked one
});
});
Welcome to Stack Overflow!
Here's a fiddle:
http://jsfiddle.net/uo15brz1/2/
Basically, you need a way to point to the relevant content <div> based on the link that's clicked. It would be tricky to do that in a robust way with your current markup, so I've edited it. The examples in the jquery documentation are pretty good. Spend some time studying them, they are a great way to start out.

Javascript make a function only work once

I'm working on a blog theme where you can like posts from the theme page. It uses the following javascript to like the post with the tumblr API, change the white heart to a red heart, and also +1 to the post note count, displayed above the like buttons. It works fine, but I have the problem that when you click the heart button, it turns red, likes the post, and +1's to the note count, but you can continue to click the button once it's already liked and it keeps adding one to the note count. Can anyone help me to make it so it's a function that only works once, ex: someone clicks the heart button, it turns red, adds one to the note count, and then is done.
$(function() {
$('.likepost').live('click', function() {
var post = $(this).closest('article');
var id = post.attr('id');
var oauth = post.attr('rel').slice(-8);
var count = parseInt($("#note_count_"+ id).text());
var like = 'http://www.tumblr.com/like/'+oauth+'?id='+id;
$('#like-it').attr('src', like);
$(this).css({"background" : "url(http://static.tumblr.com/uiqhh9x/JYdlzwvnx/like2.png)"});
$("#note_count_"+ id).text(count+1);
return false;
});
});
It's functioning on http://blog.jamescharless.com/, by the way. You have to be logged into tumblr for the script to work.
$("body").one("click", ".likepost", function() {
//your code here
});
By using the .one() function you only allow the click to be triggered one time. It's kind of what it was designed for. Ideally you'd want to use a parent of .likepost closer to it than the body, but worst case you could just use body as the parent.
You can unbind the click event.
$(function() {
$('.likepost').live('click', function() {
var post = $(this).closest('article');
var id = post.attr('id');
var oauth = post.attr('rel').slice(-8);
var count = parseInt($("#note_count_"+ id).text());
var like = 'http://www.tumblr.com/like/'+oauth+'?id='+id;
$('#like-it').attr('src', like);
$(this).css({"background" : "url(http://static.tumblr.com/uiqhh9x/JYdlzwvnx/like2.png)"});
$("#note_count_"+ id).text(count+1);
// unbind
$(this).unbind('click');
return false;
});
});

Jquery .ClickOut Event

Hi everybody,
I have some issue with one of my project. I'm currently developing a toolbar for Google Chrome. The concept is that my extension insert by using a content script an iframe in every page i visit. Materialized in Red on my Printscreen.
After that i've created another iframe who appear when i click on the "Menu" Button. This iframe appear like a dropMenu. Materialized in orange in the printscreen.
Well now let me explain my problem :
When i click on the "dropMenuButton" i execute this code :
$( "#dM1").click( function() {
dropMenu('dropMenu1', $(this).position().left);
});
To be clear the function "dropMenu" will call my background page (by messaging exchange) to show or hide the dropMenu, in function if it's allready activated or not.
Here is the executed code by the "dropMenu function"
if(document.getElementById("dropMenu"))
{
$("#dropMenu").slideUp(800, function() {
$(this).remove();
});
}
else
{
var body = $('body'),
MenuURL = chrome.extension.getURL(dropMenuPage + ".html"),
iframe = $('<iframe id="dropMenu" scrolling="no" src="'+MenuURL+'">');
body.append(iframe);
$("#dropMenu").hide().slideDown(800);
// Shift the menu (Left)
$("#dropMenu").css({left: marginLeft+'px'});
}
So the event on dropMenuButton work perfectly but i want to provide some ameliorations like a .ClickOut event. What i want is that when somebody click outside the dropMenu (in orange) the menu will be hide.
I've tried a lot of things but nothing work...
Hope somebody will provide me some help !
Thanks in advance.
Edit (Injection) :
I've tried to inject the javascript like this :
var injectJs = $('<script type=text/javascript>' +
'$(document).click(function() {' +
'dropMenu("dropMenu1", 0);' +
'});');
body.append(injectJs);
injectJs = $('$("#dropMenu").click( function(e) {' +
'e.stopPropagation();' +
'});' +
'</script>');
body.append(injectJs);
But it didn't seems to inject on the page. It should have a problem somewhere...
Can't you just add a click event on the document? Then on the actual drop down menu (or any other events where you don't want to hide the drop down) prevent any clicks from bubbling up:
$(document).click(function(){
// hide drop down clicking anywhere on page:
$("#dropMenu").slideUp(800, function() {
$(this).remove();
});
});
$("#dropMenu").click( function(e) {
e.stopPropagation(); // prevent click on drop menu from removing the drop down.
});
It works great but like this :
$(document).click(function(){
// hide drop down clicking anywhere on page:
dropMenu('slideUp', 0);
});
$("#dM1").click( function(e) {
e.stopPropagation(); // prevent click on drop menu from removing the drop down.
dropMenu('dropMenu1', $(this).position().left);
});
Now i have to insert the similar code on the global page, someone have an idea how i can insert dynamically a js code ?

Categories