Hi guys so i am trying to make a nutrition label just like this : Example
Curretnly have my db all set up. trying to get it to work one thing at the moment and then can do it with the rest.
My db looks like:
ingName: ....
fat: ...
carbs ... etc
The problem i am having right now is huge. I have been stuck on it for the last 3 days and no one seems to know whats wrong , I have a cross by ever div which is created so that the user can delete that ingredient he has added. So if they have:
Apple : 1g
Mango : 2g
Melon: 3g
Total : 6g
Lets say they dont want melon anymore then it should look like
Apple: 1g
Mango: 2g
Total: 3g
However i cant seem to get that to work. Every time i clock on the red cross it actually just makes the number in the label go blank.
My live site:
http://diet.elementalbydesign.com/bootstrap-3.3.6-dist/build.php
I cant stress enough how long i been stuck on this problem and how many people have tried to help me but yet no one has figured this out, again i am just at a wall here , really need someone to get me out :)
Again my live site to show you what is going on: My live site:
http://diet.elementalbydesign.com/bootstrap-3.3.6-dist/build.php
You can see that you can add all the elements etc, but when it comes to taking away , it goes into a shamble, if anyone does fix this problem will give them a cookie if i ever see u :)
Thanks
Edit: This is the closets i have come, but it takes -1 on every time rather than the amount set in the database
$('.selectedStuff').on("click", 'span', function(){
var fat = parseInt($("#fat").html());
fat = fat - 1;
$("#fat").html(fat);
$(this).parent().remove();
});
});
First, I think Pekka is right, you should delete the whole div instead of the span. Otherwise, the yellow box stays on.
But the problem is that when you search for an item, you do
echo "<script>$('#fat').html(".$total_fat.");</script>";
echo $row['fat'];
So then in your JavaScript when you do
<span data-fat='"+data+"' data-itemfat='"+data+"'>
You actually have
<span data-fat="<script>$(" #fat').html(2);<="" script="">2' data-itemfat='<script>$('#fat').html(2);</script>2'>X</span>
So try removing this line:
echo "<script>$('#fat').html(".$total_fat.");</script>";
When you write
var temp = 0;
$('.result').val( data );
$('#fat').html(data);
temp = data;
temp = $("#fat").val();
temp = data;
current_fat += data;
$("#fat").val(current_fat);
$('#fat').html(current_fat);
The value is not properly added. Try fixing that first, with parseInt.
The original deletion actually seemed to work!
Suggestion: Replace all the above code block with:
$('#fat').text( parseInt( $('#fat').text( ) ) + parseInt( data ) )
How about instead of removing the clicked item
$(this).remove(); /* REMOVE THE DISPLAY OF REMOVED INGREDIENT */
you remove the parent div (which includes the red cross too) like:
$(this).parent().remove();
Would that help?
Related
So I'll be as clear and simple as possible. I love seeing inside a computer.
On my site, I want to have a wide box at the bottom of the page.
Inside this box, I'd like things going on inside the site to appear as text.
I understand how to make a jQuery event such as a click or a hover, spit out some text. What I don't understand is how to make that text go into a box that has say, 10 lines, and once the 11th line of text is created, the first slides up into the void, to be deleted.
After some searching around, I found this, which is getting closer to the goal.
var caption = [
"User Entered Site",
"Loading SideBar",
"Code: 01011011",
"Whatever text",
"Whatever text"
];
var i = 0;
setInterval(function() {
$("#message-box").html(caption[i]);
i++;
if (i == caption.length){i=0;}
}, 3 * 1000);
Here's the issue with the code I've found. It's actually designed for a series of changing tip at the bottom of a screen. The text will override previous text written.
Although it might be obvious I'd like to note that this sample set of text should appear in this read-only console area over time. I tried messing around with a .delay(1000) to no avail.
I don't need to get complex and write in real events for the appearing text, instead I can just create faux events - just to get the ball rolling. I figure so long as I have the main idea coded with a "false" series of "hacker-esque" codes running down this kind of... "read-only console," I'll be able to tack on some code to a new event I create in the future (click, drag, reorder, etc.) and the faux-hacker box/console will actually have some real events in it.
I may just keep faux stuff in there just to give a certain feel to this particular artistic, 'symbolically back end' website. Thank you so much guys!
Here's something that might work as a basis for what you are trying to achieve. It creates a box and then displays random messages into it, scrolling them up (by deleting the first message) when the list reaches 10 messages. I haven't attempted to style it all, you could make it look a lot prettier (and use animations to remove items slowly). I've also put a limit on how many messages it displays in total (so the snippet doesn't run forever) using the counter on i, you could remove that in your application.
var caption = [
"User Entered Site",
"Loading SideBar",
"Code: 01011011",
"Whatever text",
"Some other message"
];
var i = 0;
var h = setInterval(function() {
// already 10 messages? if so, delete the earliest
if ($("#message-box p").length == 10)
$("#message-box p").first().remove();
$("#message-box").append('<p>' + i + ': ' + caption[Math.floor(Math.random()*5)] + '</p>');
i++;
if (i == 20) clearInterval(h);}
, 1000);
#message-box {
height: 400px;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="message-box"></div>
Okay, so I've searched everywhere and couldn't find any help with this. I have six different images of a single die. Each time the user clicks the button, the image changes. I need to keep a running total, though, and this is where I'm stuck.
<html>
<head>
</head>
<body>
<script>
function displaydie()
{ var total=0;
var num= ("src",(Math.floor(Math.random()*6)+1) + ".jpg")
document.getElementById("die").setAttribute("src",(Math.floor(Math.random()*6)+1) + ".jpg")
}
</script>
<img id="die" alt="die"/>
<br/>
<input type="button" value="Click me!" onclick="displaydie()"/>
<span id="total"/></span>
</body>
</html>
If you need to know each roll, use an array.
var rolls = [];
//When rolled, do:
rolls.push(<roll value>);
If you just need a total, then just add to an integer?
var total = 0;
//When rolled, do:
total += <value>;
Hard to give a good suggestion without more detail on what you're after.
edit:
Ok... it sounds like a project/assignment, so I'll just try to steer you in the right direction.
If all you need to worry about is the total, then there's no need for an array.
You already have the total variable declared, so that's good.
In your displaydie function, what I would recommend is that you first declare a variable and assign your random (1-6) number to it. Then add that number to the total, then use that to set the source of the image.
To display your running total, you'll want to get your "total" span by using it's ID, then set the value (probably via the innerText property) - remove the document.write call that you have.
Sounds like you need to add a "Reset" button to set the total back to 0 as well.
The for ... loop is not a timed function - it's going to execute as fast as it possibly can. So make sure that's what you want, or if you want something like setTimeout or setInterval instead. If the for loop is what you want, then consider not changing the image source during that, as it's not going to be able to update fast enough to be seen anyway.
This is an interesting bit of code you've got going... I worked through it to get to understand it, but I'll just give you a few pointers unless you can't get it yourself.
First off, while you work through this you should put in a few checks. alert(variable) is a simple one, although most people prefer using console.log(variable). If you try console.log(num), you'll find a very interesting result. You might want to make num equal to the dice roll, then put the variable into your setAttribute.
Another thing is, document.write will completely overwrite everything you have on that page. Try setting the value of your "total" span.
Now, while I was reading through this, I got the idea that your for loop is to test to make sure that the running total is building up. What you have to understand here is that, when you roll your dice, you're not going to be adding to the total. You're also not going to be writing the total to your document. You might want to try adding these into the function so that everything is handled by one click.
If you're really having trouble on it, work a bit more and ask and I'll give you the code I was editing.
<!DOCTYPE html>
<html>
<head>
<script>
var total=0;
function displaydie()
{
var diceNumberArray = [1,2,3,4,5,6];
var showImageDice = Math.floor((Math.random()*diceNumberArray.length)+1);
var sideToShow = "Image"+showImageDice;
total += showImageDice;
document.getElementById("total").innerHTML = total;
document.getElementById("die").setAttribute("src",sideToShow+".jpg");
}
</script>
</head>
<body>
<img id="die" alt="die"/>
<br/>
<input type="button" value="Click me!" onclick="displaydie()"/>
<span id="total"/></span>
</body>
</body>
</html>
I've a page with about 10 short articles.
Each of them as a "Read More" button which when pressed displays hidden text
The issues I have at the moment is when I press the "Read More" on any of the 10 button it shows the 1st articles hidden content and not the selected one.
I think I need to set a unique ID to each article.. and the read more button be linked to it.. But I don't know how to set it.
I looked at this but couldn't get it working how to give a div tag a unique id using javascript
var WidgetContentHideDisplay = {
init:function() {
if ($('#content-display-hide').size() == 0) return;
$('.triggerable').click(function(e){
var element_id = $(this).attr('rel');
var element = $('#'+element_id);
element.toggle();
if (element.is(':visible')) {
$('.readmore').hide();
} else {
$('.readmore').show();
}
return false;
});
}
}
var div = documentElemnt("div");
div.id = "div_" + new Date().gettime().toString;
$(document).ready(function(){ WidgetContentHideDisplay.init(); });
OP Edit: Sorry, the original code wasn't in caps. I kept getting errors when trying to post, so I copied the code into Dreamweaver and it made it all caps for some reason.
Instead of selecting the element to toggle with an ID (i.e. $('#'+ELEMENT_ID)) you could setup a class for your item and use the class selection (e.g. $('.DETAILED-ARTICLE)') to select the child (or the brother, etc. depending how you built the HTML page).
In theory each ID should point to a single element but each class can be put to as many elements as you want.
If you're getting errors, read the errors and see what they are. Off of a quick read of your code, here are a couple things I noticed that will probably cause issues:
"documentElemnt" is misspelled, which will render it useless. Also, documentElement is a read-only property, not a function like you're using it.
toString is a function, not a property, without the parentheses (.toString()) it isn't going to function like you want it to.
Run the code, look at the errors in the console, and fix them. That's where you start.
i am trying to create a rating system. The idea is on page load I would see how many stars each star has. And when I click on the a star it increases the width of the bar. Here is what I am doing. The problems so far are 1: the bars are not displaying correctly 2: the numbers of stars are not incremental correctly. The idea is to update the bar after a new click. Here is the fiddle. I have few other questions associated with this. I will do a new post once I solve this one
http://jsfiddle.net/sghoush1/VU3LP/37/
the Jquery looks like this
$(function(){
var baractive = $('<div class="barActive"></div');
baractive.appendTo('.bar');
var curr_val = $('.reading').html();
var new_val = parseInt(curr_val)+1;
if(curr_val< 20){
$('.barActive').css('height', '20px').css('width', '20px');
}
if(curr_val< 40){
$('.barActive').css('height', '20px').css('width', '40px');
}
$('.star').click(function(){
$('.reading').eq($(this).index('.star')).html(new_val);
$(this).addClass('active');
$('.bar').eq($(this).index('.star')).addClass('barActive');
});
});
As far as problem #2 goes: you need to read curr_val and compute new_val inside the click response function. As it is, you read the first one and use that for all star bars.
As far as problem #1 goes: I have no answer; you say that the bars don't display correctly, but you don't say what behavior you want. However, I suspect that this problem will also go away if you move the css assignments into the click function as well (using new_val instead of curr_val for the bar). You would still need to initialize each bar using its specific value and index.
I've recently been learning JavaScript by creating a little to do list web app here.
So far almost everything's working, but I have an issue if you try to check and uncheck an item more than once. If you keep checking/unchecking you'll see the delete button disappear and --> appear after the urgency icon.
The change of icon is done by a Regex changing code from commented to un-commented. I just don't understand why if it works once, it doesn't work every time?
if (tr.outerHTML.indexOf("checked=\"\"") >= 0) {
// replace checked with unchecked
var cookieHTML = tr.outerHTML.replace(/checked=\"\" class=\"list-checkbox\"/, 'class=\"list-checkbox\"')
.replace(/<tr class=\"list-row done\"/, '<tr class=\"list-row\"')
// change delete button to urgency.
.replace(/<!--<span aria-hidden=\"true\" data-icon=\"c\"/, '<span aria-hidden="true" data-icon="c"')
.replace(/alt=\"Neutral\"><\/span>-->/, 'alt="Neutral"></span>')
.replace(/<!--<span aria-hidden=\"true\" data-icon=\"f\"/, '<span aria-hidden="true" data-icon="f"')
.replace(/alt=\"Urgent\"><\/span>-->/, 'alt="Urgent"></span>')
.replace(/<span aria-hidden=\"true\" data-icon=\"e\"/, '<!--<span aria-hidden="true" data-icon="e"')
.replace(/onclick=\"deletetodo\(this\)\"><\/span>/, 'onclick="deletetodo(this)"></span>-->');
} else {
// else add checked to the input.
var cookieHTML = tr.outerHTML.replace(/class=\"list-checkbox\"/, 'checked class=\"list-checkbox\"')
.replace(/<tr class=\"list-row\"/, '<tr class=\"list-row done\"')
// change urgency to delete button.
.replace(/<span aria-hidden=\"true\" data-icon=\"c\"/, '<!--<span aria-hidden="true" data-icon="c"')
.replace(/alt=\"Neutral\"><\/span>/, 'alt="Neutral"></span>-->')
.replace(/<span aria-hidden=\"true\" data-icon=\"f\"/, '<!--<span aria-hidden="true" data-icon="f"')
.replace(/alt=\"Urgent\"><\/span>/, 'alt="Urgent"></span>-->')
.replace(/<!--<span aria-hidden='true' data-icon='e'/, '<span aria-hidden="true" data-icon="e"')
.replace(/onclick='deletetodo\(this\)'><\/span>-->/, 'onclick="deletetodo(this)"></span>');
}
This is the (rather large!) chunk of JS that controls this. Any ideas what's wrong? Or maybe a better way of changing these icons around?
Thanks!
I would say: you're are doing it wrong. Using a string / regex replacement method is not the right way to go imho.
Instead of doing those replacement use DOM methods, i.e.:
someElement.setAttribute('data-icon', 'f');
someElement.setAttribute('alt', 'Urgent');
A simple example can be found here: http://jsbin.com/iwakof/1/edit
I know this isn't a direct answer to your question, but trust me this is the way to go
That's awesome that you are learning JavaScript. Nice job. But, I'm quite glad that you posted this question as it looks like you could use a couple of pointers.
The answer to your question is - yes there is a much simpler way to achive this effect - which I will get to shortly. But first - I notice that at the bottom of your todo app you include a library called JQuery
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
This library will be of huge help to you, not only in the function you describe above, but to the majority of the code you have written. You will end up with much cleaner and self explanatory code.
http://jquery.com/
Basically what JQuery allows you to do, is to manipulate the state of the DOM. You definatly want to begin here.
Here is small sample which shows a check box who can be checked or unchecked, and on change, have an element shown' or hidden as desired.
http://jsfiddle.net/m4vGE/5/
Please - do take the time to have a look into JQuery - its a great first step you can take to increase your produtivity and reduce complexity in your JavaScript
Also - as a side note, if you find yourself using js to build HTML with strings, the answer is invariably "there is a better way"
If all you are trying to do is change icons based on a checkbox being checked or no, you could do something like this.
function getVisibility()
{
var temp = document.getElementById("iconName").style.visibility;
return temp;
}
function switchIfChecked()
{
var current = getStyle();
if( current == "visible" )
{
document.getElementById("iconName").style.visibility = "hidden";
}
else
{
document.getElementById("iconName").style.visibility = "visible";
}
}
<div id="iconName" style="visibility: visible">INSERT ICON IMG here</div>
What the above does is that it makes the div of the icon visible or hidden. Ofcourse you will need to have two divs and then set either or to hidden or visible.
With what you are doing currently, you are not really making the browser do anything.
Try to use the global option of Regex (have a look at the g after the second slash):
// ...
.replace(/<tr class=\"list-row done\"/g, '<tr class=\"list-row\"')
// ...
Here is an example.
From developer.mozilla.org:
global: Whether to test the regular expression against all possible
matches in a string, or only against the first.