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>
Related
I've got an animation of the earth rotating around the sun. The sun stays put, but the earth keeps changing position.
I want to alert a message saying "Aligned!" or something when the earth is perfectly vertically aligned with the sun. I've been testing it out but I can't get the alert message any time other than when the page has loaded and the conditial statement corresponds to the position of the earth when the page has loaded, before the earth even gets close to aligning.
The below code will only show the position of the earth as its position is above 400. So if I say like, alert message when positionplanet.left == positionsun.left, I will get nothing.
var possun = $( "#Sun" );
var positionsun = possun.position();
var posplanet = $( "#Earth" );
var positionplanet = posplanet.position();
if (positionplanet.left >= 400)
{
alert(positionplanet.left + " and " + positionplanet.top);
}
I have a JSfiddle for the animation but for some reason I'm having trouble alerting anything at all other than just random strings. So I'll link it but it'll mainly be for reference. Demo:
I haven't checked your maths so I can't prove this definitely, but it seems like the positions never match exactly - which isn't too surprising as we're dealing with irrational numbers of pixels rounded to 10-15 decimals.
If you allow the positions to match to the nearest pixel, though, you can make it work (and no-one should be any the wiser). Also, you need to do the check for every step of the animation, instead of in the global scope like in your JSFiddle (no wonder you only get the alert when you reload the page. :) )
Putting this inside your animate() function did the trick:
var positionsun = $("#Sun").position();
var positionplanet = $("#Earth").position();
if(Math.round(positionplanet.left) == Math.round(positionsun.left))
alert("aligned!");
Also, make sure you're including jQuery if using jQuery functions (like $(...)).
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?
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.
Hello again my JS saviors! I have another dilema:: I have a div titled "homebanner" that contains text and a background image. My client decided that he wanted the #homebanner to change on reload with 4 images/slides.
So, I did this to change the background::
JS CODE
jQuery(function($){
$('#homebanner').css({backgroundColor: "#fff"});
var totalCount = 4;
var num = Math.ceil( Math.random() * totalCount );
function setBGImage() {
var bgimage = 'http://bwpcommunications.com/TESTING/images/homepage/'+num+'.jpg';
$('#homebanner').css(
{
backgroundImage:"url("+bgimage+")",
});
}
setBGImage();
});
And it works great! So I'm stoked about that. But I can't figure out a way to have specific headline text to correspond with each image. Is this possible? Also, here's a link to the test site http://www.bwpcommunications.com/TESTING/. As you can see, when you refresh the page the image changes but the text does not.
Any help would be awesome!
Thanks,
Shadna
put whatever headline text options you want into an array
var hText = ["blue jeans", "red jeans", "ripped jeans", "plaid"];
then right after setting the background image, you can use the num variable to pick the corresponding text from the array (or if you want it random you can just do the random number generation again). Then it's just a matter of setting the text on the page.
$('#htxt').html(hText[num]);
or in plain javascript:
document.getElementById('htxt').innerHTML = hText[num];
depending how the images are numbered, you might need to do num - 1 since the array is 0 indexed.
I am working on an HTML5/javascript/php project where I have a which is set to be editable.
I know the user can be press ctrl + b to make the text bold, but I also want to allow the user to be able to click on the appropriate button on the web page to perform the same action.
I.e. when the user types it will be in normal text, they click on the bold button on the web page and it appends <strong> to the html of the section, and whatever they type now will be hold until they press the button again and it then appends </strong>.
However, at the moment when I append <strong> it seems to automatically add </strong> and I want to stop that from happening. Am I going about this the right way or is there a better way that this can be achieved.
Below is the javascript that I am trying to use
function enableDisableBold(section)
{
var boldEnabled = $("#boldEnabled").val();
var content = $("#" + section).html();
var newContent;
if (boldEnabled == "true")
{
$("#btnBold").removeClass("formatButtonsActivated");
$("#boldEnabled").val("false");
//newContent = content + "</strong>";
//$("#" + section).html(newContent);
}
else
{
$("#btnBold").addClass("formatButtonsActivated");
$("#boldEnabled").val("true");
newContent = content + "<strong>";
$("#" + section).html(newContent.replace("</strong>", ""));
}
alert($("#" + section).html());
}
Thanks for any help you can provide.
UPDATE
I've just come across another solution which does what I want to achieve, but there is a slight issue. At the end of the function call, I perform the following bit of code.
var article = document.getElementById(section);
article.focus();
document.execCommand("Bold", false, null);
The problem is this is working fine in Internet Explorer, but in Chrome is where I am having the problem. When I set the focus back to the <section> tag, it puts the cursor back to the beginning of the text. I read somewhere that putting onfocus="this.value = this.value;" on the control but this doesn't help.
I was trying to find a way of putting the cursor back to the end of the character, but I would actually need to put the cursor back to where it originally was. Is this something that can be done.
create a strong element and append your content to it
$('<strong />').append(content);