We Keep Coding

Repeated elements' onclick event only works for first row

Below you will find my code I am using to pull the data from the table along with the image I want to repeat with each table row listed in the last button tag Class=plusbtn
{
$event .= ' <div style="border-bottom:1px solid gray;padding:2px;width:100%;float:left;"><div id="eventslist" onclick="goevent('.$row['id'].');">
<div style="width:100%;float:left;">
<h4 style="margin:0;"><span id="eventuser" style="width:50%;float:left;text-align:left;font-size:14px;"><img src="https:///login/profile/'.$row['profile_img1'].'" style="width:35px;height:37px;border-radius:20px;margin-left:-4%;background:url(http:///img/person-placeholder.jpg) no-repeat center" class="img-rounded"> <b>'.$row['user'].'</b></span><span style="float:right;text-align:right;font-size:12px;margin-top:9px;margin-right:-25px;">Posted: '.$row['stdate'].' </span><br/><br/><b><span style="font-size:20px;float:left;">'.$row['fname'].' </span></b></h4>
</div>
<div style="width:109%;float:left;">
<img src="http:///login/image/'.$row['name'].'" style="width:100%;height:35%;border-radius:10px;margin-left:-4%;background:url(https:///img/load.gif) no-repeat white" class="img-rounded">
</div>
<div style="width:100%;float:left;">
<p style="margin-bottom:0;">'.substr($row['description'],0,110).'...</p>
</div>
</div><div><button class="plusbtn" onclick="plusrate(\''.$likecount.'\');"><a onclick="document.getElementById(`myImage`).src=`https:///img/fav4.png`"><img id="myImage" src="https:///img/fav3.png" style="opacity: 0.7;height:25px;max-width:100px"></a></button><span id="likeqnty" class="likeqnty">0</span> <b>Likes</b></div></div> ';
}
using this set up the button image appears for every entry but I can only click the button at the first entry on my page. When I type echo around the button (echo"button") appears on the page
How can I make the button repeat with every table entry and work correctly switching from fav4 to fav3.

You problem stands in the fact that IDs should be unique. But all your images have the same ID.
<a onclick="document.getElementById(`myImage`).src=`https:///img/fav4.png`">
<img id="myImage" src="https:///img/fav3.png" style="opacity:0.7;height:25px;max-width:100px">
</a>
Clicking on any of those links will always change the FIRST image with id myImage.
You'd like to change your onclick javascript to target the image respectively to the current click target.
<a onclick="this.getElementsByTagName(`img`)[0].src=`https:///img/fav4.png`">
<img id="myImage" src="https:///img/fav3.png" style="opacity:0.7;height:25px;max-width:100px">
</a>
In this code, we use this as it is the current DOM element that received the click. And retrieve the image inside it, and change its src value. This makes sure that the targeted image is relative to where the user clicked.

jQuery modal multiple elements same class used

