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.
Related
I want to add a close button to an image that I opened in my Image gallery. I have used the 'img' tag inside the anchor tag, where it should display a particular image of full size within the same page and want to close the image and come back to the main page.
I have came across doing this solution with Jquery, Is there anyway it can be done with javascript??
index.html
<div class="image-gallery-items">
<div class="image-gallery-item">
<a href="/dist/images/myImg.jpg"
class="thumbnail">
<span class="closebtn">×</span>
<img
src="/dist/images/myImg.jpg">
</a>
</div>
<div class="image-gallery-item">
<a href="/dist/images/myImg2.jpg"
class="thumbnail">
<span class="closebtn">×</span>
<img
src="/dist/images/myImg2.jpg">
</a>
</div>
I'm working on portfolio items, where every item looks like this
<div class="item">
<div class="item-title"></div>
<div class="item-subtitle"></div>
<div class="item-image"></div>
<div class="item-site"></div>
</div>
Previous div is hidden and items are shown by this code
<a class="project" :href="`http://www.${item.site}`" >
So, if I put like "mysite.com" in item-site div and hover over item output is www.mysite.com and that is ok if item-site is not empty. But if that div is empty output is www. and I dont want that.Is there a way to prevent that?
How to dissable click if item-site class is empty, so if I click on it nothing happens, but if is not empty and has link then if I click it's opens that link in new window.
You can use the pointer-events: none CSS statement to disable the hover and click events on an element.
In your case, it might look something like this:
HTML:
<div class="item">
<div class="item-title"></div>
<div class="item-subtitle"></div>
<div class="item-image"></div>
<div class="item-site not-clickable"></div>
</div>
CSS:
.not-clickable{
pointer-events: none;
}
If the DOM element (in this case <div class="item-site"></div>) is empty, then add the class not-clickable. If the element has content, then remove the class not-clickable.
Please also note that <div> tags are not clickable by default. It sounds like you want these to be links which are <a> tags. Also, an <a> tag without the href attribute has no pointer events - so an alternative would be to provide the href when you want the element to be clickable, and remove it when you want the element to not be clickable.
<div class="item">
<div class="item-title"></div>
<div class="item-subtitle"></div>
<div class="item-image"></div>
<a class="item-site">I should not be clickable</a>
<a class="item-site" href="https://www.example.com" target="_blank">
I should be clickable, and I will also open in a new tab
</a>
</div>
Here is a pen that might explain further:
https://codepen.io/mikeabeln_nwea/pen/yZQLaj?editors=1111
I have a container of images populated when the page is requested with the images available in a certain directory (so number of images is variable) using the Thymeleaf rendering framework:
<div id="lightgallery">
<a th:each="i : ${content.images}}"><img th:src="i"></a>
</div>
When doing that all images are displayed on the page below each other (while I would like to only display the first image as a place holder). When I click on one of them, the light gallery opens with the images as thumbnails.
I would like to now hide all images except the first one, which will be the place holder for the gallery. Clicking it will then open the gallery, where the placeholder image becomes the first image of the gallery. Kind of like such:
<div id="lightgallery">
<a><img src="first.png"></a>
<a th:each="img, i : ${content.images}}" th:if="${i > 0}"><img th:src="i"></a>
</div>
You can make it cleaner by rendering the first image together with the loop. Consider declaring a CSS class 'hidden' for display: none and use the it for second images onwards
<div id="lightgallery">
<a th:each="image, iter : ${content.images}" th:class="${!iter.first} ? hidden">
<img th:src="${image}">
</a>
</div>
You can use the property ${i.first} to tell if it's the first image. Here is how I would do it:
<div id="lightgallery">
<a th:href="${content.images[0]}"><img th:src="${content.images[0]}" /></a>
<a th:href="${image}"
style="display: none;"
th:each="image, i: ${content.images}"
th:unless="${i.first}"><img th:src="${image}" /></a>
</div>
I create a div box with css : overflow: scroll. Here is my code:
<div id="resultbox" style="overflow:auto">
<div id="abc"><a id="p1" href="123.php" class="fac_result" >abc</a>
<a id="p2" href="456.php" class="fac_result" >def</a>
<a id="p3" href="789.php" class="fac_result" >ghi</a>
</div>
<div id="ccc">
<a id="pt1" href="123.php" class="fac_result" >123</a>
<a id="pt2" href="456.php" class="fac_result" >456</a>
<a id="pt3" href="789.php" class="fac_result" >789</a>
</div>
<div id="kkk">
<a id="s1" href="ddd.php" class="fac_result" >wer</a>
<a id="s2" href="fff.php" class="fac_result" style="background-color:#C7C8CA">fff</a>
<a id="s3" href="ggg.php" class="fac_result" >ggg</a>
</div>
<div id="opo">
<a id="t1" href="qqq.php" class="fac_result" >rrr</a>
</div>
</div>
How can I do so that after an user clicked a link after the page refreshed but it will still return user to the row that I just selected which is highlighted background with background-color:#C7C8CA but I don't wish to scroll down the page. I just want it bring me back the selected link within the div box only. Is it possible?
You need to pass id via hash eg #id. Let's assume you want to redirect user to this row scrolled:
<a id="s1" href="ddd.php" class="fac_result" >wer</a>
You would redirect using:
page.php#s1
page.php is supposed to be the same page where above link is defined.
Working example is right here, click on following link:
My Answer
It would take you to my answer scrolled directly. The same technique is used here, here is the url:
https://stackoverflow.com/questions/7844837/
click-on-a-link-and-go-back-to-the-link-row-without-scroll-back/7845469#7845469
As can be seen at the end, there is #7845469 which is the id of row containing my answer.
Are you doing it cross pages?
You could use the scrollTo plugin, which can scroll inside a div.
http://flesler.blogspot.com/2007/10/jqueryscrollto.html
Their examples are created that way: http://demos.flesler.com/jquery/scrollTo/
If you want it on pagereload, and are setting the background dynamic - then just do:
$('resultbox').scrollTo($('a[background-color=#C7C8CA]'));
I'm asking for some orientation and recommendations for developing something similar like the yahoo movies page: http://movies.yahoo.com/
I don't know how the thing at the top with the arrows and different title of movies is called but I've seen it several times.(the one that has 4 options:expendables, yogi bear, etc) I want to add something like this so I'm asking for orientation on what to look for and develop it on java script.
thanks!
Yes, that's what's called a Carousel, and there are many libraries and plugins for doing it. You might try Yahoo's own YUI Carousel Control or this one for jQuery, but there are plenty of others out there--just Google for them.
It's basically four links and four images here. When you click on the link, the associated image will be shown.
I will show you an example.
HTML:
<div class="links">
<a class="link-first" href="#">Show image 1</a>
<a class="link-second" href="#">Show image 2</a>
</div>
<div class="images">
<img class="image-first" href="#" alt="" />
<img class="image-second" href="#" alt="" />
</div>
JavaScript (jQuery):
$(".links a").click(function()
{
$(".images img").hide();
$(".images ." + this.className.split("-")[1]).show();
});