Trying to redirect to different page on click of image
$('.grid').prepend('<div id="new" style="width:50px;background-color:#1879A9;padding-left:3px;margin-top:10px"><img id="test" src="#somesource"></div>');
Tried the below code:
$('.grid').on('click', '#test', function() {
alert("test"); //It didnt work.
});
Maybe something like this:
$('.grid').on('click', window.location.href = 'page_url');
First you've to use class insted of id , (semantically error when same id for multiple element )
also to redirect to your page when clicking on the image ,
first prevent default action when click on the grid , so it wont redirect when clicking on link directly .
then get the link of the a parent tag image and perfom redirect programticly using $(this).parent("a").attr("href"); window.location.href
See below snippet :
$('.grid').prepend(
'<div class="new" style="width:50px;background-color:#1879A9;padding-left:3px;margin-top:10px"><img class="test" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcShuHaRYzsoiz_KpVL5Ite65oK_ILy3p1b5vrZ996D1HFKdAS64"></div>');
$('.grid').on('click', '.test', function(e) {
e.preventDefault();
var urlRedirect = $(this).parent("a").attr("href");
console.log("redirecting to ..."+ urlRedirect);
// this will redirect after 2 sec
setTimeout(function(){
window.location.href = urlRedirect;
},2000)
});
.test {
width:20px;
height:20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid"></div>
Edited
I think you just create multiple same ID elements.
Change using ID to class, it should work fine.
Edited
Modified base on asker's comment
$('.grid').each(function(event){
if($(this).find('.test').length > 0) return false;
var _html = '<div style="width:50px;background-color:#1879A9;padding-left:3px;margin-top:10px"><a class="link" href="'+$(this).data('url')+'"><img class="test" src="'+$(this).data('image')+'"></a></div>';
var new_node = $(_html);
$(this).prepend(new_node);
new_node.find('.test').click(function(event){
event.preventDefault();
alert($(this).attr('src'));
// redirect here
// window.location.href = $(this).parent().attr('href');
})
})
.grid{
width:40px;
height:40px;
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid" data-url="x.x.x" data-image="http://x.x.x"></div>
<br/>
<div class="grid" data-url="y.y.y" data-image="http://y.y.y"></div>
<br/>
<div class="grid" data-url="z.z.z" data-image="http://z.z.z"></div>
<br/>
<div class="grid" data-url="a.a.a" data-image="http://a.a.a"></div>
Related
I have two div and I want to open these two div in new tab by using one click.
<div id="google">This is Google.</div>
<div id="youtube">This is YouTube.</div>
Something like this should do that
$('a').on('click', function(e) {
e.preventDefault();
$('a').each(function() {
window.open(this.href, '_blank');
});
});
Here's a demonstration using a button
Add 'target=_blank' to in <a> tag .
This is Google.</div>
This is YouTube.</div>
Use javascript for both
<script>
$('#googel,#youtube').click(function()
{
// your commands...
})
</script>
Without javascript, it's not possible to open two links in two different tabs on one click. So my suggestion is to wrap those divs in a parent div and do some javascript.
var wrapper = document.getElementById('wrapper');
wrapper.onclick = function(){
window.open('http://google.com', '_blank');
window.open('http://youtube.com', '_blank');
};
#wrapper{
cursor: pointer;
}
#wrapper:hover{
background-color: #0ff;
}
<div id="wrapper">
<div id="google">This is Google.</div>
<div id="youtube">This is YouTube.</div>
</div>
As you can try this:
$("#google, #youtube").click("Do your work");
For more:
Reference-1 & Reference-2
Let's say I have this inner link which is positioned inside a hidden div (display:none) - the div toggles when a button is clicked:
<a name="here">Show me!</a>
How can I make the element visible when somebody enters the url: mypageurl#here, without clicking the toggle button (make it visible by default when this specific link is entered)?
$().ready(function () {
var hash = $.trim(window.location.hash);
if (hash != '') {
var prt = $('[name="' + hash.substr(1) + '"]').parent();
prt.show();
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="display:none;"><a name="here">Show me!</a></div>
Full code!
You could use the CSS "visibility:hidden", then use JavaScript to change that to "visibility:visible" when someone enters a certain phrase.
Alternatively, you could just use display: ""; or display:block on the "display:none" div when the same action occurs, again using some JavaScript.
You can use the below script.
<script>
$(document).ready(function(){
var loc = document.location.hash;
if(loc == "#test")
{
$('#test').show();
}
});
</script>
Here is the source code of a simple page that I made:
<html>
<script src="http://code.jquery.com/jquery-latest.min.js "></script>
<body>
<div id="hide" style="display:none">
<a name="here">Show me!</a>
</div>
</body>
<script>
$(document).ready(function(){
if(document.location.href.search("#hide")>0){
$("#hide").toggle();
}
});
</script>
</html>
It will show the div with the id hide if the page has the text "#hide", else it remains hidden.
I've been attempting to create an effect where a user clicks on an image, that image is replaced by another image which also acts as a link.
However my problem is that whenever I click the replaced image, the link doesn't work.
Fiddle: http://jsfiddle.net/ha6qp7w4/321/
$('.btnClick').on('click',function(){
$(this).attr('src','https://placekitten.com/g/200/300')
$(this).attr('href','google.com')
});
img tags don't have href properties. You need to wrap the image in an anchor and assign the url to that, or do a custom redirect.
Notice your image html on inspection of element:
<img src="https://placekitten.com/g/200/300" id="1" class="btnClick" href="google.com"> <!-- not valid! -->
This isn't valid because imgs aren't anchors!
function first() {
this.src = 'https://placekitten.com/g/200/300';
$(this).unbind("click");
$(this).on("click", second);
}
function second() {
window.location.href = "https://www.google.com";
$(this).unbind("click");
$(this).on("click", first);
}
$('.btnClick').on('click', first);
(I tried to make a fiddle but it wouldn't save, but this should work)
You need to store your actions in functions so you can revert if need be. First action is the change the source, then change the event to redirect you like a link.
here is an example.
example
html part
<img src="http://i.imgur.com/o46X87d.png" data-new="http://i.imgur.com/9lf2Mjk.png" id="1" class="btnClick" />
add data-new attribute on image with new url of image
and replace it with js
$('.btnClick').on('click',function(){
var url = $(this).attr("data-new");
$(this).attr("src", url);
});
I would use a totally different approach, but here's how to do that with the code you already have:
<div class="btnClick">
<img src="http://i.imgur.com/o46X87d.png" id="1" />
<a href="javascript:check()" id="2" style="display:none;">
<img src="http://i.imgur.com/9lf2Mjk.png" id="static" />
</a>
</div>
<script type="text/javascript">
$('.btnClick').on('click',function(){
if($('#1').is(':visible')) {
$('#1').hide();
$('#2').show();
} else {
$('#1').show();
$('#2').hide();
}
});
</script>
I purposely didn't use toggle() to better show the technique, in case you'd want to turn the click event off when the clicking image appears etc.
I am trying to get the class on click of each block as the content will
be changing on search of each product dynamically, and after ajax call
the same class which i have got when clicked should add focus to it.
code :
$('#somecontainer').on('click',function(e) {
var $target = $(e.target);
if ($target.hasClass("dynamic class")) {
// same class has to focus().
}
});
In Application View Example :
![enter image description here][1]
Code Screen-Shot :
![enter image description here][2]
Appreciate your help.
How about something like this?
HTML
<div id="somecontainer">
<div class="dynamic1">1</div>
<div class="dynamic2">2</div>
<div class="dynamic3">3</div>
<div class="dynamic4">4</div>
<div class="dynamic5">5</div>
<div class="dynamic6">6</div>
</div>
Javascript
$('#somecontainer').on('click', function (e) {
var $target = $(e.target);
var clazz = $target.attr('class');
$('.' + clazz).first().attr('tabindex', '-1').focus();
});
Fiddle available here.
HTML:
<div id="somecontainer">
<div class="dynamic1">1</div>
<span class="dynamic2">2</span>
<p class="dynamic3">3</p>
<div class="dynamic4">4</div>
<span class="dynamic5">5</span>
<p class="dynamic6">6</p>
</div>
Jquery:
$(document).ready(function(){
$("#somecontainer > *").click(function(){
alert($(this).attr('class'));
});
});
CSS
#somecontainer > *{
width: 100px; height:100px; background:#ccc;
margin:3px; clear:both;
}
You question is not accurate for your purpose. But rather than handling click event of container,you can simply handle click event of product block as follow (each product blocks have to be set base static class as product):
<div class='product dynamic1'></div>
<div class='product dynamic2'></div>
$('#somecontainer .product').on('click',function(e) {
//implementation
});
or each product is div element without inner child element, you can handle as follow:
$('#somecontainer div').on('click',function(e) {
//implementation
});
try sample at : http://jsfiddle.net/kyawlay/8z75c7f4/
i use a simple bit of code to make a div collapse, this is it:
<script language="JavaScript">
<!--
function expand(param)
{
param.style.display=(param.style.display=="none")?"":"none";
}
//-->
</script>
what code do i add to make it recognise when one div is open an collapse the previous div?here's the link I'd use:
Link 1
<div id="div1" width="300px" style="display:none"></div>
Any ideas?
This is something jQuery works really well for. Here is a working example in jsfiddle.
http://jsfiddle.net/mrtsherman/uqnZE/
Example html
<div class="category">A
<div class="artists">Apple<br/>Ace<br/>Ants<br/></div>
</div>
<div class="category">B
<div class="artists">Bee<br/>Bop<br/>Book<br/></div>
</div>
<div class="category">C
<div class="artists">Cake<br/>Chimp<br/>Charles<br/></div>
</div>
And the code:
$(".category").click( function() {
$(".artists").hide();
$(this).children(".artists").show();
});
Basically what it does is hide all the divs that contain artists, then shows the div for the one you clicked on. Really simple.
If you were willing to use jQuery, the selector of your interest is something along the lines of
$('div#parent-container > div').filter(':visible');
For example, if I were to demonstrate with next & previous, I would do it something like this. With targeted links it would work by appending ID's to the divs and referencing those in the href attribute of `anchors'. (now included within example)
Something to mess with:
$(function(){
//Reference Object
var $divs = $('div > div');
//Buffer for selected variable
var $selected = 0;
//Show first
$divs.eq(0).show();
$('#next').click(function(){
//Update selected var
$selected = $divs.filter(':visible');
//Save next to variable
var $next = $selected.next();
//Change Visibility
toggle($next);
//Prevent Default
return false;
});
$('#prev').click(function(){
$selected = $divs.filter(':visible');
var $prev = $selected.prev();
toggle($prev);
return false;
});
$('a').click(function(){
$selected = $divs.filter(':visible');
var selector = $(this).attr('href');
if(selector == '#') return false;
toggle( $( selector ) );
return false;
});
var toggle = function($toggle){
if(!$toggle.length) return false;
$selected.hide();
$toggle.show();
}
});
<!--Simple Implementation and dependancies-->
<a id="prev" href="#">Prev</a>
<a id="next" href="#">Next</a>
Show Item Four
<div>
<div id="item-1">One</div>
<div id="item-2">Two</div>
<div id="item-3">Three</div>
<div id="item-4">Four</div>
<div id="item-5">Five</div
<div id="item-6">Six</div>
</div>
div > div {
font-size:5em;
width:auto;
text-align:center;
padding:20px 0;
display:none;
}