2011-07-21 2 views
1

Я создаю простой букмарклет (никогда не делал этого раньше), и хотя скрипт выполняется просто отлично (сейчас не так много), таблица стилей CSS, которая внедряется, не распространяется на HTML.CSS не применяется в закладке

Ссылка активации выглядит следующим образом (домен изменен):

<a href="javascript:(function(){document.head.appendChild(document.createElement('script')).src='http://www.mydomain.co.uk/cloudlr/app/js/cloudlr.js?rand=' + Math.floor(Math.random()*99999);})();">Do this</a> 

Затем скрипт называется это:

if (typeof jQuery == 'undefined') { 

    appendjQuery(); 

} else { 

    jsVersion = $().jquery; 
    versionArray = jsVersion.split('.'); 

    if (versionArray[1] < 6) { 

     appendjQuery(); 

    } else { 

     runthis(); 

    } 
} 

function appendCSS() { 

    var cloudlrCSS = document.createElement('link'); 
    cloudlrCSS.type = 'text/css'; 
    cloudlrCSS.href = 'http://www.mydomain.co.uk/cloudlr/app/css/screen.css'; 
    cloudlrCSS.media = 'all'; 
    document.head.appendChild(cloudlrCSS); 

} 

function appendjQuery() { 

    var cloudlrJS = document.createElement('script'); 
    cloudlrJS.type = 'text/javascript'; 
    cloudlrJS.onload = runthis; 
    cloudlrJS.onreadystatechange = function() { 

     if (this.readyState == 'loaded' || this.readyState == 'complete') { 
      runthis(); 
     } 

    } 
    cloudlrJS.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'; 
    document.head.appendChild(cloudlrJS); 
} 

function runthis() { 

    appendCSS(); 

    $(document).ready(function() { 

     $("img").each(function() { 
      var $this = $(this); 
      var imageWidth = $(this).width(); 
       $(this).before(imageWidth); 
     }); 

     var cloudlrOverlay = '<div id="cloudlr-content">This is some content.</div><div id="cloudlr-overlay"></div>'; 

     $("body").append(cloudlrOverlay); 

    }); 


} 

Надеется, что все довольно просто.

Сценарии выполняются просто отлично (jQuery), но CSS не применяется. Если я посмотрю «сгенерированный источник», я вижу, что CSS был вставлен отлично, и ссылка на файл работает. Поэтому я не уверен, что происходит.

Я новичок в этом и приветствую любые дополнительные рекомендации по лучшим практикам, а также решение проблемы.

Большое спасибо, Michael.

+0

Какой браузер это? –

+1

вы можете попробовать установить «cloudlrCSS.rel = 'stylesheet»; ' –

+0

Грег - это на него отвечало! Теперь он работает. Кто бы мог подумать? Возможно, это был браузер. Я использовал Firefox 5. Большое вам спасибо. Напишите это как вопрос, и я дам вам очки. Береги себя. –

ответ

1
$("img").each(function(i,n) { 
    var $this = $(n);//don't know why this is here but hey 
    var imageWidth = $(n).width(); 
     $(n).before(imageWidth); 
}); 

это обычная ошибка ... Я думаю, что это может помочь вам

+0

Спасибо за ваш вклад, я учту это. Любой шанс, что вы могли бы помочь мне в вопросе стилей? –

+0

'$ (this) .before (imageWidth);' вы не можете добавить элемент к его ширине, прежде чем добавлять элемент перед другим ... не так ли? – Val