SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,738
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Quick question novice - var html =

    Hi all

    been at this for hours now... I just need to some how get the link to work below:

    The second line is the problem
    '+ web +' = www.example.com

    Code JavaScript:
    var html = "<b>" + name + "</b> <br />" + address + "<br /><br />", 
    '<a target="_blank" ', 'href="http://( '+ web + ')">'website"</a><br />" + social;


    Thanks

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Break it up into a series of easier to manage additions, so that you can more easily see where the trouble lies.

    Single quotes and javascript strings really helps too.

    Code javascript:
    var html = '<b>' + name + '</b> <br />';
    html += address + '<br /><br />';
    html += '<a target="_blank" ' + 'href="http://(' + web + ')">';
    html += website + '</a><br />';
    html += social;
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,738
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks

    Ok somethings not right with the above code when I load my map all the markers disappear?

    Heres the full code for that section before I added the above code which works ok but without the links:
    Code JavaScript:
     function createMarker(point, name, address, web, social, type) {
          var marker = new GMarker(point, customIcons[type]);
    	  markerGroups[type].push(marker);
     
          var html = "<b>" + name + "</b> <br />" + address + "<br /><br />" + web + "<br />" + social;
    	  GEvent.addListener(marker, 'click', function() {
            marker.openInfoWindowHtml(html);
          });
     
    	  gmarkers[i] = marker;
    	  side_bar_html += '<a href="javascript:myclick(' + i + ')"><strong>' + name + '</strong></a><br />';
    		i++;
     
          return marker;
        }

    Now the code supplied by pmw57 which should apply the links to 'web' but makes the markers disappear:

    Code JavaScript:
    function createMarker(point, name, address, web, social, type) {
          var marker = new GMarker(point, customIcons[type]);
    	  markerGroups[type].push(marker);
     
    	  var html = '<b>' + name + '</b> <br />';
    		html += address + '<br /><br />';
    		html += '<a target="_blank" ' + 'href="http://(' + web + ')">';
    		html += website + '</a><br />';
    		html += social;
     
    	  GEvent.addListener(marker, 'click', function() {
            marker.openInfoWindowHtml(html);
          });
     
    	  gmarkers[i] = marker;
    	  side_bar_html += '<a href="javascript:myclick(' + i + ')"><strong>' + name + '</strong></a><br />';
    		i++;
     
          return marker;
        }

    Thanks Guys?

  4. #4
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Shouldn't this - 'href="http://(' + web + ')">' - be this: --> 'href="http://' + web + '">'... ??? (Without the brackets?)
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  5. #5
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,738
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Jimmy thats the problem I cant see if it works because as soon as I replace my code with the update code all my markers disappear (they don't load on to the map) ?

    I just tried your change and still no markers?

    Thanks again

  6. #6
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,738
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It works with:

    Code JavaScript:
    var html = "<b>" + name + "</b> <br />" + address + "<br /><br />" + web + "<br />" + social;

    but as soon as I replace the above with:

    Code JavaScript:
    var html = '<b>' + name + '</b> <br />';
            html += address + '<br /><br />';
            html += '<a target="_blank" ' + 'href="http://(' + web + ')">';
            html += website + '</a><br />';
            html += social;

    they disappear?

  7. #7
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Where are you getting the variable named "website"??
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  8. #8
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,738
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it should of been web!

    Thanks for pointing this out Jimmy...

    Question:

    1. Were I had every variable on the same line before, what does html += achieve by adding it to every variable separately?

    2. What would be the right syntax to link to one of markers from a different page?
    (example page1 has a link saying find on map, when clicked open page2 and opens marker window?)

    Thanks again Jimmy really appreciate the help
    Last edited by computerbarry; Aug 2, 2008 at 11:04.

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    A1. With every variable on the same line it becomes more difficult to understand the code, especially when it wraps around the line several times.

    By breaking up the code in to bite-sized chunks, that makes it easier to tell what's happening.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,738
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    cheers pmw57 but I could just press return couldn't I? why use html += for every line when it's ok using 1 with all the variables on a single line?

    thanks

  11. #11
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,869
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by computerbarry View Post
    cheers pmw57 but I could just press return couldn't I? why use html += for every line when it's ok using 1 with all the variables on a single line?

    thanks
    When you have separate statements on separate lines the browser can give a more accurate indication of where the error is when it tells you which line it is on. If everything is on one line and the browser tells you that the error is on that line you still don't know where on the line the error is.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  12. #12
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,738
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I see. So what your saying is it's just for checking your errors? And when everything is ok you can remove them or keep it there anyway?

    thanks

  13. #13
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    It's not just for checking for errors. It's for when you come back to the code some 6 months or two years later on. You want the code to be as easily understandable as possible.

    It's a general principle that should be applied to all code. When the code is strung out on one line it's a lot harder to understand what's going on.

    What does the following do? I have deliberately changed the function name so that the code can speak for itself.

    Code javascript:
    function someFunction(el, declarations) { var i, pair, property, value; declarations = declarations.split(';'); for (i = 0; i < declarations.length; i += 1) { pair = declarations[i].split(':'); property = dashToCamelCase(trim(pair[0])); value = trim(pair[1]); el.style[property] = value; } }

    Compare with the following, which is properly indented and separated.

    Code javascript:
    (function someFunction(el, declarations) {
    	var i, pair, property, value;
    	declarations = declarations.split(';');
    	for (i = 0; i < declarations.length; i += 1) {
    		pair = declarations[i].split(':');
    		property = dashToCamelCase(trim(pair[0]));
    		value = trim(pair[1]);
    		el.style[property] = value;
    	}
    }

    As time goes on you forget why you did things. Good variable names and appropriate formatting go a long way to aiding this objective.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  14. #14
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,738
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot pmw57 just lesson and explanation there and thanks for your time cheers!

    If you do get the time maybe have a look at my other thread just below this one, see if you can find where I'm going wrong.
    http://www.sitepoint.com/forums/showthread.php?t=563454

    Thanks again


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •