javascript help

Printable View

Show 40 post(s) from this thread on one page

04-17-2012, 01:57 PM
Alan92RTTT

javascript help

I'm having an issue with this code

PHP Code:

<head> <style> div.div_3sg { width: 100%; } div.tab_3sg { border: 1px solid; margin: auto; clear: both; height: 120px; width: 98%; padding-left: 4px; } #tabs li { list-style: none outside none; } #tabs ul { padding: 0; border-bottom: 0 none !important; } #tabs li, #tabs li a { float: left; } #tabs ul li{ font-weight: bold; padding: 8px; text-decoration: none; cursor: pointer; } </style> </head> <script type="text/javascript"> document.write("\<script src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'>\<\/script>"); </script> <body> <div id="tabs" class="div_3sg"> <div style="display: block; float: left; "> <ul> <script type="text/javascript"> jQuery.getJSON( "include_js.php",function(data){ jQuery.each(data.groups, function(id, group){ var a=1; document.writeln('<li id="#tab-'+(id+1)+'">A'+group.name+'</li>'); }); }); </script> </ul> </div> </div> </body>

That code produces the following result.

PHP Code:

<li id="#tab-1">AEvents</li> <li id="#tab-2">AGroups</li> <li id="#tab-3">AInformation</li>

Can anyone see why its freaking out and clearing everything off the page.
04-17-2012, 03:58 PM
VR4Rob

Looks like you missed a </div> tag on the tag before the </body> tag.
04-17-2012, 04:37 PM
Alan92RTTT

Fixed the div tag, no change.

If it helps in FF the spinner on the tab keeps spinning.

I've got to get some nocache headers in it. It runs once, fails and I can't open fire bug on it and get it to rereun without closing the tab and entering it from the address bar(no shift-refresh does not work)
04-17-2012, 04:40 PM
Alan92RTTT

uploaded here if anyone wants to look

http://3sg.org/beta/3sg_footer.htm
04-18-2012, 05:17 AM
stealthify

Give this a try:

PHP Code:

<head> <style> div.div_3sg { width: 100%; } div.tab_3sg { border: 1px solid; margin: auto; clear: both; height: 120px; width: 98%; padding-left: 4px; } #tabs li { list-style: none outside none; } #tabs ul { padding: 0; border-bottom: 0 none !important; } #tabs li, #tabs li a { float: left; } #tabs ul li{ font-weight: bold; padding: 8px; text-decoration: none; cursor: pointer; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> </head> <body> <div id="tabs" class="div_3sg"> <div id="tabHeader" style="display:block; float:left;">  </div> </div> <script> $.getJSON('3sgTabs.json', function(data) { var items = []; $.each(data.groups, function(id, group) { items.push('<li id="tab-' + (id+1) + '">' + group.name + '</li>'); }); $('<ul/>', { 'class': 'tabCategories', html: items.join('') }).appendTo('#tabHeader'); }); </script> </body>

Output generated is:

PHP Code:

<div id="tabs" class="div_3sg"> <div id="tabHeader" style="display:block; float:left;"> <ul class="tabCategories"> <li id="tab-1">Events</li> <li id="tab-2">Groups</li> <li id="tab-3">Information</li> </ul> </div> </div>

Working demo:

http://www.stealthify.com/3sgto/projects/3sgTabs.php
04-18-2012, 07:18 AM
Alan92RTTT

Can you explain why what I did , did what it did?
04-18-2012, 08:05 AM
stealthify

I didn't look too far into it. I just recreated it from scratch with how I would do it, and then adapted it to what you were trying to accomplish.

Looking at it a little closer now, your problem line is using document.writeln to begin writing to the document and then not using the document.close() method to close the output stream.
04-18-2012, 08:16 AM
Alan92RTTT

I originally used document.write() would that still need the close?
04-18-2012, 08:30 AM
stealthify

Yep, that's pretty much identical to .writeln, except .writeln will put a new line after it. Both open and write to the output stream.

Once all the writes are performed, the document.close() method causes any output written to the output stream to be displayed.
04-18-2012, 08:33 AM
Alan92RTTT

wonder if thats what broke it.

I'll have to try it at lunch

I'll probably use yours tho I like it better.
04-18-2012, 08:36 AM
stealthify

Should do the trick, and hope that helps. Let me know how it goes.
04-18-2012, 08:39 AM
Alan92RTTT

thanks. I will
04-18-2012, 01:39 PM
Alan92RTTT

(*%$)*$)(*#(*

I got it working, I changed it a bit and it still worked.

I added the code to add the links and %_*)*)*(%^#

PHP Code:

<head> <style> div.div_3sg { width: 100%; } div.tab_3sg { border: 1px solid; margin: auto; clear: both; height: 120px; width: 98%; padding-left: 4px; } #tabs li { list-style: none outside none; } #tabs ul { padding: 0; border-bottom: 0 none !important; } #tabs li, #tabs li a { float: left; } #tabs ul li{ font-weight: bold; padding: 8px; text-decoration: none; cursor: pointer; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> </head> <body> <div id="tabs" class="div_3sg"> <div id="tabHeader" style="display: block; float: left; "> <ul id="tabUl" >  </ul> </div>  </div> <div id="hidden" style="display:none" class="user_css"><label id="text_color">text</label><a id="link_color" href="#">text</a></div> </body> <script> $(document).ready(function(){ $.getJSON( "include_js.php",function(data){ var items = []; $.each(data.groups, function(id, group) { $('<li id="#tab-'+(id+1)+'">'+group.name+'</li>').appendTo('#tabUl'); var div = '<div id="tab-'+(id+1)+'" class="tab_3sg">'; div = div +'<b>'+group.title+'</b><br>'; $.each(group.links, function(id, link) { div = div + '<a href="'+link.url+'">'+link.name+'</a><br>'; }); div = div + '</div>'; $(div).appendTo('#tabs'); }); }); $('#tabs .tab_3sg').hide(); $('#tabs .tab_3sg:first').show(); $('#tabs ul li:first').addClass('active'); var text_color = $('#text_color').css("color"); var link_color = $('#link_color').css("color"); $('#tabs ul li').css('color',link_color); $('#tabs ul li:first').css('color', text_color); $('#tabs ul li').click(function(){ $('#tabs ul li').removeClass('active'); $(this).addClass('active'); var currentTab = $(this).attr('id'); $('#tabs .tab_3sg').hide(); $(currentTab).show(); $('#tabs ul li').css('color', $('#link_color').css("color")); $(this).css('color', $('#text_color').css("color")); return false; }); }); </script>

You can see what its doing on http://3sg.org/beta/3sg_footer.htm
04-18-2012, 02:23 PM
HilbillyHomeboy

Quote:

Originally Posted by Alan92RTTT

You can see what its doing on http://3sg.org/beta/3sg_footer.htm

The bottom cell, the 1st clickable link is underneath of the header text for that cell. Can not click on it. I'm viewing with Chrome.

Jeremy
04-18-2012, 02:39 PM
Alan92RTTT

if the javascript was working that would not be an issue :p

That page should look/work like the block at the bottom of the page here when its done.
04-18-2012, 05:22 PM
stealthify

Quote:

Originally Posted by Alan92RTTT

(*%$)*$)(*#(*

I got it working, I changed it a bit and it still worked.

I added the code to add the links and %_*)*)*(%^#

So close. Now the problem is the div.tab_3sg CSS parameter. You have it set to a static height of 120px, when perhaps it might be better suited to use a min-height:120px instead.
04-18-2012, 07:58 PM
Alan92RTTT

Height is not the issue unless the JS is working in your browser.

this part of the JS is not running in FF

PHP Code:

$('#tabs .tab_3sg').hide(); $('#tabs .tab_3sg:first').show(); $('#tabs ul li:first').addClass('active'); var text_color = $('#text_color').css("color"); var link_color = $('#link_color').css("color"); $('#tabs ul li').css('color',link_color); $('#tabs ul li:first').css('color', text_color); $('#tabs ul li').click(function(){ $('#tabs ul li').removeClass('active'); $(this).addClass('active'); var currentTab = $(this).attr('id'); $('#tabs .tab_3sg').hide(); $(currentTab).show(); $('#tabs ul li').css('color', $('#link_color').css("color")); $(this).css('color', $('#text_color').css("color")); return false; });
04-18-2012, 08:08 PM
stealthify

Height is an issue when you are programmatically trying to cram more vertical content into a div than you have made room for via CSS.

I know this because the text overlap under your third header is from the runoff of the div above it.

I have updated my version to demonstrate/help:

http://stealthify.com/3sgto/projects/3sgTabs.php
04-18-2012, 08:16 PM
stealthify

But I see what you're saying. Your JavaScript wasn't working in my browser, but even so you would still have a runoff outside of the container div.

The version I just posted should solve that. Hope that helps.
04-18-2012, 08:53 PM
Alan92RTTT

Runoff issue fixed in my version.
04-18-2012, 09:05 PM
Alan92RTTT

you still have AIM?

FYI, you pulled some of the stuff I did with color. I did that so it would pick up the color for what ever page it on. I did not want the tab/links hard coded for color.
04-18-2012, 09:21 PM
Alan92RTTT

I think I see the problem. The appendTo's are not done rendering when the last block of JS is run and its errors. I need a way to make it wait for them.
04-18-2012, 10:41 PM
Alan92RTTT

I think I have it.

Now the next step. I need to be able to include it in an html page with a script tag. fun...
04-19-2012, 12:49 AM
stealthify

I do still have AIM, Shaun I Am.

I'll keep troubleshooting with you. I think you're in the home stretch now though.
04-20-2012, 09:16 AM
Alan92RTTT

I'm having an issue with the json call.

I've moved the html to http://mi3si.org/beta/3sg_footer-2.htm because I am trying to test loading the json from a separate server using jsonp.

You can see the json here http://3sg.org/beta/include_js.php

The JS is coming from 3sg.org and running with no issue until it throws a "missing variable name" error when processing the json results.

json call code.

PHP Code:

var data = $.ajax({ url : 'http://www.3sg.org/beta/include_js.php', dataType : "jsonp", jsonp: 'callback', jsonpCallback: 'getData', timeout : 10000, success: function(){ alert("success"); } }); function getData(data){ $('#tabHeader').text(data.message); }
04-20-2012, 07:58 PM
stealthify

Hmm, if you want to use jsonp, here's how I did it:

3SG.org Tabs Demo (Remote Server)

My copy of the json file that the Portland3S domain is accessing can be found at:
http://www.stealthify.com/3sgto/proj...absXserver.php

Does it work for you?
04-20-2012, 11:41 PM
Alan92RTTT

oh this is frustrating. My code with your include works. With mine(which seems to return the same thing) does not work.

ARG.

PHP Code:

<?php $data = array( "groups"=> array( array( "name" => "Events", "title" => "3000GT/Stealth/GTO Event Pages", "links" => array( array("name"=>"3S National Gathering","url"=>"http://www.3sng.org"), array("name"=>"East Coast Gathering","url"=>"http://www.3secg.com"), array("name"=>"Upper Mid-West Gathering","url"=>"http://umg.mn3s.org"), array("name"=>"Blue Ridge Gathering","url"=>"www.blueridgegathering.com"), ), ), array( "name" => "Groups", "title" => "3000GT/Stealth/GTO Clubs and Groups", "links" => array( array("name"=>"Michigan 3S","url"=>"http://www.mi3si.org"), array("name"=>"MInnesota 3S","url"=>"http://www.mn3s.org"), array("name"=>"Wisconsin 3S","url"=>"http://www.w3si.org"), array("name"=>"3000GT/Stealth/GTO Forums","url"=>"www.3sgto.org"), array("name"=>"Texas 3S","url"=>"www.texas3s.com"), array("name"=>"3000GT/Stealth International","url"=>"www.3sl.org"), ), ), array( "name" => "Information", "title" => "3000GT/Stealth/GTO Information and Resources", "links" => array( array("name"=>"Stealth 316","url"=>"http://www.3sng.org"), array("name"=>"3000GT / Stealth / GTO Information","url"=>"www.3sg.org"), ), ), ), ); $json_data = json_encode($data); echo '<pre>('. $json_data.');</pre>';
04-21-2012, 12:07 AM
stealthify

Remove the pre tags, and designate a callback function (or use the automatically generated one):

PHP Code:

<?php // Build Links Array $data = array( "groups"=> array( array( "name" => "Events", "title" => "3000GT/Stealth/GTO Event Pages", "links" => array( array("name"=>"3S National Gathering","url"=>"http://www.3sng.org"), array("name"=>"East Coast Gathering","url"=>"http://www.3secg.com"), array("name"=>"Upper Mid-West Gathering","url"=>"http://umg.mn3s.org"), array("name"=>"Blue Ridge Gathering","url"=>"http://www.blueridgegathering.com"), ), ), array( "name" => "Groups", "title" => "3000GT/Stealth/GTO Clubs and Groups", "links" => array( array("name"=>"Michigan 3S","url"=>"http://www.mi3si.org"), array("name"=>"MInnesota 3S","url"=>"http://www.mn3s.org"), array("name"=>"Wisconsin 3S","url"=>"http://www.w3si.org"), array("name"=>"3000GT/Stealth/GTO Forums","url"=>"http://www.3sgto.org"), array("name"=>"Texas 3S","url"=>"http://www.texas3s.com"), array("name"=>"3000GT/Stealth International","url"=>"http://www.3si.org"), ), ), array( "name" => "Information", "title" => "3000GT/Stealth/GTO Information and Resources", "links" => array( array("name"=>"Stealth 316","url"=>"http://www.3sng.org"), array("name"=>"3000GT / Stealth / GTO Information","url"=>"http://www.3sg.org"), ), ), ), ); // Encode Links Array to JSON $json_data = json_encode($data); // Collect & Sanitize Random callback parameter $callback = preg_replace("/[^a-zA-Z0-9\.\_\[\]]+/", "", $_GET['callback']); // Output Results echo $callback.'('.$json_data.');';
04-21-2012, 12:16 AM
Alan92RTTT

ah you have some extra stuff in your include ;)

I had a feeling that was the case. I added the pre's because they came out if I pulled your file up in a browser

AWESOME

http://mi3si.org/beta/3sg_footer-2.htm
04-21-2012, 12:19 AM
stealthify

Nice! Glad it worked.

Enjoy.
04-21-2012, 12:27 AM
stealthify

By the way, one thing I've been meaning to mention:

For some of your links, you don't list the fully qualified (absolute) URL. So, for example, 3sg.org links to "http://mi3si.org/beta/www.3sg.org" instead. It happens on the Texas 3S, 3SI, 3SGTO, 3SG and Blue Ridge Gathering links. Just thought I'd give you a heads up in case you hadn't noticed yet.
04-21-2012, 01:11 AM
Alan92RTTT

The array is temporary until I have time to make the database to store them. That code will ensure that all url's have http on them before they are put in the array.

Thanks a ton.

NOw I just need to get the code to load jquery in plain JS working so the HTML just needs one script tag
04-21-2012, 03:18 PM
Alan92RTTT

I've tried several variation on this to get jquery to load within an js file.

PHP Code:

function getScript(url,success){ var head= document.getElementsByTagName('head')[0]; var script= document.createElement('script'); script.type= 'text/javascript'; script.src= url; script.async = true; document.body.appendChild(script); } var jqueryUrl = "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"; getScript(jqueryUrl);

