jQuery : other links inside div element link - javascript

How do I separate with all the icons still in the div element?
Basically, inside div, I have 4 things to click. The last was made to link for the whole div element click. The middle elements were for specific icon clicks. But now, for specific icon clicks, I want the clicks to connect to their own links. For example, if one clicks github png , it should go to github link, but now the google div link overwrites it. For whatever I click, I only connect to one link, which I do not intend.
Thanks
<script type="text/javascript">
$(document).ready(function(){
$(".Apps").click(function(){
window.open($(this).find("a").last().attr("href"));
return false;
});
});
</script>
<div class="Apps">
<p><b>Web Dev Project 3</b><br><i>(coming soon)</i></p>
<a href="https://github.com/" target="blank">
<img src="https://github.com/apple-touch-icon-114.png" width="30" height="30"/></a>
<a href="http://google.com" target="blank">
<img id="logo" src="http://cclub.slc.engr.wisc.edu/images/Under-Construction.gif" width="30" height="30"/></a>
</div>

There's really no such concept as an <a> being "connected with" a containing element. Instead of that, why not just catch "click" events on the <div> and filter out ones that aren't on the icons:
$('div.Apps').on("click", ":not(a img)", function() {
window.location = "http://google.com";
});
The way your markup is done, it's hard to tell how there'll be screen area that's not icons inside the container, but presumably you've got padding/margins or something.

Exclude the anchors:
$(".Apps").click(function(e){
if (! $(e.target).closest('a').length ) {
window.open($(this).find("a").last().attr("href"));
return false;
}
});

If I were you I would assign different ids for the div and the a link, then inside the a specific link instructions just prevent the default behaviour of the click;
$(´#aLinkId´).on(´click´, function(){
event.preventDefault();
event.stopPropagation();
window.open(whatever here);
});
$(´#aDivId´).on(´click´, function(){
window.open(other whatever here);
});

I this what you are looking for?
http://jsfiddle.net/gespinha/WPsbb/2/
$(document).ready(function () {
$(".Apps").click(function () {
window.open($(this).find("a").last().attr("href"));
return false;
});
$(".Apps > a").click(function () {
window.open($(this).attr("href"));
return false;
});
});

Related

trying to make a link look different when page is clicked in html

well i have seen some similar questions but i couldn't find the solution i needed i am trying to make it so that when the user moves from one page to another in the website when the page is loaded the a tag should change color and stay that way i have tried using this code but it didnt work at all here is the html of the code
<div id="button-group" style="width:100%">
<img src="felix.png" id="cat" >
home
Hobbies
Contact
Services
</div>
so for example if i am on the Hobbies page and click the home page the home page should turn the color to blue or if i am on hobbies and its clicked it should also change color onload
here is the jquery that i tried
$(document).ready(function(){
$("#hobbies").trigger('.click');
});
and here is the css when triggered
.a :click {
background-color:rgba(0, 183, 255, 0.788);
}
You can use sessionStorage to store the link that was clicked and get it when the new page is loaded to set a class to the last clicked navigation element.
$(document).ready(function() {
let clicked = $.trim(sessionStorage.getItem("clicked"));
if (clicked) {
$("#button-group a").each(function() {
if ($.trim($(this).attr("href")) == clicked) {
$(this).addClass("clicked");
};
});
}
$("#button-group a").on("click", function() {
$("#button-group a").each(function() {
$(this).removeClass("clicked");
});
let link = $(this).attr("href");
$(this).addClass("clicked");
sessionStorage.setItem("clicked", link);
});
});
As a stack snippet for this doesn't work on Stackoverflow, here's a Fiddle with the adjustment to use preventDefault() on click of a link. Just run the Fiddle again after clicking on a link to see that the last clicked link gets added the class clicked.

FadeIN FadeOUT page transition javascript bug

