We Keep Coding

Ideas for a correct function on my webpage?

I am having problems with a javascript function. I want to replace an icon by changing the class.
On my page, I have the following element:
<i class="wait icon" alt="{webui_botstatenotavailable}" title="{webui_botstatenotavailable}" id="{botname}"></i>
The following javascript should change the class, but it does not work:
function incomingBotStatusList(http_request, statusOff, statusOn)
{
if (http_request.readyState == 4)
{
if (http_request.status == 200)
{
if (http_request.responseText.length < 7)
{
// Error
}
else
{
var botStatusList = JSON.parse(http_request.responseText);
for (var key in botStatusList)
{
if (botStatusList.hasOwnProperty(key))
{
var botStatusImage = document.getElementById(key);
if (botStatusImage != null)
{
if (botStatusList[key] == 0)
{
botStatusImage.class.innerHTML = "images/bullet_red.png";
botStatusImage.title = statusOff;
botStatusImage.alt = statusOff;
}
else if (botStatusList[key] == 1)
{
botStatusImage.class.innerHTML = "<i class=\"checkmark green icon\">";
botStatusImage.alt = statusOn;
botStatusImage.title = statusOn;
}
}
}
}
}
}
}
}
Did someone from you know how it will work?
Thanks for your help!
Best Regards
Pierre

I see a couple of problems with your code. First, the <i> element is used to apply italic formatting to text. It is not the HTML code for an icon or an image.
Secondly, you write botStatusImage.class.innerHTML, but the Element.class does not exist, and Element.className is a string. It does not have an innerHTML attribute. So, you could write botStatusImage.className = "new_class_name"; and this would be more correct.
You should then change the image source by calling botStatusImage.setAttribute('src', new_url), where you have set new_url to the new image location.
Check out the javascript reference for the Element class that is returned from document.getElementById: check this link
My recommendation, start simple, then make it complex.
First, try to get the icon to change without the AJAX request. Try writing a function like this:
function changeIcon( imageId, newUrl ){
var element = document.getElementById( imageId );
element.setAttribute( "src", newUrl );
}
Then test this function in the console by passing calling it with the URL's manually.
Once that works, don't change it! Next add the AJAX call, and when you have the Icon url from your server response, all you do is call the function that you already wrote and tested. That way you separate the AJAX code from the image update code and you can test them separately.
The key is smaller functions. Build the easy stuff first, and then call those easy functions from the harder functions. Once you know the easy function works well, it becomes much easier to find problems in the harder functions.

Javascript - Hiding Button if not logged in

We have a website using an obsolete e-commerce CMS, really ties my hands behind my back because of it's lack of options and my beginner ability with JS and jQ.
On this site, we need to hide Prices and Add to Cart buttons if the user is not logged in. I have a script that has worked for me in the past that checks the users cookies. But after editing this script for the new site, it proves to not work.
I am probably messing up something very simple in the syntax, so if someone can take a quick look at my script and let me know where I am going wrong that would be great!
<script type="text/javascript">
function DisplayAuthorizedContent(name) {
var cookies=document.cookie;
var start = cookies.indexOf(name + "=");
var name = "";
var start1;
var end1;
var tmp;
var signed_in = -1;
if (start != -1) {
start = cookies.indexOf("=", start) +1;
var end = cookies.indexOf("|", start);
if (end != -1) {
signed_in = cookies.indexOf("|yes", start);
name = unescape(cookies.substring(start,end-1));
if (signed_in != -1) {
$('.loginFilter').show();
}
}
}
if (signed_in == -1) {
$('.loginFilter').empty();
$('.addMessage').each(function(){
$(this).append('Requires Wholesale Account to Purchase.<br><br><a href=\"#\" class=\"applyLink\">Apply Here<\/a>');
$(this).show();
});
}
}
DisplayAuthorizedContent("ss_reg_000778370");
</script>
The HTML
<div class="loginFilter addMessage">Add to Cart Example</div>

