how to change src value in javascript?

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Jenny Song
    New Member
    • Dec 2010
    • 5
    #1

    how to change src value in javascript?

    I want to change the advertisement url for different browser/device viewport width. So far, I found a code to detect viewport width, I need detailed help to change the url. Thanks in advance!
    This is the code for the viewport width:
    Code:
    var viewportwidth;
 if (typeof window.innerWidth != 'undefined')
 {
      viewportwidth = window.innerWidth
 }
 else if (typeof document.documentElement != 'undefined'
     && typeof document.documentElement.clientWidth !=
     'undefined' && document.documentElement.clientWidth != 0)
 {
       viewportwidth = document.documentElement.clientWidth
 }
 else
 {
       viewportwidth = document.getElementsByTagName('body')[0].clientWidth
 }
    Now, this is what I want to do:
    Code:
    if ( viewportwidth > 1024 )
 {
use this ads: <SCRIPT  SRC="url for big banner" type="text/javascript"></SCRIPT>
 }
else {
use the ads:<SCRIPT SRC="url for small banner" type="text/javascript"></SCRIPT>
}
    Tags: javascript, php, viewport
    • Samishii23
      New Member
      • Sep 2009
      • 246
      #2
      404 Not Found
      http://www.hunlock.com/blogs/Howto_Dynamically_Insert_Javascript_And_CSS


      Taken from above link near bottom of page:
      Code:
      function startup() {
   var headID = document.getElementsByTagName("head")[0];         
   var newScript = document.createElement('script');
   newScript.type = 'text/javascript';
   newScript.src = 'http://api.flickr.com/services/feeds/photos_public.gne?tags=sunset&format=json';
   headID.appendChild(newScript);  
}
<body onload='startup()'>

        Comment

        • Jenny Song
          New Member
          • Dec 2010
          • 5
          #3
          Thanks! But this code doesn't say the condition of viewport. I need to inset a big banner if viewport>1024, and insert a small banner if viewport<1024
          How to add this condition in your code?

            Comment

            • Samishii23
              New Member
              • Sep 2009
              • 246
              #4
              Are you trying to get the users resolution width and height?

                Comment

                • Jenny Song
                  New Member
                  • Dec 2010
                  • 5
                  #5
                  yes, I got the user's browser viewport width via first javascrip. Now I need to deliver different content for different width.

                    Comment

                    • Samishii23
                      New Member
                      • Sep 2009
                      • 246
                      #6
                      You talking about something like resizing the HTML content based on what you get back from the View Port?
                      If thats all you want to do you could just simply in your HTML style declarations, just use %'s when dealing with widths, maybe not as much with heights, but with %, the browser will dynamically size the HTML content for you based on how big the window is.
                      Code:
                      <style>
#ContentNav {
  width: 15%;
  min-width: 100px; /* Won't resize below 100px */
  }
#ContentBody {
  width: 80%;
  min-width: 300px;
  }
</style>

                        Comment

                        • Samishii23
                          New Member
                          • Sep 2009
                          • 246
                          #7
                          After looking through Mozilla Developer Network min-width compatibility reference, if you want to not use %'s that be fine. However, if it were me, I would typically create a webpage to normally be around 600-800px wide max anyways. Most based on content and what not.

                          Most people today don't normally have computers with resolutions below 1024x768 anyways. If they do then chances are they are not browsing the web with it. I would just keep my website's width below 1024, and for the most part you should be fine.

                          Just my 2 cents though.

                          If you still want to resize the pages content I would do something like this:
                          Code:
                          var standardW = [800,1024,1152,1280,1400]; // these are just the resolutions my monitor supports
var desiredW = []; // fill with what you want your widths to be based on monitor View Port, and make sure you match what you want with the same array #
// Again heights are not really a big deal unless you want your webpage to exactly fit the screen.

for ( var i=0; i<standardW.length; i++ ) {
  if ( viewportwidth == standardW[i] ) {
    document.getElementById("ContentBody").style.width = desiredW[i];
    break;
    }
  }
                          There will always be a chance that a user will have a random obscure width size, so if the standardW isn't reached, you'll have to check the viewport to be within a certain range. like:
                          Code:
                          if ( viewportwidth > 800 && viewportwidth < 1024 ) { ... }
                          This is another reason why I'd just make a webpage just one size. Just not too huge.
                          Last edited by Samishii23; Jan 10 '11, 06:24 PM. Reason: tabbed enter too soon

                            Comment

                            • Jenny Song
                              New Member
                              • Dec 2010
                              • 5
                              #8
                              The banner ads can't be done this way. Beside the banner is javascript in itself, the size and contents are done when we choose ads.
                              So, need to change the whole banner script block.

                                Comment

                                Previous template Next
                                Working...