When I click any of my links to take me to a new HTML page, the javascript routes me to the same HTML page and not each links individual href.
Heres my code
$(document).ready(function() {
$('body').css('display', 'none');
$('body').fadeIn(1000);
$('.link').click(function(event) {
event.preventDefault();
newLocation = $('.link a').attr("href");
$('body').fadeOut(1000, newpage);
});
function newpage() {
window.location = newLocation;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="music" class="link">Music</div>
<div id="exhibition" class="link">Exhibition</div>
<div id="contact" class="link">Contact</div>
<div id="about" class="link">About</div>
My aim is to have the Page FadeIN on load and FadeOUT when a link has been clicked, I am getting my desired effect but im just not sure what this issue with the links is - Anyone know?
As #Taplar says, when you fetch the location from the link's href, you're not getting the right one. You're just fetch the first link in the document and looking at its href attribute.
You can easily fix this by replacing this (which looks for all anchor elements in the document that have an ancestor with the link class and then returns the first one it finds):
newLocation = $('.link a').attr('href');
with this (which finds all anchor elements as a child of whatever element has the click handler registered that was clicked):
newLocation = $(event.currentTarget).find('a').attr('href');
The other thing you're doing that is tricky, but doesn't necessarily break anything, is relying on newLocation being correctly shared between the click handler and the newpage function. I would suggest instead that you explicitly pass a parameter to newpage so that it is more reusable and you can be sure where the value is coming from.
You can see this working below.
$(document).ready(function() {
$('body').css('display', 'none');
$('body').fadeIn(1000);
$('.link').click(function(event) {
event.preventDefault();
newLocation = $(event.currentTarget).find('a').attr('href');
// Pass anonymous function to fadeOut that calls newpage with newLocation
$('body').fadeOut(1000, function () { newpage(newLocation); });
});
// newpage now accepts a parameter and uses it
function newpage(location) {
// Print to console so you can see what URL is getting used
// You'll always get 404 using StackOverflow's UI since they don't have the relevant pages
console.log(location);
window.location = location;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="music" class="link">Music</div>
<div id="exhibition" class="link">Exhibition</div>
<div id="contact" class="link">Contact</div>
<div id="about" class="link">About</div>

Refresh div content after click link

Prestashop v1.6 default-bootstrap theme, product-list.tpl file.
I have a button add to cart and div with some smarty code:
<a class="ajax_add_to_cart_button" href="....">
<div id="div1">{if $added}Added{else}not added{/if}</div>
Now when I click to link I want to only refresh div content.
I already try some code finding in stack but my knowledge is still not enought.
What I try and it is not work:
$(document).on('click', '.ajax_add_to_cart_button', function() {
$("#div1").load() /*also $("#div1").load("#div1")*/
});
and:
$("#div1").load(location.href + " #div1");
and few more.
EDIT, also this is not work for me:
$(function(){
$(document).on('click', '.ajax_add_to_cart_button', function(e) {
e.preventDefault();
$("#div1").load($(this).attr("href")); /*and this: $("#div1").load($(this).attr("href #div1"));*/
return false
});
});
EDIT2: When I try this code is half working
$(document).ready(function(){
$(".ajax_add_to_cart_button").click(function(){
$("#div1").html("result reloaded successfully");
});
});
why half? Because text is display but only in first product, and it is no matter which one product I click, and also I try switch html() to load() or refresh() but then is not working.
EDIT3
$(document).ready(function(){
var productid = "{product.id_product}"
$(".ajax_add_to_cart_button").click(function(){
$("#div1" + productid).html("result reloaded successfully");
});
});
<div id="div1{product.id_product}">{if $added}Added{else}not added{/if}</div>
It is display info in all product, all container in product have now different id.
try following and check if it works..
$(function(){
$(document).on('click', '.ajax_add_to_cart_button', function(e) {
e.preventDefault();
$("#one").load($(this).attr("href"));
return false.
});
});
I noticed you have wrong class in your selector. please check that too.
Mmm... I see... I guess your problem is that you use the same id for all the products. The DOM 'should' have a unique ID for one element, try another way, maybe a simple class as a selector, you couldn't use the same id for all that elements :)
For example (I'm assuming that your div have mybeautifuldiv class):
$(document).ready(function(){
$(".ajax_add_to_cart_button").click(function(){
$(".mybeautifuldiv").html("result reloaded successfully");
});
});
If you're trying to do this when there is a list of products (category page etc.) then you need to target a proper div. And you might not want to use id but class in your div.
<div class="my-custom-div">{if $added}Added{else}not added{/if}</div>
Is this div inside 'add to cart' anchor?
If it is then you need to target it:
$(document).ready(function(){
$(".ajax_add_to_cart_button").click(function() {
$(this).find('.my-custom-div').html('Content updated!');
});
});
If it is not then you can traverse to parent div of product and find your custom div inside it. For example in a category page of a default prestashop theme:
$(document).ready(function(){
$(".ajax_add_to_cart_button").click(function() {
$(this).closest('.product-container').find('.my-custom-div').html('Content updated!');
});
});

Unable to make modal box appear using JQuery

Using JQuery I'm trying to get a modal box to open after a click is made on an image. I can make the box open using a hard link, but not when the user clicks the image. I've tried using .show but this does'doesn't seem correct?
Example fiddle here http://jsfiddle.net/63VeU/13/
The below code structure using .go etc must remain as thats how the images are identified that they can be clicked on.
I know this is a rookie, question, but I'm unable to find the anser I need anywhere.
$(document).ready(function() {
$('.go img').css('cursor', 'pointer');
$('.go').on('click', 'img', function(e) {
$(this).width(100).height(100).appendTo('#modal-show');
$( "#modal-show" ).show( "slow", function() {
// Animation complete.
});
SaveMyBadge();
return false;
});
});
Sure. Here you got a working demo. I noticed you do some additional stuff like SaveMyBadge(); so updated the fiddle.
<a href="#modal-show" title="Clicking this link shows the modal">
<img class="images BadgeImgOutline responsive-image" src="http://kudosoo.com/GBadges/badge9.jpg" alt="badge-image" />
</a>
$(document).on('click', '.click-badge', function () {
//do other stuff if you need to
SaveMyBadge();
return false;
});

Open Link in New Tab on Button Active

I'm trying to have a button on my website that when is active(on click once) adds target _blank to a href links that has a certain class so they open in a new tab.
This is the code for the button
<li id="toolbar-display">
<dl>
<dt>Display</dt>
<dd id="toolbar-display-newtab" class="first last"><span>New Tab</span></dd>
</dl>
</li>
Then this is a href link class that I would like to add _blank to.
<a class="item-link" href="url">
So for this, I use the following javascript which I modified from http://jsfiddle.net/UJMgQ/2/
<script type="text/javascript">
$(function () {
$('#toolbar-display-newtab').click(function () {
if ($(this).toggleClass('active')) {
$('.item-link').attr('target', '_blank');
} else {
$('.item-link').removeAttr('target');
}
});
});
</script>
The code looks like it's correct, but unfortunately it doesn't work and I'm unclear at this point whether it's not detecting the button's active state or its not able to add _blank. Any help would be appreciated =)
I'm not exactly sure of what the toggleClass() returns but based on my test, it does not give you a boolean value that you can use for an if else condition..
Why not try hasClass() to detect if the class active is already set then use toggleClass after detecting it.
I tried recoding your post though I'm not sure if I got your logic right.
$(function () {
$('#toolbar-display-newtab').click(function () {
if ($(this).hasClass('active')) {
$('.item-link').attr('target', '_blank');
} else {
$('.item-link').removeAttr('target');
}
$(this).toggleClass('active');
});
});

Categories