Wątek przeniesiony 2015-12-12 15:45 z Java przez bogdans.

dynamiczna zmiana tla

0

Witam
stworzylem menu ktore powinno pokazywac rozne kolory tla w zaleznosci od tego na jaki element aktywny najedziemy myszka oraz jaka jest aktualna szerokosc okna przegladarki, niestety nie dziala tak jak powinno.
bede wdzieczny za jakiekolwiek sugestie.

<!doctype html>
<html>
<head>
<meta charset="utf-8">

<meta name="viewport" content="width=device-width">

<title>title</title>

<script src="jquery-2.1.1.min.js"></script>
<script src="enquire.min.js"></script>
<script src="js/main.js"></script>

<style>
#menu-wrapper{
width: 500px;
height: 145px;
float:left;
border-color: black;
border-width: medium;
border-style: solid;
}
</style>

<script>

$(function() {

// cache body for speed
var $body = $("body");

// DRY up handler creation
function handlerFactory() {
return {
match : function() {
$("#menu-wrapper").css("background-color", "aqua");

$("#menu-wrapper div ul li a[mouse_over1|='menu1']").mouseover(function(){
$("#menu-wrapper").css("background-color: red;");
})

$("#menu-wrapper div ul li a[mouse_over2|='menu2']").mouseover(function(){
$("#menu-wrapper").css("background-color: deepskyblue;");
})

$("#menu-wrapper div ul").mouseleave(function(){
$("#menu-wrapper").css("background-color", "aqua");
})

},

unmatch : function() {
$("#menu-wrapper").css("background-color: bisque;");

$("#menu-wrapper div ul li a[mouse_over1|='menu1']").mouseover(function(){
$("#menu-wrapper").css("background-color: darkblue;");
})

$("#menu-wrapper div ul li a[mouse_over2|='menu2']").mouseover(function(){
$("#menu-wrapper").css("background-color: darkgray;");
})

$("#menu-wrapper div ul").mouseleave(function(){
$("#menu-wrapper").css("background-color: bisque;");
})

}
};
}

// hook up our "media queries"
enquire
.register("screen and (max-width : 768px)", handlerFactory())
.listen();

});

</script>

</head>

<body>
<div id="menu-wrapper">
<div>

<ul>
<li class="menu1"><a href="#" mouse_over1="menu1">menu1</a>
<ul class="sub-menu1">
<li><a href="#">sub-menu1</a></li>
</ul>
</li>

<li class="menu2"><a href="#" mouse_over2="menu2">menu2</a>
<ul class="sub-menu2">
<li><a href="#">sub-menu2</a></li>
</ul>
</li>

</ul>

</div> 

</div>

</body>

</html>

pozdrawiam
Ba

0

Nie działa tak jak powinno, bo nie wywołujesz metody .css() tak jak powinieneś. Poza tym metoda .listen() też jest zbędna (chyba, że używasz jakiejś starej wersji enquire.js.

Poza tym nie używaj takich tasiemców, są powolne i paskudne:

$("#menu-wrapper div ul li a[mouse_over1|='menu1']")

Zamiast tego wystarczyłoby nadanie klas i odwołanie bezpośrednio do nich. No i używaj zmiennych - nie musisz pobierać tego samego elementu DOM dwadzieścia razy.

PS
Zastanawiam się, czy Ci tam w ogóle js potrzebny.

1

Najpierw:

// cache body for speed
var $body = $("body");

A potem:

$("#menu-wrapper div ul li a[mouse_over1|='menu1']")

Dobry żart.

Poza tym w jQuery istnieje taka metoda jak addClass (https://api.jquery.com/addclass/), którą powinieneś używać zamiast wrzucania cssów przez js.

1 użytkowników online, w tym zalogowanych: 0, gości: 1