So... I made a page where you can find some products, and each product has a price/description/title. I’m currently trying to change prices, but the thing is I want them to change if you click on a button (which is sales related). I’d like to change the price and add a 20% discount.
I started to do something, which only change the color of the prices from black to red:
$(".row a").click(function(){
$("cat-bonnet").css("color","red");
});
I selected the class of my thing through CSS. But now I don’t know how I am supposed to add the discount. Should I create another code ? How can You do it when clicking on a button ?
Thanks in advance.
$("cat-bonnet") would try to target <cat-bonnet></cat-bonnet> in the DOM.
You must specify that it's:
A class
$(".cat-bonnet")
Or an ID:
$("#cat-bonnet")
Specify the class or the id of cat-bonnet by using . for a class or a # for id:
$(".row a").click(function(e){
$(".cat-bonnet").css("color","red"); // Add '.' here
e.preventDefault(); // stop page from redirecting (to see change effect)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<a class="cat-bonnet" href="https://www.google.com">Link</a>
</div>
Well it's fairly easily done with a piece of vanilla javascript:
document.querySelector(".cat-bonnet").innerHTML = newPrice;
newPrice should be your calculated discount. So you should get the price of .cat-bonnet and calculate the 20% discount. This could be done in a variable let = newPrice; or inline.
Jquery is a large library and based on your code above you may be better of with just vanilla javascript. But just adding the above line will do the trick for you.
What does add discount do?
Does it post data to apu endpoint? Or just change the html? Or any other processes?
I would suggest a slightly different setup to your code to make it easier to add more properties if you wish to in future. I've also put down a way to check for various ON actions such as 'mouseenter', 'mouseleave' etc.
Have a look at the code below. I think this will make it a lot easier to read when your projects get bigger.
$(".row a").on('click', () => { // Insert mouseenter, mouseleave etc where click is
$(".cat-bonnet").css({
color: "red",
backgroundColor: "gray"
// Add more properties inside the object here as you wish
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<a class="cat-bonnet" href="https://www.google.com">Link</a>
</div>
Related
I hope you guys can give me a push in the right direction as this problem has been eating me up all day now..
What I'm basicly trying to accomplish is this. I have several div's on a page that can be collapsed independently from eachother with the use of a button. Every div has it's own specific ID, generated with a string of static text, and a numeric value based on a auto-incremented database-value. This ensures I never have two div's with the same ID on one page. To target each specific div with Javascript (jQuery) I use the following code:
http://jsfiddle.net/LU7QA/0/
This works really well and does what it's supposed to do. Only there is one problem. On every page frefresh, every div that was opened is closed. Everything resets, and that's why I want to use JQuery Cookies in this construction. Only problem is, I know how it works, but I can't get it to work in this specific construction as it has to deal with a completely unique ID every time and needs to store the values of that particular ID.
As seen here: http://jsfiddle.net/LU7QA/1/
I tried to fiddle around with it but I can't seem to get it working properly and I'm starting to lose my sight on the problem..
<div>
<button class="button_slide" value="1">Show hide</button>
</div>
<div id="slidingDiv_1" class="slidingDiv">Stuff</div>
<div>
<button class="button_slide" value="2">Show hide</button>
</div>
<div id="slidingDiv_2" class="slidingDiv">Stuff</div>
function initMenu() {
$(".slidingDiv").hide();
// Toggle Field
$(".button_slide").click(function(){
//alert($(this).val()); debugging purposes
var sliding_id = $(this).val();
div_sliding_id = '#slidingDiv_'+sliding_id;
$(div_sliding_id).next().slideToggle('slow', function() {
$.cookie(div_sliding_id, $(this).is(':hidden') ? "closed" : "open");
return false;
});
});
$('.button_slide').each(function() {
var sliding_id = $(this).val();
div_sliding_id = '#slidingDiv_'+sliding_id;
if ($.cookie(div_sliding_id) == "open") $(this).next().show();
});
}
jQuery(document).ready(function() {initMenu();});
May you have missed a dot on the last *button_slide* declaration?
Btw, look at https://code.google.com/p/sessionstorage/
I've been searching the web for some tips regarding how to make your own numpad, created with html code, to act as a numpad would on the computer.
I have this numpad on my website that would give an input to a textfield in the same div. I've given a value to each button and now I guess I would have to create something more so that the numbers will add to my text field.
I'm really a beginner with programming so maybe this is really easy. Thanks for the help!
You could do it, alternatively, with jQuery. jQuery is better IMHO if you need a simple easy solution (jQuery is generally easier and faster).
HTML:
<div id="myDiv"> </div> //the div to which we add text
<div id="buttonContainer"> //this is the div containing the numbers (the numpad)
<button value="one"> one </button>
<button value="two"> two </button>
</div>
jQuery:
$("#buttonContainer button").click(function() {
$("#myDiv").append($(this).val());
});
http://jsfiddle.net/DLzUU/1/
What this does is: when you click any button inside the div with id of 'buttonContainer', it adds its value to the div with the id of "myDiv".
On the Javascript subject, if you want a VERY good guide: http://javascript.info/
what you need is to learn javascript. With javascript you will be able to write code to do this.
<script>
function AddValueToTextField(val)
{
document.getElementByID( <textfiled ID> ).value += val;
}
</script>
<button onClick="AddValueToTextField(this.value)"></button>
this is only very basic but it is a rough idea of what is needed, the button is set to call the function "AddValueToTextField" when it is clicked. When the function is called the value of the button is sent along with it. Inside the function it gets a handle on the textfield and adds the value of the button to whatever was already there, I'd suggest looking at:
http://www.w3schools.com/js/
as a place to start learning javascript.
you can try http://keith-wood.name/keypad.htmlkeypad example, this is an awesome example
$(document).ready(function(){
var selected;
$(".admin_loginid input").focus(function(){
selected = $(this);
});
$(".loginbtn").click(function(){
selected.val(selected.val() + $(this).val());
});
});
Solved it that way and it works really well, thanks for the help! Now my selected input box takes the input from the numpad that i've created.
I have a tweet stream where new tweets are added at the top and the older ones pushed down. You can click on the entire tweet and a panel slides down to reveal, "reply", "retweet", "favorite" etc. The panel is added to each new tweet added in the stream.
The code below works. Shouldn't this be better written so that only one call is being made? Or, as a new tweet is added. would I just have to add to the code with div#tc4, ul#tb4 etc?
$(document).ready(function () {
$("div#tc1").click(function () {
$("ul#tb1").slideToggle("fast");
});
$("div#tc2").click(function () {
$('ul#tb2').slideToggle("fast");
});
$("div#tc3").click(function () {
$('ul#tb3').slideToggle("fast");
});
});
Added Markup:
<div id="tc1" class="tweetcontainer">
<div class="avatarcontainer">
<div class="avatar"></div>
</div>
<div class="content">
<div class="tweetheader">
<div class="name">
<h1>John Drake</h1>
</div>
<div class="tweethandle">
<h2>#Drakejon</h2>
</div>
<div class="tweettime">10m</div>
</div>
<div>
<p>Exceptional Buys Ranger To Give Monitoring Shot In The Arm To Its 'DevOps' Platform http://tcrn.ch/11m3BrO by #sohear </p>
</div>
</div>
</div>
<!-------------Tool Bar -------------------------------->
<ul id="tb1" class="toolbar">
<li><a class="reply" href="#"><span>reply</span></a></li>
<li><a class="retweet" href="#"><span>retweet</span></a></li>
<li><a class="favorite" href="#"><span>favorite</span></a></li>
<li><a class="track" href="#"><span>track</span></a></li>
<li><a class="details" href="#"><span>details</span></a></li>
</ul>
I highly recommend separating your javascript from your detailed page function. The best way to do this is to put the retweeting panel inside the tweet container, then you don't even need to give it an id at all or encode in the javascript information about your html structure and ids. You can then just do:
$('.tweetcontainer').on('click', function(event) {
if ($(event.target).is(':descendantof(.toolbar)')) {
//ignore all clicks within the toolbar itself
return;
}
$(this).find('.toolbar').slideToggle();
});
It's that easy! See it in action in a jsFiddle.
Now you can add as many tweet containers as you want to your page--and your javascript doesn't have to change one bit. Other solutions that require knowledge of specific ids linking to specific ids are suboptimal.
Note the descendantof pseudo-selector is custom (see the fiddle to find out how it works). Also, since you didn't provide any css, I had to choose some--it was quick so don't expect much. (Aww heck I just saw you updated your question to provide a jsFiddle with css giving a far prettier result--but I won't change mine now.) I did have to add a class to the actual tweet itself, but there is probably a better way to style it.
And if you want a click on the displayed toolbar itself (outside of a link) to allow collapsing the toolbar, change the code above to :descendantof(a).
If you don't want to change your page layout, another way to it is to encode the information about the linkage between html parts in the html itself using a data attribute. Change your tweetcontainer div to add a data attribute with a jQuery style selector in it that will properly locate the target:
<div class="tweetcontainer" data-target="#tb1">
You don't really have to remove the id if you use it elsewhere, but I wanted you to see that you don't need it any more. Then on document.ready:
$('.tweetcontainer').click(function () {
$($(this).data('target')).slideToggle('fast');
});
Here is another jsFiddle demonstrating this alternate technique (though it less elegant, in my opinion).
Last, I would like to mention that it seems possible you have a little bit of "div-itis". (We have all been there.) The toolbar anchor elements have unnecessary spans inside of them. The tweet name h1 element is inside a div, but could just be an h1 with class="name" instead.
In general, if there is only a single item inside a div and you can change your stylesheet to eliminate the div, then the div isn't needed. There are an awful lot of nested divs in your html, and I encourage you to remove as many of them as you can. Apply style to the other block elements you use and at least some, if not many, won't be needed.
I'd suggest (though currently untested):
$('div[id^="tc"]').click(function(){
var num = parseInt(this.id.replace(/\D+/g,''),10);
$('#tb' + num).slideToggle("fast");
});
Though given that you don't need the num to be a number (it'd be fine as a string), you could safely omit the parseInt().
Yes, you can write this code much more compactly like this:
$(document).ready(function() {
for (var i = 1; i < 3; i++) {
$("div#tc" + i).click(function() { $("ul#tb" + i).slideToggle("fast"); } );
}
});
When I click the href, I want to display the image and description from the target id. Can someone correct this code for me and show me how to do it right? Thank you very much!
HTML:
<div id="gallery"><img/></div>
Click me
jQuery code:
var datas={
"images":[{ "src":"gallery/panorak.jpg",
"title":"PANORAK",
"date":"28/10/2010 Web Design",
"description":"desc",
"id":"panorak",
},
{
"src":"gallery/kamoa.jpg",
"title":"kamoa",
"date":"28/10/2010 Web Design",
"description":"desc",
"id":"kamoa",
},
]};
$(document).ready(function(){
var gallery=$("#gallery")
//****I don't know how to display it right at this point
var list=$("<ul/>");
gallery.append(list);
datas.images.each(function(i,j){
list.prepend($("<li/>").$("<img/>").attr("src",datas.images[i].src).load(function(){ }));
});
});
Any help is greatly appreciated! Thank you very much!
I have made some changes to your code:
http://jsfiddle.net/T5r6D/
Have a look at my jsfiddle link for all updates.
You had some structure in flow issues and javascript error.
I am adding all image in array using normal for loop. once loop is done, i wrap images with <li> and adding the list to the stage.
Keep in mind that images will not be shown coz it is not on the jsfiddle server. Try it on your side.
UPDATE
http://jsfiddle.net/T5r6D/1/
So the new update does not hide the full container.
The anchor #tag [href] will be matched with the images title tag. So once clicked on a button it will hide the image that matches.
Try this:
$(document).ready(function(){
var gallery=$("#gallery")
//****I don't know how to display it right at this point
$('a').click(function(){
var list=$("<ul/>");
gallery.append(list);
$.each(datas.images, function(i,j){
var img = $("<img/>").attr("src",datas.images[i].src);
list.prepend($("<li/>").append(img));
});
});
});
If you want to trigger events when something is clicked, you can use click() function. And I fixed each() function part. Check this documentation. And I split some code to improve readability.
OK, I'm designing a site and thought I'd stick some jQuery in as I really need so js experience.
Page with my problem is here: http://new.focalpix.co.uk/moreinfo.php
JS in question is:
$(document).ready(function(){
$(".answer").css("display","none");
$("#maincontent a.animate").click(function() {
$("#maincontent .answer").slideUp('slow');
var id = $(this).attr('href');
$(id).slideDown('slow');
return false;
});
});
This works fine, but if you click on a link where the answer has already slid down, then it slides up, then back down again.
I'm not sure on the cleanest way to stop this happening - any ideas?
You should be using the .slideToggle() effect.
$(document).ready(function() {
$(".answer").css("display","none");
$("#maincontent a.animate").click(function() {
$("#maincontent .answer").slideToggle('slow');
});
});
First, I'd suggest the following structure for your faq's:
<div id="faq">
<div class="qa" id="faq_greenandflies">
<span class="q">What is green and flies</span>
<div class="a">
Super Pickle!
</div>
</div>
<div class="qa" id="faq_redandbadforteeth">
<span class="q">What is Red and bad for your teeth</span>
<div class="a">
a Brick
</div>
</div>
<!--
More FAQ's here
-->
</div>
and then defining your jQuery as follows:
<script type="text/javascript">
$(function(){
// hide all answers
$('div#faq .qa .a').hide();
// bind a click event to all questions
$('div#faq .qa .q a').bind(
'click',
function(e){
// roll up all of the other answers (See Ex.1)
$(this).parents('.qa').siblings().children('.a').slideUp();
// reveal this answer (See Ex.2)
$(this).parents('.qa').children('.a').slideDown();
// return true to keep any other click events
return true;
});
// check location.hash to see if we need to expand one (direct link)
$(location.hash).find('.q a').click();
});
</script>
Explanation:
(Ex.1)
this is the link that was clicked
get the element that contains this and has a class of 'qa' (the box that contains both question and answer)
select all of its siblings. (we now have all qa's as a jQ object)
hide the answers
(Ex.2)
this is the line or link that was clicked
get the element that contains this and has a class of 'qa' (the box that contains both question and answer)
reveal the answer
A working demo is here.
This does several things for you:
If a user deep-links to an answer, the answer is automatically revealed
If a user clicks on one answer, all other answers are hidden
You can give your divs proper ids, so which helps search engine optimization of links to individual answers
Use slideToggle() like Soviut said, but just as a tip -- you can declare the display property in the actual CSS file instead of declaring it inside the javascript. jQuery will pick up on the fact that it is hidden in the stylesheet and still perform the appropriate slide function.
You can also use $(".answer").hide();
Instead of setting the display CSS property. Just thought I would let you know.
try using the one method, something like:
$(selector).one('effect', 'data for effect', callback function);
it makes sure an effect only happens once per element.