PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
J

Menu

Door John De Zon op 02-05-2015 11:21
1.672 views
Hallo,

ik ben juist begonnen met javascript en bots op een probleem.
Als iemand het venster van mijn website zeer klein maakt kan die de helft van m'n menu niet zien.
Ik heb zoveel links in m'n menu staan dat je er een groot beeldscherm voor nodig hebt. Ik ben dus gaan kijken naar een javascript code.
Ik heb dit, maar het lettertype van het menu wil zich niet aanpassen. Hieronder mijn CSS en JS code.

JS:

var sw, menu;
function screenWidth(){
    sw = screen.width;
    menu = document.getElementById('menu-item')
    if(sw < 1600) {
        menu.style.fontSize = "10px";
    }
}


CSS:

.menu-item a:link, #menu-item, .menu-item a:visited {
    display: block;
    width: 160px;
    height: 50px;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #98bf21;
    text-align: center;
    padding: 4px;
    text-decoration: none;
    text-transform: uppercase;
    background: #004A95;
    font-size: 18px;
}


Mvg
Marthijn Buijs
02-05-2015 11:24 gewijzigd op 02-05-2015 11:24
Voor dit soort dingen aan te passen zou ik jQuery gebruiken, dit werkt veel makkelijker met CSS toevoegen aan een element.
Maar wat je beter zou kunnen doen is gebruik maken van CSS3 Media Queries, hiermee kan je ook styling van elementen aanpassen bijvoorbeeld als het venster minder is dan 1600px breedt.
J
John De Zon
02-05-2015 11:28
Bedankt voor de snelle reactie!
Maar ik zou niet weten hoe ik het moet aanpakken met jQuery of met CSS3 Media Queries.
Wat doe ik fout met JS?
Marthijn Buijs
02-05-2015 11:34 gewijzigd op 02-05-2015 11:38
jQuery Includen:
<script src="https://code.jquery.com/jquery.min.js" type="text/javascript"></script>


En nu de code die dan de tekstgroote moet aanpassen:
<script type="text/javascript">
var sw = $(window).width();

if(sw < 1600) {
    $('#menu-item').css('font-size', '10px');
}

$(window).resize(function() {
	var sw = $(window).width();

	if(sw < 1600) {
 	   $('#menu-item').css('font-size', '10px');
	}
});
</script>


Ik denk zoiets.. (code niet getest)

Edit: code aangepast, anders gaat ie niet werken als je het venster breeder of smaller maakt.
J
John De Zon
02-05-2015 11:38
Nogmaals bedankt!
De code werkt spijtig genoeg niet...
Ik weet helemaal niet meer wat te doen...
Marthijn Buijs
02-05-2015 11:40 gewijzigd op 02-05-2015 11:42
Wat als je op F12 drukt? Dan opent je browser als het goed is een console waar ook een eventuele error zou moeten staan.

Edit: Ik weet het al, in je CSS in je post staat .menu-item terwijl je in je JS #menu-item wilt gebruiken.

Dit zou moeten werken:
<script type="text/javascript">
var sw = $(window).width();

if(sw < 1600) {
    $('.menu-item').css('font-size', '10px');
}

$(window).resize(function() {
    var sw = $(window).width();

    if(sw < 1600) {
        $('.menu-item').css('font-size', '10px');
    }
});
</script>
J
John De Zon
02-05-2015 11:48
Nu staat het script lager in de code en werkt het.
Ik moet m'n pagina wel steeds herladen voordat het werkt. Is hier een oplossing voor?
Marthijn Buijs
02-05-2015 11:58
Dat zou die automatisch moeten doen met regel 8 maar als je op F12 drukt, komen er dan errors bij Console?
Ariën
02-05-2015 12:39
Je mist de .ready() functie waarinje jQuery-javascript geladen wordt:


$(document).ready(function(){
// hier je code
});
J
John De Zon
02-05-2015 19:01
Dit maakt geen verschil:

            <script type="text/javascript">
var sw = $(window).width() .ready(function();
if(sw < 600) {
    $('.menu-item a:link').css('font-size', '10px');
    $('.menu-item a:link').css('width', '100px');
})
</script>

Reageren

Inloggen om te reageren