The JS is loaded into the document but it does not initialize.
04-21-2012, 03:25 PM
Alan92RTTT

Before you ask, I am trying to get this all done in one call.

PHP Code:

<script src="http://www.3sg.org/beta/3sg_footer.js"></script>
04-21-2012, 07:54 PM
stealthify

Quote:

Originally Posted by Alan92RTTT

Before you ask, I am trying to get this all done in one call.

PHP Code:

<script src="http://www.3sg.org/beta/3sg_footer.js"></script>

Done.

3SG.org Tabs Demo (Source)
3SG.org Tabs Demo (Remote Server)
04-21-2012, 08:35 PM
Alan92RTTT

Can you explain a few things?

Everything I have read says you should not use document.write yet you did and it works fine.

Whats with the "scr"+"pt" in the document writes?
04-21-2012, 08:48 PM
stealthify

Quote:

Originally Posted by Alan92RTTT

Can you explain a few things?

Everything I have read says you should not use document.write yet you did and it works fine.

Whats with the "scr"+"pt" in the document writes?

Old habits die hard - the scr + pt is legacy code for older browsers. It was taught to me when I was first getting started, but it can be changed to your way and should work the same. Here's some more details:
document.write('<SCR' + 'IPT>'), why? JavaScript and AJAX forum at WebmasterWorld

I've updated my .js file to use the createElement + appendChild methods instead, if that's what you'd prefer to go with.
04-21-2012, 09:06 PM
Alan92RTTT

Well i have a working page. I'm not sure why some things are working as its written and not the way they were but it looks to be working.

NOt sure why the document.ready code had to be put in a function and call the way it is.
04-21-2012, 09:13 PM
stealthify

I'm not a fan of scripting languages :( But with the help of jQuery, etc, it has come a long way.

Glad to see it all working!
04-21-2012, 09:14 PM
Alan92RTTT

Workign from 3sg.org - 3000GT / Stealth / GTO information and Michigan 3SI yay!

Thanks alot.

Show 40 post(s) from this thread on one page