if (screen.width <= 699){
$('head').append('<link rel="stylesheet" type="text/css" href="css/stylemobile.css">');
});
Mycket tacksam för hjälp :)
Ingen status
Är reklamen ivägen? Logga in eller registrera dig så försvinner den!
Annons
Problem med jquery/css
Skapad av bunny, 2013-12-25 01:04 i Webbutveckling & Programmering
1 960
5 inlägg
0 poäng
Hej! Någon som kan förstå sig på varför detta inte vill fungera?
if (screen.width <= 699){
$('head').append('<link rel="stylesheet" type="text/css" href="css/stylemobile.css">');
});
Mycket tacksam för hjälp :)
if (screen.width <= 699){
$('head').append('<link rel="stylesheet" type="text/css" href="css/stylemobile.css">');
});
Mycket tacksam för hjälp :)
Svar till bunny [Gå till post]:
Lite trött i huvudet nu, men kan vara för att sidan laddas innan scriptet körs, och därför laddas inte din css-fil in?
Lite trött i huvudet nu, men kan vara för att sidan laddas innan scriptet körs, och därför laddas inte din css-fil in?
Ingen status
Ingen status
Lite sent ute, men det är en hel del saker i din kod som inte stämmer. För det första så har du en stängningsparentes som inte leder någon vart. För det andra så slår bara skriptet in ifall browsern är 699 i bredd från början, och inte när du ändrar storleken på fönstret efter att sidan laddats. För det tredje så har du förmodligen inte lagt skriptet i $(document).ready() så den läses aldrig in ens från början.
Du kan skriva såhär istället:
function mobile() {
var screenWidth = parseInt($(window).width());
if(screenWidth < 700) {
$('head').append('<link rel="stylesheet" type="text/css" href="css/stylemobile.css">');
}
}
$(document).ready(function() {
mobile();
$(window).bind('resize', mobile);
});
Sen kan jag komma med ett tips att inte använda jQuery för att slå in en CSS-fil beroende på storlek på fönstret. Du kan göra detta i ren CSS istället med hjälp av media queries:
(at)media screen and (max-width: 699px) {
(at)import url("stylemobile.css");
}
(at) = snabel-a
Du kan skriva såhär istället:
function mobile() {
var screenWidth = parseInt($(window).width());
if(screenWidth < 700) {
$('head').append('<link rel="stylesheet" type="text/css" href="css/stylemobile.css">');
}
}
$(document).ready(function() {
mobile();
$(window).bind('resize', mobile);
});
Sen kan jag komma med ett tips att inte använda jQuery för att slå in en CSS-fil beroende på storlek på fönstret. Du kan göra detta i ren CSS istället med hjälp av media queries:
(at)media screen and (max-width: 699px) {
(at)import url("stylemobile.css");
}
(at) = snabel-a
La davi, we like to party!
Forum » Datorer & IT » Webbutveckling & Programmering » Problem med jquery/css
Ansvariga ordningsvakter:
Användare som läser i den här tråden just nu
1 utloggadSkriv ett nytt inlägg
Hej! Innan du skriver om ett potentiellt problem så vill vi påminna dig om att du faktiskt inte är ensam. Du är inte onormal och världen kommer inte att gå under, vi lovar! Så slappna av och gilla livet i några minuter - känns det fortfarande hemskt? Skriv gärna ner dina tankar och frågor, vi älskar att hjälpa just dig!