Please help me with a plugin I found. It works great but I want to modify it a little but my javascript/jQuery knowledge is basically zero.
http://www.jqueryscript.net/demo/Responsive-Accessible-jQuery-Modal-Plugin-Popup-Overlay/
First I made this change jQuery(document).ready(function($) so it works on the latest jQuery version, the script is set for version 1.8.2..
I only want to use the tooltip and to make a simple pop up/maximize image tool.
This is how far I got after, I'm ashamed to say, 3 sleepless nights.
For the tooltip
<input class="my_tooltip_open" type="submit" value="Tooltip1"></input>
<div id="my_tooltip" class="well">
×
<h4>Tooltip example 1</h4>
<p>Tooltip content 1 will be positioned relative to the opening link.</p>
</div>
<input class="my_tooltip_open" type="submit" value="Tooltip2"></input>
<div id="my_tooltip" class="well">
×
<h4>Tooltip example 2</h4>
<p>Tooltip content 2 will be positioned relative to the opening link.</p>
</div>
And this is the function:
<script>
jQuery(document).ready(function($) {
$("[id^=my_tooltip]").popup({
type: 'tooltip',
vertical: 'bottom',
transition: '0.3s all 0.1s',
tooltipanchor: $('.my_tooltip_open')
});
});
</script>
I know it looks stupid, i should've used CLASS instead of ID but this is the only way i could make it to work and display the tooltips. The only problem is that it always shows the last tooltip.
It should probably and logically look like this.
<input class="my_tooltip_open" type="submit" value="Tooltip1"></input>
<div class="my_tooltip" class="well">
×
<h4>Tooltip example 1</h4>
<p>Tooltip content 1 will be positioned relative to the opening link.</p>
</div>
<input class="my_tooltip_open" type="submit" value="Tooltip2"></input>
<div class="my_tooltip" class="well">
×
<h4>Tooltip example 2</h4>
<p>Tooltip content 2 will be positioned relative to the opening link.</p>
</div>
<script>
jQuery(document).ready(function($) {
[SOMETHING MAGICAL HERE LIKE (this).next !??!]('.my_tooltip').popup({
type: 'tooltip',
vertical: 'bottom',
transition: '0.3s all 0.1s',
tooltipanchor: $('.my_tooltip_open')
});
});
</script>
And for the image maximize and gallery part i ended up with this
<img src="img1.jpg" class="my_popup_open" width="200px" height="200px;" style="cursor:zoom-in;" />
<div id="my_popup">
<img src="img1.jpg"/>
<button class="my_popup_close">Close</button>
</div>
<script>
jQuery(document).ready(function($) {
$('#my_popup').popup();
});
</script>
And this is what i was aiming for:
<img src="img1.jpg" class="my_popup_open" width="200px" height="200px;" style="cursor:zoom-in;" />
<img src="img2.jpg" class="my_popup_open" width="200px" height="200px;" style="cursor:zoom-in;" />
<img src="imgn.jpg" class="my_popup_open" width="200px" height="200px;" style="cursor:zoom-in;" />
<script>
jQuery(document).ready(function($) {
$('#my_popup').popup();
(a wonderful thing called a close button somewhere on the right up.)
(another magical thing called "next" and "prev button" if there are more pictures)
});
</script>
If i click on next or prev it should go to the next or prev pictures if they exist.
Also this function already exists on this plugin, if you click on the demo on "Fade" example you see a button there "Next example".
I really like this plugin it seems very fast and simple (for who knows javascript, I can't even use it right).
I know that I'm asking for a lot of help but maybe you can point me in the right direction.
Thank you in advance for all your time.

You need to change set popup to element.
change your java script code with give code.
jQuery(document).ready(function($) {
$('.my_tooltip').each(function(){
$(this).popup({
type: 'tooltip',
vertical: 'bottom',
transition: '0.3s all 0.1s',
tooltipanchor: $('.my_tooltip_open')
});
});
});

Slideshow - link slide to URL only working for last slide

I'm using lean slider: http://dev7studios.com/lean-slider/
I want to link each slide to a different url. I've noticed that only the code in the last slide gets executed (and also applied to all other slides). For instance, adding an tag to google on just the last slide results in all slides linking to google. Somehow, it only sees the very last slide - if you inspect element on the slide, you'll see it always highlights the last slide's code.
EDIT: I've also noticed that it works fine when you don't include the sample-style.css file. But without this, there is no fade/transition effect and the navigation buttons are not formatted, so it would be pointless without this file, but the issue is probably with how the slider works.
Any ideas on what's causing this or how to fix it?
The only thing changed - added links to each slide. (index.html)
...
<div id="slider">
<div class="slide">
<a href="http://www.yahoo.com" ><img src="images/1.jpg" alt=""/></a>
</div>
<div class="slide2">
<a href="http://www.stackoverflow.com" ><img src="images/2.jpg" alt="" /></a>
</div>
<div class="slide3">
<a href="http://www.amazon.com" ><img src="images/3.jpg" alt="" /></a>
</div>
<div class="slide4">
<a href="http://www.google.com" ><img src="images/4.jpg" alt="" /></a>
</div>
</div>
...

I just figured it out. You should edit z-index property in these three places:
.lean-slider-slide.current {
z-index: 1;
}
#slider-direction-nav {
z-index: 2;
}
#slider-control-nav {
z-index: 2;
}
You can find it in slider.css and sample-style.css when you downloaded Lean Slider.

Have a look on this EXAMPLE, it works perfectly even with external resources.
Things that you need to make sure you have:
1.Include jQuery library (jQuery MUST be included BEFORE lean-slider.js)
2.Include the lean-slider.js
3.Include the lean-slider.css
4.Make sure you have an auto_increment class on your images (slider1 , slider2, slider3, etc)
Below all these (not before) add this:
$(document).ready(function() {
$('#slider').leanSlider();
});
And make sure the div that contains your images has an ID id="slider"

Always take the last link; play with the css you can force the position of elements and enable the link for each image:
/*lean slider css overwrite*/
#slider-control-nav, #slider-direction-nav
{
z-index:3;
}
.lean-slider-slide.current
{
z-index:2;
}
.lean-slider-slide.current a
{
float:left;
}

Is there a way to access a containing div from an <a> link in Javascript?

What I would like to do is click on an image link inside a div and have the div that contains the div that contains my image link disappear (display:none;). Right now my html has the following structure
<div id="one">
<div>
Words Words Words
<a href="javascript:void(0);" onClick="hideDiv('#one')";>
<img src="foo.jpg" />
</a>
</div>
</div>
<div id="two">
<div>
Words Words Words
<a href="javascript:void(0);" onClick="hideDiv('#two')";>
<img src="foo.jpg" />
</a>
</div>
</div>
The hideDiv() function looks like this:
function hideDiv(divId) {
$(divId).hide();
}
This works well enough but can be a bit cumbersome. What I would prefer would be to not need to explicitly define, by id, which div I want to hide and for the Javascript to catch the link click event and do something like $(this_link.parent_div.parent.div).hide();. Unfortunately, I don't know how to do that, but I'm sure there must be a way!

