Jquery/Javascript to hide/show div in li - javascript

I have many div's on a page, like the one below with different information, using the same classes.
<div class="one-third">
<ul class="img-list">
<a href="#" target="_blank">
<li>
<img src="#" alt="" />
<span class="text-content"><h3 style="color:white" id="one">BRIAN FARGO</h3></span>
<h5 class="text-content-desc" id="two">CEO, inXile entertainment</h5>
<a href="https://twitter.com/BrianFargo">
<img class="speaker-twitter-profile" src="#"></a>
<div class="info-btn" onClick="swap('one','two')">info</div>
</li>
</a>
</ul>
</div>
And a javascript functions is:
function swap(one, two) {
document.getElementById(one).style.display = 'block';
document.getElementById(two).style.display = 'none';
}
The problem is, when I click on the "info" button, it effects on all div's, but I need it to only effect on the div which button is clicked.
Like if I click on info of BRIAN FARGO, it should only show/hide/effect BRIAN FARGO'S bio. Not all other speakers.

I don't understand why is your function named swap() when all it does is changes the display attribute of one element to block (which it already is by default) and changes another elements display to none effectively hiding it.
If you have many divs with the same id, that too could be your problem. Id should be unique for each element

Related

Change image with only jquery or javascript

I am trying to change an image from an old to new using jquery or javascript only. It is the second picture out of three total that has a common parent element and is not separated by any specific parameters.
I believe I need to use a DOM navigation of some sort to get to the exact picture in the common class but haven't had any luck.
As I mentioned the 'make' class is shared between all three images as is 'make-image'. I need to simply swap the image for another updated version, facebook1.jpg.
<li class="make ">
<a href="#">
<img class="make-image" src="facebook.jpg">
<div class="make-info">
<img class="make-logo" src="facebook.jpg">
<div class="clearall"></div>
</div>
</a>
</li>
It should simply swap the existing image for another.
You can query for the image tags inside the list-item and iterate with each over the returned array. Inside that loop you can check if the src of that image-element is what you are looking for and replace it.
$('li.make img').each(function(index){
if ($(this).attr('src') == 'facebook.jpg') {
$(this).attr('src', 'facebook1.jpg');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class="make">
<a href="#">
<img class="make-image" src="facebook.jpg">
<div class="make-info">
<img class="make-logo" src="facebook.jpg">
<div class="clearall"></div>
</div>
</a>
</li>

How to make li clickable without affecting inner anchor?

I have a list of products for which I am using below li:
When user clicks anywhere on the li I want use to send to product details page e.g. /product/id/. When user mouse over the li I also display an icon which when clicked allows users to add product in Favorites.
<ul>
<li class="media">
<div class="media-left">
<a href="/product/123/">
<thumb>
<div class="thumb">
<img src="/images/company-logo.jpg">
</div>
</thumb>
</a>
</div>
<div class="media-body">
<div class="item-actions autohide pull-right">
<a title="Add to Favorites"><i class="material-icons">favorite</i></a>
</div>
<div class="media-heading b">
Demo Product
</div>
<div class="text-sm">
<div style="height:16px;overflow:hidden;">Demo Manufacturer</div>
</div>
</div>
</li>
</ul>
I know I can make the whole li clickable and send user to product details page using javascript.
<li (click)="sendToproductDetailsPage(123)">
.....
</li>
But the issue with this approach is that when I click on Favorite icon, it also send users to product details page.
Can anyone please guide how to achieve this with pure JavaScript?
You clearly have an event handler for the "Favorite" a link that handles adding the thing to the favorites. Have that event handler stop propagation. Since the click stops as of that a, it never bubbles up to the li, and you don't have to worry about it triggering the li's click handler.
If you're hooking up events through addEventListener, your handler gets an event object that has stopPropgation, so:
yourEventArgument.stopPropagation();
If you're using onxyz-style event handlers, return false from the handler; it does the same thing stopPropgation does (more on my blog: The true story on return false).

Trigger lightbox functionality on button click jQuery

I've searched all over and I'm unable to get this to work. I've got a button which I want to use as the main control to load up a lightbox image.
Here is my HTML
<li class="span1">
<a href="https://farm4.static.flickr.com/3760/18492500814_4597807b9e_b.jpg" title="FLAG4_km003" class=" thumbnail" target="_blank" data-lightbox="lightbox">
<img alt="FLAG4_km003" src="https://farm4.static.flickr.com/3760/18492500814_4597807b9e_z.jpg">
</a>
<div class="hover-box">
<p>Title</p>
<button class="view box-button">Zoom</button>
<button class="request box-button">Request</button>
</div>
</li>
As you can see the required lightbox link is in place but I want to trigger the click of it when a user clicks on the 'Zoom' button.
Here is my jQuery which currently isn't working:
$(document).on('click', '.view', function(){
$(this).closest("li.span1 a").click();
});
closest doesn't work like that. It selects the first/closest matching parent of the element. You should at first select the closest li element and then select the child/descendant a element.
$(this).closest("li.span1").children('a').click();
You could also use the parent and siblings methods for selecting the target element:
$(this).parent("div.hover-box").siblings('a.thumbnail').click();

How to make an HTML class containing links a link?

The image and caption, in class story has two different links. Image points to one location and link to another.
I need to make whole class story into a link.
<div class="story">
<img src="linkforimage">
Caption for image
</div>
I need a solution like this:
<a href="link">
<div class="story">
<img src="linkforimage">
Caption for image
</div>
</a>
Nesting a tags is a bad idea. I would use a delegate here. Have a wrapper a tag and in JS check which source span was clicked.
html
<a href="#" class="story">
<span data-href="link"><img src="linkforimage"/></span>
<span data-href="link2">Caption for image</span>
</a>
js (jquery based)
$('.story').on('click', 'span', function() {
document.location.href= $(this).data('href');
});
You can't have anchor tag inside anchor tag.
You can use onclick method to achieve your goal.
<div onClick="window.open(link);" class="story">
<a> <img src="linkforimage"></a>
<a onClick="window.open(link2); event.stopPropagation();" >Caption for image </a>
</div>
EDIT jsfiddle
Clarifying the problem I am facing right now is that I am using embedly platform, where image comes from . So, I just post with link and image are parsed from the link by embedly. But, that ahref takes user to original web site. Caption takes user to the page with that content on my web site. I need to make of caption to the whole div.
So, I found the answer with CSS,
I just added: style=" pointer-events: none;cursor: default;" on the link with image and style="cursor: pointer;" onclick="window.location='link'" on a class "story" in div.

Adding a new element HERE where the code is, not after another element

Made some BBcode for phpBB to allow users to post flickr pics with certain tags.
Each photo div in the thread needs to be unique, and the images load when the thread is loaded.
When it comes to the unique DIV, I'm stuck for a way to insert the uniquely named element into the DOM at the point the BBcode is inserted, THEN load the pics. And it appears I can't use PHP in BBcode, nor the templating tags - if I could easily make a unique photo element from the post ID and the flickr tag I'd be laughing. Oh, and I can't touch the template. It's all got to be within BBcode.
So, here's how I make a unique ID:
var flickrUser = "{URL}".split("/")[4];
var tag = "{URL}".split("/")[6];
var photoDIV = flickrUser + "-" + "tag";
Or...there's an element called with a unique post ID just above I could possibly use:
<div id="p61789" class="post bg2">
I tried
var postnumber=$(this).closest('div[class^="post"]').attr('id');
but it always seemed to return the FIRST matching div on the page, not the NEAREST to the point of the BBcode. This element is two "divs" below
<div class = "content">
and below the user posting area there is:
<div id="sig61789" class="signature">
So where I'm completely stuck is navigating to prev() or closest() or parent() or indeed anywhere from the point where I am without having a $(this) link to reference.
So shouldn't something like:
$(this).prev('content').html('<ul class="thumbs" id=photoDIV></ul>');
or even
$(this).html('<ul class="thumbs" id=photoDIV></ul>');
work? Everytime I think I understand jquery it all goes hazy again...
EDIT: More detail added for Pointy:
<div id="p63167" class="post bg2 online">
<div class="inner">
<span class="corners-top">
<span></span>
</span>
<div class="postbody">
<ul class="profile-icons">
<li class="edit-icon">
<a href="posting.php" title="Edit post">
<span>Edit post</span>
</a>
</li>
<li class="delete-icon">
<a href="posting.php" title="Delete post">
<span>Delete post</span>
</a>
</li>
<li class="report-icon">
<a href="report.php" title="Report this post">
<span>Report this post</span>
</a>
</li>
<li class="info-icon">
<a href="mcp.php" title="Information">
<span>Information</span>
</a>
</li>
<li class="quote-icon">
<a href="posting.php" title="Reply with quote">
<span>Reply with quote</span>
</a>
</li>
</ul>
<h3 class="first">
Re: Testing new bbcode - ignore
</h3>
<p class="author">
<a href="viewtopic.php">
<img src="" alt="Post" title="Post" />
</a>by
<strong>
xxx
</strong>ยป 13 Jun 2011 14:33</p>
<div class="content">
<script>var
APIkey="xxx";head.js("/forum/jflickrfeed/jflickrfeed.min.js","http://jquery-lazy.googlecode.com/svn-history/r14/trunk/jquery.lazy.source.js",function(){var
flickrUser="http://www.flickr.com/photos/xxx/tags/7thjanuary2010/".split("/")[4];var
tag="http://www.flickr.com/photos/xxx/tags/7thjanuary2010/".split("/")[6];var
photoDIV=flickrUser+"-"+"tag";$(this).html('
<ul class="thumbs" id="photoDIV">
</ul>');$.getJSON("http://www.flickr.com/services/rest/?jsoncallback=?",{method:"flickr.urls.lookupUser",url:"http://www.flickr.com/photos/xxx/tags/7thjanuary2010/",format:"json",api_key:APIkey},function(data){$('#cbox').jflickrfeed({limit:30,qstrings:{id:data.user.id,tags:tag},itemTemplate:'
<li>'+'
<a rel="colorbox" href="{{image}}" title="{{title}}">'+'
<img src="{{image_m}}" alt="{{title}}" />'+'</a>'+'</li>'},function(data){$('#cbox
a').colorbox();});});$.lazy([{src:'/forum/jflickrfeed/colorbox/colorbox/jquery.colorbox-min.js',name:'colorbox',dependencies:{css:['/forum/jflickrfeed/jflickrfeed.css','/forum/jflickrfeed/colorbox/example1/colorbox.css']}}]);});</script>
<ul id="cbox" class="thumbs"></ul>
</div>
<div id="sig63167" class="signature"></div>
</div>
</div>
</div>
the problem is you're assuming that the this context when you're executing within the script block is the script block itself, which is incorrect. If there is no context explicitly given, then your context is the window DOM element. Is there any reason you can't move this code to the page level, and initialize all the posts at page load?
$(function() {
$('.post').each(function(i,item) {
console.log(this); //Post DOM element.
//execute your flick retrieval code here.
});
}
Have you tried Javascript's DOM functions to add it?
http://www.javascriptkit.com/javatutors/dom2.shtml
For example, to insert right after the current script, with id "script1":
document.getElementById("script1").parentNode.appendChild( newelement );
You can add raw html too, just set innerHTML of the new element.

Categories

Resources