-
Comapre jQuery
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<title>Support</title>
<!--
Coder: Aleksandar Arsic
Languages used: HTML, CSS, Javascript
Contact: https://www.facebook.com/alexander.arsic92
-->
<script src="jquery.js"></script>
<head>
<!--Javascripta-->
<script>
function displayVals() {
var singleValues = $("#select").val();
$("#category p").css("display", "none");
$("#category p").html(singleValues).show(1000);
}
$("#select").change(displayVals);
displayVals();
if ($("#category p").html =="********** Skripte") {
$(".lista").show(1000);
}
</script>
<!--Stilizovanje-->
<style type="text/css">
* {
padding:0px;
margin:0px;
}
body {
background-image: url('http://www.dodaj.rs/f/I/b4/2IHBiOYI/1/bodybg.png');
background-repeat:repeat;
}
#header {
background-image: url('http://www.dodaj.rs/f/3t/Of/1opPkDbT/novilogo.png');
background-repeat:none;
margin-left:100px;
margin-top:30px;
width:282px;
height:100px;
}
#navigation {
background-color:#e4e4e4;
border-bottom:1px solid #b3b3b3;
width:100%;
height:31px;
}
#main {
margin-top:30px;
background-color:#fff;
opacity:0.7;
width:900px;
height:800px;
margin-left:auto;
margin-right:auto;
border:1px solid #ACACAC;
margin-bottom:20px;
}
#footer p{
text-align:center;
font-family: Segoe UI;
font-size:11px;
color:#000;
margin-top:-10px;
margin-bottom:10px;
}
#twitter {
background-image: url('http://www.dodaj.rs/f/2s/8M/1LEahmex/twitter.png');
background-repeat:none;
width:31px;
height:31px;
}
#twitter:hover {
background-color: #31b9d6;
}
#facebook {
background-image: url('http://www.dodaj.rs/f/36/41/4q25opzV/facebook.png');
background-repeat:none;
width:31px;
height:31px;
}
#facebook:hover {
background-color: #1a3ba6;
background-position: 0px -31px;
}
#dev {
background-image: url('http://www.dodaj.rs/f/2M/BL/2IeId58I/deviantart.png');
background-repeat:none;
width:31px;
height:31px;
}
#dev:hover {
background-color: #90a275;
}
.soc_ico {
float:left;
list-style-type:none;
}
.soc_ico li {
display:inline-block;
}
.selekcija {
width:170px;
height:30px;
background-color:#fff;
margin-top:10px;
margin-left:10px;
font-family: Segoe UI;
border:1px solid #ACACAC;
}
.selekcija option {
font-family: Segoe UI;
}
.a1 {
margin-left:10px;
font-family: Segoe UI;
}
.dugme {
background-color:#79c6cc;
width:60px;
height:30px;
border:1px solid #6a9292;
font-family: Segoe UI;
}
#category {
position:relative;
width:250px;
height:40px;
background-color:#e4e4e4;
margin-left:-30px;
border:1px solid #ACACAC;
margin-top:40px;
}
#category p {
line-height:40px;
font-family: Segoe UI;
text-align:center;
display:none;
}
#category:after {
content: ' ';
position:absolute;
width: 0;
height: 0;
left: 0px;
top: 100%;
border-width: 5px 14px;
border-style: solid;
border-color: #666 #666 transparent transparent;
}
.lista {
display:none;
margin-top:20px;
margin-left:40px;
}
.lista li {
font-family: Segoe UI;
}
</style>
</head>
<body>
<div id="navigation">
<ul class="soc_ico">
<li><div id="twitter"></div></li>
<li><div id="facebook"></div></li>
<li><div id="dev"></div></li>
</ul>
</div>
<div id="header"></div>
<div id="main">
<form>
<label class="a1">Izaberite opciju:</label>
<select class="selekcija" id="select">
<option>********** Skripte</option>
<option>Design</option>
<option>FAQ</option>
</select>
<input type="button" value="Find" class="dugme" onClick="displayVals();"/>
</form>
<div id="category"><p></p></div>
<ol class="lista">
<li>Gost vidi jedno, član vidi drugo</li>
<li>Something</li>
<li>Something</li>
</ol>
</div>
<div id="footer"><p>All rights reserved © 2013 Design4U</p></div>
</body>
</html>
That's full webpage, but I need only one thing from it. I want to compare value from Category p to see if it's equal to "********** skripte", and if it si, then show hidden list. :D
-
Re: Comapre jQuery
Have you tried outputting $("#category p") using console.log() to see if html is the attribute you need? I don't know if that's specific to jQuery but isn't it normally innerHTML?
Depending what browser you're on I find the console.log() can be more helpful, e.g. I think Chrome does it very well as it passes the object and lets you inspect it from the console.... Firefox may do this too now but not sure, tend to use Chrome to debug nowadays.