Instead of having an id to containing div, have a common class and then use this.
HTML
<div class="container">
<div>
Words Words Words
<a href="javascript:void(0);">
<img src="foo.jpg" />
</a>
</div>
</div>
Js
$('a').click(function(){
$(this).closest('.container').hide();
});
If you don't want to add any class then you can simply try this.
$('a').click(function(){
$(this).parent().parent().hide();
});
Working demo - http://jsfiddle.net/ShankarSangoli/MvkEa/
References:
.closest() - http://api.jquery.com/closest/
.parent() - http://api.jquery.com/parent/

An good way to do this is to add a new class to all of the divs that you want to select:
<div id="one" class="linkDiv">
Then do:
$(this).parents('.linkDiv').hide();
This solution doesn't trap you into relying on there always being two levels of divs between your link and the container you wish to hide.

Use the parent() method to get an element's parent.
<script type="text/javascript">
function hideDiv(a) {
$(a).parent().parent().hide();
}
</script>
<div id="two">
<div>
Words Words Words
<a href="javascript:void(0);" onClick="hideDiv(this)";>
<img src="foo.jpg" />
</a>
</div>
</div>
Or, unobtrusively:
<script type="text/javascript">
$(document).ready(function(){
$(".hideable a").click(function(){
$(this).parents(".hidable").hide()
});
});
</script>
<div class="hideable">
<div>
Words Words Words
<a href="javascript:void(0);">
<img src="foo.jpg" />
</a>
</div>
</div>

I think you want .parent()
http://api.jquery.com/parent/
I have the jquery documentation page up every day, it's an incredible resource for these types of questions.
http://docs.jquery.com/Main_Page

jquery double function each

I have the following block of HTML code more than once
<div id="page_1" class="page">
<div class="imageDetail_bg">
<img src="../_img/detail_car.jpg" alt="" id="car_detail" class="car_detail"/>
</div><!-- imageDetail-->
<div id="listThumbs">
<div id="thumbsContainer_1" class="thumbsContainer">
<div id="areaThumb" class="areaThumb">
<div id="posThumb_1" class="posThumb">
<img src="../_img/detail_car.jpg" class="detail_img" alt="">
</div>
</div><!--areaThumb-->
<div id="areaThumb" class="areaThumb">
<div id="posThumb_2" class="posThumb">
<img src="../_img/detail_car.jpg" class="detail_img" alt="" />
</div>
</div><!--areaThumb-->
...
...
...
</div><!--listThumbs-->
</div><!--page-->
and the following jQuery code:
$('.page').each(function(i) {
$('.areaThumb').each(function(j) {
$('.detail_img').eq(j).click(function(){
$('.car_detail').eq(i).attr('src', $(this).attr('src'));
});
});
});
What I want to do is: For each page there's a block of thumbs, and when I click in any thumb, the image in #car_detail is replaced by the image of the thumb I clicked. At this moment I can do this, BUT the #car_detail image is replaced in all pages. I'm not getting individually actions for each page. Every click make the action occurs in all pages.
Can anyone tell me what I'm doing wrong?
Thanks

You need not iterate through each element of the jquery selector result to bind a click event.
And you are missing a closing div for thumbsContainer div, add that before each .
Also if you have an element with id car_detail then you should use #car_detail instead of .car_detail
Working example # http://jsfiddle.net/2ZQ6b/
Try this:
$(".page .areaThumb .detail_img").click(function(){
$(this).closest("div.page").find('.car_detail').attr("src", this.src);
});
If the .detail_img elements are being used for the car_detail image then you can simplify the above code to:
$(".detail_img").click(function(){
$(this).closest("div.page").find('.car_detail').attr("src", this.src);
});

You need to give context to your children nodes:
$('.page').each(function(i) {
$('.areaThumb', this).each(function(j) {
$('.detail_img', this).eq(j).click(function(){
$('.car_detail', this).eq(i).attr('src', $(this).attr('src'));
});
});
});
Every this is pointing to the current element given by the jquery function that called it.
[edit] Cybernate found a better way to do what you wanted to. My answer mostly explains why your code did not work as you wanted

I think you have the wrong approach about this,
You should just use cloning and you will be fine...
HTML
<div class="holder">Replace Me</div>
<div>
<div class="car"><img src="img1" /></div>
<div class="car"><img src="img2" /></div>
</div>
JS
$('.car').click(function(){//when you click the .car div or <img/>
var get_car = $(this).clone();//copy .car and clone it and it's children
$('.holder').html('').append(get_car);//put the clone to the holder div...
});
I think this is what you should be doing, simple and elegant... do not understand why you complicate as much :)