This question already has answers here:
How to consume button click inside <a> tag to prevent link being followed?
(5 answers)
Closed 4 years ago.
I have a a tag which wraps and have some content inside. When the box clicked it redirect to some other page. At the same time I have input type="button" element inside the a wrapper. And this button has to redirect to a separate page when clicked.
So far I have tried some jquery methods and all of them lead me to the failure.
I formed a sample structure here.
$(".wrapper").click(function(e) {
if (e.target.className == "btn") {
e.preventDefault();
var link = $(this).find(".btn").attr('data-link');
console.log(link);
//window.location.href = link;
}
});
a.wrapper {
display: inline-block;
height: 100px;
width: 100px;
border: 1px solid #333;
background: #ddd;
text-align: center;
}
a.wrapper * {
display: inline-block;
padding: 5px;
margin: 3px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="google.com" class="wrapper">
<span>some content</span>
<input type="button" class="btn" value="click me" data-link="yahoo.com" />
</a>
How can I prevent the a tag click when I click the button?
I do not understand your goal?
an a is a text link while a button is a HTML element and both send ya somewhere. Why in the world would ya mix them together?
If you are thinking you need to for the .wrapper then you need to understand that CSS is often time better bigger and more specialized.
A class for btn is so generic that many web developers style an entire brand with it then add flavor for each with id's
If this is truly a special button try using an #id with the css.
<form>
<span>some content</span>
<button type="submit" class="btn" id="special_button" formaction="https://www.yahoo.com" >
</form>
CSS add
#special_button {
-webkit-transition-duration: 0.4s; /* Safari add all the browsers your targeting */
transition-duration: 0.4s;
}
#special_button:hover {
background-color: #4CAF50; /* Green */
color: white;
}
Related
I have three different Links that all lead to the same page. But I need the page to load with different CSS settings (depending on which link was clicked, certain elements should be hidden on the new page).
Is that possible? Thank you!
Sure, you can use the :target pseudo-class to do so.
From MDN:
The :target CSS pseudo-class represents a unique element (the target element) with an id matching the URL's fragment.
With target, you click a link, like page.html#some-condition, and in your CSS, listen for that condition. When the id matches the hash in the address bar, you have a match and the target is met.
A link
<div id="some-condition"></div>
#some-condition:target {
/* style appropriately */
}
Here's a quick demo. In this case, the links contain the ids, but as demonstrated above, you can structure things however you'd like.
#red:target ~ .result {
background-color: red;
}
#blue:target ~ .result {
background-color: blue;
}
#green:target ~ .result {
background-color: green;
}
.result {
width: 100px;
height: 100px;
display: inline-block;
border: 1px solid;
background-color: #fff;
transition: 0.3s background-color;
}
<a id="red" href="#red">Red</a>
<a id="blue" href="#blue">Blue</a>
<a id="green" href="#green">Green</a>
<div class="result"></div>
jsFiddle
I need help with a "Show and hide div on link click using jQuery" being used multiple times on the same page. Using this guide https://coding-tips.com/javascript/show-hide-div/ I have added a Show and hide div link to a page that when clicked adds a WHMCS product to the cart using a hidden iframe and the add to cart URL for the product provided by WHMCS. When clicked the link is hidden and a new link with green text and a tick is displayed so the user knows it has been added to the cart.
I have tried changing the class for the second link but nothing I try allows the two links to work separately from each other. I though if each link had it's own class they would work independently of each other but this does not seem to be the case in my tests.
I want to duplicate the link and add it to the same page for each product.
HIDDEN IFRAME:
<iframe style="display:none;" name="target"></iframe>
LINK:
ADD TO CART
✔ ADD TO CART
JAVASCRIPT:
$(function() {
$('.showClick').click(function() {
$('.hidden').show();
$('.show').hide();
});
$('.hideClick').click(function() {
$('.hidden').hide();
$('.show').show();
});
});
CSS:
/* Hide Added To Cart Link */
.hidden {
display:none;
}
/* Make Link Look Like Button */
.showClick.show {
padding: 15px 30px;
border: 1px solid #fff;
border-radius: 2px;
letter-spacing: 2px;
font-size: 14px;
font-weight: 600;
color: rgba(255,255,255,0.61);
cursor: pointer;
}
.showClick.show:hover {
background-color: #9b9b9b;
border: 1px solid #9b9b9b;
}
.hideClick.hidden {
padding: 15px 30px;
border: 1px solid #fff;
border-radius: 2px;
letter-spacing: 2px;
font-size: 14px;
font-weight: 600;
color: rgba(255,255,255,0.61);
cursor: pointer;
background-color: green;
}
.hideClick.hidden:hover {
background-color: #9b9b9b;
border: 1px solid #9b9b9b;
}
It works great but I can not get a second link to work for a different product. If you click the first link it changes the hide/show state of the second products link and visa versa. My goal is to have lots of product links on the page that when clicked add different products to the WHMCS cart without the user having to leave the page. Each product link clicked will be green with a tick so the user knows what they have added to the cart.
EDIT
Using your help I was able to create the below method to change the text on the link after it was clicked. This worked independently for each link on the page using onclick="func(this)"
This is my code:
<iframe style="display:none;" name="target"></iframe>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
<script type="text/javascript">
function func(e) {
$(e).text('ADDED TO CART');
}
</script>
<a onclick="func(this)" href="https://example.org/cart.php?a=add&pid=144" target="target" class="product-button">ADD TO CART</a>
Using your help I was able to create the below method to change the text on the link after it was clicked. This worked independently for each link on the page using onclick="func(this)"
This is my code:
<iframe style="display:none;" name="target"></iframe>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
<script type="text/javascript">
function func(e) {
$(e).text('ADDED TO CART');
}
</script>
<a onclick="func(this)" href="https://example.org/cart.php?a=add&pid=144" target="target" class="product-button">ADD TO CART</a>
Links should have the same css classes then, but you need to use different ids for each link and access to their id's when clicked like this, inside your .on('click') function;
let id = $(this).attr('id');
Duplication must be done programmatically and when doing that assign different ids & different href attributes e.g;
let products = [
{
id: 2,
link: 'pid=144'
},
{
id: 3,
link: 'pid=154'
}
];
for (let i = 0; i < products.length; i++) {
const element = products[i];
let strElement = '<a id=' + (i + 1) + ' href="https://example.org/cart.php?a=add&' + element.link+'" target="target" class="showClick show"> Click to Add to Cart </a>';
// Appending to body element here but if you have a container div, use it's id with a # prefix
$('body').append(strElement);
}
I have a large document where this is implemented A LOT. I am hoping there is a way to simply edit the JavaScript somehow, so I have less editing.
Basically, clicking on a line of text opens the hidden text beneath it. You can close and re-hide the text by clicking on that same line of text... THAT is the ONLY way I want it to operate. As it is now, you can click on the hidden text anywhere and that will also close it. That is becoming a problem because I have interactive content in the hidden text area, and an accidental click in the wrong area will collapse it all.
.results_container {
cursor: pointer;
line-height: 21px;
}
.hidden>span {
display: none;
}
.visible>span {
cursor: default;
display: block;
line-height: 18px;
background: #f5f5f5;
padding: 15px;
margin: 10px 0px 32px 25px;
}
<div class="results_container">
Click Me to show hidden content
<span>I am hidden in span tags. You can close me by clicking anywhere in this text, however, I ONLY want to close the same way I opened; by clicking "Click Me to show hidden content.</span>
</div>
Full Fiddle
NOTE: On the fiddle, my JavaScript is at the end, under the pasted-in jQuery... sorry, that's the only way I could get it to work.
See the fiddle or below snippet:
https://jsfiddle.net/ejbdb128/6/
By checking against "this" in regards to the parent selector, you can filter out when you click on the child "span" element. I should note a caveat to this is if you click anywhere outside the "span" and in the div element, it will hide the span, even if you don't click just on the "Click Me" text..
/* SCRIPT for HIDDEN DESCRIPTIONS for RESULTS */
$(document).ready(function() {
"use strict";
$('.results_container').addClass("hidden");
$('.results_container').click(function(e) {
if (e.target != this) {
return false;
}
var $this = $(this);
if ($this.hasClass("hidden")) {
$(this).removeClass("hidden").addClass("visible");
} else {
$(this).removeClass("visible").addClass("hidden");
}
});
});
.results_container {
cursor: pointer;
line-height: 21px;
}
.hidden>span {
display: none;
}
.visible>span {
cursor: default;
display: block;
line-height: 18px;
background: #f5f5f5;
padding: 15px;
margin: 10px 0px 32px 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="results_container">
Click Me to show hidden content
<span>I am hidden in span tags. You can close me by clicking anywhere in this text, however, I ONLY want to close the same way I opened; by clicking "Click Me to show hidden content.</span>
</div>
Add the click handler to to an external event and use that to hide . By the way, jQuery has built in functions hide and toggle for hiding elements.
HTML:
<div class="results_container">
<span class="clickme">Click Me to show hidden content</span>
<span class="hideme">
I am hidden in span tags. You can close me by clicking anywhere in this text, however, I ONLY want to close the same way I opened; by clicking "Click Me to show hidden content.
</span>
Javscript:
$(document).ready(function(){
"use strict";
$('.hideme').hide();
$('.clickme').on('click', function() {
$('.hideme').toggle();
});
});
Fiddle here: https://jsfiddle.net/fLj6c4q7/
Update
I'd modded the CSS given by David Thomas a bit. Its now a banner.
.div.popular::before {
/* setting the default styles for
the generated content: */
display: block;
width: 10em;
height: 2em;
line-height: 2em;
text-align: center;
background: #F60;
color: #fff;
font-size: 1.4rem;
position: absolute;
top: 30px;
right: 0px;
z-index: 1;
}
I would like to make a folded corner sort of like in this post: Folded banner using css
--- Original post ---
Let me first explain what I'm trying to do. I'm trying to give some post some extra attention by making a little circle with some call-to-action text in it.
But I only want this to trigger when a div has a specific class.
So if the div the class populair or sale I would like to have a little circle show up on that post. This script what I am using right now.
$(document).ready(function($){
if($("#front-page-items").hasClass('populair')){
$(".populair-div").show();
}
if($("#front-page-items").hasClass('sale')){
$(".sale-div").show();
}
});
And this HTML:
<div class="populair-div" style="display:none;">
<strong>Populair</strong>
</div>
<div class="sale-div" style="display:none;">
<strong>Sale</strong>
</div>
But this only show's the populair-div and not the other one. I'm guessing my script is wrong. Should I use else for all the other call-to-action classes?
$(document).ready(function($){
if($("#front-page-items").hasClass('populair')){
$(".populair-div").show();
}
else($("#front-page-items").hasClass('sale')){
$(".sale-div").show();
}
else($("#front-page-items").hasClass('Free')){
$(".free-div").show();
} // and so on
});
Is there someone that could help me out? Also is it possible to echo the div so I don't have to write a whole div for every call-to-action div?
For something like this, where the displayed text is explicitly linked to the class-name of the element it's easiest to use CSS and the generated content available, effectively hiding the elements you don't wish to show by default and then explicitly allowing elements you want to show, along with the generated content of those elements (using the ::before and ::after pseudo-elements:
div {
/* preventing <div> elements
from showing by default: */
display: none;
}
div.populair-div,
div.sale-div {
/* ensuring that elements matching
the selectors above (<div>
elements with either the 'sale-div'
or 'populair-div' class-names
are shown: */
display: block;
}
div.populair-div::before,
div.sale-div::before {
/* setting the default styles for
the generated content: */
display: block;
width: 4em;
height: 4em;
line-height: 4em;
text-align: center;
border: 3px solid transparent;
border-radius: 50%;
}
div.populair-div::before {
/* setting the text with the
"content" property: */
content: "Popular";
/* providing a specific colour
for the generated contents'
border: */
border-color: #0c0;
}
div.sale-div::before {
content: "Sale";
border-color: #f90;
}
/* entirely irrelevant, just so you can
see a (slightly prettified) difference
should you remove the default display
property for the <div> elements: */
code {
background-color: #ddd;
}
em {
font-style: italic;
}
<div class="neither-popular-nor-sale">
<p>
This element should not be shown, it has neither a class of <code>"populair-div"</code> <em>or</em> <code>"sale-div"</code>.
</p>
</div>
<div class="populair-div">
</div>
<div>Also not to be shown.</div>
<div class="sale-div">
</div>
You can use toggle function for this. It will be shorter and clearer.
Display or hide the matched elements.
Note: The buttons is for tests.
$(document).ready(function($){
init();
});
function init() {
$(".populair-div").toggle($("#front-page-items").hasClass('populair'));
$(".sale-div").toggle($("#front-page-items").hasClass('sale'));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="front-page-items" class="populair sale"></div>
<div class="populair-div">populair-div</div>
<div class="sale-div">sale-div</div>
<hr />
<button onclick="document.getElementById('front-page-items').classList.toggle('populair');init()">toggle populair</button>
<button onclick="document.getElementById('front-page-items').classList.toggle('sale');init()">toggle sale</button>
I have these buttons on the side of my page, and a main content area taking up the better part of the page.
What I am trying to do is get the button I click to change the main content to a div containing the corresponding information. This is very hard to find, perhaps because I am searching by the wrong terms, and I have covered a good portion of stackoverflow without much luck.
I have though about absolutely positioning the divs and using a script to change the z-index of the the divs to the highest amount using a "=+1" type situation, but I could see that getting messy.
I have considered adapting a script I have that replaces part of an image file name in order to change a main picture on a page to a larger version of the image corresponding to a thumb name, though this script targets file names so it isn't going well.
I have also tried something along the lines of:
"id of button" onclick function = "main content class" change id to "corresponding div"
only in javascript talk, and this isn't working at all so I can only assume that I am either looking at it wrong or I have some messed up in the code.
$('#tabhead1').click(function() {
document.getElementByClassName("maintab").id = "tabs1";
});
This is driving me crazy and I would really appreciate some ideas. I tried to leave it free formed so that noone gets hung up on anyone solution.
**** Just to clarify, I have 5 divs id'd at #tabhead1, #tabhead2, #tabhead3, etc. and 5 content divs classed as .maintab, and id'd as tabs1, tabs2, tabs3, etc. I need the first content div to show automatically, and for that div to change based on the button clicked. at the moment all content divs are set to display: none; except the first one.
For each button, add a data attribute related to the corresponding <div>
for example
<button id="tabhead1" data-content="tabs1" >first Tab</button>
apply a common class for the tabs, for example .tab
Then you can do the following
$('button').click(function(){
var contentId = $(this).data('content'); // get the id of corresponding tab
$('.tab').hide(); // hide all tabs
$('#'+contentId).show(); //show the corresponding tab
});
You are using getElementbyClassName which does not exists. Use:
document.getElementsByClassName("maintab")[0].id = "tabs1";
// Get all elements to match classname + get first element from array
And for the rest, I don't know why you want to add id with JS? Why not just add them to your HTML?
Try this
$('#tabhead1').click(function() {
// get element with class 'maintab' and replace its content with that of another tab
$(".maintab").html($(".tabs1").html());
});
To expand a little on the demo I posted in the comments earlier:
This uses a method very similar to #tilwin-joy, so I guess we were of like mindedness. There are a couple of small differences that I would point out:
jQuery:
$('button').on('click', function () {
var button = $(this);
var target = button.data('target');
button.prop('disabled', true).siblings().prop('disabled', false);
$(target).show('slow').siblings().hide();
});
This uses siblings to hide the other content (one less pass at the DOM).
I suggest just setting your data value with the id hash in the markup, I think it's a bit clearer to read and follow (IMHO) in both the script and markup.
This script also sets the current button to be disabled when clicked. The benefit of this is that you can use the disabled property to style up your buttons, and even if you don't style them it gives a visual cue to the user as to which tab content is currently displayed. Check out the demo to see how this can be used for styling purposes.
HTML: (I stripped some of the unneeded ids from what you described as your markup).
<div class="tabhead">
<button data-target="#tabs1" disabled="true">Content 1</button>
<button data-target="#tabs2">Content 2</button>
<button data-target="#tabs3">Content 3</button>
<button data-target="#tabs4">Content 4</button>
<button data-target="#tabs5">Content 5</button>
</div>
<div class="maintab">
<div id="tabs1">
<img src="http://placehold.it/350/e8117f/fff&text=Image+1" alt="Image 1" />
<p>This is the content of tabs1.</p>
</div>
<div id="tabs2">
<img src="http://placehold.it/350/9acd32/fff&text=Image+2" alt="Image 2" />
<p>This is the content of tabs2.</p>
</div>
<div id="tabs3">
<img src="http://placehold.it/350/9400d3/fff&text=Image+3" alt="Image 3" />
<p>This is the content of tabs3.</p>
</div>
<div id="tabs4">
<img src="http://placehold.it/350/ffd700/fff&text=Image+4" alt="Image 4" />
<p>This is the content of tabs4.</p>
</div>
<div id="tabs5">
<img src="http://placehold.it/350/1e90ff/fff&text=Image+5" alt="Image 5" />
<p>This is the content of tabs5.</p>
</div>
</div>
CSS: Not needed - just to give you an idea of how you can style the elements to look like tabs.
/*This sets all but the first tab to hidden when the page is loaded*/
.maintab>div:not(:first-child) {
display: none;
}
/*The rest is just to style the elements to look like tabs*/
body {
background-color: #eaeaea;
}
.maintab, .tabhead {
text-align: center;
margin:0 20px;
font-family: sans-serif;
}
.maintab {
border: 1px solid #1e90ff;
border-top: none;
padding-top: 20px;
background-color: #fff;
}
.tabhead {
border-bottom: 1px solid #1e90ff;
position: relative;
margin-top: 20px;
}
button {
background-color: #ccc;
padding: 10px;
border: 1px solid #999;
border-bottom: none;
-webkit-border-top-left-radius: 4px;
-webkit-border-top-right-radius: 4px;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
color: #999;
font-size: 14px;
cursor: pointer;
position: relative;
top: 2px;
}
button:disabled {
background-color: #fff;
border-color: #1e90ff;
color: #1e90ff;
top: 3px;
padding-top: 11px;
cursor: not-allowed;
z-index: 10;
}