Sounds like the button might not be hidden on page load.
Guessing you'd need something like jQuery:
$('.loginFilter').hide();
you can hide the button with javascript (you'd have to add the id = 'button' to HTML)
document.getElementById('button').style.visibility = 'hidden';
here are some hide/show references:
http://www.w3schools.com/jquery/jquery_hide_show.asp
Hiding a button in Javascript

Is it possible to toggle these js tabs through the web console?

I was just wondering if it is possible!
i could not figure it out if it is possible, dont ask why i need it i just do. IT would be very helpful if you could tell me.
var TabToggled = 0;
function ToggleTab(value){
if (value == 0){ // Toggle the register tab;
if (TabToggled == 1){
TabToggled = 0
$("#LoginForm_Landing").hide();
$("#RegistrationForm_Landing").show();
$(".RegisterTab").removeClass("RegisterTab_Deselected");
$(".LoginTab").removeClass("LoginTab_NowSelected");
}
}else{
if (TabToggled == 0){
TabToggled = 1
$("#LoginForm_Landing").show();
$("#RegistrationForm_Landing").hide();
$(".RegisterTab").addClass("RegisterTab_Deselected");
$(".LoginTab").addClass("LoginTab_NowSelected");
}
}
}

I think what you're looking for is just opening the JavaScript console on your browser and entering something like this ToggleTab(0) or ToggleTab(1)

Selecting pictures with Jquery and Javascript

I'm testing out a layout on a website using 3 pictures here:
Schechterbusiness.info
the left button works, making it go through the pictures. But I can't figure out how to get the right button to work, which is supposed to scroll through the other way. I know there's probably a way to do it with arrays but I can't wrap my brain around it. Halp!
Code to scroll through pictures:
$('#fryLink').click(function() {
$('#hide').hide();
$('#img').hide();
count++;
if(count == 1) {
$('#img').attr("src","images/fry.png");
}
else if(count == 2) {
$('#img').attr("src","images/bender.png");
}
else if(count == 3) {
$('#img').attr("src","images/zoidberg.png");
}
$('#img').show("fade");
if(count > 2) {
count = 0;
}

normally it should be enough to just use use the same function the other way around with
count--;

following the first answere
Bind event to right mouse click
reverse the counter ;)

You have count cycling through four states: 0, 1, 2, and 3. But you only set the image for states 1 - 3.
This leads to duplicating one image--whichever was the last one--when your count variable is on 0.
As to helping you get exactly what you want, unfortunately that is not really clear. Are the three buttons supposed to be a sort of "forward / something / reverse"? What do you want to happen when the center button is clicked on?
Also, making the buttons display the proper pointer/hand icon is important. Right now they show the text selection bar instead, and that makes it confusing since it conveys to the user that the items are not clickable.

Try this
var count = 0;
var imgLength = 3;
$('#leftLink , #rightLink').click(function() {
$('#hide').hide();
$('#img').hide();
if (this.id === 'leftLink') {
count--;
if (count < 0) {
count = imgLength-1;
}
}
else {
count++;
if (count > imgLength-1) {
count = 0;
}
}
var src = "images/fry.png";
if (count == 1) {
src = "images/bender.png";
}
else if (count == 2) {
src = "images/zoidberg.png";
}
$('#img').attr('src',src).show("fade");
});​

How can I call a function when the mouse is no longer over a nav link?

I have nav code like this in my HTML file:
<div id="center_links">
<ul>
<li>about</li>
<li>blog</li>
...and so on.
My JavaScript looks like this:
function setSideText(setting)
{
if (setting == 0) // Home
{
document.getElementById('center_text').innerHTML = '<p><div class="dropcap">#</div>I am an information technology student interested in free and open source software.</p>';
}
else if (setting == 1) // About
{
document.getElementById('center_text').innerHTML = '<p><div class="dropcap">#</div>My name is David Gay, and this is my website. Welcome.</p>';
}
else if (setting == 2) // Blog
{
document.getElementById('center_text').innerHTML = '<p><div class="dropcap">#</div>My blog runs on the Chyrp blog software.';
}
When I mouseover a link, the side text on my page changes to describe the link. I want the text to change back to the default (setSideText(0)) when I'm not mousing over a nav link. I've been playing around with it for a bit now and I haven't been able to figure it out.
I tried adding this to the JavaScript file, but to no avail:
document.getElementById('center_links').onMouseOut = setSideText(0);
I figured it wouldn't work, anyway.
I'm sure there's a simple solution that I'm not thinking of (I just picked up the language). Any guidance is appreciated!

I'd make two primary suggestions, the first: don't use inline event-handlers (it's more maintainable to have your behaviour in one place) and the second is to use onmouseout on the parent center_links element.
To that end:
function setSideText(setting) {
if (setting == 0) // Home
{
document.getElementById('center_text').innerHTML = '<p><div class="dropcap">#</div>I am an information technology student interested in free and open source software.</p>';
}
else if (setting == 1) // About
{
document.getElementById('center_text').innerHTML = '<p><div class="dropcap">#</div>My name is David Gay, and this is my website. Welcome.</p>';
}
else if (setting == 2) // Blog
{
document.getElementById('center_text').innerHTML = '<p><div class="dropcap">#</div>My blog runs on the Chyrp blog software.';
}
}
var linksElem = document.getElementById('center_links'),
links = linksElem.getElementsByTagName('a');
for (var i = 0, len = links.length; i < len; i++) {
links[i].dataIndex = i+1;
links[i].onmouseover = function() {
setSideText(this.dataIndex);
};
}
linksElem.onmouseout = function(){
setSideText(0);
}
JS Fiddle demo.
Edited to amend the setSideText() function to respond to words rather than an index (because I think it's easier for adding subsequent links at a later date and doesn't rely on being able to add arbitrary attributes to the elements, though it does require that the element have an id attribute...):
function setSideText(setting) {
if (setting == 'home' || setting == 0)
{
document.getElementById('center_text').innerHTML = '<p><div class="dropcap">#</div>I am an information technology student interested in free and open source software.</p>';
}
else if (setting == 'about')
{
document.getElementById('center_text').innerHTML = '<p><div class="dropcap">#</div>My name is David Gay, and this is my website. Welcome.</p>';
}
else if (setting == 'blog')
{
document.getElementById('center_text').innerHTML = '<p><div class="dropcap">#</div>My blog runs on the Chyrp blog software.';
}
}
var linksElem = document.getElementById('center_links'),
links = linksElem.getElementsByTagName('a');
for (var i = 0, len = links.length; i < len; i++) {
links[i].onmouseover = function() {
setSideText(this.id);
};
}
linksElem.onmouseout = function(){
setSideText(0);
}
JS Fiddle demo.

The only reason why that didn't work is because when setting these DOM events in Javascript, there is no capitalization; simply change .onMouseOut to .onmouseout.
I have no idea why they decided to be inconsistent between the HTML and Javascript names of these events. (Another reason why people hate on the DOM, I suppose.)

You need to trigger the function onMouseOut the same way you trigger the function onMouseOver
Your link HTML needs to look like this:
blog
I would recommend looking into jQuery for stuff like this - it makes handling events and DOM manipulation much more straight forward!
There's a great free course here: http://tutsplus.com/course/30-days-to-learn-jquery/