jQuery Div OnClick trigger sibling link - javascript

How would I make <div class="hover"></div> on click trigger <a href="http://example.com" target="_blank">? I've tried using the sibling selector and I can't seem to get the hang of it..
When somebody clicks on div.hover I need a new window to open using the href of the sibling anchor.
<ul id="photoUL">
<li>
<div class="hover"></div>
<a href="http://example.com" target="_blank">
<img width="150" height="150" style="border: 1px solid #000000;" title="2013 Dirty Duathlon" src="http://example.com/example.jpg">
</a>
EXAMPLE
</li>

$('div.hover').on('click',function(){
window.location.href = $(this).next('a').attr('href');
});
Demo ---> http://jsfiddle.net/NGwL9/

Demo: http://jsfiddle.net/kuJPC/
This will open http://example.com in a new tab when .hover is clicked which will have the same behavior as <a href="http://example.com" target="_blank">
$('.hover').click(function() {
window.open('http://example.com','_newtab');
});

If you don't want to use "window.open", you can put a click handler on the hover and use the next function to simulate the click of the next anchor tag.
$('.hover').click(function(){
$(this).next('a')[0].click();
});
Here is a working jsfiddle:
http://jsfiddle.net/4FNJM/1/

Related

jQuery: hide by class name and then show next element by the same class name?

I'm trying to create a demonstration type of thing in my page.
basically the first element is showing on the page load and the rest are hidden.
once the close button inside the element has been clicked, I need this showing element to hide and the next element with the same class name to show and the same process until there is no more element in the next() to show.
my html looks like this:
<a class="tooltip" href="#">
<div style="left:-200px;" class="bubs"><div style=" position:absolute; top:10px; right:10px;"><i class="cls" aria-hidden="true"></i></div></div>
<span class="tooltiptext">Some texts</span><i style="color:#F90;" class="fa fa-thumbs-up" aria-hidden="true"></i></a>
<a class="tooltip" href="#">
<div style="left:-200px;" class="bubs"><div style=" position:absolute; top:10px; right:10px;"><i class="cls" aria-hidden="true"></i></div></div>
<span class="tooltiptext">Some texts</span><i style="color:#F90;" class="fa fa-thumbs-up" aria-hidden="true"></i></a>
And my jquery looks like this:
$('.cls').click(function() {
$('.bubs').hide();
$(".bubs").next().show();
});
My simple code will hide .bubs that is showing but it doesn't show the next .bubs
Could someone please advise on this issue?
Thanks in advance.
.bubs are not siblings. Go to ancestor a and then find .bubs in next a like following.
$('.cls').click(function () {
$(this).closest('.bubs').hide();
$(this).closest('a').next('a').find('.bubs').show();
});
The JQuery method "next" should contain the class of the next element you want to show.It should work if you use next(".bubs") like this :
$('.cls').click(function() {
$('.bubs:first').hide();
$(".bubs:first").next(".bubs").show();
});
Note : I assume that the element you want to hide is the first one who has "bubs" class.

Removing an image and showing this removed image in the deleted section

I have one div "upload" where various images are displayed and each image has an remove option which if clicked on hides the image.
I need to show the particular hidden images in below deleted section.
HTML
<div id="upload">
<a href="javascript:void(0);" onclick= remove()> Remove </a>
<img src="pic1.jpg">
</div>
<div id="deleted">
</div>
JS
function remove(){
$("upload").hide();
}
If I click on remove option in div "upload" then I need to hide that image and simultaneously show that image in div "deleted".
I've done some changes your original code.
HTML
<div id="upload">
<a>Remove</a> <img src="pic1.jpg" />
<a>Remove</a> <img src="pic2.jpg" />
<!-- etc. -->
</div>
<div id="deleted"></div>
JS (with jQuery)
$(function() {
$("#upload a").click(function(e) {
$(this).next("img").appendTo($("#deleted"));
$(this).remove();
});
});
By using jQuery, you can dynamically bind the click event to every a inside #upload. Then, relatively to the clicked a, find the next img, append it to #deleted (with appendTo), and finally delete the clicked a.
Here I have a sample JSFiddle http://jsfiddle.net/x3f6L9re/ with a demonstration how the problem can be solved.
Since you're intending to use jQuery, please don't add the function call in the HTML.
This line:
<a href="javascript:void(0);" onclick= remove()> Remove </a>
is thus obsolete. I used the tag button instead of a, which fits better here.
My code would be:
HTML
<div id="upload">
<figure>
<button type="button" role="button">Remove</button>
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/9/9e/JQuery_logo.svg/524px-JQuery_logo.svg.png" alt="Image">
</figure>
<figure>
<button type="button" role="button">Remove</button>
<img src="https://upload.wikimedia.org/wikipedia/commons/d/d3/Crystal_source.png" alt="Image">
</figure>
<figure>
<button type="button" role="button">Remove</button>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/ca/AngularJS_logo.svg/695px-AngularJS_logo.svg.png" alt="Image">
</figure>
</div>
<div id="deleted">
</div>
I enclosed every image in a tag figure for better demarcation.
CSS
#upload, #deleted, figure {
border: thin solid black;
}
Adding border for visualisation of the effects.
And here is the jQuery:
JavaScript
$('button').click(function () {
$('#deleted').append($(this).next());
$(this).next().hide();
$(this).hide();
$(this).parent().css('border', 'none');
});
When a button is clicked its next sibling, which is the image, is appended to the div with id="deleted". Then the next sibling of the button, the image, is hidden, together with the button itself. For cosmetical purposes the border of the parent element - figure - is removed.
You can further enhance the code.
follow the below steps
<div id="upload">
Remove
<img src="pic1.png"/>
</div>
<div id="deleted">
</div>
Javascript part
$(document).ready(function() {
$("#removebutton").click(function() {
$("#deleted").html($("#upload").find("img"));
});
});
Check this working fiddle http://jsfiddle.net/zzpgn6zr/
Let me know if it is helpful

jQuery show on <a> tag on mobile Safari

This works on Chrome and Firefox, but not on mobile Safari. I'm trying to simple show an img when a link is clicked. jQuery 1.10.1
HTML
<h1>Region</h1> <img src="/static/img/ajax-loader.gif" class="loading" />
<hr>
<div class="list-group">
<a onclick="clickMe()" class="list-group-item" href="/feedback/studio/110/">Colorado <span class="glyphicon glyphicon-chevron-right pull-right"></span></a>
</div>
JS
<script type="text/javascript">
function clickMe() {
$('.loading').show();
}
</script>
CSS
.loading {
display: none;
}
The img does not show when the link is clicked. The image DOES show if I change the href to "#" to test. The image IS VISIBLE if I just go back in the browser after following the link, but of course I'm trying to get it to show when the link is clicked.
Am I missing something simple to get this working on mobile Safari?
I'd try that:
Firstly, remove inline onclick attribute
<a class="list-group-item" href="/feedback/studio/110/">Colorado <span class="glyphicon glyphicon-chevron-right pull-right"></span></a>
bind event using, e.g, jQuery and prevent default behaviour and delay
a little redirection: {i'm delegating it to document level so you
are sure this event will be fired whenever/wherever you set it}
$(document).on('click', '.list-group-item', function(e){
e.preventDefault();
var self = this;
setTimeout(function(){
window.location = self.href;
},250);
});

Expand and collapse menu, without taking user to top of the page

I have an image button, and I am using JavaScript to EXPAND and COLLAPSE a menu (by toggling between a class that has display: none). The toggle works fine (see the code below). However, whenever I click the button, it takes the user back to the very top of the page. I just want the "click" to expand and collapse the menu and keep the user at the location they currently are. How can I achieve this?
<script type="text/javascript">
function changeClass()
{
$('div#mainmenu_wrap').toggleClass('hidemenu');
}
</script>
<a href="#" onclick="changeClass()">
<img src="images/menu_icon2.png" width="33" height="33" />
</a>
change this line <a href="#" onclick="changeClass()">
to this: <a href="#" onclick="changeClass(e)">
and change the structure of your changeClass() function to below and add the given line:
function changeClass(event){
event.preventDefault();
.
.
.
}
Got it working...
Got rid of the href, and used a button tag instead. That worked.
<button onclick="changeClass()" class="menuIco">
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/menu_icon2.png" width="33" height="33" />
</button>

Add data element to element

I have a link. Like this:
I want remove this title and put the title text in a data attribute. As data-title. How can i make this with jquery.
So remove the title element. And place the text of the title element. In a new title data element.
Thanks
// you'd probably wanna give an unique id to your anchor to more easily identify it
var anchor = $('a');
var title = anchor.attr('title');
anchor.removeAttr('title');
anchor.attr('data-title', title);
// set title data-title to value of title
$("a").attr("data-title", $("a").attr("title"))
// clear title
$("a").attr("title", "");
Also I would give your link a class, so this action doesn't run on every a on the entire page.
Try:
$("a").attr("data-title", $("a").attr("title"));
$("a").removeAttr("title");
User attr method to set the attribute of element. And removeAttr method to remove the attribute
$("a").attr("data-title", $("a").attr("title"));
$("a").attr("title", "");
// or
$("a").removeAttr("title");
PS: Would suggest a unique id or a class for the anchor element
<a id="1" href="#" title="Title from this link 1"></a>
<a id="2" href="#" title="Title from this link 2"></a>
var t = $("a[title='Title from this link 1']").attr("title");
$("#2").attr("title", t);
jsfiddle link : http://jsfiddle.net/NEBh4/
you can see the changes happen to the links in the result window by using firebug or any other dev tool
$(document).ready(function(){
//example code one
var tempLink = $('#link');//cash the jquery object for performance
tempLink.attr('data-title', tempLink.attr('title')).removeAttr('title');
/*In above example I used an id to capture the html element, which mean u can only do above step only for one element. If you want to apply above step for many links you can use the following code. In this case I'm using a class name for the link element*/
//example code two
$('.link').each(function(){
$(this).attr('data-title', $(this).attr('title')).removeAttr('title');
});
});
HTML for the above example
<!-- for example code one -->
<a id="link" class="link" href="#" title="Title from this link"></a>
<!-- for example code two -->
<a class="link" href="#" title="Title from this link 1"></a>
<a class="link" href="#" title="Title from this link 2"></a>
<a class="link" href="#" title="Title from this link 3"></a>